/* ============================================================================ Boot Scoot — palette alternatives. The default theme is Turquoise & Tack, and it lives in the `:root` block of styles.css because that is what a default is. This file is everything else: four alternatives, each overriding only that token layer. Nothing else in the app knows a colour, so a whole re-theme is exactly this much code. Set on : data-pal="roadhouse" | "sawdust" | "slate" `slate` is the amber-on-slate the app shipped with before this, kept because it is a real option rather than for nostalgia. Two themes have a daylight counterpart, keyed separately rather than off prefers-color-scheme, because the app has no theme setting yet and deciding whether the OS gets to choose belongs with that setting rather than ahead of it: data-pal="roadhouse-day" | "tack-day" `tack-day` is the daylight counterpart of the DEFAULT — veg-tan against the default's oiled leather — so the pairing to wire up first, once there is a setting to hang it on, is `:root` ↔ `tack-day`. Sawdust has no night counterpart — daylight IS its thesis, and its dark equivalents are the default and Roadhouse. Three constraints shaped every value here, in this order: 1. WCAG. Body text clears 4.5:1 on every ground it lands on; control boundaries clear 3:1 (1.4.11). The old theme shipped one failure — `--bad-line` at 1.81:1 against `--surface-2`, an invisible border on the "Erase all data" button — and every palette here fixes it, including the preserved copy of that theme. 2. The graph at fit zoom. Below k=0.85 the Tree tab drops its labels, so node COLOUR is the only channel left for learned / ready / locked. Those three have to stay tellable apart under protanopia and deuteranopia, which is why `--good` is a green-leaning mint here rather than the turquoise both night palettes wanted: turquoise collapses onto neutral grey under deutan, exactly where "locked" lives. (The default resolves that the other way — it spends the turquoise on `--accent` and moves "locked" to a warm dust.) Measured as ΔE between CVD-simulated fills, `slate` scores 9.6; the rest score 16.4–33.8. 3. The frequency bars on the Log tab. `--accent` bars against one `--bad` bar is a paired encoding — "this is the dance you have over-drilled" — so accent and bad must separate too. `--good` and `--bad` never form a pair anywhere in the app, so they are not held to it. Each block also sets `color-scheme`, which is not a custom property and so cannot live in the token list: it is what makes the native date picker in the Log tab, the scrollbars, and the form-control chrome render in the same world as the palette instead of the browser's default. ============================================================================ */ /* --------------------------------------------------------------------------- ROADHOUSE — the hall at ten o'clock. A blue-black room lit by signage. Neon amber over the bar, jukebox mint for what you already own, neon red for the dance you have drilled into the ground. The coolest and loudest of the three; best in a dim hall, which is where the phone actually is. --------------------------------------------------------------------------- */ [data-pal="roadhouse"]{ color-scheme:dark; --bg:#080a11; --surface:#0f141f; --surface-2:#171d2a; --sunk:#0b0e17; --void:#000; --line:#28303f; --line-bright:#6e7c96; --text:#eef3fb; --text-dim:#a6b3ca; --text-faint:#9099b0; /* violet-leaning slate: far from amber, far from mint, and blue is the hue red-green colour blindness preserves */ --locked:#868ebb; --accent:#ffad2b; --accent-dim:#754809; --accent-well:#251904; --accent-ink:#160f02; --accent-deep:#452a06; --accent-text:#ffc873; --accent-pale:#ffe6bd; --good:#35e0ad; --good-line:#1d7a60; --good-well:#06251f; --good-ink:#04130f; --good-text:#86f0d0; --bad:#f9566d; --bad-line:#d1465b; --warn-well:#2c2409; --warn-line:#7f6816; --warn-text:#ecc756; --flag-well:#241a2e; --flag-line:#63507e; --flag-text:#c9b1ec; --shadow:rgba(0,0,0,.66); --tint:22%; --tint-lod:22%; } /* --------------------------------------------------------------------------- SLATE — the amber-on-slate the app shipped with, kept as an option. Neutral dark grey, amber for attention, green for earned. It is the one palette here that is not about the subject; it is about being a competent dark app, which is a legitimate thing to want. Two values differ from what actually shipped, because both were bugs rather than choices: `--bad-line` was #6b3a34 at 1.81:1 against its card, a WCAG 1.4.11 failure on the border of "Erase all data", and the graph's third state had no token of its own — it borrowed `--text-faint`. Restoring those alongside the palette would be preserving the wrong half of it. Its known weakness is the one that motivated the rest of this file: at fit zoom the Tree tab drops node labels, and amber / green / slate converge to ΔE 9.6 under protanopia — three states the same olive on the one screen where colour carries the whole reading. That is inherent to the amber-and-green pairing rather than to any single value in it. --------------------------------------------------------------------------- */ [data-pal="slate"]{ color-scheme:dark; --bg:#0a0b0d; --surface:#131519; --surface-2:#1b1e24; --sunk:#0d0f12; --void:#000; --line:#2a2f38; /* #3d444f as shipped measured 1.68:1 against the cards it draws on */ --line-bright:#626b7a; --text:#f4f6f8; --text-dim:#a3adba; /* #6e7885 as shipped measured 3.72:1 on --surface-2 */ --text-faint:#808b99; /* cool slate — with a warm accent, "locked" gets to keep the hue that red-green colour blindness preserves */ --locked:#7f8ca6; --accent:#e8933a; --accent-dim:#8a5620; --accent-well:#241a0e; --accent-ink:#17120a; --accent-deep:#4b3410; --accent-text:#f0b578; --accent-pale:#fbdcb4; --good:#4ea87a; --good-line:#2c6242; --good-well:#14301f; --good-ink:#0a0b0d; --good-text:#9ad9b8; --bad:#db6858; --bad-line:#a8564b; --warn-well:#332a12; --warn-line:#6b571f; --warn-text:#e0bd6a; --flag-well:#2a2024; --flag-line:#5c4148; --flag-text:#d59aa6; --shadow:rgba(0,0,0,.6); --tint:22%; --tint-lod:22%; } /* --------------------------------------------------------------------------- ROADHOUSE DAY — the same room with the work lights on. Bleached pine and cold morning light, so the ground keeps the night version's blue cast and the amber still reads as light falling on it rather than as beige. The amber has to darken to a burnt sienna to clear 4.5:1 on paper, which is the honest cost of the mode: a light theme pushes all four state colours into the bottom third of the lightness range, where they have much less room to differ from each other. This variant had it easy. Its accent is warm, so almost any cool `--locked` works: of 433 candidate values, 406 cleared the separation floor. Compare Tack Day below, which got 14. --------------------------------------------------------------------------- */ [data-pal="roadhouse-day"]{ color-scheme:light; --bg:#e3e7ee; --surface:#f7f9fc; --surface-2:#dde3ed; --sunk:#d3dae6; --void:#10131a; --line:#c6cdda; --line-bright:#6d7688; --text:#12151d; --text-dim:#414958; --text-faint:#535c6d; /* ink-indigo: still the cool third state, but now it is the DARKEST thing in the graph rather than the dimmest — on paper, receding means unprinted */ --locked:#3a3a63; --accent:#8f5504; --accent-dim:#f4dcc2; --accent-well:#fbf0e3; --accent-ink:#fff8ef; --accent-deep:#f6dcbb; --accent-text:#734203; --accent-pale:#5f3703; --good:#14806a; --good-line:#4fa895; --good-well:#dbece7; --good-ink:#f4fcfa; --good-text:#0d5b4c; /* wine, not the night version's neon red: a plain red cannot separate from a burnt-amber accent, and accent-vs-bad is the frequency-bar encoding */ --bad:#a51a4e; --bad-line:#b8557d; --warn-well:#f2e7c6; --warn-line:#a98d3e; --warn-text:#574512; --flag-well:#ece1f1; --flag-line:#9b7fae; --flag-text:#583a68; --shadow:rgba(24,32,56,.22); /* No burnished rim on paper: over a light ground the hole is legible as a plain punch, and a rim just makes it look grubby. Same reason --tint-lod jumps here — a wash behaves differently over paper than over black. */ --punch-ink:color-mix(in srgb,var(--void) 62%,transparent); --punch-rim:var(--punch-ink); --tint:18%; --tint-lod:54%; } /* --------------------------------------------------------------------------- TACK DAY — veg-tan: the default's leather before it is oiled. Pale natural hide, deep turquoise, burnished bronze. This is the daylight counterpart of the theme in styles.css, and the role swap survives the mode change, which is the point: turquoise is still your turn and metal is still what you own. This is the hard variant, and it is hard for the reason the light theme always is. A cool accent leaves almost nowhere for `--locked` to stand: of 301 candidates only **14** cleared the floor, and every one of them was a warm olive-drab — so "not yet" here is sun-bleached khaki rather than the night version's dust, and that is forced, not chosen. One pair stays genuinely tight: `--good-text` (bronze) against `--bad` (brick) measures ΔE 9.6 under CVD. They are both pinned warm — bad has to leave the teal accent, good has to stay metal — and a plum `--bad` that separates from the bronze then collides with the teal instead. They never form a paired encoding; the only place they meet is the inline "+3 dances / 2 blocked" line on the Tree tab, where the words carry it. Worth knowing rather than worth hiding. --------------------------------------------------------------------------- */ [data-pal="tack-day"]{ color-scheme:light; /* butterscotch veg-tan rather than grey-tan: hide that has been in the sun */ --bg:#ecdfc5; --surface:#fbf7ef; --surface-2:#e6dccd; --sunk:#d9c9ab; --void:#1c1610; --line:#d6c4a0; /* the same brass idea as the night variant, in the only register a light theme allows: a control boundary owes 3:1 against paper, so it has to be dark — but dark brass rather than dark grey-tan */ --line-bright:#8a7040; --text:#191510; --text-dim:#4c4235; --text-faint:#5c5244; /* sun-bleached khaki — the only hue family that had any room at all here */ --locked:#5c5438; --accent:#0d6b6a; --accent-dim:#cfeae7; --accent-well:#e9f5f3; --accent-ink:#f2fcfb; --accent-deep:#c9ece9; --accent-text:#064744; --accent-pale:#06403f; /* marigold rather than the dull bronze this started as — but only just. --good is a FILL, so it owes 3:1 against both the inset and the graph canvas, and a mid-tone amber on tan paper is the worst case for that: it is the one colour here squeezed from both sides at once. Warming the ground to butterscotch cost it room and it had to give some back. This is the brightest marigold that still carries a white checkmark at 4.5:1. */ --good:#9e6206; --good-line:#c2913c; --good-well:#f5e8cd; --good-ink:#fffaf0; --good-text:#5f3c04; --bad:#b52d20; --bad-line:#b06254; --warn-well:#e6eed0; --warn-line:#7d9a45; --warn-text:#3d4d14; --flag-well:#ece0f2; --flag-line:#9a7bb0; --flag-text:#513666; --shadow:rgba(60,40,20,.22); /* No burnished rim on paper: over a light ground the hole is legible as a plain punch, and a rim just makes it look grubby. Same reason --tint-lod jumps here — a wash behaves differently over paper than over black. */ --punch-ink:color-mix(in srgb,var(--void) 62%,transparent); --punch-rim:var(--punch-ink); --tint:18%; --tint-lod:54%; } /* --------------------------------------------------------------------------- SAWDUST — daylight. A printed practice sheet, not a screen. Bone paper and four inks: rust for attention, deep teal for what is yours, violet for what is locked, oxblood for danger. That is a real letterpress constraint — a limited ink run — and it is also what the maths demanded. A cool accent made the light theme unsolvable: dark cool grey cannot separate from dark indigo, so with an indigo accent there is no legal `--locked` colour at all. Warm accent, cool locked. `--tint-lod` also climbs to 54%, because a 22% wash over cream leaves two near-identical pale rectangles at fit zoom — while `--tint` DROPS to 18%, because at reading zoom a dark label has to sit on that same fill. Over a dark ground one number served both bands; over a light one it cannot. The one theme here that was drawn for a studio floor at noon rather than adapted to it — the other two light palettes are counterparts of a dark original, and this one is not. --------------------------------------------------------------------------- */ [data-pal="sawdust"]{ color-scheme:light; --bg:#e5dbc8; --surface:#faf6ee; --surface-2:#e7ded0; --sunk:#ded3c0; --void:#221d16; --line:#cfc3ae; --line-bright:#7f7360; --text:#1d1a15; --text-dim:#4c453a; --text-faint:#5d5548; /* violet, not the slate-indigo this started as. A teal "owned" and an indigo "locked" are both cool, and under protanopia the two node fills converged; pushing locked toward violet and owned toward teal separates them on the one axis red-green colour blindness leaves intact. */ --locked:#63488a; /* the fill/text roles invert in a light theme: -ink and -deep go pale, -dim and -well become washes, -text and -pale become the dark inks */ --accent:#a03d16; --accent-dim:#f0d8cb; --accent-well:#f8eae2; --accent-ink:#fdf6f2; --accent-deep:#f6dbcc; --accent-text:#82300b; --accent-pale:#6f2a0c; --good:#0f7a78; --good-line:#4f9a97; --good-well:#dcebea; --good-ink:#f4fcfb; --good-text:#0a4746; --bad:#6a2436; --bad-line:#9c626d; --warn-well:#f4e6c4; --warn-line:#a98a3e; --warn-text:#5b4712; --flag-well:#f0dfe6; --flag-line:#a87e91; --flag-text:#65334a; --shadow:rgba(70,55,30,.24); /* No burnished rim on paper: over a light ground the hole is legible as a plain punch, and a rim just makes it look grubby. Same reason --tint-lod jumps here — a wash behaves differently over paper than over black. */ --punch-ink:color-mix(in srgb,var(--void) 62%,transparent); --punch-rim:var(--punch-ink); --tint:18%; --tint-lod:54%; }