Ready2Blob/.planning/phases/12-dark-mode-visibility-fixes/12-VALIDATION.md

phase, slug, status, nyquist_compliant, wave_0_complete, created

phase	slug	status	nyquist_compliant	wave_0_complete	created
12	dark-mode-visibility-fixes	draft	false	false	2026-04-01

Phase 12 — Validation Strategy

Per-phase validation contract for feedback sampling during execution.

---

Test Infrastructure

Property	Value
Framework	Vitest ^4.1.1 (node environment) + @testing-library/react
Config file	vitest.config.ts
Quick run command	npm test -- --reporter=verbose
Full suite command	npm test
Estimated runtime	~10 seconds

---

Sampling Rate

• After every task commit: Run npm test -- --reporter=verbose
• After every plan wave: Run npm test
• Before /gsd:verify-work: Full suite must be green + visual browser verification in dark mode
• Max feedback latency: 10 seconds

---

Per-Task Verification Map

Task ID	Plan	Wave	Requirement	Test Type	Automated Command	File Exists	Status
12-01-01	01	1	h2 headings visible in dark mode	unit	npm test -- src/components/wizard/BackendSelectionStep	✅	⬜ pending
12-01-02	01	1	h2 headings visible in dark mode	unit	npm test -- src/components/wizard/RemoteConfigStep	✅	⬜ pending
12-01-03	01	1	h2 headings visible in dark mode	unit	npm test -- src/components/wizard/DeploymentStep	✅	⬜ pending
12-01-04	01	1	h2 headings visible in dark mode	unit	npm test -- src/components/wizard/ReviewStep	✅	⬜ pending
12-01-05	01	1	DeploymentStep labels/controls visible	unit	npm test -- src/components/wizard/DeploymentStep	✅	⬜ pending
12-01-06	01	1	Select element styled for dark mode	unit	npm test -- src/components/ui/FieldRenderer	✅	⬜ pending
12-01-07	01	1	ReviewStep checkbox styled	unit	npm test -- src/components/wizard/ReviewStep	✅	⬜ pending

Status: ⬜ pending · ✅ green · ❌ red · ⚠️ flaky

---

Wave 0 Requirements

Existing infrastructure covers all phase requirements. No new test files or fixtures needed.

---

Manual-Only Verifications

Behavior	Requirement	Why Manual	Test Instructions
Dark mode visual correctness	All elements visible on dark bg	jsdom does not resolve CSS custom properties	Toggle dark mode in browser, verify all headings/labels/controls are readable on dark background
Select dropdown appearance	Select bg/text correct in dark mode	Native <option> rendering is browser-dependent	Open select in dark mode on Chrome/Edge, verify text is legible
Native checkbox/radio accent	Controls use primary accent color	CSS accent-color not testable in jsdom	Toggle checkboxes/radios in dark mode, verify accent color matches primary theme

---

Validation Sign-Off

• All tasks have <automated> verify or Wave 0 dependencies
• Sampling continuity: no 3 consecutive tasks without automated verify
• Wave 0 covers all MISSING references
• No watch-mode flags
• Feedback latency < 10s
• nyquist_compliant: true set in frontmatter

Approval: pending