docs(12): create phase plan for dark mode visibility fixes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.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
+- v1.2 requirements: 18 total
-- Mapped to phases: 15
+- 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*

.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)

.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"
+---
+
+<objective>
+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.
+</objective>
+
+<execution_context>
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/12-dark-mode-visibility-fixes/12-RESEARCH.md
+
+<interfaces>
+<!-- Reference pattern from App.tsx line 19 (correct h2 styling): -->
+```tsx
+<h2 className="text-2xl font-bold text-on-surface mb-4">
+```
+
+<!-- Semantic token classes available (from index.css @theme): -->
+- 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
+
+<!-- Anti-patterns (from research): -->
+- 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 <option> elements — browser-native, cannot be reliably styled
+- Do NOT modify TextFieldMD3 input background — bg-transparent is intentional
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Add semantic token classes to all step h2 headings</name>
+  <files>src/components/wizard/BackendSelectionStep.tsx, src/components/wizard/RemoteConfigStep.tsx, src/components/wizard/DeploymentStep.tsx, src/components/wizard/ReviewStep.tsx</files>
+  <action>
+In each of the 4 step components, replace the bare `<h2>` tag with a styled version matching the established pattern from App.tsx:
+
+1. BackendSelectionStep.tsx line 65: Change `<h2>Step 1: Select Backend</h2>` to `<h2 className="text-2xl font-bold text-on-surface mb-2">Step 1: Select Backend</h2>`. Note: use mb-2 (not mb-4) because the `<p>` description paragraph immediately follows with its own mt-1.
+
+2. RemoteConfigStep.tsx line 65: Change `<h2>Step 2: Configure {backendLabel[backendType]}</h2>` to `<h2 className="text-2xl font-bold text-on-surface mb-2">Step 2: Configure {backendLabel[backendType]}</h2>`.
+
+3. DeploymentStep.tsx line 24: Change `<h2>Step 3: Deployment Options</h2>` to `<h2 className="text-2xl font-bold text-on-surface mb-2">Step 3: Deployment Options</h2>`.
+
+4. ReviewStep.tsx line 75: Change `<h2>Step 4: Review &amp; Download</h2>` to `<h2 className="text-2xl font-bold text-on-surface mb-2">Step 4: Review &amp; Download</h2>`.
+
+These are className-only additions. Do not change element structure, content, or any other attributes. Tests use getByRole('heading') which is unaffected by className changes.
+  </action>
+  <verify>
+    <automated>npm test -- --reporter=verbose 2>&1 | tail -20</automated>
+  </verify>
+  <done>All 4 step h2 elements have className="text-2xl font-bold text-on-surface mb-2". Full test suite passes with no regressions.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Style DeploymentStep form controls and ReviewStep checkbox</name>
+  <files>src/components/wizard/DeploymentStep.tsx, src/components/wizard/ReviewStep.tsx</files>
+  <action>
+**DeploymentStep.tsx** — Apply semantic token classes to all native form controls:
+
+1. Include-install section (lines 31-42): Replace the bare wrapper `<div>` with `<div className="flex flex-col gap-2 mb-4">`. Replace the bare `<label>` with `<label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">`. Add `className="accent-primary"` to the checkbox input. Remove the `{' '}` space before label text (gap-2 provides spacing).
+
+2. Config deployment path fieldset (lines 45-71): Add `className="mb-4"` to the `<fieldset>`. Replace `<legend>Config deployment path</legend>` with `<legend className="text-sm font-medium text-on-surface-container mb-2">Config deployment path</legend>`. Replace both `<label>` wrappers with `<label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">`. Add `className="accent-primary"` to both radio inputs. Remove `{' '}` spaces.
+
+3. Script targets fieldset (lines 74-91): Add `className="mb-4"` to the `<fieldset>`. Replace `<legend>Script targets</legend>` with `<legend className="text-sm font-medium text-on-surface-container mb-2">Script targets</legend>`. Replace both `<label>` wrappers with `<label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">`. Add `className="accent-primary"` to both checkbox inputs. Remove `{' '}` spaces.
+
+**ReviewStep.tsx** — Style security checkbox:
+
+1. Line 92-93: The checkbox inside the warning box. Add `className="accent-warning"` to the `<input type="checkbox">` to match the warning color scheme of its container. Use accent-warning (not accent-primary) since this checkbox lives in a warning-themed section and should match.
+
+If accent-warning does not resolve (Tailwind may not generate it), fall back to `accent-[var(--r2b-warning)]` using arbitrary value syntax.
+
+Do not change any onChange handlers, state logic, or dispatch calls. Only add className attributes.
+  </action>
+  <verify>
+    <automated>npm test -- --reporter=verbose 2>&1 | tail -20</automated>
+  </verify>
+  <done>DeploymentStep labels use text-on-surface, legends use text-on-surface-container with font-medium, all checkboxes/radios have accent-primary (or accent-warning for security checkbox). Full test suite passes.</done>
+</task>
+
+</tasks>
+
+<verification>
+1. `npm test` — full suite green, no regressions
+2. Visual browser check: toggle dark mode, verify all 4 step headings are readable white text
+3. Visual browser check: DeploymentStep controls are visible and properly styled in dark mode
+4. Visual browser check: ReviewStep security checkbox accent matches warning color
+</verification>
+
+<success_criteria>
+- All 4 wizard step h2 headings have `text-on-surface` class and are visible in dark mode
+- DeploymentStep labels, legends, checkboxes, and radios are styled with semantic tokens
+- ReviewStep security checkbox has themed accent color
+- Full test suite passes with zero regressions
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/12-dark-mode-visibility-fixes/12-01-SUMMARY.md`
+</output>

.planning/phases/12-dark-mode-visibility-fixes/12-02-PLAN.md

@@ -0,0 +1,101 @@
+---
+phase: 12-dark-mode-visibility-fixes
+plan: 02
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/components/ui/FieldRenderer.tsx
+autonomous: true
+requirements: [DARK-03]
+
+must_haves:
+  truths:
+    - "Select dropdowns in FieldRenderer are readable in dark mode (proper background and text color)"
+  artifacts:
+    - path: "src/components/ui/FieldRenderer.tsx"
+      provides: "select element with bg-surface-container and text-on-surface classes"
+      contains: "bg-surface-container"
+  key_links:
+    - from: "src/components/ui/FieldRenderer.tsx"
+      to: "src/index.css"
+      via: "semantic token classes on select element"
+      pattern: "bg-surface-container.*text-on-surface"
+---
+
+<objective>
+Fix FieldRenderer select element dark mode visibility by adding background and text color semantic tokens.
+
+Purpose: The `<select>` element in FieldRenderer has no background or text color class, causing browsers to apply a white system background in dark mode — making selected text invisible. Adding semantic token classes ensures the select matches the app's dark theme.
+
+Output: Select elements in FieldRenderer render with correct background and text color in both themes.
+</objective>
+
+<execution_context>
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/12-dark-mode-visibility-fixes/12-RESEARCH.md
+
+<interfaces>
+<!-- Current select className in FieldRenderer.tsx lines 69-71: -->
+```tsx
+className={[
+  'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus-visible:ring-2',
+  error ? 'border-error focus:ring-error/50' : 'border-outline focus:ring-primary/50',
+].join(' ')}
+```
+
+<!-- Anti-patterns: -->
+- Do NOT style <option> elements — browser-native, cannot be reliably styled cross-browser
+- Do NOT use dark: prefix — project uses .dark class cascade with semantic tokens
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Add dark mode classes to FieldRenderer select element</name>
+  <files>src/components/ui/FieldRenderer.tsx</files>
+  <action>
+In FieldRenderer.tsx, update the `<select>` element's className array (lines 69-71) to include `bg-surface-container text-on-surface` in the first string of the array:
+
+Change:
+```tsx
+'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus-visible:ring-2',
+```
+
+To:
+```tsx
+'w-full rounded-md border px-3 py-2 text-sm bg-surface-container text-on-surface focus:outline-none focus-visible:ring-2',
+```
+
+This is a single-line className addition. Do not modify the error/border conditional, the register spread, or the option elements. Do not attempt to style the `<option>` children.
+  </action>
+  <verify>
+    <automated>npm test -- --reporter=verbose 2>&1 | tail -20</automated>
+  </verify>
+  <done>FieldRenderer select element has bg-surface-container and text-on-surface classes. Full test suite passes.</done>
+</task>
+
+</tasks>
+
+<verification>
+1. `npm test` — full suite green, no regressions
+2. Visual browser check: select dropdowns in RemoteConfigStep show correct background and text in dark mode
+</verification>
+
+<success_criteria>
+- FieldRenderer select element includes `bg-surface-container text-on-surface` in its className
+- Select is readable in dark mode with proper contrast
+- Full test suite passes with zero regressions
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/12-dark-mode-visibility-fixes/12-02-SUMMARY.md`
+</output>