feat(public-bridge): a portal gets the whole role layer, the brand motif and the accent from any set

[rubenvdlinde]

What

A portal on zuiddrecht or one of the four school sets now looks as designed instead of worse than on an example-* set.

• The public bridge carries the role layer the portal site reads. Measured on :8091 (portaliq, 5 Oct): with wilgenboom in place of example-basisschool the site resolved 116 of the 489 component roles it reads (no logo, header and DigiD button in browser defaults, footer without padding). The bridge now declares the 375 that were missing (list in tests/vitest/fixtures/portal-site-roles.json): colours from --nldesign-* with fallbacks, logos from --nldesign-logo-url, geometry as neutral values. Sets with their own role layer load after the bridge and keep every value.
• The brand stripe reaches the portal as --cn-brand-stripe-*, plus --cn-brand-stripe-image and -image-inverse, without fallbacks (a set without a stripe draws none). css/brand-stripe.css hands the two image names to the component library too.
• A motif for a dark band: --nldesign-brand-stripe-image-inverse (wilgenboom light twigs, vaartveld white bank, esdoornveen the cut at the other end). A variant of the one motif token, not a second one. wilgenboom's header motif gains its 3px green line (17px).
• Accent vocabulary: --nldesign-color-accent, -accent-light, -accent-text in the four school sets and zuiddrecht, read by the bridge into --thematiq-accent-* (falling back to the primary) and --thematiq-badge-*.
• Website logo, footer and hero tokens in the five sets: --nldesign-website-logo-width/-height/-text-size, --nldesign-color-footer-background/-text, --nldesign-hero-*; bridge roles --thematiq-logo-text-font-size, --thematiq-footer-legal-background-color, --thematiq-hero-*.

OpenSpec: openspec/changes/brand-motif-on-portals.

Depends on / used by

• Used by portaliq site-chrome-follows-the-design (draws the stripe, reads the accent, logo and hero roles) and nextcloud-vue #1316 (CnBrandStripe draws the image). Merge this first: portaliq renders unchanged without it (every role has a fallback), but the school portals only look right with it.

Verified

• bash scripts/token-set-gate.sh (contrast report, token reference, coverage, then the token-set PHPUnit and vitest specs): exit 0; PHPUnit OK (344 tests, 6071 assertions), vitest 16 files passed, including the new tests/vitest/publicBridgeRoleLayer.spec.js (32 tests: roles, stripe, accent, logo, footer band, the example-set control).
• prettier, stylelint and eslint on the touched files: clean. No PHP changed, so check:strict was not run.
• Seen on :8091 with the set swapped in client-side (the instance runs an older thematiq): logo, styled header button and DigiD button, footer, motif under the header and over the footer, for all four schools and zuiddrecht; screenshots in the lane folder. A live check with the files deployed follows with the portaliq PR.

Inherited: none seen in the touched files.

🤖 Generated with Claude Code

[github-actions]

Quality Report — ConductionNL/thematiq @ fed8b0a

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 17:03 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/thematiq @ cc4ad0d

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 17:25 UTC

Download the full PDF report from the workflow artifacts.