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