Design Tokens
@featuring-corp/design-tokens — 300개 이상의 디자인 토큰 (색상, 간격, 타이포그래피, 반지름, 그림자)
@featuring-corp/design-tokens
3-Layer 토큰 아키텍처 기반 디자인 토큰 패키지. CSS 변수와 JavaScript 객체로 제공합니다.
설치
npm install @featuring-corp/design-tokens3-Layer 아키텍처
| 레이어 | 역할 | 예시 |
|---|---|---|
| Global | 브랜드가 정의한 원시 값 (Color Set 포함) | --global-colors-primary-60, --global-spacing-400 |
| Semantic | UI 용도에 매핑 | --semantic-color-text-1, --semantic-color-background-1 |
| Component | 컴포넌트별 디자인 토큰 | Button의 primary.default, Tag의 red.hover |
토큰 목록
| 토큰 | 설명 |
|---|---|
| Colors | 14개 색상 스케일 × 10단계 + Gray(11단계) + Primary 팔레트 |
| Spacing | 0~2000 간격 스케일 |
| Typography | Heading, Body, Caption 타이포그래피 |
| Font Size | 폰트 크기 스케일 |
| Font Weight | 폰트 두께 |
| Line Height | 줄 높이 스케일 |
| Radius | 모서리 반지름 |
| Elevation | 그림자 / 엘리베이션 |
| Base Styles | Reset + Normalize CSS |
CSS 변수 사용
.my-card {
background-color: var(--semantic-color-background-1);
color: var(--semantic-color-text-1);
padding: var(--global-spacing-400);
border-radius: var(--global-radius-200);
}JavaScript 사용
import { global, semantic } from '@featuring-corp/design-tokens';
global.spacing[400] // '1rem'
global.colors.red[50] // '#e97259'
semantic.color.background[1] // 'var(--global-colors-white)'