@vaneui/ui 0.3.1-alpha.20250914210126.5142197 → 0.3.1-alpha.20250917170051.b819c80

package/dist/ui.css

@@ -16,7 +16,6 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
-    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
@@ -27,15 +26,13 @@
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
-    --color-yellow-900: oklch(42.1% 0.095 57.708);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-200: oklch(92.5% 0.084 155.995);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
-    --color-green-800: oklch(44.8% 0.119 151.328);
-    --color-green-900: oklch(39.3% 0.095 152.535);
     --color-emerald-50: oklch(97.9% 0.021 166.113);
     --color-emerald-100: oklch(95% 0.052 163.051);
     --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -62,7 +59,7 @@
     --color-indigo-100: oklch(93% 0.034 272.788);
     --color-indigo-400: oklch(67.3% 0.182 276.935);
     --color-indigo-500: oklch(58.5% 0.233 277.117);
-    --color-indigo-800: oklch(39.8% 0.195 277.366);
+    --color-indigo-700: oklch(45.7% 0.24 277.023);
     --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-violet-600: oklch(54.1% 0.281 293.009);
     --color-purple-600: oklch(55.8% 0.288 302.321);
@@ -74,7 +71,6 @@
     --color-rose-600: oklch(58.6% 0.253 17.585);
     --color-rose-700: oklch(51.4% 0.222 16.935);
     --color-rose-800: oklch(45.5% 0.188 13.697);
-    --color-rose-900: oklch(41% 0.159 10.272);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -87,6 +83,7 @@
     --color-gray-950: oklch(13% 0.028 261.692);
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-md: 28rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
@@ -226,12 +223,12 @@
     --color-bg-filled-layout-primary: var(--color-blue-800);
     --color-bg-filled-layout-secondary: var(--color-gray-800);
     --color-bg-filled-layout-tertiary: var(--color-gray-900);
-    --color-bg-filled-layout-accent: var(--color-indigo-800);
-    --color-bg-filled-layout-success: var(--color-green-800);
-    --color-bg-filled-layout-danger: var(--color-red-800);
+    --color-bg-filled-layout-accent: var(--color-indigo-700);
+    --color-bg-filled-layout-success: var(--color-green-700);
+    --color-bg-filled-layout-danger: var(--color-red-700);
     --color-bg-filled-layout-warning: var(--color-yellow-800);
-    --color-bg-filled-layout-info: var(--color-blue-800);
-    --color-bg-filled-layout-link: var(--color-blue-800);
+    --color-bg-filled-layout-info: var(--color-blue-700);
+    --color-bg-filled-layout-link: var(--color-blue-700);
     --color-border-default: var(--color-gray-200);
     --color-border-primary: var(--color-blue-200);
     --color-border-secondary: var(--color-gray-200);
@@ -242,26 +239,54 @@
     --color-border-danger: var(--color-red-200);
     --color-border-warning: var(--color-yellow-200);
     --color-border-info: var(--color-blue-200);
-    --color-border-filled-default: var(--color-gray-900);
-    --color-border-filled-primary: var(--color-blue-900);
-    --color-border-filled-secondary: var(--color-gray-900);
-    --color-border-filled-tertiary: var(--color-gray-950);
-    --color-border-filled-accent: var(--color-rose-900);
-    --color-border-filled-success: var(--color-green-900);
-    --color-border-filled-danger: var(--color-red-900);
-    --color-border-filled-warning: var(--color-yellow-900);
-    --color-border-filled-info: var(--color-blue-900);
-    --color-border-filled-link: var(--color-blue-900);
-    --ui-br-xs: 0.125rem;
-    --ui-br-sm: 0.25rem;
-    --ui-br-md: 0.375rem;
-    --ui-br-lg: 0.5rem;
-    --ui-br-xl: 0.625rem;
-    --layout-br-xs: 0.375rem;
-    --layout-br-sm: 0.5rem;
-    --layout-br-md: 0.625rem;
-    --layout-br-lg: 0.75rem;
-    --layout-br-xl: 0.875rem;
+    --color-border-filled-default: var(--color-gray-600);
+    --color-border-filled-primary: var(--color-blue-600);
+    --color-border-filled-secondary: var(--color-gray-700);
+    --color-border-filled-tertiary: var(--color-gray-800);
+    --color-border-filled-accent: var(--color-rose-600);
+    --color-border-filled-success: var(--color-green-600);
+    --color-border-filled-danger: var(--color-red-600);
+    --color-border-filled-warning: var(--color-yellow-600);
+    --color-border-filled-info: var(--color-blue-600);
+    --color-border-filled-link: var(--color-blue-600);
+    --ui-br-spacing: 0.125rem;
+    --ui-br-xs: calc(1 * var(--ui-br-spacing));
+    --ui-br-sm: calc(2 * var(--ui-br-spacing));
+    --ui-br-md: calc(3 * var(--ui-br-spacing));
+    --ui-br-lg: calc(4 * var(--ui-br-spacing));
+    --ui-br-xl: calc(5 * var(--ui-br-spacing));
+    --layout-br-spacing: 0.25rem;
+    --layout-br-xs: calc(3 * var(--layout-br-spacing));
+    --layout-br-sm: calc(4 * var(--layout-br-spacing));
+    --layout-br-md: calc(5 * var(--layout-br-spacing));
+    --layout-br-lg: calc(6 * var(--layout-br-spacing));
+    --layout-br-xl: calc(7 * var(--layout-br-spacing));
+    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
+    --layout-gap-xs: calc(2 * var(--layout-spacing));
+    --layout-gap-sm: calc(3 * var(--layout-spacing));
+    --layout-gap-md: calc(4 * var(--layout-spacing));
+    --layout-gap-lg: calc(5 * var(--layout-spacing));
+    --layout-gap-xl: calc(6 * var(--layout-spacing));
+    --layout-px-xs: calc(2 * var(--layout-spacing));
+    --layout-px-sm: calc(3 * var(--layout-spacing));
+    --layout-px-md: calc(4 * var(--layout-spacing));
+    --layout-px-lg: calc(5 * var(--layout-spacing));
+    --layout-px-xl: calc(6 * var(--layout-spacing));
+    --layout-py-xs: calc(2 * var(--layout-spacing));
+    --layout-py-sm: calc(3 * var(--layout-spacing));
+    --layout-py-md: calc(4 * var(--layout-spacing));
+    --layout-py-lg: calc(5 * var(--layout-spacing));
+    --layout-py-xl: calc(6 * var(--layout-spacing));
+    --section-px-xs: calc(5 * var(--layout-spacing));
+    --section-px-sm: calc(6 * var(--layout-spacing));
+    --section-px-md: calc(7 * var(--layout-spacing));
+    --section-px-lg: calc(8 * var(--layout-spacing));
+    --section-px-xl: calc(9 * var(--layout-spacing));
+    --section-py-xs: calc(4 * var(--layout-spacing));
+    --section-py-sm: calc(8 * var(--layout-spacing));
+    --section-py-md: calc(12 * var(--layout-spacing));
+    --section-py-lg: calc(16 * var(--layout-spacing));
+    --section-py-xl: calc(20 * var(--layout-spacing));
   }
 }
 @layer base {
@@ -527,6 +552,9 @@
   .h-px {
     height: 1px;
   }
+  .w-1\/3 {
+    width: calc(1/3 * 100%);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -563,6 +591,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
@@ -653,6 +684,21 @@
   .justify-stretch {
     justify-content: stretch;
   }
+  .gap-\(--layout-gap-lg\) {
+    gap: var(--layout-gap-lg);
+  }
+  .gap-\(--layout-gap-md\) {
+    gap: var(--layout-gap-md);
+  }
+  .gap-\(--layout-gap-sm\) {
+    gap: var(--layout-gap-sm);
+  }
+  .gap-\(--layout-gap-xl\) {
+    gap: var(--layout-gap-xl);
+  }
+  .gap-\(--layout-gap-xs\) {
+    gap: var(--layout-gap-xs);
+  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
@@ -683,18 +729,6 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
-  .gap-10 {
-    gap: calc(var(--spacing) * 10);
-  }
-  .gap-12 {
-    gap: calc(var(--spacing) * 12);
-  }
-  .gap-16 {
-    gap: calc(var(--spacing) * 16);
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1111,6 +1145,36 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .px-\(--layout-px-lg\) {
+    padding-inline: var(--layout-px-lg);
+  }
+  .px-\(--layout-px-md\) {
+    padding-inline: var(--layout-px-md);
+  }
+  .px-\(--layout-px-sm\) {
+    padding-inline: var(--layout-px-sm);
+  }
+  .px-\(--layout-px-xl\) {
+    padding-inline: var(--layout-px-xl);
+  }
+  .px-\(--layout-px-xs\) {
+    padding-inline: var(--layout-px-xs);
+  }
+  .px-\(--section-px-lg\) {
+    padding-inline: var(--section-px-lg);
+  }
+  .px-\(--section-px-md\) {
+    padding-inline: var(--section-px-md);
+  }
+  .px-\(--section-px-sm\) {
+    padding-inline: var(--section-px-sm);
+  }
+  .px-\(--section-px-xl\) {
+    padding-inline: var(--section-px-xl);
+  }
+  .px-\(--section-px-xs\) {
+    padding-inline: var(--section-px-xs);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1138,18 +1202,42 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-7 {
-    padding-inline: calc(var(--spacing) * 7);
-  }
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
-  .px-9 {
-    padding-inline: calc(var(--spacing) * 9);
-  }
   .px-10 {
     padding-inline: calc(var(--spacing) * 10);
   }
+  .py-\(--layout-py-lg\) {
+    padding-block: var(--layout-py-lg);
+  }
+  .py-\(--layout-py-md\) {
+    padding-block: var(--layout-py-md);
+  }
+  .py-\(--layout-py-sm\) {
+    padding-block: var(--layout-py-sm);
+  }
+  .py-\(--layout-py-xl\) {
+    padding-block: var(--layout-py-xl);
+  }
+  .py-\(--layout-py-xs\) {
+    padding-block: var(--layout-py-xs);
+  }
+  .py-\(--section-py-lg\) {
+    padding-block: var(--section-py-lg);
+  }
+  .py-\(--section-py-md\) {
+    padding-block: var(--section-py-md);
+  }
+  .py-\(--section-py-sm\) {
+    padding-block: var(--section-py-sm);
+  }
+  .py-\(--section-py-xl\) {
+    padding-block: var(--section-py-xl);
+  }
+  .py-\(--section-py-xs\) {
+    padding-block: var(--section-py-xs);
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -1174,30 +1262,15 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .py-5 {
-    padding-block: calc(var(--spacing) * 5);
-  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
-  .py-7 {
-    padding-block: calc(var(--spacing) * 7);
-  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
-  }
-  .py-16 {
-    padding-block: calc(var(--spacing) * 16);
-  }
-  .py-20 {
-    padding-block: calc(var(--spacing) * 20);
-  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -2290,106 +2363,6 @@
       flex-direction: column;
     }
   }
-  .max-lg\:gap-1 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 1);
-    }
-  }
-  .max-lg\:gap-2 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 2);
-    }
-  }
-  .max-lg\:gap-3 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 3);
-    }
-  }
-  .max-lg\:gap-4 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 4);
-    }
-  }
-  .max-lg\:gap-5 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 5);
-    }
-  }
-  .max-lg\:gap-6 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 6);
-    }
-  }
-  .max-lg\:gap-7 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 7);
-    }
-  }
-  .max-lg\:gap-8 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 8);
-    }
-  }
-  .max-lg\:gap-9 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 9);
-    }
-  }
-  .max-lg\:px-4 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 4);
-    }
-  }
-  .max-lg\:px-5 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 5);
-    }
-  }
-  .max-lg\:px-6 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
-  .max-lg\:px-7 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 7);
-    }
-  }
-  .max-lg\:px-8 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
-  }
-  .max-lg\:py-4 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 4);
-    }
-  }
-  .max-lg\:py-5 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 5);
-    }
-  }
-  .max-lg\:py-6 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 6);
-    }
-  }
-  .max-lg\:py-7 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 7);
-    }
-  }
-  .max-lg\:py-14 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 14);
-    }
-  }
-  .max-lg\:py-16 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 16);
-    }
-  }
   .max-lg\:text-2xl {
     @media (width < 64rem) {
       font-size: var(--text-2xl);
@@ -2436,76 +2409,6 @@
       flex-direction: column;
     }
   }
-  .max-md\:gap-2 {
-    @media (width < 48rem) {
-      gap: calc(var(--spacing) * 2);
-    }
-  }
-  .max-md\:gap-3 {
-    @media (width < 48rem) {
-      gap: calc(var(--spacing) * 3);
-    }
-  }
-  .max-md\:gap-4 {
-    @media (width < 48rem) {
-      gap: calc(var(--spacing) * 4);
-    }
-  }
-  .max-md\:gap-6 {
-    @media (width < 48rem) {
-      gap: calc(var(--spacing) * 6);
-    }
-  }
-  .max-md\:gap-8 {
-    @media (width < 48rem) {
-      gap: calc(var(--spacing) * 8);
-    }
-  }
-  .max-md\:px-3 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 3);
-    }
-  }
-  .max-md\:px-4 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 4);
-    }
-  }
-  .max-md\:px-5 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 5);
-    }
-  }
-  .max-md\:px-6 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
-  .max-md\:px-7 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 7);
-    }
-  }
-  .max-md\:py-3 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 3);
-    }
-  }
-  .max-md\:py-5 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 5);
-    }
-  }
-  .max-md\:py-6 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 6);
-    }
-  }
-  .max-md\:py-12 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 12);
-    }
-  }
   .max-md\:text-2xl {
     @media (width < 48rem) {
       font-size: var(--text-2xl);

package/dist/vars.css

@@ -114,13 +114,13 @@
     --color-bg-filled-layout-primary: var(--color-blue-800);
     --color-bg-filled-layout-secondary: var(--color-gray-800);
     --color-bg-filled-layout-tertiary: var(--color-gray-900);
-    --color-bg-filled-layout-accent: var(--color-indigo-800);
-    --color-bg-filled-layout-success: var(--color-green-800);
-    --color-bg-filled-layout-danger: var(--color-red-800);
+    --color-bg-filled-layout-accent: var(--color-indigo-700);
+    --color-bg-filled-layout-success: var(--color-green-700);
+    --color-bg-filled-layout-danger: var(--color-red-700);
     --color-bg-filled-layout-warning: var(--color-yellow-800);
-    --color-bg-filled-layout-info: var(--color-blue-800);
+    --color-bg-filled-layout-info: var(--color-blue-700);
     --color-bg-filled-layout-transparent: transparent;
-    --color-bg-filled-layout-link: var(--color-blue-800);
+    --color-bg-filled-layout-link: var(--color-blue-700);
 
     /* Border Colors */
     --color-border-default: var(--color-gray-200);
@@ -135,28 +135,66 @@
     --color-border-info: var(--color-blue-200);
 
     /* Filled Button Border Colors */
-    --color-border-filled-default: var(--color-gray-900);
-    --color-border-filled-primary: var(--color-blue-900);
-    --color-border-filled-secondary: var(--color-gray-900);
-    --color-border-filled-tertiary: var(--color-gray-950);
-    --color-border-filled-accent: var(--color-rose-900);
-    --color-border-filled-success: var(--color-green-900);
-    --color-border-filled-danger: var(--color-red-900);
-    --color-border-filled-warning: var(--color-yellow-900);
-    --color-border-filled-info: var(--color-blue-900);
-    --color-border-filled-link: var(--color-blue-900);
+    --color-border-filled-default: var(--color-gray-600);
+    --color-border-filled-primary: var(--color-blue-600);
+    --color-border-filled-secondary: var(--color-gray-700);
+    --color-border-filled-tertiary: var(--color-gray-800);
+    --color-border-filled-accent: var(--color-rose-600);
+    --color-border-filled-success: var(--color-green-600);
+    --color-border-filled-danger: var(--color-red-600);
+    --color-border-filled-warning: var(--color-yellow-600);
+    --color-border-filled-info: var(--color-blue-600);
+    --color-border-filled-link: var(--color-blue-600);
 
     /* UI Component Border Radius Sizes */
-    --ui-br-xs: 0.125rem;
-    --ui-br-sm: 0.25rem;
-    --ui-br-md: 0.375rem;
-    --ui-br-lg: 0.5rem;
-    --ui-br-xl: 0.625rem;
+    --ui-br-spacing: 0.125rem;
+    --ui-br-xs: calc(1 * var(--ui-br-spacing));
+    --ui-br-sm: calc(2 * var(--ui-br-spacing));
+    --ui-br-md: calc(3 * var(--ui-br-spacing));
+    --ui-br-lg: calc(4 * var(--ui-br-spacing));
+    --ui-br-xl: calc(5 * var(--ui-br-spacing));
 
     /* Layout Component Border Radius Sizes */
-    --layout-br-xs: 0.375rem;
-    --layout-br-sm: 0.5rem;
-    --layout-br-md: 0.625rem;
-    --layout-br-lg: 0.75rem;
-    --layout-br-xl: 0.875rem;
+    --layout-br-spacing: 0.25rem;
+    --layout-br-xs: calc(3 * var(--layout-br-spacing));
+    --layout-br-sm: calc(4 * var(--layout-br-spacing));
+    --layout-br-md: calc(5 * var(--layout-br-spacing));
+    --layout-br-lg: calc(6 * var(--layout-br-spacing));
+    --layout-br-xl: calc(7 * var(--layout-br-spacing));
+
+    /* Layout Component Gap Sizes */
+    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
+    --layout-gap-xs: calc(2 * var(--layout-spacing));
+    --layout-gap-sm: calc(3 * var(--layout-spacing));
+    --layout-gap-md: calc(4 * var(--layout-spacing));
+    --layout-gap-lg: calc(5 * var(--layout-spacing));
+    --layout-gap-xl: calc(6 * var(--layout-spacing));
+
+    /* Layout Component Horizontal Padding Sizes */
+    --layout-px-xs: calc(2 * var(--layout-spacing));
+    --layout-px-sm: calc(3 * var(--layout-spacing));
+    --layout-px-md: calc(4 * var(--layout-spacing));
+    --layout-px-lg: calc(5 * var(--layout-spacing));
+    --layout-px-xl: calc(6 * var(--layout-spacing));
+
+    /* Layout Component Vertical Padding Sizes */
+    --layout-py-xs: calc(2 * var(--layout-spacing));
+    --layout-py-sm: calc(3 * var(--layout-spacing));
+    --layout-py-md: calc(4 * var(--layout-spacing));
+    --layout-py-lg: calc(5 * var(--layout-spacing));
+    --layout-py-xl: calc(6 * var(--layout-spacing));
+
+    /* Section Component Horizontal Padding Sizes */
+    --section-px-xs: calc(5 * var(--layout-spacing));
+    --section-px-sm: calc(6 * var(--layout-spacing));
+    --section-px-md: calc(7 * var(--layout-spacing));
+    --section-px-lg: calc(8 * var(--layout-spacing));
+    --section-px-xl: calc(9 * var(--layout-spacing));
+
+    /* Section Component Vertical Padding Sizes */
+    --section-py-xs: calc(4 * var(--layout-spacing));
+    --section-py-sm: calc(8 * var(--layout-spacing));
+    --section-py-md: calc(12 * var(--layout-spacing));
+    --section-py-lg: calc(16 * var(--layout-spacing));
+    --section-py-xl: calc(20 * var(--layout-spacing));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaneui/ui",
-  "version": "0.3.1-alpha.20250914210126.5142197",
+  "version": "0.3.1-alpha.20250917170051.b819c80",
   "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
   "author": "",
   "license": "ISC",