tokens/sites.mjs

Functions

Imports

It imports tokens/palette.mjs. No module of this repo imports it.

Source

1// The per-site layer: what one site differs on from the family defaults, scoped to
2// [data-cap-site="<site>"]. `node tokens/sites.mjs` writes tokens/site-<name>.css for each
3// entry in SITES and the barrel css/sites.css; `--check` regenerates them in memory, refuses a
4// difference from the committed files, a missing package export and a stale site file, and
5// runs palette.mjs's WCAG pairs on the site's colours merged into its family, in both themes.
6//
7// What goes in: only what a site differs on (faces, the display face, neutrals, the on state,
8// type sizes, space and radius, the hover touches in scale.mjs's `touch` group, --enarratio-*), as literal values, never a var() chain, so the file works on <html> or on
9// any wrapper. A brand colour is never a site setting: it is a family (FAMILIES in
10// palette.mjs), which the site keeps choosing with data-family. A site on the defaults has no
11// entry. The selectors repeat the family files' shapes (plain, system dark, pinned dark), so a
12// site rule ties a family rule on specificity and wins on order, and each also matches a
13// [data-family] or [data-density] wrapper inside the site, so css/enarratio.css's wrapper
14// block cannot put Capsomer's own values back there.
15import { readFileSync, readdirSync, writeFileSync } from "node:fs";
16import { fileURLToPath } from "node:url";
17import { FAMILIES, failures, themes } from "./palette.mjs";
18
19// site -> { family (whose tokens the colours are checked against), on (where the attribute
20// goes), note, all (both themes), light, dark, defaultTheme, phone, phoneMax }. A site whose
21// defaultTheme is "dark" (as its family's is) gets its dark values in the plain block and its
22// light values only where light is pinned (data-theme="light" on the root, or
23// data-cap-theme="light"); its dark values are also written under the family's dark selectors,
24// so they tie them. phone applies under phoneMax, Capsomer's phone width (767.98px) unless the
25// site's own layout breaks elsewhere. waive names a WCAG pair the site's own colours already
26// fail where it renders today ({ scheme, what, fg, why }); the check refuses a waiver that no
27// longer matches a failure, so it goes once the site's colour is fixed.
28const SITES = {
29  dustinedwards: {
30    family: "purple",
31    on: "<html>",
32    note: "the public charts keep their look from before Enarratio 0.3 (Enarratio's own literals)",
33    all: {
34      "enarratio-font-size": "1rem",
35      "enarratio-font-size-small": "0.875em",
36      "enarratio-line-height-tooltip": "1.35",
37      "enarratio-space": "0.5em",
38      "enarratio-gap": "1em",
39      "enarratio-gap-row": "0.25em",
40      "enarratio-gap-inline": "0.4em",
41      "enarratio-padding-button": "0.125em 0.25em",
42      "enarratio-cell-padding": "0.2em 0.75em 0.2em 0",
43      "enarratio-radius": "0.25em",
44      "enarratio-radius-swatch": "0.15em",
45      "enarratio-radius-tooltip": "0.3em",
46      "enarratio-swatch-size": "0.8em",
47      "enarratio-tooltip-padding": "0.35em 0.6em",
48      "enarratio-tooltip-shadow": "0 2px 8px rgb(0 0 0 / 15%)",
49      "enarratio-z-tooltip": "10",
50      "enarratio-duration-hover": "150ms",
51      "enarratio-duration-grow": "600ms",
52      "enarratio-duration-fade": "500ms",
53      "enarratio-duration-draw": "800ms",
54      "enarratio-ease-grow": "cubic-bezier(0.2, 0.7, 0.3, 1)",
55      "enarratio-ease-out": "ease-out",
56    },
57  },
58  foxhound: {
59    family: "teal",
60    on: "each .fh-cap wrapper, never <html> (Foxhound's unlayered :root would beat it there) or the admin",
61    note: "Foxhound's own neutrals and DM faces under the teal family's accents, dark by default",
62    defaultTheme: "dark",
63    all: {
64      ui: '"DM Sans", sans-serif, Arial, sans-serif',
65      "font-ui": '"DM Sans", sans-serif, Arial, sans-serif',
66      mono: '"DM Mono", monospace',
67    },
68    dark: {
69      ground: "#111210",
70      surface: "#181917",
71      raised: "#222420",
72      sunken: "#0d0e0c",
73      text: "#e5e8e2",
74      muted: "#a8a49e",
75      dim: "#928d87",
76      line: "#2a2b28",
77      "line-strong": "#4a4c44",
78    },
79    light: {
80      ground: "#f7f6f2",
81      surface: "#ffffff",
82      raised: "#ffffff",
83      sunken: "#eeede8",
84      text: "#14150f",
85      muted: "#2f312d",
86      dim: "#595c56",
87      line: "#cccbc3",
88      "line-strong": "#8a8a7e",
89    },
90    waive: [
91      {
92        scheme: "dark",
93        what: "control border",
94        fg: "line-strong",
95        why: "Foxhound's dark --border-strong #4a4c44 is legacy's value (prime directive); the bridge this file replaces already drew it",
96      },
97    ],
98  },
99  germomics: {
100    family: "purple",
101    on: "the admin's [data-cap-theme] element",
102    note: "the admin's numbers keep the site's JetBrains Mono",
103    all: {
104      mono: '"JetBrains Mono", ui-monospace, Menlo, monospace',
105    },
106  },
107  capsid: {
108    family: "purple",
109    on: "the Portal's <html>",
110    note: "secondary text is 13px at the least on a phone (the Portal UX audit's m4), at the Portal's own 820px",
111    phoneMax: "820px",
112    phone: {
113      "fs-label": "13px",
114      "fs-detail": "13px",
115    },
116  },
117  txasm: {
118    family: "navy",
119    on: "<html>",
120    note: "the UI face stays Inter, which txasm loads",
121    all: {
122      ui: '"Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif',
123    },
124  },
125  foxing: {
126    family: "fox",
127    on: "<html>",
128    note: "Foxing's cream and charcoal neutrals (design-system.md), its faces (DM Sans for the UI, DM Mono, Fraunces to display), which the site self-hosts, and the sky-blue on state of its Rule 05",
129    all: {
130      ui: '"DM Sans", system-ui, sans-serif',
131      "font-ui": '"DM Sans", system-ui, sans-serif',
132      mono: '"DM Mono", ui-monospace, monospace',
133      display: '"Fraunces", Georgia, serif',
134    },
135    // Rule 05's sky blue #43a1d8 is 2.7:1 on the cream ground, under the 3:1 a checked box needs,
136    // so the light theme takes Foxing's own hover blue for the fill and a step darker for hover.
137    light: { ground: "#faf6ee", surface: "#ffffff", raised: "#ffffff", sunken: "#f2ead8", text: "#16100b", muted: "#3e3028", dim: "#815e41", line: "#e5d8bf", "line-strong": "#815e41", on: "#2b87bc", "on-hover": "#1f7fb8" },
138    dark: { ground: "#16100b", surface: "#1f1710", raised: "#2a1f16", sunken: "#100d08", text: "#f5edde", muted: "#c4ae96", dim: "#a28269", line: "#3a2c22", "line-strong": "#a28269", on: "#43a1d8", "on-hover": "#5aafe0" },
139  },
140  julieedwards: {
141    family: "forest",
142    on: "<html>",
143    note: "Open Sans to read and Montserrat for the header and headings, which the site self-hosts; the old site's hover touches (Dustin, 2026-10-23)",
144    all: {
145      ui: '"Open Sans", Arial, sans-serif',
146      "font-ui": '"Montserrat", Helvetica, Arial, sans-serif',
147      "link-rule": "1px",
148      "icon-radius": "999px",
149      "icon-border": "1px",
150      "theme-turn": "20deg",
151      "arrow-rest": "0",
152      "arrow-shift": "-0.3em",
153    },
154  },
155};
156
157const ORDER = "@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;";
158const BRAND = /^(accent|primary|ring|series|ramp)/;
159
160function selectors(name, prefixes, indent) {
161  // The repeated attribute outranks tokens.css's :root, so a bundler loading the site file first still wins.
162  const s = `[data-cap-site="${name}"][data-cap-site]`;
163  const bases = prefixes ? prefixes.flatMap((p) => [`${p} ${s}`, `${p}${s}`]) : [s];
164  return bases.flatMap((b) => [b, `${b} :is([data-family], [data-density])`]).join(`,\n${indent}`);
165}
166
167function block(name, values, prefixes, indent) {
168  const body = Object.entries(values).map(([k, v]) => `${indent}  --${k}: ${v};`).join("\n");
169  return `${indent}${selectors(name, prefixes, indent)} {\n${body}\n${indent}}\n`;
170}
171
172const PHONE_MAX = "767.98px";
173
174function renderSite(name, site) {
175  const darkFirst = site.defaultTheme === "dark";
176  const plain = { ...site.all, ...(darkFirst ? site.dark : site.light) };
177  let css = Object.keys(plain).length ? block(name, plain, null, "  ") : "";
178  if (site.dark && Object.keys(site.dark).length) {
179    css += `  @media (prefers-color-scheme: dark) {\n${block(name, site.dark, [':root:not([data-theme="light"])'], "    ")}  }\n`;
180    css += block(name, site.dark, [':root[data-theme="dark"]', '[data-cap-theme="dark"]'], "  ");
181  }
182  if (darkFirst && site.light && Object.keys(site.light).length) {
183    css += block(name, site.light, [':root[data-theme="light"]', '[data-cap-theme="light"]'], "  ");
184  }
185  if (site.phone && Object.keys(site.phone).length) {
186    css += `  @media (max-width: ${site.phoneMax ?? PHONE_MAX}) {\n${block(name, site.phone, null, "    ")}  }\n`;
187  }
188  return `/* Generated by tokens/sites.mjs: the ${name} site on the ${site.family} family; ${site.note}.
189   Put data-cap-site="${name}" on ${site.on}. Import after tokens.css and families.css.
190   Do not edit: change SITES in tokens/sites.mjs and run \`npm run tokens\`. */
191${ORDER}
192@layer cap.tokens {
193${css}}
194`;
195}
196
197function renderBarrel() {
198  return `/* Every per-site layer (generated by tokens/sites.mjs), each scoped to [data-cap-site].
199   Import after tokens.css and families.css: \`import "capsomer/sites.css"\`. Or take one:
200   "capsomer/site-<name>.css". Do not edit: change SITES in tokens/sites.mjs. */
201@import "./layers.css";
202${Object.keys(SITES).map((n) => `@import "../tokens/site-${n}.css";`).join("\n")}
203${ORDER}
204`;
205}
206
207// The files this script owns: [path relative to the package root, text].
208function files() {
209  return [...Object.entries(SITES).map(([n, s]) => [`tokens/site-${n}.css`, renderSite(n, s)]), ["css/sites.css", renderBarrel()]];
210}
211
212const path = (rel) => fileURLToPath(new URL(`../${rel}`, import.meta.url));
213
214function check() {
215  const problems = [];
216  const exports = JSON.parse(readFileSync(path("package.json"), "utf8")).exports;
217  if (exports["./sites.css"] !== "./css/sites.css") problems.push(`package.json needs "./sites.css": "./css/sites.css" in exports`);
218  for (const [name, site] of Object.entries(SITES)) {
219    const family = FAMILIES[site.family];
220    if (!family) problems.push(`${name}: family "${site.family}" is not in FAMILIES`);
221    for (const [k, v] of Object.entries({ ...site.all, ...site.light, ...site.dark, ...site.phone })) {
222      if (BRAND.test(k)) problems.push(`${name}: --${k} is a brand colour; add a family in palette.mjs instead`);
223      if (/var\(/.test(v)) problems.push(`${name}: --${k} must be a literal, not ${v}`);
224    }
225    for (const k of Object.keys(site.light ?? {})) if (!(k in (site.dark ?? {}))) problems.push(`${name}: --${k} is set for light only; give its dark value too`);
226    if (site.defaultTheme === "dark") for (const k of Object.keys(site.dark ?? {})) if (!(k in (site.light ?? {}))) problems.push(`${name}: --${k} is set for dark only on a dark-first site; give its light value too`);
227    if (exports[`./site-${name}.css`] !== `./tokens/site-${name}.css`) problems.push(`package.json needs "./site-${name}.css": "./tokens/site-${name}.css" in exports`);
228    if (!family) continue;
229    const t = themes(family);
230    for (const scheme of ["light", "dark"]) {
231      const merged = { ...t[scheme].tokens, ...site.all, ...site[scheme] };
232      const waivers = (site.waive ?? []).filter((w) => w.scheme === scheme);
233      const fails = failures(merged);
234      const waived = (f) => waivers.some((w) => f.startsWith(`${w.what}: --${w.fg} `));
235      problems.push(...fails.filter((f) => !waived(f)).map((p) => `${name} ${scheme}: ${p}`));
236      for (const w of waivers) if (!fails.some((f) => f.startsWith(`${w.what}: --${w.fg} `))) problems.push(`${name} ${scheme}: the waiver for ${w.what} --${w.fg} matches no failure; remove it`);
237    }
238  }
239  for (const f of readdirSync(path("tokens")).filter((f) => /^site-.+\.css$/.test(f))) {
240    if (!SITES[f.slice(5, -4)]) problems.push(`tokens/${f} has no entry in SITES; delete it`);
241  }
242  for (const [rel, want] of files()) {
243    let committed = null;
244    try {
245      committed = readFileSync(path(rel), "utf8");
246    } catch {
247      problems.push(`${rel} is missing; run npm run tokens`);
248    }
249    if (committed !== null && committed !== want) problems.push(`${rel} differs from what tokens/sites.mjs writes; run npm run tokens`);
250  }
251  return problems;
252}
253
254const invoked = process.argv[1] && fileURLToPath(import.meta.url).replace(/\\/g, "/").toLowerCase() === process.argv[1].replace(/\\/g, "/").toLowerCase();
255if (invoked) {
256  if (process.argv.includes("--check")) {
257    const problems = check();
258    if (problems.length) {
259      console.error(`sites: ${problems.length} problem(s)\n  ${problems.join("\n  ")}`);
260      process.exit(1);
261    }
262    console.log(`sites: ${files().map(([r]) => r).join(", ")} match the script and every pair meets WCAG 2.2 in both themes`);
263  } else {
264    for (const [rel, text] of files()) writeFileSync(path(rel), text);
265    console.log(`sites: wrote ${files().map(([r]) => r).join(", ")}`);
266  }
267}