@zentauri-ui/zentauri-components 1.8.42 → 1.9.1

package/src/design-system/select.ts

@@ -42,6 +42,39 @@ export const zuiSelectTriggerVariants = {
     "bg-linear-to-r from-[var(--zui-select-trigger-gradient-pink-from,oklch(40.8%_0.153_2.432))] dark:from-[var(--zui-select-trigger-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-select-trigger-gradient-pink-to,oklch(41%_0.159_10.272))] dark:to-[var(--zui-select-trigger-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-pink-fg-dark,#ffffff)]",
   "gradient-orange":
     "bg-linear-to-r from-[var(--zui-select-trigger-gradient-orange-from,oklch(40.8%_0.123_38.172))] dark:from-[var(--zui-select-trigger-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-select-trigger-gradient-orange-to,oklch(39.6%_0.141_25.723))] dark:to-[var(--zui-select-trigger-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-orange-fg-dark,#ffffff)]",
+  blue: "border border-[color:var(--zui-select-trigger-blue-border,#2563eb)] dark:border-[color:var(--zui-select-trigger-blue-border-dark,#3b82f6)] text-[color:var(--zui-select-trigger-blue-fg,#2563eb)] dark:text-[color:var(--zui-select-trigger-blue-fg-dark,#3b82f6)] hover:bg-[var(--zui-select-trigger-blue-bg-hover,#2563eb14)] dark:hover:bg-[var(--zui-select-trigger-blue-bg-hover-dark,#3b82f624)]",
+  cyan: "border border-[color:var(--zui-select-trigger-cyan-border,#0891b2)] dark:border-[color:var(--zui-select-trigger-cyan-border-dark,#22d3ee)] text-[color:var(--zui-select-trigger-cyan-fg,#0891b2)] dark:text-[color:var(--zui-select-trigger-cyan-fg-dark,#22d3ee)] hover:bg-[var(--zui-select-trigger-cyan-bg-hover,#0891b214)] dark:hover:bg-[var(--zui-select-trigger-cyan-bg-hover-dark,#22d3ee24)]",
+  green:
+    "border border-[color:var(--zui-select-trigger-green-border,#16a34a)] dark:border-[color:var(--zui-select-trigger-green-border-dark,#22c55e)] text-[color:var(--zui-select-trigger-green-fg,#16a34a)] dark:text-[color:var(--zui-select-trigger-green-fg-dark,#22c55e)] hover:bg-[var(--zui-select-trigger-green-bg-hover,#16a34a14)] dark:hover:bg-[var(--zui-select-trigger-green-bg-hover-dark,#22c55e24)]",
+  lime: "border border-[color:var(--zui-select-trigger-lime-border,#65a30d)] dark:border-[color:var(--zui-select-trigger-lime-border-dark,#a3e635)] text-[color:var(--zui-select-trigger-lime-fg,#65a30d)] dark:text-[color:var(--zui-select-trigger-lime-fg-dark,#a3e635)] hover:bg-[var(--zui-select-trigger-lime-bg-hover,#65a30d14)] dark:hover:bg-[var(--zui-select-trigger-lime-bg-hover-dark,#a3e63524)]",
+  mint: "border border-[color:var(--zui-select-trigger-mint-border,#10b981)] dark:border-[color:var(--zui-select-trigger-mint-border-dark,#6ee7b7)] text-[color:var(--zui-select-trigger-mint-fg,#10b981)] dark:text-[color:var(--zui-select-trigger-mint-fg-dark,#6ee7b7)] hover:bg-[var(--zui-select-trigger-mint-bg-hover,#10b98114)] dark:hover:bg-[var(--zui-select-trigger-mint-bg-hover-dark,#6ee7b724)]",
+  ocean:
+    "border border-[color:var(--zui-select-trigger-ocean-border,#0284c7)] dark:border-[color:var(--zui-select-trigger-ocean-border-dark,#38bdf8)] text-[color:var(--zui-select-trigger-ocean-fg,#0284c7)] dark:text-[color:var(--zui-select-trigger-ocean-fg-dark,#38bdf8)] hover:bg-[var(--zui-select-trigger-ocean-bg-hover,#0284c714)] dark:hover:bg-[var(--zui-select-trigger-ocean-bg-hover-dark,#38bdf824)]",
+  sapphire:
+    "border border-[color:var(--zui-select-trigger-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-select-trigger-sapphire-border-dark,#60a5fa)] text-[color:var(--zui-select-trigger-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-select-trigger-sapphire-fg-dark,#60a5fa)] hover:bg-[var(--zui-select-trigger-sapphire-bg-hover,#1d4ed814)] dark:hover:bg-[var(--zui-select-trigger-sapphire-bg-hover-dark,#60a5fa24)]",
+  lavender:
+    "border border-[color:var(--zui-select-trigger-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-select-trigger-lavender-border-dark,#a78bfa)] text-[color:var(--zui-select-trigger-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-select-trigger-lavender-fg-dark,#a78bfa)] hover:bg-[var(--zui-select-trigger-lavender-bg-hover,#8b5cf614)] dark:hover:bg-[var(--zui-select-trigger-lavender-bg-hover-dark,#a78bfa24)]",
+  ruby: "border border-[color:var(--zui-select-trigger-ruby-border,#be123c)] dark:border-[color:var(--zui-select-trigger-ruby-border-dark,#fb7185)] text-[color:var(--zui-select-trigger-ruby-fg,#be123c)] dark:text-[color:var(--zui-select-trigger-ruby-fg-dark,#fb7185)] hover:bg-[var(--zui-select-trigger-ruby-bg-hover,#be123c14)] dark:hover:bg-[var(--zui-select-trigger-ruby-bg-hover-dark,#fb718524)]",
+  red: "border border-[color:var(--zui-select-trigger-red-border,#dc2626)] dark:border-[color:var(--zui-select-trigger-red-border-dark,#ef4444)] text-[color:var(--zui-select-trigger-red-fg,#dc2626)] dark:text-[color:var(--zui-select-trigger-red-fg-dark,#ef4444)] hover:bg-[var(--zui-select-trigger-red-bg-hover,#dc262614)] dark:hover:bg-[var(--zui-select-trigger-red-bg-hover-dark,#ef444424)]",
+  slate:
+    "border border-[color:var(--zui-select-trigger-slate-border,#475569)] dark:border-[color:var(--zui-select-trigger-slate-border-dark,#64748b)] text-[color:var(--zui-select-trigger-slate-fg,#475569)] dark:text-[color:var(--zui-select-trigger-slate-fg-dark,#64748b)] hover:bg-[var(--zui-select-trigger-slate-bg-hover,#47556914)] dark:hover:bg-[var(--zui-select-trigger-slate-bg-hover-dark,#64748b24)]",
+  zinc: "border border-[color:var(--zui-select-trigger-zinc-border,#52525b)] dark:border-[color:var(--zui-select-trigger-zinc-border-dark,#71717a)] text-[color:var(--zui-select-trigger-zinc-fg,#52525b)] dark:text-[color:var(--zui-select-trigger-zinc-fg-dark,#71717a)] hover:bg-[var(--zui-select-trigger-zinc-bg-hover,#52525b14)] dark:hover:bg-[var(--zui-select-trigger-zinc-bg-hover-dark,#71717a24)]",
+  stone:
+    "border border-[color:var(--zui-select-trigger-stone-border,#57534e)] dark:border-[color:var(--zui-select-trigger-stone-border-dark,#78716c)] text-[color:var(--zui-select-trigger-stone-fg,#57534e)] dark:text-[color:var(--zui-select-trigger-stone-fg-dark,#78716c)] hover:bg-[var(--zui-select-trigger-stone-bg-hover,#57534e14)] dark:hover:bg-[var(--zui-select-trigger-stone-bg-hover-dark,#78716c24)]",
+  royal:
+    "border border-[color:var(--zui-select-trigger-royal-border,#4338ca)] dark:border-[color:var(--zui-select-trigger-royal-border-dark,#818cf8)] text-[color:var(--zui-select-trigger-royal-fg,#4338ca)] dark:text-[color:var(--zui-select-trigger-royal-fg-dark,#818cf8)] hover:bg-[var(--zui-select-trigger-royal-bg-hover,#4338ca14)] dark:hover:bg-[var(--zui-select-trigger-royal-bg-hover-dark,#818cf824)]",
+  electric:
+    "border border-[color:var(--zui-select-trigger-electric-border,#0ea5e9)] dark:border-[color:var(--zui-select-trigger-electric-border-dark,#38bdf8)] text-[color:var(--zui-select-trigger-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-select-trigger-electric-fg-dark,#38bdf8)] hover:bg-[var(--zui-select-trigger-electric-bg-hover,#0ea5e914)] dark:hover:bg-[var(--zui-select-trigger-electric-bg-hover-dark,#38bdf824)]",
+  forest:
+    "border border-[color:var(--zui-select-trigger-forest-border,#166534)] dark:border-[color:var(--zui-select-trigger-forest-border-dark,#4ade80)] text-[color:var(--zui-select-trigger-forest-fg,#166534)] dark:text-[color:var(--zui-select-trigger-forest-fg-dark,#4ade80)] hover:bg-[var(--zui-select-trigger-forest-bg-hover,#16653414)] dark:hover:bg-[var(--zui-select-trigger-forest-bg-hover-dark,#4ade8024)]",
+  sunset:
+    "border border-[color:var(--zui-select-trigger-sunset-border,#ea580c)] dark:border-[color:var(--zui-select-trigger-sunset-border-dark,#fb923c)] text-[color:var(--zui-select-trigger-sunset-fg,#ea580c)] dark:text-[color:var(--zui-select-trigger-sunset-fg-dark,#fb923c)] hover:bg-[var(--zui-select-trigger-sunset-bg-hover,#ea580c14)] dark:hover:bg-[var(--zui-select-trigger-sunset-bg-hover-dark,#fb923c24)]",
+  magenta:
+    "border border-[color:var(--zui-select-trigger-magenta-border,#c026d3)] dark:border-[color:var(--zui-select-trigger-magenta-border-dark,#e879f9)] text-[color:var(--zui-select-trigger-magenta-fg,#c026d3)] dark:text-[color:var(--zui-select-trigger-magenta-fg-dark,#e879f9)] hover:bg-[var(--zui-select-trigger-magenta-bg-hover,#c026d314)] dark:hover:bg-[var(--zui-select-trigger-magenta-bg-hover-dark,#e879f924)]",
+  crimson:
+    "border border-[color:var(--zui-select-trigger-crimson-border,#b91c1c)] dark:border-[color:var(--zui-select-trigger-crimson-border-dark,#f87171)] text-[color:var(--zui-select-trigger-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-select-trigger-crimson-fg-dark,#f87171)] hover:bg-[var(--zui-select-trigger-crimson-bg-hover,#b91c1c14)] dark:hover:bg-[var(--zui-select-trigger-crimson-bg-hover-dark,#f8717124)]",
+  aqua: "border border-[color:var(--zui-select-trigger-aqua-border,#0f766e)] dark:border-[color:var(--zui-select-trigger-aqua-border-dark,#2dd4bf)] text-[color:var(--zui-select-trigger-aqua-fg,#0f766e)] dark:text-[color:var(--zui-select-trigger-aqua-fg-dark,#2dd4bf)] hover:bg-[var(--zui-select-trigger-aqua-bg-hover,#0f766e14)] dark:hover:bg-[var(--zui-select-trigger-aqua-bg-hover-dark,#2dd4bf24)]",
+  plum: "border border-[color:var(--zui-select-trigger-plum-border,#7e22ce)] dark:border-[color:var(--zui-select-trigger-plum-border-dark,#c084fc)] text-[color:var(--zui-select-trigger-plum-fg,#7e22ce)] dark:text-[color:var(--zui-select-trigger-plum-fg-dark,#c084fc)] hover:bg-[var(--zui-select-trigger-plum-bg-hover,#7e22ce14)] dark:hover:bg-[var(--zui-select-trigger-plum-bg-hover-dark,#c084fc24)]",
 } as const;
 
 export const zuiSelectSizes = {
@@ -94,6 +127,39 @@ export const zuiSelectItemAppearances = {
     "bg-[var(--zui-select-item-gradient-pink-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-pink-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-pink-fg,oklch(97.1%_0.014_343.198))] dark:text-[color:var(--zui-select-item-gradient-pink-fg-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-pink-from-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:to-[var(--zui-select-item-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-pink-to-dark,oklch(96.9%_0.015_12.422))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-pink-fg-dark,oklch(40.8%_0.153_2.432))]",
   "gradient-orange":
     "bg-[var(--zui-select-item-gradient-orange-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-orange-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-orange-fg,oklch(98%_0.016_73.684))] dark:text-[color:var(--zui-select-item-gradient-orange-fg-dark,oklch(98%_0.016_73.684))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-orange-from,oklch(98%_0.016_73.684))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-orange-from-dark,oklch(98%_0.016_73.684))] data-[selected=true]:to-[var(--zui-select-item-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-orange-to-dark,oklch(97.1%_0.013_17.38))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-orange-fg-dark,oklch(40.8%_0.123_38.172))]",
+  blue: "hover:bg-[var(--zui-select-item-blue-bg-hover,#2563eb18)] dark:hover:bg-[var(--zui-select-item-blue-bg-hover-dark,#3b82f62e)] hover:text-[color:var(--zui-select-item-blue-fg-hover,#2563eb)] dark:hover:text-[color:var(--zui-select-item-blue-fg-hover-dark,#3b82f6)] bg-[var(--zui-select-item-blue-bg,#2563eb10)] dark:bg-[var(--zui-select-item-blue-bg-dark,#3b82f61f)] text-[color:var(--zui-select-item-blue-fg,#2563eb)] dark:text-[color:var(--zui-select-item-blue-fg-dark,#3b82f6)]",
+  cyan: "hover:bg-[var(--zui-select-item-cyan-bg-hover,#0891b218)] dark:hover:bg-[var(--zui-select-item-cyan-bg-hover-dark,#22d3ee2e)] hover:text-[color:var(--zui-select-item-cyan-fg-hover,#0891b2)] dark:hover:text-[color:var(--zui-select-item-cyan-fg-hover-dark,#22d3ee)] bg-[var(--zui-select-item-cyan-bg,#0891b210)] dark:bg-[var(--zui-select-item-cyan-bg-dark,#22d3ee1f)] text-[color:var(--zui-select-item-cyan-fg,#0891b2)] dark:text-[color:var(--zui-select-item-cyan-fg-dark,#22d3ee)]",
+  green:
+    "hover:bg-[var(--zui-select-item-green-bg-hover,#16a34a18)] dark:hover:bg-[var(--zui-select-item-green-bg-hover-dark,#22c55e2e)] hover:text-[color:var(--zui-select-item-green-fg-hover,#16a34a)] dark:hover:text-[color:var(--zui-select-item-green-fg-hover-dark,#22c55e)] bg-[var(--zui-select-item-green-bg,#16a34a10)] dark:bg-[var(--zui-select-item-green-bg-dark,#22c55e1f)] text-[color:var(--zui-select-item-green-fg,#16a34a)] dark:text-[color:var(--zui-select-item-green-fg-dark,#22c55e)]",
+  lime: "hover:bg-[var(--zui-select-item-lime-bg-hover,#65a30d18)] dark:hover:bg-[var(--zui-select-item-lime-bg-hover-dark,#a3e6352e)] hover:text-[color:var(--zui-select-item-lime-fg-hover,#65a30d)] dark:hover:text-[color:var(--zui-select-item-lime-fg-hover-dark,#a3e635)] bg-[var(--zui-select-item-lime-bg,#65a30d10)] dark:bg-[var(--zui-select-item-lime-bg-dark,#a3e6351f)] text-[color:var(--zui-select-item-lime-fg,#65a30d)] dark:text-[color:var(--zui-select-item-lime-fg-dark,#a3e635)]",
+  mint: "hover:bg-[var(--zui-select-item-mint-bg-hover,#10b98118)] dark:hover:bg-[var(--zui-select-item-mint-bg-hover-dark,#6ee7b72e)] hover:text-[color:var(--zui-select-item-mint-fg-hover,#10b981)] dark:hover:text-[color:var(--zui-select-item-mint-fg-hover-dark,#6ee7b7)] bg-[var(--zui-select-item-mint-bg,#10b98110)] dark:bg-[var(--zui-select-item-mint-bg-dark,#6ee7b71f)] text-[color:var(--zui-select-item-mint-fg,#10b981)] dark:text-[color:var(--zui-select-item-mint-fg-dark,#6ee7b7)]",
+  ocean:
+    "hover:bg-[var(--zui-select-item-ocean-bg-hover,#0284c718)] dark:hover:bg-[var(--zui-select-item-ocean-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-select-item-ocean-fg-hover,#0284c7)] dark:hover:text-[color:var(--zui-select-item-ocean-fg-hover-dark,#38bdf8)] bg-[var(--zui-select-item-ocean-bg,#0284c710)] dark:bg-[var(--zui-select-item-ocean-bg-dark,#38bdf81f)] text-[color:var(--zui-select-item-ocean-fg,#0284c7)] dark:text-[color:var(--zui-select-item-ocean-fg-dark,#38bdf8)]",
+  sapphire:
+    "hover:bg-[var(--zui-select-item-sapphire-bg-hover,#1d4ed818)] dark:hover:bg-[var(--zui-select-item-sapphire-bg-hover-dark,#60a5fa2e)] hover:text-[color:var(--zui-select-item-sapphire-fg-hover,#1d4ed8)] dark:hover:text-[color:var(--zui-select-item-sapphire-fg-hover-dark,#60a5fa)] bg-[var(--zui-select-item-sapphire-bg,#1d4ed810)] dark:bg-[var(--zui-select-item-sapphire-bg-dark,#60a5fa1f)] text-[color:var(--zui-select-item-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-select-item-sapphire-fg-dark,#60a5fa)]",
+  lavender:
+    "hover:bg-[var(--zui-select-item-lavender-bg-hover,#8b5cf618)] dark:hover:bg-[var(--zui-select-item-lavender-bg-hover-dark,#a78bfa2e)] hover:text-[color:var(--zui-select-item-lavender-fg-hover,#8b5cf6)] dark:hover:text-[color:var(--zui-select-item-lavender-fg-hover-dark,#a78bfa)] bg-[var(--zui-select-item-lavender-bg,#8b5cf610)] dark:bg-[var(--zui-select-item-lavender-bg-dark,#a78bfa1f)] text-[color:var(--zui-select-item-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-select-item-lavender-fg-dark,#a78bfa)]",
+  ruby: "hover:bg-[var(--zui-select-item-ruby-bg-hover,#be123c18)] dark:hover:bg-[var(--zui-select-item-ruby-bg-hover-dark,#fb71852e)] hover:text-[color:var(--zui-select-item-ruby-fg-hover,#be123c)] dark:hover:text-[color:var(--zui-select-item-ruby-fg-hover-dark,#fb7185)] bg-[var(--zui-select-item-ruby-bg,#be123c10)] dark:bg-[var(--zui-select-item-ruby-bg-dark,#fb71851f)] text-[color:var(--zui-select-item-ruby-fg,#be123c)] dark:text-[color:var(--zui-select-item-ruby-fg-dark,#fb7185)]",
+  red: "hover:bg-[var(--zui-select-item-red-bg-hover,#dc262618)] dark:hover:bg-[var(--zui-select-item-red-bg-hover-dark,#ef44442e)] hover:text-[color:var(--zui-select-item-red-fg-hover,#dc2626)] dark:hover:text-[color:var(--zui-select-item-red-fg-hover-dark,#ef4444)] bg-[var(--zui-select-item-red-bg,#dc262610)] dark:bg-[var(--zui-select-item-red-bg-dark,#ef44441f)] text-[color:var(--zui-select-item-red-fg,#dc2626)] dark:text-[color:var(--zui-select-item-red-fg-dark,#ef4444)]",
+  slate:
+    "hover:bg-[var(--zui-select-item-slate-bg-hover,#47556918)] dark:hover:bg-[var(--zui-select-item-slate-bg-hover-dark,#64748b2e)] hover:text-[color:var(--zui-select-item-slate-fg-hover,#475569)] dark:hover:text-[color:var(--zui-select-item-slate-fg-hover-dark,#64748b)] bg-[var(--zui-select-item-slate-bg,#47556910)] dark:bg-[var(--zui-select-item-slate-bg-dark,#64748b1f)] text-[color:var(--zui-select-item-slate-fg,#475569)] dark:text-[color:var(--zui-select-item-slate-fg-dark,#64748b)]",
+  zinc: "hover:bg-[var(--zui-select-item-zinc-bg-hover,#52525b18)] dark:hover:bg-[var(--zui-select-item-zinc-bg-hover-dark,#71717a2e)] hover:text-[color:var(--zui-select-item-zinc-fg-hover,#52525b)] dark:hover:text-[color:var(--zui-select-item-zinc-fg-hover-dark,#71717a)] bg-[var(--zui-select-item-zinc-bg,#52525b10)] dark:bg-[var(--zui-select-item-zinc-bg-dark,#71717a1f)] text-[color:var(--zui-select-item-zinc-fg,#52525b)] dark:text-[color:var(--zui-select-item-zinc-fg-dark,#71717a)]",
+  stone:
+    "hover:bg-[var(--zui-select-item-stone-bg-hover,#57534e18)] dark:hover:bg-[var(--zui-select-item-stone-bg-hover-dark,#78716c2e)] hover:text-[color:var(--zui-select-item-stone-fg-hover,#57534e)] dark:hover:text-[color:var(--zui-select-item-stone-fg-hover-dark,#78716c)] bg-[var(--zui-select-item-stone-bg,#57534e10)] dark:bg-[var(--zui-select-item-stone-bg-dark,#78716c1f)] text-[color:var(--zui-select-item-stone-fg,#57534e)] dark:text-[color:var(--zui-select-item-stone-fg-dark,#78716c)]",
+  royal:
+    "hover:bg-[var(--zui-select-item-royal-bg-hover,#4338ca18)] dark:hover:bg-[var(--zui-select-item-royal-bg-hover-dark,#818cf82e)] hover:text-[color:var(--zui-select-item-royal-fg-hover,#4338ca)] dark:hover:text-[color:var(--zui-select-item-royal-fg-hover-dark,#818cf8)] bg-[var(--zui-select-item-royal-bg,#4338ca10)] dark:bg-[var(--zui-select-item-royal-bg-dark,#818cf81f)] text-[color:var(--zui-select-item-royal-fg,#4338ca)] dark:text-[color:var(--zui-select-item-royal-fg-dark,#818cf8)]",
+  electric:
+    "hover:bg-[var(--zui-select-item-electric-bg-hover,#0ea5e918)] dark:hover:bg-[var(--zui-select-item-electric-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-select-item-electric-fg-hover,#0ea5e9)] dark:hover:text-[color:var(--zui-select-item-electric-fg-hover-dark,#38bdf8)] bg-[var(--zui-select-item-electric-bg,#0ea5e910)] dark:bg-[var(--zui-select-item-electric-bg-dark,#38bdf81f)] text-[color:var(--zui-select-item-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-select-item-electric-fg-dark,#38bdf8)]",
+  forest:
+    "hover:bg-[var(--zui-select-item-forest-bg-hover,#16653418)] dark:hover:bg-[var(--zui-select-item-forest-bg-hover-dark,#4ade802e)] hover:text-[color:var(--zui-select-item-forest-fg-hover,#166534)] dark:hover:text-[color:var(--zui-select-item-forest-fg-hover-dark,#4ade80)] bg-[var(--zui-select-item-forest-bg,#16653410)] dark:bg-[var(--zui-select-item-forest-bg-dark,#4ade801f)] text-[color:var(--zui-select-item-forest-fg,#166534)] dark:text-[color:var(--zui-select-item-forest-fg-dark,#4ade80)]",
+  sunset:
+    "hover:bg-[var(--zui-select-item-sunset-bg-hover,#ea580c18)] dark:hover:bg-[var(--zui-select-item-sunset-bg-hover-dark,#fb923c2e)] hover:text-[color:var(--zui-select-item-sunset-fg-hover,#ea580c)] dark:hover:text-[color:var(--zui-select-item-sunset-fg-hover-dark,#fb923c)] bg-[var(--zui-select-item-sunset-bg,#ea580c10)] dark:bg-[var(--zui-select-item-sunset-bg-dark,#fb923c1f)] text-[color:var(--zui-select-item-sunset-fg,#ea580c)] dark:text-[color:var(--zui-select-item-sunset-fg-dark,#fb923c)]",
+  magenta:
+    "hover:bg-[var(--zui-select-item-magenta-bg-hover,#c026d318)] dark:hover:bg-[var(--zui-select-item-magenta-bg-hover-dark,#e879f92e)] hover:text-[color:var(--zui-select-item-magenta-fg-hover,#c026d3)] dark:hover:text-[color:var(--zui-select-item-magenta-fg-hover-dark,#e879f9)] bg-[var(--zui-select-item-magenta-bg,#c026d310)] dark:bg-[var(--zui-select-item-magenta-bg-dark,#e879f91f)] text-[color:var(--zui-select-item-magenta-fg,#c026d3)] dark:text-[color:var(--zui-select-item-magenta-fg-dark,#e879f9)]",
+  crimson:
+    "hover:bg-[var(--zui-select-item-crimson-bg-hover,#b91c1c18)] dark:hover:bg-[var(--zui-select-item-crimson-bg-hover-dark,#f871712e)] hover:text-[color:var(--zui-select-item-crimson-fg-hover,#b91c1c)] dark:hover:text-[color:var(--zui-select-item-crimson-fg-hover-dark,#f87171)] bg-[var(--zui-select-item-crimson-bg,#b91c1c10)] dark:bg-[var(--zui-select-item-crimson-bg-dark,#f871711f)] text-[color:var(--zui-select-item-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-select-item-crimson-fg-dark,#f87171)]",
+  aqua: "hover:bg-[var(--zui-select-item-aqua-bg-hover,#0f766e18)] dark:hover:bg-[var(--zui-select-item-aqua-bg-hover-dark,#2dd4bf2e)] hover:text-[color:var(--zui-select-item-aqua-fg-hover,#0f766e)] dark:hover:text-[color:var(--zui-select-item-aqua-fg-hover-dark,#2dd4bf)] bg-[var(--zui-select-item-aqua-bg,#0f766e10)] dark:bg-[var(--zui-select-item-aqua-bg-dark,#2dd4bf1f)] text-[color:var(--zui-select-item-aqua-fg,#0f766e)] dark:text-[color:var(--zui-select-item-aqua-fg-dark,#2dd4bf)]",
+  plum: "hover:bg-[var(--zui-select-item-plum-bg-hover,#7e22ce18)] dark:hover:bg-[var(--zui-select-item-plum-bg-hover-dark,#c084fc2e)] hover:text-[color:var(--zui-select-item-plum-fg-hover,#7e22ce)] dark:hover:text-[color:var(--zui-select-item-plum-fg-hover-dark,#c084fc)] bg-[var(--zui-select-item-plum-bg,#7e22ce10)] dark:bg-[var(--zui-select-item-plum-bg-dark,#c084fc1f)] text-[color:var(--zui-select-item-plum-fg,#7e22ce)] dark:text-[color:var(--zui-select-item-plum-fg-dark,#c084fc)]",
 } as const;
 
 export const zuiSelectDisabled = {
@@ -144,6 +210,39 @@ export const zuiSelectContentAppearances = {
     "bg-linear-to-r from-[var(--zui-select-content-gradient-pink-from,oklch(40.8%_0.153_2.432))] dark:from-[var(--zui-select-content-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-select-content-gradient-pink-to,oklch(41%_0.159_10.272))] dark:to-[var(--zui-select-content-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] backdrop-blur-xl",
   "gradient-orange":
     "bg-linear-to-r from-[var(--zui-select-content-gradient-orange-from,oklch(40.8%_0.123_38.172))] dark:from-[var(--zui-select-content-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-select-content-gradient-orange-to,oklch(39.6%_0.141_25.723))] dark:to-[var(--zui-select-content-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] backdrop-blur-xl",
+  blue: "border border-[color:var(--zui-select-content-blue-border,#2563eb)] dark:border-[color:var(--zui-select-content-blue-border-dark,#3b82f6)] bg-[var(--zui-select-content-blue-bg,#2563eb14)] dark:bg-[var(--zui-select-content-blue-bg-dark,#3b82f624)] text-[color:var(--zui-select-content-blue-fg,#0f172a)] dark:text-[color:var(--zui-select-content-blue-fg-dark,#f8fafc)] backdrop-blur-xl",
+  cyan: "border border-[color:var(--zui-select-content-cyan-border,#0891b2)] dark:border-[color:var(--zui-select-content-cyan-border-dark,#22d3ee)] bg-[var(--zui-select-content-cyan-bg,#0891b214)] dark:bg-[var(--zui-select-content-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-select-content-cyan-fg,#0f172a)] dark:text-[color:var(--zui-select-content-cyan-fg-dark,#f8fafc)] backdrop-blur-xl",
+  green:
+    "border border-[color:var(--zui-select-content-green-border,#16a34a)] dark:border-[color:var(--zui-select-content-green-border-dark,#22c55e)] bg-[var(--zui-select-content-green-bg,#16a34a14)] dark:bg-[var(--zui-select-content-green-bg-dark,#22c55e24)] text-[color:var(--zui-select-content-green-fg,#0f172a)] dark:text-[color:var(--zui-select-content-green-fg-dark,#f8fafc)] backdrop-blur-xl",
+  lime: "border border-[color:var(--zui-select-content-lime-border,#65a30d)] dark:border-[color:var(--zui-select-content-lime-border-dark,#a3e635)] bg-[var(--zui-select-content-lime-bg,#65a30d14)] dark:bg-[var(--zui-select-content-lime-bg-dark,#a3e63524)] text-[color:var(--zui-select-content-lime-fg,#0f172a)] dark:text-[color:var(--zui-select-content-lime-fg-dark,#f8fafc)] backdrop-blur-xl",
+  mint: "border border-[color:var(--zui-select-content-mint-border,#10b981)] dark:border-[color:var(--zui-select-content-mint-border-dark,#6ee7b7)] bg-[var(--zui-select-content-mint-bg,#10b98114)] dark:bg-[var(--zui-select-content-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-select-content-mint-fg,#0f172a)] dark:text-[color:var(--zui-select-content-mint-fg-dark,#f8fafc)] backdrop-blur-xl",
+  ocean:
+    "border border-[color:var(--zui-select-content-ocean-border,#0284c7)] dark:border-[color:var(--zui-select-content-ocean-border-dark,#38bdf8)] bg-[var(--zui-select-content-ocean-bg,#0284c714)] dark:bg-[var(--zui-select-content-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-select-content-ocean-fg,#0f172a)] dark:text-[color:var(--zui-select-content-ocean-fg-dark,#f8fafc)] backdrop-blur-xl",
+  sapphire:
+    "border border-[color:var(--zui-select-content-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-select-content-sapphire-border-dark,#60a5fa)] bg-[var(--zui-select-content-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-select-content-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-select-content-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-select-content-sapphire-fg-dark,#f8fafc)] backdrop-blur-xl",
+  lavender:
+    "border border-[color:var(--zui-select-content-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-select-content-lavender-border-dark,#a78bfa)] bg-[var(--zui-select-content-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-select-content-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-select-content-lavender-fg,#0f172a)] dark:text-[color:var(--zui-select-content-lavender-fg-dark,#f8fafc)] backdrop-blur-xl",
+  ruby: "border border-[color:var(--zui-select-content-ruby-border,#be123c)] dark:border-[color:var(--zui-select-content-ruby-border-dark,#fb7185)] bg-[var(--zui-select-content-ruby-bg,#be123c14)] dark:bg-[var(--zui-select-content-ruby-bg-dark,#fb718524)] text-[color:var(--zui-select-content-ruby-fg,#0f172a)] dark:text-[color:var(--zui-select-content-ruby-fg-dark,#f8fafc)] backdrop-blur-xl",
+  red: "border border-[color:var(--zui-select-content-red-border,#dc2626)] dark:border-[color:var(--zui-select-content-red-border-dark,#ef4444)] bg-[var(--zui-select-content-red-bg,#dc262614)] dark:bg-[var(--zui-select-content-red-bg-dark,#ef444424)] text-[color:var(--zui-select-content-red-fg,#0f172a)] dark:text-[color:var(--zui-select-content-red-fg-dark,#f8fafc)] backdrop-blur-xl",
+  slate:
+    "border border-[color:var(--zui-select-content-slate-border,#475569)] dark:border-[color:var(--zui-select-content-slate-border-dark,#64748b)] bg-[var(--zui-select-content-slate-bg,#47556914)] dark:bg-[var(--zui-select-content-slate-bg-dark,#64748b24)] text-[color:var(--zui-select-content-slate-fg,#0f172a)] dark:text-[color:var(--zui-select-content-slate-fg-dark,#f8fafc)] backdrop-blur-xl",
+  zinc: "border border-[color:var(--zui-select-content-zinc-border,#52525b)] dark:border-[color:var(--zui-select-content-zinc-border-dark,#71717a)] bg-[var(--zui-select-content-zinc-bg,#52525b14)] dark:bg-[var(--zui-select-content-zinc-bg-dark,#71717a24)] text-[color:var(--zui-select-content-zinc-fg,#0f172a)] dark:text-[color:var(--zui-select-content-zinc-fg-dark,#f8fafc)] backdrop-blur-xl",
+  stone:
+    "border border-[color:var(--zui-select-content-stone-border,#57534e)] dark:border-[color:var(--zui-select-content-stone-border-dark,#78716c)] bg-[var(--zui-select-content-stone-bg,#57534e14)] dark:bg-[var(--zui-select-content-stone-bg-dark,#78716c24)] text-[color:var(--zui-select-content-stone-fg,#0f172a)] dark:text-[color:var(--zui-select-content-stone-fg-dark,#f8fafc)] backdrop-blur-xl",
+  royal:
+    "border border-[color:var(--zui-select-content-royal-border,#4338ca)] dark:border-[color:var(--zui-select-content-royal-border-dark,#818cf8)] bg-[var(--zui-select-content-royal-bg,#4338ca14)] dark:bg-[var(--zui-select-content-royal-bg-dark,#818cf824)] text-[color:var(--zui-select-content-royal-fg,#0f172a)] dark:text-[color:var(--zui-select-content-royal-fg-dark,#f8fafc)] backdrop-blur-xl",
+  electric:
+    "border border-[color:var(--zui-select-content-electric-border,#0ea5e9)] dark:border-[color:var(--zui-select-content-electric-border-dark,#38bdf8)] bg-[var(--zui-select-content-electric-bg,#0ea5e914)] dark:bg-[var(--zui-select-content-electric-bg-dark,#38bdf824)] text-[color:var(--zui-select-content-electric-fg,#0f172a)] dark:text-[color:var(--zui-select-content-electric-fg-dark,#f8fafc)] backdrop-blur-xl",
+  forest:
+    "border border-[color:var(--zui-select-content-forest-border,#166534)] dark:border-[color:var(--zui-select-content-forest-border-dark,#4ade80)] bg-[var(--zui-select-content-forest-bg,#16653414)] dark:bg-[var(--zui-select-content-forest-bg-dark,#4ade8024)] text-[color:var(--zui-select-content-forest-fg,#0f172a)] dark:text-[color:var(--zui-select-content-forest-fg-dark,#f8fafc)] backdrop-blur-xl",
+  sunset:
+    "border border-[color:var(--zui-select-content-sunset-border,#ea580c)] dark:border-[color:var(--zui-select-content-sunset-border-dark,#fb923c)] bg-[var(--zui-select-content-sunset-bg,#ea580c14)] dark:bg-[var(--zui-select-content-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-select-content-sunset-fg,#0f172a)] dark:text-[color:var(--zui-select-content-sunset-fg-dark,#f8fafc)] backdrop-blur-xl",
+  magenta:
+    "border border-[color:var(--zui-select-content-magenta-border,#c026d3)] dark:border-[color:var(--zui-select-content-magenta-border-dark,#e879f9)] bg-[var(--zui-select-content-magenta-bg,#c026d314)] dark:bg-[var(--zui-select-content-magenta-bg-dark,#e879f924)] text-[color:var(--zui-select-content-magenta-fg,#0f172a)] dark:text-[color:var(--zui-select-content-magenta-fg-dark,#f8fafc)] backdrop-blur-xl",
+  crimson:
+    "border border-[color:var(--zui-select-content-crimson-border,#b91c1c)] dark:border-[color:var(--zui-select-content-crimson-border-dark,#f87171)] bg-[var(--zui-select-content-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-select-content-crimson-bg-dark,#f8717124)] text-[color:var(--zui-select-content-crimson-fg,#0f172a)] dark:text-[color:var(--zui-select-content-crimson-fg-dark,#f8fafc)] backdrop-blur-xl",
+  aqua: "border border-[color:var(--zui-select-content-aqua-border,#0f766e)] dark:border-[color:var(--zui-select-content-aqua-border-dark,#2dd4bf)] bg-[var(--zui-select-content-aqua-bg,#0f766e14)] dark:bg-[var(--zui-select-content-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-select-content-aqua-fg,#0f172a)] dark:text-[color:var(--zui-select-content-aqua-fg-dark,#f8fafc)] backdrop-blur-xl",
+  plum: "border border-[color:var(--zui-select-content-plum-border,#7e22ce)] dark:border-[color:var(--zui-select-content-plum-border-dark,#c084fc)] bg-[var(--zui-select-content-plum-bg,#7e22ce14)] dark:bg-[var(--zui-select-content-plum-bg-dark,#c084fc24)] text-[color:var(--zui-select-content-plum-fg,#0f172a)] dark:text-[color:var(--zui-select-content-plum-fg-dark,#f8fafc)] backdrop-blur-xl",
 } as const;
 
 export const zuiSelectSpacing = {

package/src/design-system/skeleton.ts

@@ -26,6 +26,27 @@ export const zuiSkeletonShimmerGradientClasses = {
   "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))]`,
+  blue: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-blue-shimmer-start,#2563eb1a),var(--zui-skeleton-blue-shimmer-mid,#2563eb6b),var(--zui-skeleton-blue-shimmer-end,#2563eb1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-blue-shimmer-start-dark,#3b82f61f),var(--zui-skeleton-blue-shimmer-mid-dark,#3b82f67a),var(--zui-skeleton-blue-shimmer-end-dark,#3b82f61f))]`,
+  cyan: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-cyan-shimmer-start,#0891b21a),var(--zui-skeleton-cyan-shimmer-mid,#0891b26b),var(--zui-skeleton-cyan-shimmer-end,#0891b21a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-cyan-shimmer-start-dark,#22d3ee1f),var(--zui-skeleton-cyan-shimmer-mid-dark,#22d3ee7a),var(--zui-skeleton-cyan-shimmer-end-dark,#22d3ee1f))]`,
+  green: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-green-shimmer-start,#16a34a1a),var(--zui-skeleton-green-shimmer-mid,#16a34a6b),var(--zui-skeleton-green-shimmer-end,#16a34a1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-green-shimmer-start-dark,#22c55e1f),var(--zui-skeleton-green-shimmer-mid-dark,#22c55e7a),var(--zui-skeleton-green-shimmer-end-dark,#22c55e1f))]`,
+  lime: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-lime-shimmer-start,#65a30d1a),var(--zui-skeleton-lime-shimmer-mid,#65a30d6b),var(--zui-skeleton-lime-shimmer-end,#65a30d1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-lime-shimmer-start-dark,#a3e6351f),var(--zui-skeleton-lime-shimmer-mid-dark,#a3e6357a),var(--zui-skeleton-lime-shimmer-end-dark,#a3e6351f))]`,
+  mint: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-mint-shimmer-start,#10b9811a),var(--zui-skeleton-mint-shimmer-mid,#10b9816b),var(--zui-skeleton-mint-shimmer-end,#10b9811a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-mint-shimmer-start-dark,#6ee7b71f),var(--zui-skeleton-mint-shimmer-mid-dark,#6ee7b77a),var(--zui-skeleton-mint-shimmer-end-dark,#6ee7b71f))]`,
+  ocean: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-ocean-shimmer-start,#0284c71a),var(--zui-skeleton-ocean-shimmer-mid,#0284c76b),var(--zui-skeleton-ocean-shimmer-end,#0284c71a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-ocean-shimmer-start-dark,#38bdf81f),var(--zui-skeleton-ocean-shimmer-mid-dark,#38bdf87a),var(--zui-skeleton-ocean-shimmer-end-dark,#38bdf81f))]`,
+  sapphire: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-sapphire-shimmer-start,#1d4ed81a),var(--zui-skeleton-sapphire-shimmer-mid,#1d4ed86b),var(--zui-skeleton-sapphire-shimmer-end,#1d4ed81a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-sapphire-shimmer-start-dark,#60a5fa1f),var(--zui-skeleton-sapphire-shimmer-mid-dark,#60a5fa7a),var(--zui-skeleton-sapphire-shimmer-end-dark,#60a5fa1f))]`,
+  lavender: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-lavender-shimmer-start,#8b5cf61a),var(--zui-skeleton-lavender-shimmer-mid,#8b5cf66b),var(--zui-skeleton-lavender-shimmer-end,#8b5cf61a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-lavender-shimmer-start-dark,#a78bfa1f),var(--zui-skeleton-lavender-shimmer-mid-dark,#a78bfa7a),var(--zui-skeleton-lavender-shimmer-end-dark,#a78bfa1f))]`,
+  ruby: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-ruby-shimmer-start,#be123c1a),var(--zui-skeleton-ruby-shimmer-mid,#be123c6b),var(--zui-skeleton-ruby-shimmer-end,#be123c1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-ruby-shimmer-start-dark,#fb71851f),var(--zui-skeleton-ruby-shimmer-mid-dark,#fb71857a),var(--zui-skeleton-ruby-shimmer-end-dark,#fb71851f))]`,
+  red: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-red-shimmer-start,#dc26261a),var(--zui-skeleton-red-shimmer-mid,#dc26266b),var(--zui-skeleton-red-shimmer-end,#dc26261a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-red-shimmer-start-dark,#ef44441f),var(--zui-skeleton-red-shimmer-mid-dark,#ef44447a),var(--zui-skeleton-red-shimmer-end-dark,#ef44441f))]`,
+  slate: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-slate-shimmer-start,#4755691a),var(--zui-skeleton-slate-shimmer-mid,#4755696b),var(--zui-skeleton-slate-shimmer-end,#4755691a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-slate-shimmer-start-dark,#64748b1f),var(--zui-skeleton-slate-shimmer-mid-dark,#64748b7a),var(--zui-skeleton-slate-shimmer-end-dark,#64748b1f))]`,
+  zinc: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-zinc-shimmer-start,#52525b1a),var(--zui-skeleton-zinc-shimmer-mid,#52525b6b),var(--zui-skeleton-zinc-shimmer-end,#52525b1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-zinc-shimmer-start-dark,#71717a1f),var(--zui-skeleton-zinc-shimmer-mid-dark,#71717a7a),var(--zui-skeleton-zinc-shimmer-end-dark,#71717a1f))]`,
+  stone: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-stone-shimmer-start,#57534e1a),var(--zui-skeleton-stone-shimmer-mid,#57534e6b),var(--zui-skeleton-stone-shimmer-end,#57534e1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-stone-shimmer-start-dark,#78716c1f),var(--zui-skeleton-stone-shimmer-mid-dark,#78716c7a),var(--zui-skeleton-stone-shimmer-end-dark,#78716c1f))]`,
+  royal: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-royal-shimmer-start,#4338ca1a),var(--zui-skeleton-royal-shimmer-mid,#4338ca6b),var(--zui-skeleton-royal-shimmer-end,#4338ca1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-royal-shimmer-start-dark,#818cf81f),var(--zui-skeleton-royal-shimmer-mid-dark,#818cf87a),var(--zui-skeleton-royal-shimmer-end-dark,#818cf81f))]`,
+  electric: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-electric-shimmer-start,#0ea5e91a),var(--zui-skeleton-electric-shimmer-mid,#0ea5e96b),var(--zui-skeleton-electric-shimmer-end,#0ea5e91a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-electric-shimmer-start-dark,#38bdf81f),var(--zui-skeleton-electric-shimmer-mid-dark,#38bdf87a),var(--zui-skeleton-electric-shimmer-end-dark,#38bdf81f))]`,
+  forest: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-forest-shimmer-start,#1665341a),var(--zui-skeleton-forest-shimmer-mid,#1665346b),var(--zui-skeleton-forest-shimmer-end,#1665341a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-forest-shimmer-start-dark,#4ade801f),var(--zui-skeleton-forest-shimmer-mid-dark,#4ade807a),var(--zui-skeleton-forest-shimmer-end-dark,#4ade801f))]`,
+  sunset: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-sunset-shimmer-start,#ea580c1a),var(--zui-skeleton-sunset-shimmer-mid,#ea580c6b),var(--zui-skeleton-sunset-shimmer-end,#ea580c1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-sunset-shimmer-start-dark,#fb923c1f),var(--zui-skeleton-sunset-shimmer-mid-dark,#fb923c7a),var(--zui-skeleton-sunset-shimmer-end-dark,#fb923c1f))]`,
+  magenta: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-magenta-shimmer-start,#c026d31a),var(--zui-skeleton-magenta-shimmer-mid,#c026d36b),var(--zui-skeleton-magenta-shimmer-end,#c026d31a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-magenta-shimmer-start-dark,#e879f91f),var(--zui-skeleton-magenta-shimmer-mid-dark,#e879f97a),var(--zui-skeleton-magenta-shimmer-end-dark,#e879f91f))]`,
+  crimson: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-crimson-shimmer-start,#b91c1c1a),var(--zui-skeleton-crimson-shimmer-mid,#b91c1c6b),var(--zui-skeleton-crimson-shimmer-end,#b91c1c1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-crimson-shimmer-start-dark,#f871711f),var(--zui-skeleton-crimson-shimmer-mid-dark,#f871717a),var(--zui-skeleton-crimson-shimmer-end-dark,#f871711f))]`,
+  aqua: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-aqua-shimmer-start,#0f766e1a),var(--zui-skeleton-aqua-shimmer-mid,#0f766e6b),var(--zui-skeleton-aqua-shimmer-end,#0f766e1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-aqua-shimmer-start-dark,#2dd4bf1f),var(--zui-skeleton-aqua-shimmer-mid-dark,#2dd4bf7a),var(--zui-skeleton-aqua-shimmer-end-dark,#2dd4bf1f))]`,
+  plum: `${shimmerLayer} [background-image:linear-gradient(90deg,var(--zui-skeleton-plum-shimmer-start,#7e22ce1a),var(--zui-skeleton-plum-shimmer-mid,#7e22ce6b),var(--zui-skeleton-plum-shimmer-end,#7e22ce1a))] dark:[background-image:linear-gradient(90deg,var(--zui-skeleton-plum-shimmer-start-dark,#c084fc1f),var(--zui-skeleton-plum-shimmer-mid-dark,#c084fc7a),var(--zui-skeleton-plum-shimmer-end-dark,#c084fc1f))]`,
 } as const;
 
 export type ZuiSkeletonShimmerTone =
@@ -78,6 +99,39 @@ export const zuiSkeletonAppearances = {
     "bg-linear-to-r from-[var(--zui-skeleton-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-skeleton-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-skeleton-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-skeleton-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]",
   "gradient-orange":
     "bg-linear-to-r from-[var(--zui-skeleton-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-skeleton-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-skeleton-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-skeleton-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]",
+  blue: "bg-[var(--zui-skeleton-blue-bg,#2563eb)] dark:bg-[var(--zui-skeleton-blue-bg-dark,#3b82f6)]",
+  cyan: "bg-[var(--zui-skeleton-cyan-bg,#0891b2)] dark:bg-[var(--zui-skeleton-cyan-bg-dark,#22d3ee)]",
+  green:
+    "bg-[var(--zui-skeleton-green-bg,#16a34a)] dark:bg-[var(--zui-skeleton-green-bg-dark,#22c55e)]",
+  lime: "bg-[var(--zui-skeleton-lime-bg,#65a30d)] dark:bg-[var(--zui-skeleton-lime-bg-dark,#a3e635)]",
+  mint: "bg-[var(--zui-skeleton-mint-bg,#10b981)] dark:bg-[var(--zui-skeleton-mint-bg-dark,#6ee7b7)]",
+  ocean:
+    "bg-[var(--zui-skeleton-ocean-bg,#0284c7)] dark:bg-[var(--zui-skeleton-ocean-bg-dark,#38bdf8)]",
+  sapphire:
+    "bg-[var(--zui-skeleton-sapphire-bg,#1d4ed8)] dark:bg-[var(--zui-skeleton-sapphire-bg-dark,#60a5fa)]",
+  lavender:
+    "bg-[var(--zui-skeleton-lavender-bg,#8b5cf6)] dark:bg-[var(--zui-skeleton-lavender-bg-dark,#a78bfa)]",
+  ruby: "bg-[var(--zui-skeleton-ruby-bg,#be123c)] dark:bg-[var(--zui-skeleton-ruby-bg-dark,#fb7185)]",
+  red: "bg-[var(--zui-skeleton-red-bg,#dc2626)] dark:bg-[var(--zui-skeleton-red-bg-dark,#ef4444)]",
+  slate:
+    "bg-[var(--zui-skeleton-slate-bg,#475569)] dark:bg-[var(--zui-skeleton-slate-bg-dark,#64748b)]",
+  zinc: "bg-[var(--zui-skeleton-zinc-bg,#52525b)] dark:bg-[var(--zui-skeleton-zinc-bg-dark,#71717a)]",
+  stone:
+    "bg-[var(--zui-skeleton-stone-bg,#57534e)] dark:bg-[var(--zui-skeleton-stone-bg-dark,#78716c)]",
+  royal:
+    "bg-[var(--zui-skeleton-royal-bg,#4338ca)] dark:bg-[var(--zui-skeleton-royal-bg-dark,#818cf8)]",
+  electric:
+    "bg-[var(--zui-skeleton-electric-bg,#0ea5e9)] dark:bg-[var(--zui-skeleton-electric-bg-dark,#38bdf8)]",
+  forest:
+    "bg-[var(--zui-skeleton-forest-bg,#166534)] dark:bg-[var(--zui-skeleton-forest-bg-dark,#4ade80)]",
+  sunset:
+    "bg-[var(--zui-skeleton-sunset-bg,#ea580c)] dark:bg-[var(--zui-skeleton-sunset-bg-dark,#fb923c)]",
+  magenta:
+    "bg-[var(--zui-skeleton-magenta-bg,#c026d3)] dark:bg-[var(--zui-skeleton-magenta-bg-dark,#e879f9)]",
+  crimson:
+    "bg-[var(--zui-skeleton-crimson-bg,#b91c1c)] dark:bg-[var(--zui-skeleton-crimson-bg-dark,#f87171)]",
+  aqua: "bg-[var(--zui-skeleton-aqua-bg,#0f766e)] dark:bg-[var(--zui-skeleton-aqua-bg-dark,#2dd4bf)]",
+  plum: "bg-[var(--zui-skeleton-plum-bg,#7e22ce)] dark:bg-[var(--zui-skeleton-plum-bg-dark,#c084fc)]",
 } as const;
 
 export const zuiSkeletonSizes = {
@@ -125,6 +179,27 @@ export const zuiSkeletonShimmerTones = {
   "gradient-indigo": "",
   "gradient-pink": "",
   "gradient-orange": "",
+  blue: "",
+  cyan: "",
+  green: "",
+  lime: "",
+  mint: "",
+  ocean: "",
+  sapphire: "",
+  lavender: "",
+  ruby: "",
+  red: "",
+  slate: "",
+  zinc: "",
+  stone: "",
+  royal: "",
+  electric: "",
+  forest: "",
+  sunset: "",
+  magenta: "",
+  crimson: "",
+  aqua: "",
+  plum: "",
 } as const;
 
 export const zuiSkeletonTextLineBase = "block w-full";

package/src/design-system/slider.ts

@@ -15,8 +15,7 @@ export const zuiSliderTrackSizes = {
   lg: "h-2.5",
 } as const;
 
-export const zuiSliderRangeBase =
-  "absolute h-full rounded-full bg-linear-to-r from-[var(--zui-slider-range-from,oklch(60.6%_0.25_292.717))] dark:from-[var(--zui-slider-range-from-dark,oklch(60.6%_0.25_292.717))] to-[var(--zui-slider-range-to,oklch(51.1%_0.262_276.966))] dark:to-[var(--zui-slider-range-to-dark,oklch(67.3%_0.182_276.935))]";
+export const zuiSliderRangeBase = "absolute h-full rounded-full bg-linear-to-r";
 
 export const zuiSliderRangeAppearances = {
   default:
@@ -58,6 +57,39 @@ export const zuiSliderRangeAppearances = {
     "from-[var(--zui-slider-range-gradient-pink-from,oklch(65.6%_0.241_354.308))] dark:from-[var(--zui-slider-range-gradient-pink-from-dark,oklch(65.6%_0.241_354.308))] to-[var(--zui-slider-range-gradient-pink-to,oklch(51.1%_0.262_276.966))] dark:to-[var(--zui-slider-range-gradient-pink-to-dark,oklch(67.3%_0.182_276.935))]",
   "gradient-orange":
     "from-[var(--zui-slider-range-gradient-orange-from,oklch(70.5%_0.213_47.604))] dark:from-[var(--zui-slider-range-gradient-orange-from-dark,oklch(70.5%_0.213_47.604))] to-[var(--zui-slider-range-gradient-orange-to,oklch(51.1%_0.262_276.966))] dark:to-[var(--zui-slider-range-gradient-orange-to-dark,oklch(67.3%_0.182_276.935))]",
+  blue: "from-[var(--zui-slider-range-blue-from,#2563eb)] dark:from-[var(--zui-slider-range-blue-from-dark,#3b82f6)] to-[var(--zui-slider-range-blue-to,#2563eb)] dark:to-[var(--zui-slider-range-blue-to-dark,#3b82f6)]",
+  cyan: "from-[var(--zui-slider-range-cyan-from,#0891b2)] dark:from-[var(--zui-slider-range-cyan-from-dark,#22d3ee)] to-[var(--zui-slider-range-cyan-to,#0891b2)] dark:to-[var(--zui-slider-range-cyan-to-dark,#22d3ee)]",
+  green:
+    "from-[var(--zui-slider-range-green-from,#16a34a)] dark:from-[var(--zui-slider-range-green-from-dark,#22c55e)] to-[var(--zui-slider-range-green-to,#16a34a)] dark:to-[var(--zui-slider-range-green-to-dark,#22c55e)]",
+  lime: "from-[var(--zui-slider-range-lime-from,#65a30d)] dark:from-[var(--zui-slider-range-lime-from-dark,#a3e635)] to-[var(--zui-slider-range-lime-to,#65a30d)] dark:to-[var(--zui-slider-range-lime-to-dark,#a3e635)]",
+  mint: "from-[var(--zui-slider-range-mint-from,#10b981)] dark:from-[var(--zui-slider-range-mint-from-dark,#6ee7b7)] to-[var(--zui-slider-range-mint-to,#10b981)] dark:to-[var(--zui-slider-range-mint-to-dark,#6ee7b7)]",
+  ocean:
+    "from-[var(--zui-slider-range-ocean-from,#0284c7)] dark:from-[var(--zui-slider-range-ocean-from-dark,#38bdf8)] to-[var(--zui-slider-range-ocean-to,#0284c7)] dark:to-[var(--zui-slider-range-ocean-to-dark,#38bdf8)]",
+  sapphire:
+    "from-[var(--zui-slider-range-sapphire-from,#1d4ed8)] dark:from-[var(--zui-slider-range-sapphire-from-dark,#60a5fa)] to-[var(--zui-slider-range-sapphire-to,#1d4ed8)] dark:to-[var(--zui-slider-range-sapphire-to-dark,#60a5fa)]",
+  lavender:
+    "from-[var(--zui-slider-range-lavender-from,#8b5cf6)] dark:from-[var(--zui-slider-range-lavender-from-dark,#a78bfa)] to-[var(--zui-slider-range-lavender-to,#8b5cf6)] dark:to-[var(--zui-slider-range-lavender-to-dark,#a78bfa)]",
+  ruby: "from-[var(--zui-slider-range-ruby-from,#be123c)] dark:from-[var(--zui-slider-range-ruby-from-dark,#fb7185)] to-[var(--zui-slider-range-ruby-to,#be123c)] dark:to-[var(--zui-slider-range-ruby-to-dark,#fb7185)]",
+  red: "from-[var(--zui-slider-range-red-from,#dc2626)] dark:from-[var(--zui-slider-range-red-from-dark,#ef4444)] to-[var(--zui-slider-range-red-to,#dc2626)] dark:to-[var(--zui-slider-range-red-to-dark,#ef4444)]",
+  slate:
+    "from-[var(--zui-slider-range-slate-from,#475569)] dark:from-[var(--zui-slider-range-slate-from-dark,#64748b)] to-[var(--zui-slider-range-slate-to,#475569)] dark:to-[var(--zui-slider-range-slate-to-dark,#64748b)]",
+  zinc: "from-[var(--zui-slider-range-zinc-from,#52525b)] dark:from-[var(--zui-slider-range-zinc-from-dark,#71717a)] to-[var(--zui-slider-range-zinc-to,#52525b)] dark:to-[var(--zui-slider-range-zinc-to-dark,#71717a)]",
+  stone:
+    "from-[var(--zui-slider-range-stone-from,#57534e)] dark:from-[var(--zui-slider-range-stone-from-dark,#78716c)] to-[var(--zui-slider-range-stone-to,#57534e)] dark:to-[var(--zui-slider-range-stone-to-dark,#78716c)]",
+  royal:
+    "from-[var(--zui-slider-range-royal-from,#4338ca)] dark:from-[var(--zui-slider-range-royal-from-dark,#818cf8)] to-[var(--zui-slider-range-royal-to,#4338ca)] dark:to-[var(--zui-slider-range-royal-to-dark,#818cf8)]",
+  electric:
+    "from-[var(--zui-slider-range-electric-from,#0ea5e9)] dark:from-[var(--zui-slider-range-electric-from-dark,#38bdf8)] to-[var(--zui-slider-range-electric-to,#0ea5e9)] dark:to-[var(--zui-slider-range-electric-to-dark,#38bdf8)]",
+  forest:
+    "from-[var(--zui-slider-range-forest-from,#166534)] dark:from-[var(--zui-slider-range-forest-from-dark,#4ade80)] to-[var(--zui-slider-range-forest-to,#166534)] dark:to-[var(--zui-slider-range-forest-to-dark,#4ade80)]",
+  sunset:
+    "from-[var(--zui-slider-range-sunset-from,#ea580c)] dark:from-[var(--zui-slider-range-sunset-from-dark,#fb923c)] to-[var(--zui-slider-range-sunset-to,#ea580c)] dark:to-[var(--zui-slider-range-sunset-to-dark,#fb923c)]",
+  magenta:
+    "from-[var(--zui-slider-range-magenta-from,#c026d3)] dark:from-[var(--zui-slider-range-magenta-from-dark,#e879f9)] to-[var(--zui-slider-range-magenta-to,#c026d3)] dark:to-[var(--zui-slider-range-magenta-to-dark,#e879f9)]",
+  crimson:
+    "from-[var(--zui-slider-range-crimson-from,#b91c1c)] dark:from-[var(--zui-slider-range-crimson-from-dark,#f87171)] to-[var(--zui-slider-range-crimson-to,#b91c1c)] dark:to-[var(--zui-slider-range-crimson-to-dark,#f87171)]",
+  aqua: "from-[var(--zui-slider-range-aqua-from,#0f766e)] dark:from-[var(--zui-slider-range-aqua-from-dark,#2dd4bf)] to-[var(--zui-slider-range-aqua-to,#0f766e)] dark:to-[var(--zui-slider-range-aqua-to-dark,#2dd4bf)]",
+  plum: "from-[var(--zui-slider-range-plum-from,#7e22ce)] dark:from-[var(--zui-slider-range-plum-from-dark,#c084fc)] to-[var(--zui-slider-range-plum-to,#7e22ce)] dark:to-[var(--zui-slider-range-plum-to-dark,#c084fc)]",
 } as const;
 
 export const zuiSliderThumbBase =

package/src/design-system/spinner.ts

@@ -41,6 +41,39 @@ export const zuiSpinnerAppearances = {
     "text-[color:var(--zui-spinner-gradient-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-spinner-gradient-pink-fg-dark,oklch(71.8%_0.202_349.761))]",
   "gradient-orange":
     "text-[color:var(--zui-spinner-gradient-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-spinner-gradient-orange-fg-dark,oklch(75%_0.183_55.934))]",
+  blue: "text-[color:var(--zui-spinner-blue-fg,#2563eb)] dark:text-[color:var(--zui-spinner-blue-fg-dark,#3b82f6)]",
+  cyan: "text-[color:var(--zui-spinner-cyan-fg,#0891b2)] dark:text-[color:var(--zui-spinner-cyan-fg-dark,#22d3ee)]",
+  green:
+    "text-[color:var(--zui-spinner-green-fg,#16a34a)] dark:text-[color:var(--zui-spinner-green-fg-dark,#22c55e)]",
+  lime: "text-[color:var(--zui-spinner-lime-fg,#65a30d)] dark:text-[color:var(--zui-spinner-lime-fg-dark,#a3e635)]",
+  mint: "text-[color:var(--zui-spinner-mint-fg,#10b981)] dark:text-[color:var(--zui-spinner-mint-fg-dark,#6ee7b7)]",
+  ocean:
+    "text-[color:var(--zui-spinner-ocean-fg,#0284c7)] dark:text-[color:var(--zui-spinner-ocean-fg-dark,#38bdf8)]",
+  sapphire:
+    "text-[color:var(--zui-spinner-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-spinner-sapphire-fg-dark,#60a5fa)]",
+  lavender:
+    "text-[color:var(--zui-spinner-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-spinner-lavender-fg-dark,#a78bfa)]",
+  ruby: "text-[color:var(--zui-spinner-ruby-fg,#be123c)] dark:text-[color:var(--zui-spinner-ruby-fg-dark,#fb7185)]",
+  red: "text-[color:var(--zui-spinner-red-fg,#dc2626)] dark:text-[color:var(--zui-spinner-red-fg-dark,#ef4444)]",
+  slate:
+    "text-[color:var(--zui-spinner-slate-fg,#475569)] dark:text-[color:var(--zui-spinner-slate-fg-dark,#64748b)]",
+  zinc: "text-[color:var(--zui-spinner-zinc-fg,#52525b)] dark:text-[color:var(--zui-spinner-zinc-fg-dark,#71717a)]",
+  stone:
+    "text-[color:var(--zui-spinner-stone-fg,#57534e)] dark:text-[color:var(--zui-spinner-stone-fg-dark,#78716c)]",
+  royal:
+    "text-[color:var(--zui-spinner-royal-fg,#4338ca)] dark:text-[color:var(--zui-spinner-royal-fg-dark,#818cf8)]",
+  electric:
+    "text-[color:var(--zui-spinner-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-spinner-electric-fg-dark,#38bdf8)]",
+  forest:
+    "text-[color:var(--zui-spinner-forest-fg,#166534)] dark:text-[color:var(--zui-spinner-forest-fg-dark,#4ade80)]",
+  sunset:
+    "text-[color:var(--zui-spinner-sunset-fg,#ea580c)] dark:text-[color:var(--zui-spinner-sunset-fg-dark,#fb923c)]",
+  magenta:
+    "text-[color:var(--zui-spinner-magenta-fg,#c026d3)] dark:text-[color:var(--zui-spinner-magenta-fg-dark,#e879f9)]",
+  crimson:
+    "text-[color:var(--zui-spinner-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-spinner-crimson-fg-dark,#f87171)]",
+  aqua: "text-[color:var(--zui-spinner-aqua-fg,#0f766e)] dark:text-[color:var(--zui-spinner-aqua-fg-dark,#2dd4bf)]",
+  plum: "text-[color:var(--zui-spinner-plum-fg,#7e22ce)] dark:text-[color:var(--zui-spinner-plum-fg-dark,#c084fc)]",
 } as const;
 
 export const zuiSpinnerSizes = {

package/src/design-system/table.ts

@@ -26,6 +26,39 @@ export const zuiTableAppearances = {
     "border border-[color:var(--zui-table-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-table-amber-border-dark,oklch(66.6%_0.179_58.318))]",
   violet:
     "border border-[color:var(--zui-table-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-table-violet-border-dark,oklch(54.1%_0.281_293.009))]",
+  blue: "border border-[color:var(--zui-table-blue-border,#2563eb)] dark:border-[color:var(--zui-table-blue-border-dark,#3b82f6)]",
+  cyan: "border border-[color:var(--zui-table-cyan-border,#0891b2)] dark:border-[color:var(--zui-table-cyan-border-dark,#22d3ee)]",
+  green:
+    "border border-[color:var(--zui-table-green-border,#16a34a)] dark:border-[color:var(--zui-table-green-border-dark,#22c55e)]",
+  lime: "border border-[color:var(--zui-table-lime-border,#65a30d)] dark:border-[color:var(--zui-table-lime-border-dark,#a3e635)]",
+  mint: "border border-[color:var(--zui-table-mint-border,#10b981)] dark:border-[color:var(--zui-table-mint-border-dark,#6ee7b7)]",
+  ocean:
+    "border border-[color:var(--zui-table-ocean-border,#0284c7)] dark:border-[color:var(--zui-table-ocean-border-dark,#38bdf8)]",
+  sapphire:
+    "border border-[color:var(--zui-table-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-table-sapphire-border-dark,#60a5fa)]",
+  lavender:
+    "border border-[color:var(--zui-table-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-table-lavender-border-dark,#a78bfa)]",
+  ruby: "border border-[color:var(--zui-table-ruby-border,#be123c)] dark:border-[color:var(--zui-table-ruby-border-dark,#fb7185)]",
+  red: "border border-[color:var(--zui-table-red-border,#dc2626)] dark:border-[color:var(--zui-table-red-border-dark,#ef4444)]",
+  slate:
+    "border border-[color:var(--zui-table-slate-border,#475569)] dark:border-[color:var(--zui-table-slate-border-dark,#64748b)]",
+  zinc: "border border-[color:var(--zui-table-zinc-border,#52525b)] dark:border-[color:var(--zui-table-zinc-border-dark,#71717a)]",
+  stone:
+    "border border-[color:var(--zui-table-stone-border,#57534e)] dark:border-[color:var(--zui-table-stone-border-dark,#78716c)]",
+  royal:
+    "border border-[color:var(--zui-table-royal-border,#4338ca)] dark:border-[color:var(--zui-table-royal-border-dark,#818cf8)]",
+  electric:
+    "border border-[color:var(--zui-table-electric-border,#0ea5e9)] dark:border-[color:var(--zui-table-electric-border-dark,#38bdf8)]",
+  forest:
+    "border border-[color:var(--zui-table-forest-border,#166534)] dark:border-[color:var(--zui-table-forest-border-dark,#4ade80)]",
+  sunset:
+    "border border-[color:var(--zui-table-sunset-border,#ea580c)] dark:border-[color:var(--zui-table-sunset-border-dark,#fb923c)]",
+  magenta:
+    "border border-[color:var(--zui-table-magenta-border,#c026d3)] dark:border-[color:var(--zui-table-magenta-border-dark,#e879f9)]",
+  crimson:
+    "border border-[color:var(--zui-table-crimson-border,#b91c1c)] dark:border-[color:var(--zui-table-crimson-border-dark,#f87171)]",
+  aqua: "border border-[color:var(--zui-table-aqua-border,#0f766e)] dark:border-[color:var(--zui-table-aqua-border-dark,#2dd4bf)]",
+  plum: "border border-[color:var(--zui-table-plum-border,#7e22ce)] dark:border-[color:var(--zui-table-plum-border-dark,#c084fc)]",
 } as const;
 
 export const zuiTableSizes = {
@@ -68,6 +101,39 @@ export const zuiTableRowAppearances = {
     "border-[color:var(--zui-table-row-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-table-row-amber-border-dark,oklch(66.6%_0.179_58.318))] hover:bg-[var(--zui-table-row-amber-bg-hover,oklch(76.9%_0.188_70.08))] dark:hover:bg-[var(--zui-table-row-amber-bg-hover-dark,oklch(41.4%_0.112_45.904))] hover:text-[color:var(--zui-table-row-amber-fg-hover,oklch(96.2%_0.059_95.617))] dark:hover:text-[color:var(--zui-table-row-amber-fg-hover-dark,oklch(96.2%_0.059_95.617))]",
   violet:
     "border-[color:var(--zui-table-row-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-table-row-violet-border-dark,oklch(54.1%_0.281_293.009))] hover:bg-[var(--zui-table-row-violet-bg-hover,oklch(60.6%_0.25_292.717))] dark:hover:bg-[var(--zui-table-row-violet-bg-hover-dark,oklch(38%_0.189_293.745))] hover:text-[color:var(--zui-table-row-violet-fg-hover,oklch(94.3%_0.029_294.588))] dark:hover:text-[color:var(--zui-table-row-violet-fg-hover-dark,oklch(94.3%_0.029_294.588))]",
+  blue: "border-[color:var(--zui-table-row-blue-border,#2563eb)] dark:border-[color:var(--zui-table-row-blue-border-dark,#3b82f6)] hover:bg-[var(--zui-table-row-blue-bg-hover,#2563eb)] dark:hover:bg-[var(--zui-table-row-blue-bg-hover-dark,#3b82f6)] hover:text-[color:var(--zui-table-row-blue-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-blue-fg-hover-dark,#ffffff)]",
+  cyan: "border-[color:var(--zui-table-row-cyan-border,#0891b2)] dark:border-[color:var(--zui-table-row-cyan-border-dark,#22d3ee)] hover:bg-[var(--zui-table-row-cyan-bg-hover,#0891b2)] dark:hover:bg-[var(--zui-table-row-cyan-bg-hover-dark,#22d3ee)] hover:text-[color:var(--zui-table-row-cyan-fg-hover,#083344)] dark:hover:text-[color:var(--zui-table-row-cyan-fg-hover-dark,#083344)]",
+  green:
+    "border-[color:var(--zui-table-row-green-border,#16a34a)] dark:border-[color:var(--zui-table-row-green-border-dark,#22c55e)] hover:bg-[var(--zui-table-row-green-bg-hover,#16a34a)] dark:hover:bg-[var(--zui-table-row-green-bg-hover-dark,#22c55e)] hover:text-[color:var(--zui-table-row-green-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-green-fg-hover-dark,#ffffff)]",
+  lime: "border-[color:var(--zui-table-row-lime-border,#65a30d)] dark:border-[color:var(--zui-table-row-lime-border-dark,#a3e635)] hover:bg-[var(--zui-table-row-lime-bg-hover,#65a30d)] dark:hover:bg-[var(--zui-table-row-lime-bg-hover-dark,#a3e635)] hover:text-[color:var(--zui-table-row-lime-fg-hover,#1a2e05)] dark:hover:text-[color:var(--zui-table-row-lime-fg-hover-dark,#1a2e05)]",
+  mint: "border-[color:var(--zui-table-row-mint-border,#10b981)] dark:border-[color:var(--zui-table-row-mint-border-dark,#6ee7b7)] hover:bg-[var(--zui-table-row-mint-bg-hover,#10b981)] dark:hover:bg-[var(--zui-table-row-mint-bg-hover-dark,#6ee7b7)] hover:text-[color:var(--zui-table-row-mint-fg-hover,#064e3b)] dark:hover:text-[color:var(--zui-table-row-mint-fg-hover-dark,#064e3b)]",
+  ocean:
+    "border-[color:var(--zui-table-row-ocean-border,#0284c7)] dark:border-[color:var(--zui-table-row-ocean-border-dark,#38bdf8)] hover:bg-[var(--zui-table-row-ocean-bg-hover,#0284c7)] dark:hover:bg-[var(--zui-table-row-ocean-bg-hover-dark,#38bdf8)] hover:text-[color:var(--zui-table-row-ocean-fg-hover,#082f49)] dark:hover:text-[color:var(--zui-table-row-ocean-fg-hover-dark,#082f49)]",
+  sapphire:
+    "border-[color:var(--zui-table-row-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-table-row-sapphire-border-dark,#60a5fa)] hover:bg-[var(--zui-table-row-sapphire-bg-hover,#1d4ed8)] dark:hover:bg-[var(--zui-table-row-sapphire-bg-hover-dark,#60a5fa)] hover:text-[color:var(--zui-table-row-sapphire-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-sapphire-fg-hover-dark,#ffffff)]",
+  lavender:
+    "border-[color:var(--zui-table-row-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-table-row-lavender-border-dark,#a78bfa)] hover:bg-[var(--zui-table-row-lavender-bg-hover,#8b5cf6)] dark:hover:bg-[var(--zui-table-row-lavender-bg-hover-dark,#a78bfa)] hover:text-[color:var(--zui-table-row-lavender-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-lavender-fg-hover-dark,#ffffff)]",
+  ruby: "border-[color:var(--zui-table-row-ruby-border,#be123c)] dark:border-[color:var(--zui-table-row-ruby-border-dark,#fb7185)] hover:bg-[var(--zui-table-row-ruby-bg-hover,#be123c)] dark:hover:bg-[var(--zui-table-row-ruby-bg-hover-dark,#fb7185)] hover:text-[color:var(--zui-table-row-ruby-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-ruby-fg-hover-dark,#ffffff)]",
+  red: "border-[color:var(--zui-table-row-red-border,#dc2626)] dark:border-[color:var(--zui-table-row-red-border-dark,#ef4444)] hover:bg-[var(--zui-table-row-red-bg-hover,#dc2626)] dark:hover:bg-[var(--zui-table-row-red-bg-hover-dark,#ef4444)] hover:text-[color:var(--zui-table-row-red-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-red-fg-hover-dark,#ffffff)]",
+  slate:
+    "border-[color:var(--zui-table-row-slate-border,#475569)] dark:border-[color:var(--zui-table-row-slate-border-dark,#64748b)] hover:bg-[var(--zui-table-row-slate-bg-hover,#475569)] dark:hover:bg-[var(--zui-table-row-slate-bg-hover-dark,#64748b)] hover:text-[color:var(--zui-table-row-slate-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-slate-fg-hover-dark,#ffffff)]",
+  zinc: "border-[color:var(--zui-table-row-zinc-border,#52525b)] dark:border-[color:var(--zui-table-row-zinc-border-dark,#71717a)] hover:bg-[var(--zui-table-row-zinc-bg-hover,#52525b)] dark:hover:bg-[var(--zui-table-row-zinc-bg-hover-dark,#71717a)] hover:text-[color:var(--zui-table-row-zinc-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-zinc-fg-hover-dark,#ffffff)]",
+  stone:
+    "border-[color:var(--zui-table-row-stone-border,#57534e)] dark:border-[color:var(--zui-table-row-stone-border-dark,#78716c)] hover:bg-[var(--zui-table-row-stone-bg-hover,#57534e)] dark:hover:bg-[var(--zui-table-row-stone-bg-hover-dark,#78716c)] hover:text-[color:var(--zui-table-row-stone-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-stone-fg-hover-dark,#ffffff)]",
+  royal:
+    "border-[color:var(--zui-table-row-royal-border,#4338ca)] dark:border-[color:var(--zui-table-row-royal-border-dark,#818cf8)] hover:bg-[var(--zui-table-row-royal-bg-hover,#4338ca)] dark:hover:bg-[var(--zui-table-row-royal-bg-hover-dark,#818cf8)] hover:text-[color:var(--zui-table-row-royal-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-royal-fg-hover-dark,#ffffff)]",
+  electric:
+    "border-[color:var(--zui-table-row-electric-border,#0ea5e9)] dark:border-[color:var(--zui-table-row-electric-border-dark,#38bdf8)] hover:bg-[var(--zui-table-row-electric-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-table-row-electric-bg-hover-dark,#38bdf8)] hover:text-[color:var(--zui-table-row-electric-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-electric-fg-hover-dark,#ffffff)]",
+  forest:
+    "border-[color:var(--zui-table-row-forest-border,#166534)] dark:border-[color:var(--zui-table-row-forest-border-dark,#4ade80)] hover:bg-[var(--zui-table-row-forest-bg-hover,#166534)] dark:hover:bg-[var(--zui-table-row-forest-bg-hover-dark,#4ade80)] hover:text-[color:var(--zui-table-row-forest-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-forest-fg-hover-dark,#ffffff)]",
+  sunset:
+    "border-[color:var(--zui-table-row-sunset-border,#ea580c)] dark:border-[color:var(--zui-table-row-sunset-border-dark,#fb923c)] hover:bg-[var(--zui-table-row-sunset-bg-hover,#ea580c)] dark:hover:bg-[var(--zui-table-row-sunset-bg-hover-dark,#fb923c)] hover:text-[color:var(--zui-table-row-sunset-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-sunset-fg-hover-dark,#ffffff)]",
+  magenta:
+    "border-[color:var(--zui-table-row-magenta-border,#c026d3)] dark:border-[color:var(--zui-table-row-magenta-border-dark,#e879f9)] hover:bg-[var(--zui-table-row-magenta-bg-hover,#c026d3)] dark:hover:bg-[var(--zui-table-row-magenta-bg-hover-dark,#e879f9)] hover:text-[color:var(--zui-table-row-magenta-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-magenta-fg-hover-dark,#ffffff)]",
+  crimson:
+    "border-[color:var(--zui-table-row-crimson-border,#b91c1c)] dark:border-[color:var(--zui-table-row-crimson-border-dark,#f87171)] hover:bg-[var(--zui-table-row-crimson-bg-hover,#b91c1c)] dark:hover:bg-[var(--zui-table-row-crimson-bg-hover-dark,#f87171)] hover:text-[color:var(--zui-table-row-crimson-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-crimson-fg-hover-dark,#ffffff)]",
+  aqua: "border-[color:var(--zui-table-row-aqua-border,#0f766e)] dark:border-[color:var(--zui-table-row-aqua-border-dark,#2dd4bf)] hover:bg-[var(--zui-table-row-aqua-bg-hover,#0f766e)] dark:hover:bg-[var(--zui-table-row-aqua-bg-hover-dark,#2dd4bf)] hover:text-[color:var(--zui-table-row-aqua-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-aqua-fg-hover-dark,#ffffff)]",
+  plum: "border-[color:var(--zui-table-row-plum-border,#7e22ce)] dark:border-[color:var(--zui-table-row-plum-border-dark,#c084fc)] hover:bg-[var(--zui-table-row-plum-bg-hover,#7e22ce)] dark:hover:bg-[var(--zui-table-row-plum-bg-hover-dark,#c084fc)] hover:text-[color:var(--zui-table-row-plum-fg-hover,#ffffff)] dark:hover:text-[color:var(--zui-table-row-plum-fg-hover-dark,#ffffff)]",
 } as const;
 
 export const zuiTableCellBase = "min-w-0 border p-3 align-middle break-words";
@@ -100,6 +166,39 @@ export const zuiTableCellAppearances = {
     "border-[color:var(--zui-table-cell-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-table-cell-amber-border-dark,oklch(66.6%_0.179_58.318))]",
   violet:
     "border-[color:var(--zui-table-cell-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-table-cell-violet-border-dark,oklch(54.1%_0.281_293.009))]",
+  blue: "border border-[color:var(--zui-table-cell-blue-border,#2563eb)] dark:border-[color:var(--zui-table-cell-blue-border-dark,#3b82f6)]",
+  cyan: "border border-[color:var(--zui-table-cell-cyan-border,#0891b2)] dark:border-[color:var(--zui-table-cell-cyan-border-dark,#22d3ee)]",
+  green:
+    "border border-[color:var(--zui-table-cell-green-border,#16a34a)] dark:border-[color:var(--zui-table-cell-green-border-dark,#22c55e)]",
+  lime: "border border-[color:var(--zui-table-cell-lime-border,#65a30d)] dark:border-[color:var(--zui-table-cell-lime-border-dark,#a3e635)]",
+  mint: "border border-[color:var(--zui-table-cell-mint-border,#10b981)] dark:border-[color:var(--zui-table-cell-mint-border-dark,#6ee7b7)]",
+  ocean:
+    "border border-[color:var(--zui-table-cell-ocean-border,#0284c7)] dark:border-[color:var(--zui-table-cell-ocean-border-dark,#38bdf8)]",
+  sapphire:
+    "border border-[color:var(--zui-table-cell-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-table-cell-sapphire-border-dark,#60a5fa)]",
+  lavender:
+    "border border-[color:var(--zui-table-cell-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-table-cell-lavender-border-dark,#a78bfa)]",
+  ruby: "border border-[color:var(--zui-table-cell-ruby-border,#be123c)] dark:border-[color:var(--zui-table-cell-ruby-border-dark,#fb7185)]",
+  red: "border border-[color:var(--zui-table-cell-red-border,#dc2626)] dark:border-[color:var(--zui-table-cell-red-border-dark,#ef4444)]",
+  slate:
+    "border border-[color:var(--zui-table-cell-slate-border,#475569)] dark:border-[color:var(--zui-table-cell-slate-border-dark,#64748b)]",
+  zinc: "border border-[color:var(--zui-table-cell-zinc-border,#52525b)] dark:border-[color:var(--zui-table-cell-zinc-border-dark,#71717a)]",
+  stone:
+    "border border-[color:var(--zui-table-cell-stone-border,#57534e)] dark:border-[color:var(--zui-table-cell-stone-border-dark,#78716c)]",
+  royal:
+    "border border-[color:var(--zui-table-cell-royal-border,#4338ca)] dark:border-[color:var(--zui-table-cell-royal-border-dark,#818cf8)]",
+  electric:
+    "border border-[color:var(--zui-table-cell-electric-border,#0ea5e9)] dark:border-[color:var(--zui-table-cell-electric-border-dark,#38bdf8)]",
+  forest:
+    "border border-[color:var(--zui-table-cell-forest-border,#166534)] dark:border-[color:var(--zui-table-cell-forest-border-dark,#4ade80)]",
+  sunset:
+    "border border-[color:var(--zui-table-cell-sunset-border,#ea580c)] dark:border-[color:var(--zui-table-cell-sunset-border-dark,#fb923c)]",
+  magenta:
+    "border border-[color:var(--zui-table-cell-magenta-border,#c026d3)] dark:border-[color:var(--zui-table-cell-magenta-border-dark,#e879f9)]",
+  crimson:
+    "border border-[color:var(--zui-table-cell-crimson-border,#b91c1c)] dark:border-[color:var(--zui-table-cell-crimson-border-dark,#f87171)]",
+  aqua: "border border-[color:var(--zui-table-cell-aqua-border,#0f766e)] dark:border-[color:var(--zui-table-cell-aqua-border-dark,#2dd4bf)]",
+  plum: "border border-[color:var(--zui-table-cell-plum-border,#7e22ce)] dark:border-[color:var(--zui-table-cell-plum-border-dark,#c084fc)]",
 } as const;
 
 export const zuiTableCellSizes = {

package/src/design-system/tabs.ts

@@ -58,6 +58,39 @@ export const zuiTabsTriggerAppearances = {
     "bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-tabs-trigger-gradient-pink-from-dark,oklch(45.9%_0.187_3.815))] to-[var(--zui-tabs-trigger-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-tabs-trigger-gradient-pink-to-dark,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tabs-trigger-gradient-pink-fg,oklch(94.8%_0.028_342.258))] dark:text-[color:var(--zui-tabs-trigger-gradient-pink-fg-dark,oklch(97.1%_0.014_343.198))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-pink-from-active,oklch(59.2%_0.249_0.584))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-pink-from-active-dark,oklch(59.2%_0.249_0.584))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-pink-to-active,oklch(58.6%_0.253_17.585))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-pink-to-active-dark,oklch(58.6%_0.253_17.585))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-pink-fg-active,oklch(94.8%_0.028_342.258))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-pink-fg-active-dark,oklch(94.8%_0.028_342.258))]",
   "gradient-orange":
     "bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-tabs-trigger-gradient-orange-from-dark,oklch(47%_0.157_37.304))] to-[var(--zui-tabs-trigger-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-tabs-trigger-gradient-orange-to-dark,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-tabs-trigger-gradient-orange-fg,oklch(95.4%_0.038_75.164))] dark:text-[color:var(--zui-tabs-trigger-gradient-orange-fg-dark,oklch(98%_0.016_73.684))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-orange-from-active,oklch(64.6%_0.222_41.116))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-orange-from-active-dark,oklch(64.6%_0.222_41.116))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-orange-to-active,oklch(57.7%_0.245_27.325))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-orange-to-active-dark,oklch(57.7%_0.245_27.325))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-orange-fg-active,oklch(95.4%_0.038_75.164))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-orange-fg-active-dark,oklch(95.4%_0.038_75.164))]",
+  blue: "hover:bg-[var(--zui-tabs-trigger-blue-bg-hover,#2563eb18)] dark:hover:bg-[var(--zui-tabs-trigger-blue-bg-hover-dark,#3b82f62e)] hover:text-[color:var(--zui-tabs-trigger-blue-fg-hover,#2563eb)] dark:hover:text-[color:var(--zui-tabs-trigger-blue-fg-hover-dark,#3b82f6)] bg-[var(--zui-tabs-trigger-blue-bg,#2563eb10)] dark:bg-[var(--zui-tabs-trigger-blue-bg-dark,#3b82f61f)] text-[color:var(--zui-tabs-trigger-blue-fg,#2563eb)] dark:text-[color:var(--zui-tabs-trigger-blue-fg-dark,#3b82f6)]",
+  cyan: "hover:bg-[var(--zui-tabs-trigger-cyan-bg-hover,#0891b218)] dark:hover:bg-[var(--zui-tabs-trigger-cyan-bg-hover-dark,#22d3ee2e)] hover:text-[color:var(--zui-tabs-trigger-cyan-fg-hover,#0891b2)] dark:hover:text-[color:var(--zui-tabs-trigger-cyan-fg-hover-dark,#22d3ee)] bg-[var(--zui-tabs-trigger-cyan-bg,#0891b210)] dark:bg-[var(--zui-tabs-trigger-cyan-bg-dark,#22d3ee1f)] text-[color:var(--zui-tabs-trigger-cyan-fg,#0891b2)] dark:text-[color:var(--zui-tabs-trigger-cyan-fg-dark,#22d3ee)]",
+  green:
+    "hover:bg-[var(--zui-tabs-trigger-green-bg-hover,#16a34a18)] dark:hover:bg-[var(--zui-tabs-trigger-green-bg-hover-dark,#22c55e2e)] hover:text-[color:var(--zui-tabs-trigger-green-fg-hover,#16a34a)] dark:hover:text-[color:var(--zui-tabs-trigger-green-fg-hover-dark,#22c55e)] bg-[var(--zui-tabs-trigger-green-bg,#16a34a10)] dark:bg-[var(--zui-tabs-trigger-green-bg-dark,#22c55e1f)] text-[color:var(--zui-tabs-trigger-green-fg,#16a34a)] dark:text-[color:var(--zui-tabs-trigger-green-fg-dark,#22c55e)]",
+  lime: "hover:bg-[var(--zui-tabs-trigger-lime-bg-hover,#65a30d18)] dark:hover:bg-[var(--zui-tabs-trigger-lime-bg-hover-dark,#a3e6352e)] hover:text-[color:var(--zui-tabs-trigger-lime-fg-hover,#65a30d)] dark:hover:text-[color:var(--zui-tabs-trigger-lime-fg-hover-dark,#a3e635)] bg-[var(--zui-tabs-trigger-lime-bg,#65a30d10)] dark:bg-[var(--zui-tabs-trigger-lime-bg-dark,#a3e6351f)] text-[color:var(--zui-tabs-trigger-lime-fg,#65a30d)] dark:text-[color:var(--zui-tabs-trigger-lime-fg-dark,#a3e635)]",
+  mint: "hover:bg-[var(--zui-tabs-trigger-mint-bg-hover,#10b98118)] dark:hover:bg-[var(--zui-tabs-trigger-mint-bg-hover-dark,#6ee7b72e)] hover:text-[color:var(--zui-tabs-trigger-mint-fg-hover,#10b981)] dark:hover:text-[color:var(--zui-tabs-trigger-mint-fg-hover-dark,#6ee7b7)] bg-[var(--zui-tabs-trigger-mint-bg,#10b98110)] dark:bg-[var(--zui-tabs-trigger-mint-bg-dark,#6ee7b71f)] text-[color:var(--zui-tabs-trigger-mint-fg,#10b981)] dark:text-[color:var(--zui-tabs-trigger-mint-fg-dark,#6ee7b7)]",
+  ocean:
+    "hover:bg-[var(--zui-tabs-trigger-ocean-bg-hover,#0284c718)] dark:hover:bg-[var(--zui-tabs-trigger-ocean-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-tabs-trigger-ocean-fg-hover,#0284c7)] dark:hover:text-[color:var(--zui-tabs-trigger-ocean-fg-hover-dark,#38bdf8)] bg-[var(--zui-tabs-trigger-ocean-bg,#0284c710)] dark:bg-[var(--zui-tabs-trigger-ocean-bg-dark,#38bdf81f)] text-[color:var(--zui-tabs-trigger-ocean-fg,#0284c7)] dark:text-[color:var(--zui-tabs-trigger-ocean-fg-dark,#38bdf8)]",
+  sapphire:
+    "hover:bg-[var(--zui-tabs-trigger-sapphire-bg-hover,#1d4ed818)] dark:hover:bg-[var(--zui-tabs-trigger-sapphire-bg-hover-dark,#60a5fa2e)] hover:text-[color:var(--zui-tabs-trigger-sapphire-fg-hover,#1d4ed8)] dark:hover:text-[color:var(--zui-tabs-trigger-sapphire-fg-hover-dark,#60a5fa)] bg-[var(--zui-tabs-trigger-sapphire-bg,#1d4ed810)] dark:bg-[var(--zui-tabs-trigger-sapphire-bg-dark,#60a5fa1f)] text-[color:var(--zui-tabs-trigger-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-tabs-trigger-sapphire-fg-dark,#60a5fa)]",
+  lavender:
+    "hover:bg-[var(--zui-tabs-trigger-lavender-bg-hover,#8b5cf618)] dark:hover:bg-[var(--zui-tabs-trigger-lavender-bg-hover-dark,#a78bfa2e)] hover:text-[color:var(--zui-tabs-trigger-lavender-fg-hover,#8b5cf6)] dark:hover:text-[color:var(--zui-tabs-trigger-lavender-fg-hover-dark,#a78bfa)] bg-[var(--zui-tabs-trigger-lavender-bg,#8b5cf610)] dark:bg-[var(--zui-tabs-trigger-lavender-bg-dark,#a78bfa1f)] text-[color:var(--zui-tabs-trigger-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-tabs-trigger-lavender-fg-dark,#a78bfa)]",
+  ruby: "hover:bg-[var(--zui-tabs-trigger-ruby-bg-hover,#be123c18)] dark:hover:bg-[var(--zui-tabs-trigger-ruby-bg-hover-dark,#fb71852e)] hover:text-[color:var(--zui-tabs-trigger-ruby-fg-hover,#be123c)] dark:hover:text-[color:var(--zui-tabs-trigger-ruby-fg-hover-dark,#fb7185)] bg-[var(--zui-tabs-trigger-ruby-bg,#be123c10)] dark:bg-[var(--zui-tabs-trigger-ruby-bg-dark,#fb71851f)] text-[color:var(--zui-tabs-trigger-ruby-fg,#be123c)] dark:text-[color:var(--zui-tabs-trigger-ruby-fg-dark,#fb7185)]",
+  red: "hover:bg-[var(--zui-tabs-trigger-red-bg-hover,#dc262618)] dark:hover:bg-[var(--zui-tabs-trigger-red-bg-hover-dark,#ef44442e)] hover:text-[color:var(--zui-tabs-trigger-red-fg-hover,#dc2626)] dark:hover:text-[color:var(--zui-tabs-trigger-red-fg-hover-dark,#ef4444)] bg-[var(--zui-tabs-trigger-red-bg,#dc262610)] dark:bg-[var(--zui-tabs-trigger-red-bg-dark,#ef44441f)] text-[color:var(--zui-tabs-trigger-red-fg,#dc2626)] dark:text-[color:var(--zui-tabs-trigger-red-fg-dark,#ef4444)]",
+  slate:
+    "hover:bg-[var(--zui-tabs-trigger-slate-bg-hover,#47556918)] dark:hover:bg-[var(--zui-tabs-trigger-slate-bg-hover-dark,#64748b2e)] hover:text-[color:var(--zui-tabs-trigger-slate-fg-hover,#475569)] dark:hover:text-[color:var(--zui-tabs-trigger-slate-fg-hover-dark,#64748b)] bg-[var(--zui-tabs-trigger-slate-bg,#47556910)] dark:bg-[var(--zui-tabs-trigger-slate-bg-dark,#64748b1f)] text-[color:var(--zui-tabs-trigger-slate-fg,#475569)] dark:text-[color:var(--zui-tabs-trigger-slate-fg-dark,#64748b)]",
+  zinc: "hover:bg-[var(--zui-tabs-trigger-zinc-bg-hover,#52525b18)] dark:hover:bg-[var(--zui-tabs-trigger-zinc-bg-hover-dark,#71717a2e)] hover:text-[color:var(--zui-tabs-trigger-zinc-fg-hover,#52525b)] dark:hover:text-[color:var(--zui-tabs-trigger-zinc-fg-hover-dark,#71717a)] bg-[var(--zui-tabs-trigger-zinc-bg,#52525b10)] dark:bg-[var(--zui-tabs-trigger-zinc-bg-dark,#71717a1f)] text-[color:var(--zui-tabs-trigger-zinc-fg,#52525b)] dark:text-[color:var(--zui-tabs-trigger-zinc-fg-dark,#71717a)]",
+  stone:
+    "hover:bg-[var(--zui-tabs-trigger-stone-bg-hover,#57534e18)] dark:hover:bg-[var(--zui-tabs-trigger-stone-bg-hover-dark,#78716c2e)] hover:text-[color:var(--zui-tabs-trigger-stone-fg-hover,#57534e)] dark:hover:text-[color:var(--zui-tabs-trigger-stone-fg-hover-dark,#78716c)] bg-[var(--zui-tabs-trigger-stone-bg,#57534e10)] dark:bg-[var(--zui-tabs-trigger-stone-bg-dark,#78716c1f)] text-[color:var(--zui-tabs-trigger-stone-fg,#57534e)] dark:text-[color:var(--zui-tabs-trigger-stone-fg-dark,#78716c)]",
+  royal:
+    "hover:bg-[var(--zui-tabs-trigger-royal-bg-hover,#4338ca18)] dark:hover:bg-[var(--zui-tabs-trigger-royal-bg-hover-dark,#818cf82e)] hover:text-[color:var(--zui-tabs-trigger-royal-fg-hover,#4338ca)] dark:hover:text-[color:var(--zui-tabs-trigger-royal-fg-hover-dark,#818cf8)] bg-[var(--zui-tabs-trigger-royal-bg,#4338ca10)] dark:bg-[var(--zui-tabs-trigger-royal-bg-dark,#818cf81f)] text-[color:var(--zui-tabs-trigger-royal-fg,#4338ca)] dark:text-[color:var(--zui-tabs-trigger-royal-fg-dark,#818cf8)]",
+  electric:
+    "hover:bg-[var(--zui-tabs-trigger-electric-bg-hover,#0ea5e918)] dark:hover:bg-[var(--zui-tabs-trigger-electric-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-tabs-trigger-electric-fg-hover,#0ea5e9)] dark:hover:text-[color:var(--zui-tabs-trigger-electric-fg-hover-dark,#38bdf8)] bg-[var(--zui-tabs-trigger-electric-bg,#0ea5e910)] dark:bg-[var(--zui-tabs-trigger-electric-bg-dark,#38bdf81f)] text-[color:var(--zui-tabs-trigger-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-tabs-trigger-electric-fg-dark,#38bdf8)]",
+  forest:
+    "hover:bg-[var(--zui-tabs-trigger-forest-bg-hover,#16653418)] dark:hover:bg-[var(--zui-tabs-trigger-forest-bg-hover-dark,#4ade802e)] hover:text-[color:var(--zui-tabs-trigger-forest-fg-hover,#166534)] dark:hover:text-[color:var(--zui-tabs-trigger-forest-fg-hover-dark,#4ade80)] bg-[var(--zui-tabs-trigger-forest-bg,#16653410)] dark:bg-[var(--zui-tabs-trigger-forest-bg-dark,#4ade801f)] text-[color:var(--zui-tabs-trigger-forest-fg,#166534)] dark:text-[color:var(--zui-tabs-trigger-forest-fg-dark,#4ade80)]",
+  sunset:
+    "hover:bg-[var(--zui-tabs-trigger-sunset-bg-hover,#ea580c18)] dark:hover:bg-[var(--zui-tabs-trigger-sunset-bg-hover-dark,#fb923c2e)] hover:text-[color:var(--zui-tabs-trigger-sunset-fg-hover,#ea580c)] dark:hover:text-[color:var(--zui-tabs-trigger-sunset-fg-hover-dark,#fb923c)] bg-[var(--zui-tabs-trigger-sunset-bg,#ea580c10)] dark:bg-[var(--zui-tabs-trigger-sunset-bg-dark,#fb923c1f)] text-[color:var(--zui-tabs-trigger-sunset-fg,#ea580c)] dark:text-[color:var(--zui-tabs-trigger-sunset-fg-dark,#fb923c)]",
+  magenta:
+    "hover:bg-[var(--zui-tabs-trigger-magenta-bg-hover,#c026d318)] dark:hover:bg-[var(--zui-tabs-trigger-magenta-bg-hover-dark,#e879f92e)] hover:text-[color:var(--zui-tabs-trigger-magenta-fg-hover,#c026d3)] dark:hover:text-[color:var(--zui-tabs-trigger-magenta-fg-hover-dark,#e879f9)] bg-[var(--zui-tabs-trigger-magenta-bg,#c026d310)] dark:bg-[var(--zui-tabs-trigger-magenta-bg-dark,#e879f91f)] text-[color:var(--zui-tabs-trigger-magenta-fg,#c026d3)] dark:text-[color:var(--zui-tabs-trigger-magenta-fg-dark,#e879f9)]",
+  crimson:
+    "hover:bg-[var(--zui-tabs-trigger-crimson-bg-hover,#b91c1c18)] dark:hover:bg-[var(--zui-tabs-trigger-crimson-bg-hover-dark,#f871712e)] hover:text-[color:var(--zui-tabs-trigger-crimson-fg-hover,#b91c1c)] dark:hover:text-[color:var(--zui-tabs-trigger-crimson-fg-hover-dark,#f87171)] bg-[var(--zui-tabs-trigger-crimson-bg,#b91c1c10)] dark:bg-[var(--zui-tabs-trigger-crimson-bg-dark,#f871711f)] text-[color:var(--zui-tabs-trigger-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-tabs-trigger-crimson-fg-dark,#f87171)]",
+  aqua: "hover:bg-[var(--zui-tabs-trigger-aqua-bg-hover,#0f766e18)] dark:hover:bg-[var(--zui-tabs-trigger-aqua-bg-hover-dark,#2dd4bf2e)] hover:text-[color:var(--zui-tabs-trigger-aqua-fg-hover,#0f766e)] dark:hover:text-[color:var(--zui-tabs-trigger-aqua-fg-hover-dark,#2dd4bf)] bg-[var(--zui-tabs-trigger-aqua-bg,#0f766e10)] dark:bg-[var(--zui-tabs-trigger-aqua-bg-dark,#2dd4bf1f)] text-[color:var(--zui-tabs-trigger-aqua-fg,#0f766e)] dark:text-[color:var(--zui-tabs-trigger-aqua-fg-dark,#2dd4bf)]",
+  plum: "hover:bg-[var(--zui-tabs-trigger-plum-bg-hover,#7e22ce18)] dark:hover:bg-[var(--zui-tabs-trigger-plum-bg-hover-dark,#c084fc2e)] hover:text-[color:var(--zui-tabs-trigger-plum-fg-hover,#7e22ce)] dark:hover:text-[color:var(--zui-tabs-trigger-plum-fg-hover-dark,#c084fc)] bg-[var(--zui-tabs-trigger-plum-bg,#7e22ce10)] dark:bg-[var(--zui-tabs-trigger-plum-bg-dark,#c084fc1f)] text-[color:var(--zui-tabs-trigger-plum-fg,#7e22ce)] dark:text-[color:var(--zui-tabs-trigger-plum-fg-dark,#c084fc)]",
 } as const;
 
 export const zuiTabsTriggerVariants = {