/* --------------------------------------------------------------------------- * Semantic colour tokens * --------------------------------------------------------------------------- * Built on the generated primitive scales. Primitives are the only place raw * colour values live — everything below is a var() reference, so light/dark * and sRGB/display-p3 are inherited. Never add a literal hex to this file. * * Naming: --color-{role}-{property} * role neutral | primary | accent-1..3 * info | success | warning | danger * property named, never numbered — the name says when to use it * * Families, by who owns the meaning: * foundation neutral the surface everything sits on * brand primary, accent-* a tenant defines these; they mean nothing fixed * status info … danger these keep their meaning through any rebrand * * Two things this layer deliberately does NOT do: * * 1. No `secondary` role. Secondary is an emphasis level, not a colour — * primary solid, primary tinted, neutral, transparent. Giving it a role * is what made `.secondary` reach for `info` tokens and put the variant * names and the role names out of step. * * 2. No `on-solid-muted`. On five of eight scales there is no headroom * between the solid and its contrast colour for a second, quieter * foreground. A token that fails on most roles is a trap, not an option. * --------------------------------------------------------------------------- */ :root { /* Foundation — the page and the surfaces on it. Not per-role: there is one page and one surface, and they are always neutral. */ --color-canvas: var(--stone-100); --color-surface: var(--stone-200); --color-surface-sunken: var(--stone-250); --color-white: var(--system-white); /* neutral → stone */ --color-neutral-bg-subtle: var(--stone-250); --color-neutral-bg: var(--stone-300); --color-neutral-bg-hover: var(--stone-400); --color-neutral-bg-active: var(--stone-500); --color-neutral-border: var(--stone-600); --color-neutral-border-strong: var(--stone-800); --color-neutral-solid: var(--stone-900); --color-neutral-solid-hover: var(--stone-1000); --color-neutral-fg: var(--stone-1100); --color-neutral-fg-strong: var(--stone-1200); --color-neutral-on-solid: var(--color-white); /* 6.95:1 */ --color-neutral-surface: var(--stone-surface); /* primary → sienna */ --color-primary-bg-subtle: var(--sienna-250); --color-primary-bg: var(--sienna-300); --color-primary-bg-hover: var(--sienna-400); --color-primary-bg-active: var(--sienna-500); --color-primary-border: var(--sienna-600); --color-primary-border-strong: var(--sienna-800); --color-primary-solid: var(--sienna-900); --color-primary-solid-hover: var(--sienna-1000); --color-primary-fg: var(--sienna-1100); --color-primary-fg-strong: var(--sienna-1200); --color-primary-on-solid: var(--color-white); /* 4.52:1 */ --color-primary-surface: var(--sienna-surface); /* accent-1 → midnight */ --color-accent-1-bg-subtle: var(--midnight-250); --color-accent-1-bg: var(--midnight-300); --color-accent-1-bg-hover: var(--midnight-400); --color-accent-1-bg-active: var(--midnight-500); --color-accent-1-border: var(--midnight-600); --color-accent-1-border-strong: var(--midnight-800); --color-accent-1-solid: var(--midnight-900); --color-accent-1-solid-hover: var(--midnight-1000); --color-accent-1-fg: var(--midnight-1100); --color-accent-1-fg-strong: var(--midnight-1200); --color-accent-1-on-solid: var(--color-white); /* 5.68:1 */ --color-accent-1-surface: var(--midnight-surface); /* accent-2 → rose */ --color-accent-2-bg-subtle: var(--rose-250); --color-accent-2-bg: var(--rose-300); --color-accent-2-bg-hover: var(--rose-400); --color-accent-2-bg-active: var(--rose-500); --color-accent-2-border: var(--rose-600); --color-accent-2-border-strong: var(--rose-800); --color-accent-2-solid: var(--rose-900); --color-accent-2-solid-hover: var(--rose-1000); --color-accent-2-fg: var(--rose-1100); --color-accent-2-fg-strong: var(--rose-1200); --color-accent-2-on-solid: var(--color-white); /* 4.65:1 */ --color-accent-2-surface: var(--rose-surface); /* info → dusk */ --color-info-bg-subtle: var(--dusk-250); --color-info-bg: var(--dusk-300); --color-info-bg-hover: var(--dusk-400); --color-info-bg-active: var(--dusk-500); --color-info-border: var(--dusk-600); --color-info-border-strong: var(--dusk-800); --color-info-solid: var(--dusk-900); --color-info-solid-hover: var(--dusk-1000); --color-info-fg: var(--dusk-1100); --color-info-fg-strong: var(--dusk-1200); --color-info-on-solid: var(--color-white); /* 5.37:1 */ --color-info-surface: var(--dusk-surface); /* success → sage */ --color-success-bg-subtle: var(--sage-250); --color-success-bg: var(--sage-300); --color-success-bg-hover: var(--sage-400); --color-success-bg-active: var(--sage-500); --color-success-border: var(--sage-600); --color-success-border-strong: var(--sage-800); --color-success-solid: var(--sage-900); --color-success-solid-hover: var(--sage-1000); --color-success-fg: var(--sage-1100); --color-success-fg-strong: var(--sage-1200); --color-success-on-solid: var(--color-white); /* 4.63:1 */ --color-success-surface: var(--sage-surface); /* warning → amber */ --color-warning-bg-subtle: var(--amber-250); --color-warning-bg: var(--amber-300); --color-warning-bg-hover: var(--amber-400); --color-warning-bg-active: var(--amber-500); --color-warning-border: var(--amber-600); --color-warning-border-strong: var(--amber-800); --color-warning-solid: var(--amber-900); --color-warning-solid-hover: var(--amber-1000); --color-warning-fg: var(--amber-1100); --color-warning-fg-strong: var(--amber-1200); --color-warning-on-solid: #3e2903; /* 5.06:1 */ --color-warning-surface: var(--amber-surface); /* danger → crimson */ --color-danger-bg-subtle: var(--crimson-250); --color-danger-bg: var(--crimson-300); --color-danger-bg-hover: var(--crimson-400); --color-danger-bg-active: var(--crimson-500); --color-danger-border: var(--crimson-600); --color-danger-border-strong: var(--crimson-800); --color-danger-solid: var(--crimson-900); --color-danger-solid-hover: var(--crimson-1000); --color-danger-fg: var(--crimson-1100); --color-danger-fg-strong: var(--crimson-1200); --color-danger-on-solid: var(--color-white); /* 5.44:1 */ --color-danger-surface: var(--crimson-surface); /* accent-3 is declared with no Odin default. A tenant fills it; charts may reference it. Seeding one against an empty gap on the hue wheel rather than against a real requirement is how volt kept coming back. */ /* Global — one value, system-wide. A disabled control means "not interactive right now", which is not a property of the role it would otherwise have had: a disabled danger button and a disabled primary button must look the same. Same for the focus ring — one ring colour, or the affordance stops being learnable. */ --color-focus-ring: var(--color-info-solid); --color-focus-ring-offset: var(--color-white); --color-disabled-bg: var(--stone-300); --color-disabled-fg: var(--stone-800); --color-disabled-border: var(--stone-600); /* Translucent state layers. These composite over whatever they land on, which is why they are alpha and not a stop: a hover on a card and a hover on the page must both read. */ --color-state-hover: var(--stone-a300); --color-state-selected: var(--stone-a400); /* Emphasis ladder for actions. Secondary is primary at low emphasis — no second colour, no duplicated token. */ --color-action-primary-bg: var(--color-primary-solid); --color-action-primary-fg: var(--color-primary-on-solid); --color-action-secondary-bg: var(--color-primary-bg); --color-action-secondary-fg: var(--color-primary-fg-strong); --color-action-default-bg: var(--color-neutral-bg); --color-action-default-fg: var(--color-neutral-fg-strong); --color-action-tertiary-fg: var(--color-neutral-fg); }