fix(popover): stronger, centralized active-row highlight (UAT finding)
The roving-focus row in every popover menu was barely distinguishable from the menu surface — an accent fill at only 24%, and the recipe was copy-pasted across 5 consumers. Centralize it in PopoverItem (ACTIVE_HIGHLIGHT, applied to every item) and strengthen it: accent/35 fill + a 1px inset accent ring for a defined edge that reads across all 6 schemes in both themes. Consumers no longer carry the recipe. Uses the now-working `bg-accent/NN` / `ring-accent/NN` utilities (v4 does the opacity modifier via color-mix) instead of the old hand-written color-mix arbitrary value the v3 no-op forced. Verified in-browser: fill + inset ring render on the active item, dark and light.
This commit is contained in:
@@ -78,7 +78,7 @@ export default function LanguageSwitcher({
|
||||
setOpen(false);
|
||||
}}
|
||||
label={l.label}
|
||||
className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted outline-hidden transition hover:text-fg hover:bg-card data-active:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-active:text-fg"
|
||||
className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted outline-hidden transition hover:text-fg hover:bg-card"
|
||||
>
|
||||
<span>{l.label}</span>
|
||||
{l.code === value && <Check className="w-4 h-4 text-accent" />}
|
||||
|
||||
Reference in New Issue
Block a user