@vaneui/md 0.3.1-alpha.20251228133323.630b220 → 0.3.1-alpha.20260104125946.4a6b7b2

package/dist/index.js

@@ -8562,6 +8562,8 @@ const LAYOUT_FLEX = ['wrap', 'gap', 'flexDirection', 'reverse'];
 const PADDING = ['padding'];
 /** Responsive breakpoint properties for different screen sizes */
 const BREAKPOINT = ['breakpoint'];
+/** Responsive CSS variable switching for automatic breakpoint adaptation */
+const RESPONSIVE = ['responsive'];
 /** Core visual properties including appearance colors and transparency */
 const VISUAL_CORE = ['appearance', 'transparent'];
 /** Border properties for visual decoration */
@@ -8585,7 +8587,7 @@ const ComponentKeys = {
     /** Border visibility: includes all border variations and noBorder (border, borderT, borderB, etc., noBorder) */
     border: ['border', 'borderT', 'borderB', 'borderL', 'borderR', 'borderX', 'borderY', 'noBorder'],
     /** Column breakpoints for responsive grid layouts */
-    breakpoint: ['mobileCol', 'tabletCol', 'laptopCol', 'desktopCol'],
+    breakpoint: ['mobileCol', 'tabletCol', 'desktopCol'],
     /** CSS display property values for element layout behavior */
     display: ['inline', 'block', 'inlineBlock', 'flex', 'inlineFlex', 'grid', 'inlineGrid', 'contents', 'table', 'tableCell', 'hidden'],
     /** Flex direction: row (horizontal), column (vertical), or reversed variants */
@@ -8599,7 +8601,7 @@ const ComponentKeys = {
     /** Spacing between flex/grid items: gap (enabled) or noGap (disabled) */
     gap: ['gap', 'noGap'],
     /** Hide elements at specific breakpoint sizes */
-    hide: ['mobileHide', 'tabletHide', 'laptopHide', 'desktopHide'],
+    hide: ['mobileHide', 'tabletHide', 'desktopHide'],
     /** Cross-axis alignment for flex items (align-items) */
     items: ['itemsStart', 'itemsEnd', 'itemsCenter', 'itemsBaseline', 'itemsStretch'],
     /** Main-axis alignment for flex items (justify-content) */
@@ -8617,6 +8619,8 @@ const ComponentKeys = {
     padding: ['padding', 'noPadding'],
     /** CSS positioning: relative, absolute, fixed, sticky, static */
     position: ['relative', 'absolute', 'fixed', 'sticky', 'static'],
+    /** Responsive CSS variable switching: responsive (enabled) */
+    responsive: ['responsive'],
     /** Reverse the order of flex items */
     reverse: ['reverse'],
     /** Focus ring visibility: ring (show) or noRing (hide) */
@@ -8665,12 +8669,12 @@ const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
 /** Typography component categories */
 /** Categories for typography components like Text, Title, Link */
-const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
+const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT, ...RESPONSIVE];
 /** Categories for list components with typography and list-specific styling */
 const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
 /** Layout component categories */
 /** Categories for grid layout components */
-const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
+const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT];
 /** Categories for container layout components */
 const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT];
 /** Categories for column layout components */
@@ -8682,9 +8686,9 @@ const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_L
 /** Categories for card components with full typography and layout support */
 const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_LAYOUT, ...PADDING, ...VARIANT];
 /** Categories for divider components with basic layout and visual properties */
-const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
+const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
 /** Categories for section layout components with full responsive support */
-const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT];
+const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT, ...RESPONSIVE];
 /** Form component categories */
 /** Categories for checkbox form components */
 const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
@@ -8699,12 +8703,10 @@ const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DEC
 class HideTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Hide element on mobile devices and below (max-mobile: 20rem) */
+        /** Hide element on mobile devices and below (max-mobile: 48rem) */
         this.mobileHide = "max-mobile:hidden";
-        /** Hide element on tablet devices and below (max-tablet: 40rem) */
+        /** Hide element on tablet devices and below (max-tablet: 64rem) */
         this.tabletHide = "max-tablet:hidden";
-        /** Hide element on laptop devices and below (max-laptop: 64rem) */
-        this.laptopHide = "max-laptop:hidden";
         /** Hide element on desktop devices and below (max-desktop: 80rem) */
         this.desktopHide = "max-desktop:hidden";
     }
@@ -11763,6 +11765,16 @@ class ComponentTheme {
     getComponentConfig(props) {
         var _a;
         const cleanProps = { ...props };
+        const componentProps = props;
+        const defaults = this.defaults;
+        // Extract keys for data attributes
+        const extractedKeys = {};
+        for (const category of this.categories) {
+            const key = pickFirstTruthyKeyByCategory(componentProps, defaults, category);
+            if (key !== undefined) {
+                extractedKeys[category] = key;
+            }
+        }
         const keysToOmit = this.categories.flatMap(category => ComponentKeys[category]);
         for (const k of keysToOmit) {
             delete cleanProps[k];
@@ -11774,203 +11786,131 @@ class ComponentTheme {
         const originalProps = props;
         const themeGeneratedClasses = this.getClasses(originalProps);
         const finalClasses = twMerge(...themeGeneratedClasses, className);
+        // Build data attributes for key categories
+        const dataAttributes = {};
+        if (extractedKeys.size) {
+            dataAttributes['data-size'] = extractedKeys.size;
+        }
+        if (extractedKeys.appearance) {
+            dataAttributes['data-appearance'] = extractedKeys.appearance;
+        }
+        if (extractedKeys.variant) {
+            dataAttributes['data-variant'] = extractedKeys.variant;
+        }
+        if (extractedKeys.transparent) {
+            dataAttributes['data-transparent'] = 'true';
+        }
         return {
             Tag: componentTag,
             finalClasses,
-            finalProps: other,
+            finalProps: { ...other, ...dataAttributes },
         };
     }
 }
 
+/**
+ * Font size theme - outputs the consumer class text-(length:--fs).
+ * CSS variable values (--fs-unit) are set via CSS rules in vars.css
+ * using semantic classes and data attributes.
+ *
+ * When the 'responsive' prop is set, adds Tailwind classes to switch
+ * between breakpoint-specific variables for automatic size adaptation.
+ */
 class FontSizeTheme extends BaseTheme {
-    constructor(customMapping) {
-        super();
-        /** Extra-small font size - text-xs (0.75rem = 6 * 0.125rem) */
-        this.xs = "[--fs-unit:6]";
-        /** Small font size - text-sm (0.875rem = 7 * 0.125rem) */
-        this.sm = "[--fs-unit:7]";
-        /** Medium font size - text-base (1rem = 8 * 0.125rem) */
-        this.md = "[--fs-unit:8]";
-        /** Large font size - text-lg (1.125rem = 9 * 0.125rem) */
-        this.lg = "[--fs-unit:9]";
-        /** Extra-large font size - text-xl (1.25rem = 10 * 0.125rem) */
-        this.xl = "[--fs-unit:10]";
-        if (customMapping) {
-            this.xs = customMapping.xs || this.xs;
-            this.sm = customMapping.sm || this.sm;
-            this.md = customMapping.md || this.md;
-            this.lg = customMapping.lg || this.lg;
-            this.xl = customMapping.xl || this.xl;
-        }
+    constructor() {
+        super(...arguments);
+        /** Consumer class for font size */
+        this.fontSize = "text-(length:--fs)";
+        /** Responsive desktop unit class */
+        this.responsiveDesktop = "[--fs-unit:var(--fs-unit-desktop)]";
+        /** Responsive laptop unit class */
+        this.responsiveTablet = "max-tablet:[--fs-unit:var(--fs-unit-tablet)]";
+        /** Responsive tablet unit class */
+        this.responsiveMobile = "max-mobile:[--fs-unit:var(--fs-unit-mobile)]";
     }
     getClasses(extractedKeys) {
-        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) {
-            const fsUnitClass = this[extractedKeys.size];
-            return fsUnitClass ? [fsUnitClass, "text-(length:--fs)"] : [];
-        }
-        return [this.md, "text-(length:--fs)"];
-    }
-    // Static factory methods for different text size ranges
-    static createForPageTitle() {
-        return new FontSizeTheme({
-            xs: "[--fs-unit:15] max-laptop:[--fs-unit:12] max-tablet:[--fs-unit:9]", // text-3xl: 1.875rem = 15 * 0.125rem
-            sm: "[--fs-unit:18] max-laptop:[--fs-unit:15] max-tablet:[--fs-unit:12]", // text-4xl: 2.25rem = 18 * 0.125rem
-            md: "[--fs-unit:24] max-laptop:[--fs-unit:21] max-tablet:[--fs-unit:18]", // text-5xl: 3rem = 24 * 0.125rem
-            lg: "[--fs-unit:30] max-laptop:[--fs-unit:27] max-tablet:[--fs-unit:24]", // text-6xl: 3.75rem = 30 * 0.125rem
-            xl: "[--fs-unit:36] max-laptop:[--fs-unit:33] max-tablet:[--fs-unit:30]" // text-7xl: 4.5rem = 36 * 0.125rem
-        });
-    }
-    static createForSectionTitle() {
-        return new FontSizeTheme({
-            xs: "[--fs-unit:12] max-laptop:[--fs-unit:10] max-tablet:[--fs-unit:8]", // text-2xl: 1.5rem = 12 * 0.125rem
-            sm: "[--fs-unit:15] max-laptop:[--fs-unit:13] max-tablet:[--fs-unit:11]", // text-3xl: 1.875rem = 15 * 0.125rem
-            md: "[--fs-unit:18] max-laptop:[--fs-unit:16] max-tablet:[--fs-unit:14]", // text-4xl: 2.25rem = 18 * 0.125rem
-            lg: "[--fs-unit:24] max-laptop:[--fs-unit:22] max-tablet:[--fs-unit:20]", // text-5xl: 3rem = 24 * 0.125rem
-            xl: "[--fs-unit:30] max-laptop:[--fs-unit:28] max-tablet:[--fs-unit:26]" // text-6xl: 3.75rem = 30 * 0.125rem
-        });
-    }
-    static createForTitle() {
-        return new FontSizeTheme({
-            xs: "[--fs-unit:9]  max-laptop:[--fs-unit:8]  max-tablet:[--fs-unit:7]", // text-lg: 1.125rem = 9 * 0.125rem
-            sm: "[--fs-unit:10] max-laptop:[--fs-unit:9]  max-tablet:[--fs-unit:8]", // text-xl: 1.25rem = 10 * 0.125rem
-            md: "[--fs-unit:12] max-laptop:[--fs-unit:11] max-tablet:[--fs-unit:10]", // text-2xl: 1.5rem = 12 * 0.125rem
-            lg: "[--fs-unit:15] max-laptop:[--fs-unit:14] max-tablet:[--fs-unit:13]", // text-3xl: 1.875rem = 15 * 0.125rem
-            xl: "[--fs-unit:18] max-laptop:[--fs-unit:17] max-tablet:[--fs-unit:16]" // text-4xl: 2.25rem = 18 * 0.125rem
-        });
+        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
+            return [
+                this.responsiveDesktop,
+                this.responsiveTablet,
+                this.responsiveMobile,
+                this.fontSize
+            ];
+        }
+        return [this.fontSize];
     }
 }
 
+/**
+ * Line height theme - only outputs the consumer class leading-(--lh).
+ * CSS variable values (--lh) are set via CSS rules in vars.css
+ * using semantic classes and data attributes.
+ */
 class LineHeightTheme extends BaseTheme {
-    constructor(customMapping) {
-        super();
-        /** Extra-small line height - matches text-xs default line height */
-        this.xs = "[--lh:1.4]"; // calc(1 / 0.75) ≈ 1.333
-        /** Small line height - matches text-sm default line height */
-        this.sm = "[--lh:1.6]"; // calc(1.25 / 0.875) ≈ 1.429
-        /** Medium line height - matches text-base default line height */
-        this.md = "[--lh:1.6]"; // calc(1.5 / 1) = 1.5
-        /** Large line height - matches text-lg default line height */
-        this.lg = "[--lh:1.6]"; // calc(1.75 / 1.125) ≈ 1.556
-        /** Extra-large line height - matches text-xl default line height */
-        this.xl = "[--lh:1.6]"; // calc(1.75 / 1.25) = 1.4
-        if (customMapping) {
-            this.xs = customMapping.xs || this.xs;
-            this.sm = customMapping.sm || this.sm;
-            this.md = customMapping.md || this.md;
-            this.lg = customMapping.lg || this.lg;
-            this.xl = customMapping.xl || this.xl;
-        }
-    }
-    getClasses(extractedKeys) {
-        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) {
-            const lhUnitClass = this[extractedKeys.size];
-            return lhUnitClass ? [lhUnitClass, "leading-(--lh)"] : [];
-        }
-        return [this.md, "leading-(--lh)"];
-    }
-    static createDefault() {
-        return new LineHeightTheme();
-    }
-    // Static factory methods for different text size ranges
-    static createForSectionTitle() {
-        return new LineHeightTheme({
-            xs: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
-            sm: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
-            md: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
-            lg: "[--lh:1]", // text-5xl: 1
-            xl: "[--lh:1]" // text-6xl+: 1
-        });
-    }
-    static createForPageTitle() {
-        return new LineHeightTheme({
-            xs: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
-            sm: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
-            md: "[--lh:1]", // text-5xl: 1
-            lg: "[--lh:1]", // text-6xl: 1
-            xl: "[--lh:1]" // text-7xl: 1
-        });
+    constructor() {
+        super(...arguments);
+        /** Consumer class for line height */
+        this.lineHeight = "leading-(--lh)";
     }
-    static createForTitle() {
-        return new LineHeightTheme({
-            xs: "[--lh:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
-            sm: "[--lh:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
-            md: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
-            lg: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
-            xl: "[--lh:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
-        });
+    getClasses(_extractedKeys) {
+        return [this.lineHeight];
     }
 }
 
+/**
+ * Gap theme - outputs the consumer class gap-(--gap).
+ * CSS variable values (--gap-unit) are set via CSS rules in vars.css
+ * using semantic classes and data attributes.
+ *
+ * When the 'responsive' prop is set, adds Tailwind classes to switch
+ * between breakpoint-specific variables for automatic size adaptation.
+ */
 class GapTheme extends BaseTheme {
-    constructor(gapClasses, isUIComponent = false) {
-        super();
-        this.gapVarClass = isUIComponent ? "gap-(--ui-gap)" : "gap-(--gap)";
-        this.xs = gapClasses.xs;
-        this.sm = gapClasses.sm;
-        this.md = gapClasses.md;
-        this.lg = gapClasses.lg;
-        this.xl = gapClasses.xl;
+    constructor() {
+        super(...arguments);
+        /** Consumer class for gap spacing */
+        this.gap = "gap-(--gap)";
+        /** Responsive desktop unit class */
+        this.responsiveDesktop = "[--gap-unit:var(--gap-unit-desktop)]";
+        /** Responsive laptop unit class */
+        this.responsiveTablet = "max-tablet:[--gap-unit:var(--gap-unit-tablet)]";
+        /** Responsive tablet unit class */
+        this.responsiveMobile = "max-mobile:[--gap-unit:var(--gap-unit-mobile)]";
     }
     getClasses(extractedKeys) {
-        var _a;
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.gap) === 'gap') {
-            const gapClass = this[(_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md'];
-            return gapClass ? [gapClass, this.gapVarClass] : [];
+            if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
+                return [
+                    this.responsiveDesktop,
+                    this.responsiveTablet,
+                    this.responsiveMobile,
+                    this.gap
+                ];
+            }
+            return [this.gap];
         }
         return [];
     }
-    static createForUI() {
-        return new GapTheme({
-            xs: "[--gap-unit:1]",
-            sm: "[--gap-unit:1.5]",
-            md: "[--gap-unit:2]",
-            lg: "[--gap-unit:2.5]",
-            xl: "[--gap-unit:3]",
-        }, true);
-    }
-    static createForLayout() {
-        return new GapTheme({
-            xs: "[--gap-unit:2]",
-            sm: "[--gap-unit:3]",
-            md: "[--gap-unit:4]",
-            lg: "[--gap-unit:5]",
-            xl: "[--gap-unit:6]",
-        }, false);
-    }
 }
 
+/**
+ * Border radius theme - outputs consumer class rounded-(--br) for rounded shapes.
+ * CSS variable values (--br-unit) are now set via CSS rules
+ * in vars.css using semantic classes and data attributes.
+ *
+ * pill and sharp shapes use fixed Tailwind classes.
+ */
 class RadiusTheme extends BaseTheme {
-    constructor(roundedClasses, isUIComponent = false) {
-        super();
+    constructor() {
+        super(...arguments);
         /** Pill shape - fully rounded corners */
         this.pill = "rounded-full";
         /** Sharp shape - no rounded corners */
         this.sharp = "rounded-none";
-        this.rounded = roundedClasses;
-        this.isUIComponent = isUIComponent;
-    }
-    static createUITheme() {
-        return new RadiusTheme({
-            xs: '[--br-unit:2]',
-            sm: '[--br-unit:3]',
-            md: '[--br-unit:4]',
-            lg: '[--br-unit:5]',
-            xl: '[--br-unit:6]'
-        }, true);
-    }
-    static createLayoutTheme() {
-        const brUnitClasses = {
-            xs: '[--br-unit:3]',
-            sm: '[--br-unit:4]',
-            md: '[--br-unit:5]',
-            lg: '[--br-unit:6]',
-            xl: '[--br-unit:7]'
-        };
-        return new RadiusTheme(brUnitClasses, false);
+        /** Rounded shape - dynamic border radius from CSS variable */
+        this.rounded = "rounded-(--br)";
     }
     getClasses(extractedKeys) {
-        var _a;
-        const size = (_a = extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
         const shape = extractedKeys.shape;
         if (shape) {
             switch (shape) {
@@ -11978,11 +11918,8 @@ class RadiusTheme extends BaseTheme {
                     return [this.pill];
                 case 'sharp':
                     return [this.sharp];
-                case 'rounded': {
-                    const brUnitClass = this.rounded[size];
-                    const roundedVar = this.isUIComponent ? "rounded-(--ui-br)" : "rounded-(--br)";
-                    return brUnitClass ? [brUnitClass, roundedVar] : [];
-                }
+                case 'rounded':
+                    return [this.rounded];
                 default:
                     return [];
             }
@@ -12067,126 +12004,90 @@ class FocusVisibleTheme extends BaseTheme {
     }
 }
 
-class PaddingTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        /** Extra-small padding - varies by component implementation */
-        this.xs = "";
-        /** Small padding - varies by component implementation */
-        this.sm = "";
-        /** Medium padding - varies by component implementation */
-        this.md = "";
-        /** Large padding - varies by component implementation */
-        this.lg = "";
-        /** Extra-large padding - varies by component implementation */
-        this.xl = "";
-        if (initial) {
-            ComponentKeys.size.forEach((key) => {
-                if (initial[key] !== undefined) {
-                    this[key] = initial[key];
-                }
-            });
-        }
-    }
-    getClasses(extractedKeys) {
-        var _a;
-        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            const paddingClass = this[(_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md'];
-            return paddingClass ? [paddingClass] : [];
-        }
-        return [];
-    }
-}
-
-/** Horizontal padding theme - controls left and right padding via aspect ratio */
-class PxTheme extends PaddingTheme {
-    constructor(aspectRatio, isUIComponent = false) {
-        super(aspectRatio);
-        this.isUIComponent = isUIComponent;
-        // Override with PxTheme's default aspect ratio classes if no custom map provided
-        if (!aspectRatio) {
-            ComponentKeys.size.forEach((key) => {
-                this[key] = "[--aspect-ratio:1]";
-            });
-        }
+/**
+ * Horizontal padding theme - only outputs the consumer class px-(--px).
+ * CSS variable values (--aspect-ratio, --py-unit) are now set via CSS rules
+ * in vars.css using semantic classes and data attributes.
+ */
+class PxTheme extends BaseTheme {
+    constructor() {
+        super(...arguments);
+        /** Consumer class for horizontal padding */
+        this.px = "px-(--px)";
     }
     getClasses(extractedKeys) {
-        var _a;
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-            const aspectRatioClass = this[size];
-            const classes = [];
-            // Only add aspect-ratio class - no padding classes
-            if (aspectRatioClass)
-                classes.push(aspectRatioClass);
-            // Use UI or layout CSS variables based on component type
-            const cssVar = this.isUIComponent ? "px-(--ui-px)" : "px-(--px)";
-            classes.push(cssVar);
-            return classes;
+            return [this.px];
         }
         return [];
     }
 }
 
-/** Vertical padding theme - controls top and bottom padding */
-class PyTheme extends PaddingTheme {
-    constructor(sizeMap, isUIComponent = false) {
-        super(sizeMap);
-        this.isUIComponent = isUIComponent;
-        // Override with PyTheme's default classes if no custom sizeMap provided
-        if (!sizeMap) {
-            ComponentKeys.size.forEach((key) => {
-                this[key] = {
-                    xs: "[--py-unit:2]",
-                    sm: "[--py-unit:3]",
-                    md: "[--py-unit:4]",
-                    lg: "[--py-unit:5]",
-                    xl: "[--py-unit:6]",
-                }[key];
-            });
-        }
+/**
+ * Vertical padding theme - outputs the consumer class py-(--py).
+ * CSS variable values (--py-unit) are set via CSS rules in vars.css
+ * using semantic classes and data attributes.
+ *
+ * When the 'responsive' prop is set, adds Tailwind classes to switch
+ * between breakpoint-specific variables for automatic size adaptation.
+ */
+class PyTheme extends BaseTheme {
+    constructor() {
+        super(...arguments);
+        /** Consumer class for vertical padding */
+        this.py = "py-(--py)";
+        /** Responsive desktop unit class */
+        this.responsiveDesktop = "[--py-unit:var(--py-unit-desktop)]";
+        /** Responsive laptop unit class */
+        this.responsiveTablet = "max-tablet:[--py-unit:var(--py-unit-tablet)]";
+        /** Responsive tablet unit class */
+        this.responsiveMobile = "max-mobile:[--py-unit:var(--py-unit-mobile)]";
     }
     getClasses(extractedKeys) {
-        var _a;
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            const paddingClass = this[(_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md'];
-            if (!paddingClass)
-                return [];
-            // Use UI or layout CSS variables based on component type
-            const cssVar = this.isUIComponent ? "py-(--ui-py)" : "py-(--py)";
-            return [paddingClass, cssVar];
+            if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
+                return [
+                    this.responsiveDesktop,
+                    this.responsiveTablet,
+                    this.responsiveMobile,
+                    this.py
+                ];
+            }
+            return [this.py];
         }
         return [];
     }
-    static createForUI() {
-        return new PyTheme({
-            xs: "[--py-unit:1]",
-            sm: "[--py-unit:1.5]",
-            md: "[--py-unit:2]",
-            lg: "[--py-unit:2.5]",
-            xl: "[--py-unit:3]",
-        }, true);
-    }
 }
 
-class AppearanceTheme extends BaseTheme {
-    constructor(config, category, transparentClasses, ignoreTransparent = false) {
+/**
+ * A simplified appearance theme that outputs consumer classes
+ * referencing component-level CSS variables (like --bg-color, --text-color).
+ *
+ * Used for components that have CSS rules in vars.css that set these
+ * variables based on data-appearance and data-variant attributes.
+ *
+ * Unlike AppearanceTheme which outputs different classes for each appearance,
+ * this theme outputs the same consumer classes regardless of appearance,
+ * since the CSS rules handle the appearance-specific logic.
+ *
+ * Properties are public to allow theme overrides via ThemeProvider.
+ */
+class SimpleConsumerTheme extends BaseTheme {
+    constructor(config, category) {
         super();
-        Object.assign(this, config);
+        this.base = config.base;
+        this.hover = config.hover || '';
+        this.active = config.active || '';
+        this.focusVisible = config.focusVisible || '';
         this.category = category;
-        this.transparentClasses = transparentClasses;
-        this.ignoreTransparent = ignoreTransparent;
     }
     getClasses(extractedKeys) {
-        var _a;
+        // Handle conditional categories - only output if the feature is enabled
         if (this.category === 'border') {
-            // If noBorder is selected from the border category, don't apply appearance colors
             if (extractedKeys.border === 'noBorder') {
                 return [];
             }
-            // Only apply appearance colors if any border prop is set (and not noBorder)
             const hasBorderProps = extractedKeys.border !== undefined && extractedKeys.border !== 'noBorder';
-            // If no border props are set, don't apply appearance colors
             if (!hasBorderProps) {
                 return [];
             }
@@ -12200,290 +12101,27 @@ class AppearanceTheme extends BaseTheme {
         if (this.category === 'focusVisible' && (extractedKeys.focusVisible === 'noFocusVisible' || extractedKeys.focusVisible === undefined)) {
             return [];
         }
-        // Check for specific transparent styles first
-        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) && !this.ignoreTransparent) {
-            const transparentClass = ((_a = this.transparentClasses) === null || _a === void 0 ? void 0 : _a[extractedKeys.transparent]) || '';
-            return [transparentClass];
-        }
-        // Use appearance (now includes link as an appearance option)
-        const pickedAppearanceKey = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance;
-        if (pickedAppearanceKey) {
-            const modes = this[pickedAppearanceKey];
-            if (modes) {
-                return ModeKeys.mode.map(mode => modes[mode] || '');
-            }
+        // Only output classes if an appearance or transparent is set
+        if (!(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance) && !(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent)) {
+            return [];
         }
-        return [];
-    }
-    static createTheme(src = {}, category, ignoreTransparent = false) {
-        const config = Object.fromEntries(ComponentKeys.appearance.map(key => [
-            key,
-            Object.fromEntries(ModeKeys.mode.map(modeKey => {
-                var _a;
-                return [
-                    modeKey,
-                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[key]) || ''
-                ];
-            })),
-        ]));
-        return new AppearanceTheme(config, category, src.base, ignoreTransparent);
+        const classes = [];
+        if (this.base) {
+            classes.push(this.base);
+        }
+        if (this.hover) {
+            classes.push(this.hover);
+        }
+        if (this.active) {
+            classes.push(this.active);
+        }
+        if (this.focusVisible) {
+            classes.push(this.focusVisible);
+        }
+        return classes;
     }
 }
 
-const filledTextAppearanceClasses = {
-    brand: "text-(--color-text-filled-brand)",
-    primary: "text-(--color-text-filled-primary)",
-    secondary: "text-(--color-text-filled-secondary)",
-    tertiary: "text-(--color-text-filled-tertiary)",
-    accent: "text-(--color-text-filled-accent)",
-    success: "text-(--color-text-filled-success)",
-    danger: "text-(--color-text-filled-danger)",
-    warning: "text-(--color-text-filled-warning)",
-    info: "text-(--color-text-filled-info)",
-    transparent: "text-transparent",
-};
-const textAppearanceClasses = {
-    brand: "text-(--color-text-brand)",
-    primary: "text-(--color-text-primary)",
-    secondary: "text-(--color-text-secondary)",
-    tertiary: "text-(--color-text-tertiary)",
-    accent: "text-(--color-text-accent)",
-    success: "text-(--color-text-success)",
-    danger: "text-(--color-text-danger)",
-    warning: "text-(--color-text-warning)",
-    info: "text-(--color-text-info)",
-    transparent: "text-transparent",
-};
-
-const filledBackgroundAppearanceClasses = {
-    brand: "[background:var(--color-bg-filled-brand)]",
-    primary: "[background:var(--color-bg-filled-primary)]",
-    secondary: "[background:var(--color-bg-filled-secondary)]",
-    tertiary: "[background:var(--color-bg-filled-tertiary)]",
-    accent: "[background:var(--color-bg-filled-accent)]",
-    success: "[background:var(--color-bg-filled-success)]",
-    danger: "[background:var(--color-bg-filled-danger)]",
-    warning: "[background:var(--color-bg-filled-warning)]",
-    info: "[background:var(--color-bg-filled-info)]",
-    transparent: "[background:transparent]",
-};
-const filledHoverBackgroundAppearanceClasses = {
-    brand: "hover:[background:var(--color-bg-filled-hover-brand)]",
-    primary: "hover:[background:var(--color-bg-filled-hover-primary)]",
-    secondary: "hover:[background:var(--color-bg-filled-hover-secondary)]",
-    tertiary: "hover:[background:var(--color-bg-filled-hover-tertiary)]",
-    accent: "hover:[background:var(--color-bg-filled-hover-accent)]",
-    success: "hover:[background:var(--color-bg-filled-hover-success)]",
-    danger: "hover:[background:var(--color-bg-filled-hover-danger)]",
-    warning: "hover:[background:var(--color-bg-filled-hover-warning)]",
-    info: "hover:[background:var(--color-bg-filled-hover-info)]",
-    transparent: "hover:[background:transparent]",
-};
-const filledActiveBackgroundAppearanceClasses = {
-    brand: "active:[background:var(--color-bg-filled-active-brand)]",
-    primary: "active:[background:var(--color-bg-filled-active-primary)]",
-    secondary: "active:[background:var(--color-bg-filled-active-secondary)]",
-    tertiary: "active:[background:var(--color-bg-filled-active-tertiary)]",
-    accent: "active:[background:var(--color-bg-filled-active-accent)]",
-    success: "active:[background:var(--color-bg-filled-active-success)]",
-    danger: "active:[background:var(--color-bg-filled-active-danger)]",
-    warning: "active:[background:var(--color-bg-filled-active-warning)]",
-    info: "active:[background:var(--color-bg-filled-active-info)]",
-    transparent: "active:[background:transparent]",
-};
-const backgroundAppearanceClasses = {
-    brand: "[background:var(--color-bg-brand)]",
-    primary: "[background:var(--color-bg-primary)]",
-    secondary: "[background:var(--color-bg-secondary)]",
-    tertiary: "[background:var(--color-bg-tertiary)]",
-    accent: "[background:var(--color-bg-accent)]",
-    success: "[background:var(--color-bg-success)]",
-    danger: "[background:var(--color-bg-danger)]",
-    warning: "[background:var(--color-bg-warning)]",
-    info: "[background:var(--color-bg-info)]",
-    transparent: "[background:transparent]",
-};
-const hoverBackgroundAppearanceClasses = {
-    brand: "hover:[background:var(--color-bg-hover-brand)]",
-    primary: "hover:[background:var(--color-bg-hover-primary)]",
-    secondary: "hover:[background:var(--color-bg-hover-secondary)]",
-    tertiary: "hover:[background:var(--color-bg-hover-tertiary)]",
-    accent: "hover:[background:var(--color-bg-hover-accent)]",
-    success: "hover:[background:var(--color-bg-hover-success)]",
-    danger: "hover:[background:var(--color-bg-hover-danger)]",
-    warning: "hover:[background:var(--color-bg-hover-warning)]",
-    info: "hover:[background:var(--color-bg-hover-info)]",
-    transparent: "hover:[background:transparent]",
-};
-const activeBackgroundAppearanceClasses = {
-    brand: "active:[background:var(--color-bg-active-brand)]",
-    primary: "active:[background:var(--color-bg-active-primary)]",
-    secondary: "active:[background:var(--color-bg-active-secondary)]",
-    tertiary: "active:[background:var(--color-bg-active-tertiary)]",
-    accent: "active:[background:var(--color-bg-active-accent)]",
-    success: "active:[background:var(--color-bg-active-success)]",
-    danger: "active:[background:var(--color-bg-active-danger)]",
-    warning: "active:[background:var(--color-bg-active-warning)]",
-    info: "active:[background:var(--color-bg-active-info)]",
-    transparent: "active:[background:transparent]",
-};
-const layoutBackgroundAppearanceClasses = {
-    brand: "[background:var(--color-bg-layout-brand)]",
-    primary: "[background:var(--color-bg-layout-primary)]",
-    secondary: "[background:var(--color-bg-layout-secondary)]",
-    tertiary: "[background:var(--color-bg-layout-tertiary)]",
-    accent: "[background:var(--color-bg-layout-accent)]",
-    success: "[background:var(--color-bg-layout-success)]",
-    danger: "[background:var(--color-bg-layout-danger)]",
-    warning: "[background:var(--color-bg-layout-warning)]",
-    info: "[background:var(--color-bg-layout-info)]",
-    transparent: "[background:transparent]",
-};
-const layoutFilledBackgroundAppearanceClasses = {
-    brand: "[background:var(--color-bg-filled-layout-brand)]",
-    primary: "[background:var(--color-bg-filled-layout-primary)]",
-    secondary: "[background:var(--color-bg-filled-layout-secondary)]",
-    tertiary: "[background:var(--color-bg-filled-layout-tertiary)]",
-    accent: "[background:var(--color-bg-filled-layout-accent)]",
-    success: "[background:var(--color-bg-filled-layout-success)]",
-    danger: "[background:var(--color-bg-filled-layout-danger)]",
-    warning: "[background:var(--color-bg-filled-layout-warning)]",
-    info: "[background:var(--color-bg-filled-layout-info)]",
-    transparent: "[background:transparent]",
-};
-const bgBorderAppearanceClasses = {
-    brand: "[background:var(--color-border-brand)]",
-    primary: "[background:var(--color-border-primary)]",
-    secondary: "[background:var(--color-border-secondary)]",
-    tertiary: "[background:var(--color-border-tertiary)]",
-    accent: "[background:var(--color-border-accent)]",
-    success: "[background:var(--color-border-success)]",
-    danger: "[background:var(--color-border-danger)]",
-    warning: "[background:var(--color-border-warning)]",
-    info: "[background:var(--color-border-info)]",
-    transparent: "[background:transparent]",
-};
-const borderAppearanceClasses = {
-    brand: "border-(--color-border-brand)",
-    primary: "border-(--color-border-primary)",
-    secondary: "border-(--color-border-secondary)",
-    tertiary: "border-(--color-border-tertiary)",
-    accent: "border-(--color-border-accent)",
-    success: "border-(--color-border-success)",
-    danger: "border-(--color-border-danger)",
-    warning: "border-(--color-border-warning)",
-    info: "border-(--color-border-info)",
-    transparent: "border-transparent",
-};
-const filledBorderAppearanceClasses = {
-    brand: "border-(--color-border-filled-brand)",
-    primary: "border-(--color-border-filled-primary)",
-    secondary: "border-(--color-border-filled-secondary)",
-    tertiary: "border-(--color-border-filled-tertiary)",
-    accent: "border-(--color-border-filled-accent)",
-    success: "border-(--color-border-filled-success)",
-    danger: "border-(--color-border-filled-danger)",
-    warning: "border-(--color-border-filled-warning)",
-    info: "border-(--color-border-filled-info)",
-    transparent: "border-transparent",
-};
-const ringAppearanceClasses = {
-    brand: "ring-(--color-border-brand)",
-    primary: "ring-(--color-border-primary)",
-    secondary: "ring-(--color-border-secondary)",
-    tertiary: "ring-(--color-border-tertiary)",
-    accent: "ring-(--color-border-accent)",
-    success: "ring-(--color-border-success)",
-    danger: "ring-(--color-border-danger)",
-    warning: "ring-(--color-border-warning)",
-    info: "ring-(--color-border-info)",
-    transparent: "ring-transparent",
-};
-const filledRingAppearanceClasses = {
-    brand: "ring-(--color-border-filled-brand)",
-    primary: "ring-(--color-border-filled-primary)",
-    secondary: "ring-(--color-border-filled-secondary)",
-    tertiary: "ring-(--color-border-filled-tertiary)",
-    accent: "ring-(--color-border-filled-accent)",
-    success: "ring-(--color-border-filled-success)",
-    danger: "ring-(--color-border-filled-danger)",
-    warning: "ring-(--color-border-filled-warning)",
-    info: "ring-(--color-border-filled-info)",
-    transparent: "ring-transparent",
-};
-const focusVisibleOutlineAppearanceClasses = {
-    brand: "focus-visible:outline-(--color-border-brand)",
-    primary: "focus-visible:outline-(--color-border-primary)",
-    secondary: "focus-visible:outline-(--color-border-secondary)",
-    tertiary: "focus-visible:outline-(--color-border-tertiary)",
-    accent: "focus-visible:outline-(--color-border-accent)",
-    success: "focus-visible:outline-(--color-border-success)",
-    danger: "focus-visible:outline-(--color-border-danger)",
-    warning: "focus-visible:outline-(--color-border-warning)",
-    info: "focus-visible:outline-(--color-border-info)",
-    transparent: "focus-visible:outline-transparent",
-};
-const filledFocusVisibleOutlineAppearanceClasses = {
-    brand: "focus-visible:outline-(--color-border-filled-brand)",
-    primary: "focus-visible:outline-(--color-border-filled-primary)",
-    secondary: "focus-visible:outline-(--color-border-filled-secondary)",
-    tertiary: "focus-visible:outline-(--color-border-filled-tertiary)",
-    accent: "focus-visible:outline-(--color-border-filled-accent)",
-    success: "focus-visible:outline-(--color-border-filled-success)",
-    danger: "focus-visible:outline-(--color-border-filled-danger)",
-    warning: "focus-visible:outline-(--color-border-filled-warning)",
-    info: "focus-visible:outline-(--color-border-filled-info)",
-    transparent: "focus-visible:outline-transparent",
-};
-const accentColorAppearanceClasses = {
-    brand: "accent-(--color-bg-brand)",
-    primary: "accent-(--color-bg-primary)",
-    secondary: "accent-(--color-bg-secondary)",
-    tertiary: "accent-(--color-bg-tertiary)",
-    accent: "accent-(--color-bg-accent)",
-    success: "accent-(--color-bg-success)",
-    danger: "accent-(--color-bg-danger)",
-    warning: "accent-(--color-bg-warning)",
-    info: "accent-(--color-bg-info)",
-    transparent: "accent-transparent",
-};
-const filledAccentColorAppearanceClasses = {
-    brand: "accent-(--color-bg-filled-brand)",
-    primary: "accent-(--color-bg-filled-primary)",
-    secondary: "accent-(--color-bg-filled-secondary)",
-    tertiary: "accent-(--color-bg-filled-tertiary)",
-    accent: "accent-(--color-bg-filled-accent)",
-    success: "accent-(--color-bg-filled-success)",
-    danger: "accent-(--color-bg-filled-danger)",
-    warning: "accent-(--color-bg-filled-warning)",
-    info: "accent-(--color-bg-filled-info)",
-    transparent: "accent-transparent",
-};
-const checkedBackgroundAppearanceClasses = {
-    brand: "checked:[background:var(--color-bg-brand)]",
-    primary: "checked:[background:var(--color-bg-primary)]",
-    secondary: "checked:[background:var(--color-bg-secondary)]",
-    tertiary: "checked:[background:var(--color-bg-tertiary)]",
-    accent: "checked:[background:var(--color-bg-accent)]",
-    success: "checked:[background:var(--color-bg-success)]",
-    danger: "checked:[background:var(--color-bg-danger)]",
-    warning: "checked:[background:var(--color-bg-warning)]",
-    info: "checked:[background:var(--color-bg-info)]",
-    transparent: "checked:[background:transparent]",
-};
-const filledCheckedBackgroundAppearanceClasses = {
-    brand: "checked:[background:var(--color-bg-filled-brand)]",
-    primary: "checked:[background:var(--color-bg-filled-primary)]",
-    secondary: "checked:[background:var(--color-bg-filled-secondary)]",
-    tertiary: "checked:[background:var(--color-bg-filled-tertiary)]",
-    accent: "checked:[background:var(--color-bg-filled-accent)]",
-    success: "checked:[background:var(--color-bg-filled-success)]",
-    danger: "checked:[background:var(--color-bg-filled-danger)]",
-    warning: "checked:[background:var(--color-bg-filled-warning)]",
-    info: "checked:[background:var(--color-bg-filled-info)]",
-    transparent: "checked:[background:transparent]",
-};
-
 class ShadowAppearanceTheme extends BaseTheme {
     constructor(initial) {
         super();
@@ -12522,185 +12160,6 @@ ShadowAppearanceTheme.defaultLayoutShadow = {
     xl: { base: "shadow-lg", hover: "", active: "", focus: "", focusVisible: "" }
 };
 
-class GenericVariantTheme extends BaseTheme {
-    constructor(variantInstances) {
-        super();
-        ComponentKeys.variant.forEach((variantKey) => {
-            this[variantKey] = variantInstances[variantKey];
-        });
-    }
-    getClasses(extractedKeys) {
-        var _a;
-        const variantKey = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.variant) !== null && _a !== void 0 ? _a : 'outline';
-        return this[variantKey].getClasses(extractedKeys);
-    }
-    // used for button, badges, chips, etc - UI elements where transparent affects background
-    static createUIElementTextTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: textAppearanceClasses
-            }, 'text', true), // Layout/UI components: text themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledTextAppearanceClasses
-            }, 'text', true)
-        });
-    }
-    // used for typography components where transparent affects text color
-    static createTypographyTextTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: textAppearanceClasses
-            }, 'text', false), // Typography components: text themes should respect transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledTextAppearanceClasses
-            }, 'text', false)
-        });
-    }
-    // used for typography components where transparent should NOT affect background
-    static createTypographyBgTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: backgroundAppearanceClasses,
-                hover: hoverBackgroundAppearanceClasses,
-                active: activeBackgroundAppearanceClasses
-            }, 'bg', true), // Typography components: bg themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledBackgroundAppearanceClasses,
-                hover: filledHoverBackgroundAppearanceClasses,
-                active: filledActiveBackgroundAppearanceClasses
-            }, 'bg', true)
-        });
-    }
-    // used for typography components where transparent should NOT affect border
-    static createTypographyBorderTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: borderAppearanceClasses
-            }, 'border', true), // Typography components: border themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledBorderAppearanceClasses
-            }, 'border', true)
-        });
-    }
-    // used for layout/UI components where transparent should NOT affect text
-    static createUIElementTextThemeIgnoreTransparent() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: textAppearanceClasses
-            }, 'text', true), // Layout/UI components: text themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledTextAppearanceClasses
-            }, 'text', true)
-        });
-    }
-    static createUIElementShadowTheme() {
-        return new GenericVariantTheme({
-            outline: ShadowAppearanceTheme.createUITheme(),
-            filled: ShadowAppearanceTheme.createUITheme()
-        });
-    }
-    static createLayoutShadowTheme() {
-        return new GenericVariantTheme({
-            outline: ShadowAppearanceTheme.createLayoutTheme(),
-            filled: ShadowAppearanceTheme.createLayoutTheme()
-        });
-    }
-    static createUIElementBorderTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: borderAppearanceClasses
-            }, 'border', true), // Layout/UI components: border themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledBorderAppearanceClasses
-            }, 'border', true)
-        });
-    }
-    static createUIElementRingTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: ringAppearanceClasses
-            }, 'ring', true), // Layout/UI components: ring themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledRingAppearanceClasses
-            }, 'ring', true)
-        });
-    }
-    static createCheckboxBgAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: backgroundAppearanceClasses,
-            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
-            filled: AppearanceTheme.createTheme({
-                base: backgroundAppearanceClasses,
-            }, 'bg', false)
-        });
-    }
-    static createBgAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: backgroundAppearanceClasses,
-                hover: hoverBackgroundAppearanceClasses,
-                active: activeBackgroundAppearanceClasses
-            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledBackgroundAppearanceClasses,
-                hover: filledHoverBackgroundAppearanceClasses,
-                active: filledActiveBackgroundAppearanceClasses
-            }, 'bg', false)
-        });
-    }
-    static createSimpleUIElementBgAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: backgroundAppearanceClasses,
-            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledBackgroundAppearanceClasses,
-            }, 'bg', false)
-        });
-    }
-    static createAccentColorAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: accentColorAppearanceClasses
-            }, 'accent', true), // Layout/UI components: accent themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledAccentColorAppearanceClasses
-            }, 'accent', true)
-        });
-    }
-    static createCheckedAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: checkedBackgroundAppearanceClasses
-            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
-            filled: AppearanceTheme.createTheme({
-                base: filledCheckedBackgroundAppearanceClasses
-            }, 'bg', false)
-        });
-    }
-    static createLayoutBgAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: layoutBackgroundAppearanceClasses
-            }, 'bg', false), // Layout components: bg themes should respect transparent
-            filled: AppearanceTheme.createTheme({
-                base: layoutFilledBackgroundAppearanceClasses
-            }, 'bg', false)
-        });
-    }
-    static createUIElementFocusVisibleTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                focusVisible: focusVisibleOutlineAppearanceClasses
-            }, 'focusVisible', true), // UI components: focusVisible themes should ignore transparent
-            filled: AppearanceTheme.createTheme({
-                focusVisible: filledFocusVisibleOutlineAppearanceClasses
-            }, 'focusVisible', true)
-        });
-    }
-}
-
 class WrapTheme extends BaseTheme {
     constructor() {
         super(...arguments);
@@ -12763,6 +12222,7 @@ const themeDefaults = {
     card: {
         md: true,
         flex: true,
+        outline: true,
         primary: true,
         rounded: true,
         normal: true,
@@ -12801,17 +12261,19 @@ const themeDefaults = {
         ring: true,
     },
     container: {
+        md: true,
         noRing: true,
         flex: true,
         column: true,
-        md: true,
         itemsCenter: true,
         gap: true,
+        outline: true,
     },
     section: {
         md: true,
         flex: true,
         column: true,
+        outline: true,
         primary: true,
         itemsStart: true,
         gap: true,
@@ -12819,6 +12281,7 @@ const themeDefaults = {
         noBorder: true,
         noRing: true,
         noShadow: true,
+        responsive: true,
     },
     stack: {
         md: true,
@@ -12829,6 +12292,7 @@ const themeDefaults = {
         padding: true,
         noBorder: true,
         noRing: true,
+        outline: true,
     },
     row: {
         row: true,
@@ -12838,6 +12302,7 @@ const themeDefaults = {
         gap: true,
         noBorder: true,
         noRing: true,
+        outline: true,
     },
     col: {
         column: true,
@@ -12846,34 +12311,46 @@ const themeDefaults = {
         gap: true,
         noBorder: true,
         noRing: true,
+        outline: true,
     },
     grid2: {
         md: true,
         grid: true,
         gap: true,
+        sharp: true,
+        outline: true,
     },
     grid3: {
         md: true,
         grid: true,
         gap: true,
+        sharp: true,
+        outline: true,
     },
     grid4: {
         md: true,
         grid: true,
         gap: true,
+        sharp: true,
+        outline: true,
     },
     grid5: {
         md: true,
         grid: true,
         gap: true,
+        sharp: true,
+        outline: true,
     },
     grid6: {
         md: true,
         grid: true,
         gap: true,
+        sharp: true,
+        outline: true,
     },
     divider: {
         md: true,
+        outline: true,
         primary: true,
         noPadding: true,
     },
@@ -12883,8 +12360,10 @@ const themeDefaults = {
         gap: true,
         sans: true,
         medium: true,
+        outline: true,
     },
     img: {
+        md: true,
         rounded: true,
     },
     code: {
@@ -12894,6 +12373,7 @@ const themeDefaults = {
         rounded: true,
         inline: true,
         padding: true,
+        outline: true,
         primary: true,
         ring: true,
     },
@@ -12901,31 +12381,42 @@ const themeDefaults = {
         md: true,
         sans: true,
         textLeft: true,
+        outline: true,
     },
     title: {
         md: true,
         sans: true,
         semibold: true,
         textLeft: true,
+        responsive: true,
+        outline: true,
     },
     pageTitle: {
         md: true,
         sans: true,
         semibold: true,
         textLeft: true,
+        responsive: true,
+        outline: true,
     },
     sectionTitle: {
         md: true,
         sans: true,
         semibold: true,
         textLeft: true,
+        responsive: true,
+        outline: true,
     },
     link: {
+        md: true,
         underline: true,
         sans: true,
+        outline: true,
     },
     listItem: {
+        md: true,
         sans: true,
+        outline: true,
     },
     list: {
         md: true,
@@ -12933,6 +12424,7 @@ const themeDefaults = {
         normal: true,
         padding: true,
         disc: true,
+        outline: true,
     },
     checkbox: {
         input: {
@@ -12972,41 +12464,53 @@ const themeDefaults = {
     },
 };
 
-const buttonAspectRatioClasses = {
-    xs: "[--aspect-ratio:2]",
-    sm: "[--aspect-ratio:2]",
-    md: "[--aspect-ratio:2]",
-    lg: "[--aspect-ratio:2]",
-    xl: "[--aspect-ratio:2]",
-};
-const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
+/* ==========================================
+   CSS VARIABLE CONSUMER CLASSES
+   These classes consume component-level CSS variables
+   that are set by CSS rules in vars.css based on
+   data-appearance and data-variant attributes.
+   ========================================== */
+/** Background consumer classes - consume --bg-color, --bg-hover-color, --bg-active-color */
+const bgConsumerClasses = {
+    base: "[background:var(--bg-color)]",
+    hover: "hover:[background:var(--bg-hover-color)]",
+    active: "active:[background:var(--bg-active-color)]",
+};
+/** Text color consumer class - consumes --text-color */
+const textConsumerClass = "text-(--text-color)";
+/** Border consumer class - consumes --border-color */
+const borderConsumerClass = "border-(--border-color)";
+/** Ring consumer class - consumes --ring-color */
+const ringConsumerClass = "ring-(--ring-color)";
+/** Focus visible outline consumer class - consumes --ring-color */
+const focusVisibleConsumerClass = "focus-visible:outline-(--ring-color)";
+/** Accent color consumer class - consumes --accent-color */
+const accentConsumerClass = "accent-(--accent-color)";
+/** Checked background consumer class - consumes --checked-bg-color */
+const checkedBgConsumerClass = "checked:[background:var(--checked-bg-color)]";
+
+const defaultButtonTheme = new ComponentTheme("button", "vane-button w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(buttonAspectRatioClasses, true),
-        py: PyTheme.createForUI(),
-        gap: GapTheme.createForUI(),
+        px: new PxTheme(),
+        py: new PyTheme(),
+        gap: new GapTheme(),
         text: new FontSizeTheme(),
-        lineHeight: new LineHeightTheme({
-            xs: "[--lh:1.3]",
-            sm: "[--lh:1.3]",
-            md: "[--lh:1.3]",
-            lg: "[--lh:1.3]",
-            xl: "[--lh:1.3]"
-        }),
+        lineHeight: new LineHeightTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base, hover: bgConsumerClasses.hover, active: bgConsumerClasses.active }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
+        shadow: ShadowAppearanceTheme.createUITheme()
     },
     layout: {
         ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
-        radius: RadiusTheme.createUITheme(),
+        radius: new RadiusTheme(),
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
@@ -13016,36 +12520,28 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
     return props.href ? "a" : "button";
 });
 
-// Badge aspect ratios (same as button)
-const badgeAspectRatioClasses = {
-    xs: "[--aspect-ratio:2]",
-    sm: "[--aspect-ratio:2]",
-    md: "[--aspect-ratio:2]",
-    lg: "[--aspect-ratio:2]",
-    xl: "[--aspect-ratio:2]",
-};
-const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
+const defaultBadgeTheme = new ComponentTheme("span", "vane-badge w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(badgeAspectRatioClasses, true),
-        py: PyTheme.createForUI(),
-        gap: GapTheme.createForUI(),
+        px: new PxTheme(),
+        py: new PyTheme(),
+        gap: new GapTheme(),
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault()
+        lineHeight: new LineHeightTheme()
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme()
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme()
     },
     layout: {
         ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
-        radius: RadiusTheme.createUITheme(),
+        radius: new RadiusTheme(),
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
@@ -13054,43 +12550,25 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     return props.href ? "a" : "span";
 });
 
-const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
+const defaultChipTheme = new ComponentTheme("span", "vane-chip w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme({
-            xs: "[--aspect-ratio:2]",
-            sm: "[--aspect-ratio:2]",
-            md: "[--aspect-ratio:2]",
-            lg: "[--aspect-ratio:2]",
-            xl: "[--aspect-ratio:2]",
-        }, true),
-        py: new PyTheme({
-            xs: "[--py-unit:0.5]",
-            sm: "[--py-unit:1]",
-            md: "[--py-unit:1.5]",
-            lg: "[--py-unit:2]",
-            xl: "[--py-unit:2.5]",
-        }, true),
+        px: new PxTheme(),
+        py: new PyTheme(),
         text: new FontSizeTheme(),
-        lineHeight: new LineHeightTheme({
-            xs: "[--lh:1.2]",
-            sm: "[--lh:1.2]",
-            md: "[--lh:1.2]",
-            lg: "[--lh:1.2]",
-            xl: "[--lh:1.2]"
-        }),
-        gap: GapTheme.createForUI()
+        lineHeight: new LineHeightTheme(),
+        gap: new GapTheme()
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme()
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme()
     },
     layout: {
         ...defaultLayoutsThemes,
-        radius: RadiusTheme.createUITheme(),
+        radius: new RadiusTheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
@@ -13102,55 +12580,25 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     return props.href ? "a" : "span";
 });
 
-const defaultCodeTheme = new ComponentTheme("code", "", {
+const defaultCodeTheme = new ComponentTheme("code", "vane-code", {
     size: {
-        px: new PxTheme({
-            xs: "[--aspect-ratio:1.8]",
-            sm: "[--aspect-ratio:1.8]",
-            md: "[--aspect-ratio:1.8]",
-            lg: "[--aspect-ratio:1.8]",
-            xl: "[--aspect-ratio:1.8]",
-        }, true),
-        py: new PyTheme({
-            xs: "[--py-unit:0.4]",
-            sm: "[--py-unit:0.6]",
-            md: "[--py-unit:0.8]",
-            lg: "[--py-unit:1]",
-            xl: "[--py-unit:1.2]",
-        }, true),
-        text: new FontSizeTheme({
-            xs: "[--fs-unit:5]",
-            sm: "[--fs-unit:6]",
-            md: "[--fs-unit:7]",
-            lg: "[--fs-unit:8]",
-            xl: "[--fs-unit:9]",
-        }),
-        lineHeight: new LineHeightTheme({
-            xs: "[--lh:1]",
-            sm: "[--lh:1]",
-            md: "[--lh:1]",
-            lg: "[--lh:1]",
-            xl: "[--lh:1]"
-        }),
-        gap: GapTheme.createForUI()
+        px: new PxTheme(),
+        py: new PyTheme(),
+        text: new FontSizeTheme(),
+        lineHeight: new LineHeightTheme(),
+        gap: new GapTheme()
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme()
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme()
     },
     layout: {
         ...defaultLayoutsThemes,
-        radius: new RadiusTheme({
-            xs: '[--br-unit:1]',
-            sm: '[--br-unit:2]',
-            md: '[--br-unit:3]',
-            lg: '[--br-unit:4]',
-            xl: '[--br-unit:5]'
-        }, true),
+        radius: new RadiusTheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
@@ -13162,25 +12610,23 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
 
 /**
  * Link-specific variant theme that handles text colors
- * using link color variables directly (not through the appearance system).
+ * using CSS consumer class approach.
  *
- * This allows Link component colors to be customized independently
- * from primary/secondary appearance colors.
+ * Link defaults to "link" appearance which provides link-specific colors
+ * via CSS variable rules in vars.css.
  */
 class LinkVariantTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Text color for outline/default links (light backgrounds) */
-        this.outline = "text-(--color-text-link)";
-        /** Text color for filled links (dark backgrounds) */
-        this.filled = "text-(--color-text-filled-link)";
+        /** CSS consumer class for outline variant */
+        this.outline = "text-(--text-color)";
+        /** CSS consumer class for filled variant */
+        this.filled = "text-(--text-color)";
     }
     getClasses(extractedKeys) {
         var _a;
-        // Handle transparent override
-        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) === 'transparent') {
-            return ['text-transparent'];
-        }
+        // CSS-based approach: consumer class always outputs
+        // Transparent is handled via data-transparent attribute
         const variant = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.variant) !== null && _a !== void 0 ? _a : 'outline';
         return [this[variant] || ''];
     }
@@ -13220,18 +12666,19 @@ const mergeDefaults = (baseDefaults, overrideDefaults) => {
     return finalDefaults;
 };
 
-/** Left padding theme - controls left padding only */
-class PlTheme extends PaddingTheme {
-    constructor(sizeMap) {
-        super(sizeMap);
-        // Override with PlTheme's default classes if no custom sizeMap provided
-        if (!sizeMap) {
-            ComponentKeys.size.forEach((key) => {
-                this[key] = {
-                    xs: "pl-2", sm: "pl-4", md: "pl-6", lg: "pl-8", xl: "pl-10"
-                }[key];
-            });
-        }
+/**
+ * Left padding theme - only outputs the consumer class pl-(--pl).
+ * CSS variable values (--pl-unit) are now set via CSS rules
+ * in vars.css using semantic classes and data attributes.
+ */
+class PlTheme extends BaseTheme {
+    constructor() {
+        super(...arguments);
+        /** Consumer class for left padding */
+        this.pl = "pl-(--pl)";
+    }
+    getClasses(_extractedKeys) {
+        return [this.pl];
     }
 }
 
@@ -13253,14 +12700,14 @@ class ListStyleTheme extends BaseTheme {
     }
 }
 
-const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeTheme = new FontSizeTheme(), defaults = {}, lineHeightTheme = LineHeightTheme.createDefault()) => {
+const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeTheme = new FontSizeTheme(), defaults = {}, lineHeightTheme = new LineHeightTheme()) => {
     return new ComponentTheme(tag, base, {
         size: {
             text: fontSizeTheme,
             lineHeight: lineHeightTheme,
         },
         appearance: {
-            text: GenericVariantTheme.createTypographyTextTheme(),
+            text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
         },
         typography: defaultTypographyThemes,
         layout: defaultLayoutsThemes,
@@ -13269,19 +12716,19 @@ const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeThem
         return props.href ? "a" : tag;
     });
 };
-// Page title specific theme
-const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracking-tight w-fit", FontSizeTheme.createForPageTitle(), mergeDefaults(themeDefaults.pageTitle, { semibold: true }), LineHeightTheme.createForPageTitle());
-// Section title specific theme
-const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", FontSizeTheme.createForSectionTitle(), mergeDefaults(themeDefaults.sectionTitle, { semibold: true }), LineHeightTheme.createForSectionTitle());
-// Title specific theme
-const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", FontSizeTheme.createForTitle(), mergeDefaults(themeDefaults.title, { semibold: true }), LineHeightTheme.createForTitle());
+// Page title specific theme - uses responsive font size
+const pageTitleTheme = createTypographyComponentTheme("h1", "vane-page-title text-balance tracking-tight w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.pageTitle, { semibold: true }), new LineHeightTheme());
+// Section title specific theme - uses responsive font size
+const sectionTitleTheme = createTypographyComponentTheme("h2", "vane-section-title text-balance w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.sectionTitle, { semibold: true }), new LineHeightTheme());
+// Title specific theme - uses responsive font size
+const titleTheme = createTypographyComponentTheme("h3", "vane-title text-balance w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.title, { semibold: true }), new LineHeightTheme());
 // Text specific theme
-const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", new FontSizeTheme(), themeDefaults.text);
+const textTheme = createTypographyComponentTheme("p", "vane-text p-0 m-0 w-fit", new FontSizeTheme(), themeDefaults.text);
 // Link specific theme - uses LinkVariantTheme for link-specific colors
-const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer", {
+const linkTheme = new ComponentTheme("a", "vane-link hover:underline w-fit cursor-pointer", {
     size: {
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault(),
+        lineHeight: new LineHeightTheme(),
     },
     appearance: {
         text: new LinkVariantTheme(),
@@ -13290,26 +12737,26 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
     layout: defaultLayoutsThemes,
 }, themeDefaults.link, TYPOGRAPHY_CATEGORIES);
 // ListItem specific theme
-const listItemTheme = new ComponentTheme("li", "", {
+const listItemTheme = new ComponentTheme("li", "vane-list-item", {
     size: {
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault(),
+        lineHeight: new LineHeightTheme(),
     },
     appearance: {
-        text: GenericVariantTheme.createTypographyTextTheme(),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
     },
     typography: defaultTypographyThemes,
     layout: defaultLayoutsThemes,
 }, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
 // List specific theme
-const listTheme = new ComponentTheme("ul", "list-inside", {
+const listTheme = new ComponentTheme("ul", "vane-list list-inside", {
     size: {
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault(),
+        lineHeight: new LineHeightTheme(),
         paddingLeft: new PlTheme(),
     },
     appearance: {
-        text: GenericVariantTheme.createTypographyTextTheme(),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
     },
     typography: defaultTypographyThemes,
     layout: defaultLayoutsThemes,
@@ -13325,12 +12772,10 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
 class BreakpointTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Switch to column layout on mobile devices and below (max-mobile: 20rem) */
+        /** Switch to column layout on mobile devices and below (max-mobile: 48rem) */
         this.mobileCol = "max-mobile:flex-col";
-        /** Switch to column layout on tablet devices and below (max-tablet: 40rem) */
+        /** Switch to column layout on tablet devices and below (max-tablet: 64rem) */
         this.tabletCol = "max-tablet:flex-col";
-        /** Switch to column layout on laptop devices and below (max-laptop: 64rem) */
-        this.laptopCol = "max-laptop:flex-col";
         /** Switch to column layout on desktop devices and below (max-desktop: 80rem) */
         this.desktopCol = "max-desktop:flex-col";
     }
@@ -13339,47 +12784,35 @@ class BreakpointTheme extends BaseTheme {
     }
 }
 
-const defaultCardTheme = new ComponentTheme("div", "", {
+const defaultCardTheme = new ComponentTheme("div", "vane-card", {
     size: {
-        px: new PxTheme({
-            xs: "[--aspect-ratio:1]",
-            sm: "[--aspect-ratio:1]",
-            md: "[--aspect-ratio:1]",
-            lg: "[--aspect-ratio:1]",
-            xl: "[--aspect-ratio:1]",
-        }),
-        py: new PyTheme({
-            xs: "[--py-unit:2]",
-            sm: "[--py-unit:4]",
-            md: "[--py-unit:6]",
-            lg: "[--py-unit:8]",
-            xl: "[--py-unit:10]",
-        }),
-        lineHeight: LineHeightTheme.createDefault(),
-        gap: GapTheme.createForLayout(),
+        px: new PxTheme(),
+        py: new PyTheme(),
+        lineHeight: new LineHeightTheme(),
+        gap: new GapTheme(),
     },
     layout: {
         ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
-        radius: RadiusTheme.createLayoutTheme(),
+        radius: new RadiusTheme(),
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         breakpoint: new BreakpointTheme(),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
     },
     typography: defaultTypographyThemes,
 }, themeDefaults.card, CARD_CATEGORIES);
 
-const defaultRowTheme = new ComponentTheme("div", "", {
+const defaultRowTheme = new ComponentTheme("div", "vane-row", {
     size: {
-        gap: GapTheme.createForLayout(),
+        gap: new GapTheme(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -13388,29 +12821,33 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         direction: new DirectionTheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
-        radius: RadiusTheme.createLayoutTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme(),
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
 }, themeDefaults.row, ROW_CATEGORIES);
 
-const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
+const defaultDividerTheme = new ComponentTheme("div", "vane-divider h-(--bw) w-full", {
     size: {
         py: new PyTheme(), // Uses layout spacing by default
     },
     appearance: {
-        background: AppearanceTheme.createTheme({
-            base: bgBorderAppearanceClasses,
-        }, 'bg'),
+        // CSS-based approach: uses --border-color variable for divider background
+        background: new SimpleConsumerTheme({ base: '[background:var(--border-color)]' }, 'bg'),
     },
     layout: defaultLayoutsThemes,
 }, themeDefaults.divider, DIVIDER_CATEGORIES);
 
+/**
+ * Size theme - can operate in two modes:
+ * 1. Default mode: outputs consumer class size-(--size), with CSS variable values set in vars.css
+ * 2. Custom mode: outputs custom classes for each size (e.g., max-width classes)
+ */
 class SizeTheme extends BaseTheme {
     constructor(sizeMap) {
         super();
@@ -13424,22 +12861,31 @@ class SizeTheme extends BaseTheme {
         this.lg = "";
         /** Extra-large size variant */
         this.xl = "";
-        ComponentKeys.size.forEach((key) => {
-            var _a;
-            this[key] = (_a = sizeMap === null || sizeMap === void 0 ? void 0 : sizeMap[key]) !== null && _a !== void 0 ? _a : "";
-        });
+        /** Consumer class for size (used in default mode) */
+        this.size = "size-(--size)";
+        this.useCustomClasses = !!sizeMap;
+        if (sizeMap) {
+            ComponentKeys.size.forEach((key) => {
+                var _a;
+                this[key] = (_a = sizeMap[key]) !== null && _a !== void 0 ? _a : "";
+            });
+        }
     }
     getClasses(extractedKeys) {
         var _a;
-        const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-        return size ? [this[size]] : [''];
+        if (this.useCustomClasses) {
+            const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
+            return this[size] ? [this[size]] : [];
+        }
+        // Default: use CSS variable consumer class
+        return [this.size];
     }
 }
 
-const defaultContainerTheme = new ComponentTheme("div", "mx-auto w-full", {
+const defaultContainerTheme = new ComponentTheme("div", "vane-container mx-auto w-full", {
     size: {
-        gap: GapTheme.createForLayout(),
-        maxWidth: new SizeTheme({ xs: 'max-w-3xl', sm: 'max-w-4xl', md: 'max-w-5xl', lg: 'max-w-6xl', xl: 'max-w-7xl' }),
+        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' }), // Uses custom mode for max-width
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -13447,20 +12893,20 @@ const defaultContainerTheme = new ComponentTheme("div", "mx-auto w-full", {
         ring: new RingTheme(),
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
-        radius: RadiusTheme.createLayoutTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme(),
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
 }, themeDefaults.container, CONTAINER_CATEGORIES);
 
-const defaultColTheme = new ComponentTheme("div", "", {
+const defaultColTheme = new ComponentTheme("div", "vane-col", {
     size: {
-        gap: GapTheme.createForLayout(),
+        gap: new GapTheme(),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -13468,28 +12914,22 @@ const defaultColTheme = new ComponentTheme("div", "", {
         direction: new DirectionTheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
-        radius: RadiusTheme.createLayoutTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme(),
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
 }, themeDefaults.col, COL_CATEGORIES);
 
-const defaultStackTheme = new ComponentTheme("div", "", {
+const defaultStackTheme = new ComponentTheme("div", "vane-stack", {
     size: {
-        px: new PxTheme({
-            xs: "[--aspect-ratio:1]",
-            sm: "[--aspect-ratio:1]",
-            md: "[--aspect-ratio:1]",
-            lg: "[--aspect-ratio:1]",
-            xl: "[--aspect-ratio:1]",
-        }),
+        px: new PxTheme(),
         py: new PyTheme(),
-        gap: GapTheme.createForLayout(),
+        gap: new GapTheme(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -13498,47 +12938,29 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         direction: new DirectionTheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
-        radius: RadiusTheme.createLayoutTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme(),
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
 }, themeDefaults.stack, STACK_CATEGORIES);
 
-const defaultSectionTheme = new ComponentTheme("div", "w-full", {
+const defaultSectionTheme = new ComponentTheme("div", "vane-section w-full", {
     size: {
-        px: new PxTheme({
-            xs: "[--aspect-ratio:2.5]",
-            sm: "[--aspect-ratio:2]",
-            md: "[--aspect-ratio:1.75]",
-            lg: "[--aspect-ratio:1.6]",
-            xl: "[--aspect-ratio:1.5]",
-        }),
-        py: new PyTheme({
-            xs: "[--py-unit:4]  max-laptop:[--py-unit:3]  max-tablet:[--py-unit:2]",
-            sm: "[--py-unit:8]  max-laptop:[--py-unit:4]  max-tablet:[--py-unit:2]",
-            md: "[--py-unit:12] max-laptop:[--py-unit:6]  max-tablet:[--py-unit:2]",
-            lg: "[--py-unit:16] max-laptop:[--py-unit:8]  max-tablet:[--py-unit:2]",
-            xl: "[--py-unit:20] max-laptop:[--py-unit:10] max-tablet:[--py-unit:4]",
-        }),
-        gap: new GapTheme({
-            xs: "[--gap-unit:4]  max-laptop:[--gap-unit:3]  max-tablet:[--gap-unit:2]",
-            sm: "[--gap-unit:6]  max-laptop:[--gap-unit:5]  max-tablet:[--gap-unit:4]",
-            md: "[--gap-unit:8]  max-laptop:[--gap-unit:6]  max-tablet:[--gap-unit:4]",
-            lg: "[--gap-unit:10] max-laptop:[--gap-unit:8]  max-tablet:[--gap-unit:6]",
-            xl: "[--gap-unit:12] max-laptop:[--gap-unit:10] max-tablet:[--gap-unit:8]",
-        }),
+        px: new PxTheme(),
+        py: new PyTheme(),
+        gap: new GapTheme(),
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
@@ -13547,40 +12969,37 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full", {
         direction: new DirectionTheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
-        radius: RadiusTheme.createLayoutTheme(),
+        radius: new RadiusTheme(),
     },
 }, themeDefaults.section, SECTION_CATEGORIES);
 
 const gridSubThemes = {
     size: {
-        gap: GapTheme.createForLayout(),
+        gap: new GapTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
     },
     layout: {
         ...defaultLayoutsThemes,
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
+        radius: new RadiusTheme(),
+        border: new BorderTheme(),
     },
 };
-const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES);
-const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES);
-const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES);
-const defaultGrid5Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5", gridSubThemes, themeDefaults.grid5, GRID_CATEGORIES);
-const defaultGrid6Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6", gridSubThemes, themeDefaults.grid6, GRID_CATEGORIES);
+const defaultGrid2Theme = new ComponentTheme("div", "vane-grid vane-grid-2 grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES);
+const defaultGrid3Theme = new ComponentTheme("div", "vane-grid vane-grid-3 grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES);
+const defaultGrid4Theme = new ComponentTheme("div", "vane-grid vane-grid-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES);
+const defaultGrid5Theme = new ComponentTheme("div", "vane-grid vane-grid-5 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5", gridSubThemes, themeDefaults.grid5, GRID_CATEGORIES);
+const defaultGrid6Theme = new ComponentTheme("div", "vane-grid vane-grid-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6", gridSubThemes, themeDefaults.grid6, GRID_CATEGORIES);
 
 var _a, _b, _c;
-const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent size-(--ui-size)", {
+const defaultCheckboxTheme = new ComponentTheme("input", "vane-checkbox peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent size-(--size)", {
     size: {
-        size: new SizeTheme({
-            xs: '[--size-unit:3]',
-            sm: '[--size-unit:3.5]',
-            md: '[--size-unit:4]',
-            lg: '[--size-unit:4.5]',
-            xl: '[--size-unit:5]'
-        }),
+        size: new SizeTheme(),
         text: new FontSizeTheme()
     },
     layout: {
@@ -13588,29 +13007,23 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
-        radius: new RadiusTheme({
-            xs: '[--br-unit:1]',
-            sm: '[--br-unit:1.5]',
-            md: '[--br-unit:2]',
-            lg: '[--br-unit:2.5]',
-            xl: '[--br-unit:3]'
-        }, true),
+        radius: new RadiusTheme(),
     },
     appearance: {
-        accent: GenericVariantTheme.createAccentColorAppearanceTheme(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        background: GenericVariantTheme.createCheckboxBgAppearanceTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
-        check: GenericVariantTheme.createCheckedAppearanceTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        accent: new SimpleConsumerTheme({ base: accentConsumerClass }, 'accent'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        background: new SimpleConsumerTheme({ base: 'bg-white' }, 'bg'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
+        check: new SimpleConsumerTheme({ base: checkedBgConsumerClass }, 'bg'),
+        shadow: ShadowAppearanceTheme.createUITheme(),
     }
 }, ((_a = themeDefaults.checkbox) === null || _a === void 0 ? void 0 : _a.input) || {}, CHECKBOX_CATEGORIES);
 const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-start-1 peer-checked:visible", {
     checkElement: () => jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "none", children: jsxRuntime.jsx("path", { d: "M3 8L6 11L11 3.5", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", stroke: "currentColor" }) }),
     appearance: {
-        color: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme()
+        color: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible')
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -13625,26 +13038,26 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
             md: 'h-[calc(var(--lh)*var(--fs))]',
             lg: 'h-[calc(var(--lh)*var(--fs))]',
             xl: 'h-[calc(var(--lh)*var(--fs))]'
-        })
+        }) // Uses custom mode for calculated height
     },
     layout: {
         ...defaultLayoutsThemes,
         focusVisible: new FocusVisibleTheme()
     },
     appearance: {
-        variant: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme()
+        variant: new SimpleConsumerTheme({ base: '' }, 'bg'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible')
     }
 }, ((_c = themeDefaults.checkbox) === null || _c === void 0 ? void 0 : _c.wrapper) || {}, CHECKBOX_CATEGORIES);
 
-const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointer cursor-default", {
+const defaultLabelTheme = new ComponentTheme("label", "vane-label has-[input]:cursor-pointer cursor-default", {
     size: {
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault(),
-        gap: GapTheme.createForUI(),
+        lineHeight: new LineHeightTheme(),
+        gap: new GapTheme(),
     },
     appearance: {
-        text: GenericVariantTheme.createTypographyTextTheme(),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
     },
     typography: defaultTypographyThemes,
     layout: {
@@ -13654,52 +13067,46 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
     },
 }, themeDefaults.label, LABEL_CATEGORIES);
 
-const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to cover for better image display
+const defaultImgTheme = new ComponentTheme("img", "vane-img object-cover", // Default to cover for better image display
 {
     layout: {
         ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
-        radius: RadiusTheme.createLayoutTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
-        shadow: GenericVariantTheme.createLayoutShadowTheme()
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base }, 'bg'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
+        shadow: ShadowAppearanceTheme.createLayoutTheme()
     }
 }, themeDefaults.img, IMG_CATEGORIES);
 
-const defaultInputTheme = new ComponentTheme("input", "w-full transition-all duration-200", {
+const defaultInputTheme = new ComponentTheme("input", "vane-input w-full transition-all duration-200", {
     size: {
-        px: new PxTheme({
-            xs: "[--aspect-ratio:2]",
-            sm: "[--aspect-ratio:2]",
-            md: "[--aspect-ratio:2]",
-            lg: "[--aspect-ratio:2]",
-            xl: "[--aspect-ratio:2]",
-        }, true),
-        py: PyTheme.createForUI(),
-        gap: GapTheme.createForUI(),
+        px: new PxTheme(),
+        py: new PyTheme(),
+        gap: new GapTheme(),
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault(),
+        lineHeight: new LineHeightTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
-        border: GenericVariantTheme.createUIElementBorderTheme(),
-        ring: GenericVariantTheme.createUIElementRingTheme(),
-        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        background: new SimpleConsumerTheme({ base: bgConsumerClasses.base, hover: bgConsumerClasses.hover }, 'bg'),
+        text: new SimpleConsumerTheme({ base: textConsumerClass }, 'text'),
+        border: new SimpleConsumerTheme({ base: borderConsumerClass }, 'border'),
+        ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
+        focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
+        shadow: ShadowAppearanceTheme.createUITheme()
     },
     layout: {
         ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
-        radius: RadiusTheme.createUITheme(),
+        radius: new RadiusTheme(),
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },