fix: button compound variants

Author: gndz07

components/Button/Button.themes.ts

@@ -25,6 +25,7 @@ export namespace Theme {
 
   export const getLight: Factory = (primaryColor) => ({
     buttonPrimaryBg: '$primary',
+    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),
     buttonPrimaryText: 'white',
     buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),
     buttonPrimaryGhostHoverText: '$deepBlue9',
@@ -42,6 +43,7 @@ export namespace Theme {
 
   export const getDark: Factory = (primaryColor) => ({
     buttonPrimaryBg: '$primary',
+    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),
     buttonPrimaryText: '$deepBlue2',
     buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),
     buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),

components/Button/Button.tsx

@@ -216,6 +216,15 @@ export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
         },
       },
     },
+    {
+      variant: 'primary',
+      state: 'active',
+      css: {
+        backgroundColor: '$buttonPrimaryFocusBg',
+        color: '$buttonPrimaryText',
+        boxShadow: 'inset 0 0 0 2px white',
+      },
+    },
     {
       variant: 'secondary',
       state: 'waiting',
@@ -226,10 +235,10 @@ export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
     },
     {
       variant: 'secondary',
-      state: 'active',
+      ghost: true,
       css: {
-        backgroundColor: '$buttonPrimaryBg',
-        color: '$buttonPrimaryText',
+        backgroundColor: 'transparent',
+        color: '$buttonSecondaryText',
       },
     },
     {
@@ -240,6 +249,15 @@ export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
         color: 'transparent',
       },
     },
+    {
+      variant: 'red',
+      state: 'active',
+      css: {
+        backgroundColor: '$buttonRedFocusBg',
+        color: '$buttonRedText',
+        boxShadow: 'inset 0 0 0 2px white',
+      },
+    },
     {
       variant: 'red',
       ghost: 'true',
@@ -291,7 +309,7 @@ export const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, Bu
         {children}
       </Component>
     );
-  }
+  },
 );
 
 const BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;

vite.config.ts

@@ -2,5 +2,8 @@ import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+  optimizeDeps: {
+    exclude: ['storybook'],
+  },
   plugins: [react()],
 });