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