@vaneui/ui 0.3.1-alpha.20251222154252.88fa4ba → 0.3.1-alpha.20251223082222.6676a81

package/dist/index.js

@@ -75,7 +75,7 @@ const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent',
 /** Component property keys mapping categories to their available values */
 const ComponentKeys = {
     /** Color appearance options */
-    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'link'],
+    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'],
     /** 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 */
@@ -3762,7 +3762,6 @@ const filledTextAppearanceClasses = {
     primary: "text-(--color-text-filled-primary)",
     secondary: "text-(--color-text-filled-secondary)",
     tertiary: "text-(--color-text-filled-tertiary)",
-    link: "text-(--color-text-filled-link)",
     accent: "text-(--color-text-filled-accent)",
     success: "text-(--color-text-filled-success)",
     danger: "text-(--color-text-filled-danger)",
@@ -3775,7 +3774,6 @@ const textAppearanceClasses = {
     primary: "text-(--color-text-primary)",
     secondary: "text-(--color-text-secondary)",
     tertiary: "text-(--color-text-tertiary)",
-    link: "text-(--color-text-link)",
     accent: "text-(--color-text-accent)",
     success: "text-(--color-text-success)",
     danger: "text-(--color-text-danger)",
@@ -3795,7 +3793,6 @@ const filledBackgroundAppearanceClasses = {
     warning: "bg-(--color-bg-filled-warning)",
     info: "bg-(--color-bg-filled-info)",
     transparent: "bg-transparent",
-    link: "bg-(--color-bg-filled-link)",
 };
 const filledHoverBackgroundAppearanceClasses = {
     default: "hover:bg-(--color-bg-filled-hover-default)",
@@ -3808,7 +3805,6 @@ const filledHoverBackgroundAppearanceClasses = {
     warning: "hover:bg-(--color-bg-filled-hover-warning)",
     info: "hover:bg-(--color-bg-filled-hover-info)",
     transparent: "hover:bg-transparent",
-    link: "hover:bg-(--color-bg-filled-hover-link)",
 };
 const filledActiveBackgroundAppearanceClasses = {
     default: "active:bg-(--color-bg-filled-active-default)",
@@ -3821,7 +3817,6 @@ const filledActiveBackgroundAppearanceClasses = {
     warning: "active:bg-(--color-bg-filled-active-warning)",
     info: "active:bg-(--color-bg-filled-active-info)",
     transparent: "active:bg-transparent",
-    link: "active:bg-(--color-bg-filled-active-link)",
 };
 const backgroundAppearanceClasses = {
     default: "bg-(--color-bg-default)",
@@ -3834,7 +3829,6 @@ const backgroundAppearanceClasses = {
     warning: "bg-(--color-bg-warning)",
     info: "bg-(--color-bg-info)",
     transparent: "bg-transparent",
-    link: "bg-(--color-bg-link)",
 };
 const hoverBackgroundAppearanceClasses = {
     default: "hover:bg-(--color-bg-hover-default)",
@@ -3847,7 +3841,6 @@ const hoverBackgroundAppearanceClasses = {
     warning: "hover:bg-(--color-bg-hover-warning)",
     info: "hover:bg-(--color-bg-hover-info)",
     transparent: "hover:bg-transparent",
-    link: "hover:bg-(--color-bg-hover-link)",
 };
 const activeBackgroundAppearanceClasses = {
     default: "active:bg-(--color-bg-active-default)",
@@ -3860,7 +3853,6 @@ const activeBackgroundAppearanceClasses = {
     warning: "active:bg-(--color-bg-active-warning)",
     info: "active:bg-(--color-bg-active-info)",
     transparent: "active:bg-transparent",
-    link: "active:bg-(--color-bg-active-link)",
 };
 const layoutBackgroundAppearanceClasses = {
     default: "bg-(--color-bg-layout-default)",
@@ -3873,7 +3865,6 @@ const layoutBackgroundAppearanceClasses = {
     warning: "bg-(--color-bg-layout-warning)",
     info: "bg-(--color-bg-layout-info)",
     transparent: "bg-transparent",
-    link: "bg-(--color-bg-layout-link)",
 };
 const layoutFilledBackgroundAppearanceClasses = {
     default: "bg-(--color-bg-filled-layout-default)",
@@ -3886,7 +3877,6 @@ const layoutFilledBackgroundAppearanceClasses = {
     warning: "bg-(--color-bg-filled-layout-warning)",
     info: "bg-(--color-bg-filled-layout-info)",
     transparent: "bg-transparent",
-    link: "bg-(--color-bg-filled-layout-link)",
 };
 const bgBorderAppearanceClasses = {
     default: "bg-(--color-border-default)",
@@ -3898,7 +3888,6 @@ const bgBorderAppearanceClasses = {
     danger: "bg-(--color-border-danger)",
     warning: "bg-(--color-border-warning)",
     info: "bg-(--color-border-info)",
-    link: "bg-(--color-border-link)",
     transparent: "bg-transparent",
 };
 const borderAppearanceClasses = {
@@ -3911,7 +3900,6 @@ const borderAppearanceClasses = {
     danger: "border-(--color-border-danger)",
     warning: "border-(--color-border-warning)",
     info: "border-(--color-border-info)",
-    link: "border-(--color-border-link)",
     transparent: "border-transparent",
 };
 const filledBorderAppearanceClasses = {
@@ -3924,7 +3912,6 @@ const filledBorderAppearanceClasses = {
     danger: "border-(--color-border-filled-danger)",
     warning: "border-(--color-border-filled-warning)",
     info: "border-(--color-border-filled-info)",
-    link: "border-(--color-border-filled-link)",
     transparent: "border-transparent",
 };
 const ringAppearanceClasses = {
@@ -3937,7 +3924,6 @@ const ringAppearanceClasses = {
     danger: "ring-(--color-border-danger)",
     warning: "ring-(--color-border-warning)",
     info: "ring-(--color-border-info)",
-    link: "ring-(--color-border-link)",
     transparent: "ring-transparent",
 };
 const filledRingAppearanceClasses = {
@@ -3950,7 +3936,6 @@ const filledRingAppearanceClasses = {
     danger: "ring-(--color-border-filled-danger)",
     warning: "ring-(--color-border-filled-warning)",
     info: "ring-(--color-border-filled-info)",
-    link: "ring-(--color-border-filled-link)",
     transparent: "ring-transparent",
 };
 const focusVisibleOutlineAppearanceClasses = {
@@ -3963,7 +3948,6 @@ const focusVisibleOutlineAppearanceClasses = {
     danger: "focus-visible:outline-(--color-border-danger)",
     warning: "focus-visible:outline-(--color-border-warning)",
     info: "focus-visible:outline-(--color-border-info)",
-    link: "focus-visible:outline-(--color-border-link)",
     transparent: "focus-visible:outline-transparent",
 };
 const filledFocusVisibleOutlineAppearanceClasses = {
@@ -3976,7 +3960,6 @@ const filledFocusVisibleOutlineAppearanceClasses = {
     danger: "focus-visible:outline-(--color-border-filled-danger)",
     warning: "focus-visible:outline-(--color-border-filled-warning)",
     info: "focus-visible:outline-(--color-border-filled-info)",
-    link: "focus-visible:outline-(--color-border-filled-link)",
     transparent: "focus-visible:outline-transparent",
 };
 const accentColorAppearanceClasses = {
@@ -3990,7 +3973,6 @@ const accentColorAppearanceClasses = {
     warning: "accent-(--color-bg-warning)",
     info: "accent-(--color-bg-info)",
     transparent: "accent-transparent",
-    link: "accent-(--color-bg-link)",
 };
 const filledAccentColorAppearanceClasses = {
     default: "accent-(--color-bg-filled-default)",
@@ -4003,7 +3985,6 @@ const filledAccentColorAppearanceClasses = {
     warning: "accent-(--color-bg-filled-warning)",
     info: "accent-(--color-bg-filled-info)",
     transparent: "accent-transparent",
-    link: "accent-(--color-bg-filled-link)",
 };
 const checkedBackgroundAppearanceClasses = {
     default: "checked:bg-(--color-bg-default)",
@@ -4016,7 +3997,6 @@ const checkedBackgroundAppearanceClasses = {
     warning: "checked:bg-(--color-bg-warning)",
     info: "checked:bg-(--color-bg-info)",
     transparent: "checked:bg-transparent",
-    link: "checked:bg-(--color-bg-link)",
 };
 const filledCheckedBackgroundAppearanceClasses = {
     default: "checked:bg-(--color-bg-filled-default)",
@@ -4029,7 +4009,6 @@ const filledCheckedBackgroundAppearanceClasses = {
     warning: "checked:bg-(--color-bg-filled-warning)",
     info: "checked:bg-(--color-bg-filled-info)",
     transparent: "checked:bg-transparent",
-    link: "checked:bg-(--color-bg-filled-link)",
 };
 
 class ShadowAppearanceTheme extends BaseTheme {
@@ -4470,7 +4449,6 @@ const themeDefaults = {
     },
     link: {
         underline: true,
-        link: true,
         sans: true,
     },
     listItem: {
@@ -4709,6 +4687,32 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
     typography: defaultTypographyThemes,
 }, themeDefaults.code, CODE_CATEGORIES);
 
+/**
+ * Link-specific variant theme that handles text colors
+ * using link color variables directly (not through the appearance system).
+ *
+ * This allows Link component colors to be customized independently
+ * from primary/secondary appearance colors.
+ */
+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)";
+    }
+    getClasses(extractedKeys) {
+        var _a;
+        // Handle transparent override
+        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) === 'transparent') {
+            return ['text-transparent'];
+        }
+        const variant = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.variant) !== null && _a !== void 0 ? _a : 'outline';
+        return [this[variant] || ''];
+    }
+}
+
 const isObject = (item) => {
     return item !== null && typeof item === 'object' && !Array.isArray(item);
 };
@@ -4843,14 +4847,14 @@ const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-f
 const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", FontSizeTheme.createForTitle(), mergeDefaults(themeDefaults.title, { semibold: true }), LineHeightTheme.createForTitle());
 // Text specific theme
 const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", new FontSizeTheme(), themeDefaults.text);
-// Link specific theme
+// Link specific theme - uses LinkVariantTheme for link-specific colors
 const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer", {
     size: {
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault(),
     },
     appearance: {
-        text: GenericVariantTheme.createTypographyTextTheme(),
+        text: new LinkVariantTheme(),
     },
     typography: defaultTypographyThemes,
     layout: defaultLayoutsThemes,