[EPIC] v2 토큰 시스템 구축

[3o14]

개요

SIPE Design System v2의 토큰 시스템을 구축합니다. Primitive / Semantic 2계층 구조를 도입하고,
Figma ↔ 코드 양방향 동기화 파이프라인(Tokens Studio + GitHub + Style Dictionary)을 마련합니다.
라이트 모드는 이번 스코프에 포함되지 않지만 언제든 확장 가능한 구조로 설계합니다.

v1의 문제 (배경)

• 토큰은 있는데 안 씀: color, fontSize, fontWeight, lineHeight 정의는 존재하나
  컴포넌트에서 import해서 사용하는 코드가 거의 없습니다
• 토큰 우회 사례: Tooltip, Avatar는 hex 값을 직접 하드코딩하고 있습니다
• 토큰 자체가 없음: spacing, border-radius, z-index, animation(duration/easing)이 부재합니다
• 불일치 누적: border-radius: 8px vs 12px, transition: 0.2s vs 0.3s vs 150ms 등이 컴포넌트마다 제각각입니다

목표

• v1 토큰 사용 현황 감사 및 문서화
• Primitive 토큰 전 영역 정의 (color, spacing, radius, border, typography, shadow, z-index, animation)
• Semantic 토큰 초안 정의 (light 모드, alias 전용 원칙)
• 라이트 모드 확장 대비 구조 (파일 분리, Tokens Studio Sets)
• Figma Variables ↔ GitHub JSON 자동 동기화
• Style Dictionary 기반 CSS Variables 빌드 파이프라인
• 샘플 컴포넌트 2~3개 마이그레이션
• README·마이그레이션 가이드 작성

하위 이슈

• [FEATURE] v1 토큰 사용 현황 감사 #218
• [FEATRUE] 토큰 아키텍처 및 네이밍 컨벤션 정의 #219
• [FEATRUE] Primitive 토큰 정의 #220
• [FEATRUE] Semantic 토큰 초안 설계 #221
• [FEATRUE] Style Dictionary 빌드 파이프라인 구축 #222
• [FEATRUE] GitHub Actions CI 구축 #223
• [FEATRUE] Tokens Studio + Figma Variables 연동 #224
• [FEATRUE] 샘플 컴포넌트 토큰 마이그레이션 #225
• [DOCS] 토큰 시스템 문서화 및 마이그레이션 가이드 #226