Skip to content

Commit 3001f72

Browse files
pomfridapomfrida
authored
chore: load the eds-tokens beta bundle in storybook for the /next migration (#5224)
* chore: load the eds-tokens beta bundle in storybook for the /next migration * chore: comment why the storybook wrapper div keeps data-color-scheme
1 parent 60d79a0 commit 3001f72

2 files changed

Lines changed: 25 additions & 2 deletions

File tree

‎packages/eds-core-react/.storybook/preview.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/* Tokens Studio beta bundle (ADR-0009: published consumers import
2+
@equinor/eds-tokens/next/css/variables.css; the ./next/* exports are
3+
injected at publish time only, hence the relative path locally).
4+
Imported BEFORE the legacy bundle so legacy wins the name collisions
5+
(--eds-typography-header-*-font-size) during the mixed period. */
6+
@import '../../eds-tokens/src/tokens/css/variables.css';
17
@import '@equinor/eds-tokens/css/variables';
28

39
/* Ensure form elements inherit EDS typography */

‎packages/eds-core-react/.storybook/preview.mjs‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,30 @@ const preview = {
4747
return () => document.body.classList.remove('eds-debug-grid')
4848
}, [debugGrid])
4949

50-
if (!isNext) return createElement(Story)
51-
5250
const colorScheme = context.globals.colorScheme || 'light'
5351

52+
useEffect(() => {
53+
// The Tokens Studio beta semantic tokens are declared at :root and
54+
// reference step aliases that only exist under [data-color-scheme].
55+
// Custom properties substitute where they are declared, so the
56+
// attribute must sit on <html> for the semantic layer to resolve —
57+
// the subtree wrapper below is not enough.
58+
if (!isNext) return
59+
document.documentElement.setAttribute('data-color-scheme', colorScheme)
60+
return () =>
61+
document.documentElement.removeAttribute('data-color-scheme')
62+
}, [isNext, colorScheme])
63+
64+
if (!isNext) return createElement(Story)
65+
5466
return createElement(
5567
'div',
5668
{
69+
// Kept alongside the <html> attribute on purpose: the legacy 2.x
70+
// bundle scopes its tokens under [data-color-scheme] (nearest
71+
// ancestor wins), so the wrapper and unmigrated /next components
72+
// need it here — synchronously from first paint, independent of
73+
// the effect above. Only the beta semantic layer needs <html>.
5774
'data-color-scheme': colorScheme,
5875
className: 'eds-storybook-wrapper',
5976
},

0 commit comments

Comments
 (0)