Panel de color

Las tripas de ColorPicker, sueltas: el área de saturación y brillo, la tira de tono, la de transparencia si se pide, el campo hexadecimal y los colores guardados. Para montarlas dentro de un panel propio, sin el botón ni el flotante del selector.

Cuándo usarlo

• Un editor con su propia columna de ajustes (el fondo de un cartel, el color de una etiqueta) donde el panel va siempre a la vista.
• Un flotante o un diálogo propio que ya tiene su disparador.
• Es CONTROLADO: color es un color ya leído, no un texto, y onChange recibe el nuevo. Si onChange no actualiza color, el panel no se mueve. Para pasar de texto a color está textColor('#a16207') (devuelve null si el texto no es un color), y el color vuelve a texto con color.toString('hex') o cualquier otro formato (rgb, hsl, hsb y sus versiones con alfa).
• samples pone los colores guardados, en cualquier formato que se entienda; los que no se entienden no salen. alphaChannel añade la tira de transparencia, y el hexadecimal pasa a llevar el cuarto par. Sin ella, la transparencia que traiga color se conserva.
• size (sm, md o lg) cambia el ancho del panel, el alto del área y el tamaño del tirador y de los colores guardados.

Cuándo no

• Un campo de un formulario, con su etiqueta, su ayuda, su error y el valor como texto: ColorPicker.
• Elegir entre los colores de un producto: VariantPicker.

Teclado: Tab pasa por el área, la tira de tono, la de transparencia, el hexadecimal y los colores guardados, una parada cada uno. En el área, izquierda y derecha mueven la saturación, arriba y abajo el brillo, de uno en uno; con Mayúsculas, de diez en diez; Re Pág y Av Pág mueven el brillo de diez en diez, e Inicio y Fin llevan la saturación a 0 y a 100. En las tiras, izquierda y derecha mueven de uno en uno (un grado de tono, un punto de transparencia) y con Mayúsculas saltan 15 grados o 10 puntos. En el hexadecimal se escribe: el color cambia en cuanto lo escrito es un color de verdad, y lo escrito a medias se queda hasta salir del campo. En los colores guardados, las flechas recorren, Inicio y Fin van a los extremos, e Intro o Espacio eligen.

Accesibilidad: el área es UN control para el lector, un «Regulador 2D» llamado «Selector de color» que dice los dos ejes y el tono en su valor («Saturación: 96 %, Brillo: 63 %, Tono: 35°, marrón»); las tiras son deslizadores con el nombre de su canal («Tono», «Transparencia») y su valor en palabras («35°, marrón»). El hexadecimal tiene su etiqueta, y cada color guardado se anuncia con su nombre en palabras, no con su hexadecimal; el que coincide con el color actual va marcado como elegido. Con el dedo, las tiras y los colores guardados miden 44 px y el área crece.

Aspecto fino: en .amset-color__panel: --amset-color-panel-width, --amset-color-area-height, --amset-color-strip-height (la barra), --amset-color-strip-touch (la zona que se pulsa), --amset-color-thumb y --amset-color-sample-side (los colores guardados).