Material Designトークンシステム — 完全なカラーとスペーシングトークン

Material Designトークンアーキテクチャ

GoogleのMaterial Designシステムは、リファレンストークン（生のカラー値）、システムトークン（ロールベースのマッピング）、コンポーネントトークン（特定のUI要素のオーバーライド）を分離する階層的なトークンアーキテクチャを定義しています。このガイドでは、最初の2つの層をデザイントークンとして構築することに焦点を当てます。

リファレンストークン

リファレンストークンは生のパレット値です。Material Design 3では、各カラーに13のトーン値（0, 10, 20, ..., 100）があります：

:root {
  --colors-primary-0: #000000;
  --colors-primary-10: #21005d;
  --colors-primary-20: #381e72;
  --colors-primary-40: #6750a4;
  --colors-primary-80: #d0bcff;
  --colors-primary-100: #ffffff;
}

システムトークン

システムトークンはロールを特定のリファレンストークン値にマッピングします。この分離がテーマ切り替えを可能にします：

:root {
  --colors-on-primary: var(--colors-primary-100);
  --colors-primary-container: var(--colors-primary-90);
  --colors-surface: var(--colors-neutral-98);
  --colors-on-surface: var(--colors-neutral-10);
}

Material Designのスペーシング

Material Designは4pxベースグリッドを使用します。スペーシングトークンはこのベースの倍数に従います：

:root {
  --spacing-xs: 4px;   /* 1x */
  --spacing-sm: 8px;   /* 2x */
  --spacing-md: 16px;  /* 4x */
  --spacing-lg: 24px;  /* 6x */
  --spacing-xl: 32px;  /* 8x */
}

タイポグラフィトークン

Material Design 3は、5つのカテゴリ（Display、Headline、Title、Body、Label）で構成されるタイプスケールを定義しており、それぞれにLarge、Medium、Smallのバリアントがあります。主要なトークンにはフォントファミリー、サイズ、ウェイト、行の高さ、文字間隔が含まれます。

このアプローチの利点

階層化アーキテクチャにより、ブランドのprimaryカラーを変更するにはリファレンストークンのみを更新すれば済みます。それに依存するすべてのシステムトークンとコンポーネントトークンが自動的に更新され、テーマ全体の変更が簡単になります。