ブランドカラートークン — Primary、Secondary、Accentカラーの定義

ブランドカラートークンの構築

ブランドカラートークンは、ブランドアイデンティティをコードレベルの決定に変換します。汎用的なカラーパレットとは異なり、ブランドトークンは組織のビジュアル言語に結びついたセマンティックな意味を持ちます。

命名戦略

良い命名戦略は、特定の色をトークン名にエンコードすることを避けます。--blue-500の代わりに、ロールベースの名前を使用します：

:root {
  /* ブランドカラー */
  --colors-brand-primary: #2563eb;
  --colors-brand-secondary: #7c3aed;
  --colors-brand-accent: #f59e0b;

  /* 拡張パレット */
  --colors-brand-primary-light: #60a5fa;
  --colors-brand-primary-dark: #1d4ed8;
  --colors-brand-secondary-light: #a78bfa;
  --colors-brand-secondary-dark: #5b21b6;
}

ライトとダークバリアント

各ブランドカラーには、異なるコンテキスト（ホバー状態、背景、カラー面上のテキスト）で使用するためのライトとダークのバリアントが必要です。

コントラストトークン

アクセシビリティのために、各ブランドカラーにその上で使用するテキストカラーを定義するコントラストトークンを対にします。

マルチブランドサポート

組織が複数のブランドを管理する場合、トークンを階層的に構造化します。各ブランドが同じトークン名をオーバーライドすることで、共有コンポーネントコードがブランド間で変更なしに機能します。