feat(zuiddrecht): the website's columns, type, buttons, grey and photo ground; the menu mark restored

[rubenvdlinde]

What changes

These are the website tokens the Zuiddrecht portal lane asked for in round 3, taken from the Kop, Home and Contentpagina boards. Only the zuiddrecht set and the public bridge change.

• Columns: --nldesign-website-page-max-width: 1328px, -page-gutter: 24px, -band-max-width: 1280px, -header-max-width: 1280px, -header-gutter: 0px.
• Type: --nldesign-website-content-font-size: 17px. --nldesign-website-lead-font-size goes from 18px to 21px, the size the Contentpagina board draws.
• Buttons: in css/public-bridge.css, --utrecht-button-font-weight and its primary, secondary and subtle variants now read var(--nldesign-website-button-font-weight, 700). Zuiddrecht sets it to 600; every other set keeps 700.
• The site's own grey and photo ground: --nldesign-website-color-text-muted: #4A4A4A reaches 8.86:1 on white, 8.19:1 on the site surface #F4F6F9 and 6.83:1 on the photo ground. --nldesign-website-placeholder-background-color: #D9E3EF has ink at 13.41:1 on it. The bridge offers them as --thematiq-website-text-muted and --thematiq-placeholder-background-color. The workplace keeps #5E6168.

The menu mark, and why #1105 removed it

This restores --nldesign-website-nav-current-in-line: 1 and --nldesign-website-nav-current-color: #3669A5.

#1105 removed them because TokenSetVocabularyTest only accepts names that something in this repository reads, and only the portal (css/site-theme.css) read these two. To close that gap:

• every --nldesign-* name portaliq's site stylesheet reads now has a --thematiq-* role in public-bridge.css;
• tests/vitest/fixtures/portal-site-nldesign-readers.json lists those names, measured on portaliq fb15658a;
• tests/vitest/portalReaders.spec.js fails when the portal reads a name this repository does not know.

Not done

The proposed --nldesign-hero-decoration-image: var(--nldesign-emblem-url) (the coloured emblem) is left out. The Home board's hero image is /_blob/ea1cfb3e…, which is the grey shield (zuiddrecht-beeldmerk-grijs.svg). The render tool maps that blob to the coloured emblem, so a comparison render shows colour that the board does not have. The set keeps the grey emblem.

Verified (styling first: lint and touched specs only)

• vitest: portalReaders, publicBridgeRoleLayer (Zuiddrecht values plus controls on four school sets and vng), zuiddrechtTokenSet, nldesignNoHardcodedColour: 163 passed.
• A control walks every other shipped set: none declares the new names.
• With the bridge roles removed, 12 portalReaders cases fail.
• TokenSetVocabularyTest passes.
• prettier and stylelint pass on the changed files.
• The dark variant and docs/reference/token-sets/zuiddrecht.md were regenerated, for zuiddrecht only.

Verified locally (head 90597bc; development cea4893 merged in)

Check	Exit
npm run lint, stylelint, format	0, 0, 0
test:l10n, check:l10n-js, check:manifest, test:fonts, test:token-set-coverage	0 each
test:lasuite-tokens, -override, -bridge-coverage, -dark-ramp, test:guest-css, test:component-scopes, test:denhaag-bridge, test:theme-scopes, test:internal-scopes	0 each
npm run test:unit (vitest: 84 files, 1232 tests)	0
phpunit -c phpunit.token-sets.xml (359 tests)	0
composer check:strict	1, inherited
full PHPUnit in a throwaway --network none container of the :8080 image, with the server source (1893 tests)	red (ERRORS!, 11 failures + 2 errors; exit code not captured), inherited
hydra gates, ConductionNL/.github main (63 of 63 applicable)	0

The first vitest run stopped on a full disk (ENOSPC in 3 l10nCompleteness temp dirs). The whole suite was then run again from the start, and that run is the one in the table.

Inherited. Each fails the same way on development cea4893 (proof run for #1144):

• check:strict: only cs:check fails, on the same 3 untouched files (OpenRegisterAutoloader.php, Capabilities.php, OpenRegisterAutoloaderTest.php). phpcs (0 errors), phpmd, psalm and phpstan pass. Its own test:all step is skipped because there is no server tree.
• Full PHPUnit: the same 13 failures and errors as development (11 CssInjectionServiceTest, 1 OverridesControllerPerSetReadTest, 1 RuntimeFileWiringTest). The two failure lists diff empty.

🤖 Generated with Claude Code

[github-actions]

Quality Report — ConductionNL/thematiq @ 0cb94db

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					🚨 NO VERDICT — enabled but never ran
Newman					🚨 NO VERDICT — enabled but never ran
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-07 07:13 UTC

Download the full PDF report from the workflow artifacts.