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