使い方
- まず、セマンティック・コンポーネント・状態 の エイリアス 名が大きくは崩れていない状態まで整えます。
- 次に preset と バンドル の有無を選び、テーマカードで各 バンドル の役割差を先に確認します。
- バンドル の境界が自然なら、CSS 変数や JSON を仕様書やコードレビューへ渡します。
便利ツール
1 つの トークン 系から、複数テーマ バンドル へ進む
このページは「トークン 名はだいたい見えた」の次に置きます。答えたい問いは、ライト・ダーク・代替ブランド・高コントラストをどう束ねるかです。
テーマカード
CSS 変数
JSON
近いページとの使い分け
アクセシブル配色パレットは ロール 色を組む段階です。セマンティック カラートークン、コンポーネント カラートークン、状態 カラートークンは、1 つの トークン 系の命名を固める段階です。このページは、その層が見えたあとにライト・ダーク・代替ブランド・高コントラストの バンドル を作る段階に置きます。カラートークンプレビュー、カラートークン監査、カラートークン差分、カラートークン出力は、確認・比較・最終出力が主目的のときに使います。
FAQ
このページで何が作れますか？
採用済みの基準色から、ライト・ダーク・代替ブランド・高コントラストの トークン バンドル をまとめ、CSS 変数と JSON を出力できます。
状態 カラートークンとの違いは何ですか？
状態 カラートークンは ホバー・アクティブ・フォーカス などの エイリアス 名を固める段階です。このページは、その トークン 層が見えたあとに複数テーマへ束ねる段階です。
カラートークン出力との違いは何ですか？
カラートークン出力は 1 つの トークン バンドル を 引き渡し する段階です。このページは、同じ基準色からライト・ダーク・代替ブランドなど複数 バンドル を並べたいときに使います。
共有URLには何が入りますか？
基準色、接頭辞、AA/AAA 目標、preset、ダーク・代替ブランド・高コントラスト バンドル を含めるかどうかが入ります。