@khipu/design-system 0.3.5-alpha.10 → 0.3.5-alpha.13

package/dist/beercss/khipu-beercss.scoped.css

@@ -15,7 +15,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-08-14T20:37:28.660Z
+ * Generated: 2026-08-17T18:53:32.414Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -1001,6 +1001,20 @@
     background-color: transparent !important;
 }
 
+/* Familia base del arbol del DS.
+   BeerCSS la pone en `body { font-family: var(--font) }`, y `--font` es un alias
+   declarado en :root. Una custom property se sustituye en el elemento que la declara,
+   asi que ese alias se congela con la familia de :root: una marca que define
+   --kds-font-family-primary mas abajo en el arbol no lo mueve, y el texto que solo
+   hereda de body se queda con la familia por defecto.
+
+   Resolviendo el token aca, en la raiz del arbol del DS, hereda todo lo de adentro con
+   la familia vigente en ese punto. Sin marca definida el valor es el mismo de siempre,
+   asi que no cambia nada para quien no la configura. */
+.kds-theme-root .kds-theme-root {
+    font-family: var(--kds-font-family-primary);
+}
+
 /* ========================================
    TEXT UTILITIES OVERRIDE
    Fix BeerCSS classes that use wrong color tokens
@@ -3282,12 +3296,32 @@
     cursor: pointer;
 }
 
-/* Checked state */
+/* Checked state.
+   accent-color aplica al input nativo, que BeerCSS deja con opacity 0: no se ve.
+   Se mantiene igual por si algun consumidor no usa el markup de BeerCSS. */
 .kds-theme-root label.checkbox input[type="checkbox"]:checked,
 .kds-theme-root label.radio input[type="radio"]:checked {
     accent-color: var(--kds-color-accent, var(--primary));
 }
 
+/* El control que SI se ve lo dibuja BeerCSS como una ligadura de Material Symbols en
+   `> span::before`, coloreada con var(--primary). Estas dos reglas reproducen sus
+   selectores para que ese pseudo-elemento siga al rol accent.
+
+   Misma especificidad que el original y sin !important: este archivo va ultimo en el
+   bundle, asi que gana por orden. El fallback deja el valor anterior intacto cuando la
+   marca no define accent, que es el caso de todo consumidor actual.
+
+   No se toca `.switch`: es un control de encendido/apagado, no de seleccion, y el
+   contrato de marca no lo incluye. */
+.kds-theme-root :is(.checkbox, .radio) > span::before {
+    color: var(--kds-color-accent, var(--primary));
+}
+
+.kds-theme-root :is(.checkbox, .radio) > input:checked + span::before, .kds-theme-root :is(.checkbox, .radio).icon > input:checked + span > i {
+    color: var(--kds-color-accent, var(--primary));
+}
+
 /* Disabled state */
 .kds-theme-root label.checkbox input[type="checkbox"]:disabled,
 .kds-theme-root label.radio input[type="radio"]:disabled {