Create variants object

Author: forestream

packages/components/src/components/Button/index.tsx

@@ -1,4 +1,5 @@
-import { Button as DevupButton } from '@devup-ui/react'
+import { Button as DevupButton, css } from '@devup-ui/react'
+import clsx from 'clsx'
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: 'primary' | 'default'
@@ -7,9 +8,86 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     error?: string
   }
   isError?: boolean
-  size?: 's' | 'm'
+  size?: 'sm' | 'md'
 }
 
+const variants = {
+  primary: css({
+    styleOrder: 2,
+    _active: {
+      bg: `color-mix(in srgb, var(--primary, #FFF) 100%, #000 30%)`,
+    },
+    _disabled: {
+      color: '#D6D7DE',
+      bgColor: '#F0F0F3',
+      cursor: 'not-allowed',
+    },
+    _hover: {
+      bg: `color-mix(in srgb, var(--primary, #FFF) 100%, #000 15%)`,
+    },
+    _themeDark: {
+      _active: {
+        bg: `color-mix(in srgb, var(--primary, #000) 100%, #FFF 30%);`,
+      },
+      _disabled: {
+        color: '#373737',
+        bgColor: '#47474A',
+        cursor: 'not-allowed',
+        borderColor: 'transparent',
+      },
+      _hover: {
+        bg: `color-mix(in srgb, var(--primary, #000) 100%, #FFF 15%);`,
+        outlineColor: `var(--primary, #FFF)`,
+      },
+    },
+    bg: 'var(--primary, #000)',
+    border: 'none',
+    borderRadius: '8px',
+    color: '#FFF',
+  }),
+  default: css({
+    styleOrder: 2,
+    _active: {
+      bg: `color-mix(in srgb, var(--primary, #000) 20%, #FFF 80%)`,
+      border: `1px solid var(--primary, #000)`,
+      color: '#000',
+    },
+    _hover: {
+      borderColor: `var(--primary, #000)`,
+      bg: `color-mix(in srgb, var(--primary, #000) 10%, #FFF 90%)`,
+    },
+    bg: '$inputBg',
+    border: '1px solid $border',
+    borderRadius: '10px',
+    color: '$text',
+  }),
+}
+
+const errorClassNames = css({
+  styleOrder: 3,
+  _active: {
+    bg: 'var(--error, #000)',
+    border: '1px solid var(--error, #000)',
+    color: '#000',
+  },
+  _focusVisible: {
+    outlineColor: 'var(--error, #000)',
+  },
+  _hover: {
+    border: '1px solid var(--error, #000)',
+  },
+  _themeDark: {
+    _active: {
+      bg: 'var(--error, #000)',
+      border: '1px solid var(--error, #000)',
+      color: '#000',
+    },
+    _hover: {
+      bg: '$inputBg',
+    },
+  },
+})
+
 /**
  * Button
  * ## Design Token
@@ -30,44 +108,21 @@ export function Button({
   colors,
   isError = false,
   children,
-  size = 'm',
+  size = 'md',
   ...props
 }: ButtonProps): React.ReactElement {
   const isPrimary = variant === 'primary'
 
   return (
     <DevupButton
-      _active={{
-        bg: isPrimary
-          ? `color-mix(in srgb, var(--primary, #FFF) 100%, #000 30%);`
-          : isError
-            ? 'var(--error, #000)'
-            : `color-mix(in srgb, var(--primary, #000) 20%, #FFF 80%);`,
-        border:
-          !isPrimary &&
-          (isError
-            ? '1px solid var(--error, #000)'
-            : `1px solid var(--primary, #000)`),
-        color: !isPrimary && isError && '#000',
-      }}
       _disabled={{
         color: '#D6D7DE',
         bgColor: '#F0F0F3',
         cursor: 'not-allowed',
-        borderColor: isPrimary ? 'transparent' : '$border',
       }}
       _focusVisible={{
         outline: '2px solid',
-        outlineColor:
-          !isPrimary && isError ? 'var(--error, #000)' : '$primaryFocus',
-      }}
-      _hover={{
-        borderColor: isError ? 'var(--error, #000)' : `var(--primary, #000)`,
-        bg: isPrimary
-          ? `color-mix(in srgb, var(--primary, #FFF) 100%, #000 15%)`
-          : isError
-            ? '1px solid var(--error, #000)'
-            : `color-mix(in srgb, var(--primary, #000) 10%, #FFF 90%)`,
+        outlineColor: '$primaryFocus',
       }}
       _themeDark={{
         _disabled: {
@@ -76,52 +131,30 @@ export function Button({
           cursor: 'not-allowed',
           borderColor: 'transparent',
         },
-        _active: {
-          bg: isPrimary
-            ? `color-mix(in srgb, var(--primary, #000) 100%, #FFF 30%);`
-            : isError
-              ? 'var(--error, #000)'
-              : 'var(--primary, #FFF)',
-          border:
-            !isPrimary &&
-            (isError
-              ? '1px solid var(--error, #000)'
-              : `1px solid var(--primary, #FFF)`),
-          color: !isPrimary && isError && '#FFF',
-        },
-        _hover: {
-          bg: isPrimary
-            ? `color-mix(in srgb, var(--primary, #000) 100%, #FFF 15%);`
-            : isError
-              ? '$inputBg'
-              : `color-mix(in srgb, var(--primary, #FFF) 20%, #000 80%);`,
-        },
         _focusVisible: {
-          outlineColor: isPrimary
-            ? `var(--primary, #FFF)`
-            : isError
-              ? 'var(--error, #000)'
-              : '$primaryFocus',
+          outlineColor: '$primaryFocus',
         },
       }}
-      bg={isPrimary ? 'var(--primary, #000)' : '$inputBg'}
-      border={isPrimary ? 'none' : '1px solid $border'}
-      borderRadius={isPrimary ? '8px' : '10px'}
-      className={className}
-      color={isPrimary ? '#FFF' : isError ? 'var(--error, #000)' : '$text'}
+      className={clsx(
+        variants[variant],
+        isError && variant === 'default' && errorClassNames,
+        className,
+      )}
+      color={isError ? 'var(--error, #000)' : '$text'}
       cursor="pointer"
       outlineOffset="2px"
       px="40px"
       py="12px"
       styleOrder={1}
-      styleVars={colors && { primary: colors.primary, error: colors.error }}
+      styleVars={{ primary: colors?.primary, error: colors?.error }}
       transition=".25s"
       type={type}
       typography={
         isPrimary
-          ? size === 's'
-            ? 'buttonS'
-            : 'buttonM'
+          ? {
+              sm: 'buttonS',
+              md: 'buttonM',
+            }[size]
           : isError
             ? 'inputBold'
             : 'buttonxs'