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
This commit is contained in:
@@ -37,8 +37,8 @@
|
||||
|
||||
### Dark Mode Visibility
|
||||
|
||||
- [ ] **DARK-01**: All wizard step h2 headings are visible (readable text with proper contrast) in dark mode
|
||||
- [ ] **DARK-02**: DeploymentStep native form controls (labels, legends, checkboxes, radios) are visible and styled with semantic tokens in dark mode
|
||||
- [x] **DARK-01**: All wizard step h2 headings are visible (readable text with proper contrast) in dark mode
|
||||
- [x] **DARK-02**: DeploymentStep native form controls (labels, legends, checkboxes, radios) are visible and styled with semantic tokens in dark mode
|
||||
- [x] **DARK-03**: FieldRenderer select element has proper background and text color in dark mode
|
||||
|
||||
## Future Requirements
|
||||
|
||||
@@ -128,7 +128,7 @@ Plans:
|
||||
1. All wizard step h2 headings are readable in dark mode with proper contrast
|
||||
2. DeploymentStep labels, legends, checkboxes, and radios are visible and styled in dark mode
|
||||
3. FieldRenderer select element has proper background and text color in dark mode
|
||||
**Plans:** 1/2 plans executed
|
||||
**Plans:** 2/2 plans complete
|
||||
|
||||
Plans:
|
||||
- [ ] 12-01-PLAN.md — Fix step headings, DeploymentStep form controls, ReviewStep checkbox
|
||||
|
||||
+8
-6
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
|
||||
milestone: v1.2
|
||||
milestone_name: UI Polish & Clarity
|
||||
status: completed
|
||||
stopped_at: Completed 12-02-PLAN.md
|
||||
last_updated: "2026-04-01T12:05:08.887Z"
|
||||
stopped_at: Completed 12-01-PLAN.md
|
||||
last_updated: "2026-04-01T12:06:12.248Z"
|
||||
last_activity: 2026-04-01 — Phase 11 plan 02 complete (POLISH-03, POLISH-04 satisfied)
|
||||
progress:
|
||||
total_phases: 6
|
||||
completed_phases: 4
|
||||
completed_phases: 5
|
||||
total_plans: 14
|
||||
completed_plans: 13
|
||||
completed_plans: 14
|
||||
percent: 100
|
||||
---
|
||||
|
||||
@@ -70,6 +70,8 @@ Recent decisions affecting current work:
|
||||
- [Phase 11-polish-responsiveness]: CSS-only reduced-motion guard via @media (prefers-reduced-motion: reduce) — no JS listener needed
|
||||
- [Phase 11-polish-responsiveness]: key={state.currentStep} on step wrapper forces React remount triggering CSS animation from initial state
|
||||
- [Phase 12-dark-mode-visibility-fixes]: bg-surface-container text-on-surface added to FieldRenderer select className — semantic tokens ensure correct rendering in both light and dark themes without dark: prefix
|
||||
- [Phase 12-dark-mode-visibility-fixes]: accent-[var(--r2b-warning)] arbitrary value used for ReviewStep security checkbox — accent-warning class not confirmed generated by Tailwind v4
|
||||
- [Phase 12-dark-mode-visibility-fixes]: Removed {' '} space-before-text pattern in DeploymentStep labels — replaced with flex gap-2 layout for consistent spacing
|
||||
|
||||
### Roadmap Evolution
|
||||
|
||||
@@ -86,6 +88,6 @@ None yet.
|
||||
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-04-01T12:05:08.885Z
|
||||
Stopped at: Completed 12-02-PLAN.md
|
||||
Last session: 2026-04-01T12:06:08.013Z
|
||||
Stopped at: Completed 12-01-PLAN.md
|
||||
Resume file: None
|
||||
|
||||
@@ -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*
|
||||
Reference in New Issue
Block a user