How to read tokens

Styles

Material의 가이드라인에서 color 및 typograph에 대한 토큰을 나열하는 표를 찾을 수 있습니다.
토큰 참조 테이블을 사용하여 색상, 글꼴, 글꼴 크기, 글꼴 두께 등에 대한 Material의 기본값을 조회할 수 있습니다.
table은 role, system token, eference token및 the stored default value 간의 관계를 매핑합니다.

Component specs 

구성 요소 가이드의 Specs section 에서도 디자인 토큰을 찾을 수 있습니다.

이 표는 다음에 대한 데이터와 함께 다이어그램을 보여줍니다.

state:  구성 요소의 상호 작용 상태(enable, hovered, pressed)
element: 버튼의 container 또는 label text 와 같이 주어진 토큰 또는 값이 적용되는 구성 요소의 일부입니다.

design attribute: 색상이나 글꼴과 같이 token이나 value이 적용되는 스타일 측면입니다.

role: 시스템 토큰의 닉네임(예: 보조 컨테이너 색상, 제목 1).

token: 또는 value: 토큰에 저장되거나 하드코딩된 설계 속성을 정의하는 정보.

 

Using token tables

예:  filled button label text의 기본 색상을 조회하려면 먼저 공통 버튼 가이드라인 페이지의 specs tab으로 이동합니다.

다음으로 filled button의 색상 값을 보여주는 표를 찾고, element 아래에 나열된 레이블 텍스트를 찾습니다.
 토큰을 찾을때, 레이블 텍스트 색상의 token colum을 확인한다.

 

 

Reading token names

토큰 이름의 부분들은 마침표로 구분되며 가장 일반적인 정보(md)에서 가장 구체적인 정보(on-secondary)로 진행됩니다.

A. 디자인 시스템의 모든 토큰 이름은 Material Design의 경우 md와 같이 시스템 이름으로 시작합니다.
B. 토큰 유형의 약어: ref는 참조 토큰용입니다. sys는 시스템 토큰용입니다. comp는 구성 요소 토큰용입니다.
C. 토큰 이름은 토큰의 역할을 전달하기 위해 설명이 포함된 이름으로 끝납니다.

 

Types of tokens

 

Material에는 3가지 종류의 토큰이 있습니다.

Reference tokens
- 관련 값이 있는 사용 가능한 모든 토큰

 

System tokens

- Decisions and roles (디자인 시스템에 특성을 부여하는 ) 색상과 타이포그래피에서 높이와 모양에 이르기까지 

Component tokens
button icon의 색상과 같이 구성 요소의 element 에 할당된 디자인 속성

세 종류의 토큰을 사용하여 팀은 디자인 결정을 전체적으로 업데이트하거나 단일 구성 요소에 변경 사항을 적용할 수 있습니다.

Reference tokens

reference  token 은 md.ref로 시작합니다.

이러한 토큰은 디자인 시스템에서 사용할 수 있는 all  the style options을 구성합니다.

일반적으로 색상 또는 hex code for color or font and weight와 같은  static value을 가리킵니다. 

일반적인 용도는 다음과 같습니다.

Color hex value
Typefaces
font weights

reference  token은 다른 reference  token을 가리킬 수도 있습니다.

사용자 또는 장치 컨텍스트에 따라 변경되지 않습니다.

Material의 참조 토큰 목록은 일관된 Color, type, measurement 등을 위한 시작점을 제공합니다.

색상 및 타이포그래피 참조 토큰과 해당 값

System tokens

시스템 토큰은 md.sys로 시작합니다.

특정 Theme나 context에 맞게 디자인 언어를 체계화하는 decisions입니다.

System token은 ref token이 UI에서 제공하는 목적을 정의합니다.

Theme를 적용할 때, System token은 밝은 테마 또는 어두운 테마와 같이 context에 따라 다른 참조 토큰을 가리킬 수 있습니다. 

시스템 토큰은 static value가 아닌 참조 토큰을 가리켜야 합니다.

 

Component tokens

모든 component 토큰은 md.comp로 시작합니다.

component토큰은 container, label text, icon 및 state와 같은component를 구성하는 element 및 value을 나타냅니다.
component 토큰은 16진수 코드와 같은 하드 값이 아닌 system 또는 ref 토큰을 가리켜야 합니다.

일부 component style choices은 토큰으로 표현되지 않지만, design choices이 유사한 용도로 여러 구성 요소에 적용될 때마다 토큰을 사용해야 합니다.

참고: 머티리얼 디자인 component 토큰은 현재 개발 중입니다.

Contexts: Different default values

token은 조건에 따라 다른 값을 가리킬 수 있습니다.

이러한 조건을 context라고 하며 override values을 contextual values이라고 합니다.

다양한 context의 예에는 기기 폼 팩터, 어두운 테마, 조밀한 레이아웃, 오른쪽에서 왼쪽 쓰기 시스템이 포함됩니다.

 

context를 일종의 태그로 생각할 수 있습니다.

토큰 값에 다크 테마 태그가 지정된 경우 다크 테마 컨텍스트에서 기본 토큰 값을 재정의합니다.