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

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-14T20:37:28.660Z
  *
  * 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
@@ -2422,12 +2456,21 @@ a.kds-btn-google:disabled {
     /* Llena y centra dentro de contenedores flex (pantalla de carga); en flujo
        normal (contenedor no-flex) se reduce a su contenido. */
     flex: 1 1 auto;
-    /* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la
-       card queda del alto del spinner y se lee como un recorte. Ocupa el body completo
-       de un telefono para que la pantalla de carga se lea como una pantalla y no como
-       una franja. Va aca y no en la card para que el minimo aplique solo a la carga:
-       el resto de las pantallas crece con su contenido. */
-    min-height: 36rem;
+    /* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la card
+       queda del alto del spinner y se lee como un recorte. Va aca y no en la card para que
+       el minimo aplique solo a la carga: el resto de las pantallas crece con su contenido.
+       El valor de escritorio es moderado a proposito: el minimo de telefono (36rem) dejaba
+       la card de la carga mucho mas alta que cualquier otra pantalla, y al entrar y salir
+       del loader el widget crecia y volvia a encoger. */
+    min-height: 18rem;
+}
+
+/* En telefono la carga si ocupa el alto util de la pantalla: ahi la card va a ancho
+   completo y un loader corto se lee como una franja perdida en el medio. */
+@media (max-width: 767px) {
+    .kds-secure-loader {
+        min-height: 36rem;
+    }
 }
 
 .kds-secure-loader-text {
@@ -3240,7 +3283,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 +5052,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 +5065,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 +5073,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 +6313,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 +7143,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 +7247,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;
@@ -7948,6 +7998,36 @@ svg[fill='none'] {
     }
 }
 
+/* Widget embebido: dentro de un iframe los media queries de ancho evalúan el viewport
+   DEL IFRAME (~420px), no la pantalla, así que el flujo se ve siempre como mobile
+   aunque el usuario esté en desktop — y el tope plano, pensado para cuando la card se
+   pega al borde del teléfono, queda cortando una card que en realidad flota centrada.
+   `hover`/`pointer` describen el dispositivo de entrada y no el viewport, así que
+   sobreviven al iframe: con mouse las cards conservan las esquinas superiores. */
+@media (hover: hover) and (pointer: fine) {
+    .kds-card-elevated.kds-invoice-sticky {
+        border-radius: var(--kds-radius-card);
+        /* El clip-path del colapso recorta con `round 0 0 R R` y eso PISA al
+           border-radius: aunque la card declare las cuatro esquinas, el recorte las
+           deja rectas arriba. Hay que redondearlas también acá o el fix no se ve. */
+        clip-path: inset(
+            0 0
+            calc(
+                var(--collapse-collapsible-h) * var(--collapse-progress)
+                + var(--kds-spacing-1) * var(--collapse-progress)
+            )
+            0
+            round var(--kds-radius-card)
+        );
+    }
+
+    .kds-screen > .kds-card-elevated.kds-card-elevated--flush-top,
+    .kds-card-elevated.kds-card-elevated--flush-top {
+        border-top-left-radius: var(--kds-radius-card);
+        border-top-right-radius: var(--kds-radius-card);
+    }
+}
+
 /* Brand logo row (external, outside cards) */
 .kds-brand-row {
     padding: 0 var(--kds-spacing-0-5);
@@ -9080,7 +9160,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

@@ -899,6 +899,12 @@ const ui = _context.ui;
         console.log('Material Design initialization complete!');
     }
 
+    // El alto de la body card cambia de golpe entre pantallas, sin animar. Hubo una
+    // transición acá (KTUF-239) y se quitó en KTUF-314: ver el comentario en
+    // KdsThemeProvider.tsx — animar el alto obliga a fijar `height` en píxeles, y con el
+    // alto fijado no hay forma de medir el alto natural del contenido para saber cuándo
+    // soltarlo, así que la card quedaba con espacio muerto abajo.
+
     /**
      * Initialize merchant logo backdrop (KTUF-204)
      * Los logos de comercio van sobre el fondo neutro, no sobre el color de marca (los PNG