Swatch

A amostra de uma cor, com o traço de tinta em volta, ao lado do nome dela.

Playground

<span class="feitio-inline" data-gap="2"><span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code></span>

Quando usar

• Para mostrar uma cor na documentação: os papéis de cor, uma tabela de tokens.

Quando não usar

• Para dizer um estado numa interface: a Tag, com ícone e palavra.

Exemplos

<span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code>

Acessibilidade

• A amostra acompanha (é decoração); o nome da cor, ao lado, é o que se lê.

Atributos