Swatches
For documenting tokens: a φ-ratio colour block with a monospace label.
Examples
Swatches
accent
success
warning
danger
info
surface
Anatomy
.swatches | Auto-fill grid of swatches. |
> .swatch | The label as text. The colour block is drawn above it from --swatch. |
API
| Attribute | Values | Description |
|---|---|---|
--swatchon .swatch | <colour> | The colour of the block. Any colour or token. |
Accessibility
- The colour block is a pseudo-element and is invisible to screen readers. The label must name the colour or token; add the value in text if it matters.