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

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.
Files changed (10) hide show
  1. package/dist/beercss/khipu-beercss.css +45 -15
  2. package/dist/beercss/khipu-beercss.min.css +1 -1
  3. package/dist/beercss/khipu-beercss.scoped.css +45 -15
  4. package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
  5. package/dist/beercss/metadata.json +5 -5
  6. package/dist/index.d.mts +1 -1
  7. package/dist/index.d.ts +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/index.mjs +1 -1
  10. package/package.json +1 -1
package/dist/beercss/khipu-beercss.scoped.css CHANGED
@@ -15,7 +15,7 @@
15
15
  *
16
16
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
17
17
  * Source: design-system/src/tokens/tokens.json
18
- * Generated: 2026-08-17T18:53:32.414Z
18
+ * Generated: 2026-08-27T20:57:38.874Z
19
19
  *
20
20
  * To regenerate:
21
21
  * cd design-system && npm run tokens:generate
@@ -399,13 +399,13 @@
399
399
  /* ============================================================================
400
400
  DARK MODE COLOR TOKENS
401
401
  Override only color variables; everything else inherits from :root.
402
- Activated via [data-theme="dark"] on <html>, <body>, or a wrapper —
403
- or via the BeerCSS-style body.dark class. Both selectors are emitted so
404
- a body.dark app gets the FULL dark theme (core + extended tokens); a
405
- single source flipping only partially is how mixed light/dark bugs arise.
402
+ Activated ONLY via [data-theme="dark"] on <html>, <body>, or a wrapper.
403
+ body.dark is deliberately NOT a trigger: BeerCSS adds that class on its
404
+ own when the OS reports a dark preference, so honouring it turns dark on
405
+ for consumers that never opted in. Dark stays opt-in until an app sets
406
+ data-theme explicitly.
406
407
  ============================================================================ */
407
408
 
408
- .kds-theme-root.dark,
409
409
  .kds-theme-root [data-theme="dark"] {
410
410
 
411
411
  /* Primary palette - Khipu brand */
@@ -881,11 +881,10 @@
881
881
  values so selected states / rows / hovers adapt. Additive: the light
882
882
  :root / body.light values above are unchanged. Tokens already defined as
883
883
  var() refs (warning-soft, danger-soft) adapt on their own and are omitted.
884
- body.dark is included on purpose: the light group above also matches
885
- body.dark (specificity 0,1,1), so a bare [data-theme] override (0,1,0)
886
- would lose on a body that carries the transitional dark class.
884
+ body.dark is deliberately NOT a trigger: BeerCSS adds that class on its own
885
+ when the OS reports a dark preference, so honouring it turns dark on for
886
+ consumers that never opted in. Dark stays opt-in via data-theme.
887
887
  ======================================== */
888
- .kds-theme-root.dark,
889
888
  .kds-theme-root [data-theme="dark"] {
890
889
  --kds-color-primary-faint: #1E1030; /* dark brand-tinted subtle surface (selected rows/cards) */
891
890
  --kds-color-info-soft: var(--kds-alert-info-bg); /* dark translucent blue */
@@ -919,7 +918,7 @@
919
918
  opt-out for Chrome/WebView "Auto Dark Theme" on Android: without it, an
920
919
  OS-dark device heuristically darkens SOME elements of a light page (mixed
921
920
  light/dark rendering in production apps). Dark is reached only by an
922
- explicit [data-theme="dark"] / body.dark opt-in. */
921
+ explicit [data-theme="dark"] opt-in. */
923
922
  .kds-theme-root,
924
923
  .kds-theme-root,
925
924
  .kds-theme-root {
@@ -938,8 +937,7 @@
938
937
  }
939
938
 
940
939
  /* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
941
- .kds-theme-root [data-theme="dark"],
942
- .kds-theme-root.dark {
940
+ .kds-theme-root [data-theme="dark"] {
943
941
  color-scheme: dark;
944
942
  }
945
943
 
@@ -6585,14 +6583,37 @@
6585
6583
  color: var(--kds-color-success-main);
6586
6584
  }
6587
6585
 
6588
- /* Variant: pending (animated blue spinner, sin icono interno) */
6586
+ /* Variant: pending (animated spinner, sin icono interno).
6587
+ El acento sale de --kds-status-pending-accent, con el azul de info como
6588
+ fallback: el valor por defecto no cambia, y una pantalla puede pedir otro
6589
+ acento sin redefinir la regla ni recurrir a estilos inline. */
6589
6590
  .kds-theme-root .kds-status-block[data-status="pending"] .kds-status-block-icon {
6590
6591
  background: transparent;
6591
6592
  border: 3px solid var(--kds-color-divider);
6592
- border-top-color: var(--kds-color-info-main);
6593
+ border-top-color: var(--kds-status-pending-accent, var(--kds-color-info-main));
6593
6594
  animation: kds-spin 1s linear infinite;
6594
6595
  }
6595
6596
 
6597
+ /* Spinner neutro, para esperas que acompañan al contenido sin reclamar
6598
+ atención: el azul de info lee como un aviso y compite con la información
6599
+ de la pantalla. */
6600
+ .kds-theme-root .kds-status-block.kds-accent-neutral {
6601
+ --kds-status-pending-accent: var(--kds-color-text-primary);
6602
+ }
6603
+
6604
+ /* Spinner fino, para bandas de una línea donde el trazo de 3px pesa demasiado.
6605
+ El tamaño se pide por token y no por regla sobre el icono: así no compite en
6606
+ especificidad con `.kds-status-block.inline .kds-status-block-icon`, que
6607
+ marca igual y viene después. */
6608
+ .kds-theme-root .kds-status-block.kds-spinner-sm {
6609
+ --kds-status-icon-size: var(--kds-spacing-3);
6610
+ --kds-status-icon-size-sm: var(--kds-spacing-3);
6611
+ }
6612
+
6613
+ .kds-theme-root .kds-status-block.kds-spinner-sm .kds-status-block-icon {
6614
+ border-width: 2px;
6615
+ }
6616
+
6596
6617
  /* Variant: warn */
6597
6618
  .kds-theme-root .kds-status-block[data-status="warn"] .kds-status-block-icon {
6598
6619
  background: var(--kds-color-warning-soft);
@@ -6636,6 +6657,15 @@
6636
6657
  font-size: var(--kds-font-size-xl);
6637
6658
  }
6638
6659
 
6660
+ /* Banda: el bloque de estado sobre una superficie sutil, para cuando acompaña
6661
+ al contenido en lugar de encabezar la pantalla. Va después de `.inline`
6662
+ porque marca igual en especificidad y necesita ganarle el padding. */
6663
+ .kds-theme-root .kds-status-block.kds-banded {
6664
+ background: var(--kds-color-background-muted);
6665
+ border-radius: var(--kds-radius-md);
6666
+ padding: var(--kds-spacing-1-5) var(--kds-spacing-2);
6667
+ }
6668
+
6639
6669
  @keyframes kds-spin {
6640
6670
  to { transform: rotate(360deg); }
6641
6671
  }