From 2d12372ac40fc2581f50684702cd625a19284312 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 6 Sep 2026 12:26:38 -0400
Subject: [PATCH] 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.
---
 src/styles/theme.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
index 784f77f..19d5e0c 100644
--- a/src/styles/theme.tsx
+++ b/src/styles/theme.tsx
@@ -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: {