@nuxt/ui 3.0.0-alpha.5 → 3.0.0-alpha.7

package/dist/module.mjs

@@ -1,19 +1,20 @@
 import { defuFn, defu } from 'defu';
-import { addTemplate, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, hasNuxtModule, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { addTemplate, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
 import 'node:url';
 import { kebabCase } from 'scule';
+import { pick } from '../dist/runtime/utils/index.js';
 
 const accordion = {
   slots: {
     root: "w-full",
-    item: "border-b border-gray-200 dark:border-gray-800 last:border-b-0",
+    item: "border-b border-[var(--ui-border)] last:border-b-0",
     header: "flex",
-    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 min-w-0",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0",
     content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
     body: "text-sm pb-3.5",
     leadingIcon: "shrink-0 size-5",
     trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
-    label: "truncate"
+    label: "text-left break-words"
   },
   variants: {
     disabled: {
@@ -26,7 +27,7 @@ const accordion = {
 
 const alert = (options) => ({
   slots: {
-    root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
+    root: "relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5",
     wrapper: "min-w-0 flex-1 flex flex-col gap-1",
     title: "text-sm font-medium",
     description: "text-sm opacity-90",
@@ -39,7 +40,7 @@ const alert = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     variant: {
       solid: "",
@@ -62,63 +63,63 @@ const alert = (options) => ({
     color,
     variant: "solid",
     class: {
-      root: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
+      root: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
     class: {
-      root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+      root: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
     class: {
-      root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
+      root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
     class: {
-      root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+      root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
     }
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "solid",
     class: {
-      root: "text-white dark:text-gray-900 bg-gray-900 dark:bg-white"
+      root: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
     }
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "outline",
     class: {
-      root: "text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-200 dark:ring-gray-800"
+      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]"
     }
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "soft",
     class: {
-      root: "text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50"
+      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50"
     }
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "subtle",
     class: {
-      root: "text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50 ring ring-inset ring-gray-300 dark:ring-gray-700"
+      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]"
     }
   }],
   defaultVariants: {
     color: "primary",
-    variant: "outline"
+    variant: "solid"
   }
 });
 
 const avatar = {
   slots: {
-    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800",
+    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]",
     image: "h-full w-full rounded-[inherit] object-cover",
-    fallback: "font-medium leading-none text-gray-500 dark:text-gray-400 truncate",
-    icon: "text-gray-500 dark:text-gray-400 shrink-0"
+    fallback: "font-medium leading-none text-[var(--ui-text-muted)] truncate",
+    icon: "text-[var(--ui-text-muted)] shrink-0"
   },
   variants: {
     size: {
@@ -159,18 +160,18 @@ const avatar = {
 const avatarGroup = {
   slots: {
     root: "inline-flex flex-row-reverse justify-end",
-    base: "relative rounded-full ring-white dark:ring-gray-900 first:me-0"
+    base: "relative rounded-full ring-[var(--ui-bg)] first:me-0"
   },
   variants: {
     size: {
       "3xs": {
-        base: "ring-1 -me-0.5"
+        base: "ring -me-0.5"
       },
       "2xs": {
-        base: "ring-1 -me-0.5"
+        base: "ring -me-0.5"
       },
       "xs": {
-        base: "ring-1 -me-0.5"
+        base: "ring -me-0.5"
       },
       "sm": {
         base: "ring-2 -me-1.5"
@@ -182,13 +183,13 @@ const avatarGroup = {
         base: "ring-2 -me-1.5"
       },
       "xl": {
-        base: "ring-2.5 -me-2"
+        base: "ring-3 -me-2"
       },
       "2xl": {
-        base: "ring-2.5 -me-2"
+        base: "ring-3 -me-2"
       },
       "3xl": {
-        base: "ring-2.5 -me-2"
+        base: "ring-3 -me-2"
       }
     }
   },
@@ -198,11 +199,11 @@ const avatarGroup = {
 };
 
 const badge = (options) => ({
-  base: "rounded-md font-medium inline-flex items-center",
+  base: "rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center",
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     variant: {
       solid: "",
@@ -219,35 +220,35 @@ const badge = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
+    class: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50`
+    class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/50`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
+    class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+    class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "solid",
-    class: "text-white dark:text-gray-900 bg-gray-900 dark:bg-white"
+    class: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "soft",
-    class: "text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800"
+    class: "text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
   }],
   defaultVariants: {
     color: "primary",
@@ -261,21 +262,21 @@ const breadcrumb = (options) => ({
     root: "relative min-w-0",
     list: "flex items-center gap-1.5",
     item: "flex min-w-0",
-    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)]",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
     linkLabel: "truncate",
     separator: "flex",
-    separatorIcon: "shrink-0 size-5 text-gray-500 dark:text-gray-400"
+    separatorIcon: "shrink-0 size-5 text-[var(--ui-text-muted)]"
   },
   variants: {
     active: {
       true: {
-        link: "text-primary-500 dark:text-primary-400 font-semibold"
+        link: "text-[var(--ui-primary)] font-semibold"
       },
       false: {
-        link: "text-gray-500 dark:text-gray-400 font-medium"
+        link: "text-[var(--ui-text-muted)] font-medium"
       }
     },
     disabled: {
@@ -292,7 +293,7 @@ const breadcrumb = (options) => ({
     active: false,
     to: true,
     class: {
-      link: ["hover:text-gray-700 dark:hover:text-gray-200", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
     }
   }]
 });
@@ -334,17 +335,18 @@ const buttonGroup = {
 
 const button = (options) => ({
   slots: {
-    base: ["rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme.transitions && "transition-colors"],
     label: "truncate",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
     trailingIcon: "shrink-0"
   },
   variants: {
     ...buttonGroupVariant,
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     variant: {
       solid: "",
@@ -358,32 +360,38 @@ const button = (options) => ({
       xs: {
         base: "px-2 py-1 text-xs gap-1",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       sm: {
         base: "px-2.5 py-1.5 text-xs gap-1.5",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       md: {
         base: "px-2.5 py-1.5 text-sm gap-1.5",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       lg: {
         base: "px-3 py-2 text-sm gap-2",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       xl: {
         base: "px-3 py-2 text-base gap-2",
         leadingIcon: "size-6",
+        leadingAvatarSize: "xs",
         trailingIcon: "size-6"
       }
     },
     block: {
       true: {
-        base: "w-full",
+        base: "w-full justify-center",
+        leadingAvatarSize: "xs",
         trailingIcon: "ms-auto"
       }
     },
@@ -403,51 +411,51 @@ const button = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 aria-disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 dark:aria-disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+    class: `text-[var(--ui-bg)] bg-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/75 disabled:bg-[var(--ui-${color})] aria-disabled:bg-[var(--ui-${color})] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `ring ring-inset ring-[var(--ui-${color})]/50 text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10`
+    class: `text-[var(--ui-${color})] bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 focus-visible:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25 bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "ghost",
-    class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+    class: `text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 focus-visible:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
-    class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 aria-disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 dark:aria-disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `text-[var(--ui-${color})] hover:text-[var(--ui-${color})]/75 disabled:text-[var(--ui-${color})] aria-disabled:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "solid",
-    class: "text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+    class: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/80 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "soft",
-    class: "text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 aria-disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800"
+    class: "text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 focus-visible:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)]"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 aria-disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "ghost",
-    class: "text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
+    class: "text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
   }, {
-    color: "gray",
+    color: "neutral",
     variant: "link",
-    class: "text-gray-500 hover:text-gray-700 disabled:text-gray-500 aria-disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 dark:aria-disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    class: "text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
     size: "xs",
     square: true,
@@ -491,27 +499,66 @@ const button = (options) => ({
 
 const card = {
   slots: {
-    root: "bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow",
+    root: "bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow",
     header: "p-4 sm:px-6",
     body: "p-4 sm:p-6",
     footer: "p-4 sm:px-6"
   }
 };
 
+const carousel = (options) => ({
+  slots: {
+    root: "relative focus:outline-none",
+    viewport: "overflow-hidden",
+    container: "flex items-start",
+    item: "min-w-0 shrink-0 basis-full",
+    controls: "",
+    arrows: "",
+    prev: "absolute rounded-full",
+    next: "absolute rounded-full",
+    dots: "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
+    dot: ["cursor-pointer size-3 bg-[var(--ui-border-accented)] rounded-full", options.theme.transitions && "transition"]
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        container: "flex-col -mt-4",
+        item: "pt-4",
+        prev: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        next: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"
+      },
+      horizontal: {
+        container: "flex-row -ml-4",
+        item: "pl-4",
+        prev: "-left-12 top-1/2 -translate-y-1/2",
+        next: "-right-12 top-1/2 -translate-y-1/2"
+      }
+    },
+    active: {
+      true: {
+        dot: "bg-[var(--ui-border-inverted)]"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+
 const checkbox = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: "shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
+    base: "shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
     container: "flex items-center",
     wrapper: "ms-2",
     icon: "shrink-0 size-full",
-    label: "block font-medium text-gray-700 dark:text-gray-200",
-    description: "text-gray-500 dark:text-gray-400"
+    label: "block font-medium text-[var(--ui-text)]",
+    description: "text-[var(--ui-text-muted)]"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
-      gray: "focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-[var(--ui-${color})]`])),
+      neutral: "focus-visible:outline-[var(--ui-border-inverted)]"
     },
     size: {
       xs: {
@@ -542,7 +589,7 @@ const checkbox = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
+        label: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
       }
     },
     disabled: {
@@ -559,11 +606,11 @@ const checkbox = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     checked: true,
-    class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
+    class: `ring-2 ring-[var(--ui-${color})] bg-[var(--ui-${color})]`
   })), {
-    color: "gray",
+    color: "neutral",
     checked: true,
-    class: "ring-2 ring-gray-900 dark:ring-white bg-gray-900 dark:bg-white"
+    class: "ring-2 ring-[var(--ui-border-inverted)] bg-[var(--ui-bg-inverted)]"
   }],
   defaultVariants: {
     size: "md",
@@ -574,12 +621,12 @@ const checkbox = (options) => ({
 const chip = (options) => ({
   slots: {
     root: "relative inline-flex items-center justify-center shrink-0",
-    base: "rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap"
+    base: "rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
-      gray: "bg-gray-500 dark:bg-gray-400"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-[var(--ui-${color})]`])),
+      neutral: "bg-[var(--ui-text-muted)]"
     },
     size: {
       "3xs": "h-[4px] min-w-[4px] text-[4px]",
@@ -631,36 +678,43 @@ const chip = (options) => ({
 
 const collapsible = {
   slots: {
-    root: "flex flex-col gap-2",
+    root: "",
     content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
   }
 };
 
 const commandPalette = (options) => ({
   slots: {
-    root: "flex flex-col min-h-0 min-w-0 divide-y divide-gray-200 dark:divide-gray-800",
+    root: "flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]",
     input: "[&>input]:h-12",
     close: "",
     content: "relative overflow-hidden",
-    viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
+    viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
     group: "p-1 isolate",
-    empty: "py-6 text-center text-sm",
-    label: "px-2 py-1.5 text-xs font-semibold text-gray-900 dark:text-white",
-    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
-    itemLeadingIcon: ["shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.theme.transitions && "transition-colors"],
+    empty: "py-6 text-center text-sm text-[var(--ui-text-muted)]",
+    label: "px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]",
+    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+    itemLeadingIcon: ["shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "2xs",
     itemLeadingChip: "shrink-0 size-5",
     itemLeadingChipSize: "md",
     itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
     itemTrailingIcon: "shrink-0 size-5",
-    itemTrailingHighlightedIcon: "shrink-0 size-5 text-gray-400 dark:text-gray-500 hidden group-data-highlighted:inline-flex",
+    itemTrailingHighlightedIcon: "shrink-0 size-5 text-[var(--ui-text-dimmed)] hidden group-data-highlighted:inline-flex",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5",
     itemTrailingKbdsSize: "md",
     itemLabel: "truncate space-x-1",
-    itemLabelBase: "text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900",
-    itemLabelPrefix: "text-gray-700 dark:text-gray-200",
-    itemLabelSuffix: "text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"
+    itemLabelBase: "text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]",
+    itemLabelPrefix: "text-[var(--ui-text)]",
+    itemLabelSuffix: "text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"
+  },
+  variants: {
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
+      }
+    }
   }
 });
 
@@ -670,11 +724,11 @@ const container = {
 
 const contextMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
     group: "p-1 isolate",
-    label: "w-full flex items-center font-semibold text-gray-900 dark:text-white",
-    separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
-    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
+    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -683,17 +737,22 @@ const contextMenu = (options) => ({
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500"
+    itemLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]"
   },
   variants: {
     active: {
       true: {
-        item: "text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800",
-        itemLeadingIcon: "text-gray-700 dark:text-gray-200"
+        item: "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
+        itemLeadingIcon: "text-[var(--ui-text)]"
       },
       false: {
-        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
+        item: ["text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      }
+    },
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
       }
     },
     size: {
@@ -751,20 +810,20 @@ const contextMenu = (options) => ({
 
 const drawer = {
   slots: {
-    overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
-    content: "fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none",
-    handle: "shrink-0 rounded-full bg-gray-200 dark:bg-gray-700",
+    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
+    content: "fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-[var(--ui-bg-accented)]",
     container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     header: "",
-    title: "text-gray-900 dark:text-white font-semibold",
-    description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
+    title: "text-[var(--ui-text-highlighted)] font-semibold",
+    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
     body: "flex-1",
     footer: "flex flex-col gap-1.5"
   },
   variants: {
     direction: {
       top: {
-        content: "top-0 mb-24 flex-col-reverse rounded-b-lg",
+        content: "top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)]",
         handle: "mb-4"
       },
       right: {
@@ -772,7 +831,7 @@ const drawer = {
         handle: "ml-4"
       },
       bottom: {
-        content: "bottom-0 mt-24 flex-col rounded-t-lg",
+        content: "bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)]",
         handle: "mt-4"
       },
       left: {
@@ -790,7 +849,7 @@ const drawer = {
   }, {
     direction: ["right", "left"],
     class: {
-      content: "inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden",
+      content: "inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden",
       handle: "h-12 w-1.5 mt-auto mb-auto"
     }
   }]
@@ -798,12 +857,12 @@ const drawer = {
 
 const dropdownMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    arrow: "fill-gray-200 dark:fill-gray-800",
+    content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-[var(--ui-border)]",
     group: "p-1 isolate",
-    label: "w-full flex items-center font-semibold text-gray-900 dark:text-white",
-    separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
-    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
+    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -812,17 +871,22 @@ const dropdownMenu = (options) => ({
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500"
+    itemLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]"
   },
   variants: {
     active: {
       true: {
-        item: "text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800",
-        itemLeadingIcon: "text-gray-700 dark:text-gray-200"
+        item: "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
+        itemLeadingIcon: "text-[var(--ui-text)]"
       },
       false: {
-        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
+        item: ["text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      }
+    },
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
       }
     },
     size: {
@@ -887,12 +951,12 @@ const formField = {
     root: "",
     wrapper: "",
     labelWrapper: "flex content-center items-center justify-between",
-    label: "block font-medium text-gray-700 dark:text-gray-200",
+    label: "block font-medium text-[var(--ui-text)]",
     container: "mt-1 relative",
-    description: "text-gray-500 dark:text-gray-400",
-    error: "mt-2 text-error-500 dark:text-error-400",
-    hint: "text-gray-500 dark:text-gray-400",
-    help: "mt-2 text-gray-500 dark:text-gray-400"
+    description: "text-[var(--ui-text-muted)]",
+    error: "mt-2 text-[var(--ui-error)]",
+    hint: "text-[var(--ui-text-muted)]",
+    help: "mt-2 text-[var(--ui-text-muted)]"
   },
   variants: {
     size: {
@@ -904,7 +968,7 @@ const formField = {
     },
     required: {
       true: {
-        label: `after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400`
+        label: `after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]`
       }
     }
   },
@@ -916,12 +980,13 @@ const formField = {
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
-    base: ["w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     leading: "absolute inset-y-0 start-0 flex items-center",
-    leadingIcon: "shrink-0 text-gray-400 dark:text-gray-500",
+    leadingIcon: "shrink-0 text-[var(--ui-text-dimmed)]",
     leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
     trailing: "absolute inset-y-0 end-0 flex items-center",
-    trailingIcon: "shrink-0 text-gray-400 dark:text-gray-500"
+    trailingIcon: "shrink-0 text-[var(--ui-text-dimmed)]"
   },
   variants: {
     ...buttonGroupVariantWithRoot,
@@ -931,6 +996,7 @@ const input = (options) => ({
         leading: "pl-2",
         trailing: "pr-2",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       sm: {
@@ -938,6 +1004,7 @@ const input = (options) => ({
         leading: "pl-2.5",
         trailing: "pr-2.5",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       md: {
@@ -945,6 +1012,7 @@ const input = (options) => ({
         leading: "pl-2.5",
         trailing: "pr-2.5",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       lg: {
@@ -952,6 +1020,7 @@ const input = (options) => ({
         leading: "pl-3",
         trailing: "pr-3",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       xl: {
@@ -959,19 +1028,20 @@ const input = (options) => ({
         leading: "pl-3",
         trailing: "pr-3",
         leadingIcon: "size-6",
+        leadingAvatarSize: "xs",
         trailingIcon: "size-6"
       }
     },
     variant: {
-      outline: "text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700",
-      soft: "text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50",
-      subtle: "text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700",
-      ghost: "text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent",
-      none: "text-gray-900 dark:text-white"
+      outline: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]",
+      soft: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50",
+      subtle: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]",
+      ghost: "text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-[var(--ui-text-highlighted)]"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     leading: {
       true: ""
@@ -986,25 +1056,25 @@ const input = (options) => ({
       true: ""
     },
     type: {
-      file: "file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none"
+      file: "file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none"
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
-    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
-    class: `ring ring-inset ring-${color}-500 dark:ring-${color}-400`
+    class: `ring ring-inset ring-[var(--ui-${color})]`
   })), {
-    color: "gray",
+    color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
-    color: "gray",
+    color: "neutral",
     highlight: true,
-    class: "ring ring-inset ring-gray-900 dark:ring-white"
+    class: "ring ring-inset ring-[var(--ui-border-inverted)]"
   }, {
     leading: true,
     size: "xs",
@@ -1069,17 +1139,17 @@ const input = (options) => ({
 const inputMenu = (options) => {
   return defuFn({
     slots: {
-      base: () => ["rounded-md", options.theme.transitions && "transition-colors"],
+      base: () => ["rounded-[calc(var(--ui-radius)*1.5)]", options.theme.transitions && "transition-colors"],
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
-      arrow: "fill-gray-200 dark:fill-gray-800",
-      content: "max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-      viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
+      arrow: "fill-[var(--ui-border)]",
+      content: "max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-gray-500 dark:text-gray-400",
-      label: "font-semibold text-gray-900 dark:text-white",
-      separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
-      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.theme.transitions && "transition-colors"],
+      empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
+      label: "font-semibold text-[var(--ui-text-highlighted)]",
+      separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1087,20 +1157,21 @@ const inputMenu = (options) => {
       itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
       itemTrailingIcon: "shrink-0",
       itemLabel: "truncate",
-      tagsItem: "px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75",
+      tagsItem: "px-1.5 py-0.5 rounded-[var(--ui-radius)] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[var(--ui-border-accented)] bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
       tagsItemText: "truncate",
-      tagsItemDelete: ["inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
+      tagsItemDelete: ["inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[var(--ui-text-dimmed)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-accented)]/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
       tagsItemDeleteIcon: "",
-      tagsInput: "border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+      tagsInput: ""
     },
     variants: {
       multiple: {
         true: {
           root: "flex-wrap",
-          base: ""
+          base: "",
+          tagsInput: "border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         },
         false: {
-          base: "w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          base: "w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         }
       },
       size: {
@@ -1165,23 +1236,23 @@ const inputMenu = (options) => {
       color,
       multiple: true,
       variant: ["outline", "subtle"],
-      class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-${color}-500 dark:has-[:focus-visible]:ring-${color}-400`
+      class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--${color})]`
     })), {
-      color: "gray",
+      color: "neutral",
       multiple: true,
       variant: ["outline", "subtle"],
-      class: "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-gray-500 dark:has-[:focus-visible]:ring-white"
+      class: "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ui-border-inverted)]"
     }]
   }, input(options));
 };
 
 const kbd = {
-  base: "inline-flex items-center justify-center px-1 rounded font-medium font-sans",
+  base: "inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans",
   variants: {
     variant: {
-      solid: "bg-gray-900 dark:bg-white text-white dark:text-gray-900",
-      outline: "bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700",
-      subtle: "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700"
+      solid: "bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)]",
+      outline: "bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)]",
+      subtle: "bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)]"
     },
     size: {
       sm: "h-4 min-w-[16px] text-[10px]",
@@ -1196,11 +1267,11 @@ const kbd = {
 };
 
 const link = (options) => ({
-  base: "focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+  base: "focus-visible:outline-[var(--ui-primary)]",
   variants: {
     active: {
-      true: "text-primary-500 dark:text-primary-400",
-      false: ["text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200", options.theme.transitions && "transition-colors"]
+      true: "text-[var(--ui-primary)]",
+      false: ["text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
@@ -1210,13 +1281,13 @@ const link = (options) => ({
 
 const modal = {
   slots: {
-    overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
-    content: "fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none",
+    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
+    content: "fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none",
     header: "px-4 py-5 sm:px-6",
     body: "flex-1 p-4 sm:p-6",
     footer: "flex items-center gap-1.5 p-4 sm:px-6",
-    title: "text-gray-900 dark:text-white font-semibold",
-    description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
+    title: "text-[var(--ui-text-highlighted)] font-semibold",
+    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
     close: "absolute top-4 right-4"
   },
   variants: {
@@ -1231,7 +1302,7 @@ const modal = {
         content: "inset-0"
       },
       false: {
-        content: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800"
+        content: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]"
       }
     }
   }
@@ -1242,7 +1313,7 @@ const navigationMenu = (options) => ({
     root: "relative flex gap-1.5",
     list: "isolate min-w-0",
     item: "min-w-0",
-    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
@@ -1251,37 +1322,37 @@ const navigationMenu = (options) => ({
     linkTrailingBadgeSize: "sm",
     linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     linkLabel: "truncate",
-    linkLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500",
-    childList: "grid grid-cols-2 gap-2 p-2",
+    linkLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]",
+    childList: "",
     childItem: "",
-    childLink: "group size-full px-3 py-2 rounded-md flex items-start gap-2 text-left",
+    childLink: "group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-left",
     childLinkWrapper: "flex flex-col items-start",
     childLinkIcon: "size-5 shrink-0",
     childLinkLabel: "font-semibold text-sm relative inline-flex",
-    childLinkLabelExternalIcon: "size-3 align-top text-gray-400 dark:text-gray-500",
-    childLinkDescription: "text-sm text-gray-500 dark:text-gray-400",
-    separator: "px-2 h-px bg-gray-200 dark:bg-gray-800",
+    childLinkLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]",
+    childLinkDescription: "text-sm text-[var(--ui-text-muted)]",
+    separator: "px-2 h-px bg-[var(--ui-border)]",
     viewportWrapper: "absolute top-full inset-x-0 flex w-full",
     // FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
-    viewport: "relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    viewport: "relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
     content: "absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
     indicator: "data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out",
-    arrow: "relative top-[50%] size-2.5 rotate-45 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 z-[1] rounded-sm"
+    arrow: "relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        link: `focus-visible:before:ring-${color}-500 dark:focus-visible:before:ring-${color}-400`,
-        childLink: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+        link: `focus-visible:before:ring-[var(--ui-${color})]`,
+        childLink: `focus-visible:outline-[var(--ui-${color})]`
       }])),
-      gray: {
-        link: "focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white",
-        childLink: "focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+      neutral: {
+        link: "focus-visible:before:ring-[var(--ui-border-inverted)]",
+        childLink: "focus-visible:outline-[var(--ui-border-inverted)]"
       }
     },
     highlightColor: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     variant: {
       pill: "",
@@ -1292,23 +1363,26 @@ const navigationMenu = (options) => ({
         root: "w-full items-center justify-between",
         list: "flex items-center",
         item: "py-2",
-        link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0"
+        link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
+        childList: "grid grid-cols-2 gap-2 p-2"
       },
       vertical: {
         root: "flex-col",
-        link: "px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
+        link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0",
+        childList: "ml-5 border-l border-[var(--ui-border)]",
+        childItem: "pl-1.5 -ml-px"
       }
     },
     active: {
       true: {
-        childLink: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white",
-        childLinkIcon: "text-gray-700 dark:text-gray-200"
+        childLink: "bg-[var(--ui-bg-elevated)] text-[var(--ui-text-highlighted)]",
+        childLinkIcon: "text-[var(--ui-text)]"
       },
       false: {
-        link: "text-gray-500 dark:text-gray-400",
-        linkLeadingIcon: "text-gray-400 dark:text-gray-500",
-        childLink: ["hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white", options.theme.transitions && "transition-colors"],
-        childLinkIcon: ["text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200", options.theme.transitions && "transition-colors"]
+        link: "text-[var(--ui-text-muted)]",
+        linkLeadingIcon: "text-[var(--ui-text-dimmed)]",
+        childLink: ["hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors"],
+        childLinkIcon: ["text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
       }
     },
     disabled: {
@@ -1339,76 +1413,93 @@ const navigationMenu = (options) => ({
     active: false,
     variant: "pill",
     class: {
-      link: ["hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+    }
+  }, {
+    disabled: false,
+    variant: "pill",
+    highlight: true,
+    orientation: "horizontal",
+    class: {
+      link: "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
+    }
+  }, {
+    disabled: false,
+    variant: "pill",
+    highlight: false,
+    active: false,
+    orientation: "horizontal",
+    class: {
+      link: "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "pill",
     active: true,
     class: {
-      link: `text-${color}-500 dark:text-${color}-400`,
-      linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
+      link: `text-[var(--ui-${color})]`,
+      linkLeadingIcon: `text-[var(--ui-${color})]`
     }
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "pill",
     active: true,
     class: {
-      link: "text-gray-900 dark:text-white",
-      linkLeadingIcon: "text-gray-900 dark:text-white"
+      link: "text-[var(--ui-text-highlighted)]",
+      linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: false,
     class: {
-      link: "before:bg-gray-100 dark:before:bg-gray-800"
+      link: "before:bg-[var(--ui-bg-elevated)]"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: true,
     class: {
-      link: ["hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50", options.theme.transitions && "before:transition-colors"]
+      link: ["hover:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "before:transition-colors"]
     }
   }, {
     disabled: false,
     active: false,
     variant: "link",
     class: {
-      link: ["hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white", options.theme.transitions && "transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     active: true,
     class: {
-      link: `text-${color}-500 dark:text-${color}-400`,
-      linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
+      link: `text-[var(--ui-${color})]`,
+      linkLeadingIcon: `text-[var(--ui-${color})]`
     }
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "link",
     active: true,
     class: {
-      link: "text-gray-900 dark:text-white",
-      linkLeadingIcon: "text-gray-900 dark:text-white"
+      link: "text-[var(--ui-text-highlighted)]",
+      linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
     }
   }, ...(options.theme.colors || []).map((highlightColor) => ({
     highlightColor,
     highlight: true,
     active: true,
     class: {
-      link: `after:bg-${highlightColor}-500 dark:after:bg-${highlightColor}-400`
+      link: `after:bg-[var(--ui-${highlightColor})]`
     }
   })), {
-    highlightColor: "gray",
+    highlightColor: "neutral",
     highlight: true,
     active: true,
     class: {
-      link: "after:bg-gray-900 dark:after:bg-white"
+      link: "after:bg-[var(--ui-bg-inverted)]"
     }
   }],
   defaultVariants: {
@@ -1429,17 +1520,17 @@ const pagination = {
 
 const popover = {
   slots: {
-    content: "bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    arrow: "fill-gray-200 dark:fill-gray-800"
+    content: "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none",
+    arrow: "fill-[var(--ui-border)]"
   }
 };
 
 const progress = (options) => ({
   slots: {
     root: "gap-2",
-    base: "relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700",
+    base: "relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)]",
     indicator: "rounded-full size-full transition-transform duration-200 ease-out",
-    status: "flex justify-end text-gray-400 dark:text-gray-500 transition-[width] duration-200",
+    status: "flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200",
     steps: "grid items-end",
     step: "truncate text-end row-start-1 col-start-1 transition-opacity"
   },
@@ -1452,12 +1543,12 @@ const progress = (options) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        indicator: `bg-${color}-500 dark:bg-${color}-400`,
-        steps: `text-${color}-500 dark:text-${color}-400`
+        indicator: `bg-[var(--ui-${color})]`,
+        steps: `text-[var(--ui-${color})]`
       }])),
-      gray: {
-        indicator: "bg-gray-900 dark:bg-white",
-        steps: "text-white dark:text-gray-900"
+      neutral: {
+        indicator: "bg-[var(--ui-bg-inverted)]",
+        steps: "text-[var(--ui-bg)]"
       }
     },
     size: {
@@ -1495,7 +1586,7 @@ const progress = (options) => ({
         step: "opacity-100"
       },
       first: {
-        step: "opacity-100 text-gray-500 dark:text-gray-400"
+        step: "opacity-100 text-[var(--ui-text-muted)]"
       },
       other: {
         step: "opacity-0"
@@ -1652,24 +1743,24 @@ const radioGroup = (options) => ({
   slots: {
     root: "relative",
     fieldset: "flex",
-    legend: "mb-1 block font-medium text-gray-700 dark:text-gray-200",
+    legend: "mb-1 block font-medium text-[var(--ui-text)]",
     item: "flex items-start",
-    base: "rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-white dark:focus-visible:outline-offset-gray-900",
-    indicator: "flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full",
+    base: "rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[var(--ui-bg)]",
+    indicator: "flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full",
     container: "flex items-center",
     wrapper: "ms-2",
-    label: "block font-medium text-gray-700 dark:text-gray-200",
-    description: "text-gray-500 dark:text-gray-400"
+    label: "block font-medium text-[var(--ui-text)]",
+    description: "text-[var(--ui-text-muted)]"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
-        indicator: `bg-${color}-500 dark:bg-${color}-400`
+        base: `focus-visible:outline-[var(--ui-${color})]`,
+        indicator: `bg-[var(--ui-${color})]`
       }])),
-      gray: {
-        base: "focus-visible:outline-gray-900 dark:focus-visible:outline-white",
-        indicator: "bg-gray-900 dark:bg-white"
+      neutral: {
+        base: "focus-visible:outline-[var(--ui-border-inverted)]",
+        indicator: "bg-[var(--ui-bg-inverted)]"
       }
     },
     orientation: {
@@ -1731,7 +1822,7 @@ const radioGroup = (options) => ({
     },
     required: {
       true: {
-        legend: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
+        legend: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
       }
     }
   },
@@ -1745,17 +1836,17 @@ const select = (options) => {
   return defuFn({
     slots: {
       root: () => void 0,
-      base: () => ["relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
-      value: "truncate group-data-placeholder:text-current/50",
-      arrow: "fill-gray-200 dark:fill-gray-800",
-      content: "max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-      viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
+      base: () => ["relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+      value: "truncate group-data-placeholder:text-[var(--ui-text-dimmed)]",
+      arrow: "fill-[var(--ui-border)]",
+      content: "max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-gray-500 dark:text-gray-400",
-      label: "font-semibold text-gray-900 dark:text-white",
-      separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
-      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.theme.transitions && "transition-colors"],
+      empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
+      label: "font-semibold text-[var(--ui-text-highlighted)]",
+      separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1821,8 +1912,8 @@ const selectMenu = (options) => {
   return defu({
     slots: {
       value: "truncate",
-      placeholder: "truncate text-current/50",
-      input: "placeholder-gray-400 dark:placeholder-gray-500 border-0 border-b border-gray-200 dark:border-gray-800 focus:outline-none"
+      placeholder: "truncate text-[var(--ui-text-dimmed)]",
+      input: "placeholder:text-[var(--ui-text-dimmed)] border-0 border-b border-[var(--ui-border)] focus:outline-none"
     },
     variants: {
       size: {
@@ -1850,7 +1941,7 @@ const separator = (options) => ({
   slots: {
     root: "flex items-center align-center text-center",
     border: "",
-    container: "font-medium text-gray-700 dark:text-gray-200 flex",
+    container: "font-medium text-[var(--ui-text)] flex",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xs",
@@ -1858,8 +1949,8 @@ const separator = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
-      gray: { border: "border-gray-200 dark:border-gray-800" }
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-[var(--ui-${color})]` }])),
+      neutral: { border: "border-[var(--ui-border)]" }
     },
     orientation: {
       horizontal: {
@@ -1934,37 +2025,37 @@ const separator = (options) => ({
     class: { border: "border-s-[5px]" }
   }],
   defaultVariants: {
-    color: "gray",
+    color: "neutral",
     size: "xs",
     type: "solid"
   }
 });
 
 const skeleton = {
-  base: "animate-pulse rounded-md bg-gray-100 dark:bg-gray-800"
+  base: "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]"
 };
 
 const slideover = {
   slots: {
-    overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
-    content: "fixed z-50 bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 sm:shadow-lg flex flex-col focus:outline-none",
+    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
+    content: "fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] sm:ring ring-[var(--ui-border)] sm:shadow-lg flex flex-col focus:outline-none",
     header: "px-4 py-5 sm:px-6",
     body: "flex-1 overflow-y-auto p-4 sm:p-6",
     footer: "flex items-center gap-1.5 p-4 sm:px-6",
-    title: "text-gray-900 dark:text-white font-semibold",
-    description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
+    title: "text-[var(--ui-text-highlighted)] font-semibold",
+    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
     close: "absolute top-4 right-4"
   },
   variants: {
     side: {
       top: {
-        content: "inset-x-0 top-0"
+        content: "inset-x-0 top-0 max-h-full"
       },
       right: {
         content: "right-0 inset-y-0 w-full max-w-md"
       },
       bottom: {
-        content: "inset-x-0 bottom-0"
+        content: "inset-x-0 bottom-0 max-h-full"
       },
       left: {
         content: "left-0 inset-y-0 w-full max-w-md"
@@ -2006,19 +2097,19 @@ const slideover = {
 const slider = (options) => ({
   slots: {
     root: "relative flex items-center select-none touch-none",
-    track: "relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow",
+    track: "relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow",
     range: "absolute rounded-full",
-    thumb: "rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    thumb: "rounded-full bg-[var(--ui-bg)] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        range: `bg-${color}-500 dark:bg-${color}-400`,
-        thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
+        range: `bg-[var(--ui-${color})]`,
+        thumb: `ring-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]`
       }])),
-      gray: {
-        range: "bg-gray-900 dark:bg-white",
-        thumb: "ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50"
+      neutral: {
+        range: "bg-[var(--ui-bg-inverted)]",
+        thumb: "ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50"
       }
     },
     size: {
@@ -2124,23 +2215,23 @@ const slider = (options) => ({
 const _switch = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700", options.theme.transitions && "transition-colors duration-200"],
+    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]", options.theme.transitions && "transition-colors duration-200"],
     container: "flex items-center",
-    thumb: "group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center",
-    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
+    thumb: "group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center",
+    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
     wrapper: "ms-2",
-    label: "block font-medium text-gray-700 dark:text-gray-200",
-    description: "text-gray-500 dark:text-gray-400"
+    label: "block font-medium text-[var(--ui-text)]",
+    description: "text-[var(--ui-text-muted)]"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
-        icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
+        base: `data-[state=checked]:bg-[var(--ui-${color})] focus-visible:ring-[var(--ui-${color})]`,
+        icon: `group-data-[state=checked]:text-[var(--ui-${color})]`
       }])),
-      gray: {
-        base: "data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white",
-        icon: "group-data-[state=checked]:text-gray-900 dark:group-data-[state=checked]:text-white"
+      neutral: {
+        base: "data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)]",
+        icon: "group-data-[state=checked]:text-[var(--ui-text-highlighted)]"
       }
     },
     size: {
@@ -2192,7 +2283,7 @@ const _switch = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
+        label: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
       }
     },
     disabled: {
@@ -2209,12 +2300,94 @@ const _switch = (options) => ({
   }
 });
 
+const table = (options) => ({
+  slots: {
+    root: "relative overflow-auto",
+    base: "min-w-full overflow-clip",
+    thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]",
+    tbody: "divide-y divide-[var(--ui-border)]",
+    tr: "data-[selected=true]:bg-[var(--ui-bg-elevated)]/50",
+    th: "px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0",
+    td: "p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+    empty: "py-6 text-center text-sm text-[var(--ui-text-muted)]"
+  },
+  variants: {
+    pinned: {
+      true: {
+        th: "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
+        td: "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+      }
+    },
+    sticky: {
+      true: {
+        thead: "sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur"
+      }
+    },
+    loading: {
+      true: {
+        thead: "after:absolute after:bottom-0 after:inset-x-0 after:h-px"
+      }
+    },
+    loadingAnimation: {
+      "carousel": "",
+      "carousel-inverse": "",
+      "swing": "",
+      "elastic": ""
+    },
+    loadingColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((loadingColor) => ({
+    loading: true,
+    loadingColor,
+    class: {
+      thead: `after:bg-[var(--ui-${loadingColor})]`
+    }
+  })), {
+    loading: true,
+    loadingColor: "neutral",
+    class: {
+      thead: "after:bg-[var(--ui-bg-inverted)]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "carousel",
+    class: {
+      thead: "after:animate-[carousel_2s_ease-in-out_infinite]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "carousel-inverse",
+    class: {
+      thead: "after:animate-[carousel-inverse_2s_ease-in-out_infinite]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "swing",
+    class: {
+      thead: "after:animate-[swing_2s_ease-in-out_infinite]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "elastic",
+    class: {
+      thead: "after:animate-[elastic_2s_ease-in-out_infinite]"
+    }
+  }],
+  defaultVariants: {
+    loadingColor: "primary",
+    loadingAnimation: "carousel"
+  }
+});
+
 const tabs = (options) => ({
   slots: {
     root: "flex items-center gap-2",
     list: "relative flex p-1 group",
     indicator: "absolute transition-[translate,width] duration-200",
-    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.theme.transitions && "transition-colors"],
+    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.theme.transitions && "transition-colors"],
     content: "focus:outline-none w-full",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -2224,16 +2397,16 @@ const tabs = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     variant: {
       pill: {
-        list: "bg-gray-100 dark:bg-gray-800 rounded-lg",
+        list: "bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)]",
         trigger: "flex-1",
-        indicator: "rounded-md shadow-sm"
+        indicator: "rounded-[calc(var(--ui-radius)*1.5)] shadow-sm"
       },
       link: {
-        list: "border-gray-200 dark:border-gray-800",
+        list: "border-[var(--ui-border)]",
         indicator: "rounded-full"
       }
     },
@@ -2241,12 +2414,12 @@ const tabs = (options) => ({
       horizontal: {
         root: "flex-col",
         list: "w-full",
-        indicator: "left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]",
+        indicator: "left-0 w-[var(--radix-tabs-indicator-size)] translate-x-[var(--radix-tabs-indicator-position)]",
         trigger: "justify-center"
       },
       vertical: {
         list: "flex-col",
-        indicator: "top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]"
+        indicator: "top-0 h-[var(--radix-tabs-indicator-size)] translate-y-[var(--radix-tabs-indicator-position)]"
       }
     },
     size: {
@@ -2308,29 +2481,29 @@ const tabs = (options) => ({
     color,
     variant: "pill",
     class: {
-      indicator: `bg-${color}-500 dark:bg-${color}-400`,
-      trigger: `data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+      indicator: `bg-[var(--ui-${color})]`,
+      trigger: `data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
     }
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "pill",
     class: {
-      indicator: "bg-gray-900 dark:bg-white",
-      trigger: "data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+      indicator: "bg-[var(--ui-bg-inverted)]",
+      trigger: "data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     class: {
-      indicator: `bg-${color}-500 dark:bg-${color}-400`,
-      trigger: `data-[state=active]:text-${color}-500 dark:data-[state=active]:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+      indicator: `bg-[var(--ui-${color})]`,
+      trigger: `data-[state=active]:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
     }
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "link",
     class: {
-      indicator: "bg-gray-900 dark:bg-white",
-      trigger: "data-[state=active]:text-gray-900 dark:data-[state=active]:text-white focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+      indicator: "bg-[var(--ui-bg-inverted)]",
+      trigger: "data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
     }
   }],
   defaultVariants: {
@@ -2346,10 +2519,10 @@ const textarea = (options) => {
 
 const toast = (options) => ({
   slots: {
-    root: "relative group overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 focus:outline-none",
+    root: "relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none",
     wrapper: "w-0 flex-1 flex flex-col gap-1",
-    title: "text-sm font-medium text-gray-900 dark:text-white",
-    description: "text-sm text-gray-500 dark:text-gray-400",
+    title: "text-sm font-medium text-[var(--ui-text-highlighted)]",
+    description: "text-sm text-[var(--ui-text-muted)]",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xl",
@@ -2360,14 +2533,14 @@ const toast = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
-        icon: `text-${color}-500 dark:text-${color}-400`,
-        progress: `bg-${color}-500 dark:bg-${color}-400`
+        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`,
+        icon: `text-[var(--ui-${color})]`,
+        progress: `bg-[var(--ui-${color})]`
       }])),
-      gray: {
-        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
-        icon: "text-gray-900 dark:text-white",
-        progress: "bg-gray-900 dark:bg-white"
+      neutral: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]",
+        icon: "text-[var(--ui-text-highlighted)]",
+        progress: "bg-[var(--ui-bg-inverted)]"
       }
     },
     multiline: {
@@ -2388,8 +2561,8 @@ const toast = (options) => ({
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] focus:outline-none",
-    base: "absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
+    base: "absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
     position: {
@@ -2433,10 +2606,10 @@ const toaster = {
     }
   }, {
     swipeDirection: ["left", "right"],
-    class: "data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=cancel]:translate-x-0"
+    class: "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
   }, {
     swipeDirection: ["up", "down"],
-    class: "data-[swipe=move]:translate-y-[--radix-toast-swipe-move-y] data-[swipe=end]:translate-y-[--radix-toast-swipe-end-y] data-[swipe=cancel]:translate-y-0"
+    class: "data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
   }],
   defaultVariants: {
     position: "bottom-right"
@@ -2445,8 +2618,8 @@ const toaster = {
 
 const tooltip = {
   slots: {
-    content: "flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    arrow: "fill-gray-200 dark:fill-gray-800",
+    content: "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-[var(--ui-border)]",
     text: "truncate",
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:mr-0.5`,
     kbdsSize: "sm"
@@ -2464,6 +2637,7 @@ const theme = {
   button: button,
   buttonGroup: buttonGroup,
   card: card,
+  carousel: carousel,
   checkbox: checkbox,
   chip: chip,
   collapsible: collapsible,
@@ -2491,6 +2665,7 @@ const theme = {
   slideover: slideover,
   slider: slider,
   switch: _switch,
+  table: table,
   tabs: tabs,
   textarea: textarea,
   toast: toast,
@@ -2528,15 +2703,17 @@ function addTemplates(options, nuxt) {
     filename: "types/ui.d.ts",
     getContents: () => `import * as ui from '#build/ui'
 import type { DeepPartial } from '#ui/types/utils'
+import colors from 'tailwindcss/colors'
 
-const colors = ${JSON.stringify(options.theme?.colors || [])} as const;
 const icons = ${JSON.stringify(nuxt.options.appConfig.ui.icons)};
 
+type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
+type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor>
+
 type AppConfigUI = {
   colors?: {
-    primary?: Exclude<typeof colors[number], 'error' | 'primary'>
-    error?: Exclude<typeof colors[number], 'primary' | 'error'>
-    gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
+    ${options.theme?.colors?.map((color) => `${color}?: Color`).join("\n		")}
+    neutral?: NeutralColor
   }
   icons?: Partial<typeof icons>
 } & DeepPartial<typeof ui, string>
@@ -2558,6 +2735,8 @@ const icons = {
   chevronDown: "i-heroicons-chevron-down-20-solid",
   chevronLeft: "i-heroicons-chevron-left-20-solid",
   chevronRight: "i-heroicons-chevron-right-20-solid",
+  arrowLeft: "i-heroicons-arrow-left-20-solid",
+  arrowRight: "i-heroicons-arrow-right-20-solid",
   check: "i-heroicons-check-20-solid",
   close: "i-heroicons-x-mark-20-solid",
   ellipsis: "i-heroicons-ellipsis-horizontal-20-solid",
@@ -2573,11 +2752,13 @@ const module = defineNuxtModule({
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.13.1"
-    }
+    },
+    docs: "https://ui3.nuxt.dev/getting-started/installation"
   },
   defaults: {
     prefix: "U",
     fonts: true,
+    colorMode: true,
     theme: {
       colors: void 0,
       transitions: true
@@ -2586,15 +2767,19 @@ const module = defineNuxtModule({
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     options.theme = options.theme || {};
-    options.theme.colors = options.theme.colors?.length ? [.../* @__PURE__ */ new Set(["primary", "error", ...options.theme.colors])] : ["primary", "error", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+    options.theme.colors = options.theme.colors?.length ? [.../* @__PURE__ */ new Set(["primary", ...options.theme.colors])] : ["primary", "secondary", "success", "info", "warning", "error"];
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
-      colors: {
+      colors: pick({
         primary: "green",
+        secondary: "blue",
+        success: "green",
+        info: "blue",
+        warning: "yellow",
         error: "red",
-        gray: "slate"
-      },
+        neutral: "slate"
+      }, [...options.theme?.colors || [], "neutral"]),
       icons
     });
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
@@ -2605,32 +2790,23 @@ const module = defineNuxtModule({
     } else {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    if (options.fonts) {
-      if (!hasNuxtModule("@nuxt/fonts")) {
-        await installModule("@nuxt/fonts", { experimental: { processCSSVariables: true } });
+    async function registerModule(name, options2) {
+      if (!hasNuxtModule(name)) {
+        await installModule(name, options2);
       } else {
-        nuxt.options.fonts = defu(nuxt.options.fonts, { experimental: { processCSSVariables: true } });
+        nuxt.options[name] = defu(nuxt.options[name], options2);
       }
     }
-    if (!hasNuxtModule("@nuxt/icon")) {
-      await installModule("@nuxt/icon", { cssLayer: "components" });
-    } else {
-      nuxt.options.icon = defu(nuxt.options.icon, { cssLayer: "components" });
+    await registerModule("@nuxt/icon", { cssLayer: "components" });
+    if (options.fonts) {
+      await registerModule("@nuxt/fonts", { experimental: { processCSSVariables: true } });
     }
-    if (!hasNuxtModule("@nuxtjs/color-mode")) {
-      await installModule("@nuxtjs/color-mode", { classSuffix: "" });
-    } else {
-      nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: "" });
+    if (options.colorMode) {
+      await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
     }
-    addPlugin({
-      src: resolve("./runtime/plugins/colors")
-    });
-    addPlugin({
-      src: resolve("./runtime/plugins/modal")
-    });
-    addPlugin({
-      src: resolve("./runtime/plugins/slideover")
-    });
+    addPlugin({ src: resolve("./runtime/plugins/colors") });
+    addPlugin({ src: resolve("./runtime/plugins/modal") });
+    addPlugin({ src: resolve("./runtime/plugins/slideover") });
     addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: options.prefix,