solid-element-ui 0.2.5 → 0.2.6

package/dist/{src/separator → separator}/separator.d.ts

@@ -13,10 +13,12 @@ declare const separatorStyles: import('tailwind-variants').TVReturnType<{
     };
     variant: {
         default: string;
-        muted: string;
         primary: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800 shrink-0 transition-colors", {
+}, undefined, "bg-foreground shrink-0 transition-colors", {
     orientation: {
         horizontal: string;
         vertical: string;
@@ -28,8 +30,10 @@ declare const separatorStyles: import('tailwind-variants').TVReturnType<{
     };
     variant: {
         default: string;
-        muted: string;
         primary: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     orientation: {
@@ -43,10 +47,12 @@ declare const separatorStyles: import('tailwind-variants').TVReturnType<{
     };
     variant: {
         default: string;
-        muted: string;
         primary: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800 shrink-0 transition-colors", unknown, unknown, undefined>>;
+}, undefined, "bg-foreground shrink-0 transition-colors", unknown, unknown, undefined>>;
 type SeparatorVariants = VariantProps<typeof separatorStyles>;
 export interface SeparatorProps extends ComponentProps<typeof KSeparator>, SeparatorVariants {
     class?: string;

package/dist/{src/skeleton → skeleton}/skeleton.d.ts

@@ -12,7 +12,7 @@ declare const skeletonStyles: import('tailwind-variants').TVReturnType<{
         wave: string;
         none: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800", {
+}, undefined, "bg-foreground", {
     variant: {
         rect: string;
         circle: string;
@@ -34,7 +34,7 @@ declare const skeletonStyles: import('tailwind-variants').TVReturnType<{
         wave: string;
         none: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800", unknown, unknown, undefined>>;
+}, undefined, "bg-foreground", unknown, unknown, undefined>>;
 type SkeletonVariants = VariantProps<typeof skeletonStyles>;
 export interface SkeletonProps extends Omit<ComponentProps<typeof KSkeleton>, "class" | "width" | "height">, SkeletonVariants {
     width?: string | number;

package/dist/{src/slider → slider}/slider.d.ts

@@ -11,6 +11,10 @@ declare const sliderStyles: import('tailwind-variants').TVReturnType<{
             fill: string;
             thumb: string;
         };
+        warning: {
+            fill: string;
+            thumb: string;
+        };
         success: {
             fill: string;
             thumb: string;
@@ -48,6 +52,10 @@ declare const sliderStyles: import('tailwind-variants').TVReturnType<{
             fill: string;
             thumb: string;
         };
+        warning: {
+            fill: string;
+            thumb: string;
+        };
         success: {
             fill: string;
             thumb: string;
@@ -85,6 +93,10 @@ declare const sliderStyles: import('tailwind-variants').TVReturnType<{
             fill: string;
             thumb: string;
         };
+        warning: {
+            fill: string;
+            thumb: string;
+        };
         success: {
             fill: string;
             thumb: string;

package/dist/{src/toast → toast}/toast.d.ts

@@ -87,5 +87,7 @@ export interface ToastProps extends Omit<ComponentProps<typeof KToast>, "class">
     class?: string;
 }
 export declare const ToastProvider: (props: ParentProps) => import("solid-js").JSX.Element;
-export declare const showToast: (props: Omit<ToastProps, "toastId">) => number;
+export declare const showToast: (props: Omit<ToastProps, "toastId">) => number | {
+    toastId: () => string;
+};
 export {};

package/dist/{src/toggle-button → toggle-button}/toggle-button.d.ts

@@ -5,7 +5,6 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
     variant: {
         solid: string;
         outline: string;
-        ghost: string;
     };
     size: {
         sm: string;
@@ -17,7 +16,6 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
     variant: {
         solid: string;
         outline: string;
-        ghost: string;
     };
     size: {
         sm: string;
@@ -29,7 +27,6 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
     variant: {
         solid: string;
         outline: string;
-        ghost: string;
     };
     size: {
         sm: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "solid-element-ui",
-    "version": "0.2.5",
+    "version": "0.2.6",
     "type": "module",
     "license": "MIT",
     "author": "sanguogege",
@@ -34,23 +34,27 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./dist/index.js",
             "solid": "./src/index.tsx",
+            "import": {
+                "node": "./dist/index.js",
+                "default": "./dist/index.js"
+            },
+            "browser": "./dist/index.js",
             "default": "./dist/index.js"
         },
-        "./index.css": "./dist/index.css"
+        "./index.css": "./dist/global.css"
     },
     "source": "./src/index.tsx",
     "scripts": {
         "build": "tsc -b && vite build"
     },
     "peerDependencies": {
-        "solid-js": "^1.9.10"
+        "solid-js": "^1.9.11"
     },
     "dependencies": {
         "@kobalte/core": "^0.13.11",
-        "lucide-solid": "^0.562.0",
-        "tailwind-merge": "^3.4.0",
+        "lucide-solid": "^0.577.0",
+        "tailwind-merge": "^3.5.0",
         "tailwind-variants": "^3.2.2"
     },
     "devDependencies": {

package/src/accordion/accordion.tsx

@@ -15,7 +15,7 @@ const accordionStyles = tv(
             header: "flex",
             trigger: [
                 "flex flex-1 items-center justify-between cursor-pointer py-4 px-4 text-md font-medium transition-all ",
-                "bg-header hover:bg-header/80",
+                "bg-foreground hover:bg-foreground/80",
             ],
             content: [
                 "overflow-hidden text-md transition-all bg-transparent text-main",

package/src/alert-dialog/alert-dialog.tsx

@@ -1,11 +1,14 @@
 import { AlertDialog as KAlertDialog } from "@kobalte/core/alert-dialog";
-import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import {
+    splitProps,
+    type JSX,
+    type ComponentProps,
+    createSignal,
+} from "solid-js";
 import { tv } from "tailwind-variants";
 import { X } from "lucide-solid";
 import { Button } from "../button/button";
 
-// TODO 修改点击确定时的行为，目前是关闭对话框
-
 const alertDialogStyles = tv(
     {
         slots: {
@@ -39,10 +42,14 @@ interface AlertDialogProps extends ComponentProps<typeof KAlertDialog> {
     description?: string;
     action?: JSX.Element;
     cancel?: JSX.Element;
-    onConfirm?: () => void;
+    onConfirm?: () => void | Promise<void>;
 }
 
 export const AlertDialog = (props: AlertDialogProps) => {
+    // 使用受控模式
+    const [isOpen, setIsOpen] = createSignal(false);
+    const [loading, setLoading] = createSignal(false);
+
     const [local, others] = splitProps(props, [
         "trigger",
         "title",
@@ -52,13 +59,34 @@ export const AlertDialog = (props: AlertDialogProps) => {
         "onConfirm",
     ]);
 
-    const handleConfirm = () => {
-        local.onConfirm?.();
+    const handleConfirm = async (e: MouseEvent) => {
+        // 阻止默认行为和冒泡，确保点击不会误触发 Kobalte 的内部关闭逻辑
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (local.onConfirm) {
+            setLoading(true);
+            try {
+                await local.onConfirm();
+                // 只有逻辑成功执行后，才手动关闭
+                setIsOpen(false);
+            } catch (error) {
+                console.error("确认操作失败:", error);
+                // 报错时不关闭，让用户留在页面
+            } finally {
+                setLoading(false);
+            }
+        } else {
+            setIsOpen(false);
+        }
     };
 
     return (
-        <KAlertDialog {...others}>
-            <KAlertDialog.Trigger>{local.trigger}</KAlertDialog.Trigger>
+        <KAlertDialog {...others} open={isOpen()} onOpenChange={setIsOpen}>
+            <div onClick={() => setIsOpen(true)} class="inline-block">
+                {local.trigger}
+            </div>
+
             <KAlertDialog.Portal>
                 <KAlertDialog.Overlay class={overlay()} />
                 <KAlertDialog.Content class={content()}>
@@ -66,11 +94,13 @@ export const AlertDialog = (props: AlertDialogProps) => {
                         <KAlertDialog.Title class={title()}>
                             {local.title}
                         </KAlertDialog.Title>
+                        {/* 这里使用 CloseButton 是正确的，因为它专门负责“取消/关闭” */}
                         <KAlertDialog.CloseButton class={closeButton()}>
                             <X size={18} />
                         </KAlertDialog.CloseButton>
                     </div>
-                    <div>
+
+                    <div class="mt-2">
                         {local.description && (
                             <KAlertDialog.Description class={description()}>
                                 {local.description}
@@ -84,15 +114,16 @@ export const AlertDialog = (props: AlertDialogProps) => {
                                 <Button variant="outline">取消</Button>
                             )}
                         </KAlertDialog.CloseButton>
-
-                        <KAlertDialog.CloseButton onClick={handleConfirm}>
+                        <div onClick={handleConfirm}>
                             {local.action || (
-                                <Button color="primary">确认</Button>
+                                <Button color="primary" loading={loading()}>
+                                    确认
+                                </Button>
                             )}
-                        </KAlertDialog.CloseButton>
+                        </div>
                     </div>
                 </KAlertDialog.Content>
             </KAlertDialog.Portal>
         </KAlertDialog>
     );
-};
+};

package/src/badge/badge.tsx

@@ -4,18 +4,16 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 const badgeStyles = tv(
     {
-        base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
+        base: "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
         variants: {
             variant: {
-                default:
-                    "border-transparent bg-zinc-900 text-zinc-50 hover:bg-zinc-900/80 dark:bg-zinc-50 dark:text-zinc-900",
+                default: " bg-reversal-bg text-reversal",
                 secondary:
-                    "border-transparent bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50",
-                outline:
-                    "text-zinc-950 border-zinc-200 dark:text-zinc-50 dark:border-zinc-800",
+                    "bg-foreground text-muted",
+                outline: "text-main border-light",
                 success:
-                    "border-transparent bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
-                danger: "border-transparent bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+                    "bg-success/20 text-success ",
+                danger: "bg-danger/20 text-danger",
             },
         },
         defaultVariants: {
@@ -30,14 +28,13 @@ const badgeStyles = tv(
 type BadgeVariants = VariantProps<typeof badgeStyles>;
 
 export interface BadgeProps
-    extends ComponentProps<typeof KBadge>,
-        BadgeVariants {}
+    extends ComponentProps<typeof KBadge>, BadgeVariants {}
 
 export const Badge = (props: BadgeProps) => {
     const [local, variantProps, others] = splitProps(
         props,
         ["class"],
-        ["variant"]
+        ["variant"],
     );
 
     return (

package/src/checkbox/checkbox.tsx

@@ -5,18 +5,17 @@ import { Check } from "lucide-solid";
 
 // TODO 添加checkbox 的几种形状尺寸,看情况吧
 
-	
 
 const checkboxStyles = tv(
     {
         slots: {
             root: "group flex items-center gap-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
             control: [
-                "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-zinc-300 transition-all",
+                "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-base transition-all",
                 "group-focus-visible:outline-none group-focus-visible:ring-2 group-focus-visible:ring-zinc-950",
                 "data-[checked]:bg-zinc-900 data-[checked]:border-zinc-900 data-[checked]:text-zinc-50",
                 "data-[disabled]:bg-zinc-400 data-[disabled]:border-zinc-400",
-                "dark:border-zinc-700 dark:data-[checked]:bg-zinc-50 dark:data-[checked]:text-zinc-900 dark:group-focus-visible:ring-zinc-300",
+                "dark:data-[checked]:bg-zinc-50 dark:data-[checked]:text-zinc-900 dark:group-focus-visible:ring-zinc-300",
             ],
             label: "text-sm font-medium leading-none select-none data-[disabled]:text-zinc-400",
             indicator: "h-3.5 w-3.5",

package/src/collapsible/collapsible.tsx

@@ -8,11 +8,11 @@ const collapsibleStyles = tv(
         slots: {
             root: "w-full space-y-2",
             trigger:
-                "flex w-full items-center justify-between border border-base/30 bg-header px-4 py-2 text-sm font-medium hover:bg-header/80  transition-all group mb-0",
+                "flex w-full items-center justify-between border border-light bg-foreground px-4 py-2 text-sm font-medium hover:bg-foreground/80  transition-all group mb-0",
             content:
                 "overflow-hidden text-sm transition-all data-[expanded]:animate-collapsible-down data-[closed]:animate-collapsible-up",
             contentInner:
-                "px-4 py-3 text-main border border-base/20 !border-t-0",
+                "px-4 py-3 text-main border border-light !border-t-0",
             icon: "h-4 w-4 text-zinc-500 transition-transform duration-200 group-data-[expanded]:rotate-180",
         },
     },

package/src/color-area/color-area.tsx

@@ -5,7 +5,7 @@ import { tv } from "tailwind-variants";
 const colorAreaStyles = tv(
     {
         slots: {
-            root: "relative h-48 w-full shrink-0 rounded-lg border border-zinc-200 dark:border-zinc-800 touch-none",
+            root: "relative h-48 w-full shrink-0 rounded-lg border border-base touch-none",
             background: "h-full w-full rounded-[inherit]",
             thumb: [
                 "z-10 h-5 w-5 rounded-full border-2 border-white bg-transparent shadow-md transition-[transform]",

package/src/combobox/combobox.tsx

@@ -11,11 +11,11 @@ const comboboxStyles = tv(
             root: "flex flex-col gap-1.5 w-full",
             label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 select-none",
             control:
-                "relative flex items-center rounded-md border border-zinc-200 bg-white shadow-sm transition-colors focus-within:ring-1 focus-within:ring-zinc-950 dark:border-zinc-800 dark:bg-zinc-950 dark:focus-within:ring-zinc-300",
+                "relative flex items-center rounded-md border border-base bg-app shadow-sm transition-colors focus-within:ring-1 focus-within:ring-zinc-950 dark:focus-within:ring-zinc-300",
             input: "h-9 w-full bg-transparent px-3 py-1 text-sm outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed",
             trigger: "flex h-9 w-9 items-center justify-center text-zinc-500",
             content: [
-                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md animate-in fade-in-0 zoom-in-95 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-base bg-app text-zinc-950 shadow-md animate-in zoom-in-95   dark:text-zinc-50",
                 "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
             listbox: "p-1",

package/src/context-menu/context-menu.tsx

@@ -9,11 +9,11 @@ const menuStyles = tv(
     {
         slots: {
             content: [
-                "z-50 min-w-[10rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+                "z-50 min-w-[10rem] overflow-hidden rounded-md border border-light bg-app p-1 text-main shadow-md dark:text-zinc-50",
                 "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
-            item: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-zinc-100 data-[highlighted]:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:data-[highlighted]:bg-zinc-800 dark:data-[highlighted]:text-zinc-50",
-            separator: "-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800",
+            item: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
+            separator: "-mx-1 my-1 h-px border-light",
             subIcon: "ml-auto h-4 w-4",
         },
     },

package/src/dialog/dialog.tsx

@@ -10,13 +10,12 @@ const dialogStyles = tv(
     {
         slots: {
             overlay: [
-                "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm animate-in fade-in-0 duration-200",
+                "fixed inset-0 z-50 backdrop-blur-sm animate-in duration-200",
                 "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
             content: [
                 [
-                    "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-4 shadow-lg rounded-xl",
-                    "animate-in fade-in-0 zoom-in-95 duration-200 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+                    "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base bg-app text-main p-4 shadow-lg rounded-xl",
                     "data-[expanded]:animate-in data-[closed]:animate-out",
                 ],
             ],

package/src/dropdown-menu/dropdown-menu.tsx

@@ -3,18 +3,18 @@ import { splitProps, type JSX, For, Show } from "solid-js";
 import { tv } from "tailwind-variants";
 import { ChevronRight } from "lucide-solid";
 
-// TODO  样式
+// TODO  Dropdown Menu 样式
 
 const menuStyles = tv(
     {
         slots: {
             trigger: "inline-block cursor-pointer",
             content: [
-                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md animate-in fade-in-0 zoom-in-95 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-light bg-white p-1 text-zinc-950 shadow-md animate-in zoom-in-95 dark:bg-zinc-950 dark:text-zinc-50",
                 "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
             item: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[highlighted]:bg-zinc-100 data-[highlighted]:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:data-[highlighted]:bg-zinc-800 dark:data-[highlighted]:text-zinc-50",
-            separator: "-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800",
+            separator: "-mx-1 my-1 h-px border-light",
             subIcon: "ml-auto h-4 w-4",
         },
     },

package/src/hover-card/hover-card.tsx

@@ -6,8 +6,7 @@ const hoverCardStyles = tv(
     {
         slots: {
             content: [
-                "z-50 w-64 rounded-xl border bg-white p-4 shadow-lg outline-none",
-                "dark:bg-slate-900 dark:border-slate-800 antialiased",
+                "z-50 w-64 rounded-xl border border-light bg-app p-4 shadow-lg outline-none",
                 "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
             arrow: "fill-white stroke-slate-200 dark:fill-slate-900 dark:stroke-slate-800",

package/src/index.tsx

@@ -1,4 +1,7 @@
-import "./style/index.css";
+import "./style/global.css";
+
+// TODO 组件 form , data等
+// TODO background-color 等颜色相关的属性,添加 dark 模式的支持
 
 export { Accordion } from "./accordion/accordion";
 

package/src/link/link.tsx

@@ -8,11 +8,11 @@ const linkStyles = tv(
         variants: {
             variant: {
                 default:
-                    "text-slate-900 underline underline-offset-4 hover:text-slate-700 dark:text-slate-100",
+                    "text-main hover:text-main/80 underline-offset-4",
                 primary:
-                    "text-blue-600 hover:text-blue-500 dark:text-blue-400 font-medium",
-                muted: "text-slate-500 hover:text-slate-600 dark:text-slate-400",
-                button: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 px-4 py-2 text-sm dark:bg-slate-50 dark:text-slate-900",
+                    "text-primary hover:text-primary/80 font-medium",
+                muted: "text-muted hover:text-muted/80",
+                button: "bg-reversal-bg text-reversal hover:reversal-bg/90 px-4 py-2 text-sm ",
             },
             underline: {
                 always: "underline",

package/src/menubar/menubar.tsx

@@ -7,15 +7,19 @@ import { tv } from "tailwind-variants";
 const menubarStyles = tv(
     {
         slots: {
-            root: "flex h-10 items-center space-x-1 rounded-md border bg-white p-1 shadow-sm dark:bg-slate-950 dark:border-slate-800",
+            root: "flex h-10 items-center space-x-1 rounded-md border bg-app p-1 shadow-sm ",
             trigger:
-                "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
+                "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:foreground data-[state=open]:foreground",
             content: [
-                "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-white p-1 shadow-md dark:bg-slate-950 dark:border-slate-800 animate-in fade-in zoom-in-95",
+                "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-app p-1 shadow-md border-light animate-in fade-in zoom-in-95",
                 "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
-            item: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[disabled]:opacity-50 dark:focus:bg-slate-800",
-            separator: "-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800",
+            item: [
+                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none ",
+
+                "focus:bg-foreground data-[disabled]:opacity-50",
+            ],
+            separator: "-mx-1 my-1 h-px border-light",
             shortcut: "ml-auto text-xs tracking-widest text-slate-500",
         },
     },

package/src/meter/meter.tsx

@@ -9,16 +9,16 @@ const meterStyles = tv(
         slots: {
             root: "flex flex-col gap-2 w-full antialiased",
             labelContainer:
-                "flex justify-between items-center text-sm font-medium text-slate-700 dark:text-slate-300",
-            track: "h-2.5 w-full rounded-full bg-slate-100 dark:bg-slate-800 overflow-hidden",
+                "flex justify-between items-center text-sm font-medium text-main",
+            track: "h-2.5 w-full rounded-full bg-foreground overflow-hidden",
             fill: "h-full transition-all duration-500 ease-out rounded-full",
         },
         variants: {
             color: {
-                primary: { fill: "bg-blue-600" },
-                success: { fill: "bg-emerald-500" },
-                warning: { fill: "bg-amber-500" },
-                danger: { fill: "bg-red-500" },
+                primary: { fill: "bg-primary" },
+                success: { fill: "bg-success" },
+                warning: { fill: "bg-warning" },
+                danger: { fill: "bg-danger" },
             },
         },
         defaultVariants: {

package/src/number-field/number-field.tsx

@@ -7,20 +7,19 @@ const numberFieldStyles = tv(
     {
         slots: {
             root: "flex flex-col gap-1.5 w-full antialiased",
-            label: "text-sm font-medium text-slate-700 dark:text-slate-300 ml-1",
+            label: "text-sm font-medium text-main ml-1",
             container: [
-                "relative flex items-center rounded-md border border-slate-200 bg-white transition-shadow shadow-sm",
+                "relative flex items-center rounded-md border border-slate-200 bg-app transition-shadow shadow-sm",
                 "focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500",
-                "dark:bg-slate-950 dark:border-slate-800",
             ],
-            input: "flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed",
+            input: "flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed",
             controls:
                 "flex flex-col border-l border-slate-200 dark:border-slate-800",
             stepper: [
-                "flex h-1/2 w-8 items-center justify-center transition-colors hover:bg-slate-50 active:bg-slate-100",
-                "dark:hover:bg-slate-900 dark:active:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none",
+                "flex h-1/2 w-8 items-center justify-center transition-colors hover:bg-foreground active:bg-foreground",
+                "disabled:opacity-30 disabled:pointer-events-none",
             ],
-            errorMessage: "text-xs text-red-500 font-medium ml-1 mt-1",
+            errorMessage: "text-xs text-danger font-medium ml-1 mt-1",
         },
     },
     {

package/src/pagination/pagination.tsx

@@ -12,15 +12,14 @@ const paginationStyles = tv(
             root: "flex w-full justify-center antialiased",
             itemsContainer: "flex items-center gap-1",
             item: [
-                "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors",
-                "hover:bg-slate-100 hover:text-slate-900",
-                "data-[selected]:bg-slate-900 data-[selected]:text-slate-50",
-                "dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:data-[selected]:bg-slate-50 dark:data-[selected]:text-slate-900",
+                "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors text-main",
+                "hover:bg-foreground hover:text-muted",
+                "data-[current]:bg-foreground data-[current]:text-muted",
                 "disabled:pointer-events-none disabled:opacity-50",
             ],
             ellipsis: "flex h-9 w-9 items-center justify-center text-slate-400",
             trigger:
-                "inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-transparent hover:bg-slate-100 dark:border-slate-800 dark:hover:bg-slate-800",
+                "inline-flex h-9 w-9 items-center justify-center rounded-md border border-light bg-transparent hover:bg-foreground ",
         },
     },
     {

package/src/popover/popover.tsx

@@ -11,11 +11,10 @@ const popoverStyles = tv(
     {
         slots: {
             content: [
-                "z-50 w-72 rounded-md border bg-white p-4 shadow-md outline-none antialiased",
-                "dark:bg-slate-950 dark:border-slate-800 dark:text-slate-50",
+                "z-50 w-72 rounded-md border border-light bg-app p-4 shadow-md outline-none antialiased text-main",
                 "data-[expanded]:animate-in data-[closed]:animate-out",
             ],
-            arrow: "fill-white stroke-slate-200 dark:fill-slate-950 dark:stroke-slate-800",
+            arrow: "fill-app stroke-slate-200 dark:stroke-slate-800",
         },
     },
     {

package/src/progress/progress.tsx

@@ -10,8 +10,8 @@ const progressStyles = tv(
             root: "flex flex-col gap-2 w-full antialiased",
             labelContainer:
                 "flex justify-between items-center text-sm font-medium text-slate-700 dark:text-slate-300",
-            track: "h-2 w-full rounded-full bg-slate-100 dark:bg-slate-800 overflow-hidden",
-            fill: "h-full bg-blue-600 transition-all duration-300 ease-in-out data-[indeterminate]:animate-progress-indeterminate",
+            track: "h-2 w-full rounded-full bg-appoverflow-hidden",
+            fill: "h-full bg-primary transition-all duration-300 ease-in-out data-[indeterminate]:animate-progress-indeterminate",
         },
         variants: {
             size: {