Ready2Blob/.planning/phases/08-theme-foundation/08-02-PLAN.md at master

Files

T

kawaandClaude Opus 4.6 2ea0a1faaf fix(08): revise plans based on checker feedback

- 08-01 Task 2: change type="auto" tdd="true" to type="tdd" (schema consistency)
- 08-02 Task 2: fix inverted on-role tokens in ReviewStep migration
  bg-on-success -> bg-success/10, bg-on-warning -> bg-warning/10
- 08-02 mapping comment: same fix for consistency

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

2026-03-31 18:11:02 +02:00

14 KiB

Raw Permalink Blame History

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

phase

plan

type

wave

depends_on

files_modified

autonomous

requirements

must_haves

08-theme-foundation

execute

08-01

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

false

THEME-01

THEME-02

truths

artifacts

key_links

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)

path	provides	min_lines
src/components/ui/BackendCard.tsx	Migrated backend selection card	15

path	provides	min_lines
src/components/ui/FieldRenderer.tsx	Migrated form field renderer	50

path	provides	min_lines
src/components/ui/PasswordField.tsx	Migrated password input	30

path	provides	min_lines
src/components/wizard/AzureAuthToggle.tsx	Migrated Azure auth method toggle	20

path	provides	min_lines
src/components/wizard/SftpAuthToggle.tsx	Migrated SFTP auth method toggle	25

path	provides	min_lines
src/components/wizard/DeploymentStep.tsx	Migrated deployment step	50

path	provides	min_lines
src/components/wizard/OutputBlock.tsx	Migrated code output block	20

path	provides	min_lines
src/components/wizard/RemoteConfigStep.tsx	Migrated remote config step	50

path	provides	min_lines
src/components/wizard/ReviewStep.tsx	Migrated review step with success/warning tokens	60

from	to	via	pattern
src/index.css	all 9 migrated component files	CSS variable cascade through Tailwind utility classes	bg-surface\|text-on-surface\|border-outline\|bg-primary\|text-on-primary

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.

<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/08-theme-foundation/08-CONTEXT.md @.planning/phases/08-theme-foundation/08-RESEARCH.md @.planning/phases/08-theme-foundation/08-01-SUMMARY.md Task 1: Migrate UI primitives (BackendCard, FieldRenderer, PasswordField) src/components/ui/BackendCard.tsx, src/components/ui/FieldRenderer.tsx, src/components/ui/PasswordField.tsx 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. cd C:/Users/SebastienQUEROL/Documents/projets/Ready2Blob && npm test 2>&1 | tail -20 BackendCard.tsx has 0 hardcoded color classes. FieldRenderer.tsx has 0 hardcoded color classes. PasswordField.tsx has 0 hardcoded color classes. All tests pass.

Task 2: Migrate wizard components (toggles, steps, output block) 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 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-success/10
bg-yellow-50 border border-yellow-300 (security warning box) -> bg-warning/10 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

Task 3: Visual verification of theme system across all wizard steps none Present the completed theme system for user visual verification. Start the dev server if not already running. Complete MD3 token system with dark mode toggle and all 63 hardcoded color classes migrated to semantic tokens across 10 files. 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 User confirms visual correctness User approves visual appearance of both light and dark themes across all wizard steps. Type "approved" or describe any visual issues 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

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

After completion, create `.planning/phases/08-theme-foundation/08-02-SUMMARY.md`

14 KiB Raw Permalink Blame History

14 KiB

Raw Permalink Blame History