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

디자인 토큰

디자인 토큰은 다양한 도구 (예: Figma 및 코드)를 위한 다른 모드(default 및 dark)에서 값 (예: 색상, 간격 및 기간)의 단일 참조원을 제공합니다.

사용 방법

우리는 gitlab-ui 리포지터리에서 디자인 토큰을 관리합니다. 이 리포지터리는 npm에 공개되어 있으며 yarn으로 의존성을 관리합니다. 새 버전으로 업그레이드하려면 yarn upgrade @gitlab/ui을 실행하십시오.

디자인 토큰은 다양한 모드(default/dark) 및 파일 형식으로 제공되며 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"
  }
}

디자인 토큰 값은 문자열 또는 별칭일 수 있습니다. 예시:

별칭

디자인 토큰의 값은 다른 토큰을 참조할 수 있는데, 예를 들어 별칭 토큰 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": "색상"
  }
}

이는 문서 또는 도구 구성에 사용될 수 있는 tokens.grouped.json 출력을 생성합니다:

{
  "색상": {
    "토큰 이름": "#000"
  }
}

모드

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

기본 디자인 토큰

Input

color.tokens.json

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

Output

tokens.grouped.json

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

tokens.js

export const TEXT_COLOR = "#000";

tokens.scss

$text-color: #000;

tokens.css

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

다크 모드 디자인 토큰

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

Input

color.dark.tokens.json

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

Output

tokens.dark.grouped.json

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

tokens.dark.js

export const TEXT_COLOR = "#fff";

tokens.dark.scss

$text-color: #fff;

tokens.dark.css

:root {
  --text: #fff;
}