디자인 시스템을 만드는 공장 뜯어보기

[Figma Variables]
   │  ecosystem/figma-extractor  +  scripts/figma-to-rootage.ts (742줄)
   ▼
[Rootage YAML]  ← 손으로 쓰는 단일 원천
   │  packages/rootage/*.yaml            (토큰 12파일)
   │  packages/rootage/components/*.yaml (컴포넌트 스펙 104개)
   │
   │  ecosystem/rootage (토큰 빌드 엔진)
   ▼
[__generated__/]  JSON · .mjs · .d.ts
   │
   │  packages/qvism-preset/src/recipes/*.ts  ← 손으로 쓰는 스타일 레시피
   │  ecosystem/qvism (레시피 → CSS 엔진)
   ▼
[@seed-design/css]  vars/ + recipes/ (486파일, 전부 생성물)
   │
   │  + packages/react-headless/* (43개, 손으로 씀)
   ▼
[@seed-design/react]  89개 컴포넌트 ──► 문서 · Registry · 예제

kind: Tokens
metadata: {id: color, name: Color, lastUpdated: 26-06-15}
data:
  collection: color
  tokens:
    $color.palette.carrot-600: # 원시: 실제 hex
      values: {theme-light: '#ff6f0f', theme-dark: '#...'}

    $color.bg.brand-solid: # 의미: 원시를 참조
      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다...
      values:
        theme-light: $color.palette.carrot-600
        theme-dark: $color.palette.carrot-700

- name: color
  modes: [theme-light, theme-dark]
- name: motion
  modes: [preferred, reduced] # 모션 민감성
- name: viewport-width
  modes: [base, sm, md, lg, xl] # 반응형

kind: ComponentSpec
metadata: {id: action-button, name: Action Button}
data:
  schema:
    slots: # 컴포넌트를 구성하는 파츠와 각 파츠가 가질 수 있는 속성
      root:
        {properties: {color: {type: color}, cornerRadius: {type: dimension}}}
      label: {properties: {color: {type: color}, fontWeight: {type: number}}}
      icon: {description: 'layout=iconOnly에서 사용되는 아이콘 슬롯입니다.'}
      prefixIcon:
        {
          description: '주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다.',
        }
    variants:
      variant:
        values:
          brandSolid:
            {
              description: '브랜드의 핵심 가치를 전달하며 ... 한 화면에 하나만 사용하는 것을 권장합니다.',
            }
          neutralSolid: {description: '대부분의 화면에서 CTA로 사용합니다.'}
          criticalSolid:
            {
              description: '삭제나 초기화처럼 되돌릴 수 없는 중요한 작업에 사용합니다.',
            }
      size: {values: {xsmall, small, medium, large}}
      layout: {values: {withText, iconOnly}}

  definitions: # (variant × state × slot) → 토큰
    base:
      enabled: {root: {colorDuration: $duration.color-transition}}
      pressed: {root: {scaleScope: self}}
    variant=brandSolid:
      enabled:
        {
          root: {color: $color.bg.brand-solid},
          label: {color: $color.palette.static-white},
        }
      pressed: {root: {color: $color.bg.brand-solid-pressed}}
      disabled:
        {root: {color: $color.bg.disabled}, label: {color: $color.fg.disabled}}
      loading: {root: {color: $color.bg.brand-solid-pressed}}

import spec from '@seed-design/rootage-artifacts/components/action-button'

import {actionButton as vars} from '../vars/component'

const actionButton = defineRecipe({
  name: 'action-button',
  base: {
    display: 'inline-flex',
    position: 'relative',
    cursor: 'pointer',
    ...createFocusRingRestStyles(),
    [pseudo(focusVisible)]: createFocusRingStyles(),
    [pseudo(not(disabled), active)]: {...createScaleFeedbackStyles()},
    transition: `background-color ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}`,
  },
  variants: {
    variant: {
      brandSolid: {
        background: vars.variantBrandSolid.enabled.root.color, // 타입 안전한 생성 변수
        color: vars.variantBrandSolid.enabled.label.color,
        ...prefixIcon({
          color: vars.variantBrandSolid.enabled.prefixIcon.color,
        }),
      },
    },
  },
})

# The single source of truth for "which files are generated".
# Consumers that can ask git directly do so instead of repeating these paths:
#   - .github/workflows/claude-code-review.yml  ':(exclude,attr:linguist-generated)'
#   - .claude/hooks/generated-files-guard.ts    git check-attr
#   - .claude/agents/*, skills/*                git check-attr
packages/css/vars/**            linguist-generated
packages/css/recipes/**         linguist-generated
**/__generated__/**             linguist-generated

// packages/react/src/components/ActionButton/ActionButton.tsx
export const ActionButton = React.forwardRef<
  HTMLButtonElement,
  ActionButtonProps
>((props, ref) => {
  const recipeClassName = actionButton({variant, layout, size}) // 생성 CSS 레시피
  const api = usePendingButton({loading, disabled}) // headless 로직
  const {scaleFeedbackRef, scaleFeedbackClassName} = useScaleFeedback()

  if (
    layout === 'iconOnly' &&
    !(props['aria-label'] || props['aria-labelledby'])
  ) {
    console.warn(
      "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided.",
    )
  }
})