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

Aa
--app-color-primary
Aa
--app-color-secondary
Aa
--app-color-danger
Aa
--app-color-success
Aa
--app-color-warning
Aa
--app-color-info

Intents — subtle

Aa
--app-color-primary-subtle
Aa
--app-color-secondary-subtle
Aa
--app-color-danger-subtle
Aa
--app-color-success-subtle
Aa
--app-color-warning-subtle
Aa
--app-color-info-subtle

Intents — emphasis

Aa
--app-color-primary-emphasis
Aa
--app-color-secondary-emphasis
Aa
--app-color-danger-emphasis
Aa
--app-color-success-emphasis
Aa
--app-color-warning-emphasis
Aa
--app-color-info-emphasis

Surfaces

Aa
--app-color-surface
Aa
--app-color-surface-raised
Aa
--app-color-surface-sunken

Text on surface

Aa
--app-color-on-surface
Aa
--app-color-on-surface-muted
Aa
--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.