kawaandClaude Opus 4.6
a193a183f8
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
102 lines
3.5 KiB
Markdown
102 lines
3.5 KiB
Markdown
---
|
|
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>
|