デザイントークンについて
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というファイル名にする（拡張子はプロジェクトで異なって良い）