Skip to main content

デザイントークンについて

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というファイル名にする(拡張子はプロジェクトで異なって良い)

参考サイト