Tonal Tokens
Colorffy generates a full set of CSS custom properties (the --cffy-* 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. --cffy-color-brand-primary-500), becomes an adaptive base (--cffy-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 {
--cffy-tonal-light-intensity: 40%;
--cffy-tonal-dark-intensity: 80%;
}
Semantic colors
| Token | Notes |
|---|---|
--cffy-{color}-base | Adaptive base (light/dark aware). |
--cffy-{color}-base-fixed | Fixed brand value (ignores mode). |
--cffy-{color}-a10 … --cffy-{color}-a90 | Tonal ramp: each step darkens the base a little more, in both modes. |
--cffy-{color}-container | Tinted surface of that color: a pale tint in light mode, a dark tint in dark mode. Tonal buttons, badges and alerts paint it; --cffy-tonal-dark-intensity sets how far it moves from a10. |
--cffy-on-{color}-container | Text and icons on --cffy-{color}-container: the darkest tone in light mode, a light tint in dark mode. |
--cffy-{color}-inverse | The color on an inverse surface (toasts, snackbars, tooltips: dark in light mode, light in dark mode). A light tone in light mode and a dark one in dark mode, kept light or dark enough to read on any brand color. |
{color} = primary, secondary, accent, success, warning, danger, info, muted (the base / base-fixed set also includes dark, white, black).
.badge {
color: var(--cffy-on-primary-container);
background: var(--cffy-primary-a10);
border: 1px solid var(--cffy-primary-a30);
}
Surfaces
| Token | Notes |
|---|---|
--cffy-background / --cffy-surface-base | Page & base surface. |
--cffy-surface-a0 … --cffy-surface-a90 | Elevation ramp. |
--cffy-surface-container-lowest / -low / --cffy-surface-container / -high / -highest | Container elevations. |
--cffy-surface-body-pane, --cffy-surface-overlay, --cffy-surface-navigation, --cffy-surface-tooltip, --cffy-surface-toast, --cffy-surface-kbd, --cffy-surface-accordion | Named surfaces. |
Foreground (on-colors)
Readable text / icon colors for a given surface: --cffy-on-background (+ -inverse), and --cffy-on-{primary|secondary|accent|success|warning|danger|info} for text on the solid color. Each --cffy-on-{color} picks black or white from the lightness of the solid fill, --cffy-{color}-a10, whichever contrasts more, so it follows your brand colors in both modes; set it yourself to force one. For a tinted surface, such as a tonal badge or alert, pair --cffy-{color}-container with --cffy-on-{color}-container; both also exist for muted.
.cta {
background: var(--cffy-primary-a10);
color: var(--cffy-on-primary);
}
.note {
background: var(--cffy-success-container);
color: var(--cffy-on-success-container);
}
Outlines & states
--cffy-outline-surface, --cffy-outline-button, --cffy-outline-text-field, --cffy-outline-overlay, --cffy-overlay-backdrop, plus state tokens --cffy-surface-disabled and --cffy-primary-disabled.
Elevation (shadows)
--cffy-shadow-xs, --cffy-shadow-sm, --cffy-shadow-md, --cffy-shadow-lg, --cffy-shadow-xl (tunable via --cffy-shadow-base / --cffy-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 {
--cffy-primary-base: #4f46e5;
--cffy-tonal-light-intensity: 35%;
}
For build-time overrides via SCSS variables, see Customization.