site/color-view.tsx

Functions

Imports

It imports site/data.ts, site/parts.tsx. Imported by site/main.tsx.

Source

1// The site's colour and contrast view: both themes' pairs and every family's scales (main.tsx).
2
3import { FAMILIES, PALETTE, type Pair } from "./data.ts";
4import { Panel, paint } from "./parts.tsx";
5
6const FGS = ["text", "muted", "dim", "accent-text", "ok", "warn", "crit", "info"];
7const BGS = ["ground", "surface", "raised", "sunken", "sel", "accent-soft"];
8
9function lum(hex: string): number {
10  const c = [1, 3, 5].map((i) => {
11    const v = parseInt(hex.slice(i, i + 2), 16) / 255;
12    return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
13  });
14  return 0.2126 * (c[0] ?? 0) + 0.7152 * (c[1] ?? 0) + 0.0722 * (c[2] ?? 0);
15}
16const ratio = (a: string, b: string) => {
17  const x = lum(a);
18  const y = lum(b);
19  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
20};
21
22function ThemeColumn({ scheme }: { scheme: "light" | "dark" }) {
23  if (!PALETTE) return null;
24  const t = PALETTE[scheme];
25  const asserted = (fg: string, bg: string) => t.pairs.find((p: Pair) => p.fg === fg && p.bg === bg);
26  return (
27    <div className="site-theme" data-cap-theme={scheme}>
28      <h3>{scheme === "light" ? "Light" : "Dark"}</h3>
29      <ul className="site-swatches">
30        {PALETTE.order.map((k) => (
31          <li key={k}>
32            <i ref={paint("background", `var(--${k})`)} />
33            <span className="cap-mono">--{k}</span>
34            <span className="cap-mono cap-muted">{t.tokens[k]}</span>
35          </li>
36        ))}
37      </ul>
38      <div className="cap-table-wrap" role="region" tabIndex={0} aria-label={`${scheme === "light" ? "Light" : "Dark"} theme contrast grid`}>
39        <table className="cap-table site-grid">
40          <thead>
41            <tr>
42              <th scope="col">Text on</th>
43              {BGS.map((b) => (
44                <th key={b} scope="col" className="cap-mono">
45                  --{b}
46                </th>
47              ))}
48            </tr>
49          </thead>
50          <tbody>
51            {FGS.map((f) => (
52              <tr key={f}>
53                <th scope="row" className="cap-mono">
54                  --{f}
55                </th>
56                {BGS.map((b) => {
57                  const r = ratio(t.tokens[f] ?? "#000000", t.tokens[b] ?? "#ffffff");
58                  const a = asserted(f, b);
59                  if (!a)
60                    return (
61                      <td key={b} className="site-unused">
62                        <span className="cap-num">{r.toFixed(1)}</span> <span className="cap-muted">not used</span>
63                      </td>
64                    );
65                  return (
66                    <td key={b}>
67                      <span className="cap-status" data-tone={a.pass ? "ok" : "crit"}>
68                        {a.pass ? "Pass" : "Fail"} <span className="cap-num">{a.ratio.toFixed(1)}</span>
69                      </span>
70                    </td>
71                  );
72                })}
73              </tr>
74            ))}
75          </tbody>
76        </table>
77      </div>
78    </div>
79  );
80}
81
82// The three color families of rules 14 and 15: each one's 12 steps in both themes, and
83// every pair it is checked on, its default theme first.
84function FamilyScales() {
85  const fams = FAMILIES;
86  if (!fams?.scales) return null;
87  const names = Object.keys(fams.families);
88  return (
89    <Panel title="The color families" id="families" src="Rules 14 and 15, locked 2026-10-01">
90      <p className="cap-muted">
91        Each family is one 12-step scale with the same lightness roles: step 9 is the seed, the solid accent; step 11 is the deep accent for text. Each family is checked in both themes, its own default theme first, and every pair passes (rulings.md, rule 18): the brand color is step 9 for focus rings and large fills, accent text and links use step 11, and the primary button fills with step 10. Purple is the default; fox, teal, navy and forest switch on with data-family on the root or on any element (capsomer/families.css).
92      </p>
93      {names.map((n) => {
94        const f = fams.families[n];
95        const s = fams.scales?.[n];
96        if (!f || !s) return null;
97        const mine = fams.pairs.filter((p) => p.family === n);
98        const failing = mine.filter((p) => !p.pass);
99        const order: Array<"light" | "dark"> = f.defaultTheme === "dark" ? ["dark", "light"] : ["light", "dark"];
100        return (
101          <section key={n} className="site-family" aria-labelledby={`fam-${n}`}>
102            <h3 id={`fam-${n}`}>
103              {n === "purple" ? "Purple" : n === "fox" ? "Fox" : n === "teal" ? "Teal" : n === "navy" ? "Navy" : n === "forest" ? "Forest" : n} <span className="cap-mono cap-muted">{f.seed}</span>
104            </h3>
105            <p className="cap-muted">
106              {f.note}. Default theme: {f.defaultTheme}.
107            </p>
108            {order.map((scheme) => (
109              <div key={scheme} className="site-steps-row" data-cap-theme={scheme}>
110                <span className="cap-label">{scheme === "light" ? "Light" : "Dark"}{scheme === f.defaultTheme ? ", default" : ""}</span>
111                <ol className="site-steps">
112                  {s[scheme].map((hex, i) => (
113                    <li key={i}>
114                      <i ref={paint("background", hex)} />
115                      <span className="cap-num">{i + 1}</span>
116                      <span className="cap-mono">{hex}</span>
117                    </li>
118                  ))}
119                </ol>
120              </div>
121            ))}
122            <p>
123              {failing.length === 0 ? (
124                <span className="cap-status" data-tone="ok">
125                  Every one of its {mine.length} pairs passes
126                </span>
127              ) : (
128                <span className="cap-status" data-tone="crit">
129                  {failing.length} of {mine.length} pairs fail
130                </span>
131              )}
132            </p>
133            {failing.length > 0 && (
134              <div className="cap-table-wrap" role="region" tabIndex={0} aria-label={`${n} failing pairs`}>
135                <table className="cap-table">
136                  <thead>
137                    <tr>
138                      <th scope="col">Theme</th>
139                      <th scope="col">What</th>
140                      <th scope="col">Pair</th>
141                      <th scope="col">Ratio</th>
142                      <th scope="col">Needs</th>
143                    </tr>
144                  </thead>
145                  <tbody>
146                    {failing.map((p, i) => (
147                      <tr key={i}>
148                        <td>
149                          {p.scheme}
150                          {p.isDefault ? " (default)" : ""}
151                        </td>
152                        <td>{p.what}</td>
153                        <td className="cap-mono">
154                          --{p.fg} {p.fgHex} on --{p.bg} {p.bgHex}
155                        </td>
156                        <td data-num="">{p.ratio.toFixed(2)}</td>
157                        <td data-num="">{p.min}</td>
158                      </tr>
159                    ))}
160                  </tbody>
161                </table>
162              </div>
163            )}
164          </section>
165        );
166      })}
167    </Panel>
168  );
169}
170
171export function ColorView() {
172  if (!PALETTE)
173    return (
174      <div className="site-page">
175        <div className="cap-empty" data-kind="failed" role="alert">
176          <b>The palette data is missing from this build</b>
177          <span>Run capsomer site-data before the site build.</span>
178        </div>
179      </div>
180    );
181  const all = [...PALETTE.light.pairs.map((p) => ({ ...p, scheme: "Light" })), ...PALETTE.dark.pairs.map((p) => ({ ...p, scheme: "Dark" }))];
182  return (
183    <div className="site-page">
184      <div className="site-head">
185        <h1>Color and contrast</h1>
186        <p>
187          One seed, <span className="cap-mono">{PALETTE.seed}</span>, makes every color in both themes. Status colors keep their own hues and are tuned for contrast. A pair the generator asserts shows Pass or Fail against WCAG 2.2 (4.5:1 for text, 3:1 for a boundary); a pair no component puts together says “not used”.
188        </p>
189      </div>
190      <FamilyScales />
191      <div className="site-pair">
192        <ThemeColumn scheme="light" />
193        <ThemeColumn scheme="dark" />
194      </div>
195      <Panel title="Every asserted pair of the committed palette" id="pairs" src={`${all.length} pairs, both themes. The families above have ${FAMILIES?.pairs.length ?? 0} in all`} flush>
196        <div className="cap-table-wrap" role="region" tabIndex={0} aria-labelledby="pairs-h">
197          <table className="cap-table">
198            <thead>
199              <tr>
200                <th scope="col">Theme</th>
201                <th scope="col">What</th>
202                <th scope="col">Foreground</th>
203                <th scope="col">Background</th>
204                <th scope="col">Ratio</th>
205                <th scope="col">Needs</th>
206                <th scope="col">Result</th>
207              </tr>
208            </thead>
209            <tbody>
210              {all.map((p, i) => (
211                <tr key={i}>
212                  <td>{p.scheme}</td>
213                  <td>{p.what}</td>
214                  <td className="cap-mono">--{p.fg}</td>
215                  <td className="cap-mono">--{p.bg}</td>
216                  <td data-num="">{p.ratio.toFixed(2)}</td>
217                  <td data-num="">{p.min}</td>
218                  <td>
219                    <span className="cap-status" data-tone={p.pass ? "ok" : "crit"}>
220                      {p.pass ? "Pass" : "Fail"}
221                    </span>
222                  </td>
223                </tr>
224              ))}
225            </tbody>
226          </table>
227        </div>
228      </Panel>
229    </div>
230  );
231}
232