/* ========================================================================== Volar dark theme — selected, not inverted. ========================================================================== tokens.css closes by saying dark mode must be *selected* — each ramp step re-chosen and re-validated against the dark surface. This file is that work. It re-declares the same semantic token names, so no component changes. Three ways in, all using the same token block: [data-theme="dark"] — the whole document is dark [data-surface="ink"] — one section is dark inside a light document [data-surface="paper"] — one section is light inside a dark document Two principles held from the light theme: 1. Contrast ratios are matched, not guessed. Light theme runs ink 17.15 / ink-2 9.53 / ink-3 5.21 against --ground; the dark values below land at ~17.4 / ~9.6 / ~5.3 against the dark ground, so text hierarchy reads identically in both themes. 2. Higher ramp step = more visually present, in both themes. In the light theme that means light -> dark; on dark it means dim -> bright. Because the SEMANTIC direction is preserved, the band -> step mapping in system.css (.coverage-day[data-band]) is correct in both themes and needs no override. That is the whole reason to select a ramp rather than invert one: an inversion would have made full coverage the faintest mark. The usable-mark threshold moves, and this is the one thing consumers must know: on light, use --seq-400 and DARKER; on dark, use --seq-500 and BRIGHTER. Below those a mark falls under 3:1 against its own ground. That dark floor was measured, not assumed. The ramp lands at 100 1.2 / 200 1.4 / 300 2.0 / 400 2.7 / 500 3.6 / 600 5.1 / 700 7.3 / 800 11.6 against --ground, so --seq-300 — which an earlier draft of this note gave as the floor — is 2.0:1 and not usable as a lone mark. --seq-500 is the first step over 3:1. The coverage strip's "low" band sits at --seq-400 (2.70:1) and stays there deliberately: that strip encodes completeness as bar HEIGHT as well as fill, and tags any real gap with a critical tick, so the fill is never the sole carrier of meaning. Anything that does carry meaning by colour alone must start at --seq-500. ========================================================================== */ /* -------------------------------------------------------------------------- Backwards-compat defaults — MUST stay above the dark block. The light theme predates these two tokens, so they need values at :root. On light they are identical to --signal, which is why every existing component keeps rendering exactly as it did. Order is load-bearing, not cosmetic: `:root` and `[data-theme="dark"]` both match with identical specificity (0,1,0), so whichever comes LAST wins. With this block below the dark block it silently overwrote --signal-solid back to the light indigo on a dark document — reintroducing the ~2:1 contrast failure the token split exists to prevent. If you add another :root declaration to this file, add it here. -------------------------------------------------------------------------- */ :root { --signal-solid: #3F37BE; --signal-on: #FFFFFF; } [data-theme="dark"], [data-surface="ink"] { /* Surfaces — the same faint blue cast as the light theme, at the bottom of the scale. Not black: pure black kills the sense of a lit instrument and makes every hairline look like a defect. */ --ground: #080C10; --surface: #0F171D; --surface-sunk: #060A0D; /* Ink — near-white with the same blue cast. Contrast vs --ground: ink ~17.4 / ink-2 ~9.6 / ink-3 ~5.3, matched to the light theme. */ --ink: #F1F6F9; --ink-2: #B3C3CD; --ink-3: #7C8F9B; --rule: #223039; --rule-soft: #17212A; /* Signal — same hue, re-selected for a dark ground. #3F37BE measures ~2.0:1 here, so it cannot carry link text. The accent lifts to ~9.4:1; the FILLED action keeps a mid indigo so a primary button still reads as a solid block of brand rather than a pale slab. */ --signal: #A79EFF; --signal-hover: #C7C2FF; --signal-solid: #5B51E8; --signal-on: #FFFFFF; --signal-wash: #171540; /* Sequential ramp — same hue, re-selected dim -> bright. Monotonic in perceived lightness, ~1.6 -> ~14.3 against --ground. Use --seq-300 and brighter for data marks here. The upper steps carry more chroma than a straight lightness lift would give them: a large fill of a desaturated tint reads chalky on a dark ground, and the coverage strip is a very large fill. */ --seq-100: #1C1A3D; --seq-200: #2A2657; --seq-300: #3B3596; --seq-400: #4E44BE; --seq-500: #6257D9; --seq-600: #7C71EC; --seq-700: #9A90FF; --seq-800: #C6C0FF; /* Status — fills brighten slightly so a 7px dot still registers, and the written-out equivalents are fully re-selected: the light theme's dark greens and browns are unreadable here. */ --status-good: #22C55E; --status-warning: #FBBF24; --status-serious: #F98A5C; --status-critical: #EF4444; --status-good-ink: #5DE698; --status-warning-ink: #FCD34D; --status-serious-ink: #FDB48F; --status-critical-ink: #FF9490; /* Elevation — on dark a drop shadow does nothing. Depth comes from the surface step itself, so a card is separated by its own lighter fill plus a hairline. */ --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04); --shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px -12px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* Light values re-stated so a section can go back to paper inside a dark document. The same eight surface/ink/signal decisions as tokens.css, not new ones. */ [data-surface="paper"] { --ground: #F4F7F9; --surface: #FFFFFF; --surface-sunk: #E9EFF3; --ink: #0D1519; --ink-2: #33434C; --ink-3: #5A6A73; --rule: #D7E1E7; --rule-soft: #E8EEF2; --signal: #3F37BE; --signal-hover: #2E278F; --signal-solid: #3F37BE; --signal-on: #FFFFFF; --signal-wash: #EEEDF9; --seq-100: #E8E6F9; --seq-200: #CBC7F1; --seq-300: #ADA6E8; --seq-400: #8C83DD; --seq-500: #6B61D0; --seq-600: #5148BE; --seq-700: #3B33A6; --seq-800: #2A2480; --status-good: #0CA30C; --status-warning: #FAB219; --status-serious: #EC835A; --status-critical: #D03B3B; --status-good-ink: #076B07; --status-warning-ink: #7A5300; --status-serious-ink: #9A4620; --status-critical-ink: #96201F; --shadow-sm: 0 1px 2px rgba(13, 21, 25, 0.06); --shadow: 0 2px 8px rgba(13, 21, 25, 0.08); color-scheme: light; } /* Opting in ----------- Dark is opt-in via an attribute, not via prefers-color-scheme. That is deliberate: this palette exists in exactly ONE place above, and an @media block would mean a second copy to keep in sync — the precise failure tokens.css was created to prevent. The shell reads the stored choice and falls back to the OS preference in one line. */