@zentauri-ui/zentauri-components 1.6.3 → 1.7.1

package/src/design-system/toggle.ts

@@ -0,0 +1,120 @@
+export const zuiToggleTrackBase =
+  "relative inline-flex shrink-0 cursor-pointer rounded-full border border-[color:var(--zui-toggle-track-border,#0000001a)] dark:border-[color:var(--zui-toggle-track-border-dark,#ffffff1a)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-toggle-track-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-toggle-track-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] disabled:cursor-not-allowed disabled:opacity-50";
+
+export const zuiToggleTrackSizes = {
+  sm: "h-5 w-9",
+  md: "h-6 w-11",
+  lg: "h-7 w-[3.25rem]",
+} as const;
+
+export const zuiToggleTrackAppearances = {
+  default:
+    "data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked,oklch(78.9%_0.154_211.53_/_0.7))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.9))]",
+  success:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked,oklch(69.6%_0.17_162.48_/_0.7))] data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]",
+  destructive:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]",
+  neutral:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]",
+  indigo:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked,oklch(58.5%_0.233_277.117_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked,oklch(67.3%_0.182_276.935_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked-dark,oklch(51.1%_0.262_276.966_/_0.8))]",
+  purple:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked,oklch(62.7%_0.265_303.9_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked,oklch(71.4%_0.203_305.504_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked-dark,oklch(55.8%_0.288_302.321_/_0.8))]",
+  pink: "data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked,oklch(65.6%_0.241_354.308_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked,oklch(71.8%_0.202_349.761_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked-dark,oklch(59.2%_0.249_0.584_/_0.8))]",
+  orange:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked,oklch(70.5%_0.213_47.604_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked,oklch(75%_0.183_55.934_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked-dark,oklch(64.6%_0.222_41.116_/_0.8))]",
+  yellow:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked,oklch(79.5%_0.184_86.047_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked,oklch(85.2%_0.199_91.936_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked-dark,oklch(68.1%_0.162_75.834_/_0.8))]",
+  green:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked,oklch(72.3%_0.219_149.579_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked,oklch(79.2%_0.209_151.711_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked-dark,oklch(62.7%_0.194_149.214_/_0.8))]",
+  teal: "data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked,oklch(70.4%_0.14_182.503_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked,oklch(77.7%_0.152_181.912_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked-dark,oklch(60%_0.118_184.704_/_0.8))]",
+  cyan: "data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked,oklch(78.9%_0.154_211.53_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.8))]",
+  lime: "data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked,oklch(76.8%_0.233_130.85_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked,oklch(84.1%_0.238_128.85_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked-dark,oklch(64.8%_0.2_131.684_/_0.8))]",
+  emerald:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked,oklch(69.6%_0.17_162.48_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]",
+  rose: "data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]",
+  slate:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]",
+  zinc: "data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked,oklch(70.5%_0.015_286.067_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked,oklch(44.2%_0.017_285.786_/_0.9))]",
+  gray: "data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked,oklch(70.7%_0.022_261.325_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked,oklch(70.7%_0.022_261.325_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked-dark,oklch(44.6%_0.03_256.802_/_0.9))]",
+  stone:
+    "bg-[var(--zui-toggle-track-stone-bg,oklch(86.9%_0.005_56.366))] data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked,oklch(70.9%_0.01_56.259_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked,oklch(44.4%_0.011_73.639_/_0.9))]",
+  "gradient-blue":
+    "bg-[var(--zui-toggle-track-gradient-blue-bg,oklch(80.9%_0.105_251.813))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-toggle-track-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-toggle-track-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))]",
+  "gradient-green":
+    "bg-[var(--zui-toggle-track-gradient-green-bg,oklch(87.1%_0.15_154.449))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-toggle-track-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-toggle-track-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-toggle-track-gradient-green-to-dark,oklch(64.8%_0.2_131.684))]",
+  "gradient-red":
+    "bg-[var(--zui-toggle-track-gradient-red-bg,oklch(80.8%_0.114_19.571))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-toggle-track-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-toggle-track-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-red-to-dark,oklch(59.2%_0.249_0.584))]",
+  "gradient-yellow":
+    "bg-[var(--zui-toggle-track-gradient-yellow-bg,oklch(90.5%_0.182_98.111))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-toggle-track-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-toggle-track-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-toggle-track-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))]",
+  "gradient-purple":
+    "bg-[var(--zui-toggle-track-gradient-purple-bg,oklch(82.7%_0.119_306.383))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-toggle-track-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-toggle-track-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))]",
+  "gradient-teal":
+    "bg-[var(--zui-toggle-track-gradient-teal-bg,oklch(85.5%_0.138_181.071))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-toggle-track-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-toggle-track-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-toggle-track-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))]",
+  "gradient-indigo":
+    "bg-[var(--zui-toggle-track-gradient-indigo-bg,oklch(78.5%_0.115_274.713))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-toggle-track-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-toggle-track-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))]",
+  "gradient-pink":
+    "bg-[var(--zui-toggle-track-gradient-pink-bg,oklch(82.3%_0.12_346.018))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-toggle-track-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-toggle-track-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-toggle-track-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]",
+  "gradient-orange":
+    "bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]",
+} as const;
+
+export const zuiToggleThumbBase =
+  "pointer-events-none block rounded-full border border-[color:var(--zui-toggle-thumb-border,oklch(20.8%_0.042_265.755_/_0.3))] dark:border-[color:var(--zui-toggle-thumb-border-dark,#ffffff1a)] shadow-[var(--zui-toggle-thumb-shadow,0_1px_2px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-toggle-thumb-shadow-dark,0_1px_2px_rgba(15,23,42,0.35))] ring-0";
+
+export const zuiToggleThumbSizes = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+} as const;
+
+export const zuiToggleThumbColors = {
+  default: "bg-[var(--zui-toggle-thumb-colors-default-bg,#ffffff)]",
+  success:
+    "bg-[var(--zui-toggle-thumb-colors-success-bg,oklch(69.6%_0.17_162.48))]",
+  destructive:
+    "bg-[var(--zui-toggle-thumb-colors-destructive-bg,oklch(64.5%_0.246_16.439))]",
+  neutral:
+    "bg-[var(--zui-toggle-thumb-colors-neutral-bg,oklch(55.4%_0.046_257.417))]",
+  indigo:
+    "bg-[var(--zui-toggle-thumb-colors-indigo-bg,oklch(58.5%_0.233_277.117))]",
+  purple:
+    "bg-[var(--zui-toggle-thumb-colors-purple-bg,oklch(62.7%_0.265_303.9))]",
+  pink: "bg-[var(--zui-toggle-thumb-colors-pink-bg,oklch(65.6%_0.241_354.308))]",
+  orange:
+    "bg-[var(--zui-toggle-thumb-colors-orange-bg,oklch(70.5%_0.213_47.604))]",
+  yellow:
+    "bg-[var(--zui-toggle-thumb-colors-yellow-bg,oklch(79.5%_0.184_86.047))]",
+  green:
+    "bg-[var(--zui-toggle-thumb-colors-green-bg,oklch(72.3%_0.219_149.579))]",
+  teal: "bg-[var(--zui-toggle-thumb-colors-teal-bg,oklch(70.4%_0.14_182.503))]",
+  cyan: "bg-[var(--zui-toggle-thumb-colors-cyan-bg,oklch(71.5%_0.143_215.221))]",
+  lime: "bg-[var(--zui-toggle-thumb-colors-lime-bg,oklch(76.8%_0.233_130.85))]",
+  emerald:
+    "bg-[var(--zui-toggle-thumb-colors-emerald-bg,oklch(69.6%_0.17_162.48))]",
+  rose: "bg-[var(--zui-toggle-thumb-colors-rose-bg,oklch(64.5%_0.246_16.439))]",
+  slate:
+    "bg-[var(--zui-toggle-thumb-colors-slate-bg,oklch(55.4%_0.046_257.417))]",
+  zinc: "bg-[var(--zui-toggle-thumb-colors-zinc-bg,oklch(55.2%_0.016_285.938))]",
+  gray: "bg-[var(--zui-toggle-thumb-colors-gray-bg,oklch(55.1%_0.027_264.364))]",
+  stone:
+    "bg-[var(--zui-toggle-thumb-colors-stone-bg,oklch(55.3%_0.013_58.071))]",
+  "gradient-blue":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg,oklch(62.3%_0.214_259.815))]",
+  "gradient-green":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-green-bg,oklch(72.3%_0.219_149.579))]",
+  "gradient-red":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-red-bg,oklch(63.7%_0.237_25.331))]",
+  "gradient-yellow":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg,oklch(79.5%_0.184_86.047))]",
+  "gradient-purple":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg,oklch(62.7%_0.265_303.9))]",
+  "gradient-teal":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg,oklch(70.4%_0.14_182.503))]",
+  "gradient-indigo":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg,oklch(58.5%_0.233_277.117))]",
+  "gradient-pink":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg,oklch(65.6%_0.241_354.308))]",
+  "gradient-orange":
+    "bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))]",
+} as const;

package/src/design-system/tokens.ts

@@ -0,0 +1,22 @@
+export const zuiCssVariablePattern =
+  "--zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?" as const;
+
+export const zuiInteractiveBase = ["transition-colors", "select-none"] as const;
+
+export const zuiDisabledState = {
+  default: "disabled:pointer-events-none disabled:opacity-50",
+} as const;
+
+export const zuiFocusRing = {
+  default:
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-focus-ring,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-focus-ring-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2",
+} as const;
+
+export const zuiRingOffset = {
+  default:
+    "ring-offset-[var(--zui-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-ring-offset-dark,oklch(12.9%_0.042_264.695))]",
+} as const;
+
+export const zuiRadius = {
+  xl: "rounded-[var(--zui-radius-xl,0.75rem)]",
+} as const;

package/src/design-system/tooltip.ts

@@ -0,0 +1,63 @@
+export const zuiTooltipBase =
+  "absolute z-50 rounded-md shadow-md transition-all duration-200 pointer-events-none";
+
+export const zuiTooltipVariants = {
+  default:
+    "bg-[var(--zui-tooltip-default-bg,#ffffff)] dark:bg-[var(--zui-tooltip-default-bg-dark,#000000)] text-[color:var(--zui-tooltip-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tooltip-default-fg-dark,#ffffff)]",
+  outline:
+    "border bg-[var(--zui-tooltip-outline-bg,#000000)] dark:bg-[var(--zui-tooltip-outline-bg-dark,#ffffff)] text-[color:var(--zui-tooltip-outline-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-outline-fg-dark,#000000)]",
+  ghost:
+    "bg-[var(--zui-tooltip-ghost-bg,oklch(27.8%_0.033_256.848))] text-[color:var(--zui-tooltip-ghost-fg,#ffffffe6)]",
+  glass:
+    "border border-[color:var(--zui-tooltip-glass-border,#00000026)] dark:border-[color:var(--zui-tooltip-glass-border-dark,#ffffff26)] bg-[var(--zui-tooltip-glass-bg,#0000001a)] dark:bg-[var(--zui-tooltip-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-tooltip-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tooltip-glass-fg-dark,#ffffff)] backdrop-blur-md",
+  emerald:
+    "bg-[var(--zui-tooltip-emerald-bg,oklch(43.2%_0.095_166.913))] text-[color:var(--zui-tooltip-emerald-fg,#ffffff)]",
+  indigo:
+    "bg-[var(--zui-tooltip-indigo-bg,oklch(39.8%_0.195_277.366))] text-[color:var(--zui-tooltip-indigo-fg,#ffffff)]",
+  purple:
+    "bg-[var(--zui-tooltip-purple-bg,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-purple-fg,#ffffff)]",
+  pink: "bg-[var(--zui-tooltip-pink-bg,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-pink-fg,#ffffff)]",
+  rose: "bg-[var(--zui-tooltip-rose-bg,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-rose-fg,#ffffff)]",
+  sky: "bg-[var(--zui-tooltip-sky-bg,oklch(50%_0.134_242.749))] text-[color:var(--zui-tooltip-sky-fg,#ffffff)]",
+  teal: "bg-[var(--zui-tooltip-teal-bg,oklch(43.7%_0.078_188.216))] text-[color:var(--zui-tooltip-teal-fg,#ffffff)]",
+  yellow:
+    "bg-[var(--zui-tooltip-yellow-bg,oklch(47.6%_0.114_61.907))] text-[color:var(--zui-tooltip-yellow-fg,#ffffff)]",
+  orange:
+    "bg-[var(--zui-tooltip-orange-bg,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-orange-fg,#ffffff)]",
+  green:
+    "bg-[var(--zui-tooltip-green-bg,oklch(44.8%_0.119_151.328))] text-[color:var(--zui-tooltip-green-fg,#ffffff)]",
+  "gradient-blue":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-blue-from,oklch(42.4%_0.199_265.638))] to-[var(--zui-tooltip-gradient-blue-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-blue-fg,#ffffff)]",
+  "gradient-green":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-green-from,oklch(44.8%_0.119_151.328))] to-[var(--zui-tooltip-gradient-green-to,oklch(45.3%_0.124_130.933))] text-[color:var(--zui-tooltip-gradient-green-fg,#ffffff)]",
+  "gradient-red":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-red-from,oklch(44.4%_0.177_26.899))] to-[var(--zui-tooltip-gradient-red-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-red-fg,#ffffff)]",
+  "gradient-yellow":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-yellow-from,oklch(47.6%_0.114_61.907))] to-[var(--zui-tooltip-gradient-yellow-to,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-gradient-yellow-fg,#ffffff)]",
+  "gradient-purple":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-purple-from,oklch(43.8%_0.218_303.724))] to-[var(--zui-tooltip-gradient-purple-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-purple-fg,#ffffff)]",
+  "gradient-teal":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-teal-from,oklch(43.7%_0.078_188.216))] to-[var(--zui-tooltip-gradient-teal-to,oklch(45%_0.085_224.283))] text-[color:var(--zui-tooltip-gradient-teal-fg,#ffffff)]",
+  "gradient-indigo":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-indigo-from,oklch(39.8%_0.195_277.366))] to-[var(--zui-tooltip-gradient-indigo-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-indigo-fg,#ffffff)]",
+  "gradient-pink":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-pink-from,oklch(45.9%_0.187_3.815))] to-[var(--zui-tooltip-gradient-pink-to,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-gradient-pink-fg,#ffffff)]",
+  "gradient-orange":
+    "bg-linear-to-r from-[var(--zui-tooltip-gradient-orange-from,oklch(47%_0.157_37.304))] to-[var(--zui-tooltip-gradient-orange-to,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-tooltip-gradient-orange-fg,#ffffff)]",
+} as const;
+
+export const zuiTooltipSizes = {
+  sm: "text-xs px-2 py-1",
+  md: "text-sm px-3 py-1.5",
+  lg: "text-base px-4 py-2",
+} as const;
+
+export const zuiTooltipWidths = {
+  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",
+} as const;

package/src/design-system/typography.ts

@@ -0,0 +1,64 @@
+export const zuiTypographyTones = {
+  default:
+    "text-[color:var(--zui-typography-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-typography-default-fg-dark,oklch(98.4%_0.003_247.858))] border-[color:var(--zui-typography-default-border,#00000026)] dark:border-[color:var(--zui-typography-default-border-dark,#ffffff26)]",
+  muted:
+    "text-[color:var(--zui-typography-muted-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-typography-muted-fg-dark,oklch(70.4%_0.04_256.788))] border-[color:var(--zui-typography-muted-border,#00000026)] dark:border-[color:var(--zui-typography-muted-border-dark,#ffffff26)]",
+  primary:
+    "text-[color:var(--zui-typography-primary-fg,oklch(52%_0.105_223.128))] dark:text-[color:var(--zui-typography-primary-fg-dark,oklch(86.5%_0.127_207.078))] border-[color:var(--zui-typography-primary-border,oklch(86.5%_0.127_207.078_/_0.4))]",
+  secondary:
+    "text-[color:var(--zui-typography-secondary-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-typography-secondary-fg-dark,oklch(86.9%_0.022_252.894))] border-[color:var(--zui-typography-secondary-border,#00000026)] dark:border-[color:var(--zui-typography-secondary-border-dark,#ffffff26)]",
+  accent:
+    "text-[color:var(--zui-typography-accent-fg,oklch(49.1%_0.27_292.581))] dark:text-[color:var(--zui-typography-accent-fg-dark,oklch(81.1%_0.111_293.571))] border-[color:var(--zui-typography-accent-border,oklch(81.1%_0.111_293.571_/_0.4))]",
+  destructive:
+    "text-[color:var(--zui-typography-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-typography-destructive-fg-dark,oklch(71.2%_0.194_13.428))] border-[color:var(--zui-typography-destructive-border,oklch(81%_0.117_11.638_/_0.4))]",
+  info: "text-[color:var(--zui-typography-info-fg,oklch(50%_0.134_242.749))] dark:text-[color:var(--zui-typography-info-fg-dark,oklch(82.8%_0.111_230.318))] border-[color:var(--zui-typography-info-border,oklch(82.8%_0.111_230.318_/_0.4))]",
+  success:
+    "text-[color:var(--zui-typography-success-fg,oklch(50.8%_0.118_165.612))] dark:text-[color:var(--zui-typography-success-fg-dark,oklch(84.5%_0.143_164.978))] border-[color:var(--zui-typography-success-border,oklch(84.5%_0.143_164.978_/_0.4))]",
+  warning:
+    "text-[color:var(--zui-typography-warning-fg,oklch(55.5%_0.163_48.998))] dark:text-[color:var(--zui-typography-warning-fg-dark,oklch(87.9%_0.169_91.605))] border-[color:var(--zui-typography-warning-border,oklch(87.9%_0.169_91.605_/_0.4))]",
+  error:
+    "text-[color:var(--zui-typography-error-fg,oklch(50.5%_0.213_27.518))] dark:text-[color:var(--zui-typography-error-fg-dark,oklch(80.8%_0.114_19.571))] border-[color:var(--zui-typography-error-border,oklch(80.8%_0.114_19.571_/_0.4))]",
+  "gradient-pink-violet":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-pink-violet-from,oklch(59.2%_0.249_0.584))] dark:from-[var(--zui-typography-gradient-pink-violet-from-dark,oklch(71.8%_0.202_349.761))] to-[var(--zui-typography-gradient-pink-violet-to,oklch(54.1%_0.281_293.009))] dark:to-[var(--zui-typography-gradient-pink-violet-to-dark,oklch(70.2%_0.183_293.541))] bg-clip-text text-[color:var(--zui-typography-gradient-pink-violet-fg,transparent)] border-[color:var(--zui-typography-gradient-pink-violet-border,oklch(81.1%_0.111_293.571_/_0.4))]",
+  "gradient-cyan-violet":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-violet-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-violet-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-violet-to,oklch(54.1%_0.281_293.009))] dark:to-[var(--zui-typography-gradient-cyan-violet-to-dark,oklch(70.2%_0.183_293.541))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-violet-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-violet-border,oklch(81.1%_0.111_293.571_/_0.4))]",
+  "gradient-cyan-blue":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-blue-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-blue-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-blue-to,oklch(54.6%_0.245_262.881))] dark:to-[var(--zui-typography-gradient-cyan-blue-to-dark,oklch(70.7%_0.165_254.624))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-blue-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-blue-border,oklch(80.9%_0.105_251.813_/_0.4))]",
+  "gradient-cyan-green":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-green-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-green-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-green-to,oklch(62.7%_0.194_149.214))] dark:to-[var(--zui-typography-gradient-cyan-green-to-dark,oklch(79.2%_0.209_151.711))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-green-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-green-border,oklch(87.1%_0.15_154.449_/_0.4))]",
+  "gradient-cyan-orange":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-orange-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-orange-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-orange-to,oklch(64.6%_0.222_41.116))] dark:to-[var(--zui-typography-gradient-cyan-orange-to-dark,oklch(75%_0.183_55.934))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-orange-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-orange-border,oklch(83.7%_0.128_66.29_/_0.4))]",
+  "gradient-cyan-red":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-red-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-red-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-red-to,oklch(57.7%_0.245_27.325))] dark:to-[var(--zui-typography-gradient-cyan-red-to-dark,oklch(70.4%_0.191_22.216))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-red-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-red-border,oklch(80.8%_0.114_19.571_/_0.4))]",
+  "gradient-cyan-purple":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-purple-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-purple-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-purple-to,oklch(55.8%_0.288_302.321))] dark:to-[var(--zui-typography-gradient-cyan-purple-to-dark,oklch(71.4%_0.203_305.504))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-purple-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-purple-border,oklch(82.7%_0.119_306.383_/_0.4))]",
+  "gradient-cyan-pink":
+    "bg-linear-to-r from-[var(--zui-typography-gradient-cyan-pink-from,oklch(60.9%_0.126_221.723))] dark:from-[var(--zui-typography-gradient-cyan-pink-from-dark,oklch(78.9%_0.154_211.53))] to-[var(--zui-typography-gradient-cyan-pink-to,oklch(59.2%_0.249_0.584))] dark:to-[var(--zui-typography-gradient-cyan-pink-to-dark,oklch(71.8%_0.202_349.761))] bg-clip-text text-[color:var(--zui-typography-gradient-cyan-pink-fg,transparent)] border-[color:var(--zui-typography-gradient-cyan-pink-border,oklch(82.3%_0.12_346.018_/_0.4))]",
+} as const;
+
+export const zuiHeadingBase = "scroll-m-20";
+
+export const zuiHeadingLevels = {
+  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",
+} as const;
+
+export const zuiTextSizes = {
+  sm: "text-sm leading-relaxed",
+  base: "text-base leading-relaxed",
+  lg: "text-lg leading-relaxed",
+} as const;
+
+export const zuiUnorderedListBase = "space-y-2 pl-5";
+
+export const zuiUnorderedMarkers = {
+  disc: "list-disc",
+  circle: "[list-style-type:circle]",
+  none: "list-none pl-0",
+} as const;
+
+export const zuiOrderedListBase = "list-decimal space-y-2 pl-5";

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" },
+});