/* ───────────────────────────────────────────────────────────────────────── TIER 3 — COMPONENT Per-component tokens, defined only in terms of tier 2 (or tier 1 for categorical identity colours, which must not follow an accent). NEVER a literal here. A colour that genuinely must not follow the accent is allowed, but only with a comment saying why — see the extension banner below for the canonical example. specs/design-system.md §3.2. ───────────────────────────────────────────────────────────────────────── */ @layer tokens { :root { /* ── Focus ─────────────────────────────────────────────────────────── */ --focus-ring-width: 3px; /* ── Buttons ───────────────────────────────────────────────────────── */ --btn-radius: var(--radius-sm); /* Secondary — the outlined "not the main action" button: Cancel, Reset, Back out. Reads as a real button so it can sit beside a primary in a form footer without looking disabled. */ --btn-secondary-bg: var(--color-surface); --btn-secondary-fg: var(--color-text); --btn-secondary-border: var(--color-border); --btn-secondary-hover: var(--color-surface-2); /* Quiet — borderless tertiary, for dense rows and toolbars where a bordered button per row would be visual noise. */ --btn-quiet-bg: transparent; --btn-quiet-fg: var(--color-text-muted); --btn-quiet-border: transparent; --btn-quiet-hover: var(--color-border-light); --btn-danger-bg: var(--color-danger); --btn-danger-fg: var(--color-text-invert); --btn-danger-hover: var(--color-danger-strong); /* Caution — reversible-but-consequential: Reset, Re-run, Discard draft. Deliberately amber rather than --color-warning: that is the warning *text* colour, and this needs to read as a button, not as body copy. */ --btn-caution-bg: var(--amber-500); --btn-caution-fg: var(--color-text-invert); --btn-caution-hover: var(--amber-600); /* Legacy name for the same pair. */ --btn-warning-bg: var(--btn-caution-bg); --btn-warning-hover: var(--btn-caution-hover); /* ── Chips / pills / badges ────────────────────────────────────────── */ --chip-bg: var(--color-surface-2); --chip-fg: var(--color-text); --chip-border: var(--color-border); --chip-radius: var(--radius-full); /* ── Cards / panels ────────────────────────────────────────────────── */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-md); --card-shadow: var(--elev-1); --card-shadow-hover: var(--elev-2); /* ── Tables ────────────────────────────────────────────────────────── */ --table-header-bg: var(--color-surface-2); --table-border: var(--color-border-light); /* ── Status tags ───────────────────────────────────────────────────── */ --tag-success-bg: color-mix(in oklab, var(--color-success) 18%, var(--white)); --tag-success-fg: color-mix(in oklab, var(--color-success) 65%, var(--black)); --tag-fail-bg: color-mix(in oklab, var(--color-danger) 18%, var(--white)); --tag-fail-fg: color-mix(in oklab, var(--color-danger) 60%, var(--black)); --published-bg: var(--cat-emerald-100); --published-fg: var(--cat-emerald-800); /* ── Due dates ───────────────────────────────────────────────────── Overdue is a danger state, so it derives from --color-danger. "Today" is a nudge, not an error, and keeps its own amber. */ --overdue-fg: var(--red-700); --overdue-bg: var(--cat-blush-50); --today-fg: var(--amber-700); /* ── Extension-version banner (global shell) ─────────────────────── Deliberate exception: its own amber ramp, lighter than --color-warning above. --color-warning is the louder "something is wrong" orange; this banner is a passive "your extension is out of date" notice and must not read as an error. */ --ext-banner-bg: #fff7e6; --ext-banner-border: #f5c56a; --ext-banner-text: #7a4b00; --ext-banner-text-strong: #5a3400; --ext-banner-action-border: #d9a441; --ext-banner-action-hover: #ffefc7; /* ── Environment indicator (dev only) ────────────────────────────── Deliberate exception: this stripe exists to be alarming when a dev server is pointed at the production database. It must look identical in every app, so it never follows an accent. */ --nav-env-dev: var(--amber-400); --nav-env-dev-prod-db: var(--red-200); --nav-env-prod-db-rule: var(--red-500); /* ── Holon type identity ─────────────────────────────────────────── Categorical, not semantic: these say *which kind of thing this is*. They stay constant across app themes so a person recognises an Org chip whether they are in Coherence or Audax. */ --holon-org-bg: var(--cat-sage-100); --holon-org-text: var(--green-900); --holon-domain-bg: var(--cat-rose-800); --holon-domain-text: var(--cat-rose-100); --holon-event-bg: var(--cat-lime-700); --holon-event-text: var(--cat-lime-100); --holon-camp-bg: var(--cat-mint-300); --holon-camp-text: var(--cat-mint-900); --holon-local-gathering-bg: var(--cat-jade-300); --holon-local-gathering-text: var(--cat-jade-900); --holon-coherence-conversation-bg: var(--cat-violet-300); --holon-coherence-conversation-text: var(--cat-violet-950); --holon-experience-bg: var(--cat-pink-200); --holon-experience-text: var(--cat-pink-900); --holon-outreach-network-bg: var(--cat-blue-100); --holon-outreach-network-text: var(--cat-blue-900); /* An Outreach List sits one step along from its Network — indigo reads as the same blue family without the two being mistaken for each other in a tree that shows both. */ --holon-outreach-list-bg: var(--cat-indigo-100); --holon-outreach-list-text: var(--cat-indigo-900); /* Audax's two types. Same green family as each other because a Mission belongs to a Quest and the pair should read as related, distinct enough from Org's sage to stay tellable apart on one row. Categorical primitives, not Audax's forest tokens: these chips render on platform pages too, and platform CSS must not reach into an app's tier 1. */ --holon-quest-bg: var(--cat-emerald-100); --holon-quest-text: var(--cat-emerald-800); --holon-mission-bg: var(--cat-lime-100); --holon-mission-text: var(--cat-lime-700); /* ── Journey-type palette (filter chips + journey picker) ────────── Person journeys are the accent-tinted default; holon journeys borrow the success moss; conversation journeys are neutral. */ --journey-holon-bg: var(--moss-50); --journey-holon-bg-active: var(--moss-100); --journey-holon-text: var(--moss-700); --journey-convo-bg: var(--color-surface-2); --journey-convo-bg-active: var(--color-border); /* ── Flow note types ─────────────────────────────────────────────── Categorical: a comment is blue in every app. */ --note-comment-bg: var(--cat-sky-100); --note-comment-text: var(--cat-sky-800); --note-comment-border: var(--cat-sky-200); /* ── Interest tags ───────────────────────────────────────────────── Categorical role colours, fixed product-wide. */ --interest-leader-bg: var(--cat-teal-600); --interest-catalyst-bg: var(--cat-fern-600); --interest-ambassador-bg: var(--cat-steel-600); } /* ── Theme-derived component tokens ──────────────────────────────── On `*`, not :root — see the long note in tokens/semantic.css. These reference the accent, so they must re-resolve inside a theme scope or a themed app gets olive buttons and olive chips. That is not theoretical: it is exactly what shipped, and what the Coherence teal exposed. */ *, ::before, ::after { /* Two focus colours, because focus has two jobs and one accent wash cannot do both. --focus-ring is the *indicator*: a solid outline that has to be seen against the surface behind it, so it takes the darkened accent that tier 2 derives for exactly this. An accent wash cannot serve here — at 15% alpha it lands around 1.1:1 against white, which is a focus ring only in the markup. --focus-halo is the *emphasis*: a soft accent bloom drawn as a box-shadow around an already-visible element (the autocomplete field, a selected journey node). 15% is right there, and stronger is wrong. An app brand may override either. Do it on `*` like everything else accent-derived — see the note in tokens/semantic.css. */ --focus-ring: var(--color-accent-ring-solid); --focus-halo: var(--color-accent-ring); --btn-bg: var(--color-accent); --btn-fg: var(--color-accent-text); --btn-bg-hover: var(--color-accent-hover); --chip-accent-bg: var(--color-accent-soft); --chip-accent-fg: var(--color-accent-hover); --chip-solid-bg: var(--color-accent); --chip-solid-fg: var(--color-accent-text); --table-row-hover: var(--color-accent-quiet); --journey-person-bg: var(--color-accent-quiet); --journey-person-bg-active: color-mix(in oklab, var(--color-accent) 22%, var(--white)); /* ── Page header (the shared list-page banner) ───────────────────── The accent wash and everything drawn on it. All accent-derived, so all of it lives here rather than on :root. --page-header-count-fg is darkened rather than the raw accent on purpose: as a --text-2xl numeral, Coherence's teal is too thin to read on white. Mixing toward the text colour keeps it the app's colour and gives it enough weight to be a figure rather than a tint. */ --page-header-bg: linear-gradient( 135deg, var(--color-accent-soft), color-mix(in oklab, var(--color-accent) 4%, var(--color-surface)) 55%, var(--color-surface) ); --page-header-border: color-mix(in oklab, var(--color-accent) 22%, var(--color-border)); --page-header-count-fg: color-mix(in oklab, var(--color-accent) 62%, var(--color-text)); /* ── Touched fields (multi-field editors) ────────────────────────── Quiet on purpose: this marks "you have edited this in this session", which is orientation, not a warning. Strong enough to scan a long form for, weak enough to read text on. */ --touched-field-bg: var(--color-accent-quiet); --touched-field-edge: color-mix(in oklab, var(--color-accent) 45%, var(--color-surface)); } }