Files

Edwin van den Houdt f769242f76 docs: replace SHOWCASE-ROADMAP.md with docs/backlog/ (17 WPs)

Turns the prior roadmap sketch into ordered, gated work packages (enforcement
gates, FP/DDD consistency, CIBG fidelity, Storybook curriculum, a11y) from the
2026-07-02 showcase-hardening audit.

2026-07-02 17:07:59 +02:00

2.7 KiB

Raw Blame History

WP-02 — Harden `check:tokens` + fix what it then catches

Status: todo Phase: 0 — enforcement & gates

Why

The token guard (check:tokens in package.json) only greps for hex colors and only scans registratie/ui, shared/ui, shared/layout. It misses rgb()/hsl() values and skips brief/, auth/, herregistratie/, showcase/ entirely. The guard must cover the whole app before the CIBG work (WP-10…13) leans on it.

Read first

package.json (check:tokens script)
src/styles.scss (the token bridge — the vocabulary fixes must come from)
CLAUDE.md theming section

Decisions (pre-made, don't relitigate)

Raw px values are not grepped (too many false positives); border-width fixes are done manually in this WP and the script documents why px is out of scope.
A /* token-ok */ inline marker suppresses a justified false positive (e.g. rgb in a comment or data-URI) — each use needs a reason in the comment.

Files

package.json → move logic to scripts/check-tokens.sh (new), keep the npm script name
src/app/shared/layout/site-footer/site-footer.component.ts — rgb(255 255 255 / 0.25)
src/app/shared/ui/debug-state/debug-state.component.ts — raw rgba/hex; tokenize and drop its exclusion (it's dev-only chrome but the rule should have no holes)
src/app/brief/ui/letter-block/letter-block.component.ts — raw 3px border
src/app/brief/ui/letter-preview/letter-preview.component.ts — raw 1px border
src/app/brief/ui/passage-picker/passage-picker.component.ts — raw 1px border

Steps

Create scripts/check-tokens.sh; package.json check:tokens calls it.
Extend the regex to #[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\( (skip lines containing token-ok).
Extend the scanned set to all src/app/**/*.component.ts.
Run it; fix every hit using tokens from the src/styles.scss bridge (add a bridge token only if no existing one fits — keep the vocabulary small).
Fix the raw border widths in the three brief components (--rhc-border-width-*), even though px isn't grepped.
Plant a violation, confirm the script fails, remove it.

Acceptance criteria

Script scans all contexts and matches hex + rgb()/hsl().
Zero exclusions; any token-ok marker has a reason.
site-footer, debug-state, and the three brief components are tokenized.
A planted violation provably fails npm run check:tokens.

Verification

GREEN + npm run test-storybook:ci.

Out of scope

Grepping px/rem values; scss files (styles.scss is the one place palette values are allowed — it IS the bridge).

Risks

Regex false positives in strings/URLs — that's what the token-ok marker is for; keep its bar high.

2.7 KiB Raw Blame History

WP-02 — Harden check:tokens + fix what it then catches

Why