@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.css CHANGED
@@ -13,7 +13,7 @@
13
13
  *
14
14
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
15
15
  * Source: design-system/src/tokens/tokens.json
16
- * Generated: 2026-08-17T18:53:32.414Z
16
+ * Generated: 2026-08-27T20:57:38.874Z
17
17
  *
18
18
  * To regenerate:
19
19
  * cd design-system && npm run tokens:generate
@@ -397,13 +397,13 @@
397
397
  /* ============================================================================
398
398
  DARK MODE COLOR TOKENS
399
399
  Override only color variables; everything else inherits from :root.
400
- Activated via [data-theme="dark"] on <html>, <body>, or a wrapper —
401
- or via the BeerCSS-style body.dark class. Both selectors are emitted so
402
- a body.dark app gets the FULL dark theme (core + extended tokens); a
403
- single source flipping only partially is how mixed light/dark bugs arise.
400
+ Activated ONLY via [data-theme="dark"] on <html>, <body>, or a wrapper.
401
+ body.dark is deliberately NOT a trigger: BeerCSS adds that class on its
402
+ own when the OS reports a dark preference, so honouring it turns dark on
403
+ for consumers that never opted in. Dark stays opt-in until an app sets
404
+ data-theme explicitly.
404
405
  ============================================================================ */
405
406
 
406
- body.dark,
407
407
  [data-theme="dark"] {
408
408
 
409
409
  /* Primary palette - Khipu brand */
@@ -879,11 +879,10 @@ body.dark,
879
879
  values so selected states / rows / hovers adapt. Additive: the light
880
880
  :root / body.light values above are unchanged. Tokens already defined as
881
881
  var() refs (warning-soft, danger-soft) adapt on their own and are omitted.
882
- body.dark is included on purpose: the light group above also matches
883
- body.dark (specificity 0,1,1), so a bare [data-theme] override (0,1,0)
884
- would lose on a body that carries the transitional dark class.
882
+ body.dark is deliberately NOT a trigger: BeerCSS adds that class on its own
883
+ when the OS reports a dark preference, so honouring it turns dark on for
884
+ consumers that never opted in. Dark stays opt-in via data-theme.
885
885
  ======================================== */
886
- body.dark,
887
886
  [data-theme="dark"] {
888
887
  --kds-color-primary-faint: #1E1030; /* dark brand-tinted subtle surface (selected rows/cards) */
889
888
  --kds-color-info-soft: var(--kds-alert-info-bg); /* dark translucent blue */
@@ -917,7 +916,7 @@ body.dark,
917
916
  opt-out for Chrome/WebView "Auto Dark Theme" on Android: without it, an
918
917
  OS-dark device heuristically darkens SOME elements of a light page (mixed
919
918
  light/dark rendering in production apps). Dark is reached only by an
920
- explicit [data-theme="dark"] / body.dark opt-in. */
919
+ explicit [data-theme="dark"] opt-in. */
921
920
  :root,
922
921
  html,
923
922
  body {
@@ -936,8 +935,7 @@ body {
936
935
  }
937
936
 
938
937
  /* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
939
- [data-theme="dark"],
940
- body.dark {
938
+ [data-theme="dark"] {
941
939
  color-scheme: dark;
942
940
  }
943
941
 
@@ -6585,14 +6583,37 @@ button.kds-fab:active:not(:disabled) {
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-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-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-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-status-block.kds-spinner-sm .kds-status-block-icon {
6614
+ border-width: 2px;
6615
+ }
6616
+
6596
6617
  /* Variant: warn */
6597
6618
  .kds-status-block[data-status="warn"] .kds-status-block-icon {
6598
6619
  background: var(--kds-color-warning-soft);
@@ -6636,6 +6657,15 @@ button.kds-fab:active:not(:disabled) {
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-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
  }