docs(backlog): track Storybook dark-mode decorator follow-up (AD-2.5-D1)

This commit is contained in:
2026-05-20 23:41:04 +02:00
parent 59439c924b
commit 31a851e6e0

View File

@@ -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 `<body>`
naar `<html>` (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 `<html>` 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.~~ ✅