* 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>
- Removed redundant vendor prefixes from box-sizing and text-decoration properties.
- Adjusted line-height for the legend element to ensure proper spacing.
- Updated display classes to maintain consistent styling across breakpoints.
- Cleaned up unused CSS rules to enhance maintainability.
- Downgraded Bootstrap version from 5.3.8 to 5.3.3 in package-lock.json.
- Refactored import paths in plugin files to use local types.
- Enhanced FeatureTwoColumn component with improved layout and responsive behavior.
- Updated SCSS for consistent spacing and layout adjustments across breakpoints.
- Revised documentation in FeatureTwoColumn.md for clarity on layout behavior and props.
* qa/section-cards: link colors, dark mode green TextCard, CardTextIconCard text color
Co-Authored-By: Oz <oz-agent@warp.dev>
* updating documentation, fix per QA feedback
* removing important and css clean up
---------
Co-authored-by: Oz <oz-agent@warp.dev>
- Adjusted the gap for the small variant from 8px to 4px.
- Introduced a new medium gap variant with responsive settings (16px on mobile/tablet, 24px on desktop).
- Updated ButtonGroupProps interface to include the new medium gap option.
- Modified HeaderHeroPrimaryMedia to utilize the new medium gap setting for button groups.
- Adjusted background and text colors for various variants in CalloutMediaBanner.
- Updated SCSS variables for improved color consistency across dark mode.
- Cleaned up and standardized CSS formatting for better readability.
