'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
Selectores de color
Elige un color por área, tono, hex o predefinidos, y revisa su contraste WCAG mientras eliges.
import { ColorPicker, ColorArea, ColorSlider, ColorWheel, ColorField, ColorSwatchPicker, ContrastBadge, contrastRatio } from '@alea/ui';
Ejemplos
ColorPicker
Área, tono, hex, presets y el contraste contra la página.
ContrastBadge
La razón y el veredicto WCAG para cualquier par.
Las partes por separado
ColorArea, ColorSlider (cualquier canal, horizontal o vertical), ColorWheel, ColorField y ColorSwatchPicker comparten un valor, así puedes armar tu propio selector.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Shape
shape - Show Value
showValue
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
Cada tamaño y espacio es múltiplo de 4 px.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-text-muted…
Radius
--alea-radius-xs…
Type
--alea-font-family-mono…--alea-font-size-xs…--alea-font-weight-medium…
Component
--alea-swatch…
Props
ColorPicker props
Elige un color por área, tono, hex o presets, con una verificación de contraste en vivo (WCAG).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | Clases extra para el elemento raíz. |
contrastWith | string | - | Compara este color con un fondo y muestra la razón WCAG. |
label | ReactNode | - | La etiqueta visible sobre el selector. |
showField | boolean | true | Muestra el campo hex. Por defecto true. |
swatches | string[] | - | Colores predefinidos para elegir (hex). |
ColorArea props
Un área de color bidimensional: saturación y brillo por defecto, o cualquier par de canales. Las flechas mueven la manija, Shift la mueve más rápido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
size | number | - | Ancho y alto en px. Por defecto 240 × 180; define el ancho con style para un área fluida. |
ColorSlider props
Un slider para un canal de color: tono, saturación, luminosidad, alfa, rojo, verde o azul. Horizontal o vertical.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
label | ReactNode | - | La etiqueta visible; el nombre del canal si se omite. |
showValue | boolean | - | Muestra el valor junto a la etiqueta. |
ColorWheel props
Una rueda de tonos: arrastra alrededor del anillo, o usa las flechas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
size | number | 200 | Diámetro en px. Por defecto 200. |
thickness | number | 24 | Grosor del anillo en px. Por defecto 24. |
ColorField props
Escribe un color: hex por defecto, o un canal (tono, rojo, alfa...) como número.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Texto de ayuda bajo el campo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error cuando el color no se puede leer. |
label | ReactNode | - | La etiqueta visible. |
placeholder | string | - | Placeholder, como #C084FC. |
showSwatch | boolean | true | Muestra una muestra del color antes del valor. Por defecto true. |
ColorSwatchPicker props
Elige uno de un conjunto de colores; las flechas se mueven entre ellos.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
colorsobligatoria | string[] | - | Los colores para elegir (cualquier color CSS). |
shape | "rounded" | "square" | "circle" | 'rounded' | rounded (por defecto), circle o square. |
size | "sm" | "md" | "lg" | 'md' | sm 24, md 32 (por defecto), lg 40 px. |
ContrastBadge props
El contraste de un par de colores con su veredicto WCAG: AAA, AA, AA grande o falla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
backgroundobligatoria | string | - | El color de fondo (cualquier color CSS). |
foregroundobligatoria | string | - | El color del texto (cualquier color CSS). |
large | boolean | - | El texto grande (24 px, o 18,66 px en negrita) necesita 3:1 en lugar de 4,5:1. |
showSample | boolean | true | Muestra los colores como muestra. Por defecto true. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
ColorPicker
- Estados
- Keyboard focusDraggingFocusSelected
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-color-picker.alea-color-area.alea-color-thumb.alea-color-slider.alea-color-track.alea-color-row.alea-color-swatch.alea-color-field.alea-input.alea-swatch-picker.alea-swatch-item- Atributos data
data-orientation=verticaldata-size=smdata-size=mddata-size=lgdata-shape=circledata-shape=square
ColorArea
- Estados
- Keyboard focusDragging
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-color-area.alea-color-thumb- Atributos data
data-orientation=vertical
ColorSlider
- Estados
- Keyboard focusDragging
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-color-slider.alea-color-slider-head.alea-color-slider-value.alea-color-track.alea-color-thumb- Atributos data
data-orientation=vertical
ColorWheel
- Estados
- Keyboard focusDragging
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-color-wheel.alea-color-wheel-track.alea-color-thumb- Atributos data
data-orientation=vertical
ColorField
- Estados
- Focus
- Motion
- nudge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-color-input.alea-input-wrap.alea-input-affix.alea-color-chip.alea-input.alea-field-error
ColorSwatchPicker
- Variantes
shaperoundedsquarecirclesizesmmdlg- Estados
- SelectedKeyboard focus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-swatch-picker.alea-swatch-item.alea-color-swatch- Atributos data
data-size=smdata-size=mddata-size=lgdata-shape=circledata-shape=square
ContrastBadge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-contrast.alea-contrast-sample.alea-contrast-ratio
Accesibilidad
- El área de color son dos sliders y el tono un tercero, todos operables con teclado.
- ContrastBadge dice la relación y el veredicto en palabras, no solo con color.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Mueve el control |
| Shift + flechas | Pasos más grandes |
Qué hacer y qué evitar
Hacer
- Ofrece los colores de la marca.
Evitar
- No dejes elegir colores de texto sin la revisión de contraste.