Close the alert-badge AA failure, extend the token gate, restore the brand teal

[DCLXAI]

Closes the two items P12 shipped with, and the gap that let one of them ship.

A live AA failure the P12 gate could not see

alerts.css put literal white on semantic backgrounds, and both failed WCAG AA in dark on surfaces a user actually reads:

	before	after
.al-badge (#fff on --neg)	3.16:1	4.62:1
.al-row-status.hit (#fff on --pos)	2.33:1	4.60:1

Fixed with --pos-fill/--neg-fill — identical to the semantic tokens in light, darkened in dark — following the --teal-btn idiom P12 already established rather than bending --pos/--neg, which are tuned for text on neutral surfaces and are checked against their own pairs.

P12's SEMANTIC_PAIRS check resolves token-to-token pairs declared in global.css. It structurally could not see a literal colour beside a var() background in a feature file, so this shipped green. validate-tokens.ts now carries findCallsiteContrastViolations, which reads each rule block, resolves a var() background and a literal color, and computes the pair in both themes.

The gate now states what it cannot see

"callsiteContrast": "PASS",
"callsiteContrastScope": "static CSS var()-background + literal-color pairs only — misses JS-set backgrounds, color-mix()/gradient backgrounds, and base/:hover-split pairs"

This matters more than the check itself. Four times during P12 a harness reported success while structurally unable to ask the question it appeared to answer — a validator blind to a whole property family, a codemod emitting CSS browsers silently drop, a snap that crushed values by 66% with no literal left to flag, and a 24-combination viewport matrix run in an emulator that reports vh == svh == lvh == dvh. Each was caught only because a person happened to look.

A LogoChip-shaped failure was live in production while this gate would have printed PASS beside it. A gate whose output implies more than it checks is worse than no gate, because it converts an unknown into a false assurance. So the scope travels with the answer.

Brand colour restored by splitting its roles

P12 darkened --teal #20808d → #20708d as a side effect of an accessibility fix, changing the literal brand hex used by the logo mark, focus rings, links and chart strokes.

The cause was one token serving two roles with different requirements: brand identity, governed by WCAG 1.4.11 at 3:1 as a non-text indicator, and text on --teal-soft/--teal-softer, which needs 4.5:1. The stricter requirement dragged the brand hex.

--teal is back to #20808d; --teal-text carries the text role. Verified: --teal clears 3:1 against all five surfaces in both themes (light 4.02–4.63, dark 5.07–6.30), and --teal-text clears 4.5:1 on both tinted surfaces in both themes (light 4.72/5.07, dark 4.56/5.22). Dark never needed the split — #35a4b2 already passed at 4.56/5.22 — which is why only :root changed.

The audit found ~30 text call sites, not the 8 the task named, and two of those named the wrong background token. Every one of the 62 --teal/--teal-text sites was classified by hand and re-classified independently in review; the ones left on --teal are borders, outlines, chart strokes, icon glyphs, the logo SVG and the large 404 digits.

Found while auditing, fixed in passing

LogoChip's fallback avatar rendered #fff at 2.96:1 in dark — live, and invisible to the new gate because its background is set via a JS style prop. Now 4.55:1 via --teal-btn. Two color-mix() sites in the same family were fixed the same way.

Verification

npm run check exit 0 — 63 files / 284 tests, every gate PASS with literals: 0.

Both gates were watched to fail. Reverting .al-badge to --neg produces callsite-contrast: .al-badge — #fff on --neg is 3.16 in dark, needs 4.5; collapsing --teal-text back onto the brand hex produces contrast: light --teal-text on --teal-soft is 3.92, needs 4.5. Both restore clean.

Every ratio was recomputed independently in review against the WCAG formula, including several not asked for. No discrepancy was found.

Known limits

The callsite check is a textual per-rule-block scan and misses JS-set backgrounds, color-mix()/gradient fills, and pairings split across a base rule and its :hover variant — now stated in its own output. A pre-existing typo in PriceChart.tsx's --pos fallback (#0d8259 vs the real #0d7259) is left alone as out of scope; it only fires if getComputedStyle fails to resolve the variable.

🤖 Generated with Claude Code