fix(css): add select items focus color

components/ui/select.tsx

@@ -83,6 +83,7 @@ export const Item = React.forwardRef<
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none",
       "hover:bg-select-item-hover",
+      "focus:bg-select-item-focus",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}

styles/globals.css

@@ -39,6 +39,7 @@
     --select-content-foreground: 0 0% 20%;
 
     --select-item-hover: 0 0% 94%;
+    --select-item-focus: 0 0% 94%;
 
     --input: 0 0% 99%;
     --input-hover: 0 0% 97%;
@@ -103,6 +104,7 @@
     --select-content-foreground: 0 0% 90%;
 
     --select-item-hover: 0 0% 21%;
+    --select-item-focus: 0 0% 21%;
 
     --input: 0 0% 20%;
     --input-hover: 0 0% 22%;

tailwind.config.js

@@ -46,6 +46,7 @@ module.exports = {
           },
           item: {
             hover: "hsl(var(--select-item-hover))",
+            focus: "hsl(var(--select-item-focus))",
           },
         },
         input: {