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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 14:00:04 +02:00
parent 94f70deb3d
commit a193a183f8
4 changed files with 288 additions and 4 deletions
@@ -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>