@x-plat/tokens-cbio

XPLAT 디자인 시스템의 CBIO 브랜드 토큰 패키지. primary=green, neutral 색상 override.

@x-plat/tokens-default 기반 — color brand 의 primary / neutral 만 override, 나머지는 default 상속.

설치

npm install @x-plat/tokens-cbio
# @x-plat/design-system 과 함께 사용

사용법

색상 override (CSS)

design-system 의 style.css 를 먼저 import 한 뒤, cbio 의 tokens.css 를 import 해서 색상을 override.

import "@x-plat/design-system/style.css";          // 1) 컴포넌트 + default 토큰
import "@x-plat/tokens-cbio/tokens.css";           // 2) CBIO 색상으로 override

순서가 반대면 design-system 이 default 로 다시 덮어버린다.

Figma 플러그인

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

@x-plat/figma-plugin-init-tokens 플러그인 드롭다운에서 자동 발견.

CBIO 가 override 하는 부분

| 레이어 | 변경 | |---|---| | brand.primary | green 계열 hex (#017F5B 등) | | brand.neutral | warm gray 계열 hex | | 나머지 brand (secondary/base/categorical) | default 상속 | | system | default 그대로 | | spacingBrand, typoBrand | default 의 것을 re-export | | semantic | tokens-core 공통 |

CBIO 전용 추가 토큰

import { custom } from "@x-plat/tokens-cbio";

custom.oasis     // 9가지 oasis 색상
custom.google    // Google 색상 4종 (blue/red/yellow/green)

참고: custom 은 Figma 플러그인의 DTCG 출력에는 포함되지 않음. JS 모듈에서만 사용.

라이선스

Private. XPLAT WOONG.