@khipu/design-system 0.1.0-alpha.37 → 0.1.0-alpha.39

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-04-08T16:35:01.405Z
+ * Generated: 2026-04-15T16:04:48.243Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -27,14 +27,14 @@
 
 
   /* Primary palette - Khipu brand */
-  --kds-color-primary-main: #7548a8;
-  --kds-color-primary-light: #6fb2e2;
-  --kds-color-primary-dark: #6A3A8C;
+  --kds-color-primary-main: #8347AD;
+  --kds-color-primary-light: #9B6BBD;
+  --kds-color-primary-dark: #5B3179;
   --kds-color-primary-contrast: #FFFFFF;
-  --kds-color-primary-hover: rgba(117, 72, 168, 0.04);
-  --kds-color-primary-selected: rgba(117, 72, 168, 0.08);
-  --kds-color-primary-focus: rgba(117, 72, 168, 0.12);
-  --kds-color-primary-focus-visible: rgba(117, 72, 168, 0.30);
+  --kds-color-primary-hover: rgba(131, 71, 173, 0.04);
+  --kds-color-primary-selected: rgba(131, 71, 173, 0.08);
+  --kds-color-primary-focus: rgba(131, 71, 173, 0.12);
+  --kds-color-primary-focus-visible: rgba(131, 71, 173, 0.30);
 
   /* Secondary palette */
   --kds-color-secondary-main: #4CAF50;
@@ -63,7 +63,7 @@
   --kds-color-text-hint: rgba(0, 0, 0, 0.38);
 
   /* Background colors */
-  --kds-color-background-default: #F5F5F5;
+  --kds-color-background-default: #FFFFFF;
   --kds-color-background-paper: #FFFFFF;
   --kds-color-background-elevated: #FAFAFA;
 
@@ -105,6 +105,14 @@
   --kds-alert-warning-bg: #FFFBEB;
   --kds-alert-success-bg: #ECFDF5;
   --kds-alert-error-bg: #FEF2F2;
+  --kds-alert-success-text: #1E4620;
+  --kds-alert-warning-text: #663C00;
+  --kds-alert-error-text: #5F2120;
+  --kds-alert-info-text: #014361;
+  --kds-alert-success-border: #2CA24D;
+  --kds-alert-warning-border: #FF9800;
+  --kds-alert-error-border: #E53E3E;
+  --kds-alert-info-border: #006699;
 
   /* ==========================================================================
      TYPOGRAPHY TOKENS
@@ -249,7 +257,7 @@
 
 
   /* Border colors */
-  --kds-border-light: #DDDDDD;
+  --kds-border-light: #DDDEE0;
   --kds-border-medium: #999999;
   --kds-border-dark: #666666;
 
@@ -605,6 +613,13 @@ body.dark {
     --kds-scroll-sm-height: 280px;
     --kds-scroll-md-height: 420px;
     --kds-scroll-lg-height: 600px;
+
+    /* Stage Layout */
+    --kds-stage-narrow-max-width: 420px;
+    --kds-navbar-height: 64px;
+
+    /* Snackbar */
+    --kds-snackbar-max-width: 560px;
 }
 
 /* ========================================
@@ -909,6 +924,12 @@ a.kds-btn.kds-btn-md {
 
 /* Default .kds-btn uses --kds-spacing-button-min-height (50px) from base styles */
 
+/* Full-width button */
+button.kds-btn.kds-btn-block,
+a.kds-btn.kds-btn-block {
+    width: 100%;
+}
+
 /* ========================================
    Card Components (Material Design 3)
    ======================================== */
@@ -1379,13 +1400,17 @@ a.kds-btn.kds-btn-md {
 .kds-m-8 { margin: var(--kds-spacing-8); }
 
 .kds-mt-0 { margin-top: 0; }
+.kds-mt-1 { margin-top: var(--kds-spacing-1); }
 .kds-mt-2 { margin-top: var(--kds-spacing-2); }
+.kds-mt-3 { margin-top: var(--kds-spacing-3); }
 .kds-mt-4 { margin-top: var(--kds-spacing-4); }
 .kds-mt-6 { margin-top: var(--kds-spacing-6); }
 .kds-mt-8 { margin-top: var(--kds-spacing-8); }
 
 .kds-mb-0 { margin-bottom: 0; }
+.kds-mb-1 { margin-bottom: var(--kds-spacing-1); }
 .kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
+.kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
 .kds-mb-4 { margin-bottom: var(--kds-spacing-4); }
 .kds-mb-6 { margin-bottom: var(--kds-spacing-6); }
 .kds-mb-8 { margin-bottom: var(--kds-spacing-8); }
@@ -1407,7 +1432,7 @@ a.kds-btn.kds-btn-md {
 .kds-mx-auto { margin-left: auto; margin-right: auto; }
 
 /* Spacing utilities - Padding */
-.kds-p-0 { padding: 0; }
+.kds-p-0 { padding: 0 !important; }
 .kds-p-2 { padding: var(--kds-spacing-2); }
 .kds-p-4 { padding: var(--kds-spacing-4); }
 .kds-p-6 { padding: var(--kds-spacing-6); }
@@ -1597,13 +1622,48 @@ a.kds-btn.kds-btn-md {
 
 .snackbar {
     position: fixed;
-    bottom: 24px;
+    bottom: var(--kds-spacing-3);
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9999;
+    z-index: var(--kds-z-index-snackbar);
     min-width: 344px;
-    max-width: 672px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    max-width: var(--kds-snackbar-max-width);
+    box-shadow: var(--kds-shadow-8);
+}
+
+/* Snackbar active state - ensure visibility when toggled via JS */
+.snackbar.active {
+    visibility: visible !important;
+    opacity: 1 !important;
+    transform: translateX(-50%) !important;
+}
+
+/* Snackbar semantic variants - background + text/icon color */
+.snackbar.error {
+    background-color: var(--kds-color-error-main) !important;
+    color: var(--on-error, var(--kds-color-primary-contrast)) !important;
+}
+
+.snackbar.error i {
+    color: var(--on-error, var(--kds-color-primary-contrast)) !important;
+}
+
+.snackbar.info {
+    background-color: var(--kds-color-info-main) !important;
+    color: var(--on-info, var(--kds-color-primary-contrast)) !important;
+}
+
+.snackbar.info i {
+    color: var(--on-info, var(--kds-color-primary-contrast)) !important;
+}
+
+.snackbar.success {
+    background-color: var(--kds-color-success-main) !important;
+    color: var(--on-success, var(--kds-color-primary-contrast)) !important;
+}
+
+.snackbar.success i {
+    color: var(--on-success, var(--kds-color-primary-contrast)) !important;
 }
 
 /* ========================================
@@ -1617,9 +1677,223 @@ nav.primary {
     z-index: 1000;
 }
 
-nav.primary a,
-nav.primary button {
-    color: white;
+nav.primary > a,
+nav.primary > button,
+nav.primary > div > a,
+nav.primary > div > button {
+    color: var(--on-primary);
+}
+
+/* ========================================
+   Locale Switcher (Navbar dropdown)
+   ======================================== */
+
+.kds-locale-switcher {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+button.kds-locale-switcher-toggle,
+.kds-locale-switcher .kds-locale-switcher-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kds-spacing-0-75);
+    background: transparent;
+    border: 1px solid var(--kds-color-gray-400);
+    border-radius: var(--kds-radius-button);
+    color: var(--on-primary);
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
+    cursor: pointer;
+    font-size: var(--kds-font-size-sm);
+    font-family: var(--kds-font-family-secondary);
+    transition: background var(--kds-transition-shorter) var(--kds-easing-standard),
+                border-color var(--kds-transition-shorter) var(--kds-easing-standard);
+    line-height: var(--kds-line-height-snug);
+}
+
+button.kds-locale-switcher-toggle:hover,
+.kds-locale-switcher .kds-locale-switcher-toggle:hover {
+    background: var(--kds-color-primary-focus);
+    border-color: var(--kds-color-gray-200);
+}
+
+.kds-locale-switcher-toggle .kds-locale-flag {
+    font-size: var(--kds-font-size-lg);
+    line-height: 1;
+}
+
+.kds-locale-switcher-toggle .kds-locale-arrow {
+    font-size: var(--kds-spacing-button-icon-size);
+    transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-locale-switcher.active .kds-locale-arrow {
+    transform: rotate(180deg);
+}
+
+.kds-locale-switcher-menu {
+    display: none;
+    position: absolute;
+    top: calc(100% + var(--kds-spacing-0-5));
+    right: 0;
+    min-width: 180px;
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-md);
+    box-shadow: var(--kds-shadow-dropdown);
+    z-index: var(--kds-z-index-appbar);
+    overflow: hidden;
+    padding: var(--kds-spacing-0-5) 0;
+}
+
+.kds-locale-switcher.active .kds-locale-switcher-menu {
+    display: block;
+}
+
+.kds-locale-switcher-menu a,
+.kds-locale-switcher-menu button {
+    display: flex !important;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 var(--kds-spacing-3);
+    gap: var(--kds-spacing-2);
+    width: 100%;
+    box-sizing: border-box !important;
+    background: transparent !important;
+    border: none !important;
+    color: var(--kds-color-text-primary) !important;
+    font-size: var(--kds-font-size-sm);
+    font-family: var(--kds-font-family-secondary);
+    cursor: pointer;
+    text-decoration: none;
+    transition: background var(--kds-transition-shortest) var(--kds-easing-standard);
+    text-align: left;
+    border-radius: 0 !important;
+    min-height: auto !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    position: relative;
+}
+
+/* Kill BeerCSS pseudo-elements on active buttons */
+.kds-locale-switcher-menu button::before,
+.kds-locale-switcher-menu button::after,
+.kds-locale-switcher-menu a::before,
+.kds-locale-switcher-menu a::after {
+    display: none !important;
+}
+
+.kds-locale-switcher-menu a:hover,
+.kds-locale-switcher-menu button:hover {
+    background: var(--kds-color-background-elevated) !important;
+}
+
+.kds-locale-switcher-menu .kds-locale-flag {
+    font-size: var(--kds-font-size-base);
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.kds-locale-switcher-menu button.active,
+.kds-locale-switcher-menu a.active {
+    background: var(--kds-color-primary-selected) !important;
+    font-weight: var(--kds-font-weight-medium);
+}
+
+/* ========================================
+   Google Sign-In Button
+   Per Google Identity branding guidelines:
+   https://developers.google.com/identity/branding-guidelines
+   ======================================== */
+
+button.kds-btn-google,
+a.kds-btn-google {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kds-spacing-1-5);
+    width: 100%;
+    background: var(--kds-color-background-paper);
+    color: #1F1F1F;
+    border: 1px solid #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-weight: var(--kds-font-weight-medium);
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-normal);
+    letter-spacing: var(--kds-letter-spacing-normal);
+    text-transform: none;
+    cursor: pointer;
+    transition: background var(--kds-transition-shorter) var(--kds-easing-standard),
+                box-shadow var(--kds-transition-shorter) var(--kds-easing-standard);
+    box-sizing: border-box;
+    box-shadow: none;
+}
+
+button.kds-btn-google:hover,
+a.kds-btn-google:hover {
+    background: #F2F2F2;
+    box-shadow: var(--kds-shadow-1);
+}
+
+button.kds-btn-google:active,
+a.kds-btn-google:active {
+    background: #E8E8E8;
+}
+
+button.kds-btn-google:disabled,
+a.kds-btn-google:disabled {
+    background: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    border-color: var(--kds-color-action-disabled-bg);
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+/* Google G icon container - white background per guidelines */
+.kds-btn-google .kds-google-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.kds-btn-google .kds-google-icon svg {
+    width: var(--kds-spacing-button-icon-size);
+    height: var(--kds-spacing-button-icon-size);
+}
+
+/* ========================================
+   Link Styles
+   ======================================== */
+
+/* Explicit link class */
+.kds-link {
+    color: var(--kds-color-primary-main);
+    text-decoration: none;
+    cursor: pointer;
+    transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-link:hover {
+    color: var(--kds-color-primary-dark);
+    text-decoration: underline;
+}
+
+/* Contextual links inside cards and stage forms */
+.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]),
+.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]) {
+    color: var(--kds-color-primary-main);
+    text-decoration: none;
+    transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
+.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover {
+    color: var(--kds-color-primary-dark);
+    text-decoration: underline;
 }
 
 /* ========================================
@@ -1646,28 +1920,28 @@ body.kds-layout {
    ======================================== */
 
 footer.primary {
-    background: var(--surface-container-high, #F5F5F5);
+    background: var(--primary);
     padding: var(--kds-spacing-4) var(--kds-spacing-3);
-    margin-top: var(--kds-spacing-6);
+    color: var(--on-primary);
 }
 
 footer.primary h6 {
-    color: var(--khipu-primary);
-    font-weight: 600;
-    margin-bottom: 16px;
+    color: var(--on-primary);
+    font-weight: var(--kds-font-weight-semibold);
+    margin-bottom: var(--kds-spacing-2);
 }
 
 footer.primary a {
-    color: var(--on-surface);
+    color: var(--on-primary);
     text-decoration: none;
     display: block;
-    padding: 4px 0;
-    transition: color 0.2s ease;
+    padding: var(--kds-spacing-0-5) 0;
+    transition: opacity var(--kds-transition-shorter) var(--kds-easing-standard);
     text-align: center;
 }
 
 footer.primary a:hover {
-    color: var(--khipu-primary);
+    opacity: 0.8;
 }
 
 /* ========================================
@@ -1860,6 +2134,67 @@ body.dark {
   color: var(--primary);
 }
 
+/* ==========================================
+   PASSWORD STRENGTH METER
+   Barra de fortaleza de contraseña (3 niveles)
+   Usando tokens de diseño
+   ========================================== */
+
+.kds-password-strength {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    margin-top: var(--kds-spacing-0-5);
+    margin-bottom: var(--kds-spacing-1);
+}
+
+.kds-password-strength-bars {
+    display: flex;
+    gap: var(--kds-spacing-0-5);
+    flex: 1;
+}
+
+.kds-password-strength-bars span {
+    flex: 1;
+    height: var(--kds-spacing-0-5);
+    border-radius: var(--kds-radius-sm);
+    background: var(--outline-variant);
+    transition: background 0.2s ease;
+}
+
+.kds-password-strength-bars span.weak {
+    background: var(--kds-color-error-main);
+}
+
+.kds-password-strength-bars span.medium {
+    background: var(--kds-color-warning-main);
+}
+
+.kds-password-strength-bars span.strong {
+    background: var(--kds-color-success-main);
+}
+
+.kds-password-strength-label {
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-medium);
+    min-width: var(--kds-spacing-6);
+    text-align: right;
+    color: var(--kds-color-text-secondary);
+}
+
+.kds-password-strength-label.weak {
+    color: var(--kds-color-error-main);
+}
+
+.kds-password-strength-label.medium {
+    color: var(--kds-color-warning-main);
+}
+
+.kds-password-strength-label.strong {
+    color: var(--kds-color-success-main);
+}
+
 /* ========================================
    TOOLTIPS - Personaliza Beer CSS .tooltip
    ======================================== */
@@ -2039,6 +2374,22 @@ label.radio:has(input:disabled) {
     flex-direction: column;
 }
 
+/* Stage Content Narrow - For login/register pages with centered card */
+.kds-stage-content.narrow {
+    max-width: var(--kds-stage-narrow-max-width);
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}
+
+/* Stage Centered - Vertically center content in viewport (pre-login pages) */
+.kds-stage-centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+}
+
 /* Stage Actions - Bottom button area (if not using sticky footer) */
 .kds-stage-actions {
     display: flex;
@@ -2304,6 +2655,7 @@ dialog.modal .field.border:focus-within {
     max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
+    min-height: unset;
 }
 
 /* Nav should have no padding - only background color */
@@ -2316,6 +2668,7 @@ nav {
 nav > .kds-container-center {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: var(--kds-spacing-4);
     margin-left: auto !important;
     margin-right: auto !important;
@@ -2325,6 +2678,14 @@ nav > .kds-container-center {
     padding-bottom: var(--kds-spacing-2);
 }
 
+/* Navbar brand/logo */
+.kds-navbar-brand {
+    font-weight: var(--kds-font-weight-bold);
+    font-size: var(--kds-font-size-lg);
+    text-decoration: none;
+    color: inherit;
+}
+
 footer,
 footer.primary {
     padding-left: 0 !important;
@@ -2376,11 +2737,6 @@ footer > .kds-container-center {
     max-width: 1200px;
 }
 
-/* Margin top utilities */
-.kds-mt-3 {
-    margin-top: var(--kds-spacing-3);
-}
-
 /* ========================================
    AUTOMATIC SPACING SYSTEM
    Components handle their own spacing
@@ -2791,8 +3147,8 @@ footer > .kds-container-center {
     display: flex;
     flex-direction: column;
     overflow: visible;
-    padding-top: var(--kds-spacing-4);
-    padding-bottom: var(--kds-spacing-4);
+    padding-top: var(--kds-spacing-6);
+    padding-bottom: var(--kds-spacing-6);
 }
 
 /* ============================================
@@ -3584,18 +3940,13 @@ dialog#surveyModal button.circle {
     text-decoration: none;
 }
 
-/* Spacing utilities */
-.kds-mt-2 { margin-top: var(--kds-spacing-2); }
-.kds-mt-3 { margin-top: var(--kds-spacing-3); }
-.kds-mt-4 { margin-top: var(--kds-spacing-4); }
-.kds-mt-6 { margin-top: var(--kds-spacing-6); }
-.kds-mt-8 { margin-top: var(--kds-spacing-8); }
+.kds-text-muted {
+    color: var(--on-surface-variant);
+}
 
-.kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
-.kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
-.kds-mb-4 { margin-bottom: var(--kds-spacing-4); }
-.kds-mb-6 { margin-bottom: var(--kds-spacing-6); }
-.kds-mb-8 { margin-bottom: var(--kds-spacing-8); }
+.kds-text-sm {
+    font-size: var(--kds-font-size-sm);
+}
 
 /* Display utilities */
 .kds-hidden {
@@ -3757,10 +4108,13 @@ dialog#surveyModal button.circle {
 
 .kds-divider-text {
     text-align: center;
-    margin: var(--kds-spacing-6) 0;
+    margin: var(--kds-spacing-2) 0;
     color: var(--kds-color-text-secondary);
     position: relative;
     font-size: var(--kds-font-size-sm);
+    /* Reset BeerCSS [class*=divider] overrides */
+    background-color: transparent !important;
+    block-size: auto !important;
 }
 
 .kds-divider-text span {
@@ -3770,6 +4124,12 @@ dialog#surveyModal button.circle {
     z-index: 1;
 }
 
+/* Inside cards/elevated surfaces, use paper background */
+.kds-card-elevated .kds-divider-text span,
+.kds-card-body .kds-divider-text span {
+    background: var(--kds-color-background-paper);
+}
+
 .kds-divider-text::before {
     content: '';
     position: absolute;
@@ -3876,3 +4236,8 @@ dialog#surveyModal button.circle {
 .z-1000 {
     z-index: 1000;
 }
+
+/* height and min-heighy (for layout purposes) */
+.min-h-unset{
+    min-height: unset !important;
+}