使い方
- まず、ロール 色が product・文書・marketing のどれかとして大きくは崩れていない状態まで整えます。
- 次に コンポーネント preset を選び、button・card・input・nav・badge のような エイリアス 名を先に確認します。
- エイリアス 層が自然なら、CSS 変数や JSON を design system や仕様書へそのまま渡します。
Wave 59 拡張
セマンティック や ロール から コンポーネント エイリアス へ進む
このページは「色の役割はだいたい見えた」の次に置きます。答えたい問いは 1 つだけで、その役割色を button・card・input のような コンポーネント 名でどう渡すかです。
ライトの エイリアス
ダークの エイリアス
CSS 変数
JSON
近いページとの使い分け
アクセシブル配色パレット は ロール 色を組む段階です。セマンティック カラートークン は、その ロール に セマンティック 名を付ける段階です。カラートークンプレビュー や カラートークン監査 は見た目確認や整合性点検の段階です。状態 カラートークン は コンポーネント エイリアス が固まったあとで ホバー・アクティブ・フォーカス・無効・selected を名付ける段階です。カラートークン出力 は ロール バンドル のまま 引き渡し する段階です。このページは、その途中で button・card・input・nav・badge のような コンポーネント エイリアス 名が必要なときに使います。
FAQ
このページで何が作れますか？
採用済みの ロール 色を、button・card・input・nav・badge・記事ブロックなどの コンポーネント エイリアス へ落とし、CSS 変数と JSON を出力できます。
セマンティック カラートークンとの違いは何ですか？
セマンティック カラートークンは ロール 色に名前を付ける段階です。このページは、その名前づけ済みの色を button や card などの コンポーネント エイリアス へ落とす段階です。
カラートークン出力との違いは何ですか？
カラートークン出力は ロール ベースの バンドル をそのまま 引き渡し する段階です。このページは、その前に コンポーネント ごとの エイリアス 名が必要なときに使います。
共有URLには何が入りますか？
基準色、接頭辞、AA/AAA 目標、コンポーネント preset、ダーク エイリアス を含めるかどうかが入ります。