@zentauri-ui/zentauri-components 1.6.2 → 1.7.0

package/src/ui/accordion/variants.ts

@@ -1,53 +1,21 @@
 import { cva } from "class-variance-authority";
 
-export const accordionVariants = cva("w-full", {
+import {
+  zuiAccordionAppearances,
+  zuiAccordionBase,
+  zuiAccordionContentBase,
+  zuiAccordionContentSizes,
+  zuiAccordionItemAppearances,
+  zuiAccordionItemBase,
+  zuiAccordionSizes,
+  zuiAccordionTriggerBase,
+  zuiAccordionTriggerSizes,
+} from "../../design-system/accordion";
+
+export const accordionVariants = cva(zuiAccordionBase, {
   variants: {
-    appearance: {
-      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-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-800 dark:divide-emerald-600 rounded-xl border border-emerald-800 dark:border-emerald-600",
-      "gradient-blue":
-        "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-800 dark:divide-green-600 rounded-xl border border-green-800 dark:border-green-600",
-      "gradient-red":
-        "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-800 dark:divide-yellow-600 rounded-xl border border-yellow-800 dark:border-yellow-600",
-      "gradient-purple":
-        "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-800 dark:divide-teal-600 rounded-xl border border-teal-800 dark:border-teal-600",
-      "gradient-indigo":
-        "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-800 dark:divide-pink-600 rounded-xl border border-pink-800 dark:border-pink-600",
-      "gradient-orange":
-        "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",
-      md: "px-4 py-3 text-sm",
-      lg: "px-5 py-4 text-base",
-    },
+    appearance: zuiAccordionAppearances,
+    size: zuiAccordionSizes,
   },
   defaultVariants: {
     appearance: "default",
@@ -55,73 +23,23 @@ export const accordionVariants = cva("w-full", {
   },
 });
 
-export const accordionItemVariants = cva("text-slate-900 dark:text-slate-200", {
+export const accordionItemVariants = cva(zuiAccordionItemBase, {
   variants: {
-    appearance: {
-      default: "",
-      outline: "",
-      ghost: "",
-      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-300 dark:from-blue-600 to-purple-300 dark:to-purple-600 p-2",
-      "gradient-green":
-        "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-300 dark:from-red-600 to-pink-300 dark:to-pink-600 p-2",
-      "gradient-yellow":
-        "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-300 dark:from-purple-600 to-pink-300 dark:to-pink-600 p-2",
-      "gradient-teal":
-        "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-300 dark:from-indigo-600 to-purple-300 dark:to-purple-600 p-2",
-      "gradient-pink":
-        "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-300 dark:from-orange-600 to-red-300 dark:to-red-600 p-2",
-    },
+    appearance: zuiAccordionItemAppearances,
   },
   defaultVariants: { appearance: "default" },
 });
 
-export const accordionTriggerVariants = cva(
-  "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: {
-        sm: "py-2 text-sm",
-        md: "py-3 text-sm",
-        lg: "py-4 text-base",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const accordionTriggerVariants = cva(zuiAccordionTriggerBase, {
+  variants: {
+    size: zuiAccordionTriggerSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});
 
-export const accordionContentVariants = cva("pb-3 text-sm", {
+export const accordionContentVariants = cva(zuiAccordionContentBase, {
   variants: {
-    size: {
-      sm: "pb-2 text-xs",
-      md: "pb-3 text-sm",
-      lg: "pb-4 text-base",
-    },
+    size: zuiAccordionContentSizes,
   },
   defaultVariants: { size: "md" },
 });

package/src/ui/alert/alert.test.tsx

@@ -124,7 +124,7 @@ describe("Alert", () => {
         </Alert>,
       );
       const root = document.querySelector('[data-slot="alert"]') as HTMLElement;
-      expect(root.className).toMatch(/border-emerald-500/);
+      expect(root.className).toMatch(/--zui-alert-success-border/);
     });
   });
 

package/src/ui/alert/variants.ts

@@ -1,87 +1,35 @@
 import { cva } from "class-variance-authority";
 
-export const alertVariants = cva(
-  "relative flex w-full gap-3 border text-sm ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
-  {
-    variants: {
-      appearance: {
-        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-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-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-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-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-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-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-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-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-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",
-        md: "rounded-xl p-4",
-        lg: "rounded-2xl p-5 text-base",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-    },
+import {
+  zuiAlertAppearances,
+  zuiAlertBase,
+  zuiAlertDescriptionBase,
+  zuiAlertSizes,
+  zuiAlertTextSizes,
+  zuiAlertTitleBase,
+} from "../../design-system/alert";
+
+export const alertVariants = cva(zuiAlertBase, {
+  variants: {
+    appearance: zuiAlertAppearances,
+    size: zuiAlertSizes,
   },
-);
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
 
-export const alertTitleVariants = cva("font-semibold leading-tight", {
+export const alertTitleVariants = cva(zuiAlertTitleBase, {
   variants: {
-    size: {
-      sm: "text-xs md:text-sm",
-      md: "text-xs md:text-sm",
-      lg: "text-xs md:text-sm",
-    },
+    size: zuiAlertTextSizes,
   },
   defaultVariants: { size: "md" },
 });
 
-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" },
+export const alertDescriptionVariants = cva(zuiAlertDescriptionBase, {
+  variants: {
+    size: zuiAlertTextSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});

package/src/ui/avatar/variants.ts

@@ -1,72 +1,27 @@
 import { cva } from "class-variance-authority";
 
-export const avatarVariants = cva(
-  "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-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-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-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-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-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-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-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-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-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-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-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",
-        md: "size-10 text-sm",
-        lg: "size-12 text-base",
-        xl: "size-16 text-lg",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      appearance: "default",
-    },
+import {
+  zuiAvatarAppearances,
+  zuiAvatarBase,
+  zuiAvatarFallbackBase,
+  zuiAvatarGroupBase,
+  zuiAvatarImageBase,
+  zuiAvatarSizes,
+} from "../../design-system/avatar";
+
+export const avatarVariants = cva(zuiAvatarBase, {
+  variants: {
+    appearance: zuiAvatarAppearances,
+    size: zuiAvatarSizes,
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default",
   },
-);
+});
 
-export const avatarImageVariants = cva("aspect-square size-full object-cover");
+export const avatarImageVariants = cva(zuiAvatarImageBase);
 
-export const avatarFallbackVariants = cva(
-  "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 avatarFallbackVariants = cva(zuiAvatarFallbackBase);
 
-export const avatarGroupVariants = cva(
-  "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",
-);
+export const avatarGroupVariants = cva(zuiAvatarGroupBase);

package/src/ui/badge/badge.test.tsx

@@ -20,7 +20,7 @@ describe("Badge", () => {
   it("should apply secondary appearance", () => {
     render(<Badge appearance="secondary">S</Badge>);
     const root = document.querySelector('[data-slot="badge"]') as HTMLElement;
-    expect(root.className).toMatch(/bg-slate-800/);
+    expect(root.className).toMatch(/--zui-badge-secondary-bg/);
   });
 
   it("should call onClose when closable", async () => {

package/src/ui/badge/variants.ts

@@ -1,96 +1,35 @@
 import { cva } from "class-variance-authority";
 
-/**
- * Tailwind class maps mirroring `buttons/variants.ts` appearance tokens.
- * Reused by primitives that should stay visually aligned with Button.
- */
-export const buttonLikeSolidAppearances = {
-  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;
+import {
+  zuiBadgeAppearances,
+  zuiBadgeBase,
+  zuiBadgeCloseButtonBase,
+  zuiBadgeCloseButtonSizes,
+  zuiBadgeShapes,
+  zuiBadgeSizes,
+  zuiButtonLikeSolidAppearances,
+  type ZuiButtonLikeSolidAppearance,
+} from "../../design-system/badge";
 
-export type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;
+export const buttonLikeSolidAppearances = zuiButtonLikeSolidAppearances;
+export type ButtonLikeSolidAppearance = ZuiButtonLikeSolidAppearance;
 
-const badgeAppearances = {
-  ...buttonLikeSolidAppearances,
-  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-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",
-  ],
-  {
-    variants: {
-      appearance: badgeAppearances,
-      size: {
-        sm: "h-6 min-h-6 px-2 text-[0.65rem] leading-none",
-        md: "h-7 min-h-7 px-2.5 text-xs leading-none",
-        lg: "h-8 min-h-8 px-3 text-sm leading-none",
-      },
-      shape: {
-        pill: "rounded-full",
-        square: "rounded-md",
-        dot: "h-2.5 min-h-2.5 w-2.5 min-w-2.5 rounded-full p-0 px-0 text-[0]",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      shape: "pill",
-    },
+export const badgeVariants = cva(zuiBadgeBase, {
+  variants: {
+    appearance: zuiBadgeAppearances,
+    size: zuiBadgeSizes,
+    shape: zuiBadgeShapes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    shape: "pill",
   },
-);
+});
 
-export const badgeCloseButtonVariants = cva(
-  "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: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const badgeCloseButtonVariants = cva(zuiBadgeCloseButtonBase, {
+  variants: {
+    size: zuiBadgeCloseButtonSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});

package/src/ui/breadcrumb/variants.ts

@@ -1,54 +1,38 @@
 import { cva } from "class-variance-authority";
 
-export const breadcrumbNavVariants = cva("text-sm", {
+import {
+  zuiBreadcrumbAppearances,
+  zuiBreadcrumbItemBase,
+  zuiBreadcrumbLinkBase,
+  zuiBreadcrumbListBase,
+  zuiBreadcrumbNavBase,
+  zuiBreadcrumbPageBase,
+  zuiBreadcrumbSeparatorBase,
+  zuiBreadcrumbSeparatorSizes,
+} from "../../design-system/breadcrumb";
+
+export const breadcrumbNavVariants = cva(zuiBreadcrumbNavBase, {
   variants: {
-    appearance: {
-      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",
-    },
+    appearance: zuiBreadcrumbAppearances,
   },
   defaultVariants: {
     appearance: "default",
   },
 });
 
-export const breadcrumbListVariants = cva(
-  "flex flex-wrap items-center gap-1.5",
-);
+export const breadcrumbListVariants = cva(zuiBreadcrumbListBase);
 
-export const breadcrumbItemVariants = cva("inline-flex items-center gap-1.5");
+export const breadcrumbItemVariants = cva(zuiBreadcrumbItemBase);
 
-export const breadcrumbLinkVariants = cva(
-  "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 breadcrumbLinkVariants = cva(zuiBreadcrumbLinkBase);
 
-export const breadcrumbPageVariants = cva(
-  "font-medium text-slate-800 dark:text-slate-100",
-);
+export const breadcrumbPageVariants = cva(zuiBreadcrumbPageBase);
 
-export const breadcrumbSeparatorVariants = cva(
-  "select-none text-slate-400 dark:text-slate-600",
-  {
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
+export const breadcrumbSeparatorVariants = cva(zuiBreadcrumbSeparatorBase, {
+  variants: {
+    size: zuiBreadcrumbSeparatorSizes,
   },
-);
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/ui/buttons/button.test.tsx

@@ -111,7 +111,7 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Default appearance must include the default surface token classes",
-      ).toMatch(/bg-slate-50/);
+      ).toMatch(/--zui-button-default-bg/);
     });
 
     it("should apply secondary appearance when appearance='secondary'", () => {
@@ -120,7 +120,7 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Secondary appearance must switch to the slate surface recipe",
-      ).toMatch(/bg-slate-800/);
+      ).toMatch(/--zui-button-secondary-bg/);
     });
 
     it("should apply destructive appearance when appearance='destructive'", () => {
@@ -129,7 +129,7 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Destructive appearance must surface danger styling",
-      ).toMatch(/bg-rose-700/);
+      ).toMatch(/--zui-button-destructive-bg/);
     });
 
     it("should apply outline appearance when appearance='outline'", () => {
@@ -138,7 +138,7 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Outline appearance must include border and translucent surface classes",
-      ).toMatch(/border-white\/10/);
+      ).toMatch(/--zui-button-outline-border/);
     });
 
     it("should apply gradient appearance tokens for gradient presets", () => {
@@ -148,6 +148,10 @@ describe("Button (component library)", () => {
         root.className,
         "Gradient-blue appearance must include directional gradient utilities",
       ).toMatch(/bg-linear-to-r/);
+      expect(
+        root.className,
+        "Gradient-blue appearance must expose gradient color variables",
+      ).toMatch(/--zui-button-gradient-blue-from/);
     });
   });
 
@@ -198,12 +202,28 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Consumer class names must not replace variant output",
-      ).toMatch(/bg-slate-800/);
+      ).toMatch(/--zui-button-secondary-bg/);
       expect(
         root.className,
         "Consumer class names must be appended for Tailwind overrides",
       ).toMatch(/my-custom-trigger/);
     });
+
+    it("should allow consumers to override button CSS variables without changing variant props", () => {
+      render(
+        <Button
+          className="[--zui-button-secondary-bg:#123456]"
+          appearance="secondary"
+        >
+          Branded
+        </Button>,
+      );
+      const root = getButtonSlot();
+      expect(
+        root.className,
+        "Appearance API should stay stable while CSS variables remain overrideable",
+      ).toMatch(/--zui-button-secondary-bg:#123456/);
+    });
   });
 
   describe("props: disabled state", () => {