Fix Appearance picker focus and selection states

[shaunandrews]

The recent addition of Appearance settings for light/dark mode introduced new UI in our app settings. I noticed that the focus state is a little awkward.

Here's how it looks with Light selected and in focus:

And here's with Light selected and Dark in focus:

This PR aims to unify the ring for both selection and focus states, with the color and font-weight to help distinguish between selected and focused.

Selected, and focused:

Selected, but unfocused:

Light mode, both selected (Light) and focused (Dark):

How AI was used in this PR

Claude helped implement the CSS changes. All changes were reviewed and iterated on interactively.

Proposed Changes

• Move focus ring from the button container to the illustration, matching the selection ring placement
• Use frame-text color for the selection ring to distinguish it from the blue focus ring (frame-theme)
• Bold the label text when selected instead of changing its color
• Turn label text blue (frame-theme) on focus
• Use group-focus instead of group-focus-visible so clicking an option shows both focus and selection states (consistent with standard input behavior)

Testing Instructions

• Open Settings → Appearance
• Click each theme option — should see a blue ring on the illustration and blue label (focus) plus a text-colored ring and bold label (selected)
• Tab between options with keyboard — focus ring (blue) should appear on the illustration, not the outer container
• Verify in both light and dark modes

🤖 Generated with Claude Code

[wpmobilebot]

📊 Performance Test Results

Comparing 88caab0 vs trunk

app-size

Metric	trunk	88caab0	Diff	Change
App Size (Mac)	1273.38 MB	1273.38 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	88caab0	Diff	Change
load	1910 ms	1846 ms	64 ms	🟢 -3.4%

site-startup

Metric	trunk	88caab0	Diff	Change
siteCreation	8183 ms	8172 ms	11 ms	⚪ 0.0%
siteStartup	4840 ms	4848 ms	+8 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[sejas]

I tested the selector states and they look great. Thanks!

color-scheme-selection.mp4

[katinthehatsite]

The changes look good to me 👍 One thing is that I am finding the selected text slightly too bold e.g Light, Dark etc.

Do you think the boldness could be slightly adjusted?

[shaunandrews]

Nice catch! I agree. We should be using medium instead of bold.

Pushing a fix.

[katinthehatsite]

Thanks for changing the labels, I think it looks better now 😍

I will retrigger the failing tests as they seem to be unrelated.