@29cm/design-token

토큰은 디자인 의사결정을 담은 디자인 언어입니다 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 하드 코딩된 값 대신 사용합니다

디자인 토큰은 여러 디자인 도구, 개발환경 간에 디자인 시스템의 최소 단위를 공유할 수 있도록 표준을 제공하는 것을 목표로 합니다. 29CM의 디자인 언어이자, 스타일 집합입니다. 더 이상 그리지마세요.

@29cm/stylesheet 에서 정의된 raw value들을 typescript 환경에서 바로 사용가능하도록 합니다.

토큰 구조

• scale token
  scale token은 raw value 하나에 이름을 부여한 것 입니다. scale의 이름을 통해 전체 디자인에 사용되는 모든 값을 유한하게 유지할 수 있습니다.
• static scale token
  static scale token은 모든 theme에서 일관된 색상, 크기를 가집니다
• semantic token
  semantic token은 scale token의 조합(Composition)으로 구체적인 디자인 의도를 표현한 단위입니다. 실제 디자인과 개발과정에서 주요 빌딩 블록에 사용됩니다

설치법

ruler를 사용하고자 하는 프로젝트에서 패키지를 설치해주세요. 우리는 yarn을 사용합니다. @29cm/stylesheet도 반드시 설치해줘야해요.

yarn add @29cm/stylesheet @29cm/design-token

사용법

import { vars } from '@29cm/design-token';

// 시맨틱 토큰
vars.$semantic.color.surfaceAccent;

// 스케일 토큰
vars.$scale.color.red300;

// 스태틱 스케일 토큰
vars.$staticScale.color.staticScaleBlackAlpha500;