31 Commits

Author SHA1 Message Date
Zack Davis
943c1e96cd refactor button background as two-tone 2026-08-24 22:09:55 -07:00
Zack Davis
6b1eeedbd6 @bds-btn mixin caught up with real component 2026-08-24 21:31:06 -07:00
Zack Davis
e862ba6cf4 fix button border issue and updat
e button-using component readmes for new
propset
2026-08-24 21:24:09 -07:00
Zack Davis
44455e8c01 update buton typing 2026-08-24 17:31:45 -07:00
Zack Davis
5346b44782 Fix 2 TS errors 2026-08-24 17:10:22 -07:00
Zack Davis
0671306e4f use spacing token and delete button-vs-link-candidate.md 2026-08-24 16:44:18 -07:00
Zack Davis
5dbbe619ea handle strong on-saturated hover transparency 2026-08-24 14:52:29 -07:00
Zack Davis
48dfa37139 handle Try it! buttons like on /docs/references/http-websocket-apis/public-api-methods/transaction-methods/submit 2026-08-24 13:41:03 -07:00
Zack Davis
2dac5e521e button styles available as mixin, applied to all .interactive-block .btn.btn-primary 2026-08-24 10:03:21 -07:00
Zack Davis
641e7350e4 New buttons for Docs: /agents/agentic-transactions/ and /usecases/tokenization/real-world-assets. Also, button-audit script 2026-08-23 20:54:46 -07:00
Zack Davis
219bb4c2ad use new buttons for resources/dev-tools, about/history, about/impact. Make iconEnd optional 2026-08-21 22:02:19 -07:00
Zack Davis
335db10a9f update :is trap warning 2026-08-21 15:48:39 -07:00
Zack Davis
a14d2f3b37 new Button component replacing old across redesigned pages 2026-08-21 15:33:44 -07:00
Zack Davis
920baab266 refactor Button css to be simpler and more maintainable 2026-08-21 13:21:50 -07:00
Calvin
5021556c8e BDS component polish: link contrast, static cards, uniform CTAs, stacked hero (#3851)
* 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>
2026-08-18 16:49:10 -07:00
Calvin
65c02abaa8 QA: Buttons (#3562)
* fixed to the button for light + dark, all three buttons

* empty commit

Co-Authored-By: Oz <oz-agent@warp.dev>

* testing link to qa branch

* fix spacing

* minifying css

---------

Co-authored-by: Oz <oz-agent@warp.dev>
2026-06-08 16:58:40 -07:00
akcodez
4a9f0d48be Add CarouselButton component and integrate into CarouselCardList and CarouselFeatured showcases
- 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.
2026-06-08 16:56:03 -07:00
Calvin Jhunjhuwala
79a2a4e92b working button group, updated examples 2026-06-08 16:54:56 -07:00
akcodez
f57c981ea6 Add FeatureTwoColumn pattern and button enhancements
- Introduced the FeatureTwoColumn pattern for showcasing features in a two-column layout, supporting multiple color themes and responsive design.
- Implemented button behavior based on the number of links, with configurations for 1 to 5 links.
- Added `forceColor` prop to Button component to maintain button color across light and dark themes, particularly useful for colored backgrounds.
- Updated styles and documentation for both the FeatureTwoColumn pattern and Button component to reflect new features and usage guidelines.
2026-06-08 16:52:14 -07:00
akcodez
efeecdcb3a Refactor button typography for responsiveness and consistency
- Updated Button component styles to use responsive typography mixins for better adaptability across devices.
- Removed redundant media queries and adjusted font sizes and line heights for both button types.
- Ensured margin resets to maintain consistent spacing in various contexts.
- Enhanced CSS for improved readability and maintainability.
2026-06-08 16:49:57 -07:00
akcodez
4b8286e510 Update CardImage and TileLogo components for improved responsiveness and layout
- Adjusted column spans in CardImage showcase to support a 4-column layout on larger screens.
- Updated TileLogo showcase to reflect changes in aspect ratios and responsive behavior, ensuring proper display across different screen sizes.
- Enhanced SCSS styles for both components to maintain consistency in appearance and functionality in light and dark themes.
- Refined documentation to clarify usage and responsive design principles for both CardImage and TileLogo components.
2026-06-08 16:49:57 -07:00
akcodez
6b8d8df946 Add link button functionality and styles
- Introduced link button support in the Button component, allowing buttons to render as anchor elements when an `href` prop is provided.
- Updated Button showcase to demonstrate link buttons for internal and external navigation.
- Enhanced Button SCSS styles to ensure proper appearance and behavior for link buttons in both light and dark themes.
- Added documentation for link button usage in the Button showcase.
2026-06-08 16:49:49 -07:00
akcodez
a512824c7d Enhance CardImage showcase with image scaling demo and responsive layout adjustments
- Added a new image scaling demonstration to the CardImage showcase, illustrating a zoom effect on hover.
- Updated layout of CardImage components to improve responsiveness, adjusting column spans for various screen sizes.
- Introduced a new image from Figma for the scaling demo and included detailed descriptions of the scaling behavior.
- Refined SCSS styles to support the new layout and ensure consistent spacing across different screen sizes.
2026-06-08 16:49:49 -07:00
akcodez
3a4c6fbcd3 add arialbel 2026-06-08 16:49:40 -07:00
akcodez
9f1032c9de Refactor Button Styles for Responsive Design
Updated button styles to enhance responsiveness across devices by replacing fixed breakpoints with a mixin for the xl breakpoint. Adjusted typography and padding for smaller screens to ensure consistent appearance and usability. Improved comments for clarity on the import order and design tokens.
2026-06-08 16:49:40 -07:00
akcodez
6dd5494018 Refactor Tertiary Button Styles for Dark Mode
Updated the styles for the tertiary button in dark mode, including hover, focus, active, and disabled states. Adjusted padding and added text decoration for better visual feedback. Enhanced responsiveness for smaller screens to ensure consistent behavior across devices.
2026-06-08 16:49:40 -07:00
akcodez
9b82c689b5 Enhance dark mode styles for primary and secondary buttons, adding detailed states for hover, focus, active, and disabled conditions. Update CSS to reflect new design specifications for secondary button in dark mode. 2026-06-08 16:49:40 -07:00
akcodez
c7ece5ac80 add primary dark mode 2026-06-08 16:49:40 -07:00
akcodez
a7f7e734b8 Add Tertiary Button Showcase Component
Introduced a new ButtonShowcaseTertiary component to demonstrate the BDS Tertiary Button, including its various states and usage examples. Removed the previous ButtonShowcase component to streamline the showcase and focus on the Tertiary variant. Updated Button component to support the new variant and adjusted related styles in the CSS for both green and black themes.
2026-06-08 16:49:40 -07:00
akcodez
ac81c00ccd add proper focus and active / hover states 2026-06-08 16:49:40 -07:00
akcodez
35cda6d34c add full primary button 2026-06-08 16:49:40 -07:00