@zentauri-ui/zentauri-components 1.5.31 → 1.6.0

package/src/ui/accordion/variants.ts

@@ -3,39 +3,45 @@ import { cva } from "class-variance-authority";
 export const accordionVariants = cva("w-full", {
   variants: {
     appearance: {
-      default: "divide-y divide-white/10 rounded-xl border border-white/10",
-      outline: "divide-y divide-white/10 rounded-xl border border-white/15",
-      ghost: "divide-y divide-white/5",
+      default:
+        "divide-y divide-black/10 dark:divide-white/10 rounded-xl border border-black/10 dark:border-white/10",
+      outline:
+        "divide-y divide-black/10 dark:divide-white/10 rounded-xl border border-black/15 dark:border-white/15",
+      ghost: "divide-y divide-black/5 dark:divide-white/5",
       card: "space-y-2",
       separated: "space-y-3",
-      sky: "divide-y divide-sky-600 rounded-xl border border-sky-600",
-      rose: "divide-y divide-rose-600 rounded-xl border border-rose-600",
-      purple: "divide-y divide-purple-600 rounded-xl border border-purple-600",
-      pink: "divide-y divide-pink-600 rounded-xl border border-pink-600",
-      orange: "divide-y divide-orange-600 rounded-xl border border-orange-600",
-      yellow: "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
-      teal: "divide-y divide-teal-600 rounded-xl border border-teal-600",
-      indigo: "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+      sky: "divide-y divide-sky-800 dark:divide-sky-600 rounded-xl border border-sky-800 dark:border-sky-600",
+      rose: "divide-y divide-rose-800 dark:divide-rose-600 rounded-xl border border-rose-800 dark:border-rose-600",
+      purple:
+        "divide-y divide-purple-800 dark:divide-purple-600 rounded-xl border border-purple-800 dark:border-purple-600",
+      pink: "divide-y divide-pink-800 dark:divide-pink-600 rounded-xl border border-pink-800 dark:border-pink-600",
+      orange:
+        "divide-y divide-orange-800 dark:divide-orange-600 rounded-xl border border-orange-800 dark:border-orange-600",
+      yellow:
+        "divide-y divide-yellow-800 dark:divide-yellow-600 rounded-xl border border-yellow-800 dark:border-yellow-600",
+      teal: "divide-y divide-teal-800 dark:divide-teal-600 rounded-xl border border-teal-800 dark:border-teal-600",
+      indigo:
+        "divide-y divide-indigo-800 dark:divide-indigo-600 rounded-xl border border-indigo-800 dark:border-indigo-600",
       emerald:
-        "divide-y divide-emerald-600 rounded-xl border border-emerald-600",
+        "divide-y divide-emerald-800 dark:divide-emerald-600 rounded-xl border border-emerald-800 dark:border-emerald-600",
       "gradient-blue":
-        "divide-y divide-blue-600 rounded-xl border border-blue-600",
+        "divide-y divide-blue-800 dark:divide-blue-600 rounded-xl border border-blue-800 dark:border-blue-600",
       "gradient-green":
-        "divide-y divide-green-600 rounded-xl border border-green-600",
+        "divide-y divide-green-800 dark:divide-green-600 rounded-xl border border-green-800 dark:border-green-600",
       "gradient-red":
-        "divide-y divide-red-600 rounded-xl border border-red-600",
+        "divide-y divide-red-800 dark:divide-red-600 rounded-xl border border-red-800 dark:border-red-600",
       "gradient-yellow":
-        "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
+        "divide-y divide-yellow-800 dark:divide-yellow-600 rounded-xl border border-yellow-800 dark:border-yellow-600",
       "gradient-purple":
-        "divide-y divide-purple-600 rounded-xl border border-purple-600",
+        "divide-y divide-purple-800 dark:divide-purple-600 rounded-xl border border-purple-800 dark:border-purple-600",
       "gradient-teal":
-        "divide-y divide-teal-600 rounded-xl border border-teal-600",
+        "divide-y divide-teal-800 dark:divide-teal-600 rounded-xl border border-teal-800 dark:border-teal-600",
       "gradient-indigo":
-        "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+        "divide-y divide-indigo-800 dark:divide-indigo-600 rounded-xl border border-indigo-800 dark:border-indigo-600",
       "gradient-pink":
-        "divide-y divide-pink-600 rounded-xl border border-pink-600",
+        "divide-y divide-pink-800 dark:divide-pink-600 rounded-xl border border-pink-800 dark:border-pink-600",
       "gradient-orange":
-        "divide-y divide-orange-600 rounded-xl border border-orange-600",
+        "divide-y divide-orange-800 dark:divide-orange-600 rounded-xl border border-orange-800 dark:border-orange-600",
     },
     size: {
       sm: "px-3 py-2 text-sm",
@@ -49,48 +55,54 @@ export const accordionVariants = cva("w-full", {
   },
 });
 
-export const accordionItemVariants = cva("", {
+export const accordionItemVariants = cva("text-slate-900 dark:text-slate-200", {
   variants: {
     appearance: {
       default: "",
       outline: "",
       ghost: "",
-      card: "rounded-xl border border-white/10 bg-white/[0.03] p-2",
-      separated: "rounded-xl border border-white/10 bg-slate-950/40 p-2",
-      sky: "rounded-xl border border-sky-600 bg-sky-600/[0.03] p-2",
-      rose: "rounded-xl border border-rose-600 bg-rose-600/[0.03] p-2",
-      purple: "rounded-xl border border-purple-600 bg-purple-600/[0.03] p-2",
-      pink: "rounded-xl border border-pink-600 bg-pink-600/[0.03] p-2",
-      orange: "rounded-xl border border-orange-600 bg-orange-600/[0.03] p-2",
-      yellow: "rounded-xl border border-yellow-600 bg-yellow-600/[0.03] p-2",
-      teal: "rounded-xl border border-teal-600 bg-teal-600/[0.03] p-2",
-      indigo: "rounded-xl border border-indigo-600 bg-indigo-600/[0.03] p-2",
-      emerald: "rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2",
+      card: "rounded-xl border border-black/10 bg-black/5 p-2",
+      separated:
+        "rounded-xl border border-black/10 dark:border-white/10 bg-slate-50/40 dark:bg-slate-950/40 p-2",
+      sky: "rounded-xl border border-sky-800 dark:border-sky-600 bg-sky-100/50 dark:bg-sky-600/[0.03] p-2",
+      rose: "rounded-xl border border-rose-800 dark:border-rose-600 bg-rose-100/50 dark:bg-rose-600/[0.03] p-2",
+      purple:
+        "rounded-xl border border-purple-800 dark:border-purple-600 bg-purple-100/50 dark:bg-purple-600/[0.03] p-2",
+      pink: "rounded-xl border border-pink-800 dark:border-pink-600 bg-pink-100/50 dark:bg-pink-600/[0.03] p-2",
+      orange:
+        "rounded-xl border border-orange-800 dark:border-orange-600 bg-orange-100/50 dark:bg-orange-600/[0.03] p-2",
+      yellow:
+        "rounded-xl border border-yellow-800 dark:border-yellow-600 bg-yellow-100/50 dark:bg-yellow-600/[0.03] p-2",
+      teal: "rounded-xl border border-teal-800 dark:border-teal-600 bg-teal-100/50 dark:bg-teal-600/[0.03] p-2",
+      indigo:
+        "rounded-xl border border-indigo-800 dark:border-indigo-600 bg-indigo-100/50 dark:bg-indigo-600/[0.03] p-2",
+      emerald:
+        "rounded-xl border border-emerald-800 dark:border-emerald-600 bg-emerald-100/50 dark:bg-emerald-600/[0.03] p-2",
       "gradient-blue":
-        "rounded-xl bg-linear-to-r from-blue-600 to-purple-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-blue-300 dark:from-blue-600 to-purple-300 dark:to-purple-600 p-2",
       "gradient-green":
-        "rounded-xl bg-linear-to-r from-green-600 to-lime-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-green-300 dark:from-green-600 to-lime-300 dark:to-lime-600 p-2",
       "gradient-red":
-        "rounded-xl bg-linear-to-r from-red-600 to-pink-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-red-300 dark:from-red-600 to-pink-300 dark:to-pink-600 p-2",
       "gradient-yellow":
-        "rounded-xl bg-linear-to-r from-yellow-600 to-orange-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-yellow-300 dark:from-yellow-600 to-orange-300 dark:to-orange-600 p-2",
       "gradient-purple":
-        "rounded-xl bg-linear-to-r from-purple-600 to-pink-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-purple-300 dark:from-purple-600 to-pink-300 dark:to-pink-600 p-2",
       "gradient-teal":
-        "rounded-xl bg-linear-to-r from-teal-600 to-cyan-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-teal-300 dark:from-teal-600 to-cyan-300 dark:to-cyan-600 p-2",
       "gradient-indigo":
-        "rounded-xl bg-linear-to-r from-indigo-600 to-purple-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-indigo-300 dark:from-indigo-600 to-purple-300 dark:to-purple-600 p-2",
       "gradient-pink":
-        "rounded-xl bg-linear-to-r from-pink-600 to-rose-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-pink-300 dark:from-pink-600 to-rose-300 dark:to-rose-600 p-2",
       "gradient-orange":
-        "rounded-xl bg-linear-to-r from-orange-600 to-red-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-orange-300 dark:from-orange-600 to-red-300 dark:to-red-600 p-2",
     },
   },
   defaultVariants: { appearance: "default" },
 });
 
 export const accordionTriggerVariants = cva(
-  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-50 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white/30",
+  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-800 dark:text-slate-200 outline-none transition hover:text-slate-900 dark:hover:text-white focus-visible:ring-2 focus-visible:ring-black/30 dark:focus-visible:ring-white/30",
   {
     variants: {
       size: {

package/src/ui/alert/variants.ts

@@ -1,42 +1,52 @@
 import { cva } from "class-variance-authority";
 
 export const alertVariants = cva(
-  "relative flex w-full gap-3 border text-sm ring-offset-slate-950 transition-colors",
+  "relative flex w-full gap-3 border text-sm ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/5 text-slate-50",
-        success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
-        warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
-        error: "border-rose-500/50 bg-rose-500/10 text-rose-50",
-        info: "border-sky-500/40 bg-sky-500/10 text-sky-50",
-        ghost: "border-transparent bg-transparent text-slate-200",
-        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",
-        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50",
+        success:
+          "border-emerald-500/40 bg-emerald-500/10 text-emerald-950 dark:text-emerald-50",
+        warning:
+          "border-amber-500/40 bg-amber-500/10 text-amber-950 dark:text-amber-50",
+        error:
+          "border-rose-500/50 bg-rose-500/10 text-rose-950 dark:text-rose-50",
+        info: "border-sky-500/40 bg-sky-500/10 text-sky-950 dark:text-sky-50",
+        ghost:
+          "border-transparent bg-transparent text-slate-700 dark:text-slate-200",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-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-slate-900 dark:text-slate-50",
       },
       size: {
         sm: "rounded-lg p-3",
@@ -62,13 +72,16 @@ export const alertTitleVariants = cva("font-semibold leading-tight", {
   defaultVariants: { size: "md" },
 });
 
-export const alertDescriptionVariants = cva("text-slate-300", {
-  variants: {
-    size: {
-      sm: "text-xs md:text-sm",
-      md: "text-xs md:text-sm",
-      lg: "text-xs md:text-sm",
+export const alertDescriptionVariants = cva(
+  "text-slate-600 dark:text-slate-300",
+  {
+    variants: {
+      size: {
+        sm: "text-xs md:text-sm",
+        md: "text-xs md:text-sm",
+        lg: "text-xs md:text-sm",
+      },
     },
+    defaultVariants: { size: "md" },
   },
-  defaultVariants: { size: "md" },
-});
+);

package/src/ui/avatar/variants.ts

@@ -1,43 +1,51 @@
 import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
-  "relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200",
+  "relative flex shrink-0 overflow-hidden rounded-full border border-black/10 dark:border-white/10 text-slate-700 dark:text-slate-200",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/10 text-slate-200",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/10 dark:bg-white/10 text-slate-700 dark:text-slate-200",
         muted:
-          "border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200",
-        sky: "border-sky-600 bg-sky-600/[0.03] text-slate-200",
-        rose: "border-rose-600 bg-rose-600/[0.03] text-slate-200",
-        purple: "border-purple-600 bg-purple-600/[0.03] text-slate-200",
-        pink: "border-pink-600 bg-pink-600/[0.03] text-slate-200",
-        orange: "border-orange-600 bg-orange-600/[0.03] text-slate-200",
-        yellow: "border-yellow-600 bg-yellow-600/[0.03] text-slate-200",
-        teal: "border-teal-600 bg-teal-600/[0.03] text-slate-200",
-        indigo: "border-indigo-600 bg-indigo-600/[0.03] text-slate-200",
-        emerald: "border-emerald-600 bg-emerald-600/[0.03] text-slate-200",
-        gray: "border-gray-600 bg-gray-600/[0.03] text-slate-200",
-        amber: "border-amber-600 bg-amber-600/[0.03] text-slate-200",
-        violet: "border-violet-600 bg-violet-600/[0.03] text-slate-200",
+          "border-black/40 bg-slate-50 dark:border-white/10 dark:bg-slate-950/40 text-slate-700 dark:text-slate-200",
+        sky: "border-sky-800 dark:border-sky-600 bg-sky-100/50 dark:bg-sky-600/[0.03] text-slate-700 dark:text-slate-200",
+        rose: "border-rose-800 dark:border-rose-600 bg-rose-100/50 dark:bg-rose-600/[0.03] text-slate-700 dark:text-slate-200",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-100/50 dark:bg-purple-600/[0.03] text-slate-700 dark:text-slate-200",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-100/50 dark:bg-pink-600/[0.03] text-slate-700 dark:text-slate-200",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-100/50 dark:bg-orange-600/[0.03] text-slate-700 dark:text-slate-200",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-100/50 dark:bg-yellow-600/[0.03] text-slate-700 dark:text-slate-200",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-100/50 dark:bg-teal-600/[0.03] text-slate-700 dark:text-slate-200",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-100/50 dark:bg-indigo-600/[0.03] text-slate-700 dark:text-slate-200",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-100/50 dark:bg-emerald-600/[0.03] text-slate-700 dark:text-slate-200",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-100/50 dark:bg-gray-600/[0.03] text-slate-700 dark:text-slate-200",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-100/50 dark:bg-amber-600/[0.03] text-slate-700 dark:text-slate-200",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-100/50 dark:bg-violet-600/[0.03] text-slate-700 dark:text-slate-200",
         "gradient-blue":
-          "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-blue-500 dark:from-blue-600 to-purple-500 dark:to-purple-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-green":
-          "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-green-500 dark:from-green-600 to-lime-500 dark:to-lime-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-red":
-          "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-red-500 dark:from-red-600 to-pink-500 dark:to-pink-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-yellow-500 dark:from-yellow-600 to-orange-500 dark:to-orange-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-purple":
-          "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-purple-500 dark:from-purple-600 to-pink-500 dark:to-pink-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-teal":
-          "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-teal-500 dark:from-teal-600 to-cyan-500 dark:to-cyan-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-indigo-500 dark:from-indigo-600 to-purple-500 dark:to-purple-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-pink":
-          "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-pink-500 dark:from-pink-600 to-rose-500 dark:to-rose-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-orange":
-          "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-orange-500 dark:from-orange-600 to-red-500 dark:to-red-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
       },
       size: {
         sm: "size-8 text-xs",
@@ -56,9 +64,9 @@ export const avatarVariants = cva(
 export const avatarImageVariants = cva("aspect-square size-full object-cover");
 
 export const avatarFallbackVariants = cva(
-  "flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100",
+  "flex size-full items-center justify-center bg-slate-200 dark:bg-slate-800 font-medium text-slate-800 dark:text-slate-100",
 );
 
 export const avatarGroupVariants = cva(
-  "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0",
+  "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-white dark:[&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0",
 );

package/src/ui/badge/variants.ts

@@ -5,45 +5,58 @@ import { cva } from "class-variance-authority";
  * Reused by primitives that should stay visually aligned with Button.
  */
 export const buttonLikeSolidAppearances = {
-  default: "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
-  secondary: "bg-slate-800 text-slate-50",
-  destructive: "bg-rose-700 text-white",
-  outline: "border border-white/10 bg-white/5 text-slate-50",
-  ghost: "bg-transparent text-slate-200",
-  glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md",
-  emerald: "bg-emerald-800 text-white",
-  indigo: "bg-indigo-600 text-white",
-  purple: "bg-purple-600 text-white",
-  pink: "bg-pink-600 text-white",
-  rose: "bg-rose-700 text-white",
-  sky: "bg-sky-700 text-white",
-  teal: "bg-teal-700 text-white",
-  yellow: "bg-yellow-800 text-white",
-  orange: "bg-orange-800 text-white",
-  "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600 text-white",
-  "gradient-green": "bg-linear-to-r from-green-600 to-lime-600 text-white",
-  "gradient-red": "bg-linear-to-r from-red-600 to-pink-600 text-white",
-  "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600 text-white",
-  "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600 text-white",
-  "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600 text-white",
-  "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600 text-white",
-  "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600 text-white",
-  "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600 text-white",
+  default:
+    "bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+  secondary: "bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-50",
+  destructive: "bg-rose-500 dark:bg-rose-700 text-slate-900 dark:text-white",
+  outline:
+    "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50",
+  ghost: "bg-transparent text-slate-700 dark:text-slate-200",
+  glass:
+    "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white backdrop-blur-md",
+  emerald: "bg-emerald-500 dark:bg-emerald-800 text-slate-100 dark:text-white",
+  indigo: "bg-indigo-800 dark:bg-indigo-600 text-slate-100 dark:text-white",
+  purple: "bg-purple-800 dark:bg-purple-600 text-slate-100 dark:text-white",
+  pink: "bg-pink-800 dark:bg-pink-600 text-slate-100 dark:text-white",
+  rose: "bg-rose-500 dark:bg-rose-700 text-slate-100 dark:text-white",
+  sky: "bg-sky-500 dark:bg-sky-700 text-slate-100 dark:text-white",
+  teal: "bg-teal-500 dark:bg-teal-700 text-slate-100 dark:text-white",
+  yellow: "bg-yellow-500 dark:bg-yellow-800 text-slate-100 dark:text-white",
+  orange: "bg-orange-500 dark:bg-orange-800 text-slate-100 dark:text-white",
+  "gradient-blue":
+    "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-slate-100 dark:text-white",
+  "gradient-green":
+    "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-slate-100 dark:text-white",
+  "gradient-red":
+    "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-slate-100 dark:text-white",
+  "gradient-yellow":
+    "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-slate-100 dark:text-white",
+  "gradient-purple":
+    "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-slate-100 dark:text-white",
+  "gradient-teal":
+    "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-slate-100 dark:text-white",
+  "gradient-indigo":
+    "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-slate-100 dark:text-white",
+  "gradient-pink":
+    "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-slate-100 dark:text-white",
+  "gradient-orange":
+    "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-slate-100 dark:text-white",
 } as const;
 
 export type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;
 
 const badgeAppearances = {
   ...buttonLikeSolidAppearances,
-  outline: "border border-white/15 bg-transparent text-slate-200 shadow-none",
-  ghost: "bg-transparent text-slate-300 shadow-none",
+  outline:
+    "border border-black/15 dark:border-white/15 bg-transparent text-slate-700 dark:text-slate-200 shadow-none",
+  ghost: "bg-transparent text-slate-600 dark:text-slate-300 shadow-none",
 } as const;
 
 export const badgeVariants = cva(
   [
     "inline-flex max-w-full items-center justify-center gap-1 font-medium",
-    "whitespace-nowrap ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+    "whitespace-nowrap ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2",
     "select-none",
   ],
   {
@@ -69,7 +82,7 @@ export const badgeVariants = cva(
 );
 
 export const badgeCloseButtonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current opacity-70 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+  "inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/40 dark:focus-visible:ring-white/40",
   {
     variants: {
       size: {

package/src/ui/breadcrumb/variants.ts

@@ -3,20 +3,20 @@ import { cva } from "class-variance-authority";
 export const breadcrumbNavVariants = cva("text-sm", {
   variants: {
     appearance: {
-      default: "text-slate-300",
-      muted: "text-slate-400",
-      sky: "text-sky-600",
-      rose: "text-rose-600",
-      purple: "text-purple-600",
-      pink: "text-pink-600",
-      orange: "text-orange-600",
-      yellow: "text-yellow-600",
-      teal: "text-teal-600",
-      indigo: "text-indigo-600",
-      emerald: "text-emerald-600",
-      gray: "text-gray-600",
-      amber: "text-amber-600",
-      violet: "text-violet-600",
+      default: "text-slate-600 dark:text-slate-300",
+      muted: "text-slate-500 dark:text-slate-400",
+      sky: "text-sky-800 dark:text-sky-600",
+      rose: "text-rose-800 dark:text-rose-600",
+      purple: "text-purple-800 dark:text-purple-600",
+      pink: "text-pink-800 dark:text-pink-600",
+      orange: "text-orange-800 dark:text-orange-600",
+      yellow: "text-yellow-800 dark:text-yellow-600",
+      teal: "text-teal-800 dark:text-teal-600",
+      indigo: "text-indigo-800 dark:text-indigo-600",
+      emerald: "text-emerald-800 dark:text-emerald-600",
+      gray: "text-gray-800 dark:text-gray-600",
+      amber: "text-amber-800 dark:text-amber-600",
+      violet: "text-violet-800 dark:text-violet-600",
     },
   },
   defaultVariants: {
@@ -31,19 +31,24 @@ export const breadcrumbListVariants = cva(
 export const breadcrumbItemVariants = cva("inline-flex items-center gap-1.5");
 
 export const breadcrumbLinkVariants = cva(
-  "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+  "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/30 dark:focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-950",
 );
 
-export const breadcrumbPageVariants = cva("font-medium text-slate-100");
+export const breadcrumbPageVariants = cva(
+  "font-medium text-slate-800 dark:text-slate-100",
+);
 
-export const breadcrumbSeparatorVariants = cva("select-none text-slate-600", {
-  variants: {
-    size: {
-      sm: "text-xs",
-      md: "text-sm",
+export const breadcrumbSeparatorVariants = cva(
+  "select-none text-slate-400 dark:text-slate-600",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
     },
   },
-  defaultVariants: {
-    size: "md",
-  },
-});
+);

package/src/ui/buttons/variants.ts

@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 export const buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl",
-    "text-sm font-medium ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+    "text-sm font-medium ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2",
     "disabled:pointer-events-none disabled:opacity-50",
     "select-none",
   ],
@@ -12,45 +12,55 @@ export const buttonVariants = cva(
     variants: {
       appearance: {
         default:
-          "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-white",
-        secondary: "bg-slate-800 text-slate-50 hover:bg-slate-700",
-        destructive: "bg-rose-700 text-white hover:bg-rose-800",
+          "bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-black dark:hover:bg-white",
+        secondary:
+          "bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-50 hover:bg-slate-300 dark:hover:bg-slate-700",
+        destructive:
+          "bg-rose-500 dark:bg-rose-700 text-white hover:bg-rose-500 dark:hover:bg-rose-800",
         outline:
-          "border border-white/10 bg-white/5 text-slate-50 hover:bg-white/10",
-        ghost: "bg-transparent text-slate-200 hover:bg-white/5",
-        link: "bg-transparent text-cyan-300 underline-offset-4 hover:underline",
+          "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50 hover:bg-black/10 dark:hover:bg-white/10",
+        ghost:
+          "bg-transparent text-slate-700 dark:text-slate-200 hover:bg-black/5 dark:hover:bg-white/5",
+        link: "bg-transparent text-cyan-700 dark:text-cyan-300 underline-offset-4 hover:underline",
         glass:
-          "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/15",
-        emerald: "bg-emerald-800 text-white hover:bg-emerald-900",
-        indigo: "bg-indigo-600 text-white hover:bg-indigo-600",
-        purple: "bg-purple-600 text-white hover:bg-purple-600",
-        pink: "bg-pink-600 text-white hover:bg-pink-600",
-        rose: "bg-rose-600 text-white hover:bg-rose-600",
-        sky: "bg-sky-700 text-white hover:bg-sky-800",
-        teal: "bg-teal-700 text-white hover:bg-teal-800",
-        yellow: "bg-yellow-800 text-white hover:bg-yellow-900",
-        orange: "bg-orange-800 text-white hover:bg-orange-900",
-        gray: "bg-gray-700 text-white hover:bg-gray-800",
-        amber: "bg-amber-800 text-white hover:bg-amber-900",
-        violet: "bg-violet-600 text-white hover:bg-violet-600",
+          "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white backdrop-blur-md hover:bg-black/15 dark:hover:bg-white/15",
+        emerald:
+          "bg-emerald-500 dark:bg-emerald-800 text-white hover:bg-emerald-500 dark:hover:bg-emerald-900",
+        indigo:
+          "bg-indigo-800 dark:bg-indigo-600 text-white hover:bg-indigo-800 dark:hover:bg-indigo-600",
+        purple:
+          "bg-purple-800 dark:bg-purple-600 text-white hover:bg-purple-800 dark:hover:bg-purple-600",
+        pink: "bg-pink-800 dark:bg-pink-600 text-white hover:bg-pink-800 dark:hover:bg-pink-600",
+        rose: "bg-rose-800 dark:bg-rose-600 text-white hover:bg-rose-800 dark:hover:bg-rose-600",
+        sky: "bg-sky-500 dark:bg-sky-700 text-white hover:bg-sky-500 dark:hover:bg-sky-800",
+        teal: "bg-teal-500 dark:bg-teal-700 text-white hover:bg-teal-500 dark:hover:bg-teal-800",
+        yellow:
+          "bg-yellow-500 dark:bg-yellow-800 text-white hover:bg-yellow-500 dark:hover:bg-yellow-900",
+        orange:
+          "bg-orange-500 dark:bg-orange-800 text-white hover:bg-orange-500 dark:hover:bg-orange-900",
+        gray: "bg-gray-500 dark:bg-gray-700 text-white hover:bg-gray-500 dark:hover:bg-gray-800",
+        amber:
+          "bg-amber-500 dark:bg-amber-800 text-white hover:bg-amber-500 dark:hover:bg-amber-900",
+        violet:
+          "bg-violet-800 dark:bg-violet-600 text-white hover:bg-violet-800 dark:hover:bg-violet-600",
         "gradient-blue":
-          "bg-linear-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",
+          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-white hover:from-blue-800 dark:hover:from-blue-600 hover:to-purple-800 dark:hover:to-purple-600",
         "gradient-green":
-          "bg-linear-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600",
+          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-white hover:from-green-800 dark:hover:from-green-600 hover:to-lime-800 dark:hover:to-lime-600",
         "gradient-red":
-          "bg-linear-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600",
+          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-white hover:from-red-800 dark:hover:from-red-600 hover:to-pink-800 dark:hover:to-pink-600",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600",
+          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-white hover:from-yellow-800 dark:hover:from-yellow-600 hover:to-orange-800 dark:hover:to-orange-600",
         "gradient-purple":
-          "bg-linear-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600",
+          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-white hover:from-purple-800 dark:hover:from-purple-600 hover:to-pink-800 dark:hover:to-pink-600",
         "gradient-teal":
-          "bg-linear-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600",
+          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-white hover:from-teal-800 dark:hover:from-teal-600 hover:to-cyan-800 dark:hover:to-cyan-600",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600",
+          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-white hover:from-indigo-800 dark:hover:from-indigo-600 hover:to-purple-800 dark:hover:to-purple-600",
         "gradient-pink":
-          "bg-linear-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600",
+          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-white hover:from-pink-800 dark:hover:from-pink-600 hover:to-rose-800 dark:hover:to-rose-600",
         "gradient-orange":
-          "bg-linear-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600",
+          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-white hover:from-orange-800 dark:hover:from-orange-600 hover:to-red-800 dark:hover:to-red-600",
       },
       size: {
         sm: "h-7 md:h-9 px-3 text-xs",