@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)
  effectsBrand,    // effects brand
  // core 재export
  semantic,
  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.

레이어 구조

brand        (이 패키지)      primary=blue / secondary=light-blue / neutral  ← hex 실값
system       (이 패키지)      success=green / error=red / warning=yellow / info=blue / link=deep-purple
   ↓
semantic     (tokens-core)   text/surface/border/icon/interaction

컴포넌트는 semantic 만 사용. brand/system 까지가 브랜드별 차별점이다. 스페이싱(semantic 단일 레이어)과 타이포(primitive + semantic)는 tokens-core 고정이라 브랜드가 오버라이드하지 않는다.

CSS 변수 prefix

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

라이선스

Private. XPLAT WOONG.