@nurihaus/design-tokens

Nuri Design System tokens (primitive + semantic).

Figma Tokens Studio에서 관리하는 디자인 토큰을 TypeScript 패키지로 배포합니다.

구조

figma.json          ← Tokens Studio가 자동 업데이트
scripts/build.mjs   ← figma.json → src/*.ts 변환
src/                ← 생성된 TypeScript (auto-generated)
dist/               ← 컴파일된 JS + 타입 (npm publish 대상)

빌드

npm install
npm run build

build는 두 단계로 실행됩니다:

1. node scripts/build.mjs — figma.json → src/*.ts
2. tsc — src/.ts → dist/.js + dist/*.d.ts

소비하는 레포에서 설치

yarn add @nurihaus/design-tokens

사용법

import {
  color, typography, spacing, borderRadius,
  semanticApp, semanticAdmin,
} from '@nurihaus/design-tokens';

// --- Primitive ---

// 색상
color.purple['900']         // '#391D5D'
color.greyScale['500']      // '#71717A'
color.accent.red['500']     // '#DF535C'

// 타이포그래피
typography.fontFamily.primary  // 'Pretendard'
typography.fontSize.base       // 16
typography.fontWeight.bold     // 700
typography.lineHeight['22']    // 22

// 스페이싱
spacing['16']               // 16

// 보더 라디우스
borderRadius['6']           // 6
borderRadius.full           // 9999

// --- Semantic (앱) ---

semanticApp.button.primary.background      // '#391D5D'
semanticApp.button.primary.text            // '#FFFFFF'
semanticApp.button.size.xl.fontFamily      // 'Pretendard'
semanticApp.button.size.xl.fontSize        // 18
semanticApp.input.focus.border             // '#391D5D'
semanticApp.status.varient.completed       // '#289A3A'

// --- Semantic (어드민) ---

semanticAdmin.button.primary.background        // '#391D5D'
semanticAdmin.button.confirm.background        // '#DF535C'
semanticAdmin.button.primary.hover.background  // '#391D5D'
semanticAdmin.button.size.xl.fontSize          // 18

Exports

Primitive

| Export | 설명 | |--------|------| | color | purple, greyScale, accent (red/pink/magenta/blue/mint/green/yellow/orange) | | typography | fontFamily, fontSize, fontWeight, lineHeight | | spacing | 2, 4, 10, 12, 14, 16, 18, 20, 30 | | borderRadius | 4, 6, 16, 20, full |

Semantic

| Export | 용도 | 설명 | |--------|------|------| | semanticApp | 모바일 앱 | 버튼 컬러, 타이포그래피 등 모바일 앱 전용 시멘틱 토큰 | | semanticAdmin | 어드민 (관리자 페이지) | 버튼 컬러(hover 포함), confirm 상태, 타이포그래피 등 어드민 전용 시멘틱 토큰 |

Semantic 토큰은 primitive 값을 참조하며, 빌드 시 실제 값으로 해결됩니다. figma.json에 semantic_ 접두어로 새 세트가 추가되면 자동으로 빌드됩니다.

모든 export는 as const로 선언되어 리터럴 타입 추론이 가능합니다.

토큰 업데이트 흐름 (자동화)

1. 디자이너가 토큰 수정

Figma Tokens Studio에서 토큰 수정 → "Push to GitHub" 클릭

2. 자동 빌드 (GitHub Actions)

figma.json 변경 감지 → build.yml 자동 실행

• scripts/build.mjs 실행 → src/*.ts 재생성
• 변경사항 자동 커밋 (봇)
• Slack 알림: pdt-general 채널에 @frontend @design_pdt 멘션과 함께 "publish 필요" 알림

3. 수동 배포 (GitHub Actions)

1. https://github.com/NURIHAUS-Dev/nuri-design-token/actions
2. 좌측 "Publish package" 선택
3. "Run workflow" 클릭
4. 버전 타입 선택:
   • patch (0.1.0 → 0.1.1) — 버그 수정, 토큰 값 수정
   • minor (0.1.0 → 0.2.0) — 새 토큰 추가
   • major (0.1.0 → 1.0.0) — Breaking change
5. "Run workflow" 확인

→ 자동으로 버전 bump + npm publish + GitHub Release 생성

4. 소비 레포에서 업데이트

yarn upgrade @nurihaus/design-tokens

GitHub Secrets 설정 (최초 1회)

1. NPM 토큰

1. npmjs.com → Access Tokens → Generate New Token (Granular)
   • Packages: @nurihaus/design-tokens → Read and write
   • Automation 체크 필수
2. GitHub 레포 → Settings → Secrets and variables → Actions
   • New repository secret
   • Name: NPM_TOKEN
   • Value: 발급받은 토큰

2. Slack 토큰 (알림용)

1. Slack API → 앱 선택 (또는 새로 생성)
2. OAuth & Permissions → Bot Token Scopes 추가:
   • chat:write
   • chat:write.public
3. Install to Workspace → Bot User OAuth Token 복사 (xoxb-...)
4. GitHub 레포 → Settings → Secrets and variables → Actions
   • New repository secret
   • Name: SLACK_TOKEN
   • Value: 복사한 토큰

알림 내용:

• 디자이너가 토큰 수정 → 빌드 완료 → pdt-general 채널 알림
• @frontend @design_pdt 그룹 멘션
• Publish workflow 링크 및 실행 방법 안내
• 변경 내역 커밋 링크 제공

참고:

• 배포(publish) 완료 시에는 별도 알림 없음 (수동 작업이므로 실행자가 이미 인지)