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>
* 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>
* 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>
- 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.
- Added responsive gap settings for grid rows in CarouselFeatured.
- Standardized margin and padding for the CarouselFeatured component.
- Updated SCSS and CSS files to reflect these changes for better visual consistency.
- Introduced CarouselButton component for navigation with multiple color variants (neutral, green, black).
- Enhanced CarouselCardListShowcase to include a visual showcase of CarouselButton in various states.
- Created CarouselFeatured component showcasing featured images with navigation and responsive behavior.
- Updated styles for CarouselButton and integrated it into existing patterns for improved navigation experience.
- Updated the FeatureSingleTopic component to allow configurable button variants (primary or secondary) based on the `singleButtonVariant` prop.
- Improved mobile and tablet responsiveness by ensuring content always appears above the image, regardless of orientation.
- Refined button rendering logic for better clarity in the README and component documentation.
- Adjusted SCSS styles for improved spacing and alignment across different screen sizes.
- Introduced the FeatureSingleTopic component, enhancing layout flexibility with responsive design.
- Added SCSS styles for various screen sizes, including media queries for improved spacing and alignment.
- Implemented dark mode styles for better accessibility and visual consistency.
