@nuxt/ui 3.0.0-alpha.4 → 3.0.0-alpha.6

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-[--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-[--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-[--ui-${color}] text-[--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-[--ui-${color}] ring ring-inset ring-[--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-[--ui-${color}]/10 text-[--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-[--ui-${color}]/10 text-[--ui-${color}] ring ring-inset ring-[--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-[--ui-bg] bg-[--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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--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-[--ui-text-highlighted] bg-[--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-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 ring ring-inset ring-[--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-[--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-[--ui-text-muted] truncate",
+    icon: "text-[--ui-text-muted] shrink-0"
   },
   variants: {
     size: {
@@ -159,7 +160,7 @@ 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-[--ui-bg] first:me-0"
   },
   variants: {
     size: {
@@ -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-[--ui-${color}] text-[--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-[--ui-${color}] ring ring-inset ring-[--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-[--ui-${color}]/10 text-[--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-[--ui-${color}]/10 text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25`
   })), {
-    color: "gray",
+    color: "neutral",
     variant: "solid",
-    class: "text-white dark:text-gray-900 bg-gray-900 dark:bg-white"
+    class: "text-[--ui-bg] bg-[--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-[--ui-border-accented] text-[--ui-text] bg-[--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-[--ui-text] bg-[--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-[--ui-border-accented] text-[--ui-text] bg-[--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-[--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-[--ui-text-muted]"
   },
   variants: {
     active: {
       true: {
-        link: "text-primary-500 dark:text-primary-400 font-semibold"
+        link: "text-[--ui-primary] font-semibold"
       },
       false: {
-        link: "text-gray-500 dark:text-gray-400 font-medium"
+        link: "text-[--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-[--ui-text]", options.theme.transitions && "transition-colors"]
     }
   }]
 });
@@ -334,7 +335,7 @@ 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",
@@ -344,7 +345,7 @@ const button = (options) => ({
     ...buttonGroupVariant,
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     variant: {
       solid: "",
@@ -383,7 +384,7 @@ const button = (options) => ({
     },
     block: {
       true: {
-        base: "w-full",
+        base: "w-full justify-center",
         trailingIcon: "ms-auto"
       }
     },
@@ -403,51 +404,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-[--ui-bg] bg-[--ui-${color}] hover:bg-[--ui-${color}]/75 disabled:bg-[--ui-${color}] aria-disabled:bg-[--ui-${color}] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--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-[--ui-${color}]/50 text-[--ui-${color}] hover:bg-[--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-[--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-[--ui-${color}] bg-[--ui-${color}]/10 hover:bg-[--ui-${color}]/15 focus-visible:bg-[--ui-${color}]/15 disabled:bg-[--ui-${color}]/10 aria-disabled:bg-[--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-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25 bg-[--ui-${color}]/10 hover:bg-[--ui-${color}]/15 disabled:bg-[--ui-${color}]/10 aria-disabled:bg-[--ui-${color}]/10 focus-visible:ring-2 focus-visible:ring-[--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-[--ui-${color}] hover:bg-[--ui-${color}]/10 focus-visible:bg-[--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-[--ui-${color}] hover:text-[--ui-${color}] disabled:text-[--ui-${color}] aria-disabled:text-[--ui-${color}] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--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-[--ui-bg] bg-[--ui-bg-inverted] hover:bg-[--ui-bg-inverted]/80 disabled:bg-[--ui-bg-inverted] aria-disabled:bg-[--ui-bg-inverted] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--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-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg] hover:bg-[--ui-bg-elevated] disabled:bg-[--ui-bg] aria-disabled:bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-[--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-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 focus-visible:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--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-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--ui-bg-elevated] focus-visible:ring-2 focus-visible:ring-[--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-[--ui-text] hover:bg-[--ui-bg-elevated] focus-visible:bg-[--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-[--ui-text-muted] hover:text-[--ui-text] disabled:text-[--ui-text-muted] aria-disabled:text-[--ui-text-muted] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]"
   }, {
     size: "xs",
     square: true,
@@ -491,27 +492,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-[--ui-bg] ring ring-[--ui-border] divide-y divide-[--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-[--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-[--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-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--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-[--ui-text]",
+    description: "text-[--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-[--ui-${color}]`])),
+      neutral: "focus-visible:outline-[--ui-border-inverted]"
     },
     size: {
       xs: {
@@ -542,7 +582,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-[--ui-error]"
       }
     },
     disabled: {
@@ -559,11 +599,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-[--ui-${color}] bg-[--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-[--ui-border-inverted] bg-[--ui-bg-inverted]"
   }],
   defaultVariants: {
     size: "md",
@@ -574,12 +614,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-[--ui-bg] flex items-center justify-center text-[--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-[--ui-${color}]`])),
+      neutral: "bg-[--ui-text-muted]"
     },
     size: {
       "3xs": "h-[4px] min-w-[4px] text-[4px]",
@@ -638,29 +678,29 @@ const collapsible = {
 
 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-[--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-[--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"],
+    label: "px-2 py-1.5 text-xs font-semibold text-[--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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+    itemLeadingIcon: ["shrink-0 size-5 text-[--ui-text-dimmed] group-data-highlighted:text-[--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-[--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-[--ui-text-highlighted] [&>mark]:text-[--ui-bg] [&>mark]:bg-[--ui-primary]",
+    itemLabelPrefix: "text-[--ui-text]",
+    itemLabelSuffix: "text-[--ui-text-dimmed] [&>mark]:text-[--ui-bg] [&>mark]:bg-[--ui-primary]"
   }
 });
 
@@ -670,11 +710,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-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--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-[--ui-text-highlighted]",
+    separator: "-mx-1 my-1 h-px bg-[--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 +723,17 @@ 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-[--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-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]",
+        itemLeadingIcon: "text-[--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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]", options.theme.transitions && "transition-colors"]
       }
     },
     size: {
@@ -751,20 +791,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 z-50 bg-[--ui-bg-elevated]/75",
+    content: "fixed z-50 bg-[--ui-bg] ring ring-[--ui-border] flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-[--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-[--ui-text-highlighted] font-semibold",
+    description: "mt-1 text-[--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 +812,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 +830,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 +838,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-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--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-[--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-[--ui-text-highlighted]",
+    separator: "-mx-1 my-1 h-px bg-[--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 +852,17 @@ 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-[--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-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]",
+        itemLeadingIcon: "text-[--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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]", options.theme.transitions && "transition-colors"]
       }
     },
     size: {
@@ -887,12 +927,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-[--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-[--ui-text-muted]",
+    error: "mt-2 text-[--ui-error]",
+    hint: "text-[--ui-text-muted]",
+    help: "mt-2 text-[--ui-text-muted]"
   },
   variants: {
     size: {
@@ -904,7 +944,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-[--ui-error]`
       }
     }
   },
@@ -916,12 +956,12 @@ 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-[--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-[--ui-text-dimmed]",
     leadingAvatar: "shrink-0",
     trailing: "absolute inset-y-0 end-0 flex items-center",
-    trailingIcon: "shrink-0 text-gray-400 dark:text-gray-500"
+    trailingIcon: "shrink-0 text-[--ui-text-dimmed]"
   },
   variants: {
     ...buttonGroupVariantWithRoot,
@@ -963,15 +1003,15 @@ const input = (options) => ({
       }
     },
     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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented]",
+      soft: "text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 hover:bg-[--ui-bg-elevated] focus:bg-[--ui-bg-elevated] disabled:bg-[--ui-bg-elevated]/50",
+      subtle: "text-[--ui-text-highlighted] bg-[--ui-bg-elevated] ring ring-inset ring-[--ui-border-accented]",
+      ghost: "text-[--ui-text-highlighted] hover:bg-[--ui-bg-elevated] focus:bg-[--ui-bg-elevated] disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-[--ui-text-highlighted]"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     leading: {
       true: ""
@@ -986,25 +1026,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-[--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-[--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-[--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-[--ui-border-inverted]"
   }, {
-    color: "gray",
+    color: "neutral",
     highlight: true,
-    class: "ring ring-inset ring-gray-900 dark:ring-white"
+    class: "ring ring-inset ring-[--ui-border-inverted]"
   }, {
     leading: true,
     size: "xs",
@@ -1069,17 +1109,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-[--ui-border]",
+      content: "max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--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-[--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-[--ui-text-muted]",
+      label: "font-semibold text-[--ui-text-highlighted]",
+      separator: "-mx-1 my-1 h-px bg-[--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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1087,11 +1127,11 @@ 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-[--ui-radius] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[--ui-border-accented] bg-[--ui-bg-elevated] text-[--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-[--ui-text-dimmed] hover:text-[--ui-text] hover:bg-[--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: "border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
     },
     variants: {
       multiple: {
@@ -1100,7 +1140,7 @@ const inputMenu = (options) => {
           base: ""
         },
         false: {
-          base: "w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          base: "w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         }
       },
       size: {
@@ -1165,23 +1205,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-[--${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-[--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-[--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-[--ui-bg-inverted] text-[--ui-bg]",
+      outline: "bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented]",
+      subtle: "bg-[--ui-bg-elevated] text-[--ui-text] ring ring-inset ring-[--ui-border-accented]"
     },
     size: {
       sm: "h-4 min-w-[16px] text-[10px]",
@@ -1196,11 +1236,11 @@ const kbd = {
 };
 
 const link = (options) => ({
-  base: "focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+  base: "focus-visible:outline-[--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-[--ui-primary]",
+      false: ["text-[--ui-text-muted] hover:text-[--ui-text]", options.theme.transitions && "transition-colors"]
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
@@ -1210,13 +1250,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 z-50 bg-[--ui-bg-elevated]/75",
+    content: "fixed z-50 w-full h-dvh bg-[--ui-bg] divide-y divide-[--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-[--ui-text-highlighted] font-semibold",
+    description: "mt-1 text-[--ui-text-muted] text-sm",
     close: "absolute top-4 right-4"
   },
   variants: {
@@ -1231,7 +1271,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-[--ui-border]"
       }
     }
   }
@@ -1242,7 +1282,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 +1291,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",
+    linkLabelExternalIcon: "size-3 align-top text-[--ui-text-dimmed]",
     childList: "grid grid-cols-2 gap-2 p-2",
     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-[--ui-text-dimmed]",
+    childLinkDescription: "text-sm text-[--ui-text-muted]",
+    separator: "px-2 h-px bg-[--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-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] 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]",
     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-[--ui-border] bg-[--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-[--ui-${color}]`,
+        childLink: `focus-visible:outline-[--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-[--ui-border-inverted]",
+        childLink: "focus-visible:outline-[--ui-border-inverted]"
       }
     },
     highlightColor: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      gray: ""
+      neutral: ""
     },
     variant: {
       pill: "",
@@ -1301,14 +1341,14 @@ const navigationMenu = (options) => ({
     },
     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-[--ui-bg-elevated] text-[--ui-text-highlighted]",
+        childLinkIcon: "text-[--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-[--ui-text-muted]",
+        linkLeadingIcon: "text-[--ui-text-dimmed]",
+        childLink: ["hover:bg-[--ui-bg-elevated]/50 text-[--ui-text] hover:text-[--ui-text-highlighted]", options.theme.transitions && "transition-colors"],
+        childLinkIcon: ["text-[--ui-text-dimmed] group-hover:text-[--ui-text]", options.theme.transitions && "transition-colors"]
       }
     },
     disabled: {
@@ -1339,76 +1379,76 @@ 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-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text]", options.theme.transitions && "transition-colors"]
     }
   }, ...(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-[--ui-${color}]`,
+      linkLeadingIcon: `text-[--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-[--ui-text-highlighted]",
+      linkLeadingIcon: "text-[--ui-text-highlighted]"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: false,
     class: {
-      link: "before:bg-gray-100 dark:before:bg-gray-800"
+      link: "before:bg-[--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-[--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-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted]", options.theme.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-[--ui-text] group-data-[state=open]:text-[--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-[--ui-${color}]`,
+      linkLeadingIcon: `text-[--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-[--ui-text-highlighted]",
+      linkLeadingIcon: "text-[--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-[--ui-${highlightColor}]`
     }
   })), {
-    highlightColor: "gray",
+    highlightColor: "neutral",
     highlight: true,
     active: true,
     class: {
-      link: "after:bg-gray-900 dark:after:bg-white"
+      link: "after:bg-[--ui-bg-inverted]"
     }
   }],
   defaultVariants: {
@@ -1429,17 +1469,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-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--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-[--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-[--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-[--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 +1492,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-[--ui-${color}]`,
+        steps: `text-[--ui-${color}]`
       }])),
-      gray: {
-        indicator: "bg-gray-900 dark:bg-white",
-        steps: "text-white dark:text-gray-900"
+      neutral: {
+        indicator: "bg-[--ui-bg-inverted]",
+        steps: "text-[--ui-bg]"
       }
     },
     size: {
@@ -1495,7 +1535,7 @@ const progress = (options) => ({
         step: "opacity-100"
       },
       first: {
-        step: "opacity-100 text-gray-500 dark:text-gray-400"
+        step: "opacity-100 text-[--ui-text-muted]"
       },
       other: {
         step: "opacity-0"
@@ -1652,24 +1692,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-[--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-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[--ui-bg]",
+    indicator: "flex items-center justify-center size-full rounded-full after:bg-[--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-[--ui-text]",
+    description: "text-[--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-[--ui-${color}]`,
+        indicator: `bg-[--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-[--ui-border-inverted]",
+        indicator: "bg-[--ui-bg-inverted]"
       }
     },
     orientation: {
@@ -1731,7 +1771,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-[--ui-error]"
       }
     }
   },
@@ -1745,17 +1785,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"],
+      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-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",
+      arrow: "fill-[--ui-border]",
+      content: "max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--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-[--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-[--ui-text-muted]",
+      label: "font-semibold text-[--ui-text-highlighted]",
+      separator: "-mx-1 my-1 h-px bg-[--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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1822,7 +1862,7 @@ const selectMenu = (options) => {
     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"
+      input: "placeholder-[--ui-text-dimmed] border-0 border-b border-[--ui-border] focus:outline-none"
     },
     variants: {
       size: {
@@ -1850,7 +1890,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-[--ui-text] flex",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xs",
@@ -1858,8 +1898,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-[--ui-${color}]` }])),
+      neutral: { border: "border-[--ui-border]" }
     },
     orientation: {
       horizontal: {
@@ -1934,25 +1974,25 @@ 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-[--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 z-50 bg-[--ui-bg-elevated]/75",
+    content: "fixed z-50 bg-[--ui-bg] divide-y divide-[--ui-border] sm:ring ring-[--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-[--ui-text-highlighted] font-semibold",
+    description: "mt-1 text-[--ui-text-muted] text-sm",
     close: "absolute top-4 right-4"
   },
   variants: {
@@ -2006,19 +2046,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-[--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-[--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-[--ui-${color}]`,
+        thumb: `ring-[--ui-${color}] focus-visible:outline-[--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-[--ui-bg-inverted]",
+        thumb: "ring-[--ui-border-inverted] focus-visible:outline-[--ui-border-inverted]/50"
       }
     },
     size: {
@@ -2124,23 +2164,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-[--ui-bg] data-[state=unchecked]:bg-[--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-[--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-[--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-[--ui-text]",
+    description: "text-[--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-[--ui-${color}] focus-visible:ring-[--ui-${color}]`,
+        icon: `group-data-[state=checked]:text-[--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-[--ui-bg-inverted] focus-visible:ring-[--ui-border-inverted]",
+        icon: "group-data-[state=checked]:text-[--ui-text-highlighted]"
       }
     },
     size: {
@@ -2192,7 +2232,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-[--ui-error]"
       }
     },
     disabled: {
@@ -2214,7 +2254,7 @@ const tabs = (options) => ({
     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-[--ui-text-muted] hover:data-[state=inactive]:text-[--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 +2264,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-[--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-[--ui-border]",
         indicator: "rounded-full"
       }
     },
@@ -2308,29 +2348,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-[--ui-${color}]`,
+      trigger: `data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--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-[--ui-bg-inverted]",
+      trigger: "data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--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-[--ui-${color}]`,
+      trigger: `data-[state=active]:text-[--ui-${color}] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--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-[--ui-bg-inverted]",
+      trigger: "data-[state=active]:text-[--ui-text-highlighted] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]"
     }
   }],
   defaultVariants: {
@@ -2346,10 +2386,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-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[--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-[--ui-text-highlighted]",
+    description: "text-sm text-[--ui-text-muted]",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xl",
@@ -2360,14 +2400,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-[--ui-${color}]`,
+        icon: `text-[--ui-${color}]`,
+        progress: `bg-[--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-[--ui-border-inverted]",
+        icon: "text-[--ui-text-highlighted]",
+        progress: "bg-[--ui-bg-inverted]"
       }
     },
     multiline: {
@@ -2445,8 +2485,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-[--ui-bg] text-[--ui-text-highlighted] shadow rounded-[--ui-radius] ring ring-[--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-[--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 +2504,7 @@ const theme = {
   button: button,
   buttonGroup: buttonGroup,
   card: card,
+  carousel: carousel,
   checkbox: checkbox,
   chip: chip,
   collapsible: collapsible,
@@ -2528,15 +2569,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 +2601,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 +2618,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 +2633,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,27 +2656,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 } });
     }
-    addPlugin({
-      src: resolve("./runtime/plugins/colors")
-    });
-    addPlugin({
-      src: resolve("./runtime/plugins/modal")
-    });
-    addPlugin({
-      src: resolve("./runtime/plugins/slideover")
-    });
+    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") });
     addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: options.prefix,