demo · v139
Functional Design Tokens
Replace a brittle table of --space-1, --space-2, --space-3… with a single @function --space(--step). Pick a step on the slider, watch every card breathe at once. Type tier, radius scale, and contrast tone work the same way.
CSS Custom Functions (
@function) is behind chrome://flags/#experimental-web-platform-features in Chrome 139. This page sets the per-card variables anyway so you can see the effect even without the flag (falling back to ordinary calc() chains); the snippets are what changes.
6
2
3
type · 0
type · 1
type · 2
type · 3
before vs after
Below: the same design intent, rewritten with custom functions. Note how @function --space moves the “multiply by 0.25rem” logic out of every callsite — and how you can swap the underlying scale in one place by editing the function body.