docs(12-01): complete dark mode visibility fixes plan

- SUMMARY.md: dark mode h2 and form control semantic token fixes - STATE.md: position updated, decisions recorded - ROADMAP.md: phase 12 marked complete - REQUIREMENTS.md: DARK-01, DARK-02 marked complete
2026-04-01 14:06:25 +02:00
parent d3329311e1
commit 5986d5dbec
4 changed files with 116 additions and 9 deletions
@@ -0,0 +1,105 @@
+---
+phase: 12-dark-mode-visibility-fixes
+plan: 01
+subsystem: ui
+tags: [react, tailwind, dark-mode, wizard, accessibility]
+
+# Dependency graph
+requires:
+  - phase: 08-theming
+    provides: semantic token CSS classes (text-on-surface, text-on-surface-container, accent-primary) via Tailwind v4 @theme
+  - phase: 11-polish-responsiveness
+    provides: wizard step components with completed structural layout
+provides:
+  - All 4 wizard step h2 headings styled with text-on-surface (visible in dark mode)
+  - DeploymentStep native form controls (labels, legends, checkboxes, radios) fully styled with semantic tokens
+  - ReviewStep security checkbox accent color matching warning theme
+affects: [dark-mode, wizard-steps, deployment-step, review-step]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "accent-[var(--r2b-warning)] arbitrary value for warning-colored native checkbox (accent-warning not generated)"
+    - "flex items-center gap-2 pattern for native checkbox/radio labels (replaces {' '} space hack)"
+    - "fieldset + legend with text-on-surface-container font-medium for form group headings"
+
+key-files:
+  created: []
+  modified:
+    - src/components/wizard/BackendSelectionStep.tsx
+    - src/components/wizard/RemoteConfigStep.tsx
+    - src/components/wizard/DeploymentStep.tsx
+    - src/components/wizard/ReviewStep.tsx
+
+key-decisions:
+  - "accent-[var(--r2b-warning)] arbitrary value used for ReviewStep security checkbox — accent-warning class not confirmed generated by Tailwind v4 from --color-warning"
+  - "Removed {' '} space-before-text pattern in DeploymentStep labels — replaced with flex gap-2 layout for consistent spacing"
+
+patterns-established:
+  - "h2 headings: text-2xl font-bold text-on-surface mb-2 (mb-2 when p description follows immediately)"
+  - "Native control labels: flex items-center gap-2 text-sm text-on-surface cursor-pointer"
+  - "Fieldset legends: text-sm font-medium text-on-surface-container mb-2"
+  - "Native checkboxes/radios: accent-primary (or accent-[var(--r2b-warning)] for warning context)"
+
+requirements-completed: [DARK-01, DARK-02]
+
+# Metrics
+duration: 8min
+completed: 2026-04-01
+---
+
+# Phase 12 Plan 01: Dark Mode Visibility Fixes Summary
+
+**Semantic token classes applied to all 4 wizard step h2 headings and DeploymentStep native form controls, fixing invisible text regression from v1.2 UI overhaul**
+
+## Performance
+
+- **Duration:** 8 min
+- **Started:** 2026-04-01T14:03:00Z
+- **Completed:** 2026-04-01T14:11:00Z
+- **Tasks:** 2
+- **Files modified:** 4
+
+## Accomplishments
+- All 4 wizard step h2 elements now carry `text-2xl font-bold text-on-surface mb-2` — headings are readable in both light and dark mode
+- DeploymentStep: include-install checkbox, config-path radio group, and script-targets checkbox group all styled with semantic tokens (text-on-surface labels, text-on-surface-container legends, accent-primary controls)
+- ReviewStep: security acknowledgement checkbox uses `accent-[var(--r2b-warning)]` for consistent warning-themed accent color
+- Full test suite (204 tests, 16 files) passes with zero regressions after both tasks
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Add semantic token classes to all step h2 headings** - `f6b4070` (feat)
+2. **Task 2: Style DeploymentStep form controls and ReviewStep checkbox** - `945f90d` (feat)
+
+**Plan metadata:** _(docs commit follows)_
+
+## Files Created/Modified
+- `src/components/wizard/BackendSelectionStep.tsx` - h2 styled with text-on-surface
+- `src/components/wizard/RemoteConfigStep.tsx` - h2 styled with text-on-surface
+- `src/components/wizard/DeploymentStep.tsx` - h2 + all native form controls styled with semantic tokens
+- `src/components/wizard/ReviewStep.tsx` - h2 styled with text-on-surface, security checkbox accent-[var(--r2b-warning)]
+
+## Decisions Made
+- Used `accent-[var(--r2b-warning)]` arbitrary value syntax for ReviewStep security checkbox instead of `accent-warning` — the `accent-warning` utility class is not confirmed to generate from the `--color-warning` Tailwind v4 theme token, so the arbitrary value form is the safe choice.
+- Removed the `{' '}` before-label-text pattern throughout DeploymentStep; replaced with `flex gap-2` layout on the label wrapper. This is cleaner and aligns with the rest of the codebase's flexbox label patterns.
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+None
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Phase 12 plan 01 complete — all dark mode visibility fixes for step headings and form controls are done (DARK-01, DARK-02 satisfied)
+- Visual browser verification recommended: toggle dark mode and confirm all 4 step headings are readable white text, DeploymentStep controls are visible, and ReviewStep security checkbox accent matches warning amber color
+
+---
+*Phase: 12-dark-mode-visibility-fixes*
+*Completed: 2026-04-01*