@khipu/design-system 0.3.4 → 0.3.5-alpha.2

package/dist/beercss/khipu-beercss.css

@@ -13,7 +13,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-08-12T21:28:55.469Z
+ * Generated: 2026-08-13T15:55:41.056Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -685,6 +685,37 @@ body.dark,
     --outline: var(--kds-color-input-border);
     --outline-variant: var(--kds-border-light);
 
+    /* ========================================
+       EXTENDED BRAND ROLES
+
+       Several roles used to resolve straight to --kds-color-primary-main, which
+       meant a brand could not have (say) a green link next to a navy button.
+       They are split into their own tokens:
+
+           --kds-color-accent              form icon, expand toggle, checkbox/radio
+           --kds-color-accent-soft         form icon backdrop
+           --kds-font-family-heading       display/heading tier
+           --kds-invoice-amount-font-family
+           --kds-invoice-amount-color
+           --kds-button-font-family
+           --kds-button-text-transform
+           --kds-button-primary-bg
+           --kds-button-primary-bg-hover
+
+       These are deliberately NOT declared here. Each one is consumed as
+       var(--new-token, <the expression it used to be>), so the default is
+       supplied at the point of use.
+
+       Declaring them as :root aliases looks equivalent but is not. A custom
+       property is substituted on the element that DECLARES it, so
+       `--kds-color-accent: var(--kds-color-primary-main)` on :root freezes to
+       whatever the primary is at :root. A brand that sets its primary further
+       down the tree (which is how khenshin-web applies merchant styles) would
+       inherit the already-resolved Khipu purple and lose its own colour. Using
+       them as fallbacks resolves against the primary in effect at the consuming
+       element, so unbranded output and existing brands are both unchanged.
+       ======================================== */
+
     /* ========================================
        ONBOARDING COMPONENTS TOKENS
        ======================================== */
@@ -1010,12 +1041,12 @@ a.kds-btn {
     width: 100%;
 
     /* Typography - Using design tokens */
-    font-family: var(--kds-font-family-secondary);
+    font-family: var(--kds-button-font-family, var(--kds-font-family-secondary));
     font-weight: var(--kds-font-weight-medium);      /* 500 */
     font-size: var(--kds-typography-button-font-size);          /* 0.875rem = 14px */
     line-height: var(--kds-typography-button-line-height);      /* 1.5 */
     letter-spacing: var(--kds-typography-button-letter-spacing); /* 0.46px */
-    text-transform: uppercase;
+    text-transform: var(--kds-button-text-transform, uppercase);
 
     /* Spacing - Using design tokens */
     padding: var(--kds-spacing-button-padding);      /* 0 16px */
@@ -1072,16 +1103,19 @@ a.kds-btn:disabled {
 /* Primary button - Khipu purple */
 button.kds-btn-primary,
 a.kds-btn-primary {
-    background: var(--kds-color-primary-main);     /* #8347AD */
+    background: var(--kds-button-primary-bg, var(--kds-color-primary-main));  /* #8347AD */
     color: var(--kds-color-primary-contrast);      /* #FFF light / dark-purple on dark (lavender bg) */
     border: none;
     box-shadow: 0 1px 2px rgba(131, 71, 173, .25);
 }
 
-/* Hover State - background más oscuro */
+/* Hover State - background más oscuro.
+   Its own token, not primary-dark: once a brand sets the button background
+   independently of the primary, deriving hover from the primary would snap it
+   back to the brand's other colour on the first pointer-over. */
 button.kds-btn-primary:hover:not(:disabled),
 a.kds-btn-primary:hover:not(:disabled) {
-    background: var(--kds-color-primary-dark);     /* #5B3179 */
+    background: var(--kds-button-primary-bg-hover, var(--kds-color-primary-dark));  /* #5B3179 */
 }
 
 /* Active/Focus State */
@@ -1089,7 +1123,7 @@ button.kds-btn-primary:active:not(:disabled),
 button.kds-btn-primary:focus-visible:not(:disabled),
 a.kds-btn-primary:active:not(:disabled),
 a.kds-btn-primary:focus-visible:not(:disabled) {
-    background: var(--kds-color-primary-dark);
+    background: var(--kds-button-primary-bg-hover, var(--kds-color-primary-dark));
 }
 
 /* Dark mode: the button is a light lavender with dark text, so hover/active must
@@ -3240,7 +3274,7 @@ label.radio span {
 /* Checked state */
 label.checkbox input[type="checkbox"]:checked,
 label.radio input[type="radio"]:checked {
-    accent-color: var(--primary);
+    accent-color: var(--kds-color-accent, var(--primary));
 }
 
 /* Disabled state */
@@ -5009,9 +5043,12 @@ dialog#surveyModal button.circle {
     background-color: var(--kds-color-info-soft);
 }
 
-/* ── Typography variants ── */
+/* ── Typography variants ──
+   The display/heading tier resolves through --kds-font-family-heading so a
+   brand can pair a display face with a different body face. Unset by default,
+   so it falls through to the primary family and output is unchanged. */
 .kds-text-display1 {
-    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-family: var(--kds-font-family-heading, var(--kds-font-family-primary, 'Public Sans', sans-serif));
     font-size: var(--kds-font-size-4xl, 36px);
     font-weight: var(--kds-font-weight-bold, 700);
     line-height: var(--kds-line-height-tight, 1.2);
@@ -5019,7 +5056,7 @@ dialog#surveyModal button.circle {
 }
 
 .kds-text-display2 {
-    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-family: var(--kds-font-family-heading, var(--kds-font-family-primary, 'Public Sans', sans-serif));
     font-size: var(--kds-font-size-3xl, 30px);
     font-weight: var(--kds-font-weight-bold, 700);
     line-height: var(--kds-line-height-tight, 1.2);
@@ -5027,21 +5064,21 @@ dialog#surveyModal button.circle {
 }
 
 .kds-text-heading1 {
-    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-family: var(--kds-font-family-heading, var(--kds-font-family-primary, 'Public Sans', sans-serif));
     font-size: var(--kds-font-size-2xl, 24px);
     font-weight: var(--kds-font-weight-semibold, 600);
     line-height: var(--kds-line-height-snug, 1.375);
 }
 
 .kds-text-heading2 {
-    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-family: var(--kds-font-family-heading, var(--kds-font-family-primary, 'Public Sans', sans-serif));
     font-size: var(--kds-font-size-xl, 20px);
     font-weight: var(--kds-font-weight-semibold, 600);
     line-height: var(--kds-line-height-snug, 1.375);
 }
 
 .kds-text-heading3 {
-    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-family: var(--kds-font-family-heading, var(--kds-font-family-primary, 'Public Sans', sans-serif));
     font-size: var(--kds-font-size-lg, 18px);
     font-weight: var(--kds-font-weight-semibold, 600);
     line-height: var(--kds-line-height-normal, 1.5);
@@ -6267,7 +6304,7 @@ button.kds-fab:active:not(:disabled) {
        irregular arriba (pegado al resumen) y abajo (~26px hasta el panel). Con height
        auto el botón ajusta a su contenido y el ritmo lo gobiernan los márgenes. */
     height: auto;
-    color: var(--kds-color-primary-main);
+    color: var(--kds-color-accent, var(--kds-color-primary-main));
     font-weight: var(--kds-font-weight-medium);
     font-size: var(--kds-font-size-sm);
     cursor: pointer;
@@ -7097,11 +7134,13 @@ div.kds-invoice-header,
 }
 
 .kds-invoice-amount {
+    /* inherit: the amount had no family of its own before, it took the body's. */
+    font-family: var(--kds-invoice-amount-font-family, inherit);
     font-weight: var(--kds-font-weight-semibold);
     font-size: var(--kds-font-size-3xl);
     line-height: var(--kds-line-height-tight);
     letter-spacing: var(--kds-letter-spacing-wide);
-    color: var(--kds-color-gray-900);
+    color: var(--kds-invoice-amount-color, var(--kds-color-gray-900));
     margin: 0;
 }
 
@@ -7199,6 +7238,8 @@ div.kds-invoice-header,
 
 /* -- Card Title -- */
 .kds-card-title {
+    /* inherit: the card title had no family of its own before. */
+    font-family: var(--kds-font-family-heading, inherit);
     font-weight: var(--kds-font-weight-semibold);
     font-size: var(--kds-font-size-base);
     line-height: 1.5;
@@ -9080,7 +9121,11 @@ a.kds-copy-all-btn.copied:hover {
 
 .kds-form-icon-box {
     align-items: center;
-    background: var(--kds-color-background-brand-subtle, #f0f0fa);
+    background: var(--kds-color-accent-soft, var(--kds-color-background-brand-subtle, #f0f0fa));
+    /* The glyph inherits this, so the icon tracks the accent role without the
+       markup having to name a colour utility. Falls back to the primary, which
+       is what the .kds-text-primary utility on the glyph resolved to. */
+    color: var(--kds-color-accent, var(--kds-color-primary-main));
     border-radius: var(--kds-radius-md);
     display: flex;
     height: 52px;

package/dist/beercss/khipu-beercss.js

@@ -895,10 +895,71 @@ const ui = _context.ui;
         initHideOnScroll();
         initBankModal();
         initMerchantLogoBackdrop();
+        initCardHeightTransition();
 
         console.log('Material Design initialization complete!');
     }
 
+    /**
+     * Initialize body card height transition (KTUF-239)
+     * La body card cambia de alto al pasar de una pantalla a otra (loader ↔ formulario)
+     * y el salto se nota, sobre todo desde que la card ya no lleva un alto mínimo fijo.
+     * No se puede resolver con CSS: un cambio de altura provocado por contenido no
+     * dispara transiciones, porque el valor declarado sigue siendo `auto` antes y
+     * después (ni `interpolate-size` lo cubre — ese habilita animar hacia `auto` cuando
+     * el valor declarado cambia, que no es el caso). Por eso se mide y se anima acá.
+     * @param {Element} root - Root element to scope the query (default: document)
+     */
+    function initCardHeightTransition(root) {
+        root = root || document;
+        var MIN_DELTA_PX = 8;
+        var DURATION_MS = 280;
+
+        if (typeof ResizeObserver === 'undefined' || typeof Element.prototype.animate !== 'function') {
+            return;
+        }
+        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+
+        var cards = root.querySelectorAll('.kds-screen > .kds-card-elevated');
+        Array.prototype.forEach.call(cards, function(card) {
+            if (card.getAttribute('data-kds-height-transition') === 'on') {
+                return;
+            }
+            card.setAttribute('data-kds-height-transition', 'on');
+
+            var previous = card.offsetHeight;
+            var animating = false;
+
+            var observer = new ResizeObserver(function() {
+                // La animación cambia el alto y volveria a disparar el observer.
+                if (animating) {
+                    return;
+                }
+                var next = card.offsetHeight;
+                // Umbral: ignora reflows menores (fuentes que cargan, scrollbars).
+                if (Math.abs(next - previous) < MIN_DELTA_PX) {
+                    previous = next;
+                    return;
+                }
+                animating = true;
+                var animation = card.animate(
+                    [{ height: previous + 'px' }, { height: next + 'px' }],
+                    { duration: DURATION_MS, easing: 'ease-out' }
+                );
+                previous = next;
+                animation.finished.then(function() {
+                    animating = false;
+                    previous = card.offsetHeight;
+                }).catch(function() {
+                    animating = false;
+                });
+            });
+            observer.observe(card);
+        });
+    }
+
     /**
      * Initialize merchant logo backdrop (KTUF-204)
      * Los logos de comercio van sobre el fondo neutro, no sobre el color de marca (los PNG
@@ -1737,6 +1798,7 @@ const ui = _context.ui;
     window.Khipu.initBankModal = initBankModal;
     window.Khipu.initStickyInvoice = initStickyInvoice;
     window.Khipu.initHideOnScroll = initHideOnScroll;
+    window.Khipu.initCardHeightTransition = initCardHeightTransition;
 
     // Also export showSnackbar to global scope for backward compatibility
     window.showSnackbar = showSnackbar;