@vaneui/ui 0.2.1-alpha.20250830120134.26927ee → 0.2.1-alpha.20250830140007.8b4cce3

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/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,7 +21,8 @@ export interface ColTheme extends BaseComponentTheme {
         radius: RadiusTheme;
     };
     appearance: {
-        background: 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,12 +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;
+        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,7 +23,8 @@ export interface RowTheme extends BaseComponentTheme {
         radius: RadiusTheme;
     };
     appearance: {
-        background: 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,7 +27,8 @@ export interface StackTheme extends BaseComponentTheme {
         radius: RadiusTheme;
     };
     appearance: {
-        background: 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 = {
@@ -4088,7 +4088,6 @@ const themeDefaults = {
         md: true,
         flex: true,
         gap: true,
-        default: true,
         sans: true,
         medium: true,
     },
@@ -4107,27 +4106,23 @@ const themeDefaults = {
     },
     text: {
         md: true,
-        default: true,
         sans: true,
         textLeft: true,
     },
     title: {
         md: true,
-        default: true,
         sans: true,
         semibold: true,
         textLeft: true,
     },
     pageTitle: {
         md: true,
-        default: true,
         sans: true,
         semibold: true,
         textLeft: true,
     },
     sectionTitle: {
         md: true,
-        default: true,
         sans: true,
         semibold: true,
         textLeft: true,
@@ -4142,7 +4137,6 @@ const themeDefaults = {
     },
     list: {
         md: true,
-        default: true,
         sans: true,
         normal: true,
         padding: true,
@@ -4405,7 +4399,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,
@@ -4440,7 +4434,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,
@@ -4451,7 +4445,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);
@@ -4462,7 +4456,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
         paddingLeft: new PlTheme(),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
@@ -4528,10 +4522,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.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
     },
     typography: defaultTypographyTheme,
 }, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
@@ -4552,7 +4546,8 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4594,10 +4589,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.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
@@ -4617,7 +4612,8 @@ const defaultColTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4642,7 +4638,8 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4671,10 +4668,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.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
@@ -4700,7 +4697,8 @@ const gridSubThemes = {
         }),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4780,7 +4778,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: {