@windrun-huaiin/base-ui 14.0.0 → 14.0.2

package/dist/components/404-page.js

@@ -4,6 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var globalIcon = require('./global-icon.js');
 var React = require('react');
+var themeUtil = require('../lib/theme-util.js');
+var utils = require('@windrun-huaiin/lib/utils');
 
 function NotFoundPage({ siteIcon }) {
     const [glitchText, setGlitchText] = React.useState("404");
@@ -22,17 +24,17 @@ function NotFoundPage({ siteIcon }) {
         }, 600); // every 1.5 seconds
         return () => clearInterval(interval);
     }, []);
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[75vh] w-full px-4 py-8", children: [jsxRuntime.jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxRuntime.jsxs("div", { className: "relative flex justify-center", children: [jsxRuntime.jsx("h1", { className: "text-8xl md:text-9xl font-bold bg-linear-to-r from-purple-600 via-pink-500 to-purple-700 bg-clip-text text-transparent select-none", style: {
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[75vh] w-full px-4 py-8", children: [jsxRuntime.jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxRuntime.jsxs("div", { className: "relative flex justify-center", children: [jsxRuntime.jsx("h1", { className: utils.cn("text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none", themeUtil.themeButtonGradientClass), style: {
                                     fontFamily: "Montserrat, monospace",
                                     textShadow: "0 0 30px rgba(172, 98, 253, 0.3)",
                                     letterSpacing: "0.1em",
-                                }, children: glitchText }), jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsxRuntime.jsx("div", { className: "h-full w-full bg-linear-to-b from-transparent via-purple-500/10 to-transparent animate-pulse" }) })] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsxRuntime.jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" })] }), jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [siteIcon, jsxRuntime.jsx("span", { children: "Woops!" })] }), jsxRuntime.jsx("div", { className: "w-1 h-1 bg-purple-500 rounded-full animate-ping" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [jsxRuntime.jsx(globalIcon.NotFoundIcon, {}), jsxRuntime.jsx("span", { children: "Error Code: 404" })] })] })] }), jsxRuntime.jsxs("div", { className: "fixed inset-0 pointer-events-none overflow-hidden -z-10", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
+                                }, children: glitchText }), jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsxRuntime.jsx("div", { className: utils.cn("h-full w-full bg-linear-to-b from-transparent to-transparent animate-pulse", themeUtil.themeViaColor) }) })] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsxRuntime.jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" })] }), jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [siteIcon, jsxRuntime.jsx("span", { children: "Woops!" })] }), jsxRuntime.jsx("div", { className: utils.cn("w-2 h-2 rounded-full animate-ping", themeUtil.themeBgColor) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [jsxRuntime.jsx(globalIcon.NotFoundIcon, {}), jsxRuntime.jsx("span", { children: "Error Code: 404" })] })] })] }), jsxRuntime.jsxs("div", { className: "fixed inset-0 pointer-events-none overflow-hidden -z-10", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
                             backgroundImage: `
                 linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
               `,
                             backgroundSize: "50px 50px",
-                        } }), Array.from({ length: 6 }).map((_, i) => (jsxRuntime.jsx("div", { className: "absolute w-2 h-2 bg-purple-500/20 rounded-full animate-bounce", style: {
+                        } }), Array.from({ length: 6 }).map((_, i) => (jsxRuntime.jsx("div", { className: utils.cn("absolute w-2 h-2 rounded-full animate-bounce", themeUtil.themeBgColor), style: {
                             left: `${20 + i * 15}%`,
                             top: `${30 + (i % 3) * 20}%`,
                             animationDelay: `${i * 0.5}s`,

package/dist/components/404-page.mjs

@@ -2,6 +2,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { NotFoundIcon } from './global-icon.mjs';
 import { useState, useEffect } from 'react';
+import { themeButtonGradientClass, themeViaColor, themeBgColor } from '../lib/theme-util.mjs';
+import { cn } from '@windrun-huaiin/lib/utils';
 
 function NotFoundPage({ siteIcon }) {
     const [glitchText, setGlitchText] = useState("404");
@@ -20,17 +22,17 @@ function NotFoundPage({ siteIcon }) {
         }, 600); // every 1.5 seconds
         return () => clearInterval(interval);
     }, []);
-    return (jsxs("div", { className: "flex flex-col items-center justify-center min-h-[75vh] w-full px-4 py-8", children: [jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxs("div", { className: "relative flex justify-center", children: [jsx("h1", { className: "text-8xl md:text-9xl font-bold bg-linear-to-r from-purple-600 via-pink-500 to-purple-700 bg-clip-text text-transparent select-none", style: {
+    return (jsxs("div", { className: "flex flex-col items-center justify-center min-h-[75vh] w-full px-4 py-8", children: [jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxs("div", { className: "relative flex justify-center", children: [jsx("h1", { className: cn("text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none", themeButtonGradientClass), style: {
                                     fontFamily: "Montserrat, monospace",
                                     textShadow: "0 0 30px rgba(172, 98, 253, 0.3)",
                                     letterSpacing: "0.1em",
-                                }, children: glitchText }), jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsx("div", { className: "h-full w-full bg-linear-to-b from-transparent via-purple-500/10 to-transparent animate-pulse" }) })] }), jsxs("div", { className: "space-y-4", children: [jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" })] }), jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [siteIcon, jsx("span", { children: "Woops!" })] }), jsx("div", { className: "w-1 h-1 bg-purple-500 rounded-full animate-ping" }), jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [jsx(NotFoundIcon, {}), jsx("span", { children: "Error Code: 404" })] })] })] }), jsxs("div", { className: "fixed inset-0 pointer-events-none overflow-hidden -z-10", children: [jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
+                                }, children: glitchText }), jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsx("div", { className: cn("h-full w-full bg-linear-to-b from-transparent to-transparent animate-pulse", themeViaColor) }) })] }), jsxs("div", { className: "space-y-4", children: [jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" })] }), jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [siteIcon, jsx("span", { children: "Woops!" })] }), jsx("div", { className: cn("w-2 h-2 rounded-full animate-ping", themeBgColor) }), jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [jsx(NotFoundIcon, {}), jsx("span", { children: "Error Code: 404" })] })] })] }), jsxs("div", { className: "fixed inset-0 pointer-events-none overflow-hidden -z-10", children: [jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
                             backgroundImage: `
                 linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
               `,
                             backgroundSize: "50px 50px",
-                        } }), Array.from({ length: 6 }).map((_, i) => (jsx("div", { className: "absolute w-2 h-2 bg-purple-500/20 rounded-full animate-bounce", style: {
+                        } }), Array.from({ length: 6 }).map((_, i) => (jsx("div", { className: cn("absolute w-2 h-2 rounded-full animate-bounce", themeBgColor), style: {
                             left: `${20 + i * 15}%`,
                             top: `${30 + (i % 3) * 20}%`,
                             animationDelay: `${i * 0.5}s`,

package/dist/components/global-icon.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../assets/index.js');
 var themeUtil = require('../lib/theme-util.js');
+var utils = require('@windrun-huaiin/lib/utils');
 var limitedLucideIcons = require('./limited-lucide-icons.js');
 var React = require('react');
 
@@ -107,10 +108,10 @@ function getIconElement(icon) {
     return getGlobalIcon(icon, true);
 }
 // Define the default site icon as a functional component (for export)
-const DefaultSiteIcon = () => (jsxRuntime.jsx(globalLucideIcons.Zap, { className: `h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border border-purple-500 ring-purple-500/20 ${themeUtil.themeIconColor}` }));
+const DefaultSiteIcon = () => (jsxRuntime.jsx(globalLucideIcons.Zap, { className: utils.cn("h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border", themeUtil.themeBorderColor, themeUtil.themeRingColor, themeUtil.themeIconColor) }));
 // Note: SiteIcon is available from @base-ui/lib/site-icon as a separate client component
 // Define 404 not found icon as a functional component (fixed, no configuration)
-const NotFoundIcon = () => (jsxRuntime.jsx(globalLucideIcons.SquareTerminal, { className: `h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border border-purple-500 ring-purple-500/20 ${themeUtil.themeIconColor}` }));
+const NotFoundIcon = () => (jsxRuntime.jsx(globalLucideIcons.SquareTerminal, { className: utils.cn("h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border", themeUtil.themeBorderColor, themeUtil.themeRingColor, themeUtil.themeIconColor) }));
 
 exports.DefaultSiteIcon = DefaultSiteIcon;
 exports.NotFoundIcon = NotFoundIcon;

package/dist/components/global-icon.mjs

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { BUILTIN_ICON_COMPONENTS } from '../assets/index.mjs';
-import { themeIconColor, themeSvgIconSize } from '../lib/theme-util.mjs';
+import { themeBorderColor, themeRingColor, themeIconColor, themeSvgIconSize } from '../lib/theme-util.mjs';
+import { cn } from '@windrun-huaiin/lib/utils';
 import * as limitedLucideIcons from './limited-lucide-icons.mjs';
 import React__default from 'react';
 
@@ -105,9 +106,9 @@ function getIconElement(icon) {
     return getGlobalIcon(icon, true);
 }
 // Define the default site icon as a functional component (for export)
-const DefaultSiteIcon = () => (jsx(globalLucideIcons.Zap, { className: `h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border border-purple-500 ring-purple-500/20 ${themeIconColor}` }));
+const DefaultSiteIcon = () => (jsx(globalLucideIcons.Zap, { className: cn("h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border", themeBorderColor, themeRingColor, themeIconColor) }));
 // Note: SiteIcon is available from @base-ui/lib/site-icon as a separate client component
 // Define 404 not found icon as a functional component (fixed, no configuration)
-const NotFoundIcon = () => (jsx(globalLucideIcons.SquareTerminal, { className: `h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border border-purple-500 ring-purple-500/20 ${themeIconColor}` }));
+const NotFoundIcon = () => (jsx(globalLucideIcons.SquareTerminal, { className: cn("h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border", themeBorderColor, themeRingColor, themeIconColor) }));
 
 export { DefaultSiteIcon, NotFoundIcon, getGlobalIcon, getIconElement, globalLucideIcons };

package/dist/lib/index.js

@@ -7,16 +7,25 @@ var themeUtil = require('./theme-util.js');
 exports.THEME_BUTTON_GRADIENT_CLASS_MAP = themeUtil.THEME_BUTTON_GRADIENT_CLASS_MAP;
 exports.THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = themeUtil.THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP;
 exports.THEME_COLOR_HEX_MAP = themeUtil.THEME_COLOR_HEX_MAP;
+exports.THEME_COLOR_NAME_TO_BG_CLASS_MAP = themeUtil.THEME_COLOR_NAME_TO_BG_CLASS_MAP;
+exports.THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = themeUtil.THEME_COLOR_NAME_TO_BORDER_CLASS_MAP;
 exports.THEME_COLOR_NAME_TO_CLASS_MAP = themeUtil.THEME_COLOR_NAME_TO_CLASS_MAP;
+exports.THEME_COLOR_NAME_TO_RING_CLASS_MAP = themeUtil.THEME_COLOR_NAME_TO_RING_CLASS_MAP;
+exports.THEME_COLOR_NAME_TO_VIA_CLASS_MAP = themeUtil.THEME_COLOR_NAME_TO_VIA_CLASS_MAP;
 exports.THEME_HERO_EYES_ON_CLASS_MAP = themeUtil.THEME_HERO_EYES_ON_CLASS_MAP;
 exports.THEME_RICH_TEXT_MARK_CLASS_MAP = themeUtil.THEME_RICH_TEXT_MARK_CLASS_MAP;
 exports.__SUPPORTED_THEME_COLORS = themeUtil.__SUPPORTED_THEME_COLORS;
+exports.themeBgColor = themeUtil.themeBgColor;
+exports.themeBorderColor = themeUtil.themeBorderColor;
 exports.themeButtonGradientClass = themeUtil.themeButtonGradientClass;
 exports.themeButtonGradientHoverClass = themeUtil.themeButtonGradientHoverClass;
 exports.themeHeroEyesOnClass = themeUtil.themeHeroEyesOnClass;
 exports.themeIconColor = themeUtil.themeIconColor;
+exports.themeName = themeUtil.themeName;
 exports.themeRichTextMarkClass = themeUtil.themeRichTextMarkClass;
+exports.themeRingColor = themeUtil.themeRingColor;
 exports.themeSvgIconColor = themeUtil.themeSvgIconColor;
 exports.themeSvgIconSize = themeUtil.themeSvgIconSize;
+exports.themeViaColor = themeUtil.themeViaColor;
 exports.validateThemeColor = themeUtil.validateThemeColor;
 exports.validateThemeName = themeUtil.validateThemeName;

package/dist/lib/index.mjs

@@ -1 +1 @@
-export { THEME_BUTTON_GRADIENT_CLASS_MAP, THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP, THEME_COLOR_HEX_MAP, THEME_COLOR_NAME_TO_CLASS_MAP, THEME_HERO_EYES_ON_CLASS_MAP, THEME_RICH_TEXT_MARK_CLASS_MAP, __SUPPORTED_THEME_COLORS, themeButtonGradientClass, themeButtonGradientHoverClass, themeHeroEyesOnClass, themeIconColor, themeRichTextMarkClass, themeSvgIconColor, themeSvgIconSize, validateThemeColor, validateThemeName } from './theme-util.mjs';
+export { THEME_BUTTON_GRADIENT_CLASS_MAP, THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP, THEME_COLOR_HEX_MAP, THEME_COLOR_NAME_TO_BG_CLASS_MAP, THEME_COLOR_NAME_TO_BORDER_CLASS_MAP, THEME_COLOR_NAME_TO_CLASS_MAP, THEME_COLOR_NAME_TO_RING_CLASS_MAP, THEME_COLOR_NAME_TO_VIA_CLASS_MAP, THEME_HERO_EYES_ON_CLASS_MAP, THEME_RICH_TEXT_MARK_CLASS_MAP, __SUPPORTED_THEME_COLORS, themeBgColor, themeBorderColor, themeButtonGradientClass, themeButtonGradientHoverClass, themeHeroEyesOnClass, themeIconColor, themeName, themeRichTextMarkClass, themeRingColor, themeSvgIconColor, themeSvgIconSize, themeViaColor, validateThemeColor, validateThemeName } from './theme-util.mjs';

package/dist/lib/theme-util.d.ts

@@ -3,11 +3,62 @@
  * Maintainer: xxx
  * Note:
  * 1. Static color classes for Tailwind CSS 4.x scanning
- * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (Tailwind class only)
+ * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (simple theme name only)
  * 3. Premium/elegant color system (uppercase hex values)
  */
-export type SupportedThemeColor = keyof typeof THEME_COLOR_HEX_MAP;
-export type SupportedThemeName = keyof typeof THEME_COLOR_NAME_TO_CLASS_MAP;
+declare const THEME_COLOR_META_MAP: Readonly<{
+    readonly purple: {
+        readonly label: "典雅紫·清";
+        readonly textColor: "text-purple-500";
+        readonly bgColor: "bg-purple-500/20";
+        readonly viaColor: "via-purple-500/20";
+        readonly ringColor: "ring-purple-500/20";
+        readonly borderColor: "border-purple-500";
+        readonly hex: "#AC62FD";
+    };
+    readonly orange: {
+        readonly label: "轻奢橙·暖";
+        readonly textColor: "text-orange-500";
+        readonly bgColor: "bg-orange-500/20";
+        readonly viaColor: "via-orange-500/20";
+        readonly ringColor: "ring-orange-500/20";
+        readonly borderColor: "border-orange-500";
+        readonly hex: "#F97316";
+    };
+    readonly indigo: {
+        readonly label: "沉稳蓝·冷";
+        readonly textColor: "text-indigo-500";
+        readonly bgColor: "bg-indigo-500/20";
+        readonly viaColor: "via-indigo-500/20";
+        readonly ringColor: "ring-indigo-500/20";
+        readonly borderColor: "border-indigo-500";
+        readonly hex: "#6366F1";
+    };
+    readonly emerald: {
+        readonly label: "温润绿·愈";
+        readonly textColor: "text-emerald-500";
+        readonly bgColor: "bg-emerald-500/20";
+        readonly viaColor: "via-emerald-500/20";
+        readonly ringColor: "ring-emerald-500/20";
+        readonly borderColor: "border-emerald-500";
+        readonly hex: "#10B981";
+    };
+    readonly rose: {
+        readonly label: "玫瑰红·柔";
+        readonly textColor: "text-rose-500";
+        readonly bgColor: "bg-rose-500/20";
+        readonly viaColor: "via-rose-500/20";
+        readonly ringColor: "ring-rose-500/20";
+        readonly borderColor: "border-rose-500";
+        readonly hex: "#F43F5E";
+    };
+}>;
+export type SupportedThemeName = keyof typeof THEME_COLOR_META_MAP;
+export type SupportedThemeColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["textColor"];
+export type SupportedThemeBgColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["bgColor"];
+export type SupportedThemeViaColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["viaColor"];
+export type SupportedThemeRingColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["ringColor"];
+export type SupportedThemeBorderColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["borderColor"];
 export declare const __SUPPORTED_THEME_COLORS: Readonly<{
     readonly "text-purple-500": "典雅紫·清";
     readonly "text-orange-500": "轻奢橙·暖";
@@ -29,9 +80,42 @@ export declare const THEME_COLOR_NAME_TO_CLASS_MAP: Readonly<{
     readonly emerald: "text-emerald-500";
     readonly rose: "text-rose-500";
 }>;
+export declare const THEME_COLOR_NAME_TO_BG_CLASS_MAP: Readonly<{
+    readonly purple: "bg-purple-500/20";
+    readonly orange: "bg-orange-500/20";
+    readonly indigo: "bg-indigo-500/20";
+    readonly emerald: "bg-emerald-500/20";
+    readonly rose: "bg-rose-500/20";
+}>;
+export declare const THEME_COLOR_NAME_TO_VIA_CLASS_MAP: Readonly<{
+    readonly purple: "via-purple-500/20";
+    readonly orange: "via-orange-500/20";
+    readonly indigo: "via-indigo-500/20";
+    readonly emerald: "via-emerald-500/20";
+    readonly rose: "via-rose-500/20";
+}>;
+export declare const THEME_COLOR_NAME_TO_RING_CLASS_MAP: Readonly<{
+    readonly purple: "ring-purple-500/20";
+    readonly orange: "ring-orange-500/20";
+    readonly indigo: "ring-indigo-500/20";
+    readonly emerald: "ring-emerald-500/20";
+    readonly rose: "ring-rose-500/20";
+}>;
+export declare const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP: Readonly<{
+    readonly purple: "border-purple-500";
+    readonly orange: "border-orange-500";
+    readonly indigo: "border-indigo-500";
+    readonly emerald: "border-emerald-500";
+    readonly rose: "border-rose-500";
+}>;
 export declare const validateThemeColor: (colorClass: string) => colorClass is SupportedThemeColor;
 export declare const validateThemeName: (colorName: string) => colorName is SupportedThemeName;
+export declare const themeName: SupportedThemeName;
 export declare const themeIconColor: SupportedThemeColor;
+export declare const themeBgColor: SupportedThemeBgColor;
+export declare const themeViaColor: SupportedThemeViaColor;
+export declare const themeRingColor: SupportedThemeRingColor;
+export declare const themeBorderColor: SupportedThemeBorderColor;
 export declare const themeSvgIconColor: "#AC62FD" | "#F97316" | "#6366F1" | "#10B981" | "#F43F5E";
 export declare const themeSvgIconSize: string | number;
 export declare const THEME_BUTTON_GRADIENT_CLASS_MAP: Readonly<{
@@ -66,3 +150,4 @@ export declare const THEME_RICH_TEXT_MARK_CLASS_MAP: Readonly<{
     readonly "text-rose-500": "bg-rose-300 dark:bg-rose-600";
 }>;
 export declare const themeRichTextMarkClass: "bg-purple-300 dark:bg-purple-600" | "bg-orange-300 dark:bg-orange-600" | "bg-indigo-300 dark:bg-indigo-600" | "bg-emerald-300 dark:bg-emerald-600" | "bg-rose-300 dark:bg-rose-600";
+export {};

package/dist/lib/theme-util.js

@@ -5,32 +5,107 @@
  * Maintainer: xxx
  * Note:
  * 1. Static color classes for Tailwind CSS 4.x scanning
- * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (Tailwind class only)
+ * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (simple theme name only)
  * 3. Premium/elegant color system (uppercase hex values)
  */
+const THEME_COLOR_META_MAP = Object.freeze({
+    purple: {
+        label: "典雅紫·清",
+        textColor: "text-purple-500",
+        bgColor: "bg-purple-500/20",
+        viaColor: "via-purple-500/20",
+        ringColor: "ring-purple-500/20",
+        borderColor: "border-purple-500",
+        hex: "#AC62FD",
+    },
+    orange: {
+        label: "轻奢橙·暖",
+        textColor: "text-orange-500",
+        bgColor: "bg-orange-500/20",
+        viaColor: "via-orange-500/20",
+        ringColor: "ring-orange-500/20",
+        borderColor: "border-orange-500",
+        hex: "#F97316",
+    },
+    indigo: {
+        label: "沉稳蓝·冷",
+        textColor: "text-indigo-500",
+        bgColor: "bg-indigo-500/20",
+        viaColor: "via-indigo-500/20",
+        ringColor: "ring-indigo-500/20",
+        borderColor: "border-indigo-500",
+        hex: "#6366F1",
+    },
+    emerald: {
+        label: "温润绿·愈",
+        textColor: "text-emerald-500",
+        bgColor: "bg-emerald-500/20",
+        viaColor: "via-emerald-500/20",
+        ringColor: "ring-emerald-500/20",
+        borderColor: "border-emerald-500",
+        hex: "#10B981",
+    },
+    rose: {
+        label: "玫瑰红·柔",
+        textColor: "text-rose-500",
+        bgColor: "bg-rose-500/20",
+        viaColor: "via-rose-500/20",
+        ringColor: "ring-rose-500/20",
+        borderColor: "border-rose-500",
+        hex: "#F43F5E",
+    },
+});
 // Supported theme color classes (static for Tailwind scan)
 const __SUPPORTED_THEME_COLORS = Object.freeze({
-    "text-purple-500": "典雅紫·清",
-    "text-orange-500": "轻奢橙·暖",
-    "text-indigo-500": "沉稳蓝·冷",
-    "text-emerald-500": "温润绿·愈",
-    "text-rose-500": "玫瑰红·柔"
+    "text-purple-500": THEME_COLOR_META_MAP.purple.label,
+    "text-orange-500": THEME_COLOR_META_MAP.orange.label,
+    "text-indigo-500": THEME_COLOR_META_MAP.indigo.label,
+    "text-emerald-500": THEME_COLOR_META_MAP.emerald.label,
+    "text-rose-500": THEME_COLOR_META_MAP.rose.label,
 });
 // Hex color map (uppercase, match Tailwind classes)
 const THEME_COLOR_HEX_MAP = Object.freeze({
-    "text-purple-500": "#AC62FD",
-    "text-orange-500": "#F97316",
-    "text-indigo-500": "#6366F1",
-    "text-emerald-500": "#10B981",
-    "text-rose-500": "#F43F5E",
+    "text-purple-500": THEME_COLOR_META_MAP.purple.hex,
+    "text-orange-500": THEME_COLOR_META_MAP.orange.hex,
+    "text-indigo-500": THEME_COLOR_META_MAP.indigo.hex,
+    "text-emerald-500": THEME_COLOR_META_MAP.emerald.hex,
+    "text-rose-500": THEME_COLOR_META_MAP.rose.hex,
 });
 // Short theme names for env configuration
 const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
-    purple: "text-purple-500",
-    orange: "text-orange-500",
-    indigo: "text-indigo-500",
-    emerald: "text-emerald-500",
-    rose: "text-rose-500",
+    purple: THEME_COLOR_META_MAP.purple.textColor,
+    orange: THEME_COLOR_META_MAP.orange.textColor,
+    indigo: THEME_COLOR_META_MAP.indigo.textColor,
+    emerald: THEME_COLOR_META_MAP.emerald.textColor,
+    rose: THEME_COLOR_META_MAP.rose.textColor,
+});
+const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.bgColor,
+    orange: THEME_COLOR_META_MAP.orange.bgColor,
+    indigo: THEME_COLOR_META_MAP.indigo.bgColor,
+    emerald: THEME_COLOR_META_MAP.emerald.bgColor,
+    rose: THEME_COLOR_META_MAP.rose.bgColor,
+});
+const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.viaColor,
+    orange: THEME_COLOR_META_MAP.orange.viaColor,
+    indigo: THEME_COLOR_META_MAP.indigo.viaColor,
+    emerald: THEME_COLOR_META_MAP.emerald.viaColor,
+    rose: THEME_COLOR_META_MAP.rose.viaColor,
+});
+const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.ringColor,
+    orange: THEME_COLOR_META_MAP.orange.ringColor,
+    indigo: THEME_COLOR_META_MAP.indigo.ringColor,
+    emerald: THEME_COLOR_META_MAP.emerald.ringColor,
+    rose: THEME_COLOR_META_MAP.rose.ringColor,
+});
+const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.borderColor,
+    orange: THEME_COLOR_META_MAP.orange.borderColor,
+    indigo: THEME_COLOR_META_MAP.indigo.borderColor,
+    emerald: THEME_COLOR_META_MAP.emerald.borderColor,
+    rose: THEME_COLOR_META_MAP.rose.borderColor,
 });
 // Validate theme color class (type guard)
 const validateThemeColor = (colorClass) => {
@@ -39,24 +114,25 @@ const validateThemeColor = (colorClass) => {
 const validateThemeName = (colorName) => {
     return Object.prototype.hasOwnProperty.call(THEME_COLOR_NAME_TO_CLASS_MAP, colorName);
 };
-// Theme icon text color (type-safe, global)
-const themeIconColor = (() => {
+// Theme name configured from env, only supports simple names like purple/orange
+const themeName = (() => {
     const envColorRaw = process.env.NEXT_PUBLIC_STYLE_ICON_COLOR;
     const envColor = envColorRaw === null || envColorRaw === void 0 ? void 0 : envColorRaw.trim().toLowerCase();
     if (envColor) {
         if (validateThemeName(envColor)) {
-            return THEME_COLOR_NAME_TO_CLASS_MAP[envColor];
-        }
-        // backward compatible: allow old full tailwind class value
-        if (validateThemeColor(envColor)) {
             return envColor;
         }
     }
-    console.warn(`[ThemeUtil] Invalid NEXT_PUBLIC_STYLE_ICON_COLOR: ${envColorRaw}. Fallback to text-purple-500.
-    Supported names: ${Object.keys(THEME_COLOR_NAME_TO_CLASS_MAP).join(", ")}
-    Supported classes(legacy): ${Object.keys(THEME_COLOR_HEX_MAP).join(", ")}`);
-    return "text-purple-500";
+    console.warn(`[ThemeUtil] Invalid NEXT_PUBLIC_STYLE_ICON_COLOR: ${envColorRaw}. Fallback to purple.
+    Supported names: ${Object.keys(THEME_COLOR_NAME_TO_CLASS_MAP).join(", ")}`);
+    return "purple";
 })();
+// Theme icon text color (type-safe, global)
+const themeIconColor = THEME_COLOR_NAME_TO_CLASS_MAP[themeName];
+const themeBgColor = THEME_COLOR_NAME_TO_BG_CLASS_MAP[themeName];
+const themeViaColor = THEME_COLOR_NAME_TO_VIA_CLASS_MAP[themeName];
+const themeRingColor = THEME_COLOR_NAME_TO_RING_CLASS_MAP[themeName];
+const themeBorderColor = THEME_COLOR_NAME_TO_BORDER_CLASS_MAP[themeName];
 // SVG icon color (auto-derived, type-safe - NO any type)
 const themeSvgIconColor = THEME_COLOR_HEX_MAP[themeIconColor];
 // SVG icon size (global)
@@ -102,16 +178,25 @@ const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];
 exports.THEME_BUTTON_GRADIENT_CLASS_MAP = THEME_BUTTON_GRADIENT_CLASS_MAP;
 exports.THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP;
 exports.THEME_COLOR_HEX_MAP = THEME_COLOR_HEX_MAP;
+exports.THEME_COLOR_NAME_TO_BG_CLASS_MAP = THEME_COLOR_NAME_TO_BG_CLASS_MAP;
+exports.THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = THEME_COLOR_NAME_TO_BORDER_CLASS_MAP;
 exports.THEME_COLOR_NAME_TO_CLASS_MAP = THEME_COLOR_NAME_TO_CLASS_MAP;
+exports.THEME_COLOR_NAME_TO_RING_CLASS_MAP = THEME_COLOR_NAME_TO_RING_CLASS_MAP;
+exports.THEME_COLOR_NAME_TO_VIA_CLASS_MAP = THEME_COLOR_NAME_TO_VIA_CLASS_MAP;
 exports.THEME_HERO_EYES_ON_CLASS_MAP = THEME_HERO_EYES_ON_CLASS_MAP;
 exports.THEME_RICH_TEXT_MARK_CLASS_MAP = THEME_RICH_TEXT_MARK_CLASS_MAP;
 exports.__SUPPORTED_THEME_COLORS = __SUPPORTED_THEME_COLORS;
+exports.themeBgColor = themeBgColor;
+exports.themeBorderColor = themeBorderColor;
 exports.themeButtonGradientClass = themeButtonGradientClass;
 exports.themeButtonGradientHoverClass = themeButtonGradientHoverClass;
 exports.themeHeroEyesOnClass = themeHeroEyesOnClass;
 exports.themeIconColor = themeIconColor;
+exports.themeName = themeName;
 exports.themeRichTextMarkClass = themeRichTextMarkClass;
+exports.themeRingColor = themeRingColor;
 exports.themeSvgIconColor = themeSvgIconColor;
 exports.themeSvgIconSize = themeSvgIconSize;
+exports.themeViaColor = themeViaColor;
 exports.validateThemeColor = validateThemeColor;
 exports.validateThemeName = validateThemeName;

package/dist/lib/theme-util.mjs

@@ -3,32 +3,107 @@
  * Maintainer: xxx
  * Note:
  * 1. Static color classes for Tailwind CSS 4.x scanning
- * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (Tailwind class only)
+ * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (simple theme name only)
  * 3. Premium/elegant color system (uppercase hex values)
  */
+const THEME_COLOR_META_MAP = Object.freeze({
+    purple: {
+        label: "典雅紫·清",
+        textColor: "text-purple-500",
+        bgColor: "bg-purple-500/20",
+        viaColor: "via-purple-500/20",
+        ringColor: "ring-purple-500/20",
+        borderColor: "border-purple-500",
+        hex: "#AC62FD",
+    },
+    orange: {
+        label: "轻奢橙·暖",
+        textColor: "text-orange-500",
+        bgColor: "bg-orange-500/20",
+        viaColor: "via-orange-500/20",
+        ringColor: "ring-orange-500/20",
+        borderColor: "border-orange-500",
+        hex: "#F97316",
+    },
+    indigo: {
+        label: "沉稳蓝·冷",
+        textColor: "text-indigo-500",
+        bgColor: "bg-indigo-500/20",
+        viaColor: "via-indigo-500/20",
+        ringColor: "ring-indigo-500/20",
+        borderColor: "border-indigo-500",
+        hex: "#6366F1",
+    },
+    emerald: {
+        label: "温润绿·愈",
+        textColor: "text-emerald-500",
+        bgColor: "bg-emerald-500/20",
+        viaColor: "via-emerald-500/20",
+        ringColor: "ring-emerald-500/20",
+        borderColor: "border-emerald-500",
+        hex: "#10B981",
+    },
+    rose: {
+        label: "玫瑰红·柔",
+        textColor: "text-rose-500",
+        bgColor: "bg-rose-500/20",
+        viaColor: "via-rose-500/20",
+        ringColor: "ring-rose-500/20",
+        borderColor: "border-rose-500",
+        hex: "#F43F5E",
+    },
+});
 // Supported theme color classes (static for Tailwind scan)
 const __SUPPORTED_THEME_COLORS = Object.freeze({
-    "text-purple-500": "典雅紫·清",
-    "text-orange-500": "轻奢橙·暖",
-    "text-indigo-500": "沉稳蓝·冷",
-    "text-emerald-500": "温润绿·愈",
-    "text-rose-500": "玫瑰红·柔"
+    "text-purple-500": THEME_COLOR_META_MAP.purple.label,
+    "text-orange-500": THEME_COLOR_META_MAP.orange.label,
+    "text-indigo-500": THEME_COLOR_META_MAP.indigo.label,
+    "text-emerald-500": THEME_COLOR_META_MAP.emerald.label,
+    "text-rose-500": THEME_COLOR_META_MAP.rose.label,
 });
 // Hex color map (uppercase, match Tailwind classes)
 const THEME_COLOR_HEX_MAP = Object.freeze({
-    "text-purple-500": "#AC62FD",
-    "text-orange-500": "#F97316",
-    "text-indigo-500": "#6366F1",
-    "text-emerald-500": "#10B981",
-    "text-rose-500": "#F43F5E",
+    "text-purple-500": THEME_COLOR_META_MAP.purple.hex,
+    "text-orange-500": THEME_COLOR_META_MAP.orange.hex,
+    "text-indigo-500": THEME_COLOR_META_MAP.indigo.hex,
+    "text-emerald-500": THEME_COLOR_META_MAP.emerald.hex,
+    "text-rose-500": THEME_COLOR_META_MAP.rose.hex,
 });
 // Short theme names for env configuration
 const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
-    purple: "text-purple-500",
-    orange: "text-orange-500",
-    indigo: "text-indigo-500",
-    emerald: "text-emerald-500",
-    rose: "text-rose-500",
+    purple: THEME_COLOR_META_MAP.purple.textColor,
+    orange: THEME_COLOR_META_MAP.orange.textColor,
+    indigo: THEME_COLOR_META_MAP.indigo.textColor,
+    emerald: THEME_COLOR_META_MAP.emerald.textColor,
+    rose: THEME_COLOR_META_MAP.rose.textColor,
+});
+const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.bgColor,
+    orange: THEME_COLOR_META_MAP.orange.bgColor,
+    indigo: THEME_COLOR_META_MAP.indigo.bgColor,
+    emerald: THEME_COLOR_META_MAP.emerald.bgColor,
+    rose: THEME_COLOR_META_MAP.rose.bgColor,
+});
+const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.viaColor,
+    orange: THEME_COLOR_META_MAP.orange.viaColor,
+    indigo: THEME_COLOR_META_MAP.indigo.viaColor,
+    emerald: THEME_COLOR_META_MAP.emerald.viaColor,
+    rose: THEME_COLOR_META_MAP.rose.viaColor,
+});
+const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.ringColor,
+    orange: THEME_COLOR_META_MAP.orange.ringColor,
+    indigo: THEME_COLOR_META_MAP.indigo.ringColor,
+    emerald: THEME_COLOR_META_MAP.emerald.ringColor,
+    rose: THEME_COLOR_META_MAP.rose.ringColor,
+});
+const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
+    purple: THEME_COLOR_META_MAP.purple.borderColor,
+    orange: THEME_COLOR_META_MAP.orange.borderColor,
+    indigo: THEME_COLOR_META_MAP.indigo.borderColor,
+    emerald: THEME_COLOR_META_MAP.emerald.borderColor,
+    rose: THEME_COLOR_META_MAP.rose.borderColor,
 });
 // Validate theme color class (type guard)
 const validateThemeColor = (colorClass) => {
@@ -37,24 +112,25 @@ const validateThemeColor = (colorClass) => {
 const validateThemeName = (colorName) => {
     return Object.prototype.hasOwnProperty.call(THEME_COLOR_NAME_TO_CLASS_MAP, colorName);
 };
-// Theme icon text color (type-safe, global)
-const themeIconColor = (() => {
+// Theme name configured from env, only supports simple names like purple/orange
+const themeName = (() => {
     const envColorRaw = process.env.NEXT_PUBLIC_STYLE_ICON_COLOR;
     const envColor = envColorRaw === null || envColorRaw === void 0 ? void 0 : envColorRaw.trim().toLowerCase();
     if (envColor) {
         if (validateThemeName(envColor)) {
-            return THEME_COLOR_NAME_TO_CLASS_MAP[envColor];
-        }
-        // backward compatible: allow old full tailwind class value
-        if (validateThemeColor(envColor)) {
             return envColor;
         }
     }
-    console.warn(`[ThemeUtil] Invalid NEXT_PUBLIC_STYLE_ICON_COLOR: ${envColorRaw}. Fallback to text-purple-500.
-    Supported names: ${Object.keys(THEME_COLOR_NAME_TO_CLASS_MAP).join(", ")}
-    Supported classes(legacy): ${Object.keys(THEME_COLOR_HEX_MAP).join(", ")}`);
-    return "text-purple-500";
+    console.warn(`[ThemeUtil] Invalid NEXT_PUBLIC_STYLE_ICON_COLOR: ${envColorRaw}. Fallback to purple.
+    Supported names: ${Object.keys(THEME_COLOR_NAME_TO_CLASS_MAP).join(", ")}`);
+    return "purple";
 })();
+// Theme icon text color (type-safe, global)
+const themeIconColor = THEME_COLOR_NAME_TO_CLASS_MAP[themeName];
+const themeBgColor = THEME_COLOR_NAME_TO_BG_CLASS_MAP[themeName];
+const themeViaColor = THEME_COLOR_NAME_TO_VIA_CLASS_MAP[themeName];
+const themeRingColor = THEME_COLOR_NAME_TO_RING_CLASS_MAP[themeName];
+const themeBorderColor = THEME_COLOR_NAME_TO_BORDER_CLASS_MAP[themeName];
 // SVG icon color (auto-derived, type-safe - NO any type)
 const themeSvgIconColor = THEME_COLOR_HEX_MAP[themeIconColor];
 // SVG icon size (global)
@@ -97,4 +173,4 @@ const THEME_RICH_TEXT_MARK_CLASS_MAP = Object.freeze({
 });
 const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];
 
-export { THEME_BUTTON_GRADIENT_CLASS_MAP, THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP, THEME_COLOR_HEX_MAP, THEME_COLOR_NAME_TO_CLASS_MAP, THEME_HERO_EYES_ON_CLASS_MAP, THEME_RICH_TEXT_MARK_CLASS_MAP, __SUPPORTED_THEME_COLORS, themeButtonGradientClass, themeButtonGradientHoverClass, themeHeroEyesOnClass, themeIconColor, themeRichTextMarkClass, themeSvgIconColor, themeSvgIconSize, validateThemeColor, validateThemeName };
+export { THEME_BUTTON_GRADIENT_CLASS_MAP, THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP, THEME_COLOR_HEX_MAP, THEME_COLOR_NAME_TO_BG_CLASS_MAP, THEME_COLOR_NAME_TO_BORDER_CLASS_MAP, THEME_COLOR_NAME_TO_CLASS_MAP, THEME_COLOR_NAME_TO_RING_CLASS_MAP, THEME_COLOR_NAME_TO_VIA_CLASS_MAP, THEME_HERO_EYES_ON_CLASS_MAP, THEME_RICH_TEXT_MARK_CLASS_MAP, __SUPPORTED_THEME_COLORS, themeBgColor, themeBorderColor, themeButtonGradientClass, themeButtonGradientHoverClass, themeHeroEyesOnClass, themeIconColor, themeName, themeRichTextMarkClass, themeRingColor, themeSvgIconColor, themeSvgIconSize, themeViaColor, validateThemeColor, validateThemeName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/base-ui",
-  "version": "14.0.0",
+  "version": "14.0.2",
   "description": "Base UI components for windrun-huaiin projects",
   "type": "module",
   "exports": {

package/src/components/404-page.tsx

@@ -2,6 +2,8 @@
 
 import { NotFoundIcon } from "@base-ui/components/global-icon";
 import { useEffect, useState, type ReactNode } from "react";
+import { themeBgColor, themeViaColor, themeButtonGradientClass } from "@base-ui/lib";
+import { cn } from "@windrun-huaiin/lib/utils"; 
 
 interface NotFoundPageProps {
   siteIcon: ReactNode;
@@ -37,7 +39,7 @@ export function NotFoundPage({ siteIcon }: NotFoundPageProps) {
         {/* 404 number - glitch effect */}
         <div className="relative flex justify-center">
           <h1
-            className="text-8xl md:text-9xl font-bold bg-linear-to-r from-purple-600 via-pink-500 to-purple-700 bg-clip-text text-transparent select-none"
+            className={cn("text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none", themeButtonGradientClass)}
             style={{
               fontFamily: "Montserrat, monospace",
               textShadow: "0 0 30px rgba(172, 98, 253, 0.3)",
@@ -48,7 +50,7 @@ export function NotFoundPage({ siteIcon }: NotFoundPageProps) {
           </h1>
           {/* scan line effect */}
           <div className="absolute inset-0 pointer-events-none">
-            <div className="h-full w-full bg-linear-to-b from-transparent via-purple-500/10 to-transparent animate-pulse" />
+            <div className={cn("h-full w-full bg-linear-to-b from-transparent to-transparent animate-pulse", themeViaColor)} />
           </div>
         </div>
 
@@ -68,7 +70,7 @@ export function NotFoundPage({ siteIcon }: NotFoundPageProps) {
             {siteIcon}
             <span>Woops!</span>
           </div>
-          <div className="w-1 h-1 bg-purple-500 rounded-full animate-ping" />
+          <div className={cn("w-2 h-2 rounded-full animate-ping", themeBgColor)} />
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <NotFoundIcon />
             <span>Error Code: 404</span>
@@ -94,7 +96,7 @@ export function NotFoundPage({ siteIcon }: NotFoundPageProps) {
         {Array.from({ length: 6 }).map((_, i) => (
           <div
             key={i}
-            className="absolute w-2 h-2 bg-purple-500/20 rounded-full animate-bounce"
+            className={cn("absolute w-2 h-2 rounded-full animate-bounce", themeBgColor)}
             style={{
               left: `${20 + i * 15}%`,
               top: `${30 + (i % 3) * 20}%`,
@@ -106,4 +108,4 @@ export function NotFoundPage({ siteIcon }: NotFoundPageProps) {
       </div>
     </div>
   );
-}
+}

package/src/components/global-icon.tsx

@@ -6,8 +6,8 @@
 */
 
 import { BUILTIN_ICON_COMPONENTS } from '@base-ui/assets';
-import { themeIconColor, themeSvgIconSize } from '@base-ui/lib/theme-util';
-
+import { themeIconColor, themeSvgIconSize, themeBorderColor, themeRingColor } from '@base-ui/lib/theme-util';
+import { cn } from '@windrun-huaiin/lib/utils';
 import * as limitedIconsModule from '@base-ui/components/limited-lucide-icons';
 import { type LucideProps } from 'lucide-react';
 import React from 'react';
@@ -184,12 +184,12 @@ export function getIconElement(
 
 // Define the default site icon as a functional component (for export)
 export const DefaultSiteIcon = () => (
-  <globalLucideIcons.Zap className={`h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border border-purple-500 ring-purple-500/20 ${themeIconColor}`} />
+  <globalLucideIcons.Zap className={cn("h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border", themeBorderColor, themeRingColor, themeIconColor)} />
 );
 
 // Note: SiteIcon is available from @base-ui/lib/site-icon as a separate client component
 
 // Define 404 not found icon as a functional component (fixed, no configuration)
 export const NotFoundIcon = () => (
-  <globalLucideIcons.SquareTerminal className={`h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border border-purple-500 ring-purple-500/20 ${themeIconColor}`} />
+  <globalLucideIcons.SquareTerminal className={cn("h-8 w-8 rounded-full p-1 shadow-lg ring-0.5 border", themeBorderColor, themeRingColor, themeIconColor)} />
 ); 

package/src/lib/theme-util.ts

@@ -3,39 +3,122 @@
  * Maintainer: xxx
  * Note:
  * 1. Static color classes for Tailwind CSS 4.x scanning
- * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (Tailwind class only)
+ * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (simple theme name only)
  * 3. Premium/elegant color system (uppercase hex values)
  */
 
-// Define type for supported theme color classes (literal type)
-export type SupportedThemeColor = keyof typeof THEME_COLOR_HEX_MAP;
-export type SupportedThemeName = keyof typeof THEME_COLOR_NAME_TO_CLASS_MAP;
+const THEME_COLOR_META_MAP = Object.freeze({
+  purple: {
+    label: "典雅紫·清",
+    textColor: "text-purple-500",
+    bgColor: "bg-purple-500/20",
+    viaColor: "via-purple-500/20",
+    ringColor: "ring-purple-500/20",
+    borderColor: "border-purple-500",
+    hex: "#AC62FD",
+  },
+  orange: {
+    label: "轻奢橙·暖",
+    textColor: "text-orange-500",
+    bgColor: "bg-orange-500/20",
+    viaColor: "via-orange-500/20",
+    ringColor: "ring-orange-500/20",
+    borderColor: "border-orange-500",
+    hex: "#F97316",
+  },
+  indigo: {
+    label: "沉稳蓝·冷",
+    textColor: "text-indigo-500",
+    bgColor: "bg-indigo-500/20",
+    viaColor: "via-indigo-500/20",
+    ringColor: "ring-indigo-500/20",
+    borderColor: "border-indigo-500",
+    hex: "#6366F1",
+  },
+  emerald: {
+    label: "温润绿·愈",
+    textColor: "text-emerald-500",
+    bgColor: "bg-emerald-500/20",
+    viaColor: "via-emerald-500/20",
+    ringColor: "ring-emerald-500/20",
+    borderColor: "border-emerald-500",
+    hex: "#10B981",
+  },
+  rose: {
+    label: "玫瑰红·柔",
+    textColor: "text-rose-500",
+    bgColor: "bg-rose-500/20",
+    viaColor: "via-rose-500/20",
+    ringColor: "ring-rose-500/20",
+    borderColor: "border-rose-500",
+    hex: "#F43F5E",
+  },
+} as const);
+
+export type SupportedThemeName = keyof typeof THEME_COLOR_META_MAP;
+export type SupportedThemeColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["textColor"];
+export type SupportedThemeBgColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["bgColor"];
+export type SupportedThemeViaColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["viaColor"];
+export type SupportedThemeRingColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["ringColor"];
+export type SupportedThemeBorderColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["borderColor"];
 
 // Supported theme color classes (static for Tailwind scan)
 export const __SUPPORTED_THEME_COLORS = Object.freeze({
-  "text-purple-500": "典雅紫·清",
-  "text-orange-500": "轻奢橙·暖",
-  "text-indigo-500": "沉稳蓝·冷",
-  "text-emerald-500": "温润绿·愈",
-  "text-rose-500": "玫瑰红·柔"
+  "text-purple-500": THEME_COLOR_META_MAP.purple.label,
+  "text-orange-500": THEME_COLOR_META_MAP.orange.label,
+  "text-indigo-500": THEME_COLOR_META_MAP.indigo.label,
+  "text-emerald-500": THEME_COLOR_META_MAP.emerald.label,
+  "text-rose-500": THEME_COLOR_META_MAP.rose.label,
 } as const);
 
 // Hex color map (uppercase, match Tailwind classes)
 export const THEME_COLOR_HEX_MAP = Object.freeze({
-  "text-purple-500": "#AC62FD",
-  "text-orange-500": "#F97316",
-  "text-indigo-500": "#6366F1",
-  "text-emerald-500": "#10B981",
-  "text-rose-500": "#F43F5E",
+  "text-purple-500": THEME_COLOR_META_MAP.purple.hex,
+  "text-orange-500": THEME_COLOR_META_MAP.orange.hex,
+  "text-indigo-500": THEME_COLOR_META_MAP.indigo.hex,
+  "text-emerald-500": THEME_COLOR_META_MAP.emerald.hex,
+  "text-rose-500": THEME_COLOR_META_MAP.rose.hex,
 } as const);
 
 // Short theme names for env configuration
 export const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
-  purple: "text-purple-500",
-  orange: "text-orange-500",
-  indigo: "text-indigo-500",
-  emerald: "text-emerald-500",
-  rose: "text-rose-500",
+  purple: THEME_COLOR_META_MAP.purple.textColor,
+  orange: THEME_COLOR_META_MAP.orange.textColor,
+  indigo: THEME_COLOR_META_MAP.indigo.textColor,
+  emerald: THEME_COLOR_META_MAP.emerald.textColor,
+  rose: THEME_COLOR_META_MAP.rose.textColor,
+} as const);
+
+export const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
+  purple: THEME_COLOR_META_MAP.purple.bgColor,
+  orange: THEME_COLOR_META_MAP.orange.bgColor,
+  indigo: THEME_COLOR_META_MAP.indigo.bgColor,
+  emerald: THEME_COLOR_META_MAP.emerald.bgColor,
+  rose: THEME_COLOR_META_MAP.rose.bgColor,
+} as const);
+
+export const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
+  purple: THEME_COLOR_META_MAP.purple.viaColor,
+  orange: THEME_COLOR_META_MAP.orange.viaColor,
+  indigo: THEME_COLOR_META_MAP.indigo.viaColor,
+  emerald: THEME_COLOR_META_MAP.emerald.viaColor,
+  rose: THEME_COLOR_META_MAP.rose.viaColor,
+} as const);
+
+export const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
+  purple: THEME_COLOR_META_MAP.purple.ringColor,
+  orange: THEME_COLOR_META_MAP.orange.ringColor,
+  indigo: THEME_COLOR_META_MAP.indigo.ringColor,
+  emerald: THEME_COLOR_META_MAP.emerald.ringColor,
+  rose: THEME_COLOR_META_MAP.rose.ringColor,
+} as const);
+
+export const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
+  purple: THEME_COLOR_META_MAP.purple.borderColor,
+  orange: THEME_COLOR_META_MAP.orange.borderColor,
+  indigo: THEME_COLOR_META_MAP.indigo.borderColor,
+  emerald: THEME_COLOR_META_MAP.emerald.borderColor,
+  rose: THEME_COLOR_META_MAP.rose.borderColor,
 } as const);
 
 // Validate theme color class (type guard)
@@ -47,28 +130,31 @@ export const validateThemeName = (colorName: string): colorName is SupportedThem
   return Object.prototype.hasOwnProperty.call(THEME_COLOR_NAME_TO_CLASS_MAP, colorName);
 };
 
-// Theme icon text color (type-safe, global)
-export const themeIconColor: SupportedThemeColor = (() => {
+// Theme name configured from env, only supports simple names like purple/orange
+export const themeName: SupportedThemeName = (() => {
   const envColorRaw = process.env.NEXT_PUBLIC_STYLE_ICON_COLOR;
   const envColor = envColorRaw?.trim().toLowerCase();
+
   if (envColor) {
     if (validateThemeName(envColor)) {
-      return THEME_COLOR_NAME_TO_CLASS_MAP[envColor];
-    }
-    // backward compatible: allow old full tailwind class value
-    if (validateThemeColor(envColor)) {
       return envColor;
     }
   }
-  
+
   console.warn(
-    `[ThemeUtil] Invalid NEXT_PUBLIC_STYLE_ICON_COLOR: ${envColorRaw}. Fallback to text-purple-500.
-    Supported names: ${Object.keys(THEME_COLOR_NAME_TO_CLASS_MAP).join(", ")}
-    Supported classes(legacy): ${Object.keys(THEME_COLOR_HEX_MAP).join(", ")}`
+    `[ThemeUtil] Invalid NEXT_PUBLIC_STYLE_ICON_COLOR: ${envColorRaw}. Fallback to purple.
+    Supported names: ${Object.keys(THEME_COLOR_NAME_TO_CLASS_MAP).join(", ")}`
   );
-  return "text-purple-500";
+  return "purple";
 })();
 
+// Theme icon text color (type-safe, global)
+export const themeIconColor: SupportedThemeColor = THEME_COLOR_NAME_TO_CLASS_MAP[themeName];
+export const themeBgColor: SupportedThemeBgColor = THEME_COLOR_NAME_TO_BG_CLASS_MAP[themeName];
+export const themeViaColor: SupportedThemeViaColor = THEME_COLOR_NAME_TO_VIA_CLASS_MAP[themeName];
+export const themeRingColor: SupportedThemeRingColor = THEME_COLOR_NAME_TO_RING_CLASS_MAP[themeName];
+export const themeBorderColor: SupportedThemeBorderColor = THEME_COLOR_NAME_TO_BORDER_CLASS_MAP[themeName];
+
 // SVG icon color (auto-derived, type-safe - NO any type)
 export const themeSvgIconColor = THEME_COLOR_HEX_MAP[themeIconColor];