[FEATRUE] Primitive 토큰 정의

[3o14]

목표

SIDE v2의 Primitive 토큰(원시값 레이어)을 전 영역에 걸쳐 정의합니다.
다크 모드 대비를 위해 color는 풀 스케일(50~950)로 준비합니다.

선행 조건

• [FEATRUE] 토큰 아키텍처 및 네이밍 컨벤션 정의 #219 (아키텍처 및 네이밍 컨벤션 확정)

작업 내용

Color (다크 모드 대비)

• 기존 SIPE v1 팔레트 추출 및 확장
• 각 계열 10단계 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)
• Neutral(gray) 톤 결정 (cool / warm / neutral 중 선택)
• Semantic 의미 없는 "plain" 팔레트만 정의합니다 (semantic 매핑은 [FEATRUE] Semantic 토큰 초안 설계 #221 에서 진행)

Spacing (신규)

• Scale 결정: 4 베이스 / 8 베이스
• 예: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128
• v1 감사(Button #2)에서 발견된 실사용 값 커버 여부 검증

Radius (신규)

• 단계: none, xs, sm, md, lg, xl, 2xl, full
• v1에서 사용 중인 8px / 12px 등 실제 값 포함

Border Width

• 0, 1, 2, 4

Typography

• font-family, font-size, font-weight, line-height, letter-spacing

Shadow

• Elevation 단계 (sm, md, lg, xl)
• 다크 모드에서 별도 정의가 필요하므로 semantic에서 override 대비합니다

Z-index (신규)

• 레이어 정의
  • dropdown: 1000
  • sticky: 1100
  • overlay: 1200
  • modal: 1300
  • popover: 1400
  • toast: 1500

Animation (신규)

• Duration: fast (150ms), base (200ms), slow (300ms), slower (500ms)
• Easing: linear, ease-in, ease-out, ease-in-out, spring-like custom bezier
• v1 감사(Button #2)에서 발견된 값(0.2s / 0.3s / 150ms)이 커버되는지 검증

파일 구조

tokens/
primitive/
color.json
spacing.json
radius.json
border.json
typography.json
shadow.json
z-index.json
animation.json

포맷

W3C DTCG JSON 포맷 준수

{
  "color": {
    "blue": {
      "500": { "$value": "#3B82F6", "$type": "color" }
    }
  }
}