@x-plat/tokens-default

XPLAT 디자인 시스템의 기본 브랜드 토큰 패키지. 색상은 blue 계열 primary 기반.

설치

npm install @x-plat/tokens-default

사용법

1. CSS 변수 import (가장 일반적)

import "@x-plat/tokens-default/tokens.css";

:root 에 모든 토큰을 CSS 변수로 주입한다.

2. JS 객체 import (CSS 생성기 등에서)

import {
  brand,           // 색상 brand
  system,          // 색상 system (success/error/warning/info/link)
  spacingBrand,    // spacing brand
  typoBrand,       // typography brand (default density)
  // core 재export
  primitive,
  semantic,
  spacingPrimitive,
  spacingSemantic,
  typoPrimitive,
  typoSemantic,
} from "@x-plat/tokens-default";

3. Figma 플러그인 (DTCG JSON)

https://unpkg.com/@x-plat/tokens-default/dist/tokens.dtcg.json

@x-plat/figma-plugin-init-tokens 플러그인이 이 URL 을 자동으로 fetch.

4-layer 구조

primitive    (tokens-core)   기초 팔레트 / 사이즈
   ↓
brand        (이 패키지)      primary=blue / secondary=light-blue / neutral
system       (이 패키지)      success=green / error=red / warning=yellow / info=blue / link=deep-purple
   ↓
semantic     (tokens-core)   text/surface/border/icon/emphasis/interaction

컴포넌트는 semantic 만 사용. brand/system 까지가 브랜드별 차별점.

CSS 변수 prefix

• --primitive-* : 기초 팔레트
• --brand-* : brand 계열
• --system-* : system 계열 (success/error/warning/info/link)
• --semantic-* : 의미 기반 매핑 (컴포넌트가 사용)
• --spacing-* : 모든 spacing
• --typo-* : typography (primitive)
• --typo-brand-* : typography brand
• --semantic-typo-* : typography semantic
• .typo-display-1-b 등 utility class 도 함께 제공

라이선스

Private. XPLAT WOONG.