@vaneui/ui 0.2.1-alpha.20250830124557.3818ff4 → 0.2.1-alpha.20250831120721.fd71f6f

package/dist/components/ui/classes/appearanceClasses.d.ts

@@ -6,6 +6,7 @@ export declare const backgroundAppearanceClasses: Record<AppearanceKey | Transpa
 export declare const hoverBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const activeBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const layoutBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
+export declare const layoutFilledBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const bgBorderAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const borderAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const filledBorderAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;

package/dist/components/ui/img.d.ts

@@ -77,6 +77,8 @@ export declare const Img: React.ForwardRefExoticComponent<{
     md?: boolean | undefined;
     lg?: boolean | undefined;
     xl?: boolean | undefined;
+    filled?: boolean | undefined;
+    outline?: boolean | undefined;
 } & {
     tag?: React.ElementType;
 } & React.RefAttributes<HTMLImageElement>>;

package/dist/components/ui/label.d.ts

@@ -101,6 +101,8 @@ export declare const Label: React.ForwardRefExoticComponent<{
     lowercase?: boolean | undefined;
     capitalize?: boolean | undefined;
     normalCase?: boolean | undefined;
+    filled?: boolean | undefined;
+    outline?: boolean | undefined;
     flexWrap?: boolean | undefined;
     flexNoWrap?: boolean | undefined;
     flexWrapReverse?: boolean | undefined;

package/dist/components/ui/props/keys.d.ts

@@ -75,19 +75,19 @@ export declare const BUTTON_CATEGORIES: readonly ["size", "hide", "items", "just
 export declare const BADGE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const CHIP_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const CODE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
-export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent"];
-export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
-export declare const GRID_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
-export declare const CONTAINER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const COL_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const ROW_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const STACK_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "padding", "appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding"];
+export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "variant"];
+export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding", "variant"];
+export declare const GRID_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "variant"];
+export declare const CONTAINER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+export declare const COL_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+export declare const ROW_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+export declare const STACK_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "padding", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "variant"];
 export declare const DIVIDER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
-export declare const SECTION_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "breakpoint"];
+export declare const SECTION_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "breakpoint", "variant"];
 export declare const CHECKBOX_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
-export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
-export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape"];
+export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "variant"];
+export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
 export type CategoryProps = {
     [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];
 };

package/dist/components/ui/theme/appearance/appearanceTheme.d.ts

@@ -8,5 +8,4 @@ export declare class AppearanceTheme extends BaseTheme {
     private constructor();
     getClasses(extractedKeys: CategoryProps): string[];
     static createTheme(src?: Partial<Record<ModeKey, Partial<Record<AppearanceKey, string>>>>): AppearanceTheme;
-    static createLayoutBgTheme(): AppearanceTheme;
 }

package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts

@@ -21,4 +21,5 @@ export declare class GenericVariantTheme<T extends BaseTheme> extends BaseTheme
     static createSimpleUIElementBgAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
     static createAccentColorAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
     static createCheckedAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
+    static createLayoutBgAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
 }

package/dist/components/ui/theme/cardTheme.d.ts

@@ -8,6 +8,7 @@ import { RadiusTheme } from "./layout/radiusTheme";
 import { PxTheme } from "./size/pxTheme";
 import { PyTheme } from "./size/pyTheme";
 import { AppearanceTheme } from "./appearance/appearanceTheme";
+import { GenericVariantTheme } from "./appearance/genericVariantTheme";
 import { BreakpointTheme } from "./size/breakpointTheme";
 import { RingTheme } from "./layout/ringTheme";
 import { ShadowAppearanceTheme } from "./appearance/shadowAppearanceTheme";
@@ -27,10 +28,10 @@ export interface CardTheme extends BaseTypographyComponentTheme {
         shadow: ShadowAppearanceTheme;
     };
     appearance: {
-        background: AppearanceTheme;
-        text: AppearanceTheme;
-        border: AppearanceTheme;
-        ring: AppearanceTheme;
+        background: GenericVariantTheme<AppearanceTheme>;
+        text: GenericVariantTheme<AppearanceTheme>;
+        border: GenericVariantTheme<AppearanceTheme>;
+        ring: GenericVariantTheme<AppearanceTheme>;
     };
 }
 export declare const defaultCardTheme: ComponentTheme<CardProps, CardTheme>;

package/dist/components/ui/theme/colTheme.d.ts

@@ -21,8 +21,8 @@ export interface ColTheme extends BaseComponentTheme {
         radius: RadiusTheme;
     };
     appearance: {
-        background: AppearanceTheme;
-        text: AppearanceTheme;
+        background: GenericVariantTheme<AppearanceTheme>;
+        text: GenericVariantTheme<AppearanceTheme>;
         border: GenericVariantTheme<AppearanceTheme>;
         ring: GenericVariantTheme<AppearanceTheme>;
         shadow: GenericVariantTheme<ShadowAppearanceTheme>;

package/dist/components/ui/theme/containerTheme.d.ts

@@ -23,10 +23,10 @@ export interface ContainerTheme extends BaseComponentTheme {
         radius: RadiusTheme;
     };
     appearance: {
-        background: AppearanceTheme;
-        text: AppearanceTheme;
-        border: AppearanceTheme;
-        ring: AppearanceTheme;
+        background: GenericVariantTheme<AppearanceTheme>;
+        text: GenericVariantTheme<AppearanceTheme>;
+        border: GenericVariantTheme<AppearanceTheme>;
+        ring: GenericVariantTheme<AppearanceTheme>;
         shadow: GenericVariantTheme<ShadowAppearanceTheme>;
     };
 }

package/dist/components/ui/theme/gridTheme.d.ts

@@ -4,13 +4,14 @@ import { GapTheme } from "./size/gapTheme";
 import { WrapTheme } from "./layout/wrapTheme";
 import { DirectionTheme } from "./layout/directionTheme";
 import { AppearanceTheme } from "./appearance/appearanceTheme";
+import { GenericVariantTheme } from "./appearance/genericVariantTheme";
 export interface GridTheme extends BaseComponentTheme {
     size: {
         gap: GapTheme;
     };
     appearance: {
-        background: AppearanceTheme;
-        text: AppearanceTheme;
+        background: GenericVariantTheme<AppearanceTheme>;
+        text: GenericVariantTheme<AppearanceTheme>;
     };
     layout: DefaultLayoutThemes & {
         wrap: WrapTheme;

package/dist/components/ui/theme/labelTheme.d.ts

@@ -3,6 +3,7 @@ import { LabelProps } from "../props";
 import { SizeTheme } from "./size/sizeTheme";
 import { GapTheme } from "./size/gapTheme";
 import { AppearanceTheme } from "./appearance/appearanceTheme";
+import { GenericVariantTheme } from "./appearance/genericVariantTheme";
 import { WrapTheme } from "./layout/wrapTheme";
 import { DirectionTheme } from "./layout/directionTheme";
 export interface LabelTheme extends BaseTypographyComponentTheme {
@@ -11,7 +12,7 @@ export interface LabelTheme extends BaseTypographyComponentTheme {
         gap: GapTheme;
     };
     appearance: {
-        text: AppearanceTheme;
+        text: GenericVariantTheme<AppearanceTheme>;
     };
     layout: DefaultLayoutThemes & {
         wrap: WrapTheme;

package/dist/components/ui/theme/rowTheme.d.ts

@@ -23,8 +23,8 @@ export interface RowTheme extends BaseComponentTheme {
         radius: RadiusTheme;
     };
     appearance: {
-        background: AppearanceTheme;
-        text: AppearanceTheme;
+        background: GenericVariantTheme<AppearanceTheme>;
+        text: GenericVariantTheme<AppearanceTheme>;
         border: GenericVariantTheme<AppearanceTheme>;
         ring: GenericVariantTheme<AppearanceTheme>;
         shadow: GenericVariantTheme<ShadowAppearanceTheme>;

package/dist/components/ui/theme/stackTheme.d.ts

@@ -27,8 +27,8 @@ export interface StackTheme extends BaseComponentTheme {
         radius: RadiusTheme;
     };
     appearance: {
-        background: AppearanceTheme;
-        text: AppearanceTheme;
+        background: GenericVariantTheme<AppearanceTheme>;
+        text: GenericVariantTheme<AppearanceTheme>;
         border: GenericVariantTheme<AppearanceTheme>;
         ring: GenericVariantTheme<AppearanceTheme>;
         shadow: GenericVariantTheme<ShadowAppearanceTheme>;

package/dist/components/ui/theme/typographyTheme.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 import { BaseTypographyComponentTheme, ComponentTheme, DefaultLayoutThemes } from "./common/ComponentTheme";
 import { SizeTheme } from "./size/sizeTheme";
 import { AppearanceTheme } from "./appearance/appearanceTheme";
+import { GenericVariantTheme } from "./appearance/genericVariantTheme";
 import { SizeKey } from "../props";
 import { PlTheme } from "./size/plTheme";
 import { ListStyleTheme } from "./list/listStyleTheme";
@@ -11,7 +12,7 @@ export interface TypographyTheme extends BaseTypographyComponentTheme {
         text: SizeTheme;
     };
     appearance: {
-        text: AppearanceTheme;
+        text: GenericVariantTheme<AppearanceTheme>;
     };
     layout: DefaultLayoutThemes;
 }
@@ -28,7 +29,7 @@ export interface ListTheme extends BaseTypographyComponentTheme {
         paddingLeft: PlTheme;
     };
     appearance: {
-        text: AppearanceTheme;
+        text: GenericVariantTheme<AppearanceTheme>;
     };
     layout: DefaultLayoutThemes;
     listStyle: ListStyleTheme;

package/dist/components/ui/typography.d.ts

@@ -105,6 +105,8 @@ export declare const List: React.ForwardRefExoticComponent<{
     lowercase?: boolean | undefined;
     capitalize?: boolean | undefined;
     normalCase?: boolean | undefined;
+    filled?: boolean | undefined;
+    outline?: boolean | undefined;
 } & {
     tag?: React.ElementType;
 } & React.RefAttributes<HTMLUListElement>>;

package/dist/index.esm.js

@@ -72,22 +72,22 @@ const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
 //typography:
-const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE];
-const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
+const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
+const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
 //layout:
-const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE];
-const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
-const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
-const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL];
-const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL];
-const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING];
+const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
+const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
+const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
+const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...VARIANT];
+const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL, ...VARIANT];
+const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING, ...VARIANT];
 const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
-const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT];
+const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT, ...VARIANT];
 // Form component categories
 const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
-const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
+const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
 // Media component categories
-const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
+const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
     'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
 const ComponentCategories = {
@@ -3420,6 +3420,78 @@ class PyTheme extends PaddingTheme {
     }
 }
 
+class AppearanceTheme extends BaseTheme {
+    constructor(config, transparentClasses) {
+        super();
+        Object.assign(this, config);
+        this.transparentClasses = transparentClasses;
+    }
+    getClasses(extractedKeys) {
+        var _a;
+        // Check for specific transparent styles first
+        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
+            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 ComponentKeys.mode.map(mode => modes[mode] || '');
+            }
+        }
+        return [];
+    }
+    static createTheme(src = {}) {
+        const config = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
+            textKey,
+            Object.fromEntries(ComponentKeys.mode.map(modeKey => {
+                var _a;
+                return [
+                    modeKey,
+                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey]) || ''
+                ];
+            })),
+        ]));
+        return new AppearanceTheme(config, src.base);
+    }
+}
+
+const filledTextAppearanceClasses = {
+    default: "text-(--filled-text-color-default)",
+    primary: "text-(--filled-text-color-primary)",
+    secondary: "text-(--filled-text-color-secondary)",
+    tertiary: "text-(--filled-text-color-tertiary)",
+    link: "text-(--filled-text-color-link)",
+    accent: "text-(--filled-text-color-accent)",
+    success: "text-(--filled-text-color-success)",
+    danger: "text-(--filled-text-color-danger)",
+    warning: "text-(--filled-text-color-warning)",
+    info: "text-(--filled-text-color-info)",
+    transparent: "text-(--filled-text-color-transparent)",
+};
+const textAppearanceClasses = {
+    default: "text-(--text-color-default)",
+    primary: "text-(--text-color-primary)",
+    secondary: "text-(--text-color-secondary)",
+    tertiary: "text-(--text-color-tertiary)",
+    link: "text-(--text-color-link)",
+    accent: "text-(--text-color-accent)",
+    success: "text-(--text-color-success)",
+    danger: "text-(--text-color-danger)",
+    warning: "text-(--text-color-warning)",
+    info: "text-(--text-color-info)",
+    transparent: "text-transparent",
+};
+const textSizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+};
+
 const filledBackgroundAppearanceClasses = {
     default: "bg-(--filled-background-color-default)",
     primary: "bg-(--filled-background-color-primary)",
@@ -3511,6 +3583,19 @@ const layoutBackgroundAppearanceClasses = {
     transparent: "bg-transparent",
     link: "bg-(--layout-background-link)",
 };
+const layoutFilledBackgroundAppearanceClasses = {
+    default: "bg-(--layout-filled-background-color-default)",
+    primary: "bg-(--layout-filled-background-color-primary)",
+    secondary: "bg-(--layout-filled-background-color-secondary)",
+    tertiary: "bg-(--layout-filled-background-color-tertiary)",
+    accent: "bg-(--layout-filled-background-color-accent)",
+    success: "bg-(--layout-filled-background-color-success)",
+    danger: "bg-(--layout-filled-background-color-danger)",
+    warning: "bg-(--layout-filled-background-color-warning)",
+    info: "bg-(--layout-filled-background-color-info)",
+    transparent: "bg-transparent",
+    link: "bg-(--layout-filled-background-color-link)",
+};
 const bgBorderAppearanceClasses = {
     default: "bg-(--border-color-default)",
     primary: "bg-(--border-color-primary)",
@@ -3629,90 +3714,6 @@ const filledCheckedBackgroundAppearanceClasses = {
     link: "checked:bg-(--filled-background-color-link)",
 };
 
-class AppearanceTheme extends BaseTheme {
-    constructor(config, transparentClasses) {
-        super();
-        Object.assign(this, config);
-        this.transparentClasses = transparentClasses;
-    }
-    getClasses(extractedKeys) {
-        var _a;
-        // Check for specific transparent styles first
-        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
-            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 ComponentKeys.mode.map(mode => modes[mode] || '');
-            }
-        }
-        return [];
-    }
-    static createTheme(src = {}) {
-        const config = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
-            textKey,
-            Object.fromEntries(ComponentKeys.mode.map(modeKey => {
-                var _a;
-                return [
-                    modeKey,
-                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey]) || ''
-                ];
-            })),
-        ]));
-        return new AppearanceTheme(config, src.base);
-    }
-    static createLayoutBgTheme() {
-        // Creates a theme for layout backgrounds, replacing BgAppearanceTheme
-        const config = Object.fromEntries(ComponentKeys.appearance.map(key => [
-            key,
-            {
-                base: layoutBackgroundAppearanceClasses[key] || '',
-                hover: '',
-                active: '',
-            }
-        ]));
-        return new AppearanceTheme(config, layoutBackgroundAppearanceClasses);
-    }
-}
-
-const filledTextAppearanceClasses = {
-    default: "text-white",
-    primary: "text-white",
-    secondary: "text-white",
-    tertiary: "text-white",
-    link: "text-white",
-    accent: "text-white",
-    success: "text-white",
-    danger: "text-white",
-    warning: "text-white",
-    info: "text-white",
-    transparent: "text-transparent",
-};
-const textAppearanceClasses = {
-    default: "text-(--text-color-default)",
-    primary: "text-(--text-color-primary)",
-    secondary: "text-(--text-color-secondary)",
-    tertiary: "text-(--text-color-tertiary)",
-    link: "text-(--text-color-link)",
-    accent: "text-(--text-color-accent)",
-    success: "text-(--text-color-success)",
-    danger: "text-(--text-color-danger)",
-    warning: "text-(--text-color-warning)",
-    info: "text-(--text-color-info)",
-    transparent: "text-transparent",
-};
-const textSizeClasses = {
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-    xl: "text-xl",
-};
-
 class ShadowAppearanceTheme extends BaseTheme {
     constructor(initial) {
         super();
@@ -3902,6 +3903,16 @@ class GenericVariantTheme extends BaseTheme {
             })
         });
     }
+    static createLayoutBgAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                base: layoutBackgroundAppearanceClasses
+            }),
+            filled: AppearanceTheme.createTheme({
+                base: layoutFilledBackgroundAppearanceClasses
+            })
+        });
+    }
 }
 
 class WrapTheme extends BaseTheme {
@@ -4399,7 +4410,7 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
             text: new SizeTheme(textSizeMap),
         },
         appearance: {
-            text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+            text: GenericVariantTheme.createUIElementTextTheme(),
         },
         typography: defaultTypographyTheme,
         layout: defaultLayoutTheme,
@@ -4434,7 +4445,7 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
         text: new SizeTheme(textSizeClasses, false),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
@@ -4445,7 +4456,7 @@ const listItemTheme = new ComponentTheme("li", "", {
         text: new SizeTheme(textSizeClasses, false),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
 }, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
@@ -4456,7 +4467,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
         paddingLeft: new PlTheme(),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
@@ -4522,10 +4533,10 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
-        border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
-        ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
     },
     typography: defaultTypographyTheme,
 }, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
@@ -4546,8 +4557,8 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4589,10 +4600,10 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
-        border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
-        ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
@@ -4612,8 +4623,8 @@ const defaultColTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4638,8 +4649,8 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4668,10 +4679,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
-        border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
-        ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
@@ -4697,8 +4708,8 @@ const gridSubThemes = {
         }),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4778,7 +4789,7 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
         gap: new GapTheme({ xs: 'gap-1.5', sm: 'gap-2', md: 'gap-2.5', lg: 'gap-3', xl: 'gap-3' }),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: {