システムがどのように機能するか
色は2つの層で層付けられます。 プリミティブ 生パレット - テールウィンドのデフォルトOKLCHスケールとFigmaで調整されたオーバーライドの便利な styles/theme.css. セマンティックトークン 上に座って、それらの原始者を参照してください インフォメーション - どのような色が、それが見えるものではない。 --color-text-secondary says “supporting copy”, not “neutral 500”.
コンポーネントは、セマンティックレイヤーのみを消費します。単一の間接は、システムが保守可能にするものです。プリミティブを解除するか、セマンティックトークンをリマップするか、コンポーネントのアップデートを一度に再マッピングします。コンポーネントファイルは変更しません。また、ダークモードへのパスです。 .dark theme.css のブロックは、同じトークンを暗値で再配置するので、コンポーネントは必要なくありません。 dark: プレフィックス。
トークン名は Figma 変数パスをミラーリングします(text/primary → --color-text-primary)、設計仕様は、検索テーブルなしでコードに変換します。クラス名で2倍のプレフィックスを注意してください - text-text-primary, bg-background-primary-default - 最初のセグメントは、Tailwindユーティリティで、残りの部分はトークンのフルセマンティックパスです。
1つのトークンシステム、2つのテーマ
追加 .dark ルート要素に。BoardUI は同じ意味のトークンをリマップします。そのため、すべてのコンポーネントが変更されます。
各テーマのマップ
軽い値を保って下さい :root ダークバリュー .dark.
semantic色を使用して下さい
のようなトークンを使う bg-background-primary-default、未加工色ではないです。
集中管理
コンポーネントレベルの回避 dark: オーバーライドするので、変更は予測可能にとどまります。
永続性と斬新な初期化スクリプトが含まれています。
インストールガイドを見る1つのアクセント、すべてのCTA
すべてのインタラクティブな表面 - プライマリボタン勾配、チェックボックス、ラジオ、スイッチ、スライダー、タブ、選択したサイドバー項目、フォーカスリング - シングルから読みます --color-accent-50…950 デフォルトは青色です。 下の任意の色合い(または完全にカスタムカラー)を選択し、このページのリティントライブを見てください。 チャートとステータスの色は意図的に置きます。
カスタムカラーは --color-accent-500 にそのまま配置されます。プライマリボタンのグラデーションの始点であり、フォーカスリングにも使われる段階です。残りの 10 段階はこの色を中心に生成されます。ボタンはこの色の上に白い文字を表示するため、文字が読める程度に暗い色を選んでください。
持ち帰る: eleven-variable オーバーライドをコピーし、テーマ.css のインポート後に貼り付けます。
フォアグラウンド
アイコンは、テキストを実行していない表面の上に描かれたすべてのもの、およびinverse/on-colorのフォアグラウンドを埋めます。
テキスト
型階層:見出しとキー値のプライマリ、コピーをサポートするためのセカンダリ、ヒントのtertiary、および無効なエラー状態。
背景
表面は塗りつぶします。フルは外側のキャンバスです。プライマリ、セカンド、およびtertiaryは、進行方向にネストされた表面とその相互作用状態を記述します。
ボーダー
ヘアラインとフォーカスリング。 ボタンの境界線は、ホバーとアクティブを介して暗くなり、フォーカスリングは、シングルブルーのアクセントです。
グラフ
Chart colors. Track is the background bar/ring behind a series, cursor the hover outline and dashed reference line, neutral an “other”-style data slice. The numbered accents are a categorical ramp — each pairs a base fill with a one-tone-darker active used for hover emphasis (the 400 → 500 recipe every chart follows). In charts these are consumed as CSS variables (e.g. fill=“var(--color-chart-1)”) rather than classes.
ステート
テーマを横断して安定し続けるセマンティックなフィードバックカラー。