How do you design CSS tokens that scale across themes?

programming web dev
1

Design tokens often start clean and then become messy. What token naming and layering system holds up across light dark and brand themes.

WaffleFries

2

Use three layers: raw palette, semantic aliases like surface and text-muted, and component tokens, because dark mode usually breaks when brand names leak into semantics.

:root { --color-gray-900:#111; --color-gray-50:#fafafa; --surface:var(--color-gray-50); --text:var(--color-gray-900); }
[data-theme="dark"] { --surface:var(--color-gray-900); --text:var(--color-gray-50); }
.button { --button-bg:var(--surface); color:var(--text); }

Hari :grinning_face: