refactor: migrate Button (next) colours to beta tokens - #5222
Draft
pomfrida wants to merge 1 commit into
Draft
Conversation
This was referenced Jul 22, 2026
1 task
pomfrida
added a commit
that referenced
this pull request
Jul 28, 2026
…th the widened semantic block The widened semantic layer and the color-scheme scope rules both apply to [data-color-scheme] elements at equal specificity, so source order decides the three duplicate names tracked in #5221. With the previous alphabetical order the semantic block sorted last and won - and its --eds-border-focus is a self-reference, computing to the guaranteed-invalid value, which would have dropped focus outlines for the incoming Chip (#5225) and Button (#5222) migrations inside scoped subtrees (both use var(--eds-border-focus) for their focus ring). The bundler now ranks color-scheme/* after every other layer, so the scheme-specific values win on scoped elements and every resolved value matches the pre-widening state. Verified in the browser: --eds-border-focus resolves to the light/dark blue per subtree, and text-disabled/border-disabled keep their scheme values.
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
1 participant
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.
Part of #5208 (phase 1 of #5119). First component migrated onto the Tokens Studio beta colour tokens — the test case for the migration pattern.
Draft until the alpha-channel disabled tokens (#4741) ship — the disabled states are then swapped here before merge.
The Storybook wiring (beta bundle import + colour-scheme mirroring to
<html>) has been extracted to #5224 so component PRs can merge independently. This branch still contains the same wiring changes; once #5224 merges, updating the branch frommainreduces this diff tobutton.cssonly.Changes
button.css:--_tone-Nindirection thatdata-color-appearanceoverrides per tone — replacing the legacy dynamic-token mechanism that carried thetoneprop--eds-text-on-accent,--eds-border-focusExport gaps and bugs found
Captured as learnings on #5208; fixing them at the source is tracked in #5221:
background-surface-accent-*resolves to steps 14/11/15 — unusable as solid fills)--eds-border-focusself-reference cycle in the semantic set (concept/semantic name collision; same for--eds-border-disabled):rootreference scale aliases that only exist under[data-color-scheme]— subtree colour-scheme switching doesn't work for the semantic layer (see chore: load the eds-tokens beta bundle in storybook for the /next migration #5224 for the Storybook workaround)Verification
--eds-text-on-accent(neutral-14, ≈ #E2E2E2) instead of the legacy near-white step 15 — needs design sign-off