コンポーネント

スウォッチ

名前付きの役割と実際の色面。

役割と段階

Canvasbg-surface-canvas

Raisedbg-surface-raised

Insetbg-surface-inset

Blue 60bg-blue-60

使用箇所：デザインシステムの概要.

使い方とインターフェース

DemoSwatch は figure.ui-swatch を描画します。class と style を受け取る ui-swatch-paint の面と、label および任意の value を表示するキャプションで構成されます。

<DemoSwatch label="Raised" value="bg-surface-raised" className="bg-surface-raised" />

<figure class="ui-swatch">  <div class="ui-swatch-paint bg-surface-raised" aria-hidden="true"></div>  <figcaption><b>Raised</b><code>bg-surface-raised</code></figcaption></figure>

教材の対象となるプリセットユーティリティで面を描画し、名前と見た目の出所を一致させます。