# 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

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.
- [ ] 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.