fix(select): set icons and hover state to follow the theme

geist-org · Jun 5, 2021 · 1f3caf6 · 1f3caf6
1 parent fc97923
commit 1f3caf6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/components/select/select.tsx b/components/select/select.tsx
@@ -86,10 +86,10 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   }, [value])
   const sizes = useMemo(() => getSizes(theme, size), [theme, size])
 
-  const { border, placeholderColor } = useMemo(() => getColors(theme.palette, type), [
-    theme.palette,
-    type,
-  ])
+  const { border, borderHover, iconBorder, placeholderColor } = useMemo(
+    () => getColors(theme.palette, type),
+    [theme.palette, type],
+  )
 
   const updateVisible = (next: boolean) => setVisible(next)
   const updateValue = (next: string) => {
@@ -186,8 +186,8 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
             max-width: 80vw;
             width: ${width};
             overflow: hidden;
-            transition: border 0.2s ease 0s, color 0.2s ease-out 0s,
-              box-shadow 0.2s ease 0s;
+            transition: border 150ms ease-in 0s, color 200ms ease-out 0s,
+              box-shadow 200ms ease 0s;
             border: 1px solid ${border};
             border-radius: ${theme.layout.radius};
             padding: 0 ${theme.layout.gapQuarter} 0 ${theme.layout.gapHalf};
@@ -206,11 +206,11 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
           }
 
           .select:hover {
-            border-color: ${disabled ? theme.palette.border : theme.palette.foreground};
+            border-color: ${disabled ? theme.palette.border : borderHover};
           }
 
           .select:hover .icon {
-            color: ${disabled ? theme.palette.accents_5 : theme.palette.foreground};
+            color: ${disabled ? theme.palette.accents_5 : borderHover};
           }
 
           .value {
@@ -250,7 +250,7 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
             transition: transform 200ms ease;
             display: flex;
             align-items: center;
-            color: ${theme.palette.accents_5};
+            color: ${iconBorder};
           }
         `}</style>
       </div>

diff --git a/components/select/styles.ts b/components/select/styles.ts
@@ -36,6 +36,8 @@ export const getSizes = (theme: GeistUIThemes, size?: NormalSizes) => {
 
 export type SelectColor = {
   border: string
+  borderHover: string
+  iconBorder: string
   placeholderColor: string
 }
 
@@ -46,22 +48,34 @@ export const getColors = (
   const colors: { [key in NormalTypes]: SelectColor } = {
     default: {
       border: palette.border,
+      borderHover: palette.foreground,
+      iconBorder: palette.accents_5,
       placeholderColor: palette.accents_3,
     },
     secondary: {
       border: palette.border,
+      borderHover: palette.foreground,
+      iconBorder: palette.accents_5,
       placeholderColor: palette.accents_3,
     },
     success: {
       border: palette.success,
+      borderHover: palette.successDark,
+      iconBorder: palette.success,
       placeholderColor: palette.accents_3,
     },
     warning: {
       border: palette.warning,
+      borderHover: palette.warningDark,
+      iconBorder: palette.warning,
+
       placeholderColor: palette.accents_3,
     },
     error: {
       border: palette.error,
+      borderHover: palette.errorDark,
+      iconBorder: palette.error,
+
       placeholderColor: palette.error,
     },
   }