Design Token Drift

Normalize a broken token schema and remove hard-coded colors from components.

~/playground — 02-design-token-drift · edit tokens.css

Live

editing tokens.css⌘↵ run tests

:root,
[data-theme='light'] {
  /* TODO: normalize to --color-bg, --color-fg, --color-accent, --color-bg-elevated, --color-line */
  --brand-primary: #ffb454;
  --color-primary: #e2933a;
  --bg: #fafaf9;
  --fg: #18181b;
}

[data-theme='dark'] {
  /* TODO: dark overrides using --color-* names */
  --bg: #09090b;
  --fg: #fafaf9;
}

Preview goal: Toggle theme — background, card, and button colors should all shift via tokens.

Checkpoints

›No raw hex in component files
›Dark theme toggle works via data-theme
›All Sandpack tests pass