@zentauri-ui/zentauri-components 1.5.31 → 1.6.2

package/src/ui/slider/variants.ts

@@ -14,7 +14,7 @@ export const sliderRootVariants = cva("w-full select-none touch-none", {
 });
 
 export const sliderTrackVariants = cva(
-  "relative h-2 w-full shrink-0 overflow-hidden rounded-full bg-white/10",
+  "relative h-2 w-full shrink-0 overflow-hidden rounded-full bg-black/10 dark:bg-white/10",
   {
     variants: {
       size: {
@@ -30,32 +30,32 @@ export const sliderTrackVariants = cva(
 );
 
 export const sliderRangeVariants = cva(
-  "absolute h-full rounded-full bg-linear-to-r from-violet-500 to-indigo-400",
+  "absolute h-full rounded-full bg-linear-to-r from-violet-500 to-indigo-600 dark:to-indigo-400",
   {
     variants: {
       appearance: {
-        default: "from-violet-500 to-indigo-400",
-        sky: "from-sky-500 to-indigo-400",
-        rose: "from-rose-500 to-indigo-400",
-        purple: "from-purple-500 to-indigo-400",
-        pink: "from-pink-500 to-indigo-400",
-        orange: "from-orange-500 to-indigo-400",
-        yellow: "from-yellow-500 to-indigo-400",
-        teal: "from-teal-500 to-indigo-400",
-        indigo: "from-indigo-500 to-indigo-400",
-        emerald: "from-emerald-500 to-teal-400",
-        amber: "from-amber-500 to-orange-400",
-        gray: "from-gray-500 to-indigo-400",
-        violet: "from-violet-500 to-indigo-400",
-        "gradient-blue": "from-blue-500 to-indigo-400",
-        "gradient-green": "from-green-500 to-indigo-400",
-        "gradient-red": "from-red-500 to-indigo-400",
-        "gradient-yellow": "from-yellow-500 to-indigo-400",
-        "gradient-purple": "from-purple-500 to-indigo-400",
-        "gradient-teal": "from-teal-500 to-indigo-400",
-        "gradient-indigo": "from-indigo-500 to-indigo-400",
-        "gradient-pink": "from-pink-500 to-indigo-400",
-        "gradient-orange": "from-orange-500 to-indigo-400",
+        default: "from-violet-500 to-indigo-600 dark:to-indigo-400",
+        sky: "from-sky-500 to-indigo-600 dark:to-indigo-400",
+        rose: "from-rose-500 to-indigo-600 dark:to-indigo-400",
+        purple: "from-purple-500 to-indigo-600 dark:to-indigo-400",
+        pink: "from-pink-500 to-indigo-600 dark:to-indigo-400",
+        orange: "from-orange-500 to-indigo-600 dark:to-indigo-400",
+        yellow: "from-yellow-500 to-indigo-600 dark:to-indigo-400",
+        teal: "from-teal-500 to-indigo-600 dark:to-indigo-400",
+        indigo: "from-indigo-500 to-indigo-600 dark:to-indigo-400",
+        emerald: "from-emerald-500 to-teal-600 dark:to-teal-400",
+        amber: "from-amber-500 to-orange-600 dark:to-orange-400",
+        gray: "from-gray-500 to-indigo-600 dark:to-indigo-400",
+        violet: "from-violet-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-blue": "from-blue-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-green": "from-green-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-red": "from-red-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-yellow": "from-yellow-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-purple": "from-purple-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-teal": "from-teal-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-indigo": "from-indigo-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-pink": "from-pink-500 to-indigo-600 dark:to-indigo-400",
+        "gradient-orange": "from-orange-500 to-indigo-600 dark:to-indigo-400",
       },
     },
     defaultVariants: {
@@ -65,7 +65,7 @@ export const sliderRangeVariants = cva(
 );
 
 export const sliderThumbVariants = cva(
-  "block size-4 rounded-full border border-white/20 bg-white shadow-md ring-offset-2 ring-offset-slate-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 disabled:pointer-events-none disabled:opacity-40",
+  "block size-4 rounded-full border border-black/20 dark:border-white/20 bg-black dark:bg-white shadow-md ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/40 dark:focus-visible:ring-white/40 disabled:pointer-events-none disabled:opacity-40",
   {
     variants: {
       size: {

package/src/ui/spinner/animated/variants.ts

@@ -1,28 +1,28 @@
 import { cva } from "class-variance-authority";
 
 const spinnerAppearances = {
-  default: "text-slate-50",
-  secondary: "text-slate-300",
-  destructive: "text-rose-400",
-  ghost: "text-slate-300",
-  emerald: "text-emerald-400",
-  indigo: "text-indigo-400",
-  purple: "text-purple-400",
-  pink: "text-pink-400",
-  rose: "text-rose-400",
-  sky: "text-sky-400",
-  teal: "text-teal-400",
-  yellow: "text-yellow-400",
-  orange: "text-orange-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-900 dark:text-slate-50",
+  secondary: "text-slate-600 dark:text-slate-300",
+  destructive: "text-rose-600 dark:text-rose-400",
+  ghost: "text-slate-600 dark:text-slate-300",
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  indigo: "text-indigo-600 dark:text-indigo-400",
+  purple: "text-purple-600 dark:text-purple-400",
+  pink: "text-pink-600 dark:text-pink-400",
+  rose: "text-rose-600 dark:text-rose-400",
+  sky: "text-sky-600 dark:text-sky-400",
+  teal: "text-teal-600 dark:text-teal-400",
+  yellow: "text-yellow-600 dark:text-yellow-400",
+  orange: "text-orange-600 dark:text-orange-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",
 } as const;
 
 export const spinnerVariants = cva("inline-flex items-center justify-center", {

package/src/ui/stepper/stepper.tsx

@@ -142,7 +142,10 @@ export function StepperTitle({
     <div
       ref={ref}
       data-slot="stepper-title"
-      className={cn("mt-3 text-sm font-semibold", className)}
+      className={cn(
+        "text-sm font-semibold text-slate-900 dark:text-white",
+        className,
+      )}
       {...rest}
     />
   );
@@ -159,7 +162,7 @@ export function StepperDescription({
     <p
       ref={ref}
       data-slot="stepper-description"
-      className={cn("mt-1 text-xs text-slate-400", className)}
+      className={cn("text-xs text-slate-900 dark:text-slate-400", className)}
       {...rest}
     />
   );

package/src/ui/stepper/variants.ts

@@ -16,7 +16,7 @@ export const stepperItemVariants = cva("relative flex gap-3", {
   variants: {
     orientation: {
       horizontal: "min-w-0 flex-col items-center text-center",
-      vertical: "flex-row items-start text-left",
+      vertical: "flex-row items-center text-left",
     },
   },
   defaultVariants: {
@@ -30,45 +30,46 @@ export const stepperIndicatorVariants = cva(
     variants: {
       appearance: {
         complete:
-          "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+          "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
         current:
-          "border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50",
-        upcoming: "border-white/15 bg-white/5 text-slate-400",
-        sky: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
-        rose: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
+          "border-violet-600 dark:border-violet-400 bg-violet-500/20 text-slate-900 dark:text-white ring-2 ring-violet-400/50",
+        upcoming:
+          "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
+        sky: "border-sky-500/60 bg-sky-500/20 text-sky-900 dark:text-sky-100 ring-2 ring-sky-400/30",
+        rose: "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
         purple:
-          "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
-        pink: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+          "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
+        pink: "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
         orange:
-          "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+          "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
         yellow:
-          "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
-        teal: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+          "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
+        teal: "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
         indigo:
-          "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+          "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
         emerald:
-          "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
-        gray: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
+          "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
+        gray: "border-gray-500/60 bg-gray-500/20 text-gray-900 dark:text-gray-100 ring-2 ring-gray-400/30",
         violet:
-          "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
+          "border-violet-500/60 bg-violet-500/20 text-violet-900 dark:text-violet-100 ring-2 ring-violet-400/30",
         "gradient-blue":
-          "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
+          "border-blue-500/60 bg-blue-500/20 text-blue-900 dark:text-blue-100 ring-2 ring-blue-400/30",
         "gradient-green":
-          "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
+          "border-green-500/60 bg-green-500/20 text-green-900 dark:text-green-100 ring-2 ring-green-400/30",
         "gradient-red":
-          "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
+          "border-red-500/60 bg-red-500/20 text-red-900 dark:text-red-100 ring-2 ring-red-400/30",
         "gradient-yellow":
-          "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+          "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
         "gradient-purple":
-          "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+          "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
         "gradient-teal":
-          "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+          "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
         "gradient-indigo":
-          "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+          "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
         "gradient-pink":
-          "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+          "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
         "gradient-orange":
-          "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+          "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
       },
       size: {
         sm: "size-8 text-xs",

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

@@ -80,7 +80,7 @@ TableBase.displayName = "Table";
 export function TableHeader({ className, children }: TableSectionProps) {
   const { stickyHeader } = useTableContext("TableHeader");
   const stickyClass = stickyHeader
-    ? "sticky top-0 z-10 bg-slate-950/95 backdrop-blur"
+    ? "sticky top-0 z-10 dark:bg-slate-950/95 bg-slate-50/95 backdrop-blur"
     : "";
   return (
     <thead data-slot="table-header" className={cn(stickyClass, className)}>

package/src/ui/table/variants.ts

@@ -1,26 +1,26 @@
 import { cva } from "class-variance-authority";
 
 export const tableVariants = cva(
-  "w-full table-auto border-collapse caption-bottom text-sm text-slate-200 md:table-fixed",
+  "w-full table-auto border-collapse caption-bottom text-sm text-slate-700 dark:text-slate-200 md:table-fixed",
   {
     variants: {
       appearance: {
         default: "",
         striped: "",
-        bordered: "border border-white/10",
+        bordered: "border border-black/10 dark:border-white/10",
         ghost: "",
-        sky: "border border-sky-600",
-        rose: "border border-rose-600",
-        purple: "border border-purple-600",
-        pink: "border border-pink-600",
-        orange: "border border-orange-600",
-        yellow: "border border-yellow-600",
-        teal: "border border-teal-600",
-        indigo: "border border-indigo-600",
-        emerald: "border border-emerald-600",
-        gray: "border border-gray-600",
-        amber: "border border-amber-600",
-        violet: "border border-violet-600",
+        sky: "border border-sky-800 dark:border-sky-600",
+        rose: "border border-rose-800 dark:border-rose-600",
+        purple: "border border-purple-800 dark:border-purple-600",
+        pink: "border border-pink-800 dark:border-pink-600",
+        orange: "border border-orange-800 dark:border-orange-600",
+        yellow: "border border-yellow-800 dark:border-yellow-600",
+        teal: "border border-teal-800 dark:border-teal-600",
+        indigo: "border border-indigo-800 dark:border-indigo-600",
+        emerald: "border border-emerald-800 dark:border-emerald-600",
+        gray: "border border-gray-800 dark:border-gray-600",
+        amber: "border border-amber-800 dark:border-amber-600",
+        violet: "border border-violet-800 dark:border-violet-600",
       },
       size: {
         sm: "text-xs",
@@ -41,26 +41,34 @@ export const tableVariants = cva(
 );
 
 export const tableRowVariants = cva(
-  "border-b border-white/5 transition-colors data-[state=selected]:bg-white/[0.06]",
+  "border-b border-black/5 dark:border-white/5 transition-colors data-[state=selected]:bg-black/[0.06] dark:data-[state=selected]:bg-white/[0.06]",
   {
     variants: {
       appearance: {
         default: "",
-        striped: "odd:bg-white/[0.03]",
+        striped: "odd:bg-black/[0.03] dark:odd:bg-white/[0.03]",
         bordered: "",
-        ghost: "border-transparent hover:bg-white/[0.03]",
-        sky: "border-sky-600 hover:bg-sky-600",
-        rose: "border-rose-600 hover:bg-rose-900",
-        purple: "border-purple-600 hover:bg-purple-900",
-        pink: "border-pink-600 hover:bg-pink-900",
-        orange: "border-orange-600 hover:bg-orange-900",
-        yellow: "border-yellow-600 hover:bg-yellow-900",
-        teal: "border-teal-600 hover:bg-teal-900",
-        indigo: "border-indigo-600 hover:bg-indigo-900",
-        emerald: "border-emerald-600 hover:bg-emerald-900",
-        gray: "border-gray-600 hover:bg-gray-900",
-        amber: "border-amber-600 hover:bg-amber-900",
-        violet: "border-violet-600 hover:bg-violet-900",
+        ghost:
+          "border-transparent hover:bg-black/[0.03] dark:hover:bg-white/[0.03]",
+        sky: "border-sky-800 dark:border-sky-600 hover:bg-sky-800 dark:hover:bg-sky-600 hover:text-sky-100",
+        rose: "border-rose-800 dark:border-rose-600 hover:bg-rose-500 dark:hover:bg-rose-900 hover:text-rose-100",
+        purple:
+          "border-purple-800 dark:border-purple-600 hover:bg-purple-500 dark:hover:bg-purple-900 hover:text-purple-100",
+        pink: "border-pink-800 dark:border-pink-600 hover:bg-pink-500 dark:hover:bg-pink-900 hover:text-pink-100",
+        orange:
+          "border-orange-800 dark:border-orange-600 hover:bg-orange-500 dark:hover:bg-orange-900 hover:text-orange-100",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 hover:bg-yellow-500 dark:hover:bg-yellow-900 hover:text-yellow-100",
+        teal: "border-teal-800 dark:border-teal-600 hover:bg-teal-500 dark:hover:bg-teal-900 hover:text-teal-100",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 hover:bg-indigo-500 dark:hover:bg-indigo-900 hover:text-indigo-100",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 hover:bg-emerald-500 dark:hover:bg-emerald-900 hover:text-emerald-100",
+        gray: "border-gray-800 dark:border-gray-600 hover:bg-gray-500 dark:hover:bg-gray-900 hover:text-gray-100",
+        amber:
+          "border-amber-800 dark:border-amber-600 hover:bg-amber-500 dark:hover:bg-amber-900 hover:text-amber-100",
+        violet:
+          "border-violet-800 dark:border-violet-600 hover:bg-violet-500 dark:hover:bg-violet-900 hover:text-violet-100",
       },
     },
     defaultVariants: { appearance: "default" },
@@ -72,22 +80,22 @@ export const tableCellVariants = cva(
   {
     variants: {
       appearance: {
-        default: "border-white/10",
-        striped: "border-white/10",
-        bordered: "border-white/10",
-        ghost: "border-white/10",
-        sky: "border-sky-600",
-        rose: "border-rose-600",
-        purple: "border-purple-600",
-        pink: "border-pink-600",
-        orange: "border-orange-600",
-        yellow: "border-yellow-600",
-        teal: "border-teal-600",
-        indigo: "border-indigo-600",
-        emerald: "border-emerald-600",
-        gray: "border-gray-600",
-        amber: "border-amber-600",
-        violet: "border-violet-600",
+        default: "border-black/10 dark:border-white/10",
+        striped: "border-black/10 dark:border-white/10",
+        bordered: "border-black/10 dark:border-white/10",
+        ghost: "border-black/10 dark:border-white/10",
+        sky: "border-sky-800 dark:border-sky-600",
+        rose: "border-rose-800 dark:border-rose-600",
+        purple: "border-purple-800 dark:border-purple-600",
+        pink: "border-pink-800 dark:border-pink-600",
+        orange: "border-orange-800 dark:border-orange-600",
+        yellow: "border-yellow-800 dark:border-yellow-600",
+        teal: "border-teal-800 dark:border-teal-600",
+        indigo: "border-indigo-800 dark:border-indigo-600",
+        emerald: "border-emerald-800 dark:border-emerald-600",
+        gray: "border-gray-800 dark:border-gray-600",
+        amber: "border-amber-800 dark:border-amber-600",
+        violet: "border-violet-800 dark:border-violet-600",
       },
       size: {
         sm: "p-2",

package/src/ui/tabs/variants.ts

@@ -20,6 +20,7 @@ export const tabsListVariants = cva("flex items-center gap-1", {
   defaultVariants: {
     size: "md",
     orientation: "horizontal",
+    variant: "pills",
   },
 });
 
@@ -28,32 +29,46 @@ export const tabsTriggerVariants = cva(
   {
     variants: {
       appearance: {
-        default: "bg-transparent",
-        sky: "bg-sky-500/75",
-        rose: "bg-rose-500/75",
-        purple: "bg-purple-500/75",
-        pink: "bg-pink-500/75",
-        orange: "bg-orange-500/75",
-        yellow: "bg-yellow-500/75",
-        teal: "bg-teal-500/75",
-        indigo: "bg-indigo-500/75",
-        emerald: "bg-emerald-500/75",
-        gray: "bg-gray-500/75",
-        "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600",
-        "gradient-green": "bg-linear-to-r from-green-600 to-lime-600",
-        "gradient-red": "bg-linear-to-r from-red-600 to-pink-600",
-        "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600",
-        "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600",
-        "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600",
-        "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600",
-        "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600",
-        "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600",
+        default: "bg-transparent text-slate-900 dark:text-slate-50",
+        sky: "bg-sky-300 text-sky-900 dark:bg-sky-900 dark:text-sky-200 data-[state=active]:bg-sky-900 dark:data-[state=active]:bg-sky-700 data-[state=active]:text-sky-50 dark:data-[state=active]:text-sky-100",
+        rose: "bg-rose-300 text-rose-900 dark:bg-rose-900 dark:text-rose-200 data-[state=active]:bg-rose-900 dark:data-[state=active]:bg-rose-700 data-[state=active]:text-rose-50 dark:data-[state=active]:text-rose-100",
+        purple:
+          "bg-purple-300 text-purple-900 dark:bg-purple-900 dark:text-purple-200 data-[state=active]:bg-purple-900 dark:data-[state=active]:bg-purple-700 data-[state=active]:text-purple-50 dark:data-[state=active]:text-purple-100",
+        pink: "bg-pink-300 text-pink-900 dark:bg-pink-900 dark:text-pink-200 data-[state=active]:bg-pink-900 dark:data-[state=active]:bg-pink-700 data-[state=active]:text-pink-50 dark:data-[state=active]:text-pink-100",
+        orange:
+          "bg-orange-300 text-orange-900 dark:bg-orange-900 dark:text-orange-200 data-[state=active]:bg-orange-900 dark:data-[state=active]:bg-orange-700 data-[state=active]:text-orange-50 dark:data-[state=active]:text-orange-100",
+        yellow:
+          "bg-yellow-300 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200 data-[state=active]:bg-yellow-900 dark:data-[state=active]:bg-yellow-700 data-[state=active]:text-yellow-50 dark:data-[state=active]:text-yellow-100",
+        teal: "bg-teal-300 text-teal-900 dark:bg-teal-900 dark:text-teal-200 data-[state=active]:bg-teal-900 dark:data-[state=active]:bg-teal-700 data-[state=active]:text-teal-50 dark:data-[state=active]:text-teal-100",
+        indigo:
+          "bg-indigo-300 text-indigo-900 dark:bg-indigo-900 dark:text-indigo-200 data-[state=active]:bg-indigo-900 dark:data-[state=active]:bg-indigo-700 data-[state=active]:text-indigo-50 dark:data-[state=active]:text-indigo-100",
+        emerald:
+          "bg-emerald-300 text-emerald-900 dark:bg-emerald-900 dark:text-emerald-200 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-emerald-50 dark:data-[state=active]:text-emerald-100",
+        gray: "bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-200 data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-50 dark:data-[state=active]:text-gray-100",
+        "gradient-blue":
+          "bg-linear-to-r from-blue-800 dark:from-blue-800 to-purple-800 dark:to-purple-800 text-blue-100 dark:text-blue-50 data-[state=active]:from-blue-600 dark:data-[state=active]:from-blue-600 data-[state=active]:to-purple-600 dark:data-[state=active]:to-purple-600 data-[state=active]:text-blue-100 dark:data-[state=active]:text-blue-100",
+        "gradient-green":
+          "bg-linear-to-r from-green-800 dark:from-green-800 to-lime-800 dark:to-lime-800 text-green-100 dark:text-green-50 data-[state=active]:from-green-600 dark:data-[state=active]:from-green-600 data-[state=active]:to-lime-600 dark:data-[state=active]:to-lime-600 data-[state=active]:text-green-100 dark:data-[state=active]:text-green-100",
+        "gradient-red":
+          "bg-linear-to-r from-red-800 dark:from-red-800 to-pink-800 dark:to-pink-800 text-red-100 dark:text-red-50 data-[state=active]:from-red-600 dark:data-[state=active]:from-red-600 data-[state=active]:to-pink-600 dark:data-[state=active]:to-pink-600 data-[state=active]:text-red-100 dark:data-[state=active]:text-red-100",
+        "gradient-yellow":
+          "bg-linear-to-r from-yellow-800 dark:from-yellow-800 to-orange-800 dark:to-orange-800 text-yellow-100 dark:text-yellow-50 data-[state=active]:from-yellow-600 dark:data-[state=active]:from-yellow-600 data-[state=active]:to-orange-600 dark:data-[state=active]:to-orange-600 data-[state=active]:text-yellow-100 dark:data-[state=active]:text-yellow-100",
+        "gradient-purple":
+          "bg-linear-to-r from-purple-800 dark:from-purple-800 to-pink-800 dark:to-pink-800 text-purple-100 dark:text-purple-50 data-[state=active]:from-purple-600 dark:data-[state=active]:from-purple-600 data-[state=active]:to-pink-600 dark:data-[state=active]:to-pink-600 data-[state=active]:text-purple-100 dark:data-[state=active]:text-purple-100",
+        "gradient-teal":
+          "bg-linear-to-r from-teal-800 dark:from-teal-800 to-cyan-800 dark:to-cyan-800 text-teal-100 dark:text-teal-50 data-[state=active]:from-teal-600 dark:data-[state=active]:from-teal-600 data-[state=active]:to-cyan-600 dark:data-[state=active]:to-cyan-600 data-[state=active]:text-teal-100 dark:data-[state=active]:text-teal-100",
+        "gradient-indigo":
+          "bg-linear-to-r from-indigo-800 dark:from-indigo-800 to-purple-800 dark:to-purple-800 text-indigo-100 dark:text-indigo-50 data-[state=active]:from-indigo-600 dark:data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 dark:data-[state=active]:to-purple-600 data-[state=active]:text-indigo-100 dark:data-[state=active]:text-indigo-100",
+        "gradient-pink":
+          "bg-linear-to-r from-pink-800 dark:from-pink-800 to-rose-800 dark:to-rose-800 text-pink-100 dark:text-pink-50 data-[state=active]:from-pink-600 dark:data-[state=active]:from-pink-600 data-[state=active]:to-rose-600 dark:data-[state=active]:to-rose-600 data-[state=active]:text-pink-100 dark:data-[state=active]:text-pink-100",
+        "gradient-orange":
+          "bg-linear-to-r from-orange-800 dark:from-orange-800 to-red-800 dark:to-red-800 text-orange-100 dark:text-orange-50 data-[state=active]:from-orange-600 dark:data-[state=active]:from-orange-600 data-[state=active]:to-red-600 dark:data-[state=active]:to-red-600 data-[state=active]:text-orange-100 dark:data-[state=active]:text-orange-100",
       },
       variant: {
         default: "data-[state=active]:bg-background",
         underline:
-          "border-b-2 border-transparent data-[state=active]:border-primary rounded-none",
-        pills: "data-[state=active]:bg-primary data-[state=active]:text-white",
+          "border-b-2 border-transparent data-[state=active]:border-current rounded-none",
+        pills: "",
       },
       size: {
         sm: "px-2 py-1",
@@ -63,7 +78,7 @@ export const tabsTriggerVariants = cva(
     },
     defaultVariants: {
       appearance: "default",
-      variant: "default",
+      variant: "pills",
       size: "md",
     },
   },

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

@@ -184,10 +184,7 @@ ToastTitle.displayName = "ToastTitle";
 
 export function ToastDescription({ className, children }: ToastSectionProps) {
   return (
-    <div
-      data-slot="toast-description"
-      className={cn("text-sm text-slate-300", className)}
-    >
+    <div data-slot="toast-description" className={cn("text-sm", className)}>
       {children}
     </div>
   );

package/src/ui/toast/variants.ts

@@ -20,44 +20,51 @@ export const toastViewportVariants = cva(
 );
 
 export const toastRootVariants = cva(
-  "pointer-events-auto w-[min(100vw-2rem,380px)] rounded-xl border border-white/10 bg-slate-950 p-4 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.45)]",
+  "pointer-events-auto w-[min(100vw-2rem,380px)] rounded-xl border bg-slate-50 p-4 text-slate-900 dark:text-slate-50 shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.45)]",
   {
     variants: {
       appearance: {
-        default: "bg-slate-950",
-        success: "border-emerald-500/40 bg-emerald-950",
-        warning: "border-amber-500/40 bg-amber-950",
-        error: "border-rose-500/50 bg-rose-950",
-        info: "border-sky-500/40 bg-sky-950",
-        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",
-        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-950 text-slate-50",
+        success: "border-emerald-500/40 bg-emerald-950 text-emerald-50",
+        warning: "border-amber-500/40 bg-amber-950 text-amber-50",
+        error: "border-rose-500/50 bg-rose-950 text-rose-50",
+        info: "border-sky-500/40 bg-sky-950 text-sky-50",
+        ghost: "border-transparent bg-transparent text-slate-900",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-950 backdrop-blur-xl text-purple-50",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-950 backdrop-blur-xl text-pink-50",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-950 backdrop-blur-xl text-orange-50",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-950 backdrop-blur-xl text-yellow-50",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-950 backdrop-blur-xl text-teal-50",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-950 backdrop-blur-xl text-indigo-50",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-950 backdrop-blur-xl text-emerald-50",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-950 backdrop-blur-xl text-gray-50",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-950 backdrop-blur-xl text-amber-50",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-950 backdrop-blur-xl 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",
         "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",
       },
       size: {
         sm: "p-3 text-xs",

package/src/ui/toggle/animated/toggle-animated.tsx

@@ -14,6 +14,7 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
     className,
     size,
     appearance,
+    thumbColor,
     animation = "spring",
     checked,
     defaultChecked = false,
@@ -39,7 +40,7 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
     [isControlled, onCheckedChange],
   );
 
-  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 26 : 20;
+  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 24 : 18;
 
   return (
     <button
@@ -62,7 +63,7 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
       <span className="sr-only">{children}</span>
       <motion.span
         className={cn(
-          toggleThumbVariants({ size }),
+          toggleThumbVariants({ size, thumbColor }),
           "absolute left-1 top-1/2 -translate-y-1/2",
         )}
         animate={{ x: resolved ? thumbShiftPx : 0 }}

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

@@ -38,6 +38,7 @@ export function ToggleBase(props: ToggleProps) {
     ref,
     "aria-label": ariaLabelProp,
     children,
+    thumbColor,
     ...rest
   } = props;
   const toggleLabelId = useId();
@@ -55,7 +56,7 @@ export function ToggleBase(props: ToggleProps) {
     [isControlled, onCheckedChange],
   );
 
-  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 26 : 20;
+  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 24 : 19;
   const labeledByChildren = hasToggleLabelChildren(children);
   const labeling = labeledByChildren
     ? {
@@ -90,8 +91,8 @@ export function ToggleBase(props: ToggleProps) {
       ) : null}
       <span
         className={cn(
-          toggleThumbVariants({ size }),
-          "absolute left-1 top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out",
+          toggleThumbVariants({ size, thumbColor }),
+          "absolute top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out",
         )}
         style={{ transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }}
       />