组件

色样

以实际色面呈现具名角色。

角色与色阶

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 绘制色面，让名称与实际显示使用同一来源。