docs(08): create phase plan - 2 plans, 2 waves

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 18:07:29 +02:00
parent 0ef71cdcab
commit bee3bad93a
3 changed files with 492 additions and 2 deletions
@@ -0,0 +1,262 @@
+---
+phase: 08-theme-foundation
+plan: 02
+type: execute
+wave: 2
+depends_on:
+  - "08-01"
+files_modified:
+  - src/components/ui/BackendCard.tsx
+  - src/components/ui/FieldRenderer.tsx
+  - src/components/ui/PasswordField.tsx
+  - src/components/wizard/AzureAuthToggle.tsx
+  - src/components/wizard/SftpAuthToggle.tsx
+  - src/components/wizard/DeploymentStep.tsx
+  - src/components/wizard/OutputBlock.tsx
+  - src/components/wizard/RemoteConfigStep.tsx
+  - src/components/wizard/ReviewStep.tsx
+autonomous: false
+requirements:
+  - THEME-01
+  - THEME-02
+
+must_haves:
+  truths:
+    - "No hardcoded Tailwind color classes (gray-*, blue-*, red-*, green-*, yellow-*) remain in any of the 10 migrated files (App.tsx already done in Plan 01)"
+    - "All components render correctly using semantic token classes (bg-surface, text-on-surface, bg-primary, etc.)"
+    - "Components look correct in both light and dark mode without any dark: prefixes"
+    - "All existing tests pass without modification (tests use semantic queries, not class selectors)"
+  artifacts:
+    - path: "src/components/ui/BackendCard.tsx"
+      provides: "Migrated backend selection card"
+      min_lines: 15
+    - path: "src/components/ui/FieldRenderer.tsx"
+      provides: "Migrated form field renderer"
+      min_lines: 50
+    - path: "src/components/ui/PasswordField.tsx"
+      provides: "Migrated password input"
+      min_lines: 30
+    - path: "src/components/wizard/AzureAuthToggle.tsx"
+      provides: "Migrated Azure auth method toggle"
+      min_lines: 20
+    - path: "src/components/wizard/SftpAuthToggle.tsx"
+      provides: "Migrated SFTP auth method toggle"
+      min_lines: 25
+    - path: "src/components/wizard/DeploymentStep.tsx"
+      provides: "Migrated deployment step"
+      min_lines: 50
+    - path: "src/components/wizard/OutputBlock.tsx"
+      provides: "Migrated code output block"
+      min_lines: 20
+    - path: "src/components/wizard/RemoteConfigStep.tsx"
+      provides: "Migrated remote config step"
+      min_lines: 50
+    - path: "src/components/wizard/ReviewStep.tsx"
+      provides: "Migrated review step with success/warning tokens"
+      min_lines: 60
+  key_links:
+    - from: "src/index.css"
+      to: "all 9 migrated component files"
+      via: "CSS variable cascade through Tailwind utility classes"
+      pattern: "bg-surface|text-on-surface|border-outline|bg-primary|text-on-primary"
+---
+
+<objective>
+Migrate all 63 hardcoded Tailwind color classes across 9 component files to semantic MD3 token classes.
+
+Purpose: Complete THEME-01 by eliminating all hardcoded color references. After this plan, the entire UI responds to theme changes via the CSS variable cascade established in Plan 01.
+Output: 9 migrated component files with zero hardcoded color classes, all tests passing.
+</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/08-theme-foundation/08-CONTEXT.md
+@.planning/phases/08-theme-foundation/08-RESEARCH.md
+@.planning/phases/08-theme-foundation/08-01-SUMMARY.md
+
+<interfaces>
+<!-- Token utility classes available after Plan 01 (from @theme in src/index.css): -->
+<!-- bg-surface, text-on-surface, bg-surface-variant, text-on-surface-variant -->
+<!-- bg-surface-container, text-on-surface-container -->
+<!-- bg-primary, text-on-primary, text-primary, border-primary -->
+<!-- border-outline, bg-error, text-error, text-on-error -->
+<!-- bg-success, text-success, text-on-success -->
+<!-- bg-warning, text-warning, text-on-warning -->
+<!-- Opacity modifiers work: text-on-surface-container/70, border-primary/30, etc. -->
+</interfaces>
+
+<!-- Migration mapping reference (from 08-RESEARCH.md Pattern 4): -->
+<!--
+bg-gray-50          -> bg-surface
+bg-white            -> bg-surface-container
+bg-gray-900         -> bg-surface-variant        (code blocks)
+text-gray-900       -> text-on-surface
+text-gray-700       -> text-on-surface-container
+text-gray-500       -> text-on-surface-container/70
+text-gray-400       -> text-on-surface-container/50
+text-gray-100       -> text-on-surface-variant
+border-gray-300     -> border-outline
+border-gray-200     -> border-outline
+hover:bg-gray-50    -> hover:bg-surface
+hover:border-blue-400 -> hover:border-primary
+bg-blue-600         -> bg-primary
+bg-blue-50          -> bg-primary/10
+text-white (on blue bg) -> text-on-primary
+text-blue-600/500/700 -> text-primary
+hover:bg-blue-700   -> hover:bg-primary
+border-blue-600     -> border-primary
+border-blue-200     -> border-primary/30
+text-blue-700 bg-blue-50 border-blue-200 -> text-primary bg-primary/10 border-primary/30
+border-red-500      -> border-error
+focus:ring-red-300  -> focus:ring-error/50
+text-red-600        -> text-error
+text-red-500        -> text-error
+focus:ring-blue-300 -> focus:ring-primary/50
+text-green-700 bg-green-50 -> text-success bg-on-success (or bg-success/10)
+bg-yellow-50 border-yellow-300 text-yellow-800/900 -> bg-on-warning border-warning text-warning
+-->
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Migrate UI primitives (BackendCard, FieldRenderer, PasswordField)</name>
+  <files>src/components/ui/BackendCard.tsx, src/components/ui/FieldRenderer.tsx, src/components/ui/PasswordField.tsx</files>
+  <action>
+Migrate all hardcoded color classes to semantic tokens. This is mechanical find-and-replace following the mapping. Do NOT change any DOM structure, only className strings.
+
+**BackendCard.tsx** (5 occurrences):
+- `border-blue-600 bg-blue-50` (selected) -> `border-primary bg-primary/10`
+- `border-gray-200 bg-white hover:border-blue-400 hover:bg-gray-50` (unselected) -> `border-outline bg-surface-container hover:border-primary hover:bg-surface`
+- `text-gray-900` -> `text-on-surface`
+- `text-gray-500` -> `text-on-surface-container/70`
+
+**FieldRenderer.tsx** (17 occurrences):
+- `text-gray-700` (labels) -> `text-on-surface-container`
+- `text-red-500` (required asterisk) -> `text-error`
+- `text-blue-500 hover:text-blue-700` (toggle link) -> `text-primary hover:text-primary`
+- `text-blue-700 bg-blue-50 border border-blue-200` (tooltip/info) -> `text-primary bg-primary/10 border border-primary/30`
+- `border-red-500 focus:ring-red-300` (error state) -> `border-error focus:ring-error/50`
+- `border-gray-300 focus:ring-blue-300` (normal state) -> `border-outline focus:ring-primary/50`
+- `text-gray-500` (helpText) -> `text-on-surface-container/70`
+- `text-red-600` (error message) -> `text-error`
+- Apply the same mapping to both the text-input branch and the select branch (they have identical color patterns)
+
+**PasswordField.tsx** (8 occurrences):
+- `text-gray-700` -> `text-on-surface-container`
+- `text-blue-500 hover:text-blue-700` -> `text-primary hover:text-primary`
+- `text-blue-700 bg-blue-50 border border-blue-200` -> `text-primary bg-primary/10 border border-primary/30`
+- `border-red-500 focus:ring-red-300` -> `border-error focus:ring-error/50`
+- `border-gray-300 focus:ring-blue-300` -> `border-outline focus:ring-primary/50`
+- `text-gray-400 hover:text-gray-700` (eye icon) -> `text-on-surface-container/50 hover:text-on-surface-container`
+- `text-gray-500` (helpText) -> `text-on-surface-container/70`
+- `text-red-600` (error message) -> `text-error`
+
+Run `npm test` after each file to catch any regressions immediately.
+  </action>
+  <verify>
+    <automated>cd C:/Users/SebastienQUEROL/Documents/projets/Ready2Blob && npm test 2>&1 | tail -20</automated>
+  </verify>
+  <done>BackendCard.tsx has 0 hardcoded color classes. FieldRenderer.tsx has 0 hardcoded color classes. PasswordField.tsx has 0 hardcoded color classes. All tests pass.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Migrate wizard components (toggles, steps, output block)</name>
+  <files>src/components/wizard/AzureAuthToggle.tsx, src/components/wizard/SftpAuthToggle.tsx, src/components/wizard/DeploymentStep.tsx, src/components/wizard/OutputBlock.tsx, src/components/wizard/RemoteConfigStep.tsx, src/components/wizard/ReviewStep.tsx</files>
+  <action>
+Continue the mechanical migration for all wizard components. Do NOT change DOM structure, only className strings.
+
+**AzureAuthToggle.tsx** (7 occurrences):
+- `border-gray-300` -> `border-outline`
+- `bg-blue-600 text-white` (active tab) -> `bg-primary text-on-primary`
+- `bg-white text-gray-700 hover:bg-gray-50` (inactive tab) -> `bg-surface-container text-on-surface-container hover:bg-surface`
+
+**SftpAuthToggle.tsx** (10 occurrences):
+- `text-gray-700` (label) -> `text-on-surface-container`
+- `text-blue-500 hover:text-blue-700` (toggle link) -> `text-primary hover:text-primary`
+- `text-blue-700 bg-blue-50 border border-blue-200` (info) -> `text-primary bg-primary/10 border border-primary/30`
+- `border-gray-300` -> `border-outline`
+- `bg-blue-600 text-white` (active) -> `bg-primary text-on-primary`
+- `bg-white text-gray-700 hover:bg-gray-50` (inactive) -> `bg-surface-container text-on-surface-container hover:bg-surface`
+
+**DeploymentStep.tsx** (2 occurrences):
+- `border border-gray-300 ... hover:bg-gray-50` (Back button) -> `border border-outline ... hover:bg-surface`
+- `bg-blue-600 text-white ... hover:bg-blue-700` (Next button) -> `bg-primary text-on-primary ... hover:bg-primary`
+
+**OutputBlock.tsx** (4 occurrences):
+- `text-gray-700` (label) -> `text-on-surface-container`
+- `border-gray-300` (action buttons, 2 occurrences) -> `border-outline`
+- `bg-gray-900 text-gray-100` (code pre) -> `bg-surface-variant text-on-surface-variant`
+
+**RemoteConfigStep.tsx** (2 occurrences):
+- `border border-gray-300 ... hover:bg-gray-50` (Back button) -> `border border-outline ... hover:bg-surface`
+- `bg-blue-600 text-white ... hover:bg-blue-700` (Next button) -> `bg-primary text-on-primary ... hover:bg-primary`
+
+**ReviewStep.tsx** (6 occurrences):
+- `text-green-700 bg-green-50` (client-side notice) -> `text-success bg-on-success`
+- `bg-yellow-50 border border-yellow-300` (security warning box) -> `bg-on-warning border border-warning`
+- `text-yellow-800` (warning title) -> `text-warning`
+- `text-yellow-900` (warning label) -> `text-warning`
+- `border border-gray-300 ... hover:bg-gray-50` (Back button) -> `border border-outline ... hover:bg-surface`
+- `bg-blue-600 text-white ... hover:bg-blue-700` (Download button) -> `bg-primary text-on-primary ... hover:bg-primary`
+
+After all files migrated, run verification grep to confirm zero hardcoded color classes remain.
+  </action>
+  <verify>
+    <automated>cd C:/Users/SebastienQUEROL/Documents/projets/Ready2Blob && npm test 2>&1 | tail -20 && echo "---GREP CHECK---" && grep -rn "text-gray-\|bg-gray-\|border-gray-\|bg-blue-\|text-blue-\|border-blue-\|text-white\|bg-white\|text-red-\|border-red-\|text-green-\|bg-green-\|bg-yellow-\|text-yellow-\|border-yellow-\|hover:bg-gray-\|hover:bg-blue-\|hover:border-blue-\|focus:ring-red-\|focus:ring-blue-" src/components/ src/App.tsx 2>/dev/null; echo "Exit: $?"</automated>
+  </verify>
+  <done>All 9 component files migrated. Grep for hardcoded color classes in src/components/ and src/App.tsx returns 0 matches. All existing tests pass without modification.</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <name>Task 3: Visual verification of theme system across all wizard steps</name>
+  <files>none</files>
+  <action>
+Present the completed theme system for user visual verification. Start the dev server if not already running.
+  </action>
+  <what-built>Complete MD3 token system with dark mode toggle and all 63 hardcoded color classes migrated to semantic tokens across 10 files.</what-built>
+  <how-to-verify>
+    1. Run `npm run dev` and open http://localhost:5173
+    2. Verify the app renders correctly in light mode (indigo primary accents, gray surfaces)
+    3. Click "Dark" in the theme toggle (top-right, next to "Ready2Blob" title) -- entire UI should switch to dark palette instantly
+    4. Click "Light" -- UI returns to light palette
+    5. Click "System" -- follows your OS preference
+    6. With "Dark" selected, hard-reload the page (Ctrl+Shift+R) -- should load directly in dark mode with NO flash of light theme
+    7. Navigate through all 4 wizard steps checking:
+       - Backend cards have correct border/background colors in both themes
+       - Form inputs have visible borders and labels in both themes
+       - Code output blocks (ReviewStep) are readable in both themes
+       - Warning/success notices in ReviewStep are visible in both themes
+       - All buttons (Back/Next/Download) are visible and styled in both themes
+  </how-to-verify>
+  <verify>User confirms visual correctness</verify>
+  <done>User approves visual appearance of both light and dark themes across all wizard steps.</done>
+  <resume-signal>Type "approved" or describe any visual issues</resume-signal>
+</task>
+
+</tasks>
+
+<verification>
+1. `npm test` -- all tests pass (existing + ThemeToggle tests from Plan 01)
+2. `grep -rn "text-gray-\|bg-gray-\|border-gray-\|bg-blue-\|text-blue-\|border-blue-\|text-white\|bg-white\|text-red-\|border-red-\|text-green-\|bg-green-\|bg-yellow-\|text-yellow-\|border-yellow-" src/components/ src/App.tsx` returns 0 matches
+3. `npx vite build` completes without errors
+</verification>
+
+<success_criteria>
+- Zero hardcoded Tailwind color classes remain in src/components/ and src/App.tsx
+- All 9 component files use only semantic token classes (bg-surface, text-on-surface, bg-primary, etc.)
+- No `dark:` utility prefixes used anywhere -- the CSS variable cascade handles both themes
+- All existing tests pass without modification
+- Visual verification confirms both light and dark mode render correctly across all wizard steps
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/08-theme-foundation/08-02-SUMMARY.md`
+</output>