feat(button): Redesign Button component based on 5th generation design system

.changeset/button-v2-redesign.md

@@ -0,0 +1,14 @@
+---
+"@sipe-team/button": major
+"@sipe-team/tokens": minor
+---
+
+Redesign Button component based on 5th generation design system
+
+- **BREAKING**: Rename `ButtonVariant.filled` to `ButtonVariant.fill`
+- **BREAKING**: Expand `ButtonSize` from `sm | lg` to `sm | md | lg | xl`
+- Add `leftIcon` and `rightIcon` props for icon support
+- Apply 5th design colors via `createVar()` (button-scoped CSS variables)
+- Add interaction states: hover (gradient), pressed (`#FE4E07`), disabled (`gray500/600`)
+- Fix disabled CSS specificity bug by moving styles into recipe base selectors
+- Add `theme5th` color token to `@sipe-team/tokens`

packages/button/src/Button.css.ts

@@ -1,78 +1,115 @@
-import { vars } from '@sipe-team/tokens';
+import { color, vars } from '@sipe-team/tokens';
 
-import { style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { ButtonSize, ButtonVariant } from './Button';
 
-export const disabled = style({
-  opacity: 0.4,
-  cursor: 'not-allowed',
-  pointerEvents: 'none',
+export const buttonOrange = createVar();
+export const buttonGradient = createVar();
+export const buttonRed = createVar();
+
+export const iconWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  flexShrink: 0,
+});
+
+export const iconLayout = style({
+  gap: vars.spacing.component.md,
 });
 
 export const button = recipe({
   base: {
+    vars: {
+      [buttonOrange]: '#FF7C27',
+      [buttonGradient]: 'linear-gradient(225deg, #FF4500 0%, #FFB24D 100%)',
+      [buttonRed]: '#FE4E07',
+    },
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: vars.radius.component.md,
+    fontStyle: 'normal',
     fontWeight: vars.typography.fontWeight.semiBold,
+    lineHeight: '150%',
     cursor: 'pointer',
     transition: 'all 0.2s ease-in-out',
     border: 'none',
     fontFamily: vars.typography.fontFamily,
     ':focus-visible': {
-      outline: `2px solid ${vars.color.border.focus}`,
+      outline: `2px solid ${buttonOrange}`,
       outlineOffset: '2px',
     },
+    selectors: {
+      '&:disabled, &[aria-disabled="true"]': {
+        backgroundColor: color.gray500,
+        color: color.gray600,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        border: 'none',
+        background: color.gray500,
+      },
+    },
   },
   variants: {
     variant: {
-      [ButtonVariant.filled]: {
-        backgroundColor: vars.color.accent.default,
-        color: vars.color.foreground.onAccent,
-        border: 'none',
+      [ButtonVariant.fill]: {
+        backgroundColor: buttonOrange,
+        color: '#000',
         ':hover': {
-          backgroundColor: vars.color.accent.hover,
+          background: buttonGradient,
+        },
+        ':active': {
+          background: buttonRed,
         },
       },
       [ButtonVariant.outline]: {
         backgroundColor: 'transparent',
-        border: `1px solid ${vars.color.accent.default}`,
-        color: vars.color.accent.default,
-        ':hover': {
-          backgroundColor: vars.color.accent.default,
-          color: vars.color.foreground.onAccent,
-        },
+        border: `1px solid ${buttonOrange}`,
+        color: buttonOrange,
       },
       [ButtonVariant.ghost]: {
         backgroundColor: 'transparent',
         border: 'none',
-        color: vars.color.accent.default,
+        color: buttonOrange,
         ':hover': {
-          backgroundColor: vars.color.accent.subtle,
+          opacity: 0.8,
+        },
+        ':active': {
+          color: buttonRed,
         },
       },
     },
     size: {
       [ButtonSize.sm]: {
         height: '32px',
-        padding: `0 ${vars.spacing.component.sm}`,
-        fontSize: vars.typography.fontSize['200'],
-        lineHeight: vars.typography.lineHeight.compact,
+        padding: `0 ${vars.spacing.component.xs}`,
+        borderRadius: vars.radius.component.md,
+        fontSize: vars.typography.fontSize['050'],
+      },
+      [ButtonSize.md]: {
+        height: '40px',
+        padding: '0 12px',
+        borderRadius: '6px',
+        fontSize: vars.typography.fontSize['100'],
       },
       [ButtonSize.lg]: {
         height: '48px',
-        padding: `0 ${vars.spacing.component.lg}`,
-        fontSize: vars.typography.fontSize['400'],
-        lineHeight: vars.typography.lineHeight.regular,
+        padding: `0 ${vars.spacing.component.sm}`,
+        borderRadius: '6px',
+        fontSize: vars.typography.fontSize['200'],
+      },
+      [ButtonSize.xl]: {
+        height: '64px',
+        padding: `0 ${vars.spacing.component.md}`,
+        borderRadius: vars.radius.component.lg,
+        fontSize: vars.typography.fontSize['500'],
       },
     },
   },
   compoundVariants: [],
   defaultVariants: {
-    variant: ButtonVariant.filled,
+    variant: ButtonVariant.fill,
     size: ButtonSize.lg,
   },
 });

packages/button/src/Button.stories.tsx

@@ -2,6 +2,70 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
+const ArrowRightIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M5 12h14" />
+    <path d="m12 5 7 7-7 7" />
+  </svg>
+);
+
+const SearchIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+);
+
+const DownloadIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="7 10 12 15 17 10" />
+    <line x1="12" x2="12" y1="15" y2="3" />
+  </svg>
+);
+
+const ChevronRightIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
 const meta = {
   title: 'Components/Button',
   component: Button,
@@ -11,12 +75,12 @@ const meta = {
   argTypes: {
     variant: {
       description: 'The visual style of the button',
-      options: ['filled', 'outline', 'ghost'],
+      options: ['fill', 'outline', 'ghost'],
       control: { type: 'radio' },
     },
     size: {
       description: 'The size of the button',
-      options: ['sm', 'lg'],
+      options: ['sm', 'md', 'lg', 'xl'],
       control: { type: 'radio' },
     },
     disabled: {
@@ -32,7 +96,7 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   args: {
     children: 'Button',
-    variant: 'filled',
+    variant: 'fill',
     size: 'lg',
   },
 };
@@ -42,9 +106,9 @@ export const Variants: Story = {
     children: 'Button',
   },
   render: (args) => (
-    <div style={{ display: 'flex', gap: '8px' }}>
-      <Button {...args} variant="filled">
-        Filled
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <Button {...args} variant="fill">
+        Fill
       </Button>
       <Button {...args} variant="outline">
         Outline
@@ -59,30 +123,88 @@ export const Variants: Story = {
 export const Sizes: Story = {
   args: {
     children: 'Button',
-    variant: 'filled',
+    variant: 'fill',
   },
   render: (args) => (
     <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
       <Button {...args} size="sm">
         Small
       </Button>
+      <Button {...args} size="md">
+        Medium
+      </Button>
       <Button {...args} size="lg">
         Large
       </Button>
+      <Button {...args} size="xl">
+        Extra Large
+      </Button>
     </div>
   ),
 };
 
-export const States: Story = {
+export const Disabled: Story = {
   args: {
     children: 'Button',
   },
   render: (args) => (
-    <div style={{ display: 'flex', gap: '8px' }}>
-      <Button {...args}>Normal</Button>
-      <Button {...args} disabled>
-        Disabled
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <Button {...args} variant="fill" disabled>
+        Fill Disabled
+      </Button>
+      <Button {...args} variant="outline" disabled>
+        Outline Disabled
+      </Button>
+      <Button {...args} variant="ghost" disabled>
+        Ghost Disabled
       </Button>
     </div>
   ),
 };
+
+export const WithLeftIcon: Story = {
+  args: {
+    children: 'Search',
+    variant: 'fill',
+    size: 'xl',
+    leftIcon: <SearchIcon />,
+  },
+};
+
+export const WithRightIcon: Story = {
+  args: {
+    children: 'Next',
+    variant: 'fill',
+    size: 'xl',
+    rightIcon: <ArrowRightIcon />,
+  },
+};
+
+export const WithBothIcons: Story = {
+  args: {
+    children: 'Download',
+    variant: 'fill',
+    size: 'xl',
+    leftIcon: <DownloadIcon />,
+    rightIcon: <ChevronRightIcon />,
+  },
+};
+
+export const AllVariantsAndSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      {(['fill', 'outline', 'ghost'] as const).map((variant) => (
+        <div key={variant}>
+          <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{variant}</div>
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+              <Button key={size} variant={variant} size={size}>
+                {size.toUpperCase()}
+              </Button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};