Why tokens
Hardcoded colors rot. The moment a second theme appears, every hex value becomes a liability.
The two-tier system
- Tier 1 — primitives: raw ramps, namespaced per palette.
- Tier 2 — semantics:
--surface,--accent,--text-primary— the only names components may use.
[data-theme="deep-sea"][data-mode="dark"] {
--surface: var(--color-ds-ink-950);
--accent: var(--color-ds-eggshell-500);
}
The payoff
A theme switch is now a data attribute, not a refactor. Ship it.