디자인 토큰이란

• 디자인에서 반복해서 사용하는 값을 이름 붙여 관리하는 것.

예시

일반적으로 특정 컴포넌트에 스타일을 주려면 다음과 같이 [css attribute] : [css value]형식으로 스타일을 줌.

button {
  color: #ffffff;
  background: #1877f2;
  border-radius: 8px;
} 

하지만 특정 css value가 많이 쓰인다면? ⇒ 값을 변수화 시켜서 사용하면 일괄적으로 css를 관리할 수 있어 유지보수성이 향상됨

const tokens = {
  colorPrimary: "#1877f2",
  colorTextOnPrimary: "#ffffff",
  radiusMedium: "8px",
}

button {
  color: var(--color-text-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-medium);
}

디자인 시스템에서 디자인 토큰

• 디자인 토큰 계층 구조는 일반적으로 다음의 구조를 가지고 있음 Primitive Token → Semantic Token → Component Token

출처: https://ant.design/docs/react/customize-theme

• Primitive Token(packages/themes/*/dist/theme.css)

  

• Semantic Token(packages/themes/*/dist/theme.css )

  • 용도에 이름을 붙인 css 변수

  

• Component Token(packages/themes/*/dist/theme.css )

  • 컴포넌트내 구성요소에 이름을 붙인 css 변수

  

Astryx는 어떻게 하고 있나

• 총 6개의 theme가 있다(https://astryx.atmeta.com/themes). 그리고 각각의 테마별로 자신만의 디자인 토큰들을 가지고있다.
  • 테마 사용은 다음과 같이 할 수 있다.

import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: React.ReactNode}) {
  return (
    <Theme theme={neutralTheme}>
      {...}
    </Theme>
  );
}

• Consumer가 커스터마이징 가능하다(apps/sandbox/src/themes/theme-family/ocean-calm.ts )

  import {defineTheme} from '@astryxdesign/core/theme';
  import {oceanTheme} from '@astryxdesign/theme-ocean/built';
  
  export const oceanCalmTheme = defineTheme({
    name: 'sandbox-ocean-calm',
    extends: oceanTheme,
    localTokens: {'--sandbox-family-wave-width': '4px'},
    tokens: {
      '--color-accent': 'rgb(0 109 119)',
      '--color-background-surface': 'rgb(230 255 251)',
      '--color-text-primary': 'rgb(0 75 80)',
    },
    components: {
      button: {
        base: {borderColor: 'rgb(0 75 80)'},
        'variant:primary': {backgroundColor: 'rgb(0 109 119)'},
      },
    },
  });