@zentauri-ui/zentauri-components 1.6.3 → 1.7.1

package/src/ui/skeleton/variants.ts

@@ -1,263 +1,167 @@
 import { cva } from "class-variance-authority";
 
-const shimmerLayer =
-  "[background-size:220%_100%] [background-repeat:no-repeat] [background-position:100%_0%]";
+import {
+  zuiSkeletonAnimations,
+  zuiSkeletonAppearances,
+  zuiSkeletonBase,
+  zuiSkeletonRounded,
+  zuiSkeletonShimmerGradientClasses,
+  zuiSkeletonShimmerTones,
+  zuiSkeletonSizes,
+  zuiSkeletonTextLineBase,
+  zuiSkeletonTextLineSizes,
+  type ZuiSkeletonShimmerTone,
+} from "../../design-system/skeleton";
 
-export const skeletonShimmerGradientClasses = {
-  default: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.22),rgba(255,255,255,0.04))]`,
-  subtle: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.14),rgba(255,255,255,0.03))]`,
-  muted: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.1),rgba(255,255,255,0.02))]`,
-  sky: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(56,189,248,0.1),rgba(56,189,248,0.42),rgba(56,189,248,0.1))]`,
-  rose: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,113,133,0.1),rgba(251,113,133,0.42),rgba(251,113,133,0.1))]`,
-  purple: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(192,132,252,0.1),rgba(192,132,252,0.42),rgba(192,132,252,0.1))]`,
-  pink: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
-  orange: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,
-  yellow: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.4),rgba(250,204,21,0.12))]`,
-  teal: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
-  indigo: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
-  emerald: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
-  gray: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(161,161,170,0.1),rgba(161,161,170,0.38),rgba(161,161,170,0.1))]`,
-  amber: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,191,36,0.12),rgba(251,191,36,0.42),rgba(251,191,36,0.12))]`,
-  violet: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
-  "gradient-blue": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(100,149,237,0.1),rgba(100,149,237,0.42),rgba(100,149,237,0.1))]`,
-  "gradient-green": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
-  "gradient-red": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(239,68,68,0.1),rgba(239,68,68,0.42),rgba(239,68,68,0.1))]`,
-  "gradient-yellow": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.42),rgba(250,204,21,0.12))]`,
-  "gradient-purple": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
-  "gradient-teal": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
-  "gradient-indigo": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
-  "gradient-pink": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
-  "gradient-orange": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,
-} as const;
+export const skeletonShimmerGradientClasses = zuiSkeletonShimmerGradientClasses;
+export type SkeletonShimmerTone = ZuiSkeletonShimmerTone;
 
-export type SkeletonShimmerTone = keyof typeof skeletonShimmerGradientClasses;
-
-export const skeletonVariants = cva(
-  "relative overflow-hidden bg-black/10 dark:bg-white/10 text-transparent",
-  {
-    variants: {
-      appearance: {
-        default: "bg-black/10 dark:bg-white/10",
-        subtle: "bg-black/[0.07] dark:bg-white/[0.07]",
-        muted: "bg-slate-200/80 dark:bg-slate-800/80",
-        sky: "bg-sky-500/10",
-        rose: "bg-rose-500/10",
-        purple: "bg-purple-500/10",
-        pink: "bg-pink-500/10",
-        orange: "bg-orange-500/10",
-        yellow: "bg-yellow-500/10",
-        teal: "bg-teal-500/10",
-        indigo: "bg-indigo-500/10",
-        emerald: "bg-emerald-500/10",
-        gray: "bg-gray-500/10",
-        amber: "bg-amber-500/10",
-        violet: "bg-violet-500/10",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600",
-        "gradient-green":
-          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600",
-        "gradient-red":
-          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600",
-      },
-      size: {
-        sm: "min-h-3",
-        md: "min-h-4",
-        lg: "min-h-6",
-      },
-      rounded: {
-        none: "rounded-none",
-        sm: "rounded-md",
-        md: "rounded-lg",
-        lg: "rounded-xl",
-        full: "rounded-full",
-      },
-      animation: {
-        none: "",
-        shimmer: "",
-        pulse: "",
-      },
-      shimmerTone: {
-        default: "",
-        subtle: "",
-        muted: "",
-        sky: "",
-        rose: "",
-        purple: "",
-        pink: "",
-        orange: "",
-        yellow: "",
-        teal: "",
-        indigo: "",
-        emerald: "",
-        gray: "",
-        amber: "",
-        violet: "",
-        "gradient-blue": "",
-        "gradient-green": "",
-        "gradient-red": "",
-        "gradient-yellow": "",
-        "gradient-purple": "",
-        "gradient-teal": "",
-        "gradient-indigo": "",
-        "gradient-pink": "",
-        "gradient-orange": "",
-      },
-    },
-    compoundVariants: [
-      {
-        animation: "shimmer",
-        shimmerTone: "default",
-        class: skeletonShimmerGradientClasses.default,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "muted",
-        class: skeletonShimmerGradientClasses.subtle,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "subtle",
-        class: skeletonShimmerGradientClasses.subtle,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "sky",
-        class: skeletonShimmerGradientClasses.sky,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "rose",
-        class: skeletonShimmerGradientClasses.rose,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "purple",
-        class: skeletonShimmerGradientClasses.purple,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "pink",
-        class: skeletonShimmerGradientClasses.pink,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "orange",
-        class: skeletonShimmerGradientClasses.orange,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "yellow",
-        class: skeletonShimmerGradientClasses.yellow,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "teal",
-        class: skeletonShimmerGradientClasses.teal,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "indigo",
-        class: skeletonShimmerGradientClasses.indigo,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "emerald",
-        class: skeletonShimmerGradientClasses.emerald,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gray",
-        class: skeletonShimmerGradientClasses.gray,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "amber",
-        class: skeletonShimmerGradientClasses.amber,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "violet",
-        class: skeletonShimmerGradientClasses.violet,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-blue",
-        class: skeletonShimmerGradientClasses["gradient-blue"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-green",
-        class: skeletonShimmerGradientClasses["gradient-green"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-red",
-        class: skeletonShimmerGradientClasses["gradient-red"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-yellow",
-        class: skeletonShimmerGradientClasses["gradient-yellow"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-purple",
-        class: skeletonShimmerGradientClasses["gradient-purple"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-teal",
-        class: skeletonShimmerGradientClasses["gradient-teal"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-indigo",
-        class: skeletonShimmerGradientClasses["gradient-indigo"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-pink",
-        class: skeletonShimmerGradientClasses["gradient-pink"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-orange",
-        class: skeletonShimmerGradientClasses["gradient-orange"],
-      },
-      {
-        animation: "pulse",
-        class: "",
-      },
-    ],
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      rounded: "md",
+export const skeletonVariants = cva(zuiSkeletonBase, {
+  variants: {
+    appearance: zuiSkeletonAppearances,
+    size: zuiSkeletonSizes,
+    rounded: zuiSkeletonRounded,
+    animation: zuiSkeletonAnimations,
+    shimmerTone: zuiSkeletonShimmerTones,
+  },
+  compoundVariants: [
+    {
       animation: "shimmer",
       shimmerTone: "default",
+      class: skeletonShimmerGradientClasses.default,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "muted",
+      class: skeletonShimmerGradientClasses.subtle,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "subtle",
+      class: skeletonShimmerGradientClasses.subtle,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "sky",
+      class: skeletonShimmerGradientClasses.sky,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "rose",
+      class: skeletonShimmerGradientClasses.rose,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "purple",
+      class: skeletonShimmerGradientClasses.purple,
     },
+    {
+      animation: "shimmer",
+      shimmerTone: "pink",
+      class: skeletonShimmerGradientClasses.pink,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "orange",
+      class: skeletonShimmerGradientClasses.orange,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "yellow",
+      class: skeletonShimmerGradientClasses.yellow,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "teal",
+      class: skeletonShimmerGradientClasses.teal,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "indigo",
+      class: skeletonShimmerGradientClasses.indigo,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "emerald",
+      class: skeletonShimmerGradientClasses.emerald,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gray",
+      class: skeletonShimmerGradientClasses.gray,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "amber",
+      class: skeletonShimmerGradientClasses.amber,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "violet",
+      class: skeletonShimmerGradientClasses.violet,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-blue",
+      class: skeletonShimmerGradientClasses["gradient-blue"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-green",
+      class: skeletonShimmerGradientClasses["gradient-green"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-red",
+      class: skeletonShimmerGradientClasses["gradient-red"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-yellow",
+      class: skeletonShimmerGradientClasses["gradient-yellow"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-purple",
+      class: skeletonShimmerGradientClasses["gradient-purple"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-teal",
+      class: skeletonShimmerGradientClasses["gradient-teal"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-indigo",
+      class: skeletonShimmerGradientClasses["gradient-indigo"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-pink",
+      class: skeletonShimmerGradientClasses["gradient-pink"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-orange",
+      class: skeletonShimmerGradientClasses["gradient-orange"],
+    },
+    {
+      animation: "pulse",
+      class: "",
+    },
+  ],
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    rounded: "md",
+    animation: "shimmer",
+    shimmerTone: "default",
   },
-);
+});
 
-export const skeletonTextLineVariants = cva("block w-full", {
+export const skeletonTextLineVariants = cva(zuiSkeletonTextLineBase, {
   variants: {
-    size: {
-      sm: "h-2.5",
-      md: "h-3",
-      lg: "h-4",
-    },
+    size: zuiSkeletonTextLineSizes,
   },
   defaultVariants: { size: "md" },
 });

package/src/ui/slider/variants.ts

@@ -1,81 +1,48 @@
 import { cva } from "class-variance-authority";
 
-export const sliderRootVariants = cva("w-full select-none touch-none", {
+import {
+  zuiSliderRangeAppearances,
+  zuiSliderRangeBase,
+  zuiSliderRootBase,
+  zuiSliderRootSizes,
+  zuiSliderThumbBase,
+  zuiSliderThumbSizes,
+  zuiSliderTrackBase,
+  zuiSliderTrackSizes,
+} from "../../design-system/slider";
+
+export const sliderRootVariants = cva(zuiSliderRootBase, {
   variants: {
-    size: {
-      sm: "py-2",
-      md: "py-2.5",
-      lg: "py-3",
-    },
+    size: zuiSliderRootSizes,
   },
   defaultVariants: {
     size: "md",
   },
 });
 
-export const sliderTrackVariants = cva(
-  "relative h-2 w-full shrink-0 overflow-hidden rounded-full bg-black/10 dark:bg-white/10",
-  {
-    variants: {
-      size: {
-        sm: "h-1.5",
-        md: "h-2",
-        lg: "h-2.5",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
+export const sliderTrackVariants = cva(zuiSliderTrackBase, {
+  variants: {
+    size: zuiSliderTrackSizes,
+  },
+  defaultVariants: {
+    size: "md",
   },
-);
+});
 
-export const sliderRangeVariants = cva(
-  "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-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: {
-      appearance: "default",
-    },
+export const sliderRangeVariants = cva(zuiSliderRangeBase, {
+  variants: {
+    appearance: zuiSliderRangeAppearances,
   },
-);
+  defaultVariants: {
+    appearance: "default",
+  },
+});
 
-export const sliderThumbVariants = cva(
-  "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: {
-        sm: "size-3.5",
-        md: "size-4",
-        lg: "size-5",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
+export const sliderThumbVariants = cva(zuiSliderThumbBase, {
+  variants: {
+    size: zuiSliderThumbSizes,
   },
-);
+  defaultVariants: {
+    size: "md",
+  },
+});

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

@@ -1,46 +1,17 @@
 import { cva } from "class-variance-authority";
 
-const spinnerAppearances = {
-  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;
+import {
+  zuiSpinnerAppearances,
+  zuiSpinnerBase,
+  zuiSpinnerSizes,
+  zuiSpinnerVariants,
+} from "../../../design-system/spinner";
 
-export const spinnerVariants = cva("inline-flex items-center justify-center", {
+export const spinnerVariants = cva(zuiSpinnerBase, {
   variants: {
-    appearance: spinnerAppearances,
-    size: {
-      xs: "size-3",
-      sm: "size-4",
-      md: "size-6",
-      lg: "size-8",
-      xl: "size-10",
-    },
-    variant: {
-      ring: "",
-      dots: "",
-      pulse: "",
-      bars: "",
-    },
+    appearance: zuiSpinnerAppearances,
+    size: zuiSpinnerSizes,
+    variant: zuiSpinnerVariants,
   },
   defaultVariants: {
     appearance: "default",

package/src/ui/stepper/stepper.test.tsx

@@ -53,8 +53,12 @@ describe("Stepper", () => {
       '[data-slot="stepper-indicator"]',
     );
     expect(indicators).toHaveLength(2);
-    expect(indicators[0]?.className).toContain("border-white/15");
-    expect(indicators[1]?.className).toContain("border-white/15");
+    expect(indicators[0]?.className).toContain(
+      "--zui-stepper-indicator-upcoming-border",
+    );
+    expect(indicators[1]?.className).toContain(
+      "--zui-stepper-indicator-upcoming-border",
+    );
   });
 
   it("should honor appearance prop on each indicator", () => {
@@ -73,8 +77,12 @@ describe("Stepper", () => {
     const indicators = document.querySelectorAll(
       '[data-slot="stepper-indicator"]',
     );
-    expect(indicators[0]?.className).toMatch(/emerald/);
-    expect(indicators[1]?.className).toMatch(/violet/);
+    expect(indicators[0]?.className).toMatch(
+      /--zui-stepper-indicator-complete-border/,
+    );
+    expect(indicators[1]?.className).toMatch(
+      /--zui-stepper-indicator-current-border/,
+    );
   });
 
   it("should render step index as indicator content when children are omitted", () => {