@windrun-huaiin/base-ui 31.0.0 → 31.0.1

package/README.md

@@ -19,6 +19,9 @@ Supported theme palettes:
 - `indigo`: `#6366F1`
 - `emerald`: `#48C892`
 - `rose`: `#F43F5E`
+- `clue`: `#1D9BF0`
+- `hose`: `#F91980`
+- `pika`: `#FFD400`
 
 Core module:
 
@@ -54,4 +57,4 @@ Supported providers:
 These components provide a consistent way to add analytics scripts to applications while keeping script setup centralized in the shared UI package.
 
 ## License
-MIT License
+MIT License

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

@@ -6,65 +6,21 @@
  * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (simple theme name only)
  * 3. Premium/elegant color system (uppercase hex values)
  */
-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 type SupportedThemeName = keyof typeof THEME_COLOR_NAME_TO_CLASS_MAP;
+export type SupportedThemeColor = (typeof THEME_COLOR_NAME_TO_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBgColor = (typeof THEME_COLOR_NAME_TO_BG_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeViaColor = (typeof THEME_COLOR_NAME_TO_VIA_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeRingColor = (typeof THEME_COLOR_NAME_TO_RING_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBorderColor = (typeof THEME_COLOR_NAME_TO_BORDER_CLASS_MAP)[SupportedThemeName];
 export declare const __SUPPORTED_THEME_COLORS: Readonly<{
     readonly "text-purple-500": "典雅紫·清";
     readonly "text-orange-500": "轻奢橙·暖";
     readonly "text-indigo-500": "沉稳蓝·冷";
     readonly "text-emerald-500": "温润绿·愈";
     readonly "text-rose-500": "玫瑰红·柔";
+    readonly "text-clue-500": "天空蓝·X";
+    readonly "text-hose-500": "睡莲红·X";
+    readonly "text-pika-500": "皮卡黄·X";
 }>;
 export declare const THEME_COLOR_HEX_MAP: Readonly<{
     readonly "text-purple-500": "#AC62FD";
@@ -72,6 +28,9 @@ export declare const THEME_COLOR_HEX_MAP: Readonly<{
     readonly "text-indigo-500": "#6366F1";
     readonly "text-emerald-500": "#10B981";
     readonly "text-rose-500": "#F43F5E";
+    readonly "text-clue-500": "#1D9BF0";
+    readonly "text-hose-500": "#F91980";
+    readonly "text-pika-500": "#FFD400";
 }>;
 export declare const THEME_COLOR_NAME_TO_CLASS_MAP: Readonly<{
     readonly purple: "text-purple-500";
@@ -79,6 +38,9 @@ export declare const THEME_COLOR_NAME_TO_CLASS_MAP: Readonly<{
     readonly indigo: "text-indigo-500";
     readonly emerald: "text-emerald-500";
     readonly rose: "text-rose-500";
+    readonly clue: "text-clue-500";
+    readonly hose: "text-hose-500";
+    readonly pika: "text-pika-500";
 }>;
 export declare const THEME_COLOR_NAME_TO_BG_CLASS_MAP: Readonly<{
     readonly purple: "bg-purple-500/20";
@@ -86,6 +48,9 @@ export declare const THEME_COLOR_NAME_TO_BG_CLASS_MAP: Readonly<{
     readonly indigo: "bg-indigo-500/20";
     readonly emerald: "bg-emerald-500/20";
     readonly rose: "bg-rose-500/20";
+    readonly clue: "bg-clue-500/20";
+    readonly hose: "bg-hose-500/20";
+    readonly pika: "bg-pika-500/20";
 }>;
 export declare const THEME_COLOR_NAME_TO_VIA_CLASS_MAP: Readonly<{
     readonly purple: "via-purple-500/20";
@@ -93,6 +58,9 @@ export declare const THEME_COLOR_NAME_TO_VIA_CLASS_MAP: Readonly<{
     readonly indigo: "via-indigo-500/20";
     readonly emerald: "via-emerald-500/20";
     readonly rose: "via-rose-500/20";
+    readonly clue: "via-clue-500/20";
+    readonly hose: "via-hose-500/20";
+    readonly pika: "via-pika-500/20";
 }>;
 export declare const THEME_COLOR_NAME_TO_RING_CLASS_MAP: Readonly<{
     readonly purple: "ring-purple-500/20";
@@ -100,6 +68,9 @@ export declare const THEME_COLOR_NAME_TO_RING_CLASS_MAP: Readonly<{
     readonly indigo: "ring-indigo-500/20";
     readonly emerald: "ring-emerald-500/20";
     readonly rose: "ring-rose-500/20";
+    readonly clue: "ring-clue-500/20";
+    readonly hose: "ring-hose-500/20";
+    readonly pika: "ring-pika-500/20";
 }>;
 export declare const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP: Readonly<{
     readonly purple: "border-purple-500";
@@ -107,6 +78,9 @@ export declare const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP: Readonly<{
     readonly indigo: "border-indigo-500";
     readonly emerald: "border-emerald-500";
     readonly rose: "border-rose-500";
+    readonly clue: "border-clue-500";
+    readonly hose: "border-hose-500";
+    readonly pika: "border-pika-500";
 }>;
 export declare const validateThemeColor: (colorClass: string) => colorClass is SupportedThemeColor;
 export declare const validateThemeName: (colorName: string) => colorName is SupportedThemeName;
@@ -117,7 +91,7 @@ export declare const themeViaColor: SupportedThemeViaColor;
 export declare const themeRingColor: SupportedThemeRingColor;
 export declare const themeBorderColor: SupportedThemeBorderColor;
 export declare const themeMainBgColor = "bg-neutral-100 dark:bg-neutral-900";
-export declare const themeSvgIconColor: "#AC62FD" | "#F97316" | "#6366F1" | "#10B981" | "#F43F5E";
+export declare const themeSvgIconColor: "#AC62FD" | "#F97316" | "#6366F1" | "#10B981" | "#F43F5E" | "#1D9BF0" | "#F91980" | "#FFD400";
 export declare const themeSvgIconSize: string | number;
 export declare const THEME_BUTTON_GRADIENT_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600";
@@ -125,6 +99,9 @@ export declare const THEME_BUTTON_GRADIENT_CLASS_MAP: Readonly<{
     readonly "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600";
     readonly "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600";
     readonly "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600";
+    readonly "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500";
+    readonly "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600";
+    readonly "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500";
 }>;
 export declare const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700";
@@ -132,23 +109,31 @@ export declare const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP: Readonly<{
     readonly "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700";
     readonly "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700";
     readonly "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700";
+    readonly "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600";
+    readonly "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700";
+    readonly "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600";
 }>;
-export declare const themeButtonGradientClass: "bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600" | "bg-linear-to-r from-orange-500 to-orange-600 dark:from-orange-500 dark:to-orange-700" | "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600";
-export declare const themeButtonGradientHoverClass: "hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700" | "hover:from-orange-500 hover:to-amber-600 dark:hover:from-orange-600 dark:hover:to-amber-700" | "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700" | "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700" | "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700";
+export declare const themeButtonGradientClass: "bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600" | "bg-linear-to-r from-orange-500 to-orange-600 dark:from-orange-500 dark:to-orange-700" | "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600" | "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500" | "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600" | "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500";
+export declare const themeButtonGradientHoverClass: "hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700" | "hover:from-orange-500 hover:to-amber-600 dark:hover:from-orange-600 dark:hover:to-amber-700" | "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700" | "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700" | "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700" | "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600" | "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700" | "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600";
 export declare const THEME_HERO_EYES_ON_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "bg-linear-to-r from-purple-400 to-pink-600";
     readonly "text-orange-500": "bg-linear-to-r from-orange-500 to-red-500";
     readonly "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600";
     readonly "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600";
     readonly "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600";
+    readonly "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500";
+    readonly "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600";
+    readonly "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600";
 }>;
-export declare const themeHeroEyesOnClass: "bg-linear-to-r from-purple-400 to-pink-600" | "bg-linear-to-r from-orange-500 to-red-500" | "bg-linear-to-r from-indigo-400 to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-600";
+export declare const themeHeroEyesOnClass: "bg-linear-to-r from-purple-400 to-pink-600" | "bg-linear-to-r from-orange-500 to-red-500" | "bg-linear-to-r from-indigo-400 to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-600" | "bg-linear-to-r from-sky-400 to-clue-500" | "bg-linear-to-r from-hose-500 to-pink-600" | "bg-linear-to-r from-pika-500 to-amber-600";
 export declare const THEME_RICH_TEXT_MARK_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "bg-purple-300 dark:bg-purple-600";
     readonly "text-orange-500": "bg-orange-300 dark:bg-orange-600";
     readonly "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600";
     readonly "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600";
     readonly "text-rose-500": "bg-rose-300 dark:bg-rose-600";
+    readonly "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60";
+    readonly "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60";
+    readonly "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70";
 }>;
-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 {};
+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" | "bg-clue-500/30 dark:bg-clue-500/60" | "bg-hose-500/30 dark:bg-hose-500/60" | "bg-pika-500/40 dark:bg-pika-500/70";

package/dist/lib/theme-util.js

@@ -54,6 +54,33 @@ const THEME_COLOR_META_MAP = Object.freeze({
         borderColor: "border-rose-500",
         hex: "#F43F5E",
     },
+    clue: {
+        label: "天空蓝·X",
+        textColor: "text-clue-500",
+        bgColor: "bg-clue-500/20",
+        viaColor: "via-clue-500/20",
+        ringColor: "ring-clue-500/20",
+        borderColor: "border-clue-500",
+        hex: "#1D9BF0",
+    },
+    hose: {
+        label: "睡莲红·X",
+        textColor: "text-hose-500",
+        bgColor: "bg-hose-500/20",
+        viaColor: "via-hose-500/20",
+        ringColor: "ring-hose-500/20",
+        borderColor: "border-hose-500",
+        hex: "#F91980",
+    },
+    pika: {
+        label: "皮卡黄·X",
+        textColor: "text-pika-500",
+        bgColor: "bg-pika-500/20",
+        viaColor: "via-pika-500/20",
+        ringColor: "ring-pika-500/20",
+        borderColor: "border-pika-500",
+        hex: "#FFD400",
+    },
 });
 // Supported theme color classes (static for Tailwind scan)
 const __SUPPORTED_THEME_COLORS = Object.freeze({
@@ -62,6 +89,9 @@ const __SUPPORTED_THEME_COLORS = Object.freeze({
     "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,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.label,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.label,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.label,
 });
 // Hex color map (uppercase, match Tailwind classes)
 const THEME_COLOR_HEX_MAP = Object.freeze({
@@ -70,6 +100,9 @@ const THEME_COLOR_HEX_MAP = Object.freeze({
     "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,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.hex,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.hex,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.hex,
 });
 // Short theme names for env configuration
 const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
@@ -78,6 +111,9 @@ const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.textColor,
     emerald: THEME_COLOR_META_MAP.emerald.textColor,
     rose: THEME_COLOR_META_MAP.rose.textColor,
+    clue: THEME_COLOR_META_MAP.clue.textColor,
+    hose: THEME_COLOR_META_MAP.hose.textColor,
+    pika: THEME_COLOR_META_MAP.pika.textColor,
 });
 const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.bgColor,
@@ -85,6 +121,9 @@ const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.bgColor,
     emerald: THEME_COLOR_META_MAP.emerald.bgColor,
     rose: THEME_COLOR_META_MAP.rose.bgColor,
+    clue: THEME_COLOR_META_MAP.clue.bgColor,
+    hose: THEME_COLOR_META_MAP.hose.bgColor,
+    pika: THEME_COLOR_META_MAP.pika.bgColor,
 });
 const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.viaColor,
@@ -92,6 +131,9 @@ const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.viaColor,
     emerald: THEME_COLOR_META_MAP.emerald.viaColor,
     rose: THEME_COLOR_META_MAP.rose.viaColor,
+    clue: THEME_COLOR_META_MAP.clue.viaColor,
+    hose: THEME_COLOR_META_MAP.hose.viaColor,
+    pika: THEME_COLOR_META_MAP.pika.viaColor,
 });
 const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.ringColor,
@@ -99,6 +141,9 @@ const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.ringColor,
     emerald: THEME_COLOR_META_MAP.emerald.ringColor,
     rose: THEME_COLOR_META_MAP.rose.ringColor,
+    clue: THEME_COLOR_META_MAP.clue.ringColor,
+    hose: THEME_COLOR_META_MAP.hose.ringColor,
+    pika: THEME_COLOR_META_MAP.pika.ringColor,
 });
 const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.borderColor,
@@ -106,6 +151,9 @@ const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.borderColor,
     emerald: THEME_COLOR_META_MAP.emerald.borderColor,
     rose: THEME_COLOR_META_MAP.rose.borderColor,
+    clue: THEME_COLOR_META_MAP.clue.borderColor,
+    hose: THEME_COLOR_META_MAP.hose.borderColor,
+    pika: THEME_COLOR_META_MAP.pika.borderColor,
 });
 // Validate theme color class (type guard)
 const validateThemeColor = (colorClass) => {
@@ -145,6 +193,9 @@ const THEME_BUTTON_GRADIENT_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500",
 });
 // Theme button hover gradient classes (static for Tailwind scan)
 const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
@@ -153,6 +204,9 @@ const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
     "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700",
     "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700",
     "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700",
+    "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600",
+    "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700",
+    "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600",
 });
 // Global button gradient classes (type-safe, follows themeIconColor)
 const themeButtonGradientClass = THEME_BUTTON_GRADIENT_CLASS_MAP[themeIconColor];
@@ -164,6 +218,9 @@ const THEME_HERO_EYES_ON_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600",
 });
 const themeHeroEyesOnClass = THEME_HERO_EYES_ON_CLASS_MAP[themeIconColor];
 // Theme rich-text <mark> highlight background classes (darker emphasis, readable)
@@ -173,6 +230,9 @@ const THEME_RICH_TEXT_MARK_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600",
     "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600",
     "text-rose-500": "bg-rose-300 dark:bg-rose-600",
+    "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60",
+    "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60",
+    "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70",
 });
 const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];
 

package/dist/lib/theme-util.mjs

@@ -52,6 +52,33 @@ const THEME_COLOR_META_MAP = Object.freeze({
         borderColor: "border-rose-500",
         hex: "#F43F5E",
     },
+    clue: {
+        label: "天空蓝·X",
+        textColor: "text-clue-500",
+        bgColor: "bg-clue-500/20",
+        viaColor: "via-clue-500/20",
+        ringColor: "ring-clue-500/20",
+        borderColor: "border-clue-500",
+        hex: "#1D9BF0",
+    },
+    hose: {
+        label: "睡莲红·X",
+        textColor: "text-hose-500",
+        bgColor: "bg-hose-500/20",
+        viaColor: "via-hose-500/20",
+        ringColor: "ring-hose-500/20",
+        borderColor: "border-hose-500",
+        hex: "#F91980",
+    },
+    pika: {
+        label: "皮卡黄·X",
+        textColor: "text-pika-500",
+        bgColor: "bg-pika-500/20",
+        viaColor: "via-pika-500/20",
+        ringColor: "ring-pika-500/20",
+        borderColor: "border-pika-500",
+        hex: "#FFD400",
+    },
 });
 // Supported theme color classes (static for Tailwind scan)
 const __SUPPORTED_THEME_COLORS = Object.freeze({
@@ -60,6 +87,9 @@ const __SUPPORTED_THEME_COLORS = Object.freeze({
     "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,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.label,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.label,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.label,
 });
 // Hex color map (uppercase, match Tailwind classes)
 const THEME_COLOR_HEX_MAP = Object.freeze({
@@ -68,6 +98,9 @@ const THEME_COLOR_HEX_MAP = Object.freeze({
     "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,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.hex,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.hex,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.hex,
 });
 // Short theme names for env configuration
 const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
@@ -76,6 +109,9 @@ const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.textColor,
     emerald: THEME_COLOR_META_MAP.emerald.textColor,
     rose: THEME_COLOR_META_MAP.rose.textColor,
+    clue: THEME_COLOR_META_MAP.clue.textColor,
+    hose: THEME_COLOR_META_MAP.hose.textColor,
+    pika: THEME_COLOR_META_MAP.pika.textColor,
 });
 const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.bgColor,
@@ -83,6 +119,9 @@ const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.bgColor,
     emerald: THEME_COLOR_META_MAP.emerald.bgColor,
     rose: THEME_COLOR_META_MAP.rose.bgColor,
+    clue: THEME_COLOR_META_MAP.clue.bgColor,
+    hose: THEME_COLOR_META_MAP.hose.bgColor,
+    pika: THEME_COLOR_META_MAP.pika.bgColor,
 });
 const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.viaColor,
@@ -90,6 +129,9 @@ const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.viaColor,
     emerald: THEME_COLOR_META_MAP.emerald.viaColor,
     rose: THEME_COLOR_META_MAP.rose.viaColor,
+    clue: THEME_COLOR_META_MAP.clue.viaColor,
+    hose: THEME_COLOR_META_MAP.hose.viaColor,
+    pika: THEME_COLOR_META_MAP.pika.viaColor,
 });
 const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.ringColor,
@@ -97,6 +139,9 @@ const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.ringColor,
     emerald: THEME_COLOR_META_MAP.emerald.ringColor,
     rose: THEME_COLOR_META_MAP.rose.ringColor,
+    clue: THEME_COLOR_META_MAP.clue.ringColor,
+    hose: THEME_COLOR_META_MAP.hose.ringColor,
+    pika: THEME_COLOR_META_MAP.pika.ringColor,
 });
 const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.borderColor,
@@ -104,6 +149,9 @@ const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.borderColor,
     emerald: THEME_COLOR_META_MAP.emerald.borderColor,
     rose: THEME_COLOR_META_MAP.rose.borderColor,
+    clue: THEME_COLOR_META_MAP.clue.borderColor,
+    hose: THEME_COLOR_META_MAP.hose.borderColor,
+    pika: THEME_COLOR_META_MAP.pika.borderColor,
 });
 // Validate theme color class (type guard)
 const validateThemeColor = (colorClass) => {
@@ -143,6 +191,9 @@ const THEME_BUTTON_GRADIENT_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500",
 });
 // Theme button hover gradient classes (static for Tailwind scan)
 const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
@@ -151,6 +202,9 @@ const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
     "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700",
     "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700",
     "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700",
+    "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600",
+    "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700",
+    "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600",
 });
 // Global button gradient classes (type-safe, follows themeIconColor)
 const themeButtonGradientClass = THEME_BUTTON_GRADIENT_CLASS_MAP[themeIconColor];
@@ -162,6 +216,9 @@ const THEME_HERO_EYES_ON_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600",
 });
 const themeHeroEyesOnClass = THEME_HERO_EYES_ON_CLASS_MAP[themeIconColor];
 // Theme rich-text <mark> highlight background classes (darker emphasis, readable)
@@ -171,6 +228,9 @@ const THEME_RICH_TEXT_MARK_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600",
     "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600",
     "text-rose-500": "bg-rose-300 dark:bg-rose-600",
+    "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60",
+    "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60",
+    "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70",
 });
 const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/base-ui",
-  "version": "31.0.0",
+  "version": "31.0.1",
   "description": "Base UI components for windrun-huaiin projects",
   "type": "module",
   "exports": {
@@ -59,7 +59,7 @@
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.577.0",
     "tslib": "^2.8.1",
-    "@windrun-huaiin/lib": "^31.0.0"
+    "@windrun-huaiin/lib": "^31.0.3"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/lib/theme-util.ts

@@ -53,14 +53,41 @@ const THEME_COLOR_META_MAP = Object.freeze({
     borderColor: "border-rose-500",
     hex: "#F43F5E",
   },
+  clue: {
+    label: "天空蓝·X",
+    textColor: "text-clue-500",
+    bgColor: "bg-clue-500/20",
+    viaColor: "via-clue-500/20",
+    ringColor: "ring-clue-500/20",
+    borderColor: "border-clue-500",
+    hex: "#1D9BF0",
+  },
+  hose: {
+    label: "睡莲红·X",
+    textColor: "text-hose-500",
+    bgColor: "bg-hose-500/20",
+    viaColor: "via-hose-500/20",
+    ringColor: "ring-hose-500/20",
+    borderColor: "border-hose-500",
+    hex: "#F91980",
+  },
+  pika: {
+    label: "皮卡黄·X",
+    textColor: "text-pika-500",
+    bgColor: "bg-pika-500/20",
+    viaColor: "via-pika-500/20",
+    ringColor: "ring-pika-500/20",
+    borderColor: "border-pika-500",
+    hex: "#FFD400",
+  },
 } 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"];
+export type SupportedThemeName = keyof typeof THEME_COLOR_NAME_TO_CLASS_MAP;
+export type SupportedThemeColor = (typeof THEME_COLOR_NAME_TO_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBgColor = (typeof THEME_COLOR_NAME_TO_BG_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeViaColor = (typeof THEME_COLOR_NAME_TO_VIA_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeRingColor = (typeof THEME_COLOR_NAME_TO_RING_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBorderColor = (typeof THEME_COLOR_NAME_TO_BORDER_CLASS_MAP)[SupportedThemeName];
 
 // Supported theme color classes (static for Tailwind scan)
 export const __SUPPORTED_THEME_COLORS = Object.freeze({
@@ -69,6 +96,9 @@ export const __SUPPORTED_THEME_COLORS = Object.freeze({
   "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,
+  "text-clue-500": THEME_COLOR_META_MAP.clue.label,
+  "text-hose-500": THEME_COLOR_META_MAP.hose.label,
+  "text-pika-500": THEME_COLOR_META_MAP.pika.label,
 } as const);
 
 // Hex color map (uppercase, match Tailwind classes)
@@ -78,6 +108,9 @@ export const THEME_COLOR_HEX_MAP = Object.freeze({
   "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,
+  "text-clue-500": THEME_COLOR_META_MAP.clue.hex,
+  "text-hose-500": THEME_COLOR_META_MAP.hose.hex,
+  "text-pika-500": THEME_COLOR_META_MAP.pika.hex,
 } as const);
 
 // Short theme names for env configuration
@@ -87,6 +120,9 @@ export const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.textColor,
   emerald: THEME_COLOR_META_MAP.emerald.textColor,
   rose: THEME_COLOR_META_MAP.rose.textColor,
+  clue: THEME_COLOR_META_MAP.clue.textColor,
+  hose: THEME_COLOR_META_MAP.hose.textColor,
+  pika: THEME_COLOR_META_MAP.pika.textColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
@@ -95,6 +131,9 @@ export const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.bgColor,
   emerald: THEME_COLOR_META_MAP.emerald.bgColor,
   rose: THEME_COLOR_META_MAP.rose.bgColor,
+  clue: THEME_COLOR_META_MAP.clue.bgColor,
+  hose: THEME_COLOR_META_MAP.hose.bgColor,
+  pika: THEME_COLOR_META_MAP.pika.bgColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
@@ -103,6 +142,9 @@ export const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.viaColor,
   emerald: THEME_COLOR_META_MAP.emerald.viaColor,
   rose: THEME_COLOR_META_MAP.rose.viaColor,
+  clue: THEME_COLOR_META_MAP.clue.viaColor,
+  hose: THEME_COLOR_META_MAP.hose.viaColor,
+  pika: THEME_COLOR_META_MAP.pika.viaColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
@@ -111,6 +153,9 @@ export const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.ringColor,
   emerald: THEME_COLOR_META_MAP.emerald.ringColor,
   rose: THEME_COLOR_META_MAP.rose.ringColor,
+  clue: THEME_COLOR_META_MAP.clue.ringColor,
+  hose: THEME_COLOR_META_MAP.hose.ringColor,
+  pika: THEME_COLOR_META_MAP.pika.ringColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
@@ -119,6 +164,9 @@ export const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.borderColor,
   emerald: THEME_COLOR_META_MAP.emerald.borderColor,
   rose: THEME_COLOR_META_MAP.rose.borderColor,
+  clue: THEME_COLOR_META_MAP.clue.borderColor,
+  hose: THEME_COLOR_META_MAP.hose.borderColor,
+  pika: THEME_COLOR_META_MAP.pika.borderColor,
 } as const);
 
 // Validate theme color class (type guard)
@@ -169,6 +217,9 @@ export const THEME_BUTTON_GRADIENT_CLASS_MAP = Object.freeze({
   "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600",
   "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600",
   "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600",
+  "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500",
+  "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600",
+  "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500",
 } as const);
 
 // Theme button hover gradient classes (static for Tailwind scan)
@@ -178,6 +229,9 @@ export const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
   "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700",
   "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700",
   "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700",
+  "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600",
+  "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700",
+  "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600",
 } as const);
 
 // Global button gradient classes (type-safe, follows themeIconColor)
@@ -191,6 +245,9 @@ export const THEME_HERO_EYES_ON_CLASS_MAP = Object.freeze({
   "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600",
   "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600",
   "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600",
+  "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500",
+  "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600",
+  "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600",
 } as const);
 
 export const themeHeroEyesOnClass = THEME_HERO_EYES_ON_CLASS_MAP[themeIconColor];
@@ -202,6 +259,9 @@ export const THEME_RICH_TEXT_MARK_CLASS_MAP = Object.freeze({
   "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600",
   "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600",
   "text-rose-500": "bg-rose-300 dark:bg-rose-600",
+  "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60",
+  "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60",
+  "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70",
 } as const);
 
 export const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];

package/src/styles/base-ui.css

@@ -1,2 +1,7 @@
 
- 
+ 
+@theme {
+  --color-clue-500: #1D9BF0;
+  --color-hose-500: #F91980;
+  --color-pika-500: #FFD400;
+}