Components

Swatch

A sheet that shows a color role’s actual paint with its name and value underneath.

Roles and steps

Canvasbg-surface-canvas

Raisedbg-surface-raised

Insetbg-surface-inset

Blue 60bg-blue-60

Used on the design system overview.

Usage and interface

DemoSwatch renders figure.ui-swatch: a ui-swatch-paint face that takes the class and style, and a caption with the label and an optional 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>

Paint the face with the preset utility being taught, so the name and the paint come from the same source.