You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Part of #5119. Infrastructure for the component-by-component colour migration (first consumers: Button #5222, Chip) — extracted from #5222 so component PRs can merge independently.
Changes
.storybook/preview.css — imports the Tokens Studio beta bundle alongside the legacy one, so both variable sets resolve during the mixed migration period (ADR-0009). Relative path because the ./next/* exports are injected at publish time only. Imported before the legacy bundle so legacy wins the 8 --eds-typography-header-*-font-size name collisions.
.storybook/preview.mjs — mirrors the colour scheme onto <html> for EDS 2.0 stories. The beta semantic tokens are declared at :root and reference scale aliases that only exist under [data-color-scheme]; custom properties substitute where they are declared, so the attribute must sit on the root element for the semantic layer to resolve (captured as a learning on [Button] Migrate to new beta colour tokens #5208, export-side fix tracked in Author import-ready Tokens Studio JSON for the missing beta colour tokens #5221).
No component or published-package changes — Storybook config only.
Review: chore: load the eds-tokens beta bundle in storybook
Storybook-only wiring for the /next colour migration. I read both changed files plus the surrounding context (the decorator, ADR-0009, the committed beta bundle, and the collision claim). This is a clean, well-scoped, and unusually well-documented change — the inline comments carry exactly the "why" that would otherwise be lost. LGTM. A few notes below, none blocking.
✅ Verified
Hooks ordering is now correct. Both useEffect calls sit above the if (!isNext) return createElement(Story) early return (preview.mjs:45, :52, :64). Previously the early return followed only the debug-grid effect; adding a second hook and moving the return below both keeps the hook call order stable across renders — no Rules-of-Hooks violation. Guarding with if (!isNext) returninside the effect body (line 58) is the right way to keep the hook unconditional while skipping its work.
Import order matches the stated intent. In preview.css the beta bundle is @imported first and @equinor/eds-tokens/css/variables second. For equal-specificity custom-property declarations the last wins, so legacy correctly wins the --eds-typography-header-*-font-size collisions during the mixed period. Both are @import at the top of the file, so the CSS "@import must precede other rules" constraint holds.
The <html> rationale checks out. The beta bundle scopes its scale aliases under [data-color-scheme="…"] (confirmed in variables.css), and the :root semantic tokens reference those aliases — so the attribute genuinely must sit on the root element, not the wrapper, for substitution to resolve. Comment (preview.mjs:53-57) is accurate.
Relative path is safe.../../eds-tokens/src/tokens/css/variables.css resolves to packages/eds-tokens/src/tokens/css/variables.css, which is committed to the repo (not generated on the fly), so Storybook has no ordering dependency on a token-build step.
🔎 Minor / optional
data-color-scheme is now set in two places. It's on <html> (line 59) and still on the wrapper <div> (line 69). Now that the root carries it, the div's copy is redundant for the semantic layer — the div still legitimately needs .eds-storybook-wrapper, so this is harmless, just worth a one-line comment noting the div attribute is kept intentionally (e.g. so nested/scoped overrides still work) to save the next reader the double-take.
Autodocs pages with mixed isNext. The <html> attribute is a global side effect; if a single docs/autodocs page ever rendered both a next and a non-next story simultaneously, the last-mounted decorator's effect would win the root attribute (and its cleanup could strip it from a still-mounted sibling). In practice autodocs groups stories per component, so all share one isNext value and this can't bite today — noting it only so it's on record if story composition changes.
Neither point needs action to merge.
• chore/storybook-beta-tokens-wiring
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
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 #5119. Infrastructure for the component-by-component colour migration (first consumers: Button #5222, Chip) — extracted from #5222 so component PRs can merge independently.
Changes
.storybook/preview.css— imports the Tokens Studio beta bundle alongside the legacy one, so both variable sets resolve during the mixed migration period (ADR-0009). Relative path because the./next/*exports are injected at publish time only. Imported before the legacy bundle so legacy wins the 8--eds-typography-header-*-font-sizename collisions..storybook/preview.mjs— mirrors the colour scheme onto<html>for EDS 2.0 stories. The beta semantic tokens are declared at:rootand reference scale aliases that only exist under[data-color-scheme]; custom properties substitute where they are declared, so the attribute must sit on the root element for the semantic layer to resolve (captured as a learning on [Button] Migrate to new beta colour tokens #5208, export-side fix tracked in Author import-ready Tokens Studio JSON for the missing beta colour tokens #5221).No component or published-package changes — Storybook config only.