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

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-09-10T15:52:45.564Z
+ * Generated: 2026-09-30T16:01:39.243Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2389,28 +2389,35 @@ button.kds-locale-switcher-toggle:hover,
 }
 
 /* ========================================
-   Google Sign-In Button
-   Per Google Identity branding guidelines:
+   SSO Button (federated sign-in: Google, Microsoft, ...)
+   Neutral white button shared by every identity provider, styled per
+   Google Identity branding guidelines, which Microsoft's also satisfy:
    https://developers.google.com/identity/branding-guidelines
+   `.kds-btn-google` / `.kds-google-icon` are kept as aliases for
+   consumers pinned to earlier versions.
+   Colors go through --kds-btn-sso-* so the dark theme swaps all of them
+   together (background alone flipping left the label unreadable).
    ======================================== */
 
+button.kds-btn-sso,
+a.kds-btn-sso,
 button.kds-btn-google,
 a.kds-btn-google {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--kds-spacing-1-5);
+    gap: var(--kds-spacing-1-25);
     width: 100%;
-    background: var(--kds-color-background-paper);
-    color: #1F1F1F;
-    border: 1px solid #747775;
+    background: var(--kds-btn-sso-bg, #FFFFFF);
+    color: var(--kds-btn-sso-color, #1F1F1F);
+    border: 1px solid var(--kds-btn-sso-border, #747775);
     border-radius: var(--kds-radius-button);
     padding: var(--kds-spacing-1) var(--kds-spacing-1-5);
     min-height: var(--kds-spacing-button-min-height);
-    font-family: "Roboto", var(--kds-font-family-secondary);
+    font-family: var(--kds-font-family-secondary);
     font-weight: var(--kds-font-weight-medium);
     font-size: var(--kds-font-size-sm);
-    line-height: var(--kds-line-height-normal);
+    line-height: 20px; /* Google 14/20; no line-height token matches */
     letter-spacing: var(--kds-letter-spacing-normal);
     text-transform: none;
     cursor: pointer;
@@ -2420,17 +2427,34 @@ a.kds-btn-google {
     box-shadow: none;
 }
 
+button.kds-btn-sso:hover,
+a.kds-btn-sso:hover,
 button.kds-btn-google:hover,
 a.kds-btn-google:hover {
-    background: #F2F2F2;
+    background: var(--kds-btn-sso-bg-hover, #F2F2F2);
     box-shadow: var(--kds-shadow-1);
 }
 
+button.kds-btn-sso:active,
+a.kds-btn-sso:active,
 button.kds-btn-google:active,
 a.kds-btn-google:active {
-    background: #E8E8E8;
+    background: var(--kds-btn-sso-bg-active, #E8E8E8);
+}
+
+/* Dark theme per Google Identity guidelines; hover/active are 8% / 12%
+   state layers of the label color over the fill. */
+[data-theme="dark"] .kds-btn-sso,
+[data-theme="dark"] .kds-btn-google {
+    --kds-btn-sso-bg: #131314;
+    --kds-btn-sso-color: #E3E3E3;
+    --kds-btn-sso-border: #8E918F;
+    --kds-btn-sso-bg-hover: #242425;
+    --kds-btn-sso-bg-active: #2C2C2D;
 }
 
+button.kds-btn-sso:disabled,
+a.kds-btn-sso:disabled,
 button.kds-btn-google:disabled,
 a.kds-btn-google:disabled {
     background: var(--kds-color-action-disabled-bg);
@@ -2440,7 +2464,8 @@ a.kds-btn-google:disabled {
     box-shadow: none;
 }
 
-/* Google G icon container - white background per guidelines */
+/* Provider logo container */
+.kds-btn-sso .kds-sso-icon,
 .kds-btn-google .kds-google-icon {
     display: flex;
     align-items: center;
@@ -2448,6 +2473,7 @@ a.kds-btn-google:disabled {
     flex-shrink: 0;
 }
 
+.kds-btn-sso .kds-sso-icon svg,
 .kds-btn-google .kds-google-icon svg {
     width: var(--kds-spacing-button-icon-size);
     height: var(--kds-spacing-button-icon-size);
@@ -8081,13 +8107,20 @@ svg[fill='none'] {
 
 /* Payment stage — full-viewport centered wrapper.
    Fondo muted (gris) para que las cards blancas (header + body) y el gap entre
-   ellas se distingan; sin esto, card blanca sobre fondo blanco se funden. */
+   ellas se distingan; sin esto, card blanca sobre fondo blanco se funden.
+
+   --kds-color-background-body es el fondo de la pantalla, y es lo que un comercio
+   cambia con su backgroundColor. Se resuelve aca, con muted como fallback, y no
+   como alias en :root: un alias se evalua en :root y queda con el valor de :root,
+   asi que la variable que el widget setea en body nunca llegaria a la etapa. Los
+   otros usos de muted (tabs, bloque de codigo, hover del FAB) no se tocan: son
+   superficies de componentes, no el fondo de la pantalla. */
 .kds-payment-stage {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     padding: var(--kds-spacing-2-5) var(--kds-spacing-2) var(--kds-spacing-8);
-    background: var(--kds-color-background-muted);
+    background: var(--kds-color-background-body, var(--kds-color-background-muted));
 }
 
 /* Payment flow — narrow column */