refactor(button): integrate tokens for styling and update button

packages/button/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
+    "@sipe-team/tokens": "workspace:*",
     "@sipe-team/typography": "workspace:*",
     "@vanilla-extract/recipes": "^0.5.5",
     "clsx": "^2.1.1"

packages/button/src/Button.css.ts

@@ -1,11 +1,9 @@
+import { vars } from '@sipe-team/tokens';
+
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { ButtonColor, ButtonVariant } from './Button';
 
-const primaryColor = '#00ffff';
-const blackColor = 'black';
-const whiteColor = 'white';
-const transparentColor = 'transparent';
+import { ButtonSize, ButtonVariant } from './Button';
 
 export const disabled = style({
   opacity: 0.4,
@@ -18,164 +16,59 @@ export const button = recipe({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: '0 16px',
-    borderRadius: 8,
-    height: 40,
-    fontSize: 22,
-    lineHeight: 30.8,
-    fontWeight: 'bold',
+    borderRadius: vars.radius.md,
+    fontWeight: vars.typography.fontWeight.semiBold,
     cursor: 'pointer',
     transition: 'all 0.2s ease-in-out',
+    border: 'none',
+    fontFamily: vars.typography.fontFamily,
   },
   variants: {
-    color: {
-      [ButtonColor.primary]: {},
-      [ButtonColor.black]: {},
-      [ButtonColor.white]: {},
-    },
     variant: {
       [ButtonVariant.filled]: {
+        backgroundColor: vars.color.primary,
+        color: vars.color.background,
         border: 'none',
-      },
-      [ButtonVariant.outline]: {
-        backgroundColor: transparentColor,
-      },
-      [ButtonVariant.weak]: {
-        backgroundColor: transparentColor,
-        border: 'none',
-        ':hover': {
-          opacity: 0.1,
-        },
-      },
-    },
-  },
-  compoundVariants: [
-    {
-      variants: {
-        color: ButtonColor.primary,
-        variant: ButtonVariant.filled,
-      },
-      style: {
-        backgroundColor: primaryColor,
-        color: blackColor,
         ':hover': {
-          backgroundColor: '#00d2d2',
-          color: blackColor,
+          opacity: 0.9,
         },
       },
-    },
-    {
-      variants: {
-        color: ButtonColor.primary,
-        variant: ButtonVariant.outline,
-      },
-      style: {
-        border: `1px solid ${primaryColor}`,
-        color: primaryColor,
-        ':hover': {
-          backgroundColor: primaryColor,
-          color: blackColor,
-        },
-      },
-    },
-    {
-      variants: {
-        color: ButtonColor.primary,
-        variant: ButtonVariant.weak,
-      },
-      style: {
-        color: primaryColor,
-        ':hover': {
-          backgroundColor: primaryColor,
-          color: primaryColor,
-        },
-      },
-    },
-    {
-      variants: {
-        color: ButtonColor.black,
-        variant: ButtonVariant.filled,
-      },
-      style: {
-        backgroundColor: blackColor,
-        color: whiteColor,
-        ':hover': {
-          backgroundColor: '#2d3748',
-          color: whiteColor,
-        },
-      },
-    },
-    {
-      variants: {
-        color: ButtonColor.black,
-        variant: ButtonVariant.outline,
-      },
-      style: {
-        border: `1px solid ${blackColor}`,
-        color: blackColor,
-        ':hover': {
-          backgroundColor: blackColor,
-          color: whiteColor,
-        },
-      },
-    },
-    {
-      variants: {
-        color: ButtonColor.black,
-        variant: ButtonVariant.weak,
-      },
-      style: {
-        color: blackColor,
-        ':hover': {
-          backgroundColor: blackColor,
-          color: blackColor,
-        },
-      },
-    },
-    {
-      variants: {
-        color: ButtonColor.white,
-        variant: ButtonVariant.filled,
-      },
-      style: {
-        backgroundColor: whiteColor,
-        color: blackColor,
+      [ButtonVariant.outline]: {
+        backgroundColor: 'transparent',
+        border: `1px solid ${vars.color.primary}`,
+        color: vars.color.primary,
         ':hover': {
-          backgroundColor: '#cbd5e0',
-          color: blackColor,
+          backgroundColor: vars.color.primary,
+          color: vars.color.background,
         },
       },
-    },
-    {
-      variants: {
-        color: ButtonColor.white,
-        variant: ButtonVariant.outline,
-      },
-      style: {
-        border: `1px solid ${whiteColor}`,
-        color: whiteColor,
+      [ButtonVariant.ghost]: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: vars.color.primary,
         ':hover': {
-          backgroundColor: whiteColor,
-          color: blackColor,
+          backgroundColor: `color-mix(in srgb, ${vars.color.primary} 10%, transparent)`,
         },
       },
     },
-    {
-      variants: {
-        color: ButtonColor.white,
-        variant: ButtonVariant.weak,
-      },
-      style: {
-        color: whiteColor,
-        ':hover': {
-          backgroundColor: whiteColor,
-          color: whiteColor,
-        },
+    size: {
+      [ButtonSize.sm]: {
+        height: '32px',
+        padding: `0 ${vars.spacing.sm}`,
+        fontSize: vars.typography.fontSize['200'],
+        lineHeight: vars.typography.lineHeight.compact,
+      },
+      [ButtonSize.lg]: {
+        height: '48px',
+        padding: `0 ${vars.spacing.lg}`,
+        fontSize: vars.typography.fontSize['400'],
+        lineHeight: vars.typography.lineHeight.regular,
       },
     },
-  ],
+  },
+  compoundVariants: [],
   defaultVariants: {
-    color: ButtonColor.primary,
     variant: ButtonVariant.filled,
+    size: ButtonSize.lg,
   },
 });

packages/button/src/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { Button } from './Button';
 
 const meta = {
@@ -8,18 +9,18 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    color: {
-      description: '버튼의 색상을 지정합니다',
-      options: ['primary', 'black', 'white'],
+    variant: {
+      description: 'The visual style of the button',
+      options: ['filled', 'outline', 'ghost'],
       control: { type: 'radio' },
     },
-    variant: {
-      description: '버튼의 스타일을 지정합니다',
-      options: ['filled', 'outline', 'weak'],
+    size: {
+      description: 'The size of the button',
+      options: ['sm', 'lg'],
       control: { type: 'radio' },
     },
     disabled: {
-      description: '버튼의 비활성화 상태를 지정합니다',
+      description: 'Whether the button is disabled',
       control: { type: 'boolean' },
     },
   },
@@ -31,45 +32,42 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   args: {
     children: 'Button',
-    color: 'primary',
     variant: 'filled',
+    size: 'lg',
   },
 };
 
-export const Colors: Story = {
+export const Variants: Story = {
   args: {
     children: 'Button',
   },
   render: (args) => (
     <div style={{ display: 'flex', gap: '8px' }}>
-      <Button {...args} color="primary">
-        Primary
+      <Button {...args} variant="filled">
+        Filled
       </Button>
-      <Button {...args} color="black">
-        Black
+      <Button {...args} variant="outline">
+        Outline
       </Button>
-      <Button {...args} color="white">
-        White
+      <Button {...args} variant="ghost">
+        Ghost
       </Button>
     </div>
   ),
 };
 
-export const Variants: Story = {
+export const Sizes: Story = {
   args: {
     children: 'Button',
-    color: 'primary',
+    variant: 'filled',
   },
   render: (args) => (
-    <div style={{ display: 'flex', gap: '8px' }}>
-      <Button {...args} variant="filled">
-        Filled
-      </Button>
-      <Button {...args} variant="outline">
-        Outline
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <Button {...args} size="sm">
+        Small
       </Button>
-      <Button {...args} variant="weak">
-        Weak
+      <Button {...args} size="lg">
+        Large
       </Button>
     </div>
   ),
@@ -78,7 +76,6 @@ export const Variants: Story = {
 export const States: Story = {
   args: {
     children: 'Button',
-    color: 'primary',
   },
   render: (args) => (
     <div style={{ display: 'flex', gap: '8px' }}>