Tokens & theming
Knobs → scales → roles. Theming is swapping token values, never overriding component CSS.
Knobs
--hue, --chroma, --neutral-chroma,
status hues, and the radius tokens. Everything below derives from them.
Scales
Theme-relative (Radix convention): step 1 is always the app background, 6–8 borders, 9 the solid, 12 high-contrast text — in both modes.
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
Roles
Components only touch roles: --color-surface,
--color-text, --color-border,
--color-primary (near-black; the action color),
--color-accent (the one blue: focus, selection), and the
status roles (--color-danger…).
Theming recipes
:root { --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .75rem } /* un-square */
:root { --hue: 150 } /* different brand */
:root { --color-primary: var(--accent-9);
--color-on-primary: var(--color-on-accent) } /* colorful primary */