fix(design): the command palette's active row takes the menus' roving highlight, not an invisible bg-card; the Plex typeahead's hand copy of it goes (E28)
The palette row was ~1.07:1 on its glass (B3 names bg-card hovers a violation). ROVING_HIGHLIGHT is exported from AnchoredPopover for the listboxes that are not PopoverItems; a contract holds that no file paints the fill itself and every hand-built option row takes the recipe.
This commit is contained in:
@@ -96,7 +96,9 @@ type ItemRole = "menuitem" | "menuitemradio" | "menuitemcheckbox" | "option";
|
||||
// EXCEPTION: a menu whose SELECTED item paints its OWN row background (a solid bg-accent — the
|
||||
// table-filter options) passes `keepSelectedPaint`, so the highlight yields to ring-only there; a fill
|
||||
// would downgrade that solid paint to a 35% tint (the R9 concern, now scoped to just that idiom).
|
||||
const HIGHLIGHT_UNSELECTED =
|
||||
// Exported as ROVING_HIGHLIGHT for a listbox that is not a PopoverItem (the command palette, the Plex
|
||||
// typeahead): the row carries `data-active` and takes this, so the keyboard row looks the same everywhere.
|
||||
export const ROVING_HIGHLIGHT =
|
||||
"data-active:bg-accent/35 data-active:text-fg data-active:ring-1 data-active:ring-inset data-active:ring-accent/60";
|
||||
const HIGHLIGHT_SELECTED =
|
||||
"data-active:bg-accent/35 data-active:text-fg data-active:ring-2 data-active:ring-inset data-active:ring-accent/80";
|
||||
@@ -214,7 +216,7 @@ export function PopoverItem({
|
||||
? keepSelectedPaint
|
||||
? HIGHLIGHT_SELECTED_RING_ONLY
|
||||
: HIGHLIGHT_SELECTED
|
||||
: HIGHLIGHT_UNSELECTED
|
||||
: ROVING_HIGHLIGHT
|
||||
}${className ? ` ${className}` : ""}`}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user