/* Keelvy — Color tokens Transcribed from the real src/app/globals.css (not the design doc, which has drifted). Values verified against baleanza/keelvy@main. ------------------------------------------------------------------ */ :root { /* ── Paper surfaces (warm neutral base) ─────────────────────────── */ --base-paper: #f7f5ee; /* app background */ --base-paper-2: #fbfaf4; /* cards, table surface, raised */ --base-paper-3: #ede9dc; /* recess: sidebar, ticker behind, popovers */ --base-paper-4: #ddd7c6; /* deepest recess, dividers */ --paper: var(--base-paper); --paper-2: var(--base-paper-2); --paper-3: var(--base-paper-3); --paper-4: var(--base-paper-4); /* ── Ink (text & structure) ─────────────────────────────────────── */ --ink: #0b0b0c; /* primary text, logo black */ --ink-2: #44413a; /* secondary text */ --ink-3: #7d7666; /* tertiary / captions / mono micro-labels */ --ink-4: #a29b87; /* muted / placeholders / separators */ --ivory: #f4f0e8; /* logo ivory, foreground on ink */ /* ── Hairlines ──────────────────────────────────────────────────── */ --hairline: rgba(11, 11, 12, 0.10); --hairline-2: rgba(11, 11, 12, 0.04); --hairline-3: rgba(11, 11, 12, 0.20); --hairline-on-ink: rgba(244, 240, 232, 0.10); /* ── Status — TWO forms, not interchangeable ───────────────────── loud (--live/--warn/--danger/--draft) → background, border-color, fill, box-shadow. A fill, a dot, an icon. quiet (--*-text) → the label ON the matching -bg, and any color: use. Using a loud form as a colour on its own -bg gives 1.96:1 (warn), 2.83:1 (draft). See guidelines/contrast-contract.card.html. */ --live: #007c47; --live-text: #00713d; /* on --live-bg 5.47:1 */ --live-bg: #d6fbe2; --live-bright: #3cd788; /* dark/ink surfaces — same in both themes */ --draft: #8a8472; --draft-text: #635d4c; /* on --draft-bg 4.98:1 */ --draft-bg: #e6e0cf; --warn: #f59900; /* ONLY under ink 8.84:1 — never ivory */ --warn-text: #7d5500; /* on --warn-bg 5.83:1 */ --warn-bg: #ffefcd; --warn-bright: #fd9f07; --danger: #be3f33; --danger-text: #aa2b22; /* on --danger-bg 5.89:1 */ --danger-bg: #ffeae4; --danger-bright: #ff9687; /* ── Curated hues (the accent palette options) ──────────────────── */ --blue: #004aad; /* Keelvy primary — ivory on it 7.15:1 */ --blue-hover: #003784; /* edge / hover — ivory on it 9.83:1 */ --blue-bright: #8cb9ff; /* blue on the ticker and other ink surfaces */ --herb: #007b54; --sprout: #007d3b; --clay: #bc4600; --plum: #7b57c5; --brass: #8e6500; /* quiet brass — carries ivory 4.61:1 */ --brass-vivid: #ebaa00; /* loud brass — ONLY under ink 9.63:1 */ /* Curated accent presets the operator may pick (one hue, never many): Blue #004aad (default) · Ocean #00749d · Herb #007b54 Plum #7b57c5 · Rose #a7307e · Ink #0b0b0c Sprout, Clay and Brass are deliberately NOT offered — they are the palette-independent status hues, and a configurable accent must not be settable to a status colour. */ --ocean: #00749d; --rose: #a7307e; /* One-release aliases for the renamed pair. "deep"/"fresh" described a lightness difference that no longer exists. */ --deep-herb: var(--herb); --fresh-herb: var(--sprout); /* Soft companions — one rule: 14% of the hue over the current paper. */ --sprout-soft: color-mix(in oklab, var(--sprout) 14%, var(--paper)); --fresh-herb-soft: var(--sprout-soft); --clay-soft: color-mix(in oklab, var(--clay) 14%, var(--paper)); /* NOTE: mixed from --brass-vivid, not --brass. Deliberate (the loud form is the one that reads as a soft tint) — do not "fix" it to --brass. */ --brass-soft: color-mix(in oklab, var(--brass-vivid) 14%, var(--paper)); /* ── Brand mark (fixed — must not invert with the theme) ─────────── */ --logo-bg: #0b0b0c; /* ink — alternate badge ground */ --logo-fg: #f4f0e8; /* ivory — the mark on the badge */ --logo-frame: #004aad; /* blue — the primary badge ground */ /* ── Accent — default is Keelvy blue ────────────────────────────── */ --accent: var(--blue); --accent-hover: var(--blue-hover); --accent-fg: var(--ivory); /* 7.15:1 — ivory, not #fff */ --accent-edge: var(--blue-hover); /* structural edge, 9.83:1 under ivory */ --accent-text: var(--accent); /* accent-as-TEXT; clamped at runtime */ /* ── Accent ramp — THE RULE OF TWO LAYERS ──────────────────────── The accent runs at full strength (button, active-row stripe, focus ring, link, brand). The ramp stays almost colourless — C 0.003–0.05 over paper. It is the low saturation of the backgrounds that licenses a loud accent. Mixed with transparent, so the ramp layers on any surface. Ink mode below keeps the original, lower percentages. */ --accent-05: color-mix(in oklab, var(--accent) 6%, transparent); --accent-08: color-mix(in oklab, var(--accent) 10%, transparent); --accent-12: color-mix(in oklab, var(--accent) 15%, transparent); --accent-18: color-mix(in oklab, var(--accent) 22%, transparent); --accent-25: color-mix(in oklab, var(--accent) 32%, transparent); --accent-40: color-mix(in oklab, var(--accent) 48%, transparent); --accent-60: color-mix(in oklab, var(--accent) 68%, transparent); --focus-ring: color-mix(in oklab, var(--accent) 40%, transparent); /* ── Ticker — fixed ink-black on ALL themes ─────────────────────── */ --ticker-bg: #0b0b0c; --ticker-fg: #f4f0e8; /* The dark plate's boundary AGAINST THE PAGE is page-relative, so unlike the fill it MUST flip at night. */ --ticker-edge: rgba(11, 11, 12, 0.10); --ticker-shadow: rgba(0, 0, 0, 0.40); /* ── Stamp shadow — the signature, one per screen ──────────────── Its own tint rather than --accent-25: that ramp step is now nearly grey (C 0.049) and a pale shadow under a blue button loses the signature. 55% reads as a second blue without arguing with the button. */ --stamp-tint: color-mix(in oklab, var(--accent) 55%, transparent); --stamp-shadow: 3px 3px 0 0 var(--stamp-tint); --stamp-shadow-hover: 4px 4px 0 0 var(--stamp-tint); --stamp-shadow-active: 1px 1px 0 0 var(--stamp-tint); /* ── Semantic surface / foreground / border tokens ──────────────── */ --bg-app: var(--paper); --bg-surface: var(--paper-2); --bg-surface-soft: var(--paper-3); --bg-muted: var(--paper-4); --bg-inverse: var(--ink); --fg-primary: var(--ink); --fg-secondary: var(--ink-2); --fg-tertiary: var(--ink-3); --fg-muted: var(--ink-4); --fg-inverse: var(--ivory); --border-default: #d2c7b8; --border-subtle-ui: #e5ddd1; --border-strong-ui: #b9aa98; --action-primary: var(--ink); --action-primary-hover: #1a1a1c; --action-primary-fg: var(--ivory); /* Status semantic pairs — every *-text resolves to the QUIET form. */ --success-bg: var(--live-bg); --success-text: var(--live-text); --warning-bg: var(--warn-bg); --warning-text: var(--warn-text); --danger-soft: var(--danger-bg); --danger-text-on-soft: var(--danger-text); --info-bg: var(--accent-12); --info-text: var(--accent-text); --neutral-bg: var(--paper-4); --neutral-text: var(--ink); /* ── Overlay scrim — ONE family, every overlay ──────────────────── */ --scrim: rgba(11, 11, 12, 0.45); --scrim-strong: rgba(8, 8, 9, 0.86); /* lightbox / full-bleed media */ --scrim-blur: 2px; } /* ── Night ──────────────────────────────────────────────────────────── */ :root[data-theme="night"] { color-scheme: dark; --base-paper: #121311; --base-paper-2: #1b1d1a; --base-paper-3: #242623; --base-paper-4: #30332e; --paper: var(--base-paper); --paper-2: var(--base-paper-2); --paper-3: var(--base-paper-3); --paper-4: var(--base-paper-4); --ink: #f2efe6; --ink-2: #cbc6ba; --ink-3: #969085; --ink-4: #757064; --ivory: #f5f1e8; --hairline: rgba(245, 241, 232, 0.12); --hairline-2: rgba(245, 241, 232, 0.07); --hairline-3: rgba(245, 241, 232, 0.24); --hairline-on-ink: rgba(11, 11, 12, 0.40); --live: #32d082; --live-bg: #072c18; /* 7.58:1 */ --warn: #f59900; --warn-bg: #351e01; /* 7.06:1 */ --danger: #ff8b7b; --danger-bg: #3a1814; /* 6.99:1 */ --draft: #8d877a; --draft-bg: #2a2820; /* At night the two status forms coincide — a night chip is a dark ground with a bright label. Re-pointing here stops the Day split leaking. */ --live-text: var(--live); --warn-text: var(--warn); --danger-text: var(--danger); --draft-text: var(--draft); /* #004aad on night paper is 1.4:1. Night gets its own blue on the same hue arc (259°) at the same chroma (C 0.169), lifted to L 0.66. */ --blue: #4d90f8; /* 5.91:1 on paper · 4.84:1 on paper-3 */ --blue-hover: var(--blue-bright); --accent-fg: #0b0b0c; /* 6.24:1 — ink, not ivory */ /* The curated hues sit at L≈0.515 — correct as a FILL under ivory, but as a label on their own -soft chip (paper-relative, so dark at night) they land at 3.2:1. One lift, the same for all five, so the set stays a set. */ --herb: color-mix(in oklab, #007b54 62%, var(--ink)); --sprout: color-mix(in oklab, #007d3b 62%, var(--ink)); --clay: color-mix(in oklab, #bc4600 62%, var(--ink)); --plum: color-mix(in oklab, #7b57c5 62%, var(--ink)); --brass: color-mix(in oklab, #8e6500 62%, var(--ink)); /* Night ramp — its own percentages. At night the accent is LIGHTER than the paper rather than darker, so the same alpha lands elsewhere. */ --accent-05: color-mix(in oklab, var(--accent) 10%, transparent); --accent-08: color-mix(in oklab, var(--accent) 16%, transparent); --accent-12: color-mix(in oklab, var(--accent) 22%, transparent); --accent-18: color-mix(in oklab, var(--accent) 30%, transparent); --accent-25: color-mix(in oklab, var(--accent) 42%, transparent); --accent-40: color-mix(in oklab, var(--accent) 58%, transparent); --accent-60: color-mix(in oklab, var(--accent) 76%, transparent); --scrim: rgba(0, 0, 0, 0.60); --scrim-strong: rgba(0, 0, 0, 0.92); /* An ACTION token must never alias a SURFACE token: --action-primary used to read var(--paper-2), byte-identical to the table frame it sat on, so every "selected" fill vanished at night. The plate is --ink and the label is its inverse — day's own rule, unchanged. */ --action-primary: var(--ink); --action-primary-hover: color-mix(in oklab, var(--ink) 88%, var(--paper)); --action-primary-fg: var(--base-paper); /* Stable dark FILL, page-relative EDGE: on dark paper the boundary has to be light or the bar has no boundary at all. */ --ticker-edge: rgba(245, 241, 232, 0.22); --ticker-shadow: rgba(0, 0, 0, 0.70); --border-default: var(--hairline-3); --border-subtle-ui: var(--hairline); --border-strong-ui: var(--ink-3); --bg-inverse: var(--ivory); } /* Ticker keeps its ivory hairline on every theme. */ [data-ticker] { --hairline-on-ink: rgba(244, 240, 232, 0.10); } /* ── Palette: ink — was the default until v2, now an explicit choice. A near-black overlay needs far less alpha than a hue to read as a tint, so the ramp keeps its original percentages. Declared AFTER the night block so night·ink gets these rather than night's blue-tuned ones. ── */ :root[data-palette="ink"] { --accent: var(--ink); --accent-hover: color-mix(in oklab, var(--ink) 88%, var(--paper)); --accent-fg: var(--ivory); --accent-edge: var(--accent); --accent-text: var(--accent); --accent-05: color-mix(in oklab, var(--accent) 2.5%, transparent); --accent-08: color-mix(in oklab, var(--accent) 5%, transparent); --accent-12: color-mix(in oklab, var(--accent) 8%, transparent); --accent-18: color-mix(in oklab, var(--accent) 12%, transparent); --accent-25: color-mix(in oklab, var(--accent) 18%, transparent); --accent-40: color-mix(in oklab, var(--accent) 32%, transparent); --accent-60: color-mix(in oklab, var(--accent) 52%, transparent); /* DIVERGENCE FROM PRODUCTION (see guidelines/known-issues): the app's globals.css does NOT re-declare --stamp-tint here, so Ink mode inherits 55% of near-black and the stamp reads far heavier than the 18% it had before v2. 20% restores the original weight. */ --stamp-tint: color-mix(in oklab, var(--accent) 20%, transparent); } /* Night + Ink: --accent === --ink, which inverts LIGHT at night, so a bg-accent fill becomes a light plate — but --accent-fg is still ivory, giving light-on-light (invisible accent badges, avatars, pills, buttons). Pin the accent foreground to the dark base surface in this one combo. Declared after the ink block so it wins. */ :root[data-theme="night"][data-palette="ink"] { --accent-fg: var(--base-paper); } /* ── Palette: accent — one hue, paper shifts SLIGHTLY toward it. 8/4/14/20 was safe at C 0.036; at C 0.171 it turns the whole interface cold blue, and warm paper is half the character of the system. ── */ :root[data-palette="accent"] { --accent: #004aad; --accent-fg: var(--ivory); --paper: color-mix(in oklab, var(--accent) 3%, var(--base-paper)); --paper-2: color-mix(in oklab, var(--accent) 1.5%, var(--base-paper-2)); --paper-3: color-mix(in oklab, var(--accent) 5%, var(--base-paper-3)); --paper-4: color-mix(in oklab, var(--accent) 7%, var(--base-paper-4)); --accent-text: color-mix(in oklab, var(--accent) 78%, #14130f); } :root[data-theme="night"][data-palette="accent"] { --accent: #4d90f8; --accent-fg: #0b0b0c; --paper: color-mix(in oklab, var(--accent) 6%, var(--base-paper)); --paper-2: color-mix(in oklab, var(--accent) 4%, var(--base-paper-2)); --paper-3: color-mix(in oklab, var(--accent) 8%, var(--base-paper-3)); --paper-4: color-mix(in oklab, var(--accent) 10%, var(--base-paper-4)); --accent-text: color-mix(in oklab, var(--accent) 55%, #f4f0e8); } /* ── Contrast axis — TYPE only. Soft is the default and is never written as an attribute, so only the bold overrides are declared. It deliberately does NOT touch borders, hairlines or paper. ── */ :root[data-contrast="bold"] { --ui-weight: 480; --ui-size: 17px; } :root[data-theme="day"][data-contrast="bold"] { --ink: #000000; --ink-2: #3a3832; --ink-3: #6e6759; --ink-4: #b8b09a; /* re-asserted: bold has no muted step of its own */ } :root[data-theme="night"][data-contrast="bold"] { --ink: #ffffff; --ink-2: #d4cfc5; --ink-3: #9e9890; --ink-4: #5d584f; } /* ── Paper temperature ──────────────────────────────────────────────── */ :root[data-paper="neutral"] { --base-paper: #f1f0ed; --base-paper-2: #fdfdfb; --base-paper-3: #e6e4df; --base-paper-4: #d6d3cb; } :root[data-paper="cool"] { --base-paper: #eef0ef; --base-paper-2: #fafcfb; --base-paper-3: #e2e6e6; --base-paper-4: #cfd5d5; } :root[data-theme="night"][data-paper="neutral"] { --base-paper: #121212; --base-paper-2: #1b1b1c; --base-paper-3: #242425; --base-paper-4: #303031; } :root[data-theme="night"][data-paper="cool"] { --base-paper: #101314; --base-paper-2: #181c1d; --base-paper-3: #212626; --base-paper-4: #2c3232; }