Ready2Blob/.planning/phases/12-dark-mode-visibility-fixes/12-02-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	02	execute	1		src/components/ui/FieldRenderer.tsx	true	DARK-03	truths artifacts key_links Select dropdowns in FieldRenderer are readable in dark mode (proper background and text color) path provides contains src/components/ui/FieldRenderer.tsx select element with bg-surface-container and text-on-surface classes bg-surface-container from to via pattern src/components/ui/FieldRenderer.tsx src/index.css semantic token classes on select element bg-surface-container.*text-on-surface

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.

<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 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(' ')} ```

• Do NOT style elements — browser-native, cannot be reliably styled cross-browser
• Do NOT use dark: prefix — project uses .dark class cascade with semantic tokens

Task 1: Add dark mode classes to FieldRenderer select element src/components/ui/FieldRenderer.tsx In FieldRenderer.tsx, update the `` element's className array (lines 69-71) to include `bg-surface-container text-on-surface` in the first string of the array:

Change:

'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus-visible:ring-2',

To:

'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. npm test -- --reporter=verbose 2>&1 | tail -20 FieldRenderer select element has bg-surface-container and text-on-surface classes. Full test suite passes.

1. `npm test` — full suite green, no regressions 2. Visual browser check: select dropdowns in RemoteConfigStep show correct background and text in dark mode

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

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