Figma'dan Koda: Design System Oluşturma

1/* Token tanımları */
2--color-primary-50: #e6f9f4;
3--color-primary-100: #c2f0e4;
4--color-primary-500: #17cb96;
5--color-primary-600: #14b8a6;
6--color-primary-900: #064e3b;
7
8--color-neutral-50: #fafafa;
9--color-neutral-100: #f4f4f5;
10--color-neutral-500: #71717a;
11--color-neutral-900: #18181b;

1/* Font scale */
2--font-size-xs: 0.75rem;   /* 12px */
3--font-size-sm: 0.875rem;  /* 14px */
4--font-size-base: 1rem;    /* 16px */
5--font-size-lg: 1.125rem;  /* 18px */
6--font-size-xl: 1.25rem;   /* 20px */
7--font-size-2xl: 1.5rem;   /* 24px */
8--font-size-3xl: 1.875rem; /* 30px */
9--font-size-4xl: 2.25rem;  /* 36px */

1/* 4px base unit */
2--space-1: 0.25rem;  /* 4px */
3--space-2: 0.5rem;   /* 8px */
4--space-3: 0.75rem;  /* 12px */
5--space-4: 1rem;     /* 16px */
6--space-6: 1.5rem;   /* 24px */
7--space-8: 2rem;     /* 32px */
8--space-12: 3rem;    /* 48px */
9--space-16: 4rem;    /* 64px */

1// components/Button.tsx
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/utils";
4
5const buttonVariants = cva(
6  "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",
7  {
8    variants: {
9      variant: {
10        primary: "bg-primary-500 text-white hover:bg-primary-600",
11        secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-200",
12        outline: "border border-neutral-300 hover:bg-neutral-50",
13        ghost: "hover:bg-neutral-100",
14      },
15      size: {
16        sm: "h-8 px-3 text-sm",
17        md: "h-10 px-4 text-base",
18        lg: "h-12 px-6 text-lg",
19      },
20    },
21    defaultVariants: {
22      variant: "primary",
23      size: "md",
24    },
25  }
26);
27
28interface ButtonProps
29  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
30    VariantProps<typeof buttonVariants> {}
31
32export function Button({ 
33  className, 
34  variant, 
35  size, 
36  ...props 
37}: ButtonProps) {
38  return (
39    <button
40      className={cn(buttonVariants({ variant, size }), className)}
41      {...props}
42    />
43  );
44}

1// Button.stories.tsx
2import type { Meta, StoryObj } from '@storybook/react';
3import { Button } from './Button';
4
5const meta: Meta<typeof Button> = {
6  title: 'Components/Button',
7  component: Button,
8  tags: ['autodocs'],
9};
10
11export default meta;
12
13export const Primary: StoryObj<typeof Button> = {
14  args: {
15    variant: 'primary',
16    children: 'Primary Button',
17  },
18};
19
20export const Secondary: StoryObj<typeof Button> = {
21  args: {
22    variant: 'secondary',
23    children: 'Secondary Button',
24  },
25};