@zentauri-ui/zentauri-components 1.5.31 → 1.6.2

package/src/ui/inputs/variants.ts

@@ -2,12 +2,12 @@ import { cva } from "class-variance-authority";
 
 export const inputVariants = cva(
   [
-    "w-full min-w-0 rounded-xl border bg-white/5 text-slate-50 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
-    "ring-offset-slate-950 transition-colors",
-    "placeholder:text-slate-500",
+    "w-full min-w-0 rounded-xl border bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+    "ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
+    "placeholder:text-slate-500 dark:placeholder:text-slate-500",
     "focus-visible:outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50",
-    "read-only:cursor-default read-only:bg-white/[0.03]",
+    "read-only:cursor-default read-only:bg-black/[0.03] dark:bg-white/[0.03]",
     "file:h-8",
   ],
   {
@@ -19,10 +19,10 @@ export const inputVariants = cva(
           // Reset native padding so we control it fully
           "p-0! cursor-pointer",
           // File-selector button base styles
-          "file:cursor-pointer file:border-0 file:border-r file:border-white/10",
-          "file:bg-white/10 file:text-slate-200 file:font-medium",
+          "file:cursor-pointer file:border-0 file:border-r file:border-black/10 dark:file:border-white/10",
+          "file:bg-black/10 dark:file:bg-white/10 file:text-slate-700 dark:file:text-slate-200 file:font-medium",
           "file:transition-colors file:duration-200",
-          "hover:file:bg-white/15",
+          "hover:file:bg-black/15 dark:hover:file:bg-white/15",
           // Content area padding
           "[&:not(:disabled)]:file:hover:text-white",
           "disabled:file:cursor-not-allowed",
@@ -30,7 +30,7 @@ export const inputVariants = cva(
         checkbox: [
           "shrink-0 cursor-pointer appearance-none relative",
           "min-h-0! shadow-none outline-none",
-          "border-2 border-white/30 [&:not(:checked)]:bg-transparent",
+          "border-2 border-black/30 dark:border-white/30 [&:not(:checked)]:bg-transparent",
           "transition-[color,box-shadow,border-color,background-color]",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "read-only:cursor-default",
@@ -39,31 +39,33 @@ export const inputVariants = cva(
         radio: [
           "shrink-0 cursor-pointer appearance-none rounded-full",
           "min-h-0! shadow-none outline-none",
-          "border-2 border-white/30 bg-transparent! read-only:bg-transparent!",
-          "ring-2 ring-white/20 ring-offset-2 ring-offset-slate-950",
+          "border-2 border-black/30 dark:border-white/30 bg-transparent! read-only:bg-transparent!",
+          "ring-2 ring-black/20 dark:ring-white/20 ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-950",
           "transition-[color,box-shadow,background-color,border-color,box-shadow]",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "read-only:cursor-default",
         ],
+        date: "w-auto shrink-0",
       },
       appearance: {
-        default: "border-white/10 focus-visible:border-white/20",
+        default:
+          "border-black/10 dark:border-white/10 focus-visible:border-black/20 dark:focus-visible:border-white/20",
         warning:
-          "border-yellow-500/80 text-yellow-50 placeholder:text-yellow-300/70 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+          "border-yellow-500/80 text-yellow-950 dark:text-yellow-50 placeholder:text-yellow-800 dark:placeholder:text-yellow-300/70 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
         error:
-          "border-rose-500/80 text-rose-50 placeholder:text-rose-300/70 focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+          "border-rose-500/80 text-rose-950 dark:text-rose-50 placeholder:text-rose-800 dark:placeholder:text-rose-300/70 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
         success:
-          "border-emerald-500/70 text-emerald-50 placeholder:text-emerald-300/70 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
-        info: "border-blue-500/80 text-blue-50 placeholder:text-blue-300/70 focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+          "border-emerald-500/70 text-emerald-950 dark:text-emerald-50 placeholder:text-emerald-800 dark:placeholder:text-emerald-300/70 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+        info: "border-blue-500/80 text-blue-950 dark:text-blue-50 placeholder:text-blue-800 dark:placeholder:text-blue-300/70 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
         violet:
-          "border-violet-500/80 text-violet-50 placeholder:text-violet-300/70 focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+          "border-violet-500/80 text-violet-950 dark:text-violet-50 placeholder:text-violet-800 dark:placeholder:text-violet-300/70 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
         amber:
-          "border-amber-500/80 text-amber-50 placeholder:text-amber-300/70 focus-visible:border-amber-400 focus-visible:ring-amber-400/80",
-        pink: "border-pink-500/80 text-pink-50 placeholder:text-pink-300/70 focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+          "border-amber-500/80 text-amber-950 dark:text-amber-50 placeholder:text-amber-800 dark:placeholder:text-amber-300/70 focus-visible:border-amber-600 dark:focus-visible:border-amber-400 focus-visible:ring-amber-400/80",
+        pink: "border-pink-500/80 text-pink-950 dark:text-pink-50 placeholder:text-pink-800 dark:placeholder:text-pink-300/70 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
         indigo:
-          "border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80",
+          "border-indigo-500/80 text-indigo-950 dark:text-indigo-50 placeholder:text-indigo-800 dark:placeholder:text-indigo-300/70 focus-visible:border-indigo-600 dark:focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80",
         orange:
-          "border-orange-500/80 text-orange-50 placeholder:text-orange-300/70 focus-visible:border-orange-400 focus-visible:ring-orange-400/80",
+          "border-orange-500/80 text-orange-950 dark:text-orange-50 placeholder:text-orange-800 dark:placeholder:text-orange-300/70 focus-visible:border-orange-600 dark:focus-visible:border-orange-400 focus-visible:ring-orange-400/80",
       },
       size: {
         sm: "h-8 px-3 text-xs",
@@ -120,55 +122,55 @@ export const inputVariants = cva(
       {
         as: "file",
         appearance: "default",
-        class: "file:text-slate-200",
+        class: "file:text-slate-700 dark:file:text-slate-200",
       },
       {
         as: "file",
         appearance: "warning",
         class:
-          "file:bg-yellow-500/20 file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30",
+          "file:bg-yellow-500/20 file:text-yellow-800 dark:file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30",
       },
       {
         as: "file",
         appearance: "error",
         class:
-          "file:bg-rose-500/20 file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30",
+          "file:bg-rose-500/20 file:text-rose-800 dark:file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30",
       },
       {
         as: "file",
         appearance: "success",
         class:
-          "file:bg-emerald-500/20 file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30",
+          "file:bg-emerald-500/20 file:text-emerald-800 dark:file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30",
       },
       {
         as: "file",
         appearance: "info",
         class:
-          "file:bg-blue-500/20 file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30",
+          "file:bg-blue-500/20 file:text-blue-800 dark:file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30",
       },
       {
         as: "file",
         appearance: "violet",
         class:
-          "file:bg-violet-500/20 file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30",
+          "file:bg-violet-500/20 file:text-violet-800 dark:file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30",
       },
       {
         as: "file",
         appearance: "amber",
         class:
-          "file:bg-amber-500/20 file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30",
+          "file:bg-amber-500/20 file:text-amber-800 dark:file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30",
       },
       {
         as: "file",
         appearance: "pink",
         class:
-          "file:bg-pink-500/20 file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30",
+          "file:bg-pink-500/20 file:text-pink-800 dark:file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30",
       },
       {
         as: "file",
         appearance: "indigo",
         class:
-          "file:bg-indigo-500/20 file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30",
+          "file:bg-indigo-500/20 file:text-indigo-800 dark:file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30",
       },
       // ── checkbox / radio: size (overrides text-field height & padding) ───
       {
@@ -206,110 +208,167 @@ export const inputVariants = cva(
         as: "checkbox",
         appearance: "default",
         class:
-          "border-slate-400/70! checked:border-slate-200 checked:text-slate-200 hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70",
+          "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:text-slate-700 dark:checked:text-slate-200 hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70",
       },
       {
         as: "checkbox",
         appearance: "warning",
         class:
-          "border-yellow-500/70! checked:border-yellow-400 checked:text-yellow-300 hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+          "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:text-yellow-700 dark:checked:text-yellow-300 hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
       },
       {
         as: "checkbox",
         appearance: "error",
         class:
-          "border-rose-500/70! checked:border-rose-400 checked:text-rose-300 hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+          "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:text-rose-700 dark:checked:text-rose-300 hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
       },
       {
         as: "checkbox",
         appearance: "success",
         class:
-          "border-emerald-500/70! checked:border-emerald-400 checked:text-emerald-300 hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+          "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:text-emerald-700 dark:checked:text-emerald-300 hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
       },
       {
         as: "checkbox",
         appearance: "info",
         class:
-          "border-blue-500/70! checked:border-blue-400 checked:text-blue-300 hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+          "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:text-blue-700 dark:checked:text-blue-300 hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
       },
       {
         as: "checkbox",
         appearance: "violet",
         class:
-          "border-violet-500/70! checked:after:bg-violet-400 checked:border-violet-400 checked:text-violet-300 hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+          "border-violet-500/70! checked:after:bg-violet-600 dark:checked:after:bg-violet-400 checked:border-violet-600 dark:checked:border-violet-400 checked:text-violet-700 dark:checked:text-violet-300 hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
       },
       {
         as: "checkbox",
         appearance: "amber",
         class:
-          "border-amber-500/70! checked:border-amber-400! checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!",
+          "border-amber-500/70! checked:border-amber-400! checked:text-amber-700 dark:checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!",
       },
       {
         as: "checkbox",
         appearance: "pink",
         class:
-          "border-pink-500/70! checked:border-pink-400 checked:text-pink-300 hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+          "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:text-pink-700 dark:checked:text-pink-300 hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
       },
       {
         as: "checkbox",
         appearance: "indigo",
         class:
-          "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!",
+          "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-700 dark:checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!",
       },
       // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─
       {
         as: "radio",
         appearance: "default",
         class:
-          "border-slate-400/70! checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-slate-300/90!",
+          "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-slate-300/90!",
       },
       {
         as: "radio",
         appearance: "warning",
         class:
-          "border-yellow-500/70! checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-yellow-400/90!",
+          "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-yellow-400/90!",
       },
       {
         as: "radio",
         appearance: "error",
         class:
-          "border-rose-500/70! checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-rose-400/90!",
+          "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-rose-400/90!",
       },
       {
         as: "radio",
         appearance: "success",
         class:
-          "border-emerald-500/70! checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-emerald-400/90!",
+          "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-emerald-400/90!",
       },
       {
         as: "radio",
         appearance: "info",
         class:
-          "border-blue-500/70! checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-blue-400/90!",
+          "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-blue-400/90!",
       },
       {
         as: "radio",
         appearance: "violet",
         class:
-          "border-violet-500/70! checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-violet-400/90!",
+          "border-violet-500/70! checked:border-violet-600 dark:checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-violet-400/90!",
       },
       {
         as: "radio",
         appearance: "amber",
         class:
-          "border-amber-500/70! checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-400 focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-amber-400/90!",
+          "border-amber-500/70! checked:border-amber-600 dark:checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-600 dark:hover:border-amber-400 focus-visible:border-amber-600 dark:focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-amber-400/90!",
       },
       {
         as: "radio",
         appearance: "pink",
         class:
-          "border-pink-500/70! checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-pink-400/90!",
+          "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-pink-400/90!",
       },
       {
         as: "radio",
         appearance: "indigo",
         class:
-          "border-indigo-500/70! checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-400 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-indigo-400/90!",
+          "border-indigo-500/70! checked:border-indigo-600 dark:checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-600 dark:hover:border-indigo-400 focus-visible:border-indigo-600 dark:focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-indigo-400/90!",
+      },
+      {
+        as: "date",
+        appearance: "default",
+        class:
+          "bg-white dark:bg-black border border-black/10 dark:border-white/80 text-black dark:text-white",
+      },
+      {
+        as: "date",
+        appearance: "warning",
+        class:
+          "bg-yellow-900 dark:bg-transparent text-yellow-50 dark:text-yellow-50",
+      },
+      {
+        as: "date",
+        appearance: "error",
+        class: "bg-rose-900 dark:bg-transparent text-rose-50 dark:text-rose-50",
+      },
+      {
+        as: "date",
+        appearance: "success",
+        class:
+          "bg-emerald-900 dark:bg-transparent text-emerald-50 dark:text-emerald-50",
+      },
+      {
+        as: "date",
+        appearance: "info",
+        class: "bg-blue-900 dark:bg-transparent text-blue-50 dark:text-blue-50",
+      },
+      {
+        as: "date",
+        appearance: "violet",
+        class:
+          "bg-violet-900 dark:bg-transparent text-violet-50 dark:text-violet-50",
+      },
+      {
+        as: "date",
+        appearance: "amber",
+        class:
+          "bg-amber-900 dark:bg-transparent text-amber-50 dark:text-amber-50",
+      },
+      {
+        as: "date",
+        appearance: "pink",
+        class: "bg-pink-900 dark:bg-transparent text-pink-50 dark:text-pink-50",
+      },
+      {
+        as: "date",
+        appearance: "indigo",
+        class:
+          "bg-indigo-900 dark:bg-transparent text-indigo-50 dark:text-indigo-50",
+      },
+      {
+        as: "date",
+        appearance: "orange",
+        class:
+          "bg-orange-900 dark:bg-transparent text-orange-50 dark:text-orange-50",
       },
     ],
   },

package/src/ui/modal/modal-base.tsx

@@ -154,7 +154,7 @@ export function ModalContent({
 
   return createPortal(
     open ? (
-      <div className="fixed inset-0 z-50" data-slot="modal-portal">
+      <div className="fixed inset-0 z-9999" data-slot="modal-portal">
         <div
           role="presentation"
           data-slot="modal-overlay"
@@ -273,7 +273,7 @@ export function ModalClose({
       type="button"
       data-slot="modal-close"
       className={cn(
-        "absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
+        "absolute right-4 top-4 inline-flex size-14 items-center cursor-pointer justify-center rounded-md text-slate-800 dark:text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
         className,
       )}
       aria-label="Close dialog"

package/src/ui/modal/variants.ts

@@ -9,38 +9,47 @@ export const modalTriggerVariants = cva(
   {
     variants: {
       appearance: {
-        default: "bg-slate-950",
-        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
-        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
-        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
-        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
-        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        default:
+          "bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-50",
+        glass:
+          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl text-sky-800 dark:text-sky-50",
+        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl text-rose-800 dark:text-rose-50",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl text-purple-800 dark:text-purple-50",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl text-pink-800 dark:text-pink-50",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl text-orange-800 dark:text-orange-50",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl text-yellow-800 dark:text-yellow-50",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl text-teal-800 dark:text-teal-50",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl text-indigo-800 dark:text-indigo-50",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl text-emerald-800 dark:text-emerald-50",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl text-gray-800 dark:text-gray-50",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl text-amber-800 dark:text-amber-50",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl text-violet-800 dark:text-violet-50",
         "gradient-blue":
-          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-blue-800 dark:text-blue-50",
         "gradient-green":
-          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl text-green-800 dark:text-green-50",
         "gradient-red":
-          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-red-800 dark:text-red-50",
         "gradient-yellow":
-          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl text-yellow-800 dark:text-yellow-50",
         "gradient-purple":
-          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-purple-800 dark:text-purple-50",
         "gradient-teal":
-          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl text-teal-800 dark:text-teal-50",
         "gradient-indigo":
-          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-indigo-800 dark:text-indigo-50",
         "gradient-pink":
-          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl text-pink-800 dark:text-pink-50",
         "gradient-orange":
-          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl text-orange-800 dark:text-orange-50",
       },
     },
     defaultVariants: {
@@ -50,7 +59,7 @@ export const modalTriggerVariants = cva(
 );
 
 export const modalContentVariants = cva(
-  "fixed left-1/2 z-50 w-[calc(100%-2rem)] max-h-[min(90vh,720px)] translate-x-[-50%] overflow-y-auto border border-white/10 bg-slate-950 p-6 text-slate-50 shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
+  "fixed left-1/2 z-50 w-[calc(100%-2rem)] max-h-[min(90vh,720px)] translate-x-[-50%] overflow-y-auto border border-black/10 dark:border-white/10 bg-slate-50 dark:bg-slate-950 p-6 text-slate-900 dark:text-slate-50 shadow-[0_12px_40px_rgba(15,23,42,0.14)] dark:shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
   {
     variants: {
       size: {
@@ -66,38 +75,46 @@ export const modalContentVariants = cva(
         bottom: "bottom-10 translate-y-0",
       },
       appearance: {
-        default: "bg-slate-950",
-        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
-        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
-        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
-        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
-        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        default: "bg-slate-50 dark:bg-slate-950",
+        glass:
+          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
         "gradient-green":
-          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl",
         "gradient-red":
-          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
         "gradient-yellow":
-          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl",
         "gradient-purple":
-          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
         "gradient-teal":
-          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl",
         "gradient-indigo":
-          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
         "gradient-pink":
-          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl",
         "gradient-orange":
-          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl",
       },
     },
     defaultVariants: {

package/src/ui/pagination/pagination.tsx

@@ -77,7 +77,7 @@ export const Pagination = ({
 
   const inactiveTriggerClass = cn(
     buttonVariants({ appearance: "ghost", size }),
-    "bg-white/[0.04] text-slate-200 hover:bg-white/10",
+    "bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10",
   );
 
   const currentTriggerClass = buttonVariants({ appearance, size });

package/src/ui/pagination/types.ts

@@ -36,10 +36,7 @@ export type UsePaginationResult = {
   canGoNext: boolean;
 };
 
-export type PaginationProps = Omit<
-  ComponentPropsWithRef<"nav">,
-  "onChange"
-> &
+export type PaginationProps = Omit<ComponentPropsWithRef<"nav">, "onChange"> &
   VariantProps<typeof buttonVariants> & {
     pageCount: number;
     page?: number;