@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

package/dist/collection/components/co-color-picker/co-color-picker.css

@@ -146,20 +146,138 @@
   gap: var(--co-spacing-md);
 }
 
+/* ── Área saturación × brillo ─────────────────────────────
+   El gradiente es CSS puro (sin canvas, sin dependencia nueva): el matiz llega
+   por custom property desde el render y las dos rampas se pintan encima.
+
+   `black`/`white` NO son colores de tema y por eso no salen de un token: son
+   los EJES del espacio HSV. v=0 tiene que ser negro puro y s=0 blanco puro, o
+   el color que se muestra deja de ser el que se elige — y por lo mismo no deben
+   adaptarse al modo oscuro.
+
+   Ojo con el argumento: `--co-color-base-blanco` HOY es exactamente #ffffff, así
+   que tokenizarlo no rompería nada *hoy*. El punto no es que el valor difiera
+   (el de negro sí: `--co-color-base-negro` es #1f1c1b), sino que un eje del
+   espacio de color no puede seguir a la paleta: si mañana el blanco de marca se
+   corre —`--co-color-base-off-white` es prueba de que la paleta se mueve—, el
+   área empezaría a mentir sobre el color elegido sin que nada se ponga rojo. */
+.co-color-picker__area {
+  position: relative;
+  height: 132px;
+  border-radius: var(--co-border-radius-xxs);
+  cursor: crosshair;
+  /* Sin esto el navegador se queda el gesto para hacer scroll y el arrastre
+     táctil no llega nunca. */
+  touch-action: none;
+  background:
+    linear-gradient(to top, black, transparent),
+    linear-gradient(to right, white, transparent),
+    hsl(var(--co-color-picker-hue, 0) 100% 50%);
+}
+
+.co-color-picker__area-thumb {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  /* Media caja hacia arriba y hacia la izquierda: el centro del thumb queda
+     sobre la coordenada, no su esquina. */
+  margin: -7px 0 0 -7px;
+  border-radius: var(--co-border-radius-full);
+  border: 2px solid var(--co-semantic-surface-page);
+  box-shadow: 0 0 0 1px var(--co-semantic-border-default);
+  box-sizing: border-box;
+  /* Transparente al puntero: el arrastre lo maneja el área, y si el thumb
+     capturara el evento el color se congelaría bajo el cursor. */
+  pointer-events: none;
+}
+
+/* Enfocables por teclado, invisibles y transparentes al puntero: el arrastre lo
+   maneja el contenedor. */
+.co-color-picker__channel {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  margin: 0;
+}
+
+/* El anillo va en el ÁREA porque los dos ejes son inputs invisibles: sin esto,
+   tabular hasta la saturación no mostraría foco en ningún lado (WCAG 2.4.7). */
+.co-color-picker__area:focus-within {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 2px;
+}
+
+/* ── Slider de matiz ──────────────────────────────────────
+   Las paradas son el círculo cromático completo: `hsl()` es la definición del
+   matiz, no una decisión de tema. */
+.co-color-picker__hue-input {
+  width: 100%;
+  height: 12px;
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: var(--co-border-radius-full);
+  background: linear-gradient(to right,
+    hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
+    hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));
+  cursor: pointer;
+}
+
+.co-color-picker__hue-input::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-semantic-surface-page);
+  box-shadow: 0 0 0 1px var(--co-semantic-border-default);
+  cursor: grab;
+}
+
+.co-color-picker__hue-input::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-semantic-surface-page);
+  box-shadow: 0 0 0 1px var(--co-semantic-border-default);
+}
+
+.co-color-picker__hue-input:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 2px;
+}
+
+/* El listbox apila GRUPOS; cada grupo es la grilla de 6.
+   Así la fila de 5 neutros no arrastra al primer color de marca a su hueco.
+   6×32 + 5×8 + 24 de padding = 256px de ancho intrínseco (antes 8 col = 336px,
+   que desbordaba el card en campos angostos). */
 .co-color-picker__grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+}
+
+.co-color-picker__grid-group {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(6, 32px);
   gap: var(--co-spacing-sm2);
 }
 
 .co-color-picker__grid-item {
   width: 32px;
   height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: var(--co-border-radius-xxs);
   border: 2px solid transparent;
   cursor: pointer;
-  transition: transform var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
+  transition:
+    transform var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-color-picker__grid-item:hover {
@@ -171,6 +289,56 @@
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent);
 }
 
+/* Sin este trazo, #F7F6F0 y #E3E3E3 desaparecen contra el panel. */
+.co-color-picker__grid-item--light {
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-default);
+}
+
+.co-color-picker__grid-item--light.co-color-picker__grid-item--selected {
+  box-shadow:
+    inset 0 0 0 1px var(--co-semantic-border-default),
+    0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent);
+}
+
+/* ── Foco de teclado ───────────────────────────────────────────────────────
+   Va DESPUÉS de todos los modificadores del swatch, y no es cosmética: el par
+   `--light.--selected` empata en especificidad (0,2,0) con el bloque de foco,
+   así que decide el orden. Declarado antes, ganaba el par y el swatch quedaba
+   sin ningún indicador de foco — pero el `outline: none` sí se aplicaba, porque
+   nadie se lo disputa. Es WCAG 2.4.7, sobre los 6 presets claros y justo en el
+   estado con que abre el panel (el roving tabindex arranca en el seleccionado).
+
+   Las dos reglas repiten las capas de sombra a propósito: es duplicación
+   deliberada, no una restricción técnica. Componerlas con custom properties es
+   perfectamente verificable —jsdom devuelve el texto `var(--…)` de la
+   declaración ganadora y resuelve `getPropertyValue`—, pero dos reglas planas
+   se leen sin indirección y el guard las cubre igual, porque assertea el anillo
+   sobre las cuatro combinaciones. Guard: swatches.spec. ── */
+.co-color-picker__grid-item:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--co-semantic-surface-page),
+    0 0 0 4px var(--co-semantic-border-focus);
+}
+
+/* El claro conserva su trazo interior mientras está enfocado: sin él el swatch
+   pierde el borde contra el panel justo cuando el usuario lo está mirando. */
+.co-color-picker__grid-item--light:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--co-semantic-border-default),
+    0 0 0 2px var(--co-semantic-surface-page),
+    0 0 0 4px var(--co-semantic-border-focus);
+}
+
+/* El check hereda contraste del propio swatch. */
+.co-color-picker__grid-check {
+  color: var(--co-semantic-surface-page);
+}
+
+.co-color-picker__grid-item--light .co-color-picker__grid-check {
+  color: var(--co-semantic-text-default);
+}
+
 /* ── Hex row ─────────────────────────────────────────────── */
 .co-color-picker__hex-row {
   display: flex;
@@ -188,13 +356,81 @@
   font-weight: 500;
 }
 
-.co-color-picker__hex-value {
+/* El campo es editable: el trazo de foco lo pinta la FILA (que es la caja
+   visible del campo), no el input, que va sin chrome propio.
+
+   Acotado al input con `:has(>)` y NO con `:focus-within`: éste matchea
+   cualquier descendiente, así que enfocar el botón de copiar encendía el anillo
+   de la fila ADEMÁS del suyo — los dos anillos que abajo se le sacan al input
+   por pintar de más, reintroducidos por el otro hijo. */
+.co-color-picker__hex-row:has(> .co-color-picker__hex-input:focus) {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-color-picker__hex-input {
   flex: 1;
+  /* Sin esto el input impone su ancho de contenido por defecto (~20 caracteres)
+     y estira la fila más allá del panel. */
+  min-width: 0;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  padding: 0;
   font-size: var(--co-font-size-14);
   font-family: var(--co-font-family-mono, monospace);
   color: var(--co-semantic-text-default);
   text-transform: uppercase;
-  user-select: all;
+}
+
+/* El anillo de foco es de la fila: dejarle también el suyo al input pinta dos. */
+.co-color-picker__hex-input:focus,
+.co-color-picker__hex-input:focus-visible {
+  outline: none;
+}
+
+.co-color-picker__hex-input:disabled {
+  color: var(--co-semantic-text-muted);
+  cursor: not-allowed;
+  /* Safari/iOS le bajan la opacidad a los input deshabilitados por su cuenta:
+     el color ya dice lo suficiente. */
+  opacity: 1;
+  -webkit-text-fill-color: var(--co-semantic-text-muted);
+}
+
+/* Cuentagotas: sólo existe donde la API existe (Chrome/Edge). */
+.co-color-picker__eyedropper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--co-spacing-xs);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  border-radius: var(--co-border-radius-xxs);
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+/* `:not(:disabled)` como en el botón de copiar: un botón apagado que se ilumina
+   al pasar por encima promete un click que no va a pasar. */
+.co-color-picker__eyedropper:hover:not(:disabled) {
+  color: var(--co-semantic-text-default);
+  background: var(--co-semantic-surface-hover);
+}
+
+/* Mismo anillo que el botón de copiar, que está pegado a 8px en esta fila:
+   `--co-semantic-border-focus-ring` ES el halo exterior del foco, y el
+   `box-shadow` sigue el `border-radius-xxs` del botón — un `outline` con offset
+   lo dibujaría más cuadrado que su propia caja. */
+.co-color-picker__eyedropper:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-color-picker__eyedropper:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .co-color-picker__copy-btn {
@@ -210,11 +446,22 @@
   transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
-.co-color-picker__copy-btn:hover {
+.co-color-picker__copy-btn:hover:not(:disabled) {
   color: var(--co-semantic-text-default);
   background: var(--co-semantic-surface-hover);
 }
 
+.co-color-picker__copy-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+/* Sin valor no hay nada que copiar: el botón queda, apagado. */
+.co-color-picker__copy-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .co-color-picker__copy-btn--copied {
   color: var(--co-color-status-success);
 }