Color palettes
The raw palettes define the theme colors. Semantic tokens reference them; components never do. All ramps are built in OKLCH, and the six hues use the wider Display P3 gamut where the screen supports it.
Semantic tokens
Semantic tokens are theme-following: one name, a Bright and a Dark value.
Text
| Name | Bright | Dark |
|---|
--color-text-default | --color-alpha-dark-950 | --color-alpha-bright-950 |
--color-text-default-inv | --color-alpha-bright-950 | --color-alpha-dark-950 |
--color-text-default-inv-pers | --color-alpha-bright-950 | --color-alpha-bright-950 |
--color-text-faded | --color-neutral-500 | --color-alpha-bright-800 |
--color-text-muted | --color-neutral-400 | --color-alpha-bright-600 |
--color-text-primary | --color-primary-500 | --color-primary-500 |
--color-text-secondary | --color-secondary-500 | --color-secondary-400 |
--color-text-tertiary | --color-tertiary-500 | --color-tertiary-500 |
--color-text-positive | --color-positive-500 | --color-positive-500 |
--color-text-critical | --color-critical-500 | --color-critical-500 |
--color-text-warning | --color-warning-500 | --color-warning-500 |
Border
| Name | Bright | Dark |
|---|
--color-border-default | --color-alpha-dark-950 | --color-alpha-bright-950 |
--color-border-faded | --color-neutral-200 | --color-neutral-700 |
--color-border-muted | --color-neutral-100 | --color-neutral-800 |
--color-border-alpha | --color-alpha-dark-400 | --color-alpha-bright-500 |
--color-border-alpha-lighter | --color-alpha-dark-300 | --color-alpha-bright-400 |
--color-border-primary | --color-primary-500 | --color-primary-500 |
--color-border-secondary | --color-secondary-500 | --color-secondary-500 |
--color-border-tertiary | --color-tertiary-500 | --color-tertiary-500 |
--color-border-positive | --color-positive-500 | --color-positive-500 |
--color-border-critical | --color-critical-500 | --color-critical-500 |
--color-border-warning | --color-warning-500 | --color-warning-500 |
Background
| Name | Bright | Dark |
|---|
--color-bg-default | --color-alpha-bright-950 | --color-alpha-dark-950 |
--color-bg-default-inv | --color-alpha-dark-950 | --color-alpha-bright-950 |
--color-bg-faded | --color-neutral-100 | --color-neutral-800 |
--color-bg-muted | --color-neutral-50 | --color-neutral-900 |
--color-bg-alpha-zero | --color-alpha-bright-50 | --color-alpha-dark-50 |
--color-bg-alpha-light | --color-alpha-dark-200 | --color-alpha-bright-200 |
--color-bg-alpha-mid | --color-alpha-dark-300 | --color-alpha-bright-400 |
--color-bg-alpha-heavy | --color-alpha-dark-900 | --color-alpha-bright-900 |
--color-bg-default-to-alpha-light | --color-alpha-bright-950 | --color-alpha-bright-200 |
--color-bg-primary | --color-primary-500 | --color-primary-500 |
--color-bg-primary-faded | --color-primary-200 | --color-primary-800 |
--color-bg-primary-muted | --color-primary-50 | --color-primary-950 |
--color-bg-secondary | --color-secondary-500 | --color-secondary-500 |
--color-bg-secondary-faded | --color-secondary-200 | --color-secondary-800 |
--color-bg-secondary-muted | --color-secondary-50 | --color-secondary-950 |
--color-bg-tertiary | --color-tertiary-500 | --color-tertiary-500 |
--color-bg-tertiary-faded | --color-tertiary-200 | --color-tertiary-800 |
--color-bg-tertiary-muted | --color-tertiary-50 | --color-tertiary-950 |
--color-bg-positive | --color-positive-500 | --color-positive-500 |
--color-bg-positive-faded | --color-positive-200 | --color-positive-800 |
--color-bg-positive-muted | --color-positive-50 | --color-positive-950 |
--color-bg-critical | --color-critical-500 | --color-critical-500 |
--color-bg-critical-faded | --color-critical-200 | --color-critical-800 |
--color-bg-critical-muted | --color-critical-50 | --color-critical-950 |
--color-bg-warning | --color-warning-500 | --color-warning-500 |
--color-bg-warning-faded | --color-warning-200 | --color-warning-800 |
--color-bg-warning-muted | --color-warning-50 | --color-warning-950 |