Skip to content

Emit the semantic token layer under the [data-color-scheme] scopes #5226

Description

@pomfrida

Part of #5119 / #5108. Structural export problem found during the Button migration (#5208), separate from the token-content work in #5221.

Problem

The beta export declares the semantic layer (--eds-text-on-accent, --eds-background-surface-*, …) in a :root block, while the scale aliases it references (--eds-accent-N, --eds-neutral-N, …) only exist under [data-color-scheme="light"|"dark"]. CSS custom properties substitute where they are declared, so on :root the references are guaranteed-invalid unless data-color-scheme sits on <html> itself.

Consequences (empirically confirmed in the Button migration):

Proposed fix

Emit the semantic layer under the same [data-color-scheme] scopes as the aliases (per scheme), which preserves subtree switching. The alternative — giving the aliases :root defaults — sacrifices subtree switching for semantic tokens and should only be chosen deliberately.

This is an export/pipeline change (export config / bundle step in tokens_studio_release.yaml), not a token-content change.

Definition of Done

  • Decision recorded: semantic layer emitted under the scheme scopes (or the <html>-attribute requirement explicitly documented as the contract)
  • Export/pipeline updated accordingly
  • Subtree colour-scheme switching verified with a migrated component (Button/Chip story wrapper, without the html mirror)
  • Storybook workaround from chore: load the eds-tokens beta bundle in storybook for the /next migration #5224 removed if no longer needed

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions