パレット
固定プリセット色とコピー結果のフィードバック。
2つのファミリー
プリセットのパレット
色見本を選ぶと、その変数をコピーできます。
blue
violet
各色見本は、どちらのテーマでも同じ固定のプリセット値を表示します。
使用箇所： 色のガイド.
使い方とインターフェース
DemoPalette は、ステージに div.ui-palette を持つトレイを描画します。各ファミリーに名前付きの ui-palette-row があり、各段階に ui-palette-chip ボタンがあります。families で色相を絞れます。チップを押すと var(--color-<family>-<step>) をコピーし、共通の ui-copy-status 行に結果を通知します。
<DemoPalette families={["blue", "violet"]} /><div class="ui-palette"> <div class="ui-palette-row" role="group" aria-label="blue palette"> <span>blue</span> <button type="button" class="ui-palette-chip" aria-label="Copy color-blue-5" style="background-color: …"></button> … </div></div>幅の狭いページでは、各行が 7 列に折り返され、ファミリー名はその上に表示されます。