fix: auto-clear dropdown unreadable in dark mode

var(--bg-surface-variant) and var(--border-surface-variant) are not
defined in Cinny's vanilla-extract theme, so the select element renders
with a transparent/white background. Also native <option> elements ignore
most inherited CSS.

Fix: use folds color tokens (color.SurfaceVariant.*) for background,
border, and text color; add colorScheme:'dark' so the browser renders
the OS popup with dark styling; apply background+color to <option>
elements as a belt-and-suspenders fallback for browsers that honour it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-03 15:50:05 -04:00
parent ba659bc157
commit 3eabc8f4dd
+13 -4
View File
@@ -22,6 +22,7 @@ import {
Dialog, Dialog,
Header, Header,
config, config,
color,
Spinner, Spinner,
PopOut, PopOut,
RectCords, RectCords,
@@ -522,10 +523,11 @@ function ProfileStatus() {
onChange={(e) => setClearAfter(e.target.value)} onChange={(e) => setClearAfter(e.target.value)}
aria-label="Auto-clear status after" aria-label="Auto-clear status after"
style={{ style={{
background: 'var(--bg-surface-variant)', background: color.SurfaceVariant.Container,
border: `1px solid var(--border-surface-variant)`, border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
borderRadius: config.radii.R300, borderRadius: config.radii.R300,
color: 'inherit', color: color.SurfaceVariant.OnContainer,
colorScheme: 'dark',
fontSize: '0.82rem', fontSize: '0.82rem',
padding: `${config.space.S100} ${config.space.S200}`, padding: `${config.space.S100} ${config.space.S200}`,
cursor: 'pointer', cursor: 'pointer',
@@ -533,7 +535,14 @@ function ProfileStatus() {
}} }}
> >
{CLEAR_AFTER_OPTIONS.map((opt) => ( {CLEAR_AFTER_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}> <option
key={opt.value}
value={opt.value}
style={{
background: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
}}
>
{opt.label} {opt.label}
</option> </option>
))} ))}