@zentauri-ui/zentauri-components 1.5.31 → 1.6.2

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",

package/src/ui/card/variants.ts

@@ -2,51 +2,58 @@ import { cva } from "class-variance-authority";
 
 export const cardVariants = cva(
   [
-    "relative flex w-full flex-col overflow-hidden text-slate-50",
-    "ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+    "relative flex w-full flex-col overflow-hidden text-slate-900 dark:text-slate-50",
+    "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",
   ],
   {
     variants: {
       appearance: {
         default:
-          "border border-white/10 bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+          "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
         glass:
-          "border border-white/15 bg-white/10 backdrop-blur-md shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
-        outline: "border border-white/15 bg-transparent",
+          "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 backdrop-blur-md shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
+        outline: "border border-black/15 dark:border-white/15 bg-transparent",
         ghost: "border border-transparent bg-transparent",
         elevated:
-          "border border-white/10 bg-slate-900/80 shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
-        sky: "border border-sky-600 bg-sky-950/70 backdrop-blur-xl",
-        rose: "border border-rose-600 bg-rose-950/70 backdrop-blur-xl",
-        purple: "border border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        emerald: "border border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        amber: "border border-amber-600 bg-amber-950/70 backdrop-blur-xl",
-        violet: "border border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+          "border border-black/10 dark:border-white/10 bg-slate-100/80 dark:bg-slate-900/80 shadow-[0_12px_32px_rgba(15,23,42,0.12)] dark:shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
+        sky: "border border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
+        rose: "border border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
+        purple:
+          "border border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
+        pink: "border border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
+        orange:
+          "border border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
+        yellow:
+          "border border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
+        indigo:
+          "border border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
+        emerald:
+          "border border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
+        amber:
+          "border border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
+        violet:
+          "border border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border 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 border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border 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 border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border 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 border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border 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 border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border 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 border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border 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 border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border 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 border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border 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 border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border 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",
       },
       size: {
         sm: "gap-2 p-3 text-sm",
@@ -69,7 +76,7 @@ export const cardVariants = cva(
 );
 
 export const cardHeaderVariants = cva(
-  "flex flex-col gap-1 border-b border-white/10 pb-3",
+  "flex flex-col gap-1 border-b border-black/10 dark:border-white/10 pb-3",
   {
     variants: {
       size: {
@@ -83,7 +90,7 @@ export const cardHeaderVariants = cva(
 );
 
 export const cardFooterVariants = cva(
-  "flex flex-col gap-2 border-t border-white/10 pt-3",
+  "flex flex-col gap-2 border-t border-black/10 dark:border-white/10 pt-3",
   {
     variants: {
       size: {
@@ -97,7 +104,7 @@ export const cardFooterVariants = cva(
 );
 
 export const cardTitleVariants = cva(
-  "font-semibold tracking-tight text-slate-50",
+  "font-semibold tracking-tight text-slate-950 dark:text-white",
   {
     variants: {
       size: {
@@ -110,13 +117,16 @@ export const cardTitleVariants = cva(
   },
 );
 
-export const cardDescriptionVariants = cva("text-slate-400", {
-  variants: {
-    size: {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base",
+export const cardDescriptionVariants = cva(
+  "text-slate-500 dark:text-slate-50",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
     },
+    defaultVariants: { size: "md" },
   },
-  defaultVariants: { size: "md" },
-});
+);

package/src/ui/divider/variants.ts

@@ -1,32 +1,32 @@
 import { cva } from "class-variance-authority";
 
 const APPEARANCES = {
-  default: "text-slate-200",
-  muted: "text-slate-500",
-  primary: "text-cyan-300",
-  destructive: "text-rose-400",
-  ghost: "text-slate-600",
-  sky: "text-sky-400",
-  rose: "text-rose-400",
-  purple: "text-purple-400",
-  pink: "text-pink-400",
-  orange: "text-orange-400",
-  yellow: "text-yellow-400",
-  teal: "text-teal-400",
-  indigo: "text-indigo-400",
-  emerald: "text-emerald-400",
-  gray: "text-gray-400",
-  amber: "text-amber-400",
-  violet: "text-violet-400",
-  "gradient-blue": "text-blue-400",
-  "gradient-green": "text-green-400",
-  "gradient-red": "text-red-400",
-  "gradient-yellow": "text-yellow-400",
-  "gradient-purple": "text-purple-400",
-  "gradient-teal": "text-teal-400",
-  "gradient-indigo": "text-indigo-400",
-  "gradient-pink": "text-pink-400",
-  "gradient-orange": "text-orange-400",
+  default: "text-slate-700 dark:text-slate-200",
+  muted: "text-slate-500 dark:text-slate-500",
+  primary: "text-cyan-700 dark:text-cyan-300",
+  destructive: "text-rose-600 dark:text-rose-400",
+  ghost: "text-slate-400 dark:text-slate-600",
+  sky: "text-sky-600 dark:text-sky-400",
+  rose: "text-rose-600 dark:text-rose-400",
+  purple: "text-purple-600 dark:text-purple-400",
+  pink: "text-pink-600 dark:text-pink-400",
+  orange: "text-orange-600 dark:text-orange-400",
+  yellow: "text-yellow-600 dark:text-yellow-400",
+  teal: "text-teal-600 dark:text-teal-400",
+  indigo: "text-indigo-600 dark:text-indigo-400",
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  gray: "text-gray-600 dark:text-gray-400",
+  amber: "text-amber-600 dark:text-amber-400",
+  violet: "text-violet-600 dark:text-violet-400",
+  "gradient-blue": "text-blue-600 dark:text-blue-400",
+  "gradient-green": "text-green-600 dark:text-green-400",
+  "gradient-red": "text-red-600 dark:text-red-400",
+  "gradient-yellow": "text-yellow-600 dark:text-yellow-400",
+  "gradient-purple": "text-purple-600 dark:text-purple-400",
+  "gradient-teal": "text-teal-600 dark:text-teal-400",
+  "gradient-indigo": "text-indigo-600 dark:text-indigo-400",
+  "gradient-pink": "text-pink-600 dark:text-pink-400",
+  "gradient-orange": "text-orange-600 dark:text-orange-400",
 };
 
 export const dividerToneVariants = cva("", {

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

@@ -204,7 +204,7 @@ export function DrawerBody({ className, children }: DrawerSectionProps) {
   return (
     <div
       data-slot="drawer-body"
-      className={cn("flex-1 text-sm text-slate-300", className)}
+      className={cn("flex-1 text-sm", className)}
     >
       {children}
     </div>
@@ -252,7 +252,7 @@ export function DrawerClose({
       type="button"
       data-slot="drawer-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-9 items-center justify-center rounded-md dark:text-slate-200 text-slate-900 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
         className,
       )}
       aria-label="Close drawer"