Light mode for remaining panels, batch B (3/3)

[jackgranatowski]

Third and final part of the light-mode rollout. Stack: #506 (1/3) → #507 (2/3) → 3/3 (this PR). Based on claude/studio-light-mode-2-inputs-panels-a — merge #506 and #507 first; this PR's diff will shrink to just its own files once those land.

Summary

Applies the theme.svelte.ts system to the remaining domain panels: LayoutPanel, MacrosPanel, MiscPanel, MotionPanel, ShadowsPanel, SpacingPanel, ThemesPanel, TypographyPanel, WcagPanel.

Once this merges, every panel and the whole Studio chrome supports light mode — this closes out the rollout that #500 originally proposed as one large PR.

Review-bot fix folded in

• LayoutPanel: two <select> controls hardcoded their <option> background to the dark-mode hex color regardless of theme. Native <option> elements don't support Tailwind's dark: variant via class, so the background is now derived from themeState.value at render time instead.

Testing

• npx svelte-check — 0 errors
• npx vitest run — 113/113 passing
• Confirmed the 3-way split reconstitutes the exact same final diff as the original combined commit (git diff between the two is empty).

---

Generated by Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d656df0e-60a1-4d76-b2a6-6073ff439aa3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/studio-light-mode-3-panels-b

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[qodo-code-review]

PR Summary by Qodo

Finish light-mode styling for remaining configurator panels

✨ Enhancement 🐞 Bug fix 🕐 40+ Minutes

AI Description

• Apply theme-aware Tailwind styling to the remaining Studio domain panels.
• Fix LayoutPanel  backgrounds to render correctly in light mode.
• Ensure WCAG contrast UI badges and copy remain readable across themes.

Diagram

graph TD
  TS["themeState (chrome)"] --> LP["LayoutPanel"] --> OB["optionBg inline style"]
  TS --> MP["MacrosPanel"] --> TW["Tailwind light/dark classes"]
  TS --> MiP["MiscPanel"] --> TW
  TS --> MoP["MotionPanel"] --> TW
  TS --> ShP["ShadowsPanel"] --> TW
  TS --> SP["SpacingPanel"] --> TW
  TS --> ThP["ThemesPanel"] --> TW
  TS --> TyP["TypographyPanel"] --> TW
  TS --> WP["WcagPanel"] --> TW

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Introduce a shared themed component

• ➕ Eliminates repeated styling across panels
• ➕ Central place to handle native styling quirks
• ➖ More invasive refactor across many panels
• ➖ Adds component abstraction overhead for otherwise simple controls

2. CSS variables for semantic colors instead of Tailwind variants

• ➕ Less repetitive class churn (swap variables per theme)
• ➕ Avoids native dark: limitations if variables are applied inline
• ➖ Requires establishing/maintaining a variable palette contract
• ➖ Harder to reason about in a Tailwind-first codebase

Recommendation: Current approach is the right incremental finish for the rollout: keep panels on Tailwind light/dark variants, and use themeState-derived inline background only where native elements (e.g., ) require it. A shared abstraction could be a follow-up if more native-select styling edge cases appear.

Files changed (9) +372 / -367

Enhancement (8) +310 / -310

MacrosPanel.svelteLight-mode styling for macro token previews and controls +41/-41

Light-mode styling for macro token previews and controls

• Adjusts descriptive copy, preview containers, and control foreground/background colors to remain readable in light mode while preserving dark-mode styling via dark: classes.

configurator/src/components/panels/MacrosPanel.svelte

MiscPanel.svelteTheme-aware styling for miscellaneous token sections +73/-73

Theme-aware styling for miscellaneous token sections

• Converts section dividers, preview surfaces, and control colors to light/dark variants. Ensures interactive states (reset links, selected buttons) have appropriate contrast in light mode.

configurator/src/components/panels/MiscPanel.svelte

MotionPanel.svelteLight-mode styling for motion controls and demos +36/-36

Light-mode styling for motion controls and demos

• Updates toggle backgrounds, preview panels, and helper text colors to support light mode. Keeps the existing motion demo behavior intact while improving contrast for labels and inputs.

configurator/src/components/panels/MotionPanel.svelte

ShadowsPanel.svelteTheme-aware shadow previews and glow UI +18/-18

Theme-aware shadow previews and glow UI

• Adjusts shadow preview tiles and glow controls to render correctly on light backgrounds (including the tile fill and borders). Updates helper copy and dividers to match the light-mode palette.

configurator/src/components/panels/ShadowsPanel.svelte

SpacingPanel.svelteLight-mode styling for spacing scale previews and advanced section +8/-8

Light-mode styling for spacing scale previews and advanced section

• Updates scale preview container and labels for light-mode readability and consistent borders/dividers. Advanced toggle styling now matches the themed chrome conventions.

configurator/src/components/panels/SpacingPanel.svelte

ThemesPanel.svelteLight-mode styling for theme save/apply/delete UI +18/-18

Light-mode styling for theme save/apply/delete UI

• Makes theme cards, inputs, and action buttons readable in light mode by swapping foreground, border, and background classes. Preserves active theme highlighting while adjusting icon/text colors for contrast.

configurator/src/components/panels/ThemesPanel.svelte

TypographyPanel.svelteLight-mode styling for typography selectors, previews, and advanced controls +86/-86

Light-mode styling for typography selectors, previews, and advanced controls

• Updates select/input backgrounds, selected button states, and preview text colors to work in light mode. Keeps the existing typography logic unchanged while improving contrast across the panel.

configurator/src/components/panels/TypographyPanel.svelte

WcagPanel.svelteMake WCAG contrast checker badges readable in light mode +30/-30

Make WCAG contrast checker badges readable in light mode

• Adjusts WCAG level badge text colors (AAA/AA/AA-L/Fail) to include light-mode foregrounds while retaining dark-mode variants. Updates contrast checker UI containers and status rows to use theme-aware classes.

configurator/src/components/panels/WcagPanel.svelte

Bug fix (1) +62 / -57

LayoutPanel.svelteMake LayoutPanel fully theme-aware + fix native <option> backgrounds +62/-57

Make LayoutPanel fully theme-aware + fix native <option> backgrounds

• Updates LayoutPanel preview surfaces, borders, and copy to use light/dark variants. Fixes a light-mode bug by deriving native <option> background color from themeState and applying it via inline style.

configurator/src/components/panels/LayoutPanel.svelte

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 11 rules

1. Hardcoded option background ✓ Resolved 🐞 Bug ≡ Correctness

Description

MotionPanel, TypographyPanel, and WcagPanel update <select> styling for light mode (e.g.
text-slate-800) but leave <option> backgrounds hardcoded to #16161e, which can produce
low-contrast/unreadable dropdown items in light theme. LayoutPanel already fixes this by deriving
the option background from themeState, but the other panels did not adopt the same approach.

Code

configurator/src/components/panels/MotionPanel.svelte[R137-143]

          value={demoEase}
          aria-label="Preview easing"
          onchange={(e) => { demoEase = (e.target as HTMLSelectElement).value; }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
        >
          {#each EASINGS as e (e.token)}
            <option value={e.token} style="background:#16161e;">{e.label}</option>

Relevance

⭐⭐⭐ High

Prior merged fixes favor theme-aware styling; LayoutPanel already derives option background via
themeState—likely apply same pattern elsewhere.

PR-#460
PR-#438
PR-#463

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The chrome theme state is explicitly only 'light'|'dark', and LayoutPanel already uses it to theme
<option> backgrounds. However, MotionPanel/TypographyPanel/WcagPanel still hardcode dark option
backgrounds while their <select> controls are now styled for light mode (dark text), creating a
mismatch that can harm readability.

configurator/src/lib/theme.svelte.ts[23-38]
configurator/src/components/panels/LayoutPanel.svelte[1-9]
configurator/src/components/panels/LayoutPanel.svelte[441-460]
configurator/src/components/panels/MotionPanel.svelte[136-154]
configurator/src/components/panels/TypographyPanel.svelte[269-303]
configurator/src/components/panels/WcagPanel.svelte[179-191]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Several panels render light-mode `<select>` controls (light background + dark text) while their `<option>` elements still force `style="background:#16161e;"`, which can make the dropdown list hard to read in light mode.

## Issue Context
`LayoutPanel` already contains a working pattern: derive an `optionBg` from `themeState.value` and use it in `<option style={...}>`.

## Fix Focus Areas
- configurator/src/components/panels/MotionPanel.svelte[136-154]
- configurator/src/components/panels/TypographyPanel.svelte[269-303]
- configurator/src/components/panels/WcagPanel.svelte[179-191]
- configurator/src/components/panels/LayoutPanel.svelte[1-9]
- configurator/src/components/panels/LayoutPanel.svelte[441-460]

## What to change
1. In each affected panel, import `themeState` and add a derived `optionBg` (and optionally an `optionFg` for consistent readability):
  - `optionBg = themeState.value === 'dark' ? '#16161e' : '#ffffff'`
  - (optional) `optionFg = themeState.value === 'dark' ? '#e2e8f0' : '#0f172a'`
2. Replace `style="background:#16161e;"` with `style={`background:${optionBg};`}` (and optionally `color:${optionFg};`).
3. For TypographyPanel options that also set `font-family:inherit`, keep that style and append the theme-derived background (and optional color).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[jackgranatowski]

Fixed in 367a37b — the same hardcoded <option> background bug LayoutPanel had was also present in MotionPanel, TypographyPanel, and WcagPanel (their <select> got light-mode text/borders but every <option> kept background:#16161e, unreadable in light mode since <option> doesn't support dark: variants). Applied the identical themeState-derived optionBg pattern to all three. Re-verified: svelte-check 0 errors, vitest run 113/113 passing, and no remaining background:#16161e occurrences anywhere in components/panels/.

---

Generated by Claude Code