diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index 6cf7e85..866f1a0 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -35,6 +35,12 @@ - [x] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt) +### 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 +- [ ] **DARK-03**: FieldRenderer select element has proper background and text color in dark mode + ## Future Requirements - Accent color presets (5-8 curated themes) — deferred from v1.2 scoping @@ -71,12 +77,15 @@ | POLISH-02 | Phase 11 | Complete | | POLISH-03 | Phase 11 | Complete | | POLISH-04 | Phase 11 | Complete | +| DARK-01 | Phase 12 | Planned | +| DARK-02 | Phase 12 | Planned | +| DARK-03 | Phase 12 | Planned | **Coverage:** -- v1.2 requirements: 15 total -- Mapped to phases: 15 +- v1.2 requirements: 18 total +- Mapped to phases: 18 - Unmapped: 0 --- *Requirements defined: 2026-03-31* -*Last updated: 2026-03-31 after roadmap creation* +*Last updated: 2026-04-01 after Phase 12 planning* diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 7268aae..c1b28c9 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -117,4 +117,29 @@ Plans: | 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 | | 9. MD3 Components | v1.2 | 5/5 | Complete | 2026-04-01 | | 10. Content & Clarity | v1.2 | 3/3 | Complete | 2026-04-01 | -| 11. Polish & Responsiveness | 2/2 | Complete | 2026-04-01 | - | +| 11. Polish & Responsiveness | v1.2 | 2/2 | Complete | 2026-04-01 | + +### Phase 12: Dark mode visibility fixes + +**Goal:** Fix dark mode visibility regressions where step headings, DeploymentStep form controls, and FieldRenderer select elements are invisible or unstyled against the dark background +**Requirements**: DARK-01, DARK-02, DARK-03 +**Depends on:** Phase 11 +**Success Criteria** (what must be TRUE): + 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: +- [ ] 12-01-PLAN.md — Fix step headings, DeploymentStep form controls, ReviewStep checkbox +- [ ] 12-02-PLAN.md — Fix FieldRenderer select dark mode styling + +### Phase 13: Add remaining RClone remotes + +**Goal:** [To be planned] +**Requirements**: TBD +**Depends on:** Phase 12 +**Plans:** 0 plans + +Plans: +- [ ] TBD (run /gsd:plan-phase 13 to break down) diff --git a/.planning/phases/12-dark-mode-visibility-fixes/12-01-PLAN.md b/.planning/phases/12-dark-mode-visibility-fixes/12-01-PLAN.md new file mode 100644 index 0000000..05f1497 --- /dev/null +++ b/.planning/phases/12-dark-mode-visibility-fixes/12-01-PLAN.md @@ -0,0 +1,149 @@ +--- +phase: 12-dark-mode-visibility-fixes +plan: 01 +type: execute +wave: 1 +depends_on: [] +files_modified: + - src/components/wizard/BackendSelectionStep.tsx + - src/components/wizard/RemoteConfigStep.tsx + - src/components/wizard/DeploymentStep.tsx + - src/components/wizard/ReviewStep.tsx +autonomous: true +requirements: [DARK-01, DARK-02] + +must_haves: + truths: + - "All h2 step headings are visible (readable text) in dark mode" + - "DeploymentStep labels, legends, checkboxes, and radios are visible and styled in dark mode" + - "ReviewStep security checkbox uses themed accent color" + artifacts: + - path: "src/components/wizard/BackendSelectionStep.tsx" + provides: "h2 with text-on-surface class" + contains: "text-on-surface" + - path: "src/components/wizard/RemoteConfigStep.tsx" + provides: "h2 with text-on-surface class" + contains: "text-on-surface" + - path: "src/components/wizard/DeploymentStep.tsx" + provides: "h2 with text-on-surface, styled legends/labels/controls" + contains: "text-on-surface" + - path: "src/components/wizard/ReviewStep.tsx" + provides: "h2 with text-on-surface, accent-color on checkbox" + contains: "text-on-surface" + key_links: + - from: "all step components" + to: "src/index.css" + via: "semantic token classes" + pattern: "text-on-surface|text-on-surface-container|accent-primary" +--- + + +Fix dark mode visibility for step headings, DeploymentStep native form controls, and ReviewStep security checkbox. + +Purpose: All four wizard step headings are currently invisible in dark mode (browser default black text on dark background). DeploymentStep's native form controls (labels, legends, checkboxes, radios) are also unstyled and invisible. These are regressions from the v1.2 UI overhaul where structural elements were migrated but their text styling was omitted. + +Output: All step components render readable text and properly styled controls in both light and dark mode. + + + +@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md +@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md +@.planning/phases/12-dark-mode-visibility-fixes/12-RESEARCH.md + + + +```tsx +

+``` + + +- text-on-surface: primary text, headings +- text-on-surface-container: labels, secondary text +- bg-surface-container: input/select backgrounds +- border-outline: form control borders +- accent-primary: native checkbox/radio accent color (maps to --color-primary) +- text-on-surface-variant: already used for step descriptions + + +- Do NOT use dark: prefix — project uses .dark class cascade +- Do NOT use hardcoded colors (text-gray-900, text-black, bg-white) +- Do NOT style