@khipu/design-system 0.1.0-alpha.32 → 0.1.0-alpha.34

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-06T17:40:39.111Z
+ * Generated: 2026-04-07T15:13:38.549Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -78,6 +78,18 @@
   /* Divider */
   --kds-color-divider: rgba(0, 0, 0, 0.12);
 
+  /* Gray palette - Neutral colors */
+  --kds-color-gray-50: #F9FAFB;
+  --kds-color-gray-100: #F3F4F6;
+  --kds-color-gray-200: #E5E7EB;
+  --kds-color-gray-300: #D1D5DB;
+  --kds-color-gray-400: #9CA3AF;
+  --kds-color-gray-500: #6B7280;
+  --kds-color-gray-600: #4B5563;
+  --kds-color-gray-700: #374151;
+  --kds-color-gray-800: #1F2937;
+  --kds-color-gray-900: #111827;
+
   /* Input borders */
   --kds-color-input-enabled-border: rgba(0, 0, 0, 0.23);
   --kds-color-input-hover-border: rgba(0, 0, 0, 0.87);
@@ -169,6 +181,14 @@
   --kds-spacing-10: 80px;
   --kds-spacing-11: 88px;
   --kds-spacing-12: 96px;
+  --kds-spacing-20: 160px;
+  --kds-spacing-0-5: 4px;
+  --kds-spacing-0-75: 6px;
+  --kds-spacing-1-5: 12px;
+  --kds-spacing-2-5: 20px;
+  --kds-spacing-3-5: 28px;
+  --kds-spacing-4-5: 36px;
+  --kds-spacing-5-5: 44px;
 
   /* Semantic spacing */
   --kds-spacing-input-padding-y: 16px;
@@ -233,6 +253,19 @@
   --kds-border-medium: #999999;
   --kds-border-dark: #666666;
 
+  /* ==========================================================================
+     SEMANTIC ALIASES
+     ========================================================================== */
+
+
+  /* Surface aliases */
+  --kds-surface-base: var(--kds-color-background-default);
+
+  /* Text aliases */
+  --kds-text-primary: var(--kds-color-text-primary);
+  --kds-text-secondary: var(--kds-color-text-secondary);
+  --kds-text-disabled: var(--kds-color-text-disabled);
+
   /* ==========================================================================
      SHADOW TOKENS
      ========================================================================== */
@@ -1068,7 +1101,6 @@ a.kds-btn.kds-btn-md {
 .kds-card-plan-features {
     display: flex;
     flex-direction: column;
-    gap: var(--kds-spacing-3);
     flex: 1;
 }
 
@@ -1121,6 +1153,20 @@ a.kds-btn.kds-btn-md {
     padding: 0;
 }
 
+/* Card Plan - List Styles */
+.kds-card-plan ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-block-start: 0 !important;
+}
+
+.kds-card-plan li {
+  margin: 0;
+  padding: 0;
+  margin-block-start: 0 !important;
+}
+
 .kds-card-footer {
     margin-top: 0;
     display: flex;
@@ -1176,9 +1222,10 @@ a.kds-btn.kds-btn-md {
 /* Grid patterns */
 .kds-grid-2col {
     display: grid;
-    grid-template-columns: 1fr;
     gap: var(--kds-spacing-4);
     align-items: stretch;
+    justify-items: center;
+    grid-template-columns: minmax(0, 1fr);
 }
 
 @media (min-width: 768px) {
@@ -1383,19 +1430,6 @@ a.kds-btn.kds-btn-md {
 .kds-py-6 { padding-top: var(--kds-spacing-6); padding-bottom: var(--kds-spacing-6); }
 .kds-py-8 { padding-top: var(--kds-spacing-8); padding-bottom: var(--kds-spacing-8); }
 
-/* Legacy spacing utilities (backward compatibility) */
-.khipu-spacing-top {
-    margin-top: var(--kds-spacing-8);
-}
-
-.khipu-spacing-bottom {
-    margin-bottom: var(--kds-spacing-8);
-}
-
-.khipu-spacing-large {
-    margin: var(--kds-spacing-12) 0;
-}
-
 /* ========================================
    Stepper Component (Multi-stage Progress Indicator)
    Material Design 3 stepper pattern
@@ -1629,6 +1663,7 @@ footer.primary a {
     display: block;
     padding: 4px 0;
     transition: color 0.2s ease;
+    text-align: center;
 }
 
 footer.primary a:hover {
@@ -1841,7 +1876,7 @@ body.dark {
     font-size: var(--kds-font-size-xs);
     font-weight: var(--kds-font-weight-medium);
     border-radius: var(--kds-radius-sm);
-    padding: calc(var(--kds-spacing-1) / 2) var(--kds-spacing-2);
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-2);
     box-shadow: var(--kds-shadow-4);
 }
 
@@ -2096,122 +2131,6 @@ dialog.modal .field.border:focus-within {
     border-color: var(--kds-color-primary-main);
 }
 
-/* ========================================
-   WELCOME HERO SECTION
-   Full-width gradient hero with CTA
-   ======================================== */
-
-.kds-welcome-hero {
-    background: linear-gradient(135deg, var(--kds-welcome-gradient-start) 0%, var(--kds-welcome-gradient-end) 100%);
-    color: white;
-    padding: var(--kds-spacing-20) var(--kds-spacing-6);
-    text-align: center;
-    border-radius: 0;
-    margin: 0;
-    position: relative;
-    overflow: hidden;
-}
-
-/* Decorative circles */
-.kds-welcome-hero::before,
-.kds-welcome-hero::after {
-    content: "";
-    position: absolute;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.kds-welcome-hero::before {
-    width: 400px;
-    height: 400px;
-    top: -200px;
-    right: -100px;
-}
-
-.kds-welcome-hero::after {
-    width: 300px;
-    height: 300px;
-    bottom: -150px;
-    left: -50px;
-}
-
-.kds-welcome-hero-content {
-    position: relative;
-    z-index: 1;
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.kds-welcome-hero-icon {
-    font-size: 80px;
-    margin-bottom: var(--kds-spacing-4);
-    opacity: 0.9;
-}
-
-.kds-welcome-hero-icon i {
-    width: auto !important;
-    height: auto !important;
-    font-size: 80px !important;
-    min-width: 80px;
-    min-height: 80px;
-}
-
-/* Fix for benefit card icons - BeerCSS forces 24px, override for large icons */
-.kds-card-elevated i.icon-filled {
-    width: auto !important;
-    height: auto !important;
-    min-width: 48px;
-    min-height: 48px;
-}
-
-.kds-welcome-hero-title {
-    font-size: var(--kds-font-size-4xl);
-    font-weight: var(--kds-font-weight-bold);
-    margin-bottom: var(--kds-spacing-4);
-    line-height: 1.2;
-}
-
-.kds-welcome-hero-subtitle {
-    font-size: var(--kds-font-size-xl);
-    opacity: 0.95;
-    margin-bottom: var(--kds-spacing-8);
-    line-height: 1.5;
-}
-
-.kds-welcome-hero-actions {
-    display: flex;
-    gap: var(--kds-spacing-4);
-    justify-content: center;
-}
-
-
-@media (max-width: 768px) {
-    .kds-welcome-hero {
-        padding: var(--kds-spacing-12) var(--kds-spacing-4);
-    }
-
-    .kds-welcome-hero-icon {
-        font-size: 60px;
-    }
-
-    .kds-welcome-hero-title {
-        font-size: var(--kds-font-size-3xl);
-    }
-
-    .kds-welcome-hero-subtitle {
-        font-size: var(--kds-font-size-lg);
-    }
-
-    .kds-welcome-hero-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .kds-welcome-hero-actions button {
-        width: 100% !important;
-    }
-}
-
 /* ========================================
    CONTRACT ACCORDION
    Expandable terms and conditions
@@ -2606,7 +2525,7 @@ footer > .kds-container-center {
     font-size: var(--kds-font-size-sm);
     font-weight: var(--kds-font-weight-semibold);
     line-height: var(--kds-line-height-normal);
-    margin-bottom: calc(var(--kds-spacing-1) / 2);
+    margin-bottom: var(--kds-spacing-0-5);
     word-break: normal;
     overflow-wrap: break-word;
 }
@@ -2795,6 +2714,9 @@ footer > .kds-container-center {
     pointer-events: none;
     transform: translateY(calc(var(--kds-spacing-1) * -1));
     transition: all var(--kds-transition-shorter) var(--kds-easing-standard);
+    max-height: calc(100vh - var(--kds-spacing-12));
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .kds-sidebar-header-dropdown.kds-dropdown-open {
@@ -2852,7 +2774,7 @@ footer > .kds-container-center {
     left: 0;
     top: 0;
     bottom: 0;
-    width: calc(var(--kds-spacing-1) / 2);
+    width: var(--kds-spacing-0-5);
     background: var(--kds-color-primary-main);
 }
 
@@ -3237,7 +3159,7 @@ footer > .kds-container-center {
 
 .component-tag {
     font-size: var(--kds-font-size-xs);
-    padding: calc(var(--kds-spacing-1) / 2) var(--kds-spacing-3);
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-3);
     background: var(--kds-color-background-default);
     color: var(--kds-color-text-secondary);
     border-radius: var(--kds-radius-full);