@netzi/tokens 0.1.0-beta.8 → 0.1.0-beta.9

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @netzi/tokens
 
+## 0.1.0-beta.9
+
+### Patch Changes
+
+- 9819de5: **El indicador de foco llega a 3:1 en todos los presets y temas** (#76). Se pintaba con
+  `--netzi-primary`, que en claro se quedaba en 2.7:1 con azul, 1.6 con verde, 2.2 con
+  naranja y 2.4 con cian, por debajo de WCAG 1.4.11; y varios controles solo tenían un
+  halo del tinte, de 1.1:1.
+  - Nuevo token `--netzi-focus-ring`, apoyado en `--netzi-primary-text` y declarado en la
+    raíz y en cada elemento con `data-theme` o `data-preset`.
+  - Lo usan los contornos y bordes de foco de todo el kit (chip, cron-picker, icon-picker,
+    el enlace «ir al contenido», timeline y los campos de formulario) y la imagen
+    seleccionada del editor.
+  - Checkbox, radio, toggle, rating y segmented pasan del halo o del borde a un contorno de
+    2px, que se distingue igual marcado que sin marcar; el pulgar de los sliders, a un
+    doble anillo; y el editor de texto enriquecido marca el foco en su recuadro.
+
+- 749ad6b: **El hover del botón primario cumple 4.5:1** (#68). Pintaba `--netzi-primary-dark`
+  debajo de la tinta oscura `--netzi-on-primary`: 3.93:1 en azul y 4.0:1 en rojo, por
+  debajo de WCAG 2.1 AA para un texto de 15px. Nuevo token `--netzi-primary-hover`,
+  calibrado por preset y tema (el peor queda en 4.98:1, en rojo), que usan
+  `netzi-button` primario y el botón de reintentar de `netzi-connection-guard`.
+  `--netzi-primary-dark` sigue siendo el fondo de lo que lleva blanco encima.
+- 03e4440: **La instalación ya no fija el canal `@beta`**: `pnpm add @netzi/ui @netzi/tokens`.
+  Mientras un paquete solo tenga versiones beta en npm, cada versión nueva se publica en
+  `latest`, que es lo que se instala por defecto. El dist-tag `beta` deja de mantenerse.
+
 ## 0.1.0-beta.8
 
 ### Patch Changes

package/README.md

@@ -11,10 +11,11 @@ se construyen `@netzi/ui` y cualquier app de Netzi Tech.
 ## Instalación
 
 En el **npm público**, bajo el scope `@netzi` de Netzi Tech: sin registry especial ni
-token. Mientras el kit esté en beta, fija el canal:
+token. Mientras el kit esté en beta, cada versión nueva es una beta y es la que se
+instala por defecto:
 
 ```bash
-pnpm add @netzi/tokens@beta
+pnpm add @netzi/tokens
 ```
 
 Licencia de uso libre con código privado: ver `LICENSE.md` dentro del paquete. Las
@@ -234,6 +235,31 @@ sobre fondo claro (`--netzi-blue` da 2.9:1; `--netzi-primary-dark`, 4.3:1). Si s
 lee, va `--netzi-primary-text` o el `-text` del color, que están calibrados por
 tema y por preset. Es lo que le pasó al botón `soft` (#56).
 
+Y un relleno del primario tiene **dos fondos oscuros** según lo que lleve encima.
+`--netzi-primary-hover` es el del estado hover de un botón relleno: su tinta es la
+misma `--netzi-on-primary` del reposo, y cada preset lo calibra para que no baje de
+4.5:1 (5.4:1 en azul). `--netzi-primary-dark` es el fondo de lo que lleva **blanco**
+(`--netzi-on-primary-dark`): la pista de un interruptor encendido, la marca de un
+checkbox. Si se cruzan, la tinta oscura sobre el azul oscuro se queda en 3.9:1 (#68).
+
+### El foco va con `--netzi-focus-ring`, no con el primario
+
+Un indicador de foco, contorno o borde, tiene que llegar a **3:1** sobre el fondo (WCAG
+1.4.11). El primario no llega en claro con azul (2.7:1), verde (1.6), naranja (2.2) ni cian
+(2.4). `--netzi-focus-ring` se apoya en `--netzi-primary-text`, que cada preset y cada tema
+calibran a 4.5:1 sobre las superficies, también en alto contraste. Se declara en la raíz y
+en cada elemento con `data-theme` o `data-preset`, así que una sección oscura dentro de una
+página clara tiene su propio anillo.
+
+Todo `:focus`, `:focus-visible` y `:focus-within` del kit lo usa como contorno o borde (los
+halos del tinte no cuentan: dan 1.1:1). Dos guardianes de `tokens-contrast.spec.ts` impiden
+volver al primario y quitar el contorno sin poner otro indicador (#76).
+
+Sobre una capa de **cristal** el anillo se ve contra lo que haya detrás: sobre el fondo del
+kit cumple, pero con una imagen muy oscura (en claro) o muy clara (en oscuro) debajo puede
+bajar de 3:1. Si la app pone cristal sobre fondos así, conviene darle a esa capa un tinte
+más opaco.
+
 ## Los tres niveles de texto
 
 Tienen **papeles distintos**, no son tres grados de gris intercambiables. El ratio

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netzi/tokens",
-  "version": "0.1.0-beta.8",
+  "version": "0.1.0-beta.9",
   "description": "Design tokens de Netzi (CSS custom properties): marca, tema claro/oscuro, tipografía, radios, sombras. Agnóstico de framework.",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://ui.netzi.tech",

package/styles/tokens.css

@@ -68,6 +68,12 @@
   /* --- Color PRIMARIO (themeable por preset; default = azul) --- */
   --netzi-primary: var(--netzi-blue);
   --netzi-primary-dark: var(--netzi-blue-dark);
+  /* El relleno del primario al pasar el puntero, con la MISMA tinta encima
+     (`--netzi-on-primary`). No es `--netzi-primary-dark`: ese es el fondo de lo que
+     lleva blanco (pulgar, marca del checkbox), y la tinta oscura sobre él se quedaba
+     en 3.93:1 en azul y 4.0:1 en rojo (#68). Cada preset declara el suyo: más oscuro
+     que su primario, pero sin bajar de 4.5:1 con su tinta. */
+  --netzi-primary-hover: #0a8fdd;
   /* La TINTA sobre el relleno del primario. Cada preset usa la que cumple sobre
      SU color, no una fija: el blanco sobre el azul da 2.68:1 y la tinta oscura
      7.05:1. Verde, naranja y cyan ya venían así; el azul y el rojo se suman. */
@@ -305,6 +311,7 @@
 [data-preset='green'] {
   --netzi-primary: #0ae972;
   --netzi-primary-dark: #07a352;
+  --netzi-primary-hover: #07a352;
   --netzi-on-primary: #04121f;
   --netzi-primary-text: #05793b;
 }
@@ -313,28 +320,45 @@
 [data-preset='purple'] {
   --netzi-primary: #8c4cff;
   --netzi-primary-dark: #6a2fd6;
+  --netzi-primary-hover: #6a2fd6;
   --netzi-on-primary: #ffffff;
   --netzi-primary-text: #7841db;
 }
 [data-preset='orange'] {
   --netzi-primary: #f0a020;
   --netzi-primary-dark: #c97e0a;
+  --netzi-primary-hover: #c97e0a;
   --netzi-on-primary: #04121f;
   --netzi-primary-text: #8e5e13;
 }
 [data-preset='red'] {
   --netzi-primary: #ff5630;
   --netzi-primary-dark: #d63916;
+  --netzi-primary-hover: #eb4a25;
   --netzi-on-primary: #04121f;
   --netzi-primary-text: #b53d22;
 }
 [data-preset='cyan'] {
   --netzi-primary: #00b8d9;
   --netzi-primary-dark: #0892ab;
+  --netzi-primary-hover: #0892ab;
   --netzi-on-primary: #04121f;
   --netzi-primary-text: #007287;
 }
 
+/* El indicador de FOCO: contorno o borde que marca el control enfocado. Tiene que
+   llegar a 3:1 sobre el fondo (WCAG 1.4.11) y el primario no llega en claro con azul,
+   verde, naranja ni cian (2.7, 1.6, 2.2 y 2.4:1; #76). Se apoya en el primario para
+   texto, que cada preset y cada tema ya calibran a 4.5:1 sobre las superficies. Se
+   declara también en cada elemento con tema o preset propios: una variable que usa
+   otra se resuelve donde se declara, y una sección oscura dentro de una página clara
+   heredaría el anillo claro. */
+:root,
+[data-theme],
+[data-preset] {
+  --netzi-focus-ring: var(--netzi-primary-text);
+}
+
 /* El primario para TEXTO en oscuro: los saturados ya sirven, salvo dos. */
 [data-theme='dark'][data-preset='green'] {
   --netzi-primary-text: #0ae972;
@@ -344,6 +368,7 @@
   /* El morado oscuro de claro (#6a2fd6) se hunde en el fondo oscuro (2.7:1): un
      interruptor encendido apenas se distinguía de la tarjeta. */
   --netzi-primary-dark: #7d48f2;
+  --netzi-primary-hover: #7d48f2;
 }
 [data-theme='dark'][data-preset='orange'] {
   --netzi-primary-text: #f0a020;