style(theme): brighten menu item hover to match select options
The subtle menu item highlight (bg.emphasized/60) is near-invisible on dark surfaces, same issue the select dropdowns had. New v2MenuRecipe overrides it to gray.200 / whiteAlpha.300, so right-click, user and settings menus share the select-option hover treatment.
This commit is contained in:
@@ -10,6 +10,7 @@ import {
|
||||
headingRecipe,
|
||||
inputRecipe,
|
||||
linkRecipe,
|
||||
menuSlotRecipe,
|
||||
nativeSelectSlotRecipe,
|
||||
numberInputSlotRecipe,
|
||||
switchSlotRecipe,
|
||||
@@ -104,6 +105,26 @@ const baseNativeSelect: any = nativeSelectSlotRecipe
|
||||
const baseSwitch: any = switchSlotRecipe
|
||||
const baseTag: any = tagSlotRecipe
|
||||
const baseLink: any = linkRecipe
|
||||
const baseMenu: any = menuSlotRecipe
|
||||
|
||||
// Menu item hover uses bg.emphasized/60 — near-invisible on dark surfaces.
|
||||
// Brighten to match the select-option hover (gray.200 / whiteAlpha.300).
|
||||
const v2MenuRecipe = defineSlotRecipe({
|
||||
...baseMenu,
|
||||
variants: {
|
||||
...baseMenu.variants,
|
||||
variant: {
|
||||
...baseMenu.variants?.variant,
|
||||
subtle: {
|
||||
...baseMenu.variants?.variant?.subtle,
|
||||
item: {
|
||||
...baseMenu.variants?.variant?.subtle?.item,
|
||||
_highlighted: { bg: { base: 'gray.200', _dark: 'whiteAlpha.300' } },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// v3 link underlines render at 20% opacity (currentColor/20) — too dim
|
||||
// against dark surfaces. Brighten universally.
|
||||
@@ -287,6 +308,7 @@ const config = defineConfig({
|
||||
nativeSelect: v2NativeSelectRecipe,
|
||||
switch: v2SwitchRecipe,
|
||||
tag: v2TagRecipe,
|
||||
menu: v2MenuRecipe,
|
||||
},
|
||||
tokens: {
|
||||
colors: {
|
||||
|
||||
Reference in New Issue
Block a user