デザイントークンについて
UI を統一する目的でデザイントークンを CSS 変数で利用します。
デザイントークンの定義
デザイントークンは、src/theme/tokens
以下に定義します。
プリミティブトークン (Primitive Tokens)
プリミティブトークンは、デザインシステムの最小のトークンです。
プリミティブトークンはプリミティブトークンは以下のように定義します。
- プリミティブトークンはstyle-dictionaryを利用して作成する。
- プリミティブトークンの接頭語は
color
,fontSize
,fontWeight
,fontFamily
,lineHeight
,letterSpacing
,borderRadius
,borderWidth
,boxShadow
,opacity
のいずれかで始める。 - プリミティブトークンは
primitive
というファイル名にする(拡張子はプロジェクトで異なって良い)
セマンティックトークン (Semantic Tokens)
複数の異なる UI タイプで利用されるトークンはセマンティックトークンとして定義します。
note
特定の UI タイプでしか利用されないトークンはコンポーネントトークンなります。
プリミティブトークンは以下のように定義します。
- セマンティックトークンは、プリミティブトークンを組み合わせて作成する。
- セマンティックトークンの命名は
カテゴリー
,プリミティブトークンの接頭語
,名前
の順で定義する。 - セマンティックトークンは、
semantic
というファイル名にする(拡張子はプロジェクトで異なって良い)
例
// UI要素名から始める
textColorError: var(--colorRed500)
headingFontSizeMd: var(--fontSizeXl)
bgColorPrimary: var(--colorBlue500)
inputBorderColorDefault: var(--borderColor500)
コンポーネントトークン (Component tokens)
コンポーネントトークンは、特定の UI タイプでしか利用されないトークンとして定義します。
派生コンポーネントや類似のコンポーネントで共通化したいときに利用します。
プリミティブトークンは以下のように定義します。
- コンポーネントトークンは、プリミティブトークンとセマンティックトークンを組み合わせて作成する。
- コンポーネントトークンの命名は
UIタイプ
,プリミティブ/セマンティックトークンの接頭語
,名前
の順で定義する。 - コンポーネントトークンは、
component
というファイル名にする(拡張子はプロジェクトで異なって良い)