/* ========================================================================== Palettes — the seven themes that are not the default. The theme is chosen by a `data-theme="…"` attribute on , which lib/render.mjs emits. `teal` has NO block here on purpose: it lives in :root in base.css, so a site that has never picked a theme renders with no attribute at all and is byte-identical to before this file existed. THREE THINGS ABOUT THIS FILE ARE LOAD-BEARING. 1. It must be linked AFTER base.css. `:root` and `[data-theme="x"]` are both specificity (0,1,0), so the tie is broken by source order — move the link above base.css and every themed site silently reverts to teal. 2. The selector has no `html` prefix, also on purpose. A bare attribute selector means admin/ can theme a preview
and get the real components in the candidate palette without a reload, an iframe, or a second copy of any colour. Writing `html[data-theme]` would break that. It also means the admin panel insulates itself structurally: its never carries the attribute, so no block here can match it. 3. Every colour is a LITERAL. There is no color-mix() and no rgb(from …). Both are 2023 features, and the audience for this site is overseas buyers of a Chinese manufacturer — a long tail of Android WebView and iPhones that stopped updating. The failure mode of a derived colour there is a declaration that is invalid at computed-value time, which resolves to `unset`: a transparent background or an inherited colour, with no error. Literals render identically everywhere. `npm run check:themes` fails the build if either function reappears. --------------------------------------------------------------------------- A palette is valid when all of the following hold. check-themes.mjs asserts every one of them, so this list is enforceable rather than aspirational. 1. --body on --paper ≥ 7:1 2. --muted on --paper ≥ 4.5:1 ← fails most often; do not lighten one "just a little" 3. --teal-500 on --paper ≥ 4.5:1 (it is the link colour) 4. --teal-600 on --teal-50 ≥ 4.5:1 (the .chip pair) 5. --teal-400 on --paper ≥ 3:1 (focus border — WCAG 2.2 non-text) 6. --teal-500/600/700/800 luminance ≤ 0.183, i.e. white text on the accent clears 4.5:1. This is what forbids a pale accent: "sky blue" must be a DEEP sky for rungs 500–800 and a pale one only for 50–200 7. each --on-inverse* on --surface-inverse ≥ 4.5:1 Not here, and must not be: --ok / --warn / --bad / --sold. A "sold out" badge must not turn pink and an error must not become the brand colour, so those four stay in :root in base.css. ========================================================================== */ /* ------------------------------------------------------------------ White -- * * The hard case. The accent has no hue, so the identity rides on hairlines and * greys instead. Two consequences worth knowing: --teal-500 and --ink end up * within a few percent of each other, so links and look nearly * identical (a legitimate editorial choice for a monochrome brand, but it must * be a choice — check a paragraph containing both); and --teal-400 has to be * darkened to #8a8a8a or it fails the 3:1 focus-border threshold. */ [data-theme="white"] { --teal-50: #fafafa; --teal-100: #f4f4f4; --teal-200: #e8e8e8; --teal-300: #d4d4d4; --teal-400: #8a8a8a; --teal-500: #1c1c1c; --teal-600: #111111; --teal-700: #0a0a0a; --teal-800: #000000; --ink: #111111; --body: #3d3d3d; --muted: #6b6b6b; --cream: #fafafa; --paper: #ffffff; --line: #e6e6e6; --line-soft: #f0f0f0; --gold: #5a5a5a; --gold-soft: #f2f2f2; --on-accent: #ffffff; --surface-glass: rgba(255, 255, 255, .94); --focus-ring: rgba(28, 28, 28, .14); --surface-inverse: #000000; --on-inverse: #e6e6e6; --on-inverse-strong: #ffffff; --on-inverse-soft: #b8b8b8; --on-inverse-faint: #a0a0a0; --on-inverse-accent: #d4d4d4; --line-inverse: rgba(255, 255, 255, .14); --line-inverse-strong: rgba(230, 230, 230, .30); --shadow-inverse: 0 6px 18px rgba(0, 0, 0, .34); /* Neutral, not brand-tinted. A teal-green shadow under a monochrome page reads as a smudge. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04); --shadow-md: 0 4px 16px rgba(0, 0, 0, .07), 0 12px 40px rgba(0, 0, 0, .05); } /* ------------------------------------------------------------------- Pink -- */ [data-theme="pink"] { --teal-50: #fdf2f6; --teal-100: #fbe6ee; --teal-200: #f7cfdd; --teal-300: #eda9c1; --teal-400: #d9568a; --teal-500: #b02a5b; --teal-600: #8e2049; --teal-700: #74193b; --teal-800: #4d0f27; --ink: #3a1424; --body: #5c3346; --muted: #84606f; --cream: #fdf8fa; --paper: #ffffff; --line: #f2dee7; --line-soft: #f8ecf1; --gold: #9c6b3f; --gold-soft: #fbeedf; --on-accent: #ffffff; --surface-glass: rgba(255, 255, 255, .94); --focus-ring: rgba(176, 42, 91, .15); --surface-inverse: #4d0f27; --on-inverse: #f2d9e4; --on-inverse-strong: #ffffff; --on-inverse-soft: #d9a8bf; --on-inverse-faint: #b9839c; --on-inverse-accent: #d48aa8; --line-inverse: rgba(255, 255, 255, .14); --line-inverse-strong: rgba(242, 217, 228, .30); --shadow-inverse: 0 6px 18px rgba(77, 15, 39, .32); --shadow-sm: 0 1px 2px rgba(77, 15, 39, .06), 0 2px 8px rgba(77, 15, 39, .04); --shadow-md: 0 4px 16px rgba(77, 15, 39, .08), 0 12px 40px rgba(77, 15, 39, .06); } /* --------------------------------------------------------------- Sky blue -- * * --muted is the trap here. The "obvious" sky-grey, #5d7b8f, computes to * 4.47:1 — it fails by 0.03. #557184 is the same hue darkened to clear 5:1. * Anyone picking a muted tone by eye on a blue theme will land on the failing * one, which is why the checker asserts rule 2 explicitly. */ [data-theme="sky"] { --teal-50: #f1f8fd; --teal-100: #e3f1fb; --teal-200: #c7e3f6; --teal-300: #93c8ea; --teal-400: #3f93cf; --teal-500: #14618f; --teal-600: #0f4e74; --teal-700: #0c3f5e; --teal-800: #072a40; --ink: #0d2a3d; --body: #33546a; --muted: #557184; --cream: #f7fbfe; --paper: #ffffff; --line: #d8e8f3; --line-soft: #e9f3fa; --gold: #b38855; --gold-soft: #f7f0e4; --on-accent: #ffffff; --surface-glass: rgba(255, 255, 255, .94); --focus-ring: rgba(20, 97, 143, .15); --surface-inverse: #072a40; --on-inverse: #d6e9f6; --on-inverse-strong: #ffffff; --on-inverse-soft: #a8c9e0; --on-inverse-faint: #7fa8c4; --on-inverse-accent: #8fc4e8; --line-inverse: rgba(255, 255, 255, .14); --line-inverse-strong: rgba(214, 233, 246, .30); --shadow-inverse: 0 6px 18px rgba(7, 42, 64, .32); --shadow-sm: 0 1px 2px rgba(7, 42, 64, .06), 0 2px 8px rgba(7, 42, 64, .04); --shadow-md: 0 4px 16px rgba(7, 42, 64, .08), 0 12px 40px rgba(7, 42, 64, .06); } /* ------------------------------------------------------------------ Brown -- * * Brown's problem is not contrast, it is COLLAPSE: page, accent and gold all * sit in the same warm quadrant. Left alone, --gold on --cream reads as "more * brown", and .authenticity-box (gold on gold-soft) next to .price-card (teal * on teal-50) becomes two barely-distinguishable warm boxes. Hence the * overridden --gold here, which no other palette needs. * * View a page with .authenticity-box adjacent to .price-card before signing * this one off — --gold, --teal-400 and --body are three warm tones inside a * narrow band, and --cream/--teal-50/--line are within a few ΔE of each other, * so --line has to do all the separating. */ [data-theme="brown"] { --teal-50: #faf6f1; --teal-100: #f4ece2; --teal-200: #e8dac6; --teal-300: #d2b592; --teal-400: #a97c4f; --teal-500: #7a4f2a; --teal-600: #613d20; --teal-700: #4e3119; --teal-800: #2f1d0e; --ink: #33210f; --body: #55402c; --muted: #7d6a56; --cream: #faf7f2; --paper: #ffffff; --line: #eadfd0; --line-soft: #f3ece2; --gold: #8a6a3a; --gold-soft: #f0e6d3; --on-accent: #ffffff; --surface-glass: rgba(255, 255, 255, .94); --focus-ring: rgba(122, 79, 42, .15); --surface-inverse: #2f1d0e; --on-inverse: #ecdfd0; --on-inverse-strong: #ffffff; --on-inverse-soft: #c9b49b; --on-inverse-faint: #a9927a; --on-inverse-accent: #d8b98c; --line-inverse: rgba(255, 255, 255, .14); --line-inverse-strong: rgba(236, 223, 208, .30); --shadow-inverse: 0 6px 18px rgba(47, 29, 14, .34); --shadow-sm: 0 1px 2px rgba(47, 29, 14, .06), 0 2px 8px rgba(47, 29, 14, .04); --shadow-md: 0 4px 16px rgba(47, 29, 14, .08), 0 12px 40px rgba(47, 29, 14, .06); } /* ---------------------------------------------------------------- Crimson -- * * Lacquer and vermilion, the register the statues themselves are finished in. * The danger is that it lands on "sale" red, so the accent is held at a deep * oxblood (#9b1c1c, 8.2:1 against white) rather than anything brighter. */ [data-theme="crimson"] { --teal-50: #fdf2f2; --teal-100: #fbe4e4; --teal-200: #f6cccc; --teal-300: #e8a3a3; --teal-400: #cf4d4d; --teal-500: #9b1c1c; --teal-600: #7d1717; --teal-700: #641212; --teal-800: #3d0b0b; --ink: #3a0f0f; --body: #5c3232; --muted: #866060; --cream: #fdf8f8; --paper: #ffffff; --line: #f0dede; --line-soft: #f8ecec; --gold: #9c6b3f; --gold-soft: #fbeedf; --on-accent: #ffffff; --surface-glass: rgba(255, 255, 255, .94); --focus-ring: rgba(155, 28, 28, .15); --surface-inverse: #3d0b0b; --on-inverse: #f2d9d9; --on-inverse-strong: #ffffff; --on-inverse-soft: #dba8a8; --on-inverse-faint: #bc8383; --on-inverse-accent: #e08a8a; --line-inverse: rgba(255, 255, 255, .14); --line-inverse-strong: rgba(242, 217, 217, .30); --shadow-inverse: 0 6px 18px rgba(61, 11, 11, .32); --shadow-sm: 0 1px 2px rgba(61, 11, 11, .06), 0 2px 8px rgba(61, 11, 11, .04); --shadow-md: 0 4px 16px rgba(61, 11, 11, .08), 0 12px 40px rgba(61, 11, 11, .06); } /* ----------------------------------------------------------------- Forest -- * * Ink green — the same family as the default teal but pulled much darker and * more saturated, so it reads as a deliberate choice next to teal rather than * as teal with the brightness wrong. */ [data-theme="forest"] { --teal-50: #f1f8f3; --teal-100: #e2f0e6; --teal-200: #c5e1cd; --teal-300: #92c3a2; --teal-400: #3f8f5c; --teal-500: #146b39; --teal-600: #0f5530; --teal-700: #0c4427; --teal-800: #072b19; --ink: #0d2a1a; --body: #33553f; --muted: #567263; --cream: #f7fbf8; --paper: #ffffff; --line: #d8e8dd; --line-soft: #e9f3ec; --gold: #b38855; --gold-soft: #f7f0e4; --on-accent: #ffffff; --surface-glass: rgba(255, 255, 255, .94); --focus-ring: rgba(20, 107, 57, .15); --surface-inverse: #072b19; --on-inverse: #d6ecdf; --on-inverse-strong: #ffffff; --on-inverse-soft: #a8cdb6; --on-inverse-faint: #7fa88f; --on-inverse-accent: #8fc9a6; --line-inverse: rgba(255, 255, 255, .14); --line-inverse-strong: rgba(214, 236, 223, .30); --shadow-inverse: 0 6px 18px rgba(7, 43, 25, .34); --shadow-sm: 0 1px 2px rgba(7, 43, 25, .06), 0 2px 8px rgba(7, 43, 25, .04); --shadow-md: 0 4px 16px rgba(7, 43, 25, .08), 0 12px 40px rgba(7, 43, 25, .06); } /* ----------------------------------------------------------------- Purple -- */ [data-theme="purple"] { --teal-50: #f8f4fc; --teal-100: #f0e9f8; --teal-200: #e0d2f0; --teal-300: #bfa3dd; --teal-400: #8a5cc0; --teal-500: #6234a0; --teal-600: #4f2a82; --teal-700: #402169; --teal-800: #2a1645; --ink: #291540; --body: #4a3763; --muted: #736287; --cream: #faf8fd; --paper: #ffffff; --line: #e3daf0; --line-soft: #f0eaf8; --gold: #b38855; --gold-soft: #f7f0e4; --on-accent: #ffffff; --surface-glass: rgba(255, 255, 255, .94); --focus-ring: rgba(98, 52, 160, .15); --surface-inverse: #2a1645; --on-inverse: #e0d4f0; --on-inverse-strong: #ffffff; --on-inverse-soft: #c0aad8; --on-inverse-faint: #9d85b8; --on-inverse-accent: #b99ada; --line-inverse: rgba(255, 255, 255, .14); --line-inverse-strong: rgba(224, 212, 240, .30); --shadow-inverse: 0 6px 18px rgba(42, 22, 69, .34); --shadow-sm: 0 1px 2px rgba(42, 22, 69, .06), 0 2px 8px rgba(42, 22, 69, .04); --shadow-md: 0 4px 16px rgba(42, 22, 69, .08), 0 12px 40px rgba(42, 22, 69, .06); }