ROU-12881: Rework button and button group states to match Figma - #1174
Merged
Conversation
Foundation for the widget CSS-API alignment work. Adds four framework theme-layer role knobs to _root.scss, each defaulting through the matching design token: - --color-border-danger → border-specific danger tier (form validation borders) - --color-text-danger → text-specific danger tier (validation messages) - --color-border-primary → primary tier for focus-ring borders - --color-primary-active → solid pressed/active state (distinct from the translucent --color-primary-selected wash that apps override) No visual change on its own — components adopt these roles in the follow-up PRs.
Depends on the theme-layer roles PR. Button (_btn.scss): - Base .btn reskinned to the Figma "Secondary" type: solid neutral-bold fill + inverse text (was a blue outline that matched no Figma type). - Each variant (Primary/Cancel/Success/Error) gets a dedicated hover and pressed color via shared --osui-btn-hover-background / --osui-btn-active-background vars, replacing the generic brightness filter. Primary pressed uses --color-primary-active. - Cancel: hover/pressed change only the background tier; border stays fixed. - Always-on :focus-visible ring (was accessibility-mode only). - Disabled uses a translucent overlay covering fill + border, instead of dimming the whole button via opacity. Button Group (_button-group.scss): - Hover matches the button technique (neutral items darken border, selected item darkens background + border). - Selected item background reads --color-primary. Regenerated the CSS API reference.
BenOsodrac
approved these changes
Jul 17, 2026
# Conflicts: # docs/css-api-reference.md # stories/CssApiReference.mdx
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR is for aligning Button and Button Group interactive states with their Figma specs.
What was happening
.btnrendered as a blue outline button, but none of the 5 Figma button types look like that — Figma's "Secondary" is a solid dark-gray (neutral-bold) fill with white text.brightness()filter with no dedicated color — so no type had a real Figma-matching hover/pressed color..has-accessible-features.opacity.$token-semantics-primary-basetoken instead of the--color-primaryrole.What was done
_btn.scss): base.btnreskinned to Secondary (solid neutral-bold fill + inverse text); each variant gets its own hover and pressed color via shared--osui-btn-hover-background/--osui-btn-active-backgroundvars (Primary pressed →--color-primary-active); Cancel keeps a fixed border and only steps the background tier; always-on:focus-visiblering; disabled switched to a translucent overlay covering fill + border._button-group.scss): hover matches the button technique (neutral items darken border, selected item darkens background + border); selected background →--color-primary.Test Steps
Open the Widgets/Button and Widgets/ButtonGroup stories. The button element is
<button class="btn …">.Button — check each type by class:
class="btn"(Secondary): solid dark-gray fill, white text.class="btn btn-primary",btn-cancel,btn-success,btn-error: each its own fill.:hoverin DevTools, page must have.desktopon<body>— the Storybook decorator sets it): each type darkens to its own hover tier; Cancel darkens only the background, border stays.:active): each type shows a distinct, darker pressed color. For Primary, confirm it's a solid darker blue (--color-primary-active), not a washed-out translucent tint.:focus-visible): a focus ring (gap + colored halo) appears — no longer requires.has-accessible-features.disabledattribute): the button keeps its own color under a translucent white wash, covering both fill and border (no saturated border ring).Button Group — items are
<button class="button-group-item">inside.button-group:button-group-selected-itemto one item → its background is--color-primary.:hover,.desktopon body): a non-selected item darkens its border; the selected item darkens background + border.disabledattribute on an item): translucent wash over it.Screenshots
(prefer animated gif)
Checklist