# Swatch

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

## Playground

```html
<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

### Ao lado do nome

A amostra tem o tamanho da letra e acompanha o tema: muda sozinha de dia para noite.

Mostrar código

```html
<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

Atributo

Valores

Para quê

`class="feitio-swatch"`

obrigatório

O quadradinho com o traço de tinta.

`--swatch`

uma cor do Feitio

A cor da amostra.