prove the extraction faithful, and fix the one thing that was not

The screenshots said seven dark screens differed and could not say why. Comparing
COMPUTED theme variables between the old build and the new one, in the same colour
mode, answered it in a single run: 47 of 53 matched exactly, and the six that did not
were the `--duck-*` variables — EMPTY in the new build.

The utilities were remapped to `--brand-primary`, `--ink` and friends, which is
correct. What that missed is code reading the VARIABLE rather than using the utility.
`prose.css` does exactly that eleven times — chat markdown links, blockquotes, inline
code, checkboxes — and `landing/styles.css` does it six more. All silently resolved to
nothing.

Fixed by keeping the legacy names as aliases in every theme, pointing at the new
source of truth rather than duplicating values. That also covers any plugin or inline
style doing the same thing, which I have not enumerated. They retire when the utility
rename lands.

Every variable now matches.

── What the screenshots are actually worth here ──

Less than I assumed. The wallpaper rotates per page load, so a control capture of the
same build against itself had 4 of 16 screens differ — and a different 4 each time.
Between 5 and 6 come out byte-identical to the baseline on any run; the rest is noise
I mistook for signal for two rounds, including one where I removed a `color-scheme`
line to test a theory it turned out not to explain.

The variable diff is the instrument that settles it, and it is cheap. Added as
`scripts/theme-vardiff.ts`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-16 22:35:00 +00:00
co-authored by Claude Opus 5
parent 105766a4eb
commit 1be4bcd39a
5 changed files with 176 additions and 0 deletions
@@ -28,6 +28,21 @@
--ink: #f1f5f9;
--surface-warm: #292524;
/* ── Legacy variable names, for direct `var()` consumers ──────────────────────────────────────
The `duck-*` UTILITIES are remapped in base.css, but a stylesheet reading `var(--duck-teal)` gets
nothing from that — it wants the variable itself. `prose.css` does exactly this eleven times for chat
markdown (links, blockquotes, inline code, checkboxes), and the rename silently emptied all of them.
Caught by diffing computed variables between the old and new builds, not by reading.
Kept as aliases rather than as values: there is one source of truth above, and these follow it. They
retire when nothing reads them — the same migration as the utility names. */
--duck-teal: var(--brand-primary);
--duck-dark: var(--ink);
--duck-yellow: var(--brand-accent);
--duck-forest: var(--brand-deep);
--duck-beige: var(--surface-warm);
--duck-orange: var(--brand-warm);
/* ── The page ─────────────────────────────────────────────────────────────────────────────────── */
--page-bg: hsl(222.2 84% 4.9%);
--pixel-grid-color: rgba(200, 230, 210, 0.08);
@@ -29,6 +29,21 @@
--ink: #14532d;
--surface-warm: #e7d4b5;
/* ── Legacy variable names, for direct `var()` consumers ──────────────────────────────────────
The `duck-*` UTILITIES are remapped in base.css, but a stylesheet reading `var(--duck-teal)` gets
nothing from that — it wants the variable itself. `prose.css` does exactly this eleven times for chat
markdown (links, blockquotes, inline code, checkboxes), and the rename silently emptied all of them.
Caught by diffing computed variables between the old and new builds, not by reading.
Kept as aliases rather than as values: there is one source of truth above, and these follow it. They
retire when nothing reads them — the same migration as the utility names. */
--duck-teal: var(--brand-primary);
--duck-dark: var(--ink);
--duck-yellow: var(--brand-accent);
--duck-forest: var(--brand-deep);
--duck-beige: var(--surface-warm);
--duck-orange: var(--brand-warm);
/* ── The page ─────────────────────────────────────────────────────────────────────────────────
A complete `background` value, so a theme can be an image or a gradient rather than a colour. */
--page-bg: hsl(0 0% 100%);
+15
View File
@@ -31,6 +31,21 @@
--ink: #000000;
--surface-warm: #ffffff;
/* ── Legacy variable names, for direct `var()` consumers ──────────────────────────────────────
The `duck-*` UTILITIES are remapped in base.css, but a stylesheet reading `var(--duck-teal)` gets
nothing from that — it wants the variable itself. `prose.css` does exactly this eleven times for chat
markdown (links, blockquotes, inline code, checkboxes), and the rename silently emptied all of them.
Caught by diffing computed variables between the old and new builds, not by reading.
Kept as aliases rather than as values: there is one source of truth above, and these follow it. They
retire when nothing reads them — the same migration as the utility names. */
--duck-teal: var(--brand-primary);
--duck-dark: var(--ink);
--duck-yellow: var(--brand-accent);
--duck-forest: var(--brand-deep);
--duck-beige: var(--surface-warm);
--duck-orange: var(--brand-warm);
/* ── The page ─────────────────────────────────────────────────────────────────────────────────
Flat white and no grid. If a pixel grid or a wallpaper appears under this theme, something is drawing
it from outside the theme layer. */