@vaneui/ui 0.3.1-alpha.20250917170051.b819c80 → 0.3.1-alpha.20250925201320.8b6a424

package/dist/ui.css

@@ -249,44 +249,20 @@
     --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));
+    --ui-br-unit: 0.125rem;
+    --ui-br-xs: calc(1 * var(--ui-br-unit));
+    --ui-br-sm: calc(2 * var(--ui-br-unit));
+    --ui-br-md: calc(3 * var(--ui-br-unit));
+    --ui-br-lg: calc(4 * var(--ui-br-unit));
+    --ui-br-xl: calc(5 * var(--ui-br-unit));
     --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));
+    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.25rem);
+    --ui-spacing: var(--spacing);
   }
 }
 @layer base {
@@ -546,15 +522,15 @@
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-fit {
     height: fit-content;
   }
   .h-px {
     height: 1px;
   }
-  .w-1\/3 {
-    width: calc(1/3 * 100%);
-  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -684,30 +660,15 @@
   .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-\(--gap\) {
+    gap: var(--gap);
   }
-  .gap-\(--layout-gap-xl\) {
-    gap: var(--layout-gap-xl);
-  }
-  .gap-\(--layout-gap-xs\) {
-    gap: var(--layout-gap-xs);
+  .gap-\(--ui-gap\) {
+    gap: var(--ui-gap);
   }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
   .gap-1\.5 {
     gap: calc(var(--spacing) * 1.5);
   }
@@ -720,15 +681,6 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-  .gap-5 {
-    gap: calc(var(--spacing) * 5);
-  }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1145,35 +1097,11 @@
   .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-\(--px\) {
+    padding-inline: var(--px);
   }
-  .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-\(--ui-px\) {
+    padding-inline: var(--ui-px);
   }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
@@ -1202,41 +1130,11 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
-  .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-\(--py\) {
+    padding-block: var(--py);
   }
-  .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-\(--ui-py\) {
+    padding-block: var(--ui-py);
   }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
@@ -1717,6 +1615,99 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .\[--aspect-ratio\:1\.5\] {
+    --aspect-ratio: 1.5;
+  }
+  .\[--aspect-ratio\:1\.6\] {
+    --aspect-ratio: 1.6;
+  }
+  .\[--aspect-ratio\:1\.75\] {
+    --aspect-ratio: 1.75;
+  }
+  .\[--aspect-ratio\:1\] {
+    --aspect-ratio: 1;
+  }
+  .\[--aspect-ratio\:2\.5\] {
+    --aspect-ratio: 2.5;
+  }
+  .\[--aspect-ratio\:2\] {
+    --aspect-ratio: 2;
+  }
+  .\[--aspect-ratio\:3\] {
+    --aspect-ratio: 3;
+  }
+  .\[--aspect-ratio\:4\] {
+    --aspect-ratio: 4;
+  }
+  .\[--gap-unit\:0\.5\] {
+    --gap-unit: 0.5;
+  }
+  .\[--gap-unit\:1\.5\] {
+    --gap-unit: 1.5;
+  }
+  .\[--gap-unit\:1\] {
+    --gap-unit: 1;
+  }
+  .\[--gap-unit\:2\.5\] {
+    --gap-unit: 2.5;
+  }
+  .\[--gap-unit\:2\] {
+    --gap-unit: 2;
+  }
+  .\[--gap-unit\:3\] {
+    --gap-unit: 3;
+  }
+  .\[--gap-unit\:4\] {
+    --gap-unit: 4;
+  }
+  .\[--gap-unit\:5\] {
+    --gap-unit: 5;
+  }
+  .\[--gap-unit\:6\] {
+    --gap-unit: 6;
+  }
+  .\[--py-unit\:0\.5\] {
+    --py-unit: 0.5;
+  }
+  .\[--py-unit\:0\] {
+    --py-unit: 0;
+  }
+  .\[--py-unit\:1\.5\] {
+    --py-unit: 1.5;
+  }
+  .\[--py-unit\:1\] {
+    --py-unit: 1;
+  }
+  .\[--py-unit\:2\.5\] {
+    --py-unit: 2.5;
+  }
+  .\[--py-unit\:2\] {
+    --py-unit: 2;
+  }
+  .\[--py-unit\:3\] {
+    --py-unit: 3;
+  }
+  .\[--py-unit\:4\] {
+    --py-unit: 4;
+  }
+  .\[--py-unit\:5\] {
+    --py-unit: 5;
+  }
+  .\[--py-unit\:6\] {
+    --py-unit: 6;
+  }
+  .\[--py-unit\:8\] {
+    --py-unit: 8;
+  }
+  .\[--py-unit\:12\] {
+    --py-unit: 12;
+  }
+  .\[--py-unit\:16\] {
+    --py-unit: 16;
+  }
+  .\[--py-unit\:20\] {
+    --py-unit: 20;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -2491,7 +2482,21 @@
     }
   }
 }
-@layer theme;
+@layer theme {
+  @layer base {
+    :where(*) {
+      --gap-unit: 1;
+      --gap: calc(var(--gap-unit) * var(--layout-spacing));
+      --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
+      --aspect-ratio: 1;
+      --py-unit: 1;
+      --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
+      --py: calc(var(--py-unit) * var(--layout-spacing));
+      --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
+      --ui-py: calc(var(--py-unit) * var(--ui-spacing));
+    }
+  }
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;

package/dist/vars.css

@@ -1,4 +1,4 @@
-@theme inline {
+@theme {
     /* Text Colors */
     --color-text-default: var(--color-gray-900);
     --color-text-primary: var(--color-blue-600);
@@ -147,12 +147,12 @@
     --color-border-filled-link: var(--color-blue-600);
 
     /* UI Component Border Radius Sizes */
-    --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));
+    --ui-br-unit: 0.125rem;
+    --ui-br-xs: calc(1 * var(--ui-br-unit));
+    --ui-br-sm: calc(2 * var(--ui-br-unit));
+    --ui-br-md: calc(3 * var(--ui-br-unit));
+    --ui-br-lg: calc(4 * var(--ui-br-unit));
+    --ui-br-xl: calc(5 * var(--ui-br-unit));
 
     /* Layout Component Border Radius Sizes */
     --layout-br-spacing: 0.25rem;
@@ -162,39 +162,24 @@
     --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));
+    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.25rem);
+    --ui-spacing: var(--spacing);
 }
+
+@layer base {
+    :where(*) {
+        /* Layout Gap: the --gap-unit variable is set depending on component and it's size */
+        --gap-unit: 1;
+        --gap: calc(var(--gap-unit) * var(--layout-spacing));
+        --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
+
+        --aspect-ratio: 1;
+        --py-unit: 1;
+
+        --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
+        --py: calc(var(--py-unit) * var(--layout-spacing));
+
+        --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
+        --ui-py: calc(var(--py-unit) * var(--ui-spacing));
+    }
+}

package/package.json

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