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

package/dist/index.js

@@ -3679,19 +3679,55 @@ class SizeTheme extends BaseTheme {
     }
 }
 
+const layoutGapClasses = {
+    xs: "gap-(--layout-gap-xs)",
+    sm: "gap-(--layout-gap-sm)",
+    md: "gap-(--layout-gap-md)",
+    lg: "gap-(--layout-gap-lg)",
+    xl: "gap-(--layout-gap-xl)",
+};
+const layoutPaddingXClasses = {
+    xs: "px-(--layout-px-xs)",
+    sm: "px-(--layout-px-sm)",
+    md: "px-(--layout-px-md)",
+    lg: "px-(--layout-px-lg)",
+    xl: "px-(--layout-px-xl)",
+};
+const layoutPaddingYClasses = {
+    xs: "py-(--layout-py-xs)",
+    sm: "py-(--layout-py-sm)",
+    md: "py-(--layout-py-md)",
+    lg: "py-(--layout-py-lg)",
+    xl: "py-(--layout-py-xl)",
+};
+const sectionPaddingXClasses = {
+    xs: "px-(--section-px-xs)",
+    sm: "px-(--section-px-sm)",
+    md: "px-(--section-px-md)",
+    lg: "px-(--section-px-lg)",
+    xl: "px-(--section-px-xl)",
+};
+const sectionPaddingYClasses = {
+    xs: "py-(--section-py-xs)",
+    sm: "py-(--section-py-sm)",
+    md: "py-(--section-py-md)",
+    lg: "py-(--section-py-lg)",
+    xl: "py-(--section-py-xl)",
+};
+
 class GapTheme extends BaseTheme {
     constructor(sizeMap) {
         super();
-        /** Extra-small gap - 0.5rem spacing between items */
-        this.xs = 'gap-2';
-        /** Small gap - 0.75rem spacing between items */
-        this.sm = 'gap-3';
-        /** Medium gap - 1rem spacing between items */
-        this.md = 'gap-4';
-        /** Large gap - 1.25rem spacing between items */
-        this.lg = 'gap-5';
-        /** Extra-large gap - 1.5rem spacing between items */
-        this.xl = 'gap-6';
+        /** Extra-small gap - uses CSS variable --layout-gap-xs */
+        this.xs = layoutGapClasses.xs;
+        /** Small gap - uses CSS variable --layout-gap-sm */
+        this.sm = layoutGapClasses.sm;
+        /** Medium gap - uses CSS variable --layout-gap-md */
+        this.md = layoutGapClasses.md;
+        /** Large gap - uses CSS variable --layout-gap-lg */
+        this.lg = layoutGapClasses.lg;
+        /** Extra-large gap - uses CSS variable --layout-gap-xl */
+        this.xl = layoutGapClasses.xl;
         if (sizeMap) {
             ComponentKeys.size.forEach((key) => {
                 if (sizeMap[key] !== undefined) {
@@ -3873,9 +3909,7 @@ class PxTheme extends PaddingTheme {
         // Override with PxTheme's default classes if no custom sizeMap provided
         if (!sizeMap) {
             ComponentKeys.size.forEach((key) => {
-                this[key] = {
-                    xs: "px-2", sm: "px-4", md: "px-6", lg: "px-8", xl: "px-10"
-                }[key];
+                this[key] = layoutPaddingXClasses[key];
             });
         }
     }
@@ -3888,9 +3922,7 @@ class PyTheme extends PaddingTheme {
         // Override with PyTheme's default classes if no custom sizeMap provided
         if (!sizeMap) {
             ComponentKeys.size.forEach((key) => {
-                this[key] = {
-                    xs: "py-2", sm: "py-4", md: "py-6", lg: "py-8", xl: "py-10"
-                }[key];
+                this[key] = layoutPaddingYClasses[key];
             });
         }
     }
@@ -4733,9 +4765,7 @@ const themeDefaults = {
 
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme({
-            xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6',
-        }),
+        px: new PxTheme({ xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6', }),
         py: new PyTheme({ xs: 'py-1', sm: 'py-1.5', md: 'py-2', lg: 'py-2.5', xl: 'py-3' }),
         gap: new GapTheme({ xs: 'gap-1', sm: 'gap-1.5', md: 'gap-2', lg: 'gap-2.5', xl: 'gap-3' }),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
@@ -5055,27 +5085,9 @@ class BreakpointTheme extends BaseTheme {
 
 const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
-        px: new PxTheme({
-            xs: "px-4",
-            sm: "px-5 max-lg:px-4",
-            md: "px-6 max-lg:px-5",
-            lg: "px-7 max-lg:px-6 max-md:px-5",
-            xl: "px-8 max-lg:px-7 max-md:px-6"
-        }),
-        py: new PyTheme({
-            xs: "py-4",
-            sm: "py-5 max-lg:py-4",
-            md: "py-6 max-lg:py-5",
-            lg: "py-7 max-lg:py-6 max-md:py-5",
-            xl: "py-8 max-lg:py-7 max-md:py-6"
-        }),
-        gap: new GapTheme({
-            xs: "gap-2",
-            sm: "gap-3 max-lg:gap-2",
-            md: "gap-4 max-lg:gap-3",
-            lg: "gap-5 max-lg:gap-4 max-md:gap-3",
-            xl: "gap-6 max-lg:gap-5 max-md:gap-4"
-        }),
+        px: new PxTheme(),
+        py: new PyTheme(),
+        gap: new GapTheme(),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5132,13 +5144,7 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
 
 const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
     size: {
-        gap: new GapTheme({
-            xs: 'gap-2 max-lg:gap-1',
-            sm: 'gap-4 max-lg:gap-3 max-md:gap-2',
-            md: 'gap-6 max-lg:gap-5 max-md:gap-4',
-            lg: 'gap-8 max-lg:gap-7 max-md:gap-6',
-            xl: 'gap-10 max-lg:gap-9 max-md:gap-8',
-        }),
+        gap: new GapTheme(),
         maxWidth: new SizeTheme({ xs: 'max-w-3xl', sm: 'max-w-4xl', md: 'max-w-5xl', lg: 'max-w-6xl', xl: 'max-w-7xl' }),
     },
     layout: {
@@ -5181,8 +5187,8 @@ const defaultColTheme = new ComponentTheme("div", "", {
 
 const defaultStackTheme = new ComponentTheme("div", "", {
     size: {
-        px: new PxTheme({ xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6' }),
-        py: new PyTheme({ xs: 'py-2', sm: 'py-3', md: 'py-4', lg: 'py-5', xl: 'py-6' }),
+        px: new PxTheme(),
+        py: new PyTheme(),
         gap: new GapTheme(),
         breakpoint: new BreakpointTheme(),
     },
@@ -5205,21 +5211,9 @@ const defaultStackTheme = new ComponentTheme("div", "", {
 
 const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
     size: {
-        px: new PxTheme({
-            xs: 'px-5 max-lg:px-4 max-md:px-3',
-            sm: 'px-6 max-lg:px-5 max-md:px-4',
-            md: 'px-7 max-lg:px-6 max-md:px-5',
-            lg: 'px-8 max-lg:px-7 max-md:px-6',
-            xl: 'px-9 max-lg:px-8 max-md:px-7',
-        }),
-        py: new PyTheme({
-            xs: 'py-4 max-md:py-3',
-            sm: 'py-8 max-md:py-6',
-            md: 'py-12 max-md:py-6',
-            lg: 'py-16 max-lg:py-14 max-md:py-12',
-            xl: 'py-20 max-lg:py-16 max-md:py-12',
-        }),
-        gap: new GapTheme({ xs: 'gap-4', sm: 'gap-6', md: 'gap-8', lg: 'gap-12', xl: 'gap-16' }),
+        px: new PxTheme(sectionPaddingXClasses),
+        py: new PyTheme(sectionPaddingYClasses),
+        gap: new GapTheme(),
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
@@ -5241,13 +5235,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
 
 const gridSubThemes = {
     size: {
-        gap: new GapTheme({
-            xs: "gap-2",
-            sm: "gap-4  max-lg:gap-2",
-            md: "gap-6  max-lg:gap-4",
-            lg: "gap-8  max-lg:gap-6 max-md:gap-4",
-            xl: "gap-10 max-lg:gap-8 max-md:gap-6"
-        }),
+        gap: new GapTheme(),
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),