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

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-12T21:54:49.906Z
  *
  * 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;