From 15c01b73c633092deb079b8e52ad971425da309f Mon Sep 17 00:00:00 2001
From: rusconn <rusconn3@gmail.com>
Date: Fri, 11 Aug 2023 20:31:18 +0900
Subject: [PATCH] fix(css): add select items focus color

---
 components/ui/select.tsx | 1 +
 styles/globals.css       | 2 ++
 tailwind.config.js       | 1 +
 3 files changed, 4 insertions(+)

diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 3857e0b..a27f550 100644
--- a/components/ui/select.tsx
+++ b/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
     )}
diff --git a/styles/globals.css b/styles/globals.css
index e4ac459..bbcd9cc 100644
--- a/styles/globals.css
+++ b/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%;
diff --git a/tailwind.config.js b/tailwind.config.js
index 207e1b5..4d04ec1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,6 +46,7 @@ module.exports = {
           },
           item: {
             hover: "hsl(var(--select-item-hover))",
+            focus: "hsl(var(--select-item-focus))",
           },
         },
         input: {