元件

色票

以實際色面呈現具名角色。

角色與階調

Canvasbg-surface-canvas

Raisedbg-surface-raised

Insetbg-surface-inset

Blue 60bg-blue-60

使用於設計系統概覽.

用法與介面

DemoSwatch 會呈現 figure.ui-swatch：ui-swatch-paint 色面接受 class 與 style，圖說則顯示 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>

請使用正在教學的 preset utility 繪製色面，讓名稱與實際顯示使用同一來源。