docs(12-02): complete FieldRenderer select dark mode fix plan
- 12-02-SUMMARY.md: select element bg-surface-container text-on-surface fix - STATE.md: updated position and decisions - ROADMAP.md: phase 12 progress updated - REQUIREMENTS.md: DARK-03 marked complete
This commit is contained in:
@@ -39,7 +39,7 @@
|
||||
|
||||
- [ ] **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
|
||||
- [ ] **DARK-03**: FieldRenderer select element has proper background and text color 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:** 2 plans
|
||||
**Plans:** 1/2 plans executed
|
||||
|
||||
Plans:
|
||||
- [ ] 12-01-PLAN.md — Fix step headings, DeploymentStep form controls, ReviewStep checkbox
|
||||
|
||||
+13
-7
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
|
||||
milestone: v1.2
|
||||
milestone_name: UI Polish & Clarity
|
||||
status: completed
|
||||
stopped_at: Completed 11-02-PLAN.md
|
||||
last_updated: "2026-04-01T11:35:59.058Z"
|
||||
stopped_at: Completed 12-02-PLAN.md
|
||||
last_updated: "2026-04-01T12:05:08.887Z"
|
||||
last_activity: 2026-04-01 — Phase 11 plan 02 complete (POLISH-03, POLISH-04 satisfied)
|
||||
progress:
|
||||
total_phases: 4
|
||||
total_phases: 6
|
||||
completed_phases: 4
|
||||
total_plans: 12
|
||||
completed_plans: 12
|
||||
total_plans: 14
|
||||
completed_plans: 13
|
||||
percent: 100
|
||||
---
|
||||
|
||||
@@ -69,6 +69,12 @@ Recent decisions affecting current work:
|
||||
- [Phase 11-polish-responsiveness]: FieldRenderer select uses focus-visible:ring-2 (not focus:ring-2) for keyboard-only ring on selects
|
||||
- [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
|
||||
|
||||
### Roadmap Evolution
|
||||
|
||||
- Phase 12 added: Dark mode visibility fixes
|
||||
- Phase 13 added: Add remaining RClone remotes
|
||||
|
||||
### Pending Todos
|
||||
|
||||
@@ -80,6 +86,6 @@ None yet.
|
||||
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-04-01T11:32:08.126Z
|
||||
Stopped at: Completed 11-02-PLAN.md
|
||||
Last session: 2026-04-01T12:05:08.885Z
|
||||
Stopped at: Completed 12-02-PLAN.md
|
||||
Resume file: None
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
phase: 12-dark-mode-visibility-fixes
|
||||
plan: 02
|
||||
subsystem: ui
|
||||
tags: [tailwind, dark-mode, select, semantic-tokens, FieldRenderer]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 12-dark-mode-visibility-fixes
|
||||
provides: dark mode semantic token CSS variables established in 12-01
|
||||
provides:
|
||||
- Select dropdowns in FieldRenderer readable in dark mode via bg-surface-container text-on-surface
|
||||
affects: [RemoteConfigStep, any page rendering select via FieldRenderer]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns: [semantic token classes on native HTML select elements for dark mode compatibility]
|
||||
|
||||
key-files:
|
||||
created: []
|
||||
modified:
|
||||
- src/components/ui/FieldRenderer.tsx
|
||||
|
||||
key-decisions:
|
||||
- "bg-surface-container text-on-surface added to select className — semantic tokens ensure correct rendering in both light and dark themes without dark: prefix"
|
||||
|
||||
patterns-established:
|
||||
- "Native select elements require explicit bg and text semantic token classes — browser default white background overrides dark mode cascade otherwise"
|
||||
|
||||
requirements-completed: [DARK-03]
|
||||
|
||||
# Metrics
|
||||
duration: 1min
|
||||
completed: 2026-04-01
|
||||
---
|
||||
|
||||
# Phase 12 Plan 02: FieldRenderer Select Dark Mode Fix Summary
|
||||
|
||||
**Select dropdowns in FieldRenderer now use bg-surface-container and text-on-surface semantic tokens, fixing browser-imposed white background in dark mode**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** ~1 min
|
||||
- **Started:** 2026-04-01T14:03:23Z
|
||||
- **Completed:** 2026-04-01T14:04:05Z
|
||||
- **Tasks:** 1
|
||||
- **Files modified:** 1
|
||||
|
||||
## Accomplishments
|
||||
- Added `bg-surface-container text-on-surface` to the select element's className in FieldRenderer.tsx
|
||||
- Fixed invisible text in select dropdowns when app is in dark mode (browser was applying native white background)
|
||||
- Full test suite (204 tests, 16 files) passes with zero regressions
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Add dark mode classes to FieldRenderer select element** - `94e90e0` (feat)
|
||||
|
||||
## Files Created/Modified
|
||||
- `src/components/ui/FieldRenderer.tsx` - Added `bg-surface-container text-on-surface` to select element className
|
||||
|
||||
## Decisions Made
|
||||
None - followed plan as specified. The two semantic token classes were added exactly as prescribed, without touching option elements or border/error conditional logic.
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
None.
|
||||
|
||||
## User Setup Required
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
- FieldRenderer select elements are now fully dark-mode compatible
|
||||
- Remaining dark mode fixes (if any) in phase 12 can proceed independently
|
||||
- Phase 13 (Add remaining rclone remotes) is unblocked
|
||||
|
||||
---
|
||||
*Phase: 12-dark-mode-visibility-fixes*
|
||||
*Completed: 2026-04-01*
|
||||
|
||||
## Self-Check: PASSED
|
||||
- FOUND: src/components/ui/FieldRenderer.tsx (contains bg-surface-container text-on-surface)
|
||||
- FOUND: .planning/phases/12-dark-mode-visibility-fixes/12-02-SUMMARY.md
|
||||
- FOUND: commit 94e90e0
|
||||
Reference in New Issue
Block a user