Better dropdown select themeing

Author: charlesvien

apps/twig/src/renderer/components/ThemeWrapper.tsx

@@ -23,7 +23,7 @@ export function ThemeWrapper({ children }: { children: React.ReactNode }) {
   return (
     <Theme
       appearance={isDarkMode ? "dark" : "light"}
-      accentColor={isDarkMode ? "orange" : "yellow"}
+      accentColor="slate"
       grayColor="slate"
       panelBackground="solid"
       radius="none"

apps/twig/src/renderer/styles/globals.css

@@ -931,3 +931,27 @@ button,
 [role="button"] {
   cursor: pointer;
 }
+
+/* Custom hover states for Select/Menu items - slightly lighter than background */
+.rt-SelectItem[data-highlighted],
+.rt-BaseMenuItem[data-highlighted] {
+  background-color: var(--gray-4) !important;
+}
+
+.dark .rt-SelectItem[data-highlighted],
+.dark .rt-BaseMenuItem[data-highlighted],
+.dark-theme .rt-SelectItem[data-highlighted],
+.dark-theme .rt-BaseMenuItem[data-highlighted] {
+  background-color: var(--gray-5) !important;
+}
+
+/* Select/Menu dropdown background matches theme */
+.rt-SelectContent,
+.rt-BaseMenuContent {
+  background-color: var(--gray-2) !important;
+}
+
+/* Select trigger matches theme */
+.rt-SelectTrigger {
+  background-color: var(--gray-2) !important;
+}