feat: define color token (#36)

* feat: define color token * feat: typography component with font token * feat: apply typography component * chore: edit story in chip * feat: add colorscheme type in chip button * refactor: percent to em
mash-up-kr · Jun 29, 2024 · 6cacddc · 6cacddc
1 parent 9d34729
commit 6cacddc
Show file tree

Hide file tree

Showing 17 changed files with 769 additions and 104 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,41 @@
-import { Button, QRCode } from '@/components'
+import { Button, Chip, ChipButton, QRCode, Typography } from '@/components'
 
 const Home = () => {
   return (
     <main className="w-full min-h-screen flex flex-col justify-center items-center bg-neutral-600">
       <QRCode url="http://localhost:3000" />
       <Button colorScheme="orange">HI</Button>
+      <Typography size="h0" color="yellow-100">
+        Typography
+      </Typography>
+      <Typography size="h1" color="orange-400">
+        Typography
+      </Typography>
+      <Typography size="h2">Typography</Typography>
+      <Typography size="h3">Typography</Typography>
+      <Typography size="h4">Typography</Typography>
+      <Typography size="h5">Typography</Typography>
+      <Typography size="h5-2">Typography</Typography>
+      <Typography size="h6">Typography</Typography>
+      <Typography size="h7">Typography</Typography>
+      <Typography size="body0">Typography</Typography>
+      <Typography size="body1">Typography</Typography>
+      <Typography size="body2">Typography</Typography>
+      <Typography size="body3">Typography</Typography>
+      <Typography size="body4">Typography</Typography>
+      <Chip size="sm" fontSize="h7" colorScheme="orange">
+        진영 Pick
+      </Chip>
+      <Chip size="md" fontSize="body3" colorScheme="neutral-400">
+        🍝 태그설명
+      </Chip>
+      <Chip size="md" fontSize="body3" colorScheme="orange">
+        🍝 태그설명
+      </Chip>
+      <Chip size="lg" fontSize="body0" colorScheme="neutral-500">
+        도라방스
+      </Chip>
+      <ChipButton rightIcon={{ type: 'close' }}>한우갈비</ChipButton>
     </main>
   )
 }

diff --git a/src/components/common/button.tsx b/src/components/common/button.tsx
@@ -2,39 +2,38 @@ import { forwardRef, type ButtonHTMLAttributes } from 'react'
 import { cva } from 'class-variance-authority'
 
 import cn from '@/utils/cn'
+import Typography from './typography'
+import type { ColorKey } from '@/types/color'
 
 const ButtonVariants = cva<{
   colorScheme: Record<'orange' | 'neutral', string>
   size: Record<'sm' | 'md' | 'lg', string>
   rounded: Record<'xl' | 'full', string>
-}>(
-  'flex justify-center items-center cursor-pointer text-neutral-000 text-[18px] font-semibold leading-tight',
-  {
-    variants: {
-      colorScheme: {
-        orange: 'bg-main-orange',
-        neutral: 'bg-neutral-500',
-      },
-      size: {
-        sm: 'py-[12px]',
-        md: 'py-[15px]',
-        lg: 'py-[18px]',
-      },
-      rounded: {
-        xl: 'rounded-xl',
-        full: 'rounded-full',
-      },
+}>('flex justify-center items-center cursor-pointer', {
+  variants: {
+    colorScheme: {
+      orange: 'bg-orange-400',
+      neutral: 'bg-neutral-500',
     },
-    defaultVariants: {
-      colorScheme: 'orange',
-      size: 'md',
-      rounded: 'full',
+    size: {
+      sm: 'py-[12px]',
+      md: 'py-[15px]',
+      lg: 'py-[18px]',
+    },
+    rounded: {
+      xl: 'rounded-xl',
+      full: 'rounded-full',
     },
   },
-)
+  defaultVariants: {
+    colorScheme: 'orange',
+    size: 'md',
+    rounded: 'full',
+  },
+})
 
-const darkDisableClass = 'bg-neutral-600 text-neutral-400 cursor-not-allowed'
-const lightDisableClass = 'bg-neutral-100 text-neutral-200 cursor-not-allowed'
+const darkDisableClass = 'bg-neutral-600 cursor-not-allowed'
+const lightDisableClass = 'bg-neutral-100 cursor-not-allowed'
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   colorScheme?: 'orange' | 'neutral'
@@ -47,11 +46,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const getDisabledClassName = (
   disabled: boolean,
   disabledColor: 'dark' | 'light',
-) => {
+): { disabledClassName: string; disabledTextColor: ColorKey } => {
   if (!disabled) {
-    return ''
+    return { disabledClassName: '', disabledTextColor: 'neutral-000' }
   }
-  return disabledColor === 'dark' ? darkDisableClass : lightDisableClass
+  return disabledColor === 'dark'
+    ? { disabledClassName: darkDisableClass, disabledTextColor: 'neutral-400' }
+    : { disabledClassName: lightDisableClass, disabledTextColor: 'neutral-200' }
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -69,7 +70,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const disabledClassName = getDisabledClassName(disabled, disabledColor)
+    const { disabledClassName, disabledTextColor } = getDisabledClassName(
+      disabled,
+      disabledColor,
+    )
 
     return (
       <button
@@ -89,7 +93,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         {...props}
       >
-        {children}
+        <Typography
+          size="h4"
+          color={disabled ? disabledTextColor : 'neutral-000'}
+        >
+          {children}
+        </Typography>
       </button>
     )
   },

diff --git a/src/components/common/chip-button.tsx b/src/components/common/chip-button.tsx
@@ -4,21 +4,22 @@ import { cva, VariantProps } from 'class-variance-authority'
 
 import cn from '@/utils/cn'
 import Icon from './icon'
+import Typography from './typography'
+import type { ColorKey } from '@/types/color'
 
-const ChipButtonVariants = cva(
-  'rounded-[20px] flex justify-center items-center px-[10px] py-2 leading-tight tracking-[-0.02em]',
-  {
-    variants: {
-      colorScheme: {
-        neutral: 'bg-neutral-500 text-neutral-100',
-        orange: 'bg-main-orange text-neutral-000',
-      },
-    },
-    defaultVariants: {
-      colorScheme: 'neutral',
+const ChipButtonVariants = cva<{
+  colorScheme: Record<'neutral' | 'orange', `bg-${ColorKey}`>
+}>('rounded-3xl flex justify-center items-center px-[10px] py-2', {
+  variants: {
+    colorScheme: {
+      neutral: 'bg-neutral-500',
+      orange: 'bg-orange-400',
     },
   },
-)
+  defaultVariants: {
+    colorScheme: 'neutral',
+  },
+})
 
 interface ChipButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
@@ -42,7 +43,9 @@ const ChipButton = forwardRef<HTMLButtonElement, ChipButtonProps>(
         )}
         {...props}
       >
-        {children}
+        <Typography size="h6" color="neutral-100">
+          {children}
+        </Typography>
         {rightIcon && <Icon {...rightIcon} aria-hidden />}
       </button>
     )