セマンティックカラートークン — Success、Warning、Error、Info状態

セマンティックカラートークンのデザイン

セマンティックカラートークンは、抽象的な意味を特定のカラー値にマッピングします。「グリーンをどこに使うか？」ではなく「successを意味するカラーは何か？」という質問に答えます。

コアセマンティックロール

すべてのデザインシステムには、少なくとも4つのセマンティックカラーロールが必要です：

:root {
  /* Success */
  --colors-success: #16a34a;
  --colors-success-light: #bbf7d0;
  --colors-success-dark: #15803d;
  --colors-on-success: #ffffff;

  /* Warning */
  --colors-warning: #ca8a04;
  --colors-warning-light: #fef08a;
  --colors-warning-dark: #a16207;
  --colors-on-warning: #000000;

  /* Error / Danger */
  --colors-error: #dc2626;
  --colors-error-light: #fecaca;
  --colors-error-dark: #b91c1c;
  --colors-on-error: #ffffff;

  /* Info */
  --colors-info: #2563eb;
  --colors-info-light: #bfdbfe;
  --colors-info-dark: #1d4ed8;
  --colors-on-info: #ffffff;
}

背景と前景のペア

各セマンティックカラーには背景と前景のバリアントが必要です。-lightバリアントは微妙な背景（トースト通知など）として機能し、ベースカラーはアイコンやボーダーに使用します。

アクセシビリティの考慮

セマンティックカラーには常にコントラストが安全なテキストカラーを対にしてください。--on-*パターン（例：--on-error）により、基礎となるカラーに関係なく読みやすいテキストが保証されます。