From 31a851e6e0fd1af09902b69f8bbbf2af98793528 Mon Sep 17 00:00:00 2001 From: "bert.hausmans" Date: Wed, 20 May 2026 23:41:04 +0200 Subject: [PATCH] docs(backlog): track Storybook dark-mode decorator follow-up (AD-2.5-D1) --- dev-docs/BACKLOG.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) 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.~~ ✅