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

디자인 토큰

디자인 토큰은 서로 다른 모드(default 및 dark), 서로 다른 도구(Figma 및 코드)에 대한 값(색상, 간격 및 지속 시간과 같은)의 단일 진실의 소스를 제공합니다.

사용법

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

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

CSS

@import '@gitlab/ui/src/tokens/build/css/tokens';

h1 {
  color: var(--gl-text-color-heading); /* #1f1e24 */
}

SCSS

@import '@gitlab/ui/src/tokens/build/scss/tokens';

h1 {
  color: $gl-text-color-heading; /* #1f1e24 */
}

JavaScript

import { GL_TEXT_COLOR_HEADING } from '@gitlab/ui/src/tokens/build/js/tokens';

const color = GL_TEXT_COLOR_HEADING; // #1f1e24

다크 모드

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

CSS

@import '@gitlab/ui/src/tokens/build/css/tokens.dark';

h1 {
  color: var(--gl-text-color-heading); /* #fff */
}

SCSS

@import '@gitlab/ui/src/tokens/build/scss/tokens.dark';

h1 {
  color: $gl-text-color-heading; /* #fff */
}

JavaScript

import { GL_TEXT_COLOR_HEADING } from '@gitlab/ui/src/tokens/build/js/tokens.dark';

const color = GL_TEXT_COLOR_HEADING; // #fff

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

형식

저희 디자인 토큰은 디자인 토큰 형식 모듈을 사용하여 다양한 도구와 통합되는 디자인 토큰을 정의하고 필요한 파일 형식으로 변환합니다. 이는 커뮤니티 그룹 드래프트 보고서로, 디자인 토큰 커뮤니티 그룹에서 발표된 것입니다.

디자인 토큰 형식 모듈은 디자인 토큰 파일에 대한 *.token.json 확장자 표준과 이름 및 $값 및 명시적 $타입을 포함하는 형식을 촉진합니다.

// text.color.tokens.json
{
  "heading": {
    "$value": "#1f1e24",
    "$type": "color"
  }
}

자동화

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

변환

변환은 컴파일 전에 디자인 토큰을 수정하고, 제공된 경우 모드 값을 사용하여 컴파일된 출력을 접두사로 붙이는 데 사용됩니다.

변환 그룹

변환 그룹은 플랫폼에 변환을 적용합니다. 예를 들어, CSS 및 JavaScript는 CSS 출력을 위해 kebab-case를, SCSS 출력을 위해 kebab-case를 적용하는 서로 다른 변환 그룹을 갖습니다.

파서

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

이름

디자인 토큰 이름은 값의 고유하고 대소문자를 구분하는 식별자입니다.

이름은 다음과 같은 문자 제한이 있습니다:

1. 이름은 $로 시작해서는 안 됩니다.
2. 이름은 { 또는 }을 포함해서는 안 됩니다.
3. 이름은 .을 포함해서는 안 됩니다.

{
  "color": {
    "heading": {
       "$value": "#1f1e24",
       "$type": "color"
    }
  }
}

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

CSS

:root {
  --gl-text-color-heading: #1f1e24;
}

SCSS

$gl-text-color-heading: #1f1e24;

JavaScript

const GL_TEXT_COLOR_HEADING = "#1f1e24";

값

이름과 $값은 디자인 토큰의 최소 요구 속성입니다. $값은 예약어입니다.

{
  "token name": {
    "$value": "16"
  }
}

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

별칭

별칭은 디자인 토큰 값이 다른 토큰을 참조하도록 허용합니다.

{
  "custom-token": {
    "$value": "{text.color.heading}"
  }
}

이를 통해 참조를 사용하여 생성된 CSS 및 SCSS는 변수로 참조를 사용할 수 있습니다:

CSS

:root {
  --gl-custom-token: var(--gl-text-color-heading);
}

SCSS

$gl-custom-token: $gl-text-color-heading;

유형

도구가 값을 신뢰성 있게 해석할 수 있도록 선택적으로 $type 속성이 사용됩니다.

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

모드

모드는 예를 들어 밝은 모드와 어두운 모드 색상과 같이 다양한 사용 사례에 대한 값 업데이트를 가능하게 합니다.

모드는 $value 속성의 객체로 정의됩니다:

{
  "텍스트 색상": {
    "$value": {
      "default": "#000",
      "dark": "#fff",
    },
    "$type": "color"
  }
}

각 모드 값이 정의되면 별도의 출력으로 컴파일됩니다:

CSS

tokens.css

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

tokens.dark.css

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

CSS

tokens.scss

$text-color: #000;

tokens.dark.scss

$text-color: #fff;

JavaScript

tokens.js

export const TEXT_COLOR = "#000";

tokens.dark.js

export const TEXT_COLOR = "#fff";