tokens/palette.mjs

Functions

Imports

It imports tokens/chart.mjs. Imported by tokens/chart.mjs, tokens/scale.mjs, tokens/sites.mjs.

Source

1// The design tokens, generated from one seed colour per family. `node tokens/palette.mjs`
2// writes tokens/colour.css; `--check` regenerates it in memory, refuses any difference from
3// the committed file, and checks every text and control pair against WCAG 2.2 (4.5:1 for
4// text, 3:1 for a control's boundary), in both themes. `npm run check` runs the check, so CI
5// refuses a hand-edited hex and a pair that fell below the bar.
6//
7// The family scale (rulings.md, rule 14, locked 2026-10-01): every brand colour is a
8// 12-step OKLCH scale with the same lightness roles, the Radix Colors step roles (1 and 2
9// backgrounds, 3 to 5 element backgrounds, 6 to 8 borders, 9 the solid accent, 10 its hover,
10// 11 low-contrast text, 12 high-contrast text). Step 9 is the seed exactly, in both themes.
11// Step 11 in the light theme may be a fixed anchor: the purple family keeps #4F2D7F there.
12// Every other step takes the seed's hue at a fixed lightness and a fixed share of the
13// seed's chroma, so two families with the same seed lightness and chroma (purple #8c5fd2
14// and Foxing's #cc4f0c, both L 0.586, C 0.172) differ only in hue. Neutrals carry a small
15// chroma at the seed's hue; status hues are fixed and tuned by bisection against the
16// hardest surface each sits on. The OKLab conversion follows Bjorn Ottosson's reference.
17//
18//   node tokens/palette.mjs                       colour.css (purple), family-fox.css, family-teal.css, family-navy.css, family-forest.css
19//   node tokens/palette.mjs --family=fox --out=f  Foxing's family as a root theme into f
20//   node tokens/palette.mjs --seed=#RRGGBB [--anchor=#RRGGBB] --out=f
21//   node tokens/palette.mjs --report              every pair, every family, both themes
22//
23// tokens/colour.css is the purple family on :root (the default). tokens/family-fox.css,
24// tokens/family-teal.css, tokens/family-navy.css and tokens/family-forest.css carry the same tokens scoped to
25// [data-family="fox"], [data-family="teal"], [data-family="navy"] and [data-family="forest"], so one element (the root, or a wrapper) can switch family for its
26// subtree. Both themes follow the same pattern as colour.css (prefers-color-scheme, then
27// [data-theme]). Everything inside a family block is a literal value, never a var() chain,
28// so a family on a wrapper does not inherit the root family's already-resolved values.
29import { readFileSync, writeFileSync } from "node:fs";
30import { fileURLToPath } from "node:url";
31import { chartChecks, companionColours, labelOn, rampColours } from "./chart.mjs";
32
33export const FAMILIES = {
34  // defaultTheme is the theme checked first (rule 15). Purple follows the viewer's system
35  // setting, so its light theme is checked first as the default with no preference.
36  purple: { seed: "#8c5fd2", anchor: "#4F2D7F", defaultTheme: "light", note: "Capsid Portal, Carrel, dustinedwards.info, Germomics (rule 14)" },
37  fox: { seed: "#cc4f0c", anchor: null, defaultTheme: "light", note: "Foxing, light by default (rules 14 and 15)" },
38  teal: { seed: "#008489", anchor: null, defaultTheme: "dark", note: "Foxhound, dark by default (rule 15)" },
39  // txasm's navy: the brand #002868 is too dark to be step 9 (it fails 3:1 as a focus ring on
40  // the dark surface), so it is the light theme's step 11 anchor (links, headings, accent text)
41  // and step 9 is the same hue at the lightness and strength of purple and fox (OKLCH L 0.587, C 0.172).
42  navy: { seed: "#3978e0", anchor: "#002868", defaultTheme: "light", note: "txasm, light by default; the brand navy #002868 is step 11 in light" },
43  // julieedwards.info's forest: the Bluff Dale ISD green #15532E is step 11 in light, as navy's
44  // #002868 is. Step 9 is its hue at purple and fox's lightness (OKLCH L 0.587); green runs out of
45  // sRGB at chroma 0.15 there, so it takes that, the strongest this green can be.
46  forest: { seed: "#06954f", anchor: "#15532E", defaultTheme: "light", note: "julieedwards.info, light by default; the school green #15532E is step 11 in light" },
47};
48const OUT = fileURLToPath(new URL("./colour.css", import.meta.url));
49const arg = (name) => process.argv.find((a) => a.startsWith(`--${name}=`))?.slice(name.length + 3);
50const hexArg = (name) => {
51  const v = arg(name);
52  if (v !== undefined && !/^#[0-9a-f]{6}$/i.test(v)) throw new Error(`--${name} must be #RRGGBB, got ${v}`);
53  return v;
54};
55const familyArg = arg("family");
56if (familyArg !== undefined && !FAMILIES[familyArg]) throw new Error(`--family must be one of ${Object.keys(FAMILIES).join(", ")}`);
57const seedArg = hexArg("seed");
58const anchorArg = hexArg("anchor");
59const outArg = arg("out");
60
61// ---- colour math ---------------------------------------------------------------------
62
63const hexToRgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
64const toLinear = (c) => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
65const toGamma = (c) => (c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055);
66
67function rgbToOklab([r, g, b]) {
68  r = toLinear(r);
69  g = toLinear(g);
70  b = toLinear(b);
71  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
72  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
73  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
74  return [
75    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
76    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
77    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
78  ];
79}
80
81function oklabToRgb([L, a, b]) {
82  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
83  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
84  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
85  return [
86    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
87    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
88    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
89  ].map(toGamma);
90}
91
92const inGamut = (rgb) => rgb.every((c) => c >= -0.0005 && c <= 1.0005);
93
94// A hex colour for oklch(L C H); the chroma is pulled in until the colour fits sRGB.
95export function oklch(L, C, H) {
96  for (let c = C; c >= 0; c -= 0.002) {
97    const rgb = oklabToRgb([L, c * Math.cos((H * Math.PI) / 180), c * Math.sin((H * Math.PI) / 180)]);
98    if (inGamut(rgb)) return "#" + rgb.map((v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("");
99  }
100  throw new Error(`no sRGB colour for oklch(${L} ${C} ${H})`);
101}
102
103const luminance = (hex) => {
104  const [r, g, b] = hexToRgb(hex).map(toLinear);
105  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
106};
107
108// WCAG 2.x contrast ratio between two hex colours.
109export function contrast(a, b) {
110  const x = luminance(a);
111  const y = luminance(b);
112  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
113}
114
115// The lightness closest to `from` at which oklch(L C H) reaches `target` against `bg`.
116// `to` is the high-contrast end; the search keeps a lightness that meets the target.
117function tune(C, H, bg, target, from, to) {
118  let lo = from;
119  let hi = to;
120  for (let i = 0; i < 40; i++) {
121    const mid = (lo + hi) / 2;
122    if (contrast(oklch(mid, C, H), bg) >= target) hi = mid;
123    else lo = mid;
124  }
125  return oklch(hi, C, H);
126}
127
128
129// ---- the scales ----------------------------------------------------------------------
130
131const NEUTRAL_CHROMA = 0.012;
132// Status hues are kept; only lightness is tuned. info also colours a running job.
133const STATUS = { ok: 150, warn: 78, crit: 26, info: 255 };
134const TEXT = 4.6; // a little above 4.5, so rounding to hex cannot fall under it
135const CONTROL = 3.0;
136const darkest = (...hexes) => hexes.reduce((a, b) => (luminance(b) < luminance(a) ? b : a));
137const lightest = (...hexes) => hexes.reduce((a, b) => (luminance(b) > luminance(a) ? b : a));
138
139// ---- the family scale (rule 14) ----------------------------------------------------------
140
141// The same lightness roles for every family: [L, share of the seed's chroma]. Step 9 is the
142// seed; step 10 is the seed darkened in light and lightened in dark; step 11 in light may be
143// the family's anchor.
144const ROLES = {
145  light: [
146    [0.993, 0.02], [0.982, 0.06], [0.96, 0.14], [0.935, 0.22], [0.905, 0.3], [0.865, 0.36],
147    [0.81, 0.46], [0.735, 0.62], null, [-0.05, 1], [0.42, 0.75], [0.22, 0.25],
148  ],
149  dark: [
150    [0.16, 0.06], [0.19, 0.08], [0.24, 0.18], [0.28, 0.26], [0.32, 0.32], [0.37, 0.36],
151    [0.44, 0.44], [0.53, 0.6], null, [0.05, 1], [0.8, 0.55], [0.94, 0.12],
152  ],
153};
154
155function seedLch(hex) {
156  const [L, a, b] = rgbToOklab(hexToRgb(hex));
157  return { L, C: Math.hypot(a, b), H: ((Math.atan2(b, a) * 180) / Math.PI + 360) % 360 };
158}
159
160// The 12 steps of one family in one theme, as hex, index 0 being step 1.
161export function scale(seed, anchor = null, scheme = "light") {
162  const { L, C, H } = seedLch(seed);
163  return ROLES[scheme].map((role, i) => {
164    const step = i + 1;
165    if (step === 9) return seed.toLowerCase();
166    if (step === 11 && scheme === "light" && anchor) return anchor.toLowerCase();
167    const [l, share] = role;
168    const lightness = step === 10 ? L + l : l;
169    return oklch(lightness, C * share, H);
170  });
171}
172
173const rgbList = (hex) => hexToRgb(hex).map((v) => Math.round(v * 255)).join(", ");
174
175// Elevation in the theme's own ink: Tailwind's xs, sm, md and lg shadows (the shadow scale
176// shadcn uses), tinted from --text in light and heavier on a dark ground, where a shadow
177// reads less. `ring` is the translucent focus glow (shadcn's ring-3 at 50%).
178function elevation(t, scheme) {
179  const dark = scheme === "dark";
180  const ink = dark ? "0, 0, 0" : rgbList(t.text);
181  const a = dark ? [0.3, 0.4, 0.45, 0.55] : [0.05, 0.1, 0.1, 0.1];
182  const c = (n) => `rgba(${ink}, ${a[n]})`;
183  return {
184    "shadow-xs": `0 1px 2px 0 ${c(0)}`,
185    "shadow-s": `0 1px 3px 0 ${c(1)}, 0 1px 2px -1px ${c(1)}`,
186    "shadow-m": `0 4px 6px -1px ${c(2)}, 0 2px 4px -2px ${c(2)}`,
187    "shadow-l": `0 10px 15px -3px ${c(3)}, 0 4px 6px -4px ${c(3)}`,
188    "ring-soft": `rgba(${rgbList(t.ring)}, 0.5)`,
189    "shadow-ring": `0 0 0 var(--ring-width) rgba(${rgbList(t.ring)}, 0.5)`,
190    shadow: "var(--shadow-l)",
191    scrim: `rgba(${ink}, ${dark ? "0.55" : "0.28"})`,
192  };
193}
194
195export const CHART_ORDER = [
196  ...Array.from({ length: 8 }, (_, i) => `series-${i + 1}`),
197  ...Array.from({ length: 8 }, (_, i) => `series-text-${i + 1}`),
198  ...Array.from({ length: 5 }, (_, i) => `ramp-${i + 1}`),
199  ...Array.from({ length: 5 }, (_, i) => `ramp-text-${i + 1}`),
200];
201
202export const ELEVATION_ORDER = ["shadow-xs", "shadow-s", "shadow-m", "shadow-l", "ring-soft", "shadow-ring", "shadow", "scrim"];
203
204// The chart palette (tokens/chart.mjs): eight series colours, the family's five-step ramp, and
205// the label colour that reads best on each. The three seeds are step 9 of the three families,
206// so a series colour is the family colour itself.
207function chartTokens(t, scheme, { C, H }) {
208  const out = {};
209  const series = [FAMILIES.purple.seed, FAMILIES.fox.seed, FAMILIES.teal.seed, ...companionColours(scheme)].map((h) => h.toLowerCase());
210  const ramp = rampColours(H, C, scheme);
211  series.forEach((hex, i) => {
212    out[`series-${i + 1}`] = hex;
213    out[`series-text-${i + 1}`] = labelOn(hex, t.text, t.surface);
214  });
215  ramp.forEach((hex, i) => {
216    out[`ramp-${i + 1}`] = hex;
217    out[`ramp-text-${i + 1}`] = labelOn(hex, t.text, t.surface);
218  });
219  return out;
220}
221
222function familyTheme(seed, anchor, scheme) {
223  const { H } = seedLch(seed);
224  const s = scale(seed, anchor, scheme);
225  const t = {};
226  const dark = scheme === "dark";
227  // Neutrals at the seed's hue.
228  t.ground = oklch(dark ? 0.16 : 0.985, NEUTRAL_CHROMA, H);
229  t.surface = oklch(dark ? 0.205 : 0.995, dark ? NEUTRAL_CHROMA : 0.003, H);
230  t.raised = oklch(dark ? 0.245 : 0.975, dark ? NEUTRAL_CHROMA : 0.008, H);
231  t.sunken = oklch(dark ? 0.135 : 0.93, NEUTRAL_CHROMA, H);
232  t.line = oklch(dark ? 0.32 : 0.9, NEUTRAL_CHROMA, H);
233  t["line-strong"] = tune(NEUTRAL_CHROMA, H, t.raised, CONTROL, dark ? 0.2 : 0.9, dark ? 0.9 : 0.3);
234  t.text = oklch(dark ? 0.95 : 0.22, dark ? 0.008 : 0.03, H);
235  t.muted = dark ? tune(0.015, H, t.surface, 6.0, 0.2, 0.95) : tune(0.02, H, t.ground, 5.5, 0.9, 0.2);
236  t.dim = dark ? tune(0.015, H, t.raised, TEXT, 0.2, 0.95) : tune(0.02, H, t.sunken, TEXT, 0.9, 0.2);
237  // The accent family, from the scale's roles. Step 9 is the brand colour (fills, the focus
238  // ring, large shapes and icons, held to 3:1); step 11 is accent text (4.5:1); the primary
239  // button fills with step 10, hovers to step 11, and carries --primary-fg: the surface tone
240  // in light, the ground tone in dark (a lighter fill takes a dark label).
241  t.accent = s[8];
242  t["accent-hover"] = s[11]; // accent text on hover: step 12
243  t["accent-text"] = s[10];
244  t["accent-soft"] = s[3];
245  t.sel = s[2];
246  t["accent-line"] = tune(0.1, H, t.sel, CONTROL, dark ? 0.2 : 0.9, dark ? 0.9 : 0.3);
247  t.primary = s[9];
248  t["primary-hover"] = s[10];
249  t["primary-fg"] = dark ? t.ground : t.surface;
250  // The on state: a checked box or radio, an on switch. The primary fill by default; a site may
251  // set its own (Foxing's sky blue, its Rule 05), checked by the pairs below with the tick
252  // (--primary-fg) and the switch's thumb (--surface) on it.
253  t.on = t.primary;
254  t["on-hover"] = t["primary-hover"];
255  t.ring = t.accent;
256  for (const [k, hue] of Object.entries(STATUS)) {
257    t[`${k}-soft`] = oklch(dark ? 0.28 : 0.945, 0.05, hue);
258    t[k] = dark
259      ? tune(0.13, hue, lightest(t[`${k}-soft`], t["accent-soft"], t.sel), TEXT, 0.3, 0.95)
260      : tune(0.14, hue, darkest(t[`${k}-soft`], t["accent-soft"], t.sel), TEXT, 0.9, 0.2);
261  }
262  t.nodata = t.dim;
263  t["nodata-soft"] = oklch(dark ? 0.27 : 0.94, 0.006, H);
264  s.forEach((hex, i) => (t[`accent-${i + 1}`] = hex));
265  Object.assign(t, elevation(t, scheme));
266  Object.assign(t, chartTokens(t, scheme, seedLch(seed)));
267  return t;
268}
269
270export const FAMILY_ORDER = [
271  "ground", "surface", "raised", "sunken", "line", "line-strong", "text", "muted", "dim",
272  "accent", "accent-hover", "accent-text", "accent-soft", "accent-line", "sel",
273  "primary", "primary-hover", "primary-fg", "on", "on-hover", "ring",
274  "ok", "ok-soft", "warn", "warn-soft", "crit", "crit-soft", "info", "info-soft", "nodata", "nodata-soft",
275  ...Array.from({ length: 12 }, (_, i) => `accent-${i + 1}`),
276];
277
278// ---- the pairs every theme must pass ---------------------------------------------------
279
280// Every pair a theme must pass, with its ratio: { fg, bg, min, what, ratio, pass }.
281export function pairs(t) {
282  const out = [];
283  const need = (fg, bg, min, what) => {
284    const ratio = contrast(t[fg], t[bg]);
285    out.push({ fg, bg, min, what, ratio, pass: ratio >= min });
286  };
287  // Rulings rule 18: accent text is step 11 (--accent-text) and its hover step 12; the
288  // primary button fill is step 10 with its label --primary-fg; step 9 (--accent, the brand
289  // colour) is held to 3:1 for the focus ring and large fills and never carries text.
290  for (const bg of ["surface", "ground", "raised"]) {
291    for (const fg of ["text", "muted", "dim", "accent-text", "accent-hover"]) need(fg, bg, 4.5, "text");
292    for (const s of Object.keys(STATUS)) need(s, bg, 4.5, "status word");
293  }
294  need("text", "sel", 4.5, "selected row title");
295  need("muted", "sel", 4.5, "selected row detail");
296  need("text", "sunken", 4.5, "command block");
297  need("dim", "sunken", 4.5, "command block note");
298  for (const bg of ["surface", "raised"]) need("line-strong", bg, 3, "control border");
299  need("accent-line", "sel", 3, "selection ring");
300  for (const bg of ["surface", "ground", "raised"]) {
301    need("ring", bg, 3, "focus ring");
302    need("accent", bg, 3, "brand colour as a large fill or icon");
303    need("primary", bg, 3, "primary button fill against its surroundings");
304  }
305  need("primary-hover", "surface", 3, "primary button fill (hover) against its surroundings");
306  for (const bg of ["surface", "ground", "raised"]) need("on", bg, 3, "checked box or on switch against its surroundings");
307  need("on-hover", "surface", 3, "on switch (hover) against its surroundings");
308  need("primary-fg", "on", 3, "tick on a checked box");
309  need("surface", "on", 3, "thumb of an on switch");
310  need("surface", "on-hover", 3, "thumb of an on switch (hover)");
311  for (const s of Object.keys(STATUS)) {
312    need(s, `${s}-soft`, 4.5, "pill");
313    need(s, "accent-soft", 4.5, "count on the active menu item");
314    need(s, "sel", 4.5, "status word on a selected row");
315  }
316  need("accent-text", "accent-soft", 4.5, "active item");
317  need("accent-text", "sel", 4.5, "deep accent text");
318  need("primary-fg", "primary", 4.5, "primary button label");
319  need("primary-fg", "primary-hover", 4.5, "primary button label (hover)");
320  need("surface", "crit", 4.5, "badge label");
321  return out;
322}
323
324export function failures(t) {
325  return pairs(t)
326    .filter((p) => !p.pass)
327    .map((p) => `${p.what}: --${p.fg} ${t[p.fg]} on --${p.bg} ${t[p.bg]} is ${p.ratio.toFixed(2)}:1, needs ${p.min}:1`);
328}
329
330// ---- the files ---------------------------------------------------------------------------
331
332function lines(t, indent, scheme, withScheme) {
333  const out = [...FAMILY_ORDER, ...CHART_ORDER, ...ELEVATION_ORDER].map((k) => `${indent}--${k}: ${t[k]};`);
334  if (withScheme) out.push(`${indent}color-scheme: ${scheme};`);
335  return out.join("\n");
336}
337
338const note = (seed, anchor) => {
339  const { L, C, H } = seedLch(seed);
340  return `step 9 ${seed.toLowerCase()} (oklch ${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})${anchor ? `, step 11 anchored at ${anchor.toLowerCase()}` : ""}`;
341};
342
343// The default family on the document root: colour.css.
344export function renderFamily(seed, anchor = null) {
345  const l = familyTheme(seed, anchor, "light");
346  const d = familyTheme(seed, anchor, "dark");
347  return `/* Generated by tokens/palette.mjs: ${note(seed, anchor)}.
348   Do not edit: change the script and run \`npm run tokens\`. \`npm run check\` refuses a file
349   that differs from what the script writes, and any pair below WCAG 2.2's bar. */
350:root {
351${lines(l, "  ", "light", true)}
352  --ui: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
353  --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
354}
355@media (prefers-color-scheme: dark) {
356  :root:not([data-theme="light"]) {
357${lines(d, "    ", "dark", true)}
358  }
359}
360:root[data-theme="dark"] {
361${lines(d, "  ", "dark", true)}
362}
363`;
364}
365
366// A family scoped to [data-family="name"], on the root or on any wrapper, in both themes.
367export function renderScoped(name, seed, anchor = null) {
368  const l = familyTheme(seed, anchor, "light");
369  const d = familyTheme(seed, anchor, "dark");
370  const f = `[data-family="${name}"]`;
371  return `/* Generated by tokens/palette.mjs: the ${name} family, ${note(seed, anchor)}.
372   Put data-family="${name}" on the root or on any element to switch its subtree.
373   Import after tokens.css. Do not edit: change the script and run \`npm run tokens\`. */
374${f} {
375${lines(l, "  ", "light", false)}
376}
377@media (prefers-color-scheme: dark) {
378  :root:not([data-theme="light"]) ${f},
379  :root:not([data-theme="light"])${f} {
380${lines(d, "    ", "dark", false)}
381  }
382}
383:root[data-theme="dark"] ${f},
384:root[data-theme="dark"]${f},
385[data-cap-theme="dark"] ${f},
386[data-cap-theme="dark"]${f} {
387${lines(d, "  ", "dark", false)}
388}
389`;
390}
391
392// The Enarratio theme (0.3): the purple family's tokens, as the hex values Enarratio's
393// checkTheme measures, written as a plain module so an app can `import { capsomerTheme } from
394// "capsomer/enarratio-theme"` and hand it to Enarratio's stylesheet(), with no dependency of
395// Capsomer on Enarratio (and none of Enarratio on Capsomer). The same tokens feed
396// css/enarratio.css, which maps the custom properties for an app that loads Capsomer's CSS.
397const FONT_STACK = '"Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif';
398export function enarratioTheme(family = FAMILIES.purple) {
399  const scheme = (t) => ({
400    background: t.surface,
401    text: t.text,
402    mutedText: t.muted,
403    grid: t.line,
404    focus: t.ring,
405    series: Array.from({ length: 8 }, (_, i) => t[`series-${i + 1}`]),
406    sequential: Array.from({ length: 5 }, (_, i) => t[`ramp-${i + 1}`]),
407    status: { good: t.ok, warning: t.warn, bad: t.crit, unknown: t.nodata },
408  });
409  const l = familyTheme(family.seed, family.anchor, "light");
410  const d = familyTheme(family.seed, family.anchor, "dark");
411  return { name: "capsomer", fonts: { body: FONT_STACK, numeric: FONT_STACK }, gridlines: "y", light: scheme(l), dark: scheme(d) };
412}
413
414export function renderEnarratioTheme() {
415  const theme = enarratioTheme();
416  return `// Generated by tokens/palette.mjs from Capsomer's tokens (the purple family, both themes).
417// Do not edit: change the script and run \`npm run tokens\`. \`npm run check\` refuses a file that
418// differs, and CI runs Enarratio's own checkTheme on it (test/unit/enarratio-theme.test.mjs).
419// Hand it to Enarratio: \`stylesheet(capsomerTheme)\`, or \`baseStylesheet()\` with css/enarratio.css.
420/** @type {import("./enarratio-theme.d.mts").EnarratioTheme} */
421export const capsomerTheme = ${JSON.stringify(theme, null, 2)};
422`;
423}
424
425// The colours an email uses, for every family in both themes, as literal hexes. Email clients
426// ignore custom properties, so components/email/colours.ts carries the values (the same ones
427// as the site, from the same generator) and the email code stays free of node:fs.
428const EMAIL_KEYS = ["ground", "surface", "line", "text", "muted", "accent-text", "primary", "primary-fg", "ok", "ok-soft", "warn", "warn-soft", "crit", "crit-soft", "info", "info-soft"];
429
430export function renderEmailColours() {
431  const out = {};
432  for (const [name, f] of Object.entries(FAMILIES)) {
433    out[name] = {};
434    for (const scheme of ["light", "dark"]) {
435      const t = familyTheme(f.seed, f.anchor, scheme);
436      out[name][scheme] = Object.fromEntries(EMAIL_KEYS.map((k) => [k, t[k]]));
437    }
438  }
439  return `// Generated by tokens/palette.mjs from Capsomer's tokens (every family, both themes).
440// Do not edit: change the script and run \`npm run tokens\`. \`npm run check\` refuses a file that differs.
441export type EmailFamily = ${Object.keys(FAMILIES).map((n) => JSON.stringify(n)).join(" | ")};
442export type EmailColours = Record<${EMAIL_KEYS.map((n) => JSON.stringify(n)).join(" | ")}, string>;
443export const emailColours: Record<EmailFamily, { light: EmailColours; dark: EmailColours }> = ${JSON.stringify(out, null, 2)};
444`;
445}
446
447// The family this run uses: --seed and --anchor, else --family, else purple.
448function active() {
449  if (seedArg) return { seed: seedArg, anchor: anchorArg ?? null };
450  const f = FAMILIES[familyArg ?? "purple"];
451  return { seed: f.seed, anchor: anchorArg ?? f.anchor };
452}
453
454// Both themes' tokens and every asserted pair with its ratio, for the site's contrast grid.
455export function themes({ seed, anchor } = active()) {
456  const l = familyTheme(seed, anchor, "light");
457  const d = familyTheme(seed, anchor, "dark");
458  return { seed, anchor, order: FAMILY_ORDER, elevation: ELEVATION_ORDER, light: { tokens: l, pairs: pairs(l) }, dark: { tokens: d, pairs: pairs(d) } };
459}
460
461// The files this script owns: [path relative to tokens/, text].
462export function files() {
463  if (outArg || seedArg || familyArg) {
464    const a = active();
465    return [[outArg ?? "colour.css", renderFamily(a.seed, a.anchor)]];
466  }
467  const p = FAMILIES.purple;
468  return [
469    ["colour.css", renderFamily(p.seed, p.anchor)],
470    ["family-fox.css", renderScoped("fox", FAMILIES.fox.seed, FAMILIES.fox.anchor)],
471    ["family-teal.css", renderScoped("teal", FAMILIES.teal.seed, FAMILIES.teal.anchor)],
472    ["family-navy.css", renderScoped("navy", FAMILIES.navy.seed, FAMILIES.navy.anchor)],
473    ["family-forest.css", renderScoped("forest", FAMILIES.forest.seed, FAMILIES.forest.anchor)],
474    ["enarratio-theme.mjs", renderEnarratioTheme()],
475    ["../components/email/colours.ts", renderEmailColours()],
476  ];
477}
478
479const target = (rel) => (outArg ? outArg : fileURLToPath(new URL(`./${rel}`, import.meta.url)));
480
481export function check() {
482  const problems = [];
483  const t = themes();
484  problems.push(...failures(t.light.tokens).map((p) => `light: ${p}`));
485  problems.push(...failures(t.dark.tokens).map((p) => `dark: ${p}`));
486  // The chart palette, for every family and both themes (tokens/chart.mjs): contrast against
487  // the chart's background, every pair apart under the colour-vision deficiencies, clear of
488  // the status colours, the ramp ordered.
489  for (const [name, f] of Object.entries(FAMILIES)) {
490    const ft = themes(f);
491    for (const scheme of ["light", "dark"]) {
492      for (const c of chartChecks(ft[scheme].tokens).filter((x) => !x.pass)) problems.push(`${name} ${scheme} chart: ${c.what} is ${c.value.toFixed(2)}, needs ${c.min} (${c.detail})`);
493    }
494  }
495  for (const [rel, want] of files()) {
496    let committed = null;
497    try {
498      committed = readFileSync(target(rel), "utf8");
499    } catch (e) {
500      problems.push(`tokens/${rel} cannot be read (${e instanceof Error ? e.message : String(e)}); run npm run tokens`);
501    }
502    if (committed !== null && committed !== want) {
503      const a = committed.split("\n");
504      const b = want.split("\n");
505      const i = a.findIndex((line, n) => line !== b[n]);
506      problems.push(`tokens/${rel} differs from what the script writes at line ${i + 1}: "${a[i] ?? ""}" (committed) vs "${b[i] ?? ""}" (script); run npm run tokens`);
507    }
508  }
509  return problems;
510}
511
512// Every asserted pair for every family in both themes, failures first.
513export function report() {
514  const rows = [];
515  for (const [name, f] of Object.entries(FAMILIES)) {
516    const t = themes(f);
517    const schemes = f.defaultTheme === "dark" ? ["dark", "light"] : ["light", "dark"];
518    for (const scheme of schemes) for (const p of t[scheme].pairs) rows.push({ family: name, scheme, isDefault: scheme === f.defaultTheme, ...p, fgHex: t[scheme].tokens[p.fg], bgHex: t[scheme].tokens[p.bg] });
519  }
520  // Each family in turn, its default theme first, failures first within each theme.
521  return rows.map((r, i) => ({ r, i })).sort((a, b) => (a.r.family === b.r.family && a.r.scheme === b.r.scheme ? Number(a.r.pass) - Number(b.r.pass) || a.i - b.i : a.i - b.i)).map((x) => x.r);
522}
523
524const invoked = process.argv[1] && fileURLToPath(import.meta.url).replace(/\\/g, "/").toLowerCase() === process.argv[1].replace(/\\/g, "/").toLowerCase();
525if (invoked) {
526  if (process.argv.includes("--check")) {
527    const problems = check();
528    if (problems.length) {
529      console.error(`palette: ${problems.length} problem(s)\n  ${problems.join("\n  ")}`);
530      process.exit(1);
531    }
532    console.log(`palette: ${files().map(([r]) => `tokens/${r}`).join(", ")} match the script and every pair meets WCAG 2.2 in both themes`);
533  } else if (process.argv.includes("--report")) {
534    const rows = report();
535    const failed = rows.filter((r) => !r.pass);
536    for (const r of process.argv.includes("--summary") ? failed : rows) console.log(`${r.pass ? "pass" : "FAIL"}  ${r.family.padEnd(6)} ${(r.scheme + (r.isDefault ? "*" : "")).padEnd(6)} ${r.what.padEnd(32)} --${r.fg} ${r.fgHex} on --${r.bg} ${r.bgHex}  ${r.ratio.toFixed(2)}:1 (needs ${r.min})`);
537    console.log("(* the family's default theme, checked first)");
538    console.log(`palette: ${rows.length} pairs across ${Object.keys(FAMILIES).length} families and both themes; ${failed.length} fail`);
539    if (failed.length) process.exit(1);
540  } else if (process.argv.includes("--table")) {
541    for (const [name, t] of Object.entries(themes())) if (name === "light" || name === "dark") {
542      console.log(`\n${name}`);
543      for (const k of [...FAMILY_ORDER, ...ELEVATION_ORDER]) console.log(`  --${k}: ${t.tokens[k]}`);
544    }
545  } else if (process.argv.includes("--chart")) {
546    for (const [name, f] of Object.entries(FAMILIES)) {
547      const ft = themes(f);
548      for (const scheme of ["light", "dark"]) {
549        const rows = chartChecks(ft[scheme].tokens);
550        const worst = rows.filter((r) => r.what.includes("differ")).sort((a, b) => a.value - b.value)[0];
551        console.log(`${name} ${scheme}: ${rows.length} checks, ${rows.filter((r) => !r.pass).length} fail; closest pair ${worst?.value.toFixed(1)} (${worst?.what})`);
552      }
553    }
554  } else if (process.argv.includes("--pairs")) {
555    console.log(JSON.stringify(themes(), null, 2));
556  } else {
557    for (const [rel, text] of files()) writeFileSync(target(rel), text);
558    console.log(`palette: wrote ${files().map(([r]) => `tokens/${r}`).join(", ")}`);
559  }
560}