Tonal Tokens
Colorffy generates a full set of CSS custom properties (the --theme-* variables) from a handful of brand seed colors. They adapt to light / dark mode automatically and power every component and color utility. Use them directly in your own CSS, or override them for runtime theming.
How a tone is built
Each brand color starts from a seed (e.g. --color-brand-primary-500), becomes an adaptive base (--theme-primary-base, which swaps light/dark via light-dark()), then a ramp of tones a10→a90 is generated with color-mix() at increasing intensity. The blend strength is controlled by two knobs:
:root {
--theme-tonal-light-intensity: 40%;
--theme-tonal-dark-intensity: 80%;
}
Semantic colors
| Token | Notes |
|---|---|
--theme-{color}-base | Adaptive base (light/dark aware). |
--theme-{color}-base-fixed | Fixed brand value (ignores mode). |
--theme-{color}-a10 … --theme-{color}-a90 | Tonal ramp, light → strong. |
{color} = primary, secondary, accent, success, warning, danger, info, muted (the base / base-fixed set also includes dark, white, black).
.badge {
color: var(--theme-primary-a90);
background: var(--theme-primary-a10);
border: 1px solid var(--theme-primary-a30);
}
Surfaces
| Token | Notes |
|---|---|
--theme-background / --theme-surface-base | Page & base surface. |
--theme-surface-a0 … --theme-surface-a90 | Elevation ramp. |
--theme-surface-container-lowest / -low / --theme-surface-container / -high / -highest | Container elevations. |
--theme-surface-body-pane, --theme-surface-overlay, --theme-surface-navigation, --theme-surface-tooltip, --theme-surface-toast, --theme-surface-kbd, --theme-surface-accordion | Named surfaces. |
Foreground (on-colors)
Readable text / icon colors for a given surface: --theme-on-background (+ -inverse), and --theme-on-{primary|secondary|accent|success|warning|danger|info} (several also offer -inverse / -container variants).
.cta {
background: var(--theme-primary-base);
color: var(--theme-on-primary);
}
Outlines & states
--theme-outline-surface, --theme-outline-button, --theme-outline-text-field, --theme-outline-overlay, --theme-overlay-backdrop, plus state tokens --theme-surface-disabled and --theme-primary-disabled.
Elevation (shadows)
--shadow-xs, --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl (tunable via --theme-shadow-base / --theme-shadow-intensity). The shadow-* utilities map to these.
Override at runtime
Any token can be overridden on :root (or any scope) without recompiling SCSS:
:root {
--theme-primary-base: #4f46e5;
--theme-tonal-light-intensity: 35%;
}
For build-time overrides via SCSS variables, see Customization.