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>
2.8 KiB
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:tokensscript)src/styles.scss(the token bridge — the vocabulary fixes must come from)CLAUDE.mdtheming section
Decisions (pre-made, don't relitigate)
- Raw
pxvalues 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.rgbin a comment or data-URI) — each use needs a reason in the comment.
Files
package.json→ move logic toscripts/check-tokens.sh(new), keep the npm script namesrc/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— raw3pxbordersrc/app/brief/ui/letter-preview/letter-preview.component.ts— raw1pxbordersrc/app/brief/ui/passage-picker/passage-picker.component.ts— raw1pxborder
Steps
- Create
scripts/check-tokens.sh;package.jsoncheck:tokenscalls it. - Extend the regex to
#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\((skip lines containingtoken-ok). - Extend the scanned set to all
src/app/**/*.component.ts. - Run it; fix every hit using tokens from the
src/styles.scssbridge (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-okmarker has a reason. (Notoken-okmarkers 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.