refactor(website): sweep the last two duplicated theme palettes

The layout and .ui-preview were not the only places writing the dark half
twice. The syntax-highlight classes in public/input.css repeated five
colours across both theme selectors, and the home page's code-sample
tokens repeated three. Same collapse onto light-dark().

Replace the per-file assertion with a sweep over every stylesheet and
every page, layout, and component that writes CSS, asserting the rule
rather than the two known sites: no colour may be declared under a
per-theme selector, only the three non-colour tokens may. A per-file
check is what let these two survive the first pass. Docs code samples
are excluded, since a pre block teaching the reader is not this site's
own styling.

Re-verified against main in a real browser after the change: 360 resolved
readings across the six theme states, now covering the highlight classes
and the code tokens as well, zero differences.

Author: vivek7405

website/app/page.ts

@@ -125,18 +125,12 @@ export default function LandingPage() {
         --editor-fg: var(--fg);
         --editor-gutter-fg: var(--fg-subtle);
         --editor-gutter-border: var(--border);
-        --code-tag: oklch(0.55 0.13 250);
-        --code-attr: oklch(0.52 0.16 150);
-        --code-str: oklch(0.55 0.13 145);
+        --code-tag:  light-dark(oklch(0.55 0.13 250), oklch(0.78 0.13 250));
+        --code-attr: light-dark(oklch(0.52 0.16 150), oklch(0.66 0.16 150));
+        --code-str:  light-dark(oklch(0.55 0.13 145), oklch(0.80 0.15 145));
         --code-text: var(--fg);
         --code-punc: var(--fg-muted);
       }
-      :root[data-theme='dark'] {
-        --code-tag: oklch(0.78 0.13 250); --code-attr: oklch(0.66 0.16 150); --code-str: oklch(0.80 0.15 145);
-      }
-      @media (prefers-color-scheme: dark) {
-        :root:not([data-theme='light']) { --code-tag: oklch(0.78 0.13 250); --code-attr: oklch(0.66 0.16 150); --code-str: oklch(0.80 0.15 145); }
-      }
       /* Syntax-highlight token colors (.t-kw / .t-str / ...) are defined
          globally in public/input.css so every surface (this page and the
          blog code fences) shares one palette. */

website/public/input.css

@@ -209,24 +209,14 @@
  * one tokenizer, so the palette is defined once here, globally, rather than
  * inline per page). Class names: t-com/t-str/t-kw/t-fn/t-type/t-num/t-punc/t-id.
  */
+/* One light-dark() per token, same rule as the palettes above: the dark half
+   used to be written twice, once per theme selector. .t-com / .t-punc / .t-id
+   read palette tokens that already carry their own pair. */
 .t-com { color: var(--fg-subtle); font-style: italic; }
-.t-str { color: oklch(0.52 0.13 150); }
-.t-kw  { color: oklch(0.52 0.16 295); font-weight: 600; }
-.t-fn  { color: oklch(0.52 0.15 250); }
-.t-type{ color: oklch(0.52 0.10 200); }
-.t-num { color: oklch(0.55 0.12 215); }
+.t-str { color: light-dark(oklch(0.52 0.13 150), oklch(0.80 0.14 150)); }
+.t-kw  { color: light-dark(oklch(0.52 0.16 295), oklch(0.76 0.14 295)); font-weight: 600; }
+.t-fn  { color: light-dark(oklch(0.52 0.15 250), oklch(0.75 0.13 250)); }
+.t-type{ color: light-dark(oklch(0.52 0.10 200), oklch(0.80 0.10 200)); }
+.t-num { color: light-dark(oklch(0.55 0.12 215), oklch(0.82 0.12 215)); }
 .t-punc{ color: var(--fg-muted); }
 .t-id  { color: var(--fg); }
-
-:root[data-theme='dark'] .t-str { color: oklch(0.80 0.14 150); }
-:root[data-theme='dark'] .t-kw  { color: oklch(0.76 0.14 295); }
-:root[data-theme='dark'] .t-fn  { color: oklch(0.75 0.13 250); }
-:root[data-theme='dark'] .t-type{ color: oklch(0.80 0.10 200); }
-:root[data-theme='dark'] .t-num { color: oklch(0.82 0.12 215); }
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) .t-str { color: oklch(0.80 0.14 150); }
-  :root:not([data-theme='light']) .t-kw  { color: oklch(0.76 0.14 295); }
-  :root:not([data-theme='light']) .t-fn  { color: oklch(0.75 0.13 250); }
-  :root:not([data-theme='light']) .t-type{ color: oklch(0.80 0.10 200); }
-  :root:not([data-theme='light']) .t-num { color: oklch(0.82 0.12 215); }
-}

website/test/ssr/kit-surfaces.test.ts

@@ -55,3 +55,60 @@ test('.ui-preview keeps no duplicate dark block', () => {
     '.ui-preview resolves its theme through inherited color-scheme, not a per-theme selector',
   );
 });
+
+/**
+ * The general rule, swept across every stylesheet and every page/layout that
+ * writes CSS. The two palettes above are the ones that were duplicated worst,
+ * but they were not the only ones: the syntax-highlight classes in input.css
+ * and the home page's code-sample tokens each carried the same pair of
+ * verbatim dark blocks. A per-file assertion would have kept missing them, so
+ * this asserts the rule itself.
+ */
+test('no colour is declared under a per-theme selector anywhere', () => {
+  const files = [
+    'public/input.css',
+    ...['app', 'lib', 'components'].flatMap(function walk(dir: string): string[] {
+      const abs = resolve(ROOT, dir);
+      if (!existsSync(abs)) return [];
+      return readdirSync(abs, { withFileTypes: true }).flatMap((e) =>
+        e.isDirectory() ? walk(`${dir}/${e.name}`) : e.name.endsWith('.ts') ? [`${dir}/${e.name}`] : [],
+      );
+    }),
+  ];
+
+  // Only these three NON-colour tokens may sit under a theme selector. Every
+  // colour belongs in a light-dark() pair instead.
+  const ALLOWED = new Set(['--glow-strength', '--cta-mix', '--shadow-spread']);
+  const offenders: string[] = [];
+
+  for (const rel of files) {
+    // Comments are stripped so prose naming a selector is not read as a rule,
+    // and `pre` blocks in the docs pages are left alone: those are code
+    // SAMPLES teaching the reader, not this site's own styling.
+    const src = readFileSync(resolve(ROOT, rel), 'utf8')
+      .replace(/\/\*[\s\S]*?\*\//g, '')
+      .replace(/<pre[\s\S]*?<\/pre>/g, '');
+    // Terminate on the first closing brace, NOT on one at the start of a line:
+    // a single-line rule (`:root[data-theme='dark'] .t-str { color: ... }`) is
+    // the exact shape the highlight classes used, and anchoring to a newline
+    // walked straight past it.
+    const re = /(?:@media\s*\(prefers-color-scheme:\s*dark\)|\[data-theme=['"]dark['"]\])([\s\S]{0,900}?)\}/g;
+    for (const m of src.matchAll(re)) {
+      for (const d of m[1].matchAll(/(--[a-z-]+):\s*([^;]+);/g)) {
+        if (ALLOWED.has(d[1])) continue;
+        offenders.push(`${rel}: ${d[1]}`);
+      }
+      // A bare colour on a class inside a theme block (the .t-* highlight
+      // shape) has no custom property to catch, so look for it directly.
+      for (const d of m[1].matchAll(/\bcolor:\s*(oklch|#|rgb|hsl)/g)) {
+        offenders.push(`${rel}: a bare ${d[1]} colour`);
+      }
+    }
+  }
+
+  assert.deepEqual(
+    offenders,
+    [],
+    'these belong in a light-dark(LIGHT, DARK) pair, not under a per-theme selector',
+  );
+});