• 사용법
  • 다크 모드
• 디자인 토큰 생성 또는 업데이트
  • 형식
  • 변환
  • 이름
  • 그룹
  • 값
  • 별칭
  • 유형
  • 모드
    • 기본 디자인 토큰
    • 다크 모드 디자인 토큰

디자인 토큰

디자인 토큰은 서로 다른 도구(예: Figma 및 코드)에 대한 기본 및 다크 같은 여러 모드에 대한 값(예: 색상, 간격 및 기간)에 대한 단일 진실의 원천을 제공합니다.

사용법

우리는 gitlab-ui 저장소에서 디자인 토큰을 관리합니다. 이 저장소는 npm에서 게시되고, yarn을 사용하여 종속성으로 관리됩니다. 새 버전으로 업그레이드하려면 yarn upgrade @gitlab/ui를 실행하세요.

디자인 토큰은 CSS(사용자 지정 속성), JavaScript(ES6 상수/JSON) 및 SCSS(변수)에서 사용하기 위해 기본/다크 모드 및 파일 형식으로 제공됩니다. 예를 들어:

JavaScript

import { BLUE_500 } from '@gitlab/ui/dist/tokens/js/tokens';

const color = BLUE_500; // #1f75cb

CSS

@import '@gitlab/ui/dist/tokens/css/tokens';

.elem {
  color: var(--blue-500); /* #1f75cb */
}

SCSS

@import '@gitlab/ui/dist/tokens/scss/tokens';

.elem {
  color: $blue-500; /* #1f75cb */
}

다크 모드

색상 디자인 토큰이 다크 모드에 대해 업데이트되는 경우, 해당 값은 파일 이름에 .dark가 추가된 파일에서 동일한 이름으로 제공됩니다. 예를 들어:

JavaScript

import { BLUE_500 } from '@gitlab/ui/dist/tokens/js/tokens.dark';

const color = BLUE_500; // #428fdc

CSS

@import '@gitlab/ui/dist/tokens/css/tokens.dark';

.elem {
  color: var(--blue-500); /* #428fdc */
}

SCSS

@import '@gitlab/ui/dist/tokens/scss/tokens.dark';

.elem {
  color: $blue-500; /* #428fdc */
}

디자인 토큰 생성 또는 업데이트

형식

우리의 디자인 토큰은 다른 도구와 통합되는 디자인 토큰을 정의하기 위해 디자인 토큰 형식 모듈을 사용합니다. 이는 커뮤니티 그룹 초안 보고서로 디자인 토큰 커뮤니티 그룹에 의해 발표되었습니다.

디자인 토큰 형식 모듈은 디자인 토큰 파일에 대해 *.token.json 확장자 표준을 제공하며, 이는 이름과 $value를 포함한 형식과 명시적인 $type을 가지고 있습니다.

// color.tokens.json
{
  "토큰 이름": {
    "$value": "#000",
    "$type": "색상"
  }
}

변환

우리의 디자인 토큰은 style-dictionary를 사용하여 디자인 토큰을 사용 가능한 파일 형식(CSS/SCSS/JavaScript/JSON)으로 변환합니다.

파서는 디자인 토큰 형식 속성을 style-dictionary 디자인 토큰 속성과 호환되도록 만듭니다.

이름

디자인 토큰 이름은 값의 고유하고 대소문자를 구분하는 식별자입니다. 이름은 서로 다른 모드에서 스타일 오버라이드를 생성하기 위해 사용될 수 있습니다.

그룹

그룹은 카테고리 내에서 토큰을 임의로 묶는 방법입니다. 토큰의 유형이나 목적을 추측하는 데 사용해서는 안 됩니다. 이를 위해 $type 속성을 사용하세요.

{
  "그룹 이름": {
    "토큰 이름": {
      "$value": "#000"
    }
  }
}

그룹 이름은 생성된 출력에서 디자인 토큰 이름 앞에 붙습니다. 예를 들어:

JavaScript

const GROUP_NAME_TOKEN_NAME = "#000";

CSS

:root {
  --group-name-token-name: #000;
}

SCSS

$group-name-token-name: #000;

값

이름과 $value는 디자인 토큰의 최소 필수 속성이며, $value는 예약된 단어입니다.

{
  "토큰 이름": {
    "$value": "16"
  }
}

디자인 토큰 값은 문자열 또는 alias일 수 있습니다. 예를 들어:

별칭

디자인 토큰의 값은 다른 토큰을 참조할 수 있습니다. 예를 들어 별칭 토큰 text-color의 값은 {color.default}입니다.

{
  "text-color": {
    "$value": "{color.default}"
  }
}

이를 통해 출력 참조를 사용하여 생성된 CSS 및 SCSS에서 변수로 참조를 사용할 수 있습니다.

CSS

:root {
  --text-color: var(--color-default);
}

SCSS

$text-color: $color-default;

유형

선택적인 $type 속성은 값 변환 및 토큰 그룹화에 사용됩니다. 예를 들어:

{
  "토큰 이름": {
    "$value": "#000",
    "$type": "color"
  }
}

이는 문서 작성이나 툴 구성에 사용될 수 있는 tokens.grouped.json 출력을 생성합니다.

{
  "color": {
    "토큰 이름": "#000"
  }
}

모드

모드는 기본 토큰 위에서 처리되며 다른 모드와 결합되거나 스타일시트에서 별도로 상속될 수 있습니다. 모드는 .mode.token.json으로 표시되며 파일별로 토큰을 필터링하는데 사용됩니다. 예를 들어, 다크 모드 토큰 파일의 경우 .dark.token.json으로 끝납니다.

기본 디자인 토큰

입력

color.tokens.json

{
  "text-color": {
    "$value": "#000",
    "$type": "color"
  }
}

출력

tokens.grouped.json

{
  "color": {
    "text-color": "#000"
  }
}

tokens.js

export const TEXT_COLOR = "#000";

tokens.scss

$text-color: #000;

tokens.css

:root {
  --text-color: #000;
}

다크 모드 디자인 토큰

다른 모드를 위한 디자인 토큰은 기본 토큰과 별도로 생성됩니다. 토큰에 같은 이름을 사용하면 가져올 때 기본값을 덮어쓸 것입니다. 예를 들어:

입력

color.dark.tokens.json

{
  "text-color": {
    "$value": "#fff",
    "$type": "color"
  }
}

출력

tokens.dark.grouped.json

{
  "color": {
    "text-color": "#fff"
  }
}

tokens.dark.js

export const TEXT_COLOR = "#fff";

tokens.dark.scss

$text-color: #fff;

tokens.dark.css

:root {
  --text: #fff;
}