@zentauri-ui/zentauri-components 1.6.2 → 1.7.0

package/src/ui/toast/variants.ts

@@ -1,80 +1,29 @@
 import { cva } from "class-variance-authority";
 
-export const toastViewportVariants = cva(
-  "fixed z-[60] flex max-h-screen flex-col gap-2 p-4",
-  {
-    variants: {
-      position: {
-        "top-left": "left-0 top-0 items-start",
-        "top-center": "left-1/2 top-0 -translate-x-1/2 items-center",
-        "top-right": "right-0 top-0 items-end",
-        "bottom-left": "bottom-0 left-0 items-start",
-        "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center",
-        "bottom-right": "bottom-0 right-0 items-end",
-      },
-    },
-    defaultVariants: {
-      position: "bottom-right",
-    },
+import {
+  zuiToastRootAppearances,
+  zuiToastRootBase,
+  zuiToastRootSizes,
+  zuiToastViewportBase,
+  zuiToastViewportPositions,
+} from "../../design-system/toast";
+
+export const toastViewportVariants = cva(zuiToastViewportBase, {
+  variants: {
+    position: zuiToastViewportPositions,
+  },
+  defaultVariants: {
+    position: "bottom-right",
   },
-);
+});
 
-export const toastRootVariants = cva(
-  "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 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-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-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-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-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-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-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-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-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-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",
-        md: "p-4 text-sm",
-        lg: "p-5 text-base",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-    },
+export const toastRootVariants = cva(zuiToastRootBase, {
+  variants: {
+    appearance: zuiToastRootAppearances,
+    size: zuiToastRootSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
   },
-);
+});

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

@@ -1,13 +1,14 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { useCallback, useState } from "react";
+import { useCallback, useId, useState } from "react";
 
 import { cn } from "../../../lib/utils";
 
 import { toggleThumbAnimationPresets } from "./animations";
 import type { ToggleAnimatedProps } from "./types";
 import { toggleThumbVariants, toggleTrackVariants } from "../variants";
+import { hasToggleLabelChildren } from "../toggle-base";
 
 export function ToggleAnimated(props: ToggleAnimatedProps) {
   const {
@@ -25,6 +26,7 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
     children,
     ...rest
   } = props;
+  const toggleLabelId = useId();
   const isControlled = checked !== undefined;
   const [uncontrolled, setUncontrolled] = useState(defaultChecked);
   const resolved = isControlled ? Boolean(checked) : uncontrolled;
@@ -40,7 +42,15 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
     [isControlled, onCheckedChange],
   );
 
-  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 24 : 18;
+  const thumbShiftPx = size === "sm" ? 16 : size === "lg" ? 24 : 20;
+  const labeledByChildren = hasToggleLabelChildren(children);
+  const labeling = labeledByChildren
+    ? {
+        "aria-labelledby": toggleLabelId,
+      }
+    : {
+        "aria-label": ariaLabel ?? "Toggle",
+      };
 
   return (
     <button
@@ -49,9 +59,9 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
       role="switch"
       data-slot="toggle"
       aria-checked={resolved}
-      aria-label={ariaLabel}
       data-state={resolved ? "checked" : "unchecked"}
       disabled={disabled}
+      {...labeling}
       className={cn(toggleTrackVariants({ size, appearance }), className)}
       onClick={() => {
         if (!disabled) {
@@ -60,7 +70,7 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
       }}
       {...rest}
     >
-      <span className="sr-only">{children}</span>
+      <span className="sr-only" id={labeledByChildren ? toggleLabelId : undefined}>{children}</span>
       <motion.span
         className={cn(
           toggleThumbVariants({ size, thumbColor }),

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

@@ -7,7 +7,7 @@ import { cn } from "../../lib/utils";
 import type { ToggleProps } from "./types";
 import { toggleThumbVariants, toggleTrackVariants } from "./variants";
 
-function hasToggleLabelChildren(node: ReactNode): boolean {
+export function hasToggleLabelChildren(node: ReactNode): boolean {
   if (node === undefined || node === null) {
     return false;
   }
@@ -56,7 +56,7 @@ export function ToggleBase(props: ToggleProps) {
     [isControlled, onCheckedChange],
   );
 
-  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 24 : 19;
+  const thumbShiftPx = size === "sm" ? 16 : size === "lg" ? 24 : 20;
   const labeledByChildren = hasToggleLabelChildren(children);
   const labeling = labeledByChildren
     ? {
@@ -84,11 +84,7 @@ export function ToggleBase(props: ToggleProps) {
       }}
       {...rest}
     >
-      {labeledByChildren ? (
-        <span id={toggleLabelId} className="sr-only">
-          {children}
-        </span>
-      ) : null}
+      <span className="sr-only" id={labeledByChildren ? toggleLabelId : undefined}>{children}</span>
       <span
         className={cn(
           toggleThumbVariants({ size, thumbColor }),

package/src/ui/toggle/variants.ts

@@ -1,116 +1,32 @@
 import { cva } from "class-variance-authority";
 
-export const toggleTrackVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer rounded-full border border-black/10 dark:border-white/10 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 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-950 data-[state=checked]:border-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      size: {
-        sm: "h-5 w-9",
-        md: "h-6 w-11",
-        lg: "h-7 w-[3.25rem]",
-      },
-      appearance: {
-        default:
-          "data-[state=checked]:bg-cyan-400/70 dark:data-[state=checked]:bg-cyan-600/90",
-        success:
-          "data-[state=checked]:border-emerald-500/70 data-[state=checked]:bg-emerald-400/80 dark:data-[state=checked]:bg-emerald-600/80",
-        destructive:
-          "data-[state=checked]:border-rose-500/40 data-[state=checked]:bg-rose-400/80 dark:data-[state=checked]:bg-rose-600/80",
-        neutral:
-          "data-[state=checked]:border-slate-500/40 dark:data-[state=checked]:border-slate-400/40 data-[state=checked]:bg-slate-400/90 dark:data-[state=checked]:bg-slate-600/90",
-        indigo:
-          "data-[state=checked]:border-indigo-500/40 data-[state=checked]:bg-indigo-400/80 dark:data-[state=checked]:bg-indigo-600/80",
-        purple:
-          "data-[state=checked]:border-purple-500/40 data-[state=checked]:bg-purple-400/80 dark:data-[state=checked]:bg-purple-600/80",
-        pink: "data-[state=checked]:border-pink-500/40 data-[state=checked]:bg-pink-400/80 dark:data-[state=checked]:bg-pink-600/80",
-        orange:
-          "data-[state=checked]:border-orange-500/40 data-[state=checked]:bg-orange-400/80 dark:data-[state=checked]:bg-orange-600/80",
-        yellow:
-          "data-[state=checked]:border-yellow-500/40 data-[state=checked]:bg-yellow-400/80 dark:data-[state=checked]:bg-yellow-600/80",
-        green:
-          "data-[state=checked]:border-green-500/40 data-[state=checked]:bg-green-400/80 dark:data-[state=checked]:bg-green-600/80",
-        teal: "data-[state=checked]:border-teal-500/40 data-[state=checked]:bg-teal-400/80 dark:data-[state=checked]:bg-teal-600/80",
-        cyan: "data-[state=checked]:border-cyan-500/40 data-[state=checked]:bg-cyan-400/80 dark:data-[state=checked]:bg-cyan-600/80",
-        lime: "data-[state=checked]:border-lime-500/40 data-[state=checked]:bg-lime-400/80 dark:data-[state=checked]:bg-lime-600/80",
-        emerald:
-          "data-[state=checked]:border-emerald-500/40 data-[state=checked]:bg-emerald-400/80 dark:data-[state=checked]:bg-emerald-600/80",
-        rose: "data-[state=checked]:border-rose-500/40 data-[state=checked]:bg-rose-400/80 dark:data-[state=checked]:bg-rose-600/80",
-        slate:
-          "data-[state=checked]:border-slate-500/40 dark:data-[state=checked]:border-slate-400/40 data-[state=checked]:bg-slate-400/90 dark:data-[state=checked]:bg-slate-600/90",
-        zinc: "data-[state=checked]:border-zinc-400/40 data-[state=checked]:bg-zinc-600/90",
-        gray: "data-[state=checked]:border-gray-400/40 data-[state=checked]:bg-gray-400/80 dark:data-[state=checked]:bg-gray-600/90",
-        stone:
-          "bg-stone-300 data-[state=checked]:border-stone-400/40 data-[state=checked]:bg-stone-600/90",
-        "gradient-blue":
-          "bg-blue-300 data-[state=checked]:bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600",
-        "gradient-green":
-          "bg-green-300 data-[state=checked]:bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600",
-        "gradient-red":
-          "bg-red-300 data-[state=checked]:bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600",
-        "gradient-yellow":
-          "bg-yellow-300 data-[state=checked]:bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600",
-        "gradient-purple":
-          "bg-purple-300 data-[state=checked]:bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600",
-        "gradient-teal":
-          "bg-teal-300 data-[state=checked]:bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600",
-        "gradient-indigo":
-          "bg-indigo-300 data-[state=checked]:bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600",
-        "gradient-pink":
-          "bg-pink-300 data-[state=checked]:bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600",
-        "gradient-orange":
-          "bg-orange-300 data-[state=checked]:bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      appearance: "default",
-    },
+import {
+  zuiToggleThumbBase,
+  zuiToggleThumbColors,
+  zuiToggleThumbSizes,
+  zuiToggleTrackAppearances,
+  zuiToggleTrackBase,
+  zuiToggleTrackSizes,
+} from "../../design-system/toggle";
+
+export const toggleTrackVariants = cva(zuiToggleTrackBase, {
+  variants: {
+    size: zuiToggleTrackSizes,
+    appearance: zuiToggleTrackAppearances,
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default",
   },
-);
+});
 
-export const toggleThumbVariants = cva(
-  "pointer-events-none block rounded-full border border-slate-900/30 dark:border-white/10 shadow-[0_1px_2px_rgba(15,23,42,0.12)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.35)] ring-0",
-  {
-    variants: {
-      size: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
-      },
-      thumbColor: {
-        default: "bg-white",
-        success: "bg-emerald-500",
-        destructive: "bg-rose-500",
-        neutral: "bg-slate-500",
-        indigo: "bg-indigo-500",
-        purple: "bg-purple-500",
-        pink: "bg-pink-500",
-        orange: "bg-orange-500",
-        yellow: "bg-yellow-500",
-        green: "bg-green-500",
-        teal: "bg-teal-500",
-        cyan: "bg-cyan-500",
-        lime: "bg-lime-500",
-        emerald: "bg-emerald-500",
-        rose: "bg-rose-500",
-        slate: "bg-slate-500",
-        zinc: "bg-zinc-500",
-        gray: "bg-gray-500",
-        stone: "bg-stone-500",
-        "gradient-blue": "bg-blue-500",
-        "gradient-green": "bg-green-500",
-        "gradient-red": "bg-red-500",
-        "gradient-yellow": "bg-yellow-500",
-        "gradient-purple": "bg-purple-500",
-        "gradient-teal": "bg-teal-500",
-        "gradient-indigo": "bg-indigo-500",
-        "gradient-pink": "bg-pink-500",
-        "gradient-orange": "bg-orange-500",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      thumbColor: "default",
-    },
+export const toggleThumbVariants = cva(zuiToggleThumbBase, {
+  variants: {
+    size: zuiToggleThumbSizes,
+    thumbColor: zuiToggleThumbColors,
+  },
+  defaultVariants: {
+    size: "md",
+    thumbColor: "default",
   },
-);
+});

package/src/ui/tooltip/variants.ts

@@ -1,60 +1,21 @@
 import { cva } from "class-variance-authority";
 
-export const tooltipVariants = cva(
-  "absolute z-50 rounded-md shadow-md transition-all duration-200 pointer-events-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-white dark:bg-black text-slate-900 dark:text-white",
-        outline: "border bg-black dark:bg-white text-white dark:text-black",
-        ghost: "bg-gray-800 text-white/90",
-        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-800 text-white",
-        indigo: "bg-indigo-800 text-white",
-        purple: "bg-purple-800 text-white",
-        pink: "bg-pink-800 text-white",
-        rose: "bg-rose-800 text-white",
-        sky: "bg-sky-700 text-white",
-        teal: "bg-teal-800 text-white",
-        yellow: "bg-yellow-800 text-white",
-        orange: "bg-orange-800 text-white",
-        green: "bg-green-800 text-white",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-800 to-purple-800 text-white",
-        "gradient-green":
-          "bg-linear-to-r from-green-800 to-lime-800 text-white",
-        "gradient-red": "bg-linear-to-r from-red-800 to-pink-800 text-white",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-800 to-orange-800 text-white",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-800 to-pink-800 text-white",
-        "gradient-teal": "bg-linear-to-r from-teal-800 to-cyan-800 text-white",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-800 to-purple-800 text-white",
-        "gradient-pink": "bg-linear-to-r from-pink-800 to-rose-800 text-white",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-800 to-red-800 text-white",
-      },
-      size: {
-        sm: "text-xs px-2 py-1",
-        md: "text-sm px-3 py-1.5",
-        lg: "text-base px-4 py-2",
-      },
-      width: {
-        fit: "min-w-75 md:min-w-fit",
-        xs: "min-w-75 md:min-w-xs",
-        sm: "min-w-75 md:min-w-sm",
-        md: "min-w-75 md:min-w-md",
-        lg: "min-w-75 md:min-w-lg",
-        xl: "min-w-75 md:min-w-xl",
-        "2xl": "min-w-75 md:min-w-2xl",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-      width: "xs",
-    },
+import {
+  zuiTooltipBase,
+  zuiTooltipSizes,
+  zuiTooltipVariants,
+  zuiTooltipWidths,
+} from "../../design-system/tooltip";
+
+export const tooltipVariants = cva(zuiTooltipBase, {
+  variants: {
+    variant: zuiTooltipVariants,
+    size: zuiTooltipSizes,
+    width: zuiTooltipWidths,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    width: "xs",
   },
-);
+});

package/src/ui/typography/typography.test.tsx

@@ -27,7 +27,7 @@ describe("Typography primitives", () => {
       </Text>,
     );
     const node = container.querySelector('[data-testid="muted-text"]');
-    expect(node?.className).toMatch(/text-slate-400/);
+    expect(node?.className).toMatch(/--zui-typography-muted-fg/);
   });
 
   it("should render unordered List with list marker utilities", () => {

package/src/ui/typography/variants.ts

@@ -1,83 +1,46 @@
 import { cva } from "class-variance-authority";
 
-/** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */
+import {
+  zuiHeadingBase,
+  zuiHeadingLevels,
+  zuiOrderedListBase,
+  zuiTextSizes,
+  zuiTypographyTones,
+  zuiUnorderedListBase,
+  zuiUnorderedMarkers,
+} from "../../design-system/typography";
+
 export const typographyToneVariants = cva("", {
   variants: {
-    tone: {
-      default:
-        "text-slate-900 dark:text-slate-50 border-black/15 dark:border-white/15",
-      muted:
-        "text-slate-500 dark:text-slate-400 border-black/15 dark:border-white/15",
-      primary: "text-cyan-700 dark:text-cyan-300 border-cyan-300/40",
-      secondary:
-        "text-slate-600 dark:text-slate-300 border-black/15 dark:border-white/15",
-      accent: "text-violet-700 dark:text-violet-300 border-violet-300/40",
-      destructive: "text-rose-600 dark:text-rose-400 border-rose-300/40",
-      info: "text-sky-700 dark:text-sky-300 border-sky-300/40",
-      success: "text-emerald-700 dark:text-emerald-300 border-emerald-300/40",
-      warning: "text-amber-700 dark:text-amber-300 border-amber-300/40",
-      error: "text-red-700 dark:text-red-300 border-red-300/40",
-      "gradient-pink-violet":
-        "bg-linear-to-r from-pink-600 dark:from-pink-400 to-violet-600 dark:to-violet-400 bg-clip-text text-transparent border-violet-300/40",
-      "gradient-cyan-violet":
-        "bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-violet-600 dark:to-violet-400 bg-clip-text text-transparent border-violet-300/40",
-      "gradient-cyan-blue":
-        "bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-blue-600 dark:to-blue-400 bg-clip-text text-transparent border-blue-300/40",
-      "gradient-cyan-green":
-        "bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-green-600 dark:to-green-400 bg-clip-text text-transparent border-green-300/40",
-      "gradient-cyan-orange":
-        "bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-orange-600 dark:to-orange-400 bg-clip-text text-transparent border-orange-300/40",
-      "gradient-cyan-red":
-        "bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-red-600 dark:to-red-400 bg-clip-text text-transparent border-red-300/40",
-      "gradient-cyan-purple":
-        "bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-purple-600 dark:to-purple-400 bg-clip-text text-transparent border-purple-300/40",
-      "gradient-cyan-pink":
-        "bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-pink-600 dark:to-pink-400 bg-clip-text text-transparent border-pink-300/40",
-    },
+    tone: zuiTypographyTones,
   },
   defaultVariants: {
     tone: "default",
   },
 });
 
-export const headingLevelVariants = cva("scroll-m-20", {
+export const headingLevelVariants = cva(zuiHeadingBase, {
   variants: {
-    level: {
-      1: "text-4xl font-bold tracking-tight md:text-5xl",
-      2: "text-3xl font-semibold tracking-tight",
-      3: "text-2xl font-semibold tracking-tight",
-      4: "text-xl font-semibold tracking-tight",
-      5: "text-lg font-medium",
-      6: "text-base font-medium",
-    },
+    level: zuiHeadingLevels,
   },
 });
 
 export const textSizeVariants = cva("", {
   variants: {
-    size: {
-      sm: "text-sm leading-relaxed",
-      base: "text-base leading-relaxed",
-      lg: "text-lg leading-relaxed",
-    },
+    size: zuiTextSizes,
   },
   defaultVariants: {
     size: "base",
   },
 });
 
-/** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */
-export const unorderedListMarkerVariants = cva("space-y-2 pl-5", {
+export const unorderedListMarkerVariants = cva(zuiUnorderedListBase, {
   variants: {
-    marker: {
-      disc: "list-disc",
-      circle: "[list-style-type:circle]",
-      none: "list-none pl-0",
-    },
+    marker: zuiUnorderedMarkers,
   },
   defaultVariants: {
     marker: "disc",
   },
 });
 
-export const orderedListVariants = cva("list-decimal space-y-2 pl-5");
+export const orderedListVariants = cva(zuiOrderedListBase);