diff --git a/dev-docs/BACKLOG.md b/dev-docs/BACKLOG.md index a534a0d7..49efc372 100644 --- a/dev-docs/BACKLOG.md +++ b/dev-docs/BACKLOG.md @@ -1443,6 +1443,37 @@ in de geplande a11y-batch vóór brede herbruik van het patroon. --- +### STORYBOOK-DARKMODE-DECORATOR — Storybook decorator voor dark-mode story rendering + +**Aanleiding:** Plan 2.5 P3 verplaatste de `dark` class van `` +naar `` (AD-2.5-D1, commit `d0dd45c0`) zodat Tailwind v4's +`@variant dark` (`@custom-variant dark (&:where(.dark, .dark *))`) +correct cascadeert naar elk element binnen het document. Storybook +stories renderen componenten echter in een geïsoleerde preview-iframe +waar `` niet door de SPA-runtime (`useThemeStore` / vue-use +`usePreferredDark`) wordt geannoteerd — dark-mode varianten verschijnen +daardoor niet in Storybook ook al werken ze correct in de app. + +**Wat:** +- Voeg een Storybook decorator toe die de `dark` class op de iframe + `document.documentElement` toggle't op basis van een Storybook global + (toolbar toggle, evt. per-story parameter override). +- Wire de decorator globaal in `.storybook/preview.ts` zodat elke story + automatisch in light + dark gereviewd kan worden zonder per-story + setup. +- Documenteer het patroon in `PRIMEVUE_COMPONENTS.md` (theming sectie) + naast de bestaande dark-mode conventies. + +**Trigger:** Eerste story die dark-mode parity moet aantonen +(visual-regression baseline, design-review van een PrimeVue surface, +of F5 a11y-batch contrast-check). + +**Prioriteit:** Laag — dark-mode werkt correct in de SPA; alleen +Storybook visuele review van dark-varianten is geblokkeerd. Geen +runtime impact op gebruikers. + +--- + ## Opgeloste items (mei 2026) - ~~**WS-TOOLING-001**: Claude Code deterministic guard-rail layer (5 hooks, `crewli-reviewer` subagent op Opus 4.7, 3 slash commands `/sprint-status` `/review-multitenancy` `/sync-docs`, `dev-docs/CLAUDE_CODE_TOOLING.md`). 8/8 smoke tests groen, live integratie geverifieerd. Merge `ad36c06` op 2026-05-05. Follow-ups: TECH-HOOK-001, TECH-CMD-001, TECH-STYLE-001.~~ ✅