@khipu/design-system 0.2.0-alpha.24 → 0.2.0-alpha.26

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-05-27T17:53:25.694Z
+ * Generated: 2026-05-28T19:59:10.223Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -51,12 +51,14 @@
   --kds-color-warning-main: #EF6C00;
   --kds-color-warning-light: #FF9800;
   --kds-color-warning-dark: #E65100;
+  --kds-color-warning-warm: #8A6D1A;
   --kds-color-error-main: #D32F2F;
   --kds-color-error-light: #EF5350;
   --kds-color-error-dark: #C62828;
   --kds-color-info-main: #0288D1;
   --kds-color-info-light: #03A9F4;
   --kds-color-info-dark: #01579B;
+  --kds-color-info-blue: #5A5FE0;
 
   /* Text colors */
   --kds-color-text-primary: #333333;
@@ -134,6 +136,8 @@
   --kds-font-weight-bold: 700;
 
   /* Font sizes (base scale xs–4xl: see responsive section below) */
+  --kds-font-size-decimal-sup: 0.5em;
+
   /* Line heights */
   --kds-line-height-tight: 1.2;
   --kds-line-height-snug: 1.375;
@@ -4237,6 +4241,14 @@ dialog#surveyModal button.circle {
     text-align: center;
 }
 
+.kds-text-left {
+    text-align: left;
+}
+
+.kds-text-right {
+    text-align: right;
+}
+
 .kds-text-underline {
     text-decoration: underline;
 }
@@ -4253,6 +4265,54 @@ dialog#surveyModal button.circle {
     font-size: var(--kds-font-size-sm);
 }
 
+/* ── Font-size scale utilities (additive — opt-in companions to .kds-text-sm) ── */
+.kds-text-base {
+    font-size: var(--kds-font-size-base);
+}
+
+.kds-text-lg {
+    font-size: var(--kds-font-size-lg);
+}
+
+.kds-text-xl {
+    font-size: var(--kds-font-size-xl);
+}
+
+.kds-text-2xl {
+    font-size: var(--kds-font-size-2xl);
+}
+
+/* ── Font-weight utilities ── */
+.kds-fw-regular {
+    font-weight: var(--kds-font-weight-regular);
+}
+
+.kds-fw-medium {
+    font-weight: var(--kds-font-weight-medium);
+}
+
+.kds-fw-semibold {
+    font-weight: var(--kds-font-weight-semibold);
+}
+
+.kds-fw-bold {
+    font-weight: var(--kds-font-weight-bold);
+}
+
+/* ── Text-transform utilities ── */
+.kds-text-transform-none {
+    text-transform: none;
+}
+
+/* ── Soft background utilities (semantic muted backgrounds for callouts) ── */
+.kds-bg-warning-soft {
+    background-color: var(--kds-color-warning-soft);
+}
+
+.kds-bg-info-soft {
+    background-color: var(--kds-color-info-soft);
+}
+
 /* ── Typography variants ── */
 .kds-text-display1 {
     font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
@@ -4785,6 +4845,11 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-text-primary);
 }
 
+/* Opt-in color modifier — switches the value to the LigoPay/khipu-blue tone */
+.kds-amount-value--info {
+    color: var(--kds-color-info-blue);  /* #5A5FE0 */
+}
+
 .kds-amount-value small {
     font-size: 18px;
     font-weight: 500;
@@ -5953,6 +6018,17 @@ div.kds-invoice-header,
     margin-bottom: var(--kds-spacing-2) !important;
 }
 
+/* Opt-in size modifiers (additive — do NOT change default 16/600) */
+.kds-card-title--lg {
+    font-size: var(--kds-font-size-xl);       /* 20px */
+    font-weight: var(--kds-font-weight-bold); /* 700 */
+}
+
+.kds-card-title--xl {
+    font-size: var(--kds-font-size-2xl);      /* 24px */
+    font-weight: var(--kds-font-weight-bold); /* 700 */
+}
+
 /* -- Key-Value Grid -- */
 .kds-kv {
     display: grid;
@@ -7290,3 +7366,120 @@ a.kds-copy-all-btn.copied:hover {
     color: var(--kds-color-text-primary);
 }
 
+/* ========================================
+   PAYMENT TOTAL (.kds-payment-total)
+   Bloque "monto a pagar" para QR view y email templates.
+   Portado desde paylink-ligopay → <kh:paymentTotal> + materialize-config.css.
+   Variantes:
+     - default: amount grande (3rem) en color primario Khipu.
+     - email:   amount compacto (1.5rem) en color texto primario.
+   Responsive (default): mobile (≤ 1024px) centra y oculta titleMobile.
+   ======================================== */
+
+.kds-payment-total {
+    /* Component-scoped tokens — overrideables sin tocar el CSS global. */
+    --kds-payment-total-title-size: var(--kds-font-size-2xl);    /* 24px */
+    --kds-payment-total-label-size: var(--kds-font-size-xl);     /* 20px */
+    --kds-payment-amount-size: 3rem;                              /* 48px — destacado */
+    --kds-payment-amount-line-height: var(--kds-line-height-snug);
+    --kds-payment-amount-color: var(--kds-color-primary-main);
+    --kds-payment-amount-weight: var(--kds-font-weight-medium);
+
+    padding-left: var(--kds-spacing-10);
+    padding-top: var(--kds-spacing-4);
+    text-align: left;
+}
+
+.kds-payment-total-title,
+.kds-payment-total-title-mobile {
+    font-size: var(--kds-payment-total-title-size);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-payment-total-title-mobile {
+    display: none;
+}
+
+.kds-payment-total .kds-payment-label {
+    font-size: var(--kds-payment-total-label-size);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    margin-bottom: var(--kds-spacing-1);
+    padding-top: 0;
+}
+
+.kds-payment-total .kds-payment-amount {
+    font-size: var(--kds-payment-amount-size);
+    font-weight: var(--kds-payment-amount-weight);
+    line-height: var(--kds-payment-amount-line-height);
+    color: var(--kds-payment-amount-color);
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-payment-total .kds-payment-amount .kds-payment-total-decimal-sup {
+    font-size: var(--kds-font-size-decimal-sup);
+    font-weight: var(--kds-font-weight-semibold);
+    position: relative;
+    top: 0;
+}
+
+/* Variante email: amount compacto en color texto primario, alineación izquierda fija */
+.kds-payment-total--email {
+    --kds-payment-amount-size: var(--kds-font-size-2xl);  /* 24px */
+    --kds-payment-amount-line-height: var(--kds-line-height-snug);
+    --kds-payment-amount-color: var(--kds-color-text-primary);
+    --kds-payment-amount-weight: var(--kds-font-weight-semibold);
+}
+
+/* Tone modifier: swaps the amount color to the khipu-blue / LigoPay info blue.
+   Combinable with --email or with the default variant. */
+.kds-payment-total--tone-info {
+    --kds-payment-amount-color: var(--kds-color-info-blue);  /* #5A5FE0 */
+}
+
+/* Centered modifier: removes the asymmetric desktop padding (which exists for
+   LigoPay QR view) and centers all internal text. Composable with --email and
+   --tone-info. */
+.kds-payment-total--centered {
+    padding-left: 0;
+    padding-top: 0;
+    text-align: center;
+}
+.kds-payment-total--centered .kds-payment-total-title,
+.kds-payment-total--centered .kds-payment-total-title-mobile,
+.kds-payment-total--centered .kds-payment-label,
+.kds-payment-total--centered .kds-payment-amount {
+    text-align: center;
+}
+
+/* Responsive: mobile ≤ 1024px — centra y conmuta los títulos (sólo variante default) */
+@media (max-width: 1024px) {
+    .kds-payment-total {
+        padding-left: 0;
+        text-align: center;
+    }
+
+    .kds-payment-total .kds-payment-total-title {
+        display: none;
+    }
+
+    .kds-payment-total .kds-payment-total-title-mobile {
+        display: block;
+        text-align: center;
+    }
+
+    .kds-payment-total .kds-payment-label,
+    .kds-payment-total .kds-payment-amount {
+        text-align: center;
+    }
+
+    /* Email mantiene alineación izquierda incluso en mobile (matchea email clients) */
+    .kds-payment-total--email,
+    .kds-payment-total--email .kds-payment-label,
+    .kds-payment-total--email .kds-payment-amount {
+        text-align: left;
+    }
+}
+