Swatch
Una muestra de un color, con la línea de tinta alrededor, junto a su nombre.
En esta página
Playground
accentPapel
Fondo
<span class="feitio-inline" data-gap="2"><span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code></span>Cuándo usarlo
- Para mostrar un color en la documentación: los roles de color, una tabla de tokens.
Cuándo no usarlo
- Para indicar un estado en una interfaz: la etiqueta, con icono y palabra.
Ejemplos
accentokwarnerrorJunto al nombre
La muestra tiene el tamaño del texto y sigue el tema: cambia por sí misma de día a noche.
Mostrar código
<span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code>Accesibilidad
- La muestra va junto (es decoración); el nombre del color, al lado, es lo que se lee.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-swatch" | obligatorio | El pequeño cuadrado con la línea de tinta. |
--swatch | un color Feitio | El color de la muestra. |