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:
2026-09-06 12:26:38 -04:00
parent 4786973558
commit 2d12372ac4
+22
View File
@@ -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: {