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

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
12-dark-mode-visibility-fixes	01	execute	1		src/components/wizard/BackendSelectionStep.tsx src/components/wizard/RemoteConfigStep.tsx src/components/wizard/DeploymentStep.tsx src/components/wizard/ReviewStep.tsx	true	DARK-01 DARK-02	truths artifacts key_links 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 path provides contains src/components/wizard/BackendSelectionStep.tsx h2 with text-on-surface class text-on-surface path provides contains src/components/wizard/RemoteConfigStep.tsx h2 with text-on-surface class text-on-surface path provides contains src/components/wizard/DeploymentStep.tsx h2 with text-on-surface, styled legends/labels/controls text-on-surface path provides contains src/components/wizard/ReviewStep.tsx h2 with text-on-surface, accent-color on checkbox text-on-surface from to via pattern all step components src/index.css semantic token classes 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.

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

@.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 elements — browser-native, cannot be reliably styled
• Do NOT modify TextFieldMD3 input background — bg-transparent is intentional

Task 1: Add semantic token classes to all step h2 headings src/components/wizard/BackendSelectionStep.tsx, src/components/wizard/RemoteConfigStep.tsx, src/components/wizard/DeploymentStep.tsx, src/components/wizard/ReviewStep.tsx In each of the 4 step components, replace the bare `

` 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. npm test -- --reporter=verbose 2>&1 | tail -20 All 4 step h2 elements have className="text-2xl font-bold text-on-surface mb-2". Full test suite passes with no regressions.

Task 2: Style DeploymentStep form controls and ReviewStep checkbox src/components/wizard/DeploymentStep.tsx, src/components/wizard/ReviewStep.tsx **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. npm test -- --reporter=verbose 2>&1 | tail -20 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.

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

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

After completion, create `.planning/phases/12-dark-mode-visibility-fixes/12-01-SUMMARY.md`