Batch 3/4 of the design-token extraction (design/token-extraction). Replaces
hardcoded Tailwind arbitrary-bracket values for width/height/min/max,
padding/margin/gap/inset/translate, radius (incl. directional), ring/outline
width, and box-shadow in ui/src/components/** and ui/src/pages/** (including
*.test.tsx companions) with references to new CSS custom-property tokens in
ui/src/index.css. Zero visual change, proven by the Phase 0 Storybook
snapshot baseline.
Counts:
- 407 sites rewritten across 140 files (127 component/page + 13 test files
updated in lockstep with the components they assert against).
- 163 new tokens minted: 127 --sz-* (one shared family across
width/height/spacing/gap/inset/translate lengths, including 42
--sz-calc-N compound calc()/min()/max()/clamp() expressions and 2
--sz-safe-* env(safe-area-inset-*) wrappers), 8 --rad-* (shared across
radius/ring-width/outline-width), 5 --pct-* (incl. --pct-neg-50 kept
distinct per the source bracket's own negative sign), 23
--shadow-extract-* (38 sites, deduped by exact value).
- 11 var()-only passthrough sites (--radix-*-trigger-width/height,
--new-issue-dialog-height) rewritten to the bare paren form with no new
token minted, per DESIGN.md's runtime-library-variable special case.
- 3 sites resolved Tailwind's build-time calc(theme(spacing.N)-Mpx) into a
byte-equivalent runtime calc() (components/IssueRow.tsx), verified via
headless-browser computed-style comparison against the pre-change built
CSS.
- 2 sites skipped/allowlisted: rounded-[inherit] (CSS keyword, not a
literal) and drop-shadow-[...] (different utility than this batch's
shadow-[...] mandate) — logged as a Needs-human-decision item.
Three gotchas found and fixed during verification (all documented in the
codemod header and TOKEN-AUDIT.md's Batch 3 log): a boundary regex bug that
false-positived inside Tailwind's own slide-out-to-top-[1%] compound
utility, a calc()-operator-spacing bug that could corrupt
env(safe-area-inset-*) identifiers, and a generated-CSS-comment bug where a
literal "*/" substring in prose silently dropped the entire token block
from the compiled CSS (root cause of an initial 222-test snapshot failure,
fully resolved to 510/510 passing).
Verify: rg gates clean, pnpm build-storybook exit 0, Storybook visual
snapshot suite 510/510 (509 clean + 1 known-benign flaky retry), pnpm
typecheck exit 0, codemod re-run confirmed idempotent.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
scotttong