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

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-06T19:00:54.492Z
  *
  * 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
      ========================================================================== */
@@ -1841,7 +1874,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);
 }
 
@@ -2606,7 +2639,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;
 }
@@ -2852,7 +2885,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 +3270,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);