feat(token-sets): four demo schools in Zuiddrecht (wilgenboom, vaartveld, esdoornveen, warmtepompacademie)

[rubenvdlinde]

Four token sets, one per finished school design, built the way zuiddrecht is: wilgenboom (Basisschool De Wilgenboom), vaartveld (Vaartveld College), esdoornveen (Esdoornveen, mbo college) and warmtepompacademie (Warmtepompacademie). Spec: openspec/changes/school-token-sets.

What each set ships

• css/tokens/<set>.css on the nldesign vocabulary, with the design's main, main-deep, main-light, accent and accent-text colours, the fixed status pills and the workplace values from the Cunningham layer (ink #1B1C1D, muted #5E6168, line #E4E6EA, workspace #F5F6F8).
• A generated dark variant, and css/token-overrides/<set>.css for the dark page and workspace, the 200 by 44 login wordmark, and the dark values the generator leaves under AA.
• Four logos (colour, white as -dark, emblem, grey emblem for the login watermark) and a token-sets.json entry with a light workplace layout block.
• Its typefaces, bundled and OFL-annotated: Lexend; Red Hat Display over Red Hat Text; IBM Plex Sans with IBM Plex Mono; Barlow Semi Condensed over Barlow.
• A generated reference page, plus updated counts, contrast report and coverage table.

Three small shared additions

• --nldesign-brand-stripe-image: the brand stripe draws a set's own image in place of the three bands. That is where Zuiddrecht's three bands live, so the school motifs are there too (twigs, canal, slanted cut, temperature line). The stripe is on by default only for esdoornveen, whose 6px cut fits inside the top bar the way Zuiddrecht's 5px stripe does.
• --nldesign-website-border-radius and -large, read only by css/public-bridge.css, so the website gets its own corners (10/14, 6/10, 4/8, 3/6) while the workplace keeps 8 and 12.
• The bridge's heading roles read --nldesign-component-heading-font-family before the text face.

Existing sets are unchanged. The example-* education sets are untouched.

Verified

• bash scripts/token-set-gate.sh: exit 0 (PHPUnit 344 tests, vitest 370).
• npm run lint, npm run format, npm run stylelint, npm run test:l10n, check:l10n-js, test:fonts, test:component-scopes, audit:token-sets:check, test:token-set-coverage, check:manifest: all exit 0.
• openspec validate school-token-sets: valid. vendor/bin/hydra-gates --scope-to-diff --base origin/development: exit 0.
• composer check:strict: lint, phpcs, phpmd, psalm and phpstan green; cs:check flagged one alignment in a test I added, fixed. test:all skips here (no server tree).
• Full vitest: green except playgroundOwnStage.spec.js, whose five tests timed out at 5 s under load and pass when run alone.
• Live on Nextcloud 34: each set selected, and computed values read from the Files app (light and dark), the settings navigation, the login page and the portal site. Fonts, primary, workspace, dark surface #121315, watermark, login wordmark, the esdoornveen stripe, the portal's website radius roles and the heading faces all matched.

Known gaps

• The portal paints what the public bridge maps. Like zuiddrecht, these sets declare no --utrecht-* role layer, so the portal header and the DigiD button render unstyled. The header and footer motifs are portaliq's work; portaliq draws no motif today, not even Zuiddrecht's.
• Den Haag's mijn-omgeving components keep --nldesign-border-radius, which comes from the generated mapping, so their corners follow the workplace scale.
• REUSE lint was not run locally (the tool isn't installed). fontLicences.spec.js checks the notices and annotations.
• Inherited: the test files I touched carry phpcs findings that were there before (named arguments, @return tags). phpcs.xml does not cover tests.

🤖 Generated with Claude Code

[github-actions]

Quality Report — ConductionNL/thematiq @ 75baa78

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-manifest		✅
test-l10n		✅
format		✅
test-fonts		✅
test-token-set-coverage		✅
composer			✅	✅ 107/107
npm			✅	✅ 2/2
app:check-code	⏭️
info.xml	✅
REUSE	✅
lockfile sync		✅
PHPUnit					✅
Newman					✅
Playwright					⏭️ deferred: E2E runs locally and on the promotion path only. This pull request targets development, so the suite is asked once per promotion into beta and main rather than once per push per open pull request. Run it locally with npx playwright test, or from the Actions tab on a branch with no open pull request into development.
Hydra gates					✅

---

Quality workflow — 2026-10-05 12:25 UTC

Download the full PDF report from the workflow artifacts.