Files
ehoandClaude Opus 5 12f17d9d73 docs: archive the finished backlogs (RD-30)
Two backlog trees are complete: `docs/project/backlog/` (75 files, every
WP done) and `docs/project/refactor-backlog-setup/` (the arc before it).
Move both under `docs/project/archive/` with `git mv`, so history stays
intact through `git log --follow`. `SHOWCASE-ROADMAP.md` moves with them,
because it points at the now-archived backlog README.

Add `docs/project/archive/README.md`. It states that these trees are
historical and names the two directories that are still live.

Repoint every inbound reference named in RD-30's Files table: CLAUDE.md,
the root README, both backend READMEs, `LetterHtml.cs`, `a11y.mdx`, the
`document-feature` and `new-ssp` skills, and the readable-codebase PLAN,
README, and RD-19 ticket. Fix two upward-relative links inside the moved
WP files (WP-68, WP-69) that gained a directory level and would otherwise
break. Repoint `.prettierignore`'s two agent-prompt exclusions to their
new path, so prettier keeps leaving those files' exact wording alone.

Mark RD-30 done and check off its acceptance criteria; flip its README
row to done.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-08 23:00:38 +02:00

2.8 KiB

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

Status: done (88442b0) 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.tsrgb(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

  1. Create scripts/check-tokens.sh; package.json check:tokens calls it.
  2. Extend the regex to #[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\( (skip lines containing token-ok).
  3. Extend the scanned set to all src/app/**/*.component.ts.
  4. 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).
  5. Fix the raw border widths in the three brief components (--rhc-border-width-*), even though px isn't grepped.
  6. 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. (No token-ok markers were needed.)
  • 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.