solid-element-ui 0.2.5 → 0.2.6

package/src/radio-group/radio-group.tsx

@@ -6,17 +6,17 @@ const radioStyles = tv(
     {
         slots: {
             root: "flex flex-col gap-3 antialiased",
-            label: "text-sm font-semibold text-slate-900 dark:text-slate-100 mb-1",
+            label: "text-sm font-semibold text-main mb-1",
             item: "group flex items-center gap-3 cursor-pointer disabled:cursor-not-allowed",
             control: [
-                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-300 bg-white transition-all shadow-sm",
-                "group-hover:border-slate-400 group-data-[checked]:border-blue-600 group-data-[checked]:bg-blue-600",
+                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-300 bg-app transition-all shadow-sm",
+                "group-hover:border-light group-data-[checked]:border-primary group-data-[checked]:bg-primary",
                 "group-focus-visible:ring-2 group-focus-visible:ring-blue-500/20",
-                "dark:bg-slate-950 dark:border-slate-700 dark:group-data-[checked]:bg-blue-600 dark:group-data-[checked]:border-blue-600",
+               
             ],
-            indicator: "h-2 w-2 rounded-full bg-white shadow-sm",
+            indicator: "h-2 w-2 rounded-full bg-app shadow-sm",
             itemLabel:
-                "text-sm font-medium text-slate-700 dark:text-slate-300 group-data-[disabled]:opacity-50",
+                "text-sm font-medium text-main group-data-[disabled]:opacity-50",
         },
         variants: {
             orientation: {

package/src/search/search.tsx

@@ -9,13 +9,13 @@ const searchStyles = tv(
             root: "relative flex flex-col gap-1.5 w-full",
             inputWrapper: "relative flex items-center transition-all",
             input: [
-                "flex h-10 w-full rounded-md border border-slate-200 bg-white px-9 py-2 text-sm",
-                "ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium",
-                "placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2",
-                "disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950",
+                "flex h-10 w-full rounded-md border border-light bg-app px-9 py-2 text-sm",
+                "ring-offset-app file:border-0 file:bg-transparent file:text-sm file:font-medium",
+                "placeholder:text-muted focus-visible:outline-none focus-visible:ring-2",
+                "disabled:cursor-not-allowed disabled:opacity-50",
             ],
-            icon: "absolute left-3 h-4 w-4 text-slate-500 pointer-events-none",
-            clear: "absolute right-3 h-4 w-4 text-slate-400 hover:text-slate-600 cursor-pointer transition-colors",
+            icon: "absolute left-3 h-4 w-4 text-main pointer-events-none",
+            clear: "absolute right-3 h-4 w-4 text-main hover:text-muted cursor-pointer transition-colors",
         },
         variants: {
             size: {
@@ -36,8 +36,8 @@ const searchStyles = tv(
                 },
             },
             ringColor: {
-                primary: { input: "focus-visible:ring-blue-500" },
-                danger: { input: "focus-visible:ring-red-500" },
+                primary: { input: "focus-visible:ring-primary" },
+                danger: { input: "focus-visible:ring-danger" },
             },
         },
         defaultVariants: {

package/src/segmented-control/segmented-control.tsx

@@ -9,15 +9,15 @@ const segmentedStyles = tv(
         slots: {
             root: "relative flex flex-col",
             container:
-                "relative flex items-center w-full rounded-lg bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
+                "relative flex items-center w-full rounded-lg bg-foreground p-1 text-main",
             item: [
                 " z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all cursor-pointer",
                 "outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",
                 "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-                "data-[checked]:text-slate-950 dark:data-[checked]:text-slate-50 transition-colors duration-200",
+                " transition-colors duration-200",
             ],
             indicator:
-                "absolute z-0 bg-white shadow-sm rounded-md transition-all duration-200 ease-in-out dark:bg-slate-950",
+                "absolute z-0 bg-app shadow-sm rounded-md transition-all duration-200 ease-in-out ",
             label: "mb-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
             itemLabel: "flex w-full cursor-pointer items-center justify-center",
         },

package/src/select/select.tsx

@@ -7,25 +7,24 @@ const selectStyles = tv(
     {
         slots: {
             root: "flex flex-col gap-1.5 w-full",
-            label: "text-sm font-medium text-slate-700 dark:text-slate-300",
+            label: "text-sm font-medium text-muted",
             trigger: [
-                "flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm",
-                "ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500",
-                "disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950",
+                "flex h-10 w-full text-main items-center justify-between rounded-md border border-light bg-app px-3 py-2 text-sm",
+                "ring-offset-white placeholder:text-muted focus:outline-none focus:ring-1 focus:ring-blue-500",
+                "disabled:cursor-not-allowed disabled:opacity-50",
             ],
             content: [
-                "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md",
-                "data-[expanded]:animate-in data-[closed]:animate-out dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+                "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-light bg-app shadow-md text-main",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
             listbox: "p-1",
             item: [
                 "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-                "focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-                "dark:focus:bg-slate-800 dark:focus:text-slate-50",
+                "focus:bg-foreground focus:text-main data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             ],
             itemIndicator:
                 "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-            description: "text-xs text-slate-500 dark:text-slate-400",
+            description: "mt-1 text-xs text-muted",
         },
         variants: {
             size: {

package/src/separator/separator.tsx

@@ -4,7 +4,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 const separatorStyles = tv(
     {
-        base: "bg-slate-200 dark:bg-slate-800 shrink-0 transition-colors",
+        base: "bg-foreground shrink-0 transition-colors",
         variants: {
             orientation: {
                 horizontal: "h-[1px] w-full my-4",
@@ -16,9 +16,11 @@ const separatorStyles = tv(
                 thick: "data-[orientation=horizontal]:h-[4px] data-[orientation=vertical]:w-[4px] rounded-full",
             },
             variant: {
-                default: "bg-slate-200 dark:bg-slate-800",
-                muted: "bg-slate-100 dark:bg-slate-900",
-                primary: "bg-blue-500/50",
+                default: "bg-foreground",
+                primary: "bg-primary",
+                success: "bg-success",
+                warning: "bg-warning",
+                danger: "bg-danger",
             },
         },
         defaultVariants: {

package/src/skeleton/skeleton.tsx

@@ -4,7 +4,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 const skeletonStyles = tv(
     {
-        base: "bg-slate-200 dark:bg-slate-800",
+        base: "bg-foreground",
         variants: {
             variant: {
                 rect: "rounded-md",

package/src/slider/slider.tsx

@@ -2,28 +2,31 @@ import { Slider as KSlider } from "@kobalte/core/slider";
 import { splitProps, type ComponentProps, For, Show } from "solid-js";
 import { tv, type VariantProps } from "tailwind-variants";
 
+// FIXME 点击轨道时报错
+
 const sliderStyles = tv(
     {
         slots: {
             root: "relative flex flex-col items-center select-none touch-none w-full gap-2",
             labelWrapper: "flex w-full justify-between items-center",
-            label: "text-sm font-medium text-slate-700 dark:text-slate-300",
-            value: "text-sm text-slate-500 font-mono",
-            track: "relative h-2 w-full grow rounded-full bg-slate-100 dark:bg-slate-800",
-            fill: "absolute h-full rounded-full bg-blue-600 dark:bg-blue-500",
+            label: "text-sm font-medium text-muted",
+            value: "text-sm text-muted font-mono",
+            track: "relative h-2 w-full grow rounded-full bg-foreground",
+            fill: "absolute h-full rounded-full ",
             thumb: [
-                "block h-5 w-5 rounded-full border-2 border-blue-600 bg-white ring-offset-white transition-colors",
+                "block h-5 w-5 rounded-full border-2 bg-app ring-offset-white transition-colors",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2",
                 "disabled:pointer-events-none disabled:opacity-50 hover:scale-110 active:scale-95 transition-transform",
             ],
         },
         variants: {
             variant: {
-                default: { fill: "bg-blue-600", thumb: "border-blue-600" },
-                danger: { fill: "bg-red-600", thumb: "border-red-600" },
+                default: { fill: "bg-primary", thumb: "border-primary" },
+                danger: { fill: "bg-danger", thumb: "border-danger" },
+                warning: { fill: "bg-warning", thumb: "border-warning" },
                 success: {
-                    fill: "bg-emerald-600",
-                    thumb: "border-emerald-600",
+                    fill: "bg-success",
+                    thumb: "border-success",
                 },
             },
             size: {

package/src/style/{index.css → global.css}

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 
-/* --- 1. 先定义 CSS 变量 --- */
 @layer theme {
     :root {
         --primary: var(--color-blue-600);
@@ -8,22 +7,27 @@
         --warning: var(--color-orange-600);
         --danger: var(--color-red-600);
 
-        --app-bg: #ffffff;
-        --app-text-reversal: #ffffff;
-        --app-text-main: var(--color-zinc-900);
-        --app-text-muted: var(--color-zinc-500);
-        --app-border: var(--color-zinc-500);
-        --app-ring: var(--color-zinc-400);
-        --container-header: var(--color-zinc-100);
+        --app-bg: var(--color-white); /* 应用背景色 */
+        --app-bg-reversal: var(--color-zinc-900); /* 应用反转背景色 */
+        --app-foreground: var(--color-zinc-100); /* 应用前景色 */
+
+
+        --app-text-main: var(--color-zinc-950); /* 应用主文字色 */
+        --app-text-muted: var(--color-zinc-600); /* 应用次级文字色*/
+        --app-border: var(--color-zinc-500); /* 应用边框色*/
+        --app-border-light: var(--color-zinc-300); /* 应用浅边框色 */
+        --app-ring: var(--color-zinc-300);
+        --app-text-reversal: var(--color-zinc-100); /* 应用反转文字色 */
     }
 
     [data-theme="dark"] {
-        --app-text-reversal: #000;
+        --app-text-reversal: var(--color-zinc-950);
+        --app-bg-reversal: var(--color-zinc-50);
         --app-bg: var(--color-zinc-950);
         --app-text-main: var(--color-zinc-50);
         --app-text-muted: var(--color-zinc-400);
         --app-ring: var(--color-zinc-600);
-        --container-header: var(--color-zinc-900);
+        --app-foreground: var(--color-zinc-900);
     }
 
     [data-theme="coffee"] {
@@ -31,7 +35,7 @@
         --app-text-main: #f3e5d8;
         --app-ring: #8b5e3c;
     }
-    
+
     @keyframes accordion-down {
         from {
             height: 0;
@@ -120,13 +124,15 @@
     --color-success: var(--success);
     --color-warning: var(--warning);
     --color-danger: var(--danger);
-    --color-reversal: var(--app-text-reversal);
-    --color-header: var(--container-header);
+
     --color-app: var(--app-bg);
+    --color-foreground: var(--app-foreground);
+    --color-reversal-bg: var(--app-bg-reversal);
     --color-main: var(--app-text-main);
     --color-muted: var(--app-text-muted);
+    --color-reversal: var(--app-text-reversal);
     --color-base: var(--app-border);
-    --color-accent-ring: var(--app-ring);
+    --color-light: var(--app-border-light);
     --radius-app: 0.75rem;
 
     /* 注册动画到主题 */

package/src/switch/switch.tsx

@@ -8,16 +8,16 @@ const switchStyles = tv(
             root: "inline-flex items-center gap-2 group",
             control: [
                 "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-primary focus-visible:ring-offset-2",
                 "disabled:cursor-not-allowed disabled:opacity-50",
-                "bg-slate-200 dark:bg-slate-800 data-[checked]:bg-blue-600 dark:data-[checked]:bg-blue-500",
+                "bg-foreground data-[checked]:bg-primary",
             ],
             thumb: [
-                "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform",
+                "pointer-events-none block h-5 w-5 rounded-full bg-app shadow-lg ring-0 transition-transform",
                 "data-[checked]:translate-x-5 translate-x-0",
             ],
             label: "text-sm font-medium leading-none group-data-[disabled]:opacity-70",
-            description: "text-xs text-slate-500 dark:text-slate-400",
+            description: "text-xs text-muted",
         },
         variants: {
             size: {
@@ -37,15 +37,15 @@ const switchStyles = tv(
             variant: {
                 primary: {
                     control:
-                        "data-[checked]:bg-blue-600 dark:data-[checked]:bg-blue-500",
+                        "data-[checked]:bg-primary",
                 },
                 success: {
                     control:
-                        "data-[checked]:bg-emerald-600 dark:data-[checked]:bg-emerald-500",
+                        "data-[checked]:bg-success",
                 },
                 danger: {
                     control:
-                        "data-[checked]:bg-red-600 dark:data-[checked]:bg-red-500",
+                        "data-[checked]:bg-danger",
                 },
             },
         },

package/src/tabs/tabs.tsx

@@ -6,16 +6,16 @@ const tabsStyles = tv(
     {
         slots: {
             root: "flex flex-col w-full",
-            list: "relative flex items-center border-b border-zinc-200 dark:border-zinc-800",
+            list: "relative flex items-center border-b border-base",
             trigger: [
                 "relative flex h-9 items-center justify-center px-4 text-sm font-medium transition-colors outline-none select-none cursor-pointer",
-                "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200",
-                "data-[selected]:text-zinc-950 dark:data-[selected]:text-zinc-50",
+                "text-muted hover:text-muted/80 ",
+                "data-[selected]:text-main",
             ],
             indicator:
-                "absolute bottom-[-1px] h-0.5 bg-zinc-950 dark:bg-zinc-50 transition-all duration-200",
+                "absolute bottom-[-1px] h-0.5 bg-reversal-bg transition-all duration-200",
             content:
-                "mt-4 text-sm text-zinc-600 dark:text-zinc-400 focus-visible:outline-none",
+                "mt-4 text-sm text-main focus-visible:outline-none",
         },
     },
     {

package/src/text-field/text-field.tsx

@@ -6,17 +6,17 @@ const textFieldStyles = tv(
     {
         slots: {
             root: "flex flex-col gap-1.5 w-full",
-            label: "text-sm font-medium text-slate-700 dark:text-slate-300 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            label: "text-sm font-medium text-muted peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
             input: [
-                "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm transition-shadow",
+                "flex h-10 w-full rounded-md border border-light bg-app px-3 py-2 text-sm transition-shadow text-main",
                 "ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium",
-                "placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-                "disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950",
-                "data-[invalid]:border-red-500 data-[invalid]:focus-visible:ring-red-500",
+                "placeholder:text-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "data-[invalid]:border-danger data-[invalid]:focus-visible:ring-danger",
             ],
-            description: "text-xs text-slate-500 dark:text-slate-400",
+            description: "text-xs text-muted",
             errorMessage:
-                "text-xs text-red-500 animate-in fade-in-50 slide-in-from-top-1",
+                "text-xs text-danger animate-in fade-in-50 slide-in-from-top-1",
         },
         variants: {
             size: {

package/src/toast/toast.tsx

@@ -1,4 +1,6 @@
 import { Toast as KToast, toaster } from "@kobalte/core/toast";
+
+import { isServer } from "solid-js/web";
 import {
     splitProps,
     type ComponentProps,
@@ -24,8 +26,8 @@ const toastStyles = tv(
             title: "text-sm font-semibold",
             description: "text-xs opacity-90 leading-relaxed",
             closeButton: [
-                "absolute right-2 top-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900",
-                "focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 dark:text-slate-400 dark:hover:text-slate-50",
+                "absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity hover:text-main",
+                "focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
             ],
             content: "flex flex-col gap-1 flex-1",
             icon: "h-5 w-5 shrink-0 mt-0.5", // 稍微下移一点对齐文字
@@ -33,20 +35,20 @@ const toastStyles = tv(
         variants: {
             variant: {
                 info: {
-                    root: "bg-white border-slate-200 text-slate-950 dark:bg-slate-950 dark:border-slate-800 dark:text-slate-50",
-                    icon: "text-blue-500",
+                    root: "bg-app border-light text-main",
+                    icon: "text-primary",
                 },
                 success: {
-                    root: "bg-emerald-50 border-emerald-200 text-emerald-900 dark:bg-emerald-950 dark:border-emerald-900 dark:text-emerald-50",
-                    icon: "text-emerald-500",
+                    root: "bg-success/50 border-success text-success",
+                    icon: "text-success",
                 },
                 warning: {
-                    root: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950 dark:border-amber-900 dark:text-amber-50",
-                    icon: "text-amber-500",
+                    root: "bg-warning/50 border-warning text-warning",
+                    icon: "text-warning",
                 },
                 error: {
-                    root: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-900 dark:text-red-50",
-                    icon: "text-red-500",
+                    root: "bg-danger/50 border-danger text-danger",
+                    icon: "text-danger",
                 },
             },
         },
@@ -73,7 +75,6 @@ const iconMap = {
     error: CircleAlert,
 } as const; // 使用 const 断言增强类型推导
 
-// 优化：允许包裹 Children，这样在 App.tsx 顶层包裹即可
 export const ToastProvider = (props: ParentProps) => {
     return (
         <>
@@ -124,5 +125,8 @@ const Toast = (props: ToastProps) => {
 };
 
 export const showToast = (props: Omit<ToastProps, "toastId">) => {
+    if (isServer) {
+        return { toastId: () => "server-id" }; // 给个假实现，不报错就行
+    }
     return toaster.show((data) => <Toast toastId={data.toastId} {...props} />);
 };

package/src/toggle-button/toggle-button.tsx

@@ -2,19 +2,20 @@ import { ToggleButton as KToggle } from "@kobalte/core/toggle-button";
 import { splitProps, type JSX, type ComponentProps } from "solid-js";
 import { tv, type VariantProps } from "tailwind-variants";
 
+// TODO 切换样式问题
+
 const toggleStyles = tv(
     {
         base: [
             "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 focus-visible:ring-offset-1",
             "disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",
         ],
         variants: {
             variant: {
-                solid: "bg-slate-100 text-slate-900 hover:bg-slate-200 data-[pressed]:bg-blue-600 data-[pressed]:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 dark:data-[pressed]:bg-blue-500",
+                solid: "bg-foreground text-main hover:bg-foreground/80 data-[pressed]:bg-reversal-bg data-[pressed]:text-reversal",
                 outline:
-                    "border border-slate-200 bg-transparent hover:bg-slate-100 data-[pressed]:bg-slate-900 data-[pressed]:text-white dark:border-slate-800 dark:hover:bg-slate-800 dark:data-[pressed]:bg-slate-50 dark:data-[pressed]:text-slate-900",
-                ghost: "bg-transparent hover:bg-slate-100 data-[pressed]:bg-slate-200 dark:hover:bg-slate-800 dark:data-[pressed]:bg-slate-800",
+                    "border border-light bg-transparent hover:bg-slate-100 data-[pressed]:bg-slate-900 data-[pressed]:text-white dark:hover:bg-slate-800 dark:data-[pressed]:bg-slate-50 dark:data-[pressed]:text-slate-900",
             },
             size: {
                 sm: "h-8 px-3 text-xs",

package/src/toggle-group/toggle-group.tsx

@@ -8,24 +8,23 @@ import { tv, type VariantProps } from "tailwind-variants";
 const toggleGroupStyles = tv(
     {
         slots: {
-            root: "inline-flex items-center justify-center rounded-md border border-slate-200 bg-transparent p-1 dark:border-slate-800",
+            root: "inline-flex items-center justify-center rounded-md border border-light bg-transparent p-1",
             item: [
                 "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium transition-all cursor-pointer",
                 "outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",
                 "disabled:pointer-events-none disabled:opacity-50",
-                "hover:bg-slate-100 hover:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-400",
-                "data-[pressed]:bg-slate-100 data-[pressed]:text-slate-900 dark:data-[pressed]:bg-slate-800 dark:data-[pressed]:text-slate-50",
+                "hover:bg-foreground/80 hover:text-muted/80",
             ],
-        },
+        }, 
         variants: {
             variant: {
                 default: {
                     root: "bg-transparent",
-                    item: "data-[pressed]:bg-slate-200 dark:data-[pressed]:bg-slate-700",
+                    item: "data-[pressed]:bg-foreground data-[pressed]:text-main",
                 },
                 outline: {
-                    root: "border border-slate-200 dark:border-slate-800",
-                    item: "border-r last:border-r-0 border-slate-200 dark:border-slate-800 rounded-none first:rounded-l-md last:rounded-r-md",
+                    root: "border border-light",
+                    item: "border-r last:border-r-0 border-light rounded-none first:rounded-l-md last:rounded-r-md",
                 },
             },
             size: {

package/src/tooltip/tooltip.tsx

@@ -2,14 +2,12 @@ import { Tooltip as KTooltip } from "@kobalte/core/tooltip";
 import { splitProps, type JSX, type ComponentProps } from "solid-js";
 import { tv, type VariantProps } from "tailwind-variants";
 
-// FIXME 为什么没有箭头
-
 const tooltipStyles = tv(
     {
         slots: {
             content: [
-                "z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs shadow-md",
-                "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                "z-50 rounded-md px-4 py-1.5 text-xs shadow-md",
+                "animate-in zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             ],
             arrow: "",
         },
@@ -17,12 +15,12 @@ const tooltipStyles = tv(
             variant: {
                 default: {
                     content:
-                        "bg-slate-900 text-slate-50 dark:bg-slate-50 dark:text-slate-900",
-                    arrow: "text-slate-900 dark:text-slate-50",
+                        "bg-reversal-bg text-reversal ",
+                    arrow: "fill-muted",
                 },
                 danger: {
-                    content: "bg-red-600 text-white",
-                    arrow: "text-red-600",
+                    content: "bg-danger text-white",
+                    arrow: "fill-danger",
                 },
             },
         },
@@ -56,8 +54,8 @@ export const Tooltip = (props: TooltipProps) => {
 
     return (
         <KTooltip
-            gutter={4} // 必须：给箭头留出空间
-            openDelay={200} // 可选：稍微延迟显示，体验更好
+            gutter={4} 
+            openDelay={200}
             {...others}
         >
             <KTooltip.Trigger class="block">
@@ -66,10 +64,7 @@ export const Tooltip = (props: TooltipProps) => {
 
             <KTooltip.Portal>
                 <KTooltip.Content class={styles.content()}>
-                    {/* size={8} 确保箭头有物理尺寸
-                        fill="currentColor" 配合 styles.arrow() 里的 text 颜色实现变体同步 
-                    */}
-                    <KTooltip.Arrow class={styles.arrow()} size={8} />
+                    <KTooltip.Arrow class={styles.arrow()}  />
                     {local.content}
                 </KTooltip.Content>
             </KTooltip.Portal>