@x-plat/tokens-core

XPLAT 디자인 시스템의 공통 토큰 + semantic 매핑 패키지.

Figma 변수 컬렉션과 1:1 대응하는 구조를 정의한다 — 컬러는 semantic, 스페이싱은 semantic, 타이포는 primitive + semantic.

모든 브랜드 토큰 패키지(default / cbio / haetbitgil / daibee-ir) 가 이 패키지에 의존한다.

설치

npm install @x-plat/tokens-core

Export 내용

import {
  // Color — semantic 매핑 (brand/system 은 브랜드 패키지가 정의)
  semantic,          // text/surface/border/icon/interaction
  CATEGORICAL_SEMANTIC_RULE,
  brand,             // var(--brand-X-Y) 헬퍼
  brandCat,          // var(--brand-categorical-N-Y) 헬퍼
  system,            // var(--system-X-Y) 헬퍼
  cssVar,

  // Spacing — semantic 단일 레이어 (raw px)
  spacingSemantic,   // space/control-height/radius/stroke

  // Typography — primitive(pc/tablet/mobile 3모드) + semantic
  typoPrimitive,     // font-family/size/line-height/weight/letter-spacing (responsive)
  typoSemantic,      // 합성 스타일 (display-1-b 등 23개)
  TYPO_MODES,
  typoFont,
  typoSize,
  typoLh,
  typoLs,
  typoWeight,

  // Effects
  opacityPrimitive,
  shadowPrimitive,
  effectsSemantic,
} from "@x-plat/tokens-core";

직접 사용보다는 브랜드 패키지로

일반 앱에서는 이 패키지를 직접 쓰기보다 브랜드 토큰 패키지(@x-plat/tokens-default 등) 를 통해 간접적으로 사용한다.

브랜드 패키지가 이 core 의 semantic 매핑에 자기 brand/system(hex 실값) 을 결합해 완성된 토큰 세트를 제공한다. 스페이싱·타이포는 브랜드 오버라이드 레이어가 없다 — core 고정.

라이선스

Private. XPLAT WOONG.