Colors & Tokens

All tokens are CSS custom properties with the --app- prefix. Apps use role tokens exclusively — raw scales like --app-color-blue-500 are internal to the gem.

Intents — solid

--app-color-primary

--app-color-secondary

--app-color-danger

--app-color-success

--app-color-warning

--app-color-info

Intents — subtle

--app-color-primary-subtle

--app-color-secondary-subtle

--app-color-danger-subtle

--app-color-success-subtle

--app-color-warning-subtle

--app-color-info-subtle

Intents — emphasis

--app-color-primary-emphasis

--app-color-secondary-emphasis

--app-color-danger-emphasis

--app-color-success-emphasis

--app-color-warning-emphasis

--app-color-info-emphasis

Surfaces

--app-color-surface

--app-color-surface-raised

--app-color-surface-sunken

Text on surface

--app-color-on-surface

--app-color-on-surface-muted

--app-color-on-surface-subtle

Borders

--app-color-border

--app-color-border-strong

--app-color-border-emphasis

Pick a token by its semantic purpose, not the color it currently resolves to — see app_theme/docs/tokens.md for the full decision guide and theme documentation.