@kaufmann-lab/ui 0.1.22 → 0.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kaufmann-lab-ui-business.mjs +2 -2
- package/fesm2022/kaufmann-lab-ui-business.mjs.map +1 -1
- package/fesm2022/kaufmann-lab-ui-core.mjs +554 -77
- package/fesm2022/kaufmann-lab-ui-core.mjs.map +1 -1
- package/fesm2022/kaufmann-lab-ui-map.mjs +1 -1
- package/fesm2022/kaufmann-lab-ui-map.mjs.map +1 -1
- package/package.json +1 -1
- package/src/tokens/base.css +33 -8
- package/types/kaufmann-lab-ui-core.d.ts +292 -28
package/package.json
CHANGED
package/src/tokens/base.css
CHANGED
|
@@ -98,8 +98,21 @@
|
|
|
98
98
|
--kf-color-white: #ffffff;
|
|
99
99
|
--kf-color-border: #dde3ee;
|
|
100
100
|
--kf-color-border-strong: #c1c6d5;
|
|
101
|
+
/*
|
|
102
|
+
* Borde de CONTROLES de formulario (input, textarea, select, checkbox): el
|
|
103
|
+
* límite del campo es lo único que lo identifica, así que necesita 3:1
|
|
104
|
+
* contra el fondo adyacente (WCAG 1.4.11): 3.62:1 sobre blanco, 3.38:1 sobre
|
|
105
|
+
* `surface` y 3.03:1 sobre `gray-200`. `border`/`border-strong` siguen siendo
|
|
106
|
+
* para divisores y contenedores decorativos, no para campos.
|
|
107
|
+
*/
|
|
108
|
+
--kf-color-border-control: #80869a;
|
|
101
109
|
--kf-color-text: #414753;
|
|
102
|
-
|
|
110
|
+
/*
|
|
111
|
+
* Mínimo que cumple AA (4.5:1) para texto chico sobre blanco (5.26),
|
|
112
|
+
* `surface` (4.90), `gray-100` (4.77), `gray-200` (4.52), `primary-soft`
|
|
113
|
+
* (4.65) y `secondary-soft` (4.72).
|
|
114
|
+
*/
|
|
115
|
+
--kf-color-text-muted: #666a76;
|
|
103
116
|
|
|
104
117
|
/*
|
|
105
118
|
* Escala de grises neutros (página 3 del design system), expuesta por
|
|
@@ -108,7 +121,7 @@
|
|
|
108
121
|
* número con distinto propósito en un mismo componente:
|
|
109
122
|
* gray-800 (#242a33) → sin alias todavía
|
|
110
123
|
* gray-700 (#414753) → alias: --kf-color-text
|
|
111
|
-
* gray-600 (#
|
|
124
|
+
* gray-600 (#666a76) → alias: --kf-color-text-muted
|
|
112
125
|
* gray-500 (#9aa0ad) → sin alias todavía
|
|
113
126
|
* gray-400 (#c1c6d5) → alias: --kf-color-border-strong
|
|
114
127
|
* gray-300 (#dde3ee) → alias: --kf-color-border
|
|
@@ -179,15 +192,27 @@
|
|
|
179
192
|
--kf-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
|
|
180
193
|
--kf-shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
|
|
181
194
|
--kf-shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.16);
|
|
182
|
-
|
|
195
|
+
/*
|
|
196
|
+
* Anillo de foco: 2px blanco + 2px de `--kf-color-primary`. El color de
|
|
197
|
+
* marca mide >= 5:1 contra blanco y `surface` en todos los temas (el halo
|
|
198
|
+
* translúcido anterior medía 1.39:1, bajo el 3:1 de WCAG 2.4.7/1.4.11), y el
|
|
199
|
+
* aro blanco interno lo separa de superficies oscuras o del relleno de un
|
|
200
|
+
* botón primario. Se resuelve contra el tema activo en el elemento raíz, donde
|
|
201
|
+
* se aplica `data-theme`.
|
|
202
|
+
*/
|
|
203
|
+
--kf-shadow-focus: 0 0 0 2px var(--kf-color-white), 0 0 0 4px var(--kf-color-primary);
|
|
204
|
+
/*
|
|
205
|
+
* Mismo anillo para elementos que no pueden dibujar fuera de su caja (ítems
|
|
206
|
+
* de menú, celdas con `overflow: hidden`): dibujado hacia adentro.
|
|
207
|
+
*/
|
|
208
|
+
--kf-shadow-focus-inset:
|
|
209
|
+
inset 0 0 0 2px var(--kf-color-primary), inset 0 0 0 3px var(--kf-color-white);
|
|
183
210
|
/*
|
|
184
211
|
* Variante del anillo de foco para campos `invalid` + enfocados
|
|
185
|
-
* (`kf-input`/`kf-select`/`kf-textarea`)
|
|
186
|
-
*
|
|
187
|
-
* resolver un color hex vía `var()` — si `--kf-color-error` cambia, este
|
|
188
|
-
* token hay que actualizarlo a mano también.
|
|
212
|
+
* (`kf-input`/`kf-select`/`kf-textarea`): el color es `--kf-color-error`
|
|
213
|
+
* (5.15:1 sobre blanco).
|
|
189
214
|
*/
|
|
190
|
-
--kf-shadow-focus-error: 0 0 0
|
|
215
|
+
--kf-shadow-focus-error: 0 0 0 2px var(--kf-color-white), 0 0 0 4px var(--kf-color-error);
|
|
191
216
|
|
|
192
217
|
/*
|
|
193
218
|
* ---------- Anchos de controles de formulario ----------
|