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,
|
headingRecipe,
|
||||||
inputRecipe,
|
inputRecipe,
|
||||||
linkRecipe,
|
linkRecipe,
|
||||||
|
menuSlotRecipe,
|
||||||
nativeSelectSlotRecipe,
|
nativeSelectSlotRecipe,
|
||||||
numberInputSlotRecipe,
|
numberInputSlotRecipe,
|
||||||
switchSlotRecipe,
|
switchSlotRecipe,
|
||||||
@@ -104,6 +105,26 @@ const baseNativeSelect: any = nativeSelectSlotRecipe
|
|||||||
const baseSwitch: any = switchSlotRecipe
|
const baseSwitch: any = switchSlotRecipe
|
||||||
const baseTag: any = tagSlotRecipe
|
const baseTag: any = tagSlotRecipe
|
||||||
const baseLink: any = linkRecipe
|
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
|
// v3 link underlines render at 20% opacity (currentColor/20) — too dim
|
||||||
// against dark surfaces. Brighten universally.
|
// against dark surfaces. Brighten universally.
|
||||||
@@ -287,6 +308,7 @@ const config = defineConfig({
|
|||||||
nativeSelect: v2NativeSelectRecipe,
|
nativeSelect: v2NativeSelectRecipe,
|
||||||
switch: v2SwitchRecipe,
|
switch: v2SwitchRecipe,
|
||||||
tag: v2TagRecipe,
|
tag: v2TagRecipe,
|
||||||
|
menu: v2MenuRecipe,
|
||||||
},
|
},
|
||||||
tokens: {
|
tokens: {
|
||||||
colors: {
|
colors: {
|
||||||
|
|||||||
Reference in New Issue
Block a user