使い方
- まず、semantic 名や component alias 名が大きくは崩れていない状態まで整えます。
- 次に target system に近い preset を選び、hover・active・focus・disabled・selected のような state alias を先に確認します。
- state 層が自然なら、CSS 変数や JSON を仕様書やコードレビューへそのまま渡します。
Wave 60 拡張
component alias から state alias へ進む
このページは「component 名はだいたい見えた」の次に置きます。答えたい問いは 1 つだけで、その alias を hover・active・focus などの state 名でどう渡すかです。
ライトの state alias
ダークの state alias
CSS 変数
JSON
近いページとの使い分け
アクセシブル配色パレットは role 色を組む段階です。semantic カラートークンは semantic 名を付ける段階です。component カラートークンは button・card・input・nav の alias 名を付ける段階です。このページは、その次に hover・active・focus・disabled・selected のような state alias 名が必要なときに使います。カラートークンプレビュー、カラートークン監査、カラートークン差分は、見た目確認や比較が主目的のときに使います。
FAQ
このページで何が作れますか？
採用済みの component alias を、hover・active・disabled・focus・selected などの state token 名へ落とし、CSS 変数と JSON を出力できます。
component カラートークンとの違いは何ですか？
component カラートークンは button・card・input などの alias 名を付ける段階です。このページは、その alias を state 名へ展開する段階です。
カラートークン出力との違いは何ですか？
カラートークン出力は role ベースの bundle をそのまま handoff する段階です。このページは、その前に state alias 名が必要なときに使います。
共有URLには何が入りますか？
基準色、接頭辞、AA/AAA 目標、state preset、ダーク alias を含めるかどうかが入ります。