Brings the merged Link component work (PR #3868) plus panelstack and
carousel fixes onto the new Button system.
Conflict resolutions:
- about/{index,history,impact}.page.tsx: keep both branches' imports;
/about CTAs use the new Button; Link component retained for the
inline validators links and FAQ markup.
- StandardCard: link color moves to $black/$lilac-500. Required, not
cosmetic: the branch's $bds-btn-neutral-black no longer exists after
the Button token system was replaced by $bds-btn-palette.
- Compiled CSS regenerated via npm run build-css rather than resolved
by hand.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Eighteen icon components behind one barrel at shared/components/Icons.
Every icon renders at 1em in currentColor and is aria-hidden, so size,
colour and accessible naming all come from whatever contains it.
The two link arrows carry motion. They are drawn as separate head and
tail elements on purpose: the tail retracts to nothing while the head
advances, which a single path cannot do, and a flattened replacement
renders correctly while silently losing the animation.
One inherited custom property is the whole contract:
--xrpl-icon-engaged: 0 at rest … 1 engaged
It names the cause rather than the effect. A container knows its own
hover and focus states but not which icon it holds, so each icon decides
what engagement means for it, and an icon with no stylesheet ignores the
signal and stays static.
Containers drive it with the xrpl-icon-engaged mixin, which emits
`> .xrpl-icon` — one level, then stop. That is what keeps a hovered card
from engaging the arrow inside a button it merely contains. Include it
on the element the icon actually sits in, which is not always the
element carrying the state; attached too high it matches nothing, which
fails as a missing animation rather than a wrong one. The rest value
declared on .xrpl-icon blocks a container that sets the property
directly instead of using the mixin.
Where the trigger is React state rather than a CSS state there is no
pseudo-class to hang the mixin off, so the arrows take an optional
`engaged` prop. Omitted it writes nothing at all; `false` is deliberately
different, pinning the icon still.
Fourteen of the icons are Google Material artwork under Apache-2.0. Each
file names its exact upstream source and commit, and lists the
modifications made to it; the licence entry is in LICENSE at the root.
Adds /icon-demo as the reference page for the set. It is linked from
nowhere and excluded from site search and sitemap.xml, but deliberately
left out of redocly.yaml's ignore list, which would 404 it under
`realm develop` too.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* BDS component polish: link visibility, static cards, uniform CTAs
Component-level fixes and refinements across the 2026 brand components.
Accessibility / contrast
- StandardCard: pin description link colors. Every card variant has a light
background in both themes, so theme-level link colors were wrong inside it —
dark mode painted plain anchors white and BdsLink lilac-300, both of which
wash out on a pale card. Links (including :visited) now use the card's own
text color with an underline carrying the affordance; hover uses lilac-500,
which clears 4.5:1 on all four card backgrounds.
- Breadcrumbs: point the open dropdown menu at the breadcrumb color tokens so
the trail, trigger, and menu read as one color in both themes, and give dark
mode gray-6 (7.41:1, matching light mode's 7.23:1).
Interaction
- CardOffgrid: drop every hover affordance when a card has neither href nor
onClick. Static cards no longer get a pointer cursor, the color-wipe overlay,
or a pressed state — the tokenization and trading carousels pass link-less
cards and were advertising a click target that did not exist.
- CarouselFeatured: add a 'fade' transition alongside the default 'slide', for
decks whose slides share a heading. Inactive slides are now inert, keeping
focus and pointer events out of them in both styles.
- Add a bds-reduced-motion mixin so components can collapse motion to an
instant state change.
Design consistency
- ButtonGroup: add forceVariant and forceNoPadding overrides, letting a section
opt out of the count-based variant defaults and render one uniform treatment.
Existing consumers are unaffected.
- FeatureTwoColumn: render every link as a tertiary button regardless of count,
flush with the title and description.
- CardImage: render an all-bullet subtitle as a real <ul> so wrapped text hangs
under the first character and screen readers announce it as a list.
- docs: give the node-installation card descriptions a paragraph break before
their "Learn More" link.
Dependencies
- Bump @codemirror/state and view, add lang-javascript, lang-json, and lint,
with overrides pinning state/view to one copy.
Docs updated alongside each component. Built CSS regenerated with the
production script to match the committed artifact's minified format.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* ButtonGroup: don't strip padding from forced filled variants
`noPadding` was derived as `forceNoPadding || isMultiButton`, which was safe
while the 3+ block layout was always tertiary. `forceVariant` also accepts
`primary` and `secondary`, so a 3-button group forcing a filled variant had
`padding: 0 !important` (Button.scss) applied with no way to opt out.
Tie the implied no-padding to the resolved variant being tertiary. Behavior is
unchanged for every caller that doesn't pass `forceVariant`.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Stacked hero variant, fade-by-default carousel, component docs
Layout
- HeaderHeroPrimaryMedia: add a `stacked` prop that puts the headline, subtitle,
and buttons in one column (full width at base, 7/8 at md, 9/12 at lg) instead
of the default headline-left / CTA-right split. The headline and CTA block
bottom-align against each other in the two-column layout, so the stacked
variant undoes that. Both arrangements now share the same headline and CTA
elements, so they can't drift apart. Used on the docs landing hero.
Motion
- CarouselFeatured: make `fade` the default transition. Slides that share a
heading are the common case, and a horizontal wipe drags the identical heading
across the screen only to set it back down. `slide` is now opt-in for decks
whose panels are genuinely distinct. Nudge the crossfade to 260ms in / 200ms
out. The home page carousel opts into fade explicitly; developer-funding now
inherits it.
Fixes
- CardTextIconCard: pass `headingAs` through to `cardContent`, which was
accepting the prop but never receiving it.
Docs
- Expand the Button, CardImage, CardTextIcon, PageGrid, CalloutMediaBanner,
LogoSquareGrid, and HeaderHeroPrimaryMedia references.
Built CSS regenerated with the production script.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Perf pass + migrate home/payments page sections to shared
Performance work across every page plus a refactor moving home/payments
page sections into reusable shared components.
JavaScript
- Defer xrpl.js, jQuery, and Bootstrap in the global <head> (redocly.yaml)
and on the 11 interactive tool pages' inline <script> tags — removes
~1MB of render-blocking JS from first paint on every page.
- Drop moment/moment-timezone from the client: remove the dead APEX-2025
countdown in the navbar AlertBanner; format/parse dates with native
Date/Intl in the blog and events pages.
Fonts & icons
- Remove render-blocking font-awesome.min.css + webfont. CSS glyphs
(callouts, breadcrumbs, status labels, tutorials) now render as
self-contained data-URI SVG masks (styles/_fa-icons.scss); markup icons
use a shared inline-SVG <Icon> component (shared/components/Icon).
- Preconnect to Google Fonts / osano / GTM origins; preload the primary
Booton UI font so text no longer waits on the 775KB stylesheet to parse.
Images & rendering
- Re-encode/resize oversized assets: new-york.jpeg 3.86MB→60KB,
resources-icon.svg 4.2MB→150KB, event date/location SVGs ~1MB→0.5MB.
- Add loading=lazy/decoding=async to shared card components and the
Video embed iframe.
- Add content-visibility to the events page's ~126-card grid to skip
off-screen rendering.
- Earlier QA fixes: light-mode link color (#141414), events card grid
layout, close nav menu on client-side navigation.
Home / payments refactor
- Move home page sections from page-local pages/home/sections/* to reusable
shared/sections/* components (HomeHero relocated to shared/sections/HomeHero;
home page now composes CalloutMediaBanner, CardStatsList, LinkTextDirectory,
LogoSquareGrid, StandardCardGroupSection, FeatureSingleTopic, CarouselFeatured).
- Remove the now-unused pages/payments/sections/* in the same migration.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* Revert FontAwesome removal (keep it for open-source flexibility)
Restore the FontAwesome webfont + font-awesome.min.css and all FA icon
usages (markup fa-* classes and CSS ::before glyphs), reverting the
consolidation in d4cf4e8581. Other performance changes from that commit
(deferred head scripts, moment removal, image optimization, lazy-loading,
content-visibility, preconnect/preload) are retained.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* cleaning up breadcrumb styling
* sticky side nav
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* updating docs landing page, took far but not complete. Pushing for Gabe take over
* Refactor home page sections and introduce new components
- Replaced existing content in index.page.tsx with new section components for improved structure and maintainability.
- Added new sections: HomeBeginJourneySection, HomeBlockchainStatsSection, HomeComplianceDirectorySection, HomeDevelopersFeatureSection, HomeFutureFinanceCallout, HomeHeroCallout, HomeInstitutionsFeatureSection, HomePartnerLogosSection, HomeStayConnectedSection, and HomeCarousel.
- Updated styles for CarouselFeatured and CardStat components to enhance visual consistency and responsiveness.
- Introduced SCSS for HomeHero section to manage layout and spacing effectively.
* Add Payments Page and Sections
- Created a new Payments page with multiple sections including Hero, Why Choose, Advanced Features, Stablecoins, Embedded Payments, Partner Logos, Flexible Integration, Developer Spotlight, and Stay Connected.
- Each section is designed to highlight various aspects of the XRP Ledger Payments Infrastructure, featuring components like FeaturedVideoHero and CardsIconGrid.
- Added corresponding styles and images to enhance the visual presentation of the new sections.
* adding icons, updating docs landing page
* updating the claude command, wrapping text with translate wrapper
* use case tokenization page built
* Enhance CarouselFeatured styles for improved responsiveness
- Added flex-direction adjustments for CarouselFeatured component to support column-reverse layout on smaller screens and row layout on medium and larger screens.
- Removed redundant vendor prefixes from box-sizing and text-decoration properties in devportal2024-v1.css for cleaner code and improved maintainability.
* moving payments page to correct folder, moving payments under pages
* adding developers home page
* code clean up
---------
Co-authored-by: gabriel-ortiz <gabriel.ortiz.github@gmail.com>
Co-authored-by: gabriel-ortiz <gortiz@ripple.com>
