@nuxt/ui 3.0.1 → 3.1.0

package/dist/shared/{ui.BCaWD5Ek.mjs → ui.D7lOOabO.mjs}

@@ -54,9 +54,9 @@ const resolveColors = (colors) => {
 const accordion = {
   slots: {
     root: "w-full",
-    item: "border-b border-(--ui-border) last:border-b-0",
+    item: "border-b border-default 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-(--ui-primary) min-w-0",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-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",
@@ -74,7 +74,7 @@ const accordion = {
 
 const alert = (options) => ({
   slots: {
-    root: "relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5",
+    root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
     wrapper: "min-w-0 flex-1 flex flex-col",
     title: "text-sm font-medium",
     description: "text-sm opacity-90",
@@ -115,49 +115,49 @@ const alert = (options) => ({
     color,
     variant: "solid",
     class: {
-      root: `bg-(--ui-${color}) text-(--ui-bg)`
+      root: `bg-${color} text-inverted`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
     class: {
-      root: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
+      root: `text-${color} ring ring-inset ring-${color}/25`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
     class: {
-      root: `bg-(--ui-${color})/10 text-(--ui-${color})`
+      root: `bg-${color}/10 text-${color}`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
     class: {
-      root: `bg-(--ui-${color})/10 text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
+      root: `bg-${color}/10 text-${color} ring ring-inset ring-${color}/25`
     }
   })), {
     color: "neutral",
     variant: "solid",
     class: {
-      root: "text-(--ui-bg) bg-(--ui-bg-inverted)"
+      root: "text-inverted bg-inverted"
     }
   }, {
     color: "neutral",
     variant: "outline",
     class: {
-      root: "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border)"
+      root: "text-highlighted bg-default ring ring-inset ring-default"
     }
   }, {
     color: "neutral",
     variant: "soft",
     class: {
-      root: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50"
+      root: "text-highlighted bg-elevated/50"
     }
   }, {
     color: "neutral",
     variant: "subtle",
     class: {
-      root: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented)"
+      root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
     }
   }],
   defaultVariants: {
@@ -168,10 +168,10 @@ const alert = (options) => ({
 
 const avatar = {
   slots: {
-    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)",
+    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated",
     image: "h-full w-full rounded-[inherit] object-cover",
-    fallback: "font-medium leading-none text-(--ui-text-muted) truncate",
-    icon: "text-(--ui-text-muted) shrink-0"
+    fallback: "font-medium leading-none text-muted truncate",
+    icon: "text-muted shrink-0"
   },
   variants: {
     size: {
@@ -212,7 +212,7 @@ const avatar = {
 const avatarGroup = {
   slots: {
     root: "inline-flex flex-row-reverse justify-end",
-    base: "relative rounded-full ring-(--ui-bg) first:me-0"
+    base: "relative rounded-full ring-bg first:me-0"
   },
   variants: {
     size: {
@@ -308,31 +308,31 @@ const badge = (options) => ({
     },
     size: {
       xs: {
-        base: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]",
+        base: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
         leadingIcon: "size-3",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-3"
       },
       sm: {
-        base: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))]",
+        base: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm",
         leadingIcon: "size-3",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-3"
       },
       md: {
-        base: "text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)]",
+        base: "text-xs px-2 py-1 gap-1 rounded-md",
         leadingIcon: "size-4",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       lg: {
-        base: "text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
+        base: "text-sm px-2 py-1 gap-1.5 rounded-md",
         leadingIcon: "size-5",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       xl: {
-        base: "text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
+        base: "text-base px-2.5 py-1 gap-1.5 rounded-md",
         leadingIcon: "size-6",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-6"
@@ -342,35 +342,35 @@ const badge = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `bg-(--ui-${color}) text-(--ui-bg)`
+    class: `bg-${color} text-inverted`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/50`
+    class: `text-${color} ring ring-inset ring-${color}/50`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `bg-(--ui-${color})/10 text-(--ui-${color})`
+    class: `bg-${color}/10 text-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `bg-(--ui-${color})/10 text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
+    class: `bg-${color}/10 text-${color} ring ring-inset ring-${color}/25`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-(--ui-bg) bg-(--ui-bg-inverted)"
+    class: "text-inverted bg-inverted"
   }, {
     color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg)"
+    class: "ring ring-inset ring-accented text-default bg-default"
   }, {
     color: "neutral",
     variant: "soft",
-    class: "text-(--ui-text) bg-(--ui-bg-elevated)"
+    class: "text-default bg-elevated"
   }, {
     color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated)"
+    class: "ring ring-inset ring-accented text-default bg-elevated"
   }],
   defaultVariants: {
     color: "primary",
@@ -384,21 +384,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-(--ui-primary)",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
     linkLabel: "truncate",
     separator: "flex",
-    separatorIcon: "shrink-0 size-5 text-(--ui-text-muted)"
+    separatorIcon: "shrink-0 size-5 text-muted"
   },
   variants: {
     active: {
       true: {
-        link: "text-(--ui-primary) font-semibold"
+        link: "text-primary font-semibold"
       },
       false: {
-        link: "text-(--ui-text-muted) font-medium"
+        link: "text-muted font-medium"
       }
     },
     disabled: {
@@ -415,14 +415,14 @@ const breadcrumb = (options) => ({
     active: false,
     to: true,
     class: {
-      link: ["hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-default", options.theme.transitions && "transition-colors"]
     }
   }]
 });
 
 const button = (options) => ({
   slots: {
-    base: ["rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["rounded-md font-medium inline-flex items-center 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",
@@ -505,51 +505,51 @@ const button = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    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})`
+    class: `text-inverted bg-${color} hover:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    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})`
+    class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    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`
+    class: `text-${color} bg-${color}/10 hover:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    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})`
+    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "ghost",
-    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`
+    class: `text-${color} hover:bg-${color}/10 focus:outline-none focus-visible:bg-${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-(--ui-${color}) hover:text-(--ui-${color})/75 disabled:text-(--ui-${color}) aria-disabled:text-(--ui-${color}) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
+    class: `text-${color} hover:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 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)"
+    class: "text-inverted bg-inverted hover:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
   }, {
     color: "neutral",
     variant: "outline",
-    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)"
+    class: "ring ring-inset ring-accented text-default bg-default hover:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
   }, {
     color: "neutral",
     variant: "soft",
-    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)"
+    class: "text-default bg-elevated hover:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
   }, {
     color: "neutral",
     variant: "subtle",
-    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)"
+    class: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
   }, {
     color: "neutral",
     variant: "ghost",
-    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"
+    class: "text-default hover:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
   }, {
     color: "neutral",
     variant: "link",
-    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)"
+    class: "text-muted hover:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
   }, {
     size: "xs",
     square: true,
@@ -601,19 +601,19 @@ const calendar = (options) => ({
     gridRow: "grid grid-cols-7",
     gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
     gridBody: "grid",
-    headCell: "rounded-[calc(var(--ui-radius)*1.5)]",
+    headCell: "rounded-md",
     cell: "relative text-center",
-    cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted)", options.theme.transitions && "transition"]
+    cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted", options.theme.transitions && "transition"]
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        headCell: `text-(--ui-${color})`,
-        cellTrigger: `focus-visible:ring-(--ui-${color}) data-[selected]:bg-(--ui-${color}) data-today:not-data-[selected]:text-(--ui-${color}) data-[highlighted]:bg-(--ui-${color})/20 hover:not-data-[selected]:bg-(--ui-${color})/20`
+        headCell: `text-${color}`,
+        cellTrigger: `focus-visible:ring-${color} data-[selected]:bg-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
       }])),
       neutral: {
-        headCell: "text-(--ui-bg-inverted)",
-        cellTrigger: "focus-visible:ring-(--ui-border-inverted) data-[selected]:bg-(--ui-bg-inverted) data-today:not-data-[selected]:text-(--ui-bg-inverted) data-[highlighted]:bg-(--ui-bg-inverted)/20 hover:not-data-[selected]:bg-(--ui-bg-inverted)/10"
+        headCell: "text-highlighted",
+        cellTrigger: "focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-inverted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
       }
     },
     size: {
@@ -656,7 +656,7 @@ const calendar = (options) => ({
 
 const card = {
   slots: {
-    root: "rounded-[calc(var(--ui-radius)*2)]",
+    root: "rounded-lg",
     header: "p-4 sm:px-6",
     body: "p-4 sm:p-6",
     footer: "p-4 sm:px-6"
@@ -664,16 +664,16 @@ const card = {
   variants: {
     variant: {
       solid: {
-        root: "bg-(--ui-bg-inverted) text-(--ui-bg)"
+        root: "bg-inverted text-inverted"
       },
       outline: {
-        root: "bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)"
+        root: "bg-default ring ring-default divide-y divide-default"
       },
       soft: {
-        root: "bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)"
+        root: "bg-elevated/50 divide-y divide-default"
       },
       subtle: {
-        root: "bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)"
+        root: "bg-elevated/50 ring ring-default divide-y divide-default"
       }
     }
   },
@@ -693,26 +693,26 @@ const carousel = (options) => ({
     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"]
+    dot: ["cursor-pointer size-3 bg-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 rtl:-rotate-90",
-        next: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90"
+        prev: "top-4 sm:-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90",
+        next: "bottom-4 sm:-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90"
       },
       horizontal: {
         container: "flex-row -ms-4",
         item: "ps-4",
-        prev: "-start-12 top-1/2 -translate-y-1/2",
-        next: "-end-12 top-1/2 -translate-y-1/2"
+        prev: "start-4 sm:-start-12 top-1/2 -translate-y-1/2",
+        next: "end-4 sm:-end-12 top-1/2 -translate-y-1/2"
       }
     },
     active: {
       true: {
-        dot: "bg-(--ui-border-inverted)"
+        dot: "bg-inverted"
       }
     }
   }
@@ -721,17 +721,46 @@ const carousel = (options) => ({
 const checkbox = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: "shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2",
     container: "flex items-center",
-    wrapper: "ms-2",
+    base: "rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: "flex items-center justify-center size-full text-inverted",
     icon: "shrink-0 size-full",
-    label: "block font-medium text-(--ui-text)",
-    description: "text-(--ui-text-muted)"
+    wrapper: "w-full",
+    label: "block font-medium text-default",
+    description: "text-muted"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-(--ui-${color})`])),
-      neutral: "focus-visible:outline-(--ui-border-inverted)"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        base: `focus-visible:outline-${color}`,
+        indicator: `bg-${color}`
+      }])),
+      neutral: {
+        base: "focus-visible:outline-inverted",
+        indicator: "bg-inverted"
+      }
+    },
+    variant: {
+      list: {
+        root: ""
+      },
+      card: {
+        root: "border border-muted rounded-lg"
+      }
+    },
+    indicator: {
+      start: {
+        root: "flex-row",
+        wrapper: "ms-2"
+      },
+      end: {
+        root: "flex-row-reverse",
+        wrapper: "me-2"
+      },
+      hidden: {
+        base: "sr-only",
+        wrapper: "text-center"
+      }
     },
     size: {
       xs: {
@@ -762,7 +791,7 @@ const checkbox = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
+        label: "after:content-['*'] after:ms-0.5 after:text-error"
       }
     },
     disabled: {
@@ -776,30 +805,100 @@ const checkbox = (options) => ({
       true: ""
     }
   },
-  compoundVariants: [...(options.theme.colors || []).map((color) => ({
-    color,
-    checked: true,
-    class: `ring-2 ring-(--ui-${color}) bg-(--ui-${color})`
-  })), {
-    color: "neutral",
-    checked: true,
-    class: "ring-2 ring-(--ui-border-inverted) bg-(--ui-bg-inverted)"
-  }],
+  compoundVariants: [
+    { size: "xs", variant: "card", class: { root: "p-2.5" } },
+    { size: "sm", variant: "card", class: { root: "p-3" } },
+    { size: "md", variant: "card", class: { root: "p-3.5" } },
+    { size: "lg", variant: "card", class: { root: "p-4" } },
+    { size: "xl", variant: "card", class: { root: "p-4.5" } },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "card",
+      class: {
+        root: `has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "card",
+      class: {
+        root: "has-data-[state=checked]:border-inverted"
+      }
+    },
+    {
+      variant: "card",
+      disabled: true,
+      class: {
+        root: "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
   defaultVariants: {
     size: "md",
-    color: "primary"
+    color: "primary",
+    variant: "list",
+    indicator: "start"
   }
 });
 
+const checkboxGroup = {
+  slots: {
+    root: "relative",
+    fieldset: "flex gap-x-2",
+    legend: "mb-1 block font-medium text-default",
+    item: ""
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        fieldset: "flex-row"
+      },
+      vertical: {
+        fieldset: "flex-col"
+      }
+    },
+    size: {
+      xs: {
+        fieldset: "gap-y-0.5",
+        legend: "text-xs"
+      },
+      sm: {
+        fieldset: "gap-y-0.5",
+        legend: "text-xs"
+      },
+      md: {
+        fieldset: "gap-y-1",
+        legend: "text-sm"
+      },
+      lg: {
+        fieldset: "gap-y-1",
+        legend: "text-sm"
+      },
+      xl: {
+        fieldset: "gap-y-1.5",
+        legend: "text-base"
+      }
+    },
+    required: {
+      true: {
+        legend: "after:content-['*'] after:ms-0.5 after:text-error"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+};
+
 const chip = (options) => ({
   slots: {
     root: "relative inline-flex items-center justify-center shrink-0",
-    base: "rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap"
+    base: "rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-(--ui-${color})`])),
-      neutral: "bg-(--ui-text-muted)"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-${color}`])),
+      neutral: "bg-inverted"
     },
     size: {
       "3xs": "h-[4px] min-w-[4px] text-[4px]",
@@ -860,10 +959,10 @@ const colorPicker = {
   slots: {
     root: "data-[disabled]:opacity-75",
     picker: "flex gap-4",
-    selector: "rounded-[calc(var(--ui-radius)*1.5)]",
-    selectorBackground: "w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]",
+    selector: "rounded-md",
+    selectorBackground: "w-full h-full relative rounded-md",
     selectorThumb: "-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed",
-    track: "w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]",
+    track: "w-[8px] relative rounded-md",
     trackThumb: "absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed"
   },
   variants: {
@@ -898,15 +997,15 @@ const colorPicker = {
 
 const commandPalette = (options) => ({
   slots: {
-    root: "flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-border)",
+    root: "flex flex-col min-h-0 min-w-0 divide-y divide-default",
     input: "[&>input]:h-12",
     close: "",
     content: "relative overflow-hidden flex flex-col",
-    viewport: "relative divide-y divide-(--ui-border) scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
+    viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
     group: "p-1 isolate",
-    empty: "py-6 text-center text-sm text-(--ui-text-muted)",
-    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",
+    empty: "py-6 text-center text-sm text-muted",
+    label: "p-1.5 text-xs font-semibold text-highlighted",
+    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",
     itemLeadingIcon: "shrink-0 size-5",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "2xs",
@@ -914,23 +1013,23 @@ const commandPalette = (options) => ({
     itemLeadingChipSize: "md",
     itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
     itemTrailingIcon: "shrink-0 size-5",
-    itemTrailingHighlightedIcon: "shrink-0 size-5 text-(--ui-text-dimmed) hidden group-data-highlighted:inline-flex",
+    itemTrailingHighlightedIcon: "shrink-0 size-5 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 rtl:space-x-reverse text-(--ui-text-dimmed)",
-    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)"
+    itemLabel: "truncate space-x-1 rtl:space-x-reverse text-dimmed",
+    itemLabelBase: "text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary",
+    itemLabelPrefix: "text-default",
+    itemLabelSuffix: "text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"
   },
   variants: {
     active: {
       true: {
-        item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
-        itemLeadingIcon: "text-(--ui-text)"
+        item: "text-highlighted before:bg-elevated",
+        itemLeadingIcon: "text-default"
       },
       false: {
-        item: ["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: ["text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)", options.theme.transitions && "transition-colors"]
+        item: ["text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-dimmed group-data-highlighted:not-group-data-disabled:text-default", options.theme.transitions && "transition-colors"]
       }
     },
     loading: {
@@ -942,16 +1041,16 @@ const commandPalette = (options) => ({
 });
 
 const container = {
-  base: "max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"
+  base: "w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"
 };
 
 const contextMenu = (options) => ({
   slots: {
-    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]",
+    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin)",
     group: "p-1 isolate",
-    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",
+    label: "w-full flex items-center font-semibold text-highlighted",
+    separator: "-mx-1 my-1 h-px bg-border",
+    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",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -960,7 +1059,7 @@ const contextMenu = (options) => ({
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)"
+    itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
   },
   variants: {
     color: {
@@ -969,12 +1068,12 @@ const contextMenu = (options) => ({
     },
     active: {
       true: {
-        item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
-        itemLeadingIcon: "text-(--ui-text)"
+        item: "text-highlighted before:bg-elevated",
+        itemLeadingIcon: "text-default"
       },
       false: {
-        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"]
+        item: ["text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default", options.theme.transitions && "transition-colors"]
       }
     },
     loading: {
@@ -1034,15 +1133,15 @@ const contextMenu = (options) => ({
     color,
     active: false,
     class: {
-      item: `text-(--ui-${color}) data-highlighted:text-(--ui-${color}) data-highlighted:before:bg-(--ui-${color})/10 data-[state=open]:before:bg-(--ui-${color})/10`,
-      itemLeadingIcon: `text-(--ui-${color})/75 group-data-highlighted:text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
+      item: `text-${color} data-highlighted:text-${color} data-highlighted:before:bg-${color}/10 data-[state=open]:before:bg-${color}/10`,
+      itemLeadingIcon: `text-${color}/75 group-data-highlighted:text-${color} group-data-[state=open]:text-${color}`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     active: true,
     class: {
-      item: `text-(--ui-${color}) before:bg-(--ui-${color})/10`,
-      itemLeadingIcon: `text-(--ui-${color})`
+      item: `text-${color} before:bg-${color}/10`,
+      itemLeadingIcon: `text-${color}`
     }
   }))],
   defaultVariants: {
@@ -1052,13 +1151,13 @@ const contextMenu = (options) => ({
 
 const drawer = (options) => ({
   slots: {
-    overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
-    content: "fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none",
-    handle: ["shrink-0 !bg-(--ui-bg-accented)", options.theme.transitions && "transition-opacity"],
+    overlay: "fixed inset-0 bg-elevated/75",
+    content: "fixed bg-default ring ring-default flex focus:outline-none",
+    handle: ["shrink-0 !bg-accented", options.theme.transitions && "transition-opacity"],
     container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     header: "",
-    title: "text-(--ui-text-highlighted) font-semibold",
-    description: "mt-1 text-(--ui-text-muted) text-sm",
+    title: "text-highlighted font-semibold",
+    description: "mt-1 text-muted text-sm",
     body: "flex-1",
     footer: "flex flex-col gap-1.5"
   },
@@ -1083,7 +1182,7 @@ const drawer = (options) => ({
     },
     inset: {
       true: {
-        content: "rounded-[calc(var(--ui-radius)*2)] after:hidden"
+        content: "rounded-lg after:hidden"
       }
     }
   },
@@ -1109,7 +1208,7 @@ const drawer = (options) => ({
     direction: "top",
     inset: false,
     class: {
-      content: "inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]"
+      content: "inset-x-0 top-0 rounded-b-lg"
     }
   }, {
     direction: "bottom",
@@ -1121,7 +1220,7 @@ const drawer = (options) => ({
     direction: "bottom",
     inset: false,
     class: {
-      content: "inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]"
+      content: "inset-x-0 bottom-0 rounded-t-lg"
     }
   }, {
     direction: "left",
@@ -1133,7 +1232,7 @@ const drawer = (options) => ({
     direction: "left",
     inset: false,
     class: {
-      content: "inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]"
+      content: "inset-y-0 left-0 rounded-r-lg"
     }
   }, {
     direction: "right",
@@ -1145,19 +1244,19 @@ const drawer = (options) => ({
     direction: "right",
     inset: false,
     class: {
-      content: "inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]"
+      content: "inset-y-0 right-0 rounded-l-lg"
     }
   }]
 });
 
 const dropdownMenu = (options) => ({
   slots: {
-    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)",
+    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin)",
+    arrow: "fill-default",
     group: "p-1 isolate",
-    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",
+    label: "w-full flex items-center font-semibold text-highlighted",
+    separator: "-mx-1 my-1 h-px bg-border",
+    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",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -1166,7 +1265,7 @@ const dropdownMenu = (options) => ({
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)"
+    itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
   },
   variants: {
     color: {
@@ -1175,12 +1274,12 @@ const dropdownMenu = (options) => ({
     },
     active: {
       true: {
-        item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
-        itemLeadingIcon: "text-(--ui-text)"
+        item: "text-highlighted before:bg-elevated",
+        itemLeadingIcon: "text-default"
       },
       false: {
-        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"]
+        item: ["text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default", options.theme.transitions && "transition-colors"]
       }
     },
     loading: {
@@ -1240,15 +1339,15 @@ const dropdownMenu = (options) => ({
     color,
     active: false,
     class: {
-      item: `text-(--ui-${color}) data-highlighted:text-(--ui-${color}) data-highlighted:before:bg-(--ui-${color})/10 data-[state=open]:before:bg-(--ui-${color})/10`,
-      itemLeadingIcon: `text-(--ui-${color})/75 group-data-highlighted:text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
+      item: `text-${color} data-highlighted:text-${color} data-highlighted:before:bg-${color}/10 data-[state=open]:before:bg-${color}/10`,
+      itemLeadingIcon: `text-${color}/75 group-data-highlighted:text-${color} group-data-[state=open]:text-${color}`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     active: true,
     class: {
-      item: `text-(--ui-${color}) before:bg-(--ui-${color})/10`,
-      itemLeadingIcon: `text-(--ui-${color})`
+      item: `text-${color} before:bg-${color}/10`,
+      itemLeadingIcon: `text-${color}`
     }
   }))],
   defaultVariants: {
@@ -1265,12 +1364,12 @@ const formField = {
     root: "",
     wrapper: "",
     labelWrapper: "flex content-center items-center justify-between",
-    label: "block font-medium text-(--ui-text)",
+    label: "block font-medium text-default",
     container: "mt-1 relative",
-    description: "text-(--ui-text-muted)",
-    error: "mt-2 text-(--ui-error)",
-    hint: "text-(--ui-text-muted)",
-    help: "mt-2 text-(--ui-text-muted)"
+    description: "text-muted",
+    error: "mt-2 text-error",
+    hint: "text-muted",
+    help: "mt-2 text-muted"
   },
   variants: {
     size: {
@@ -1282,7 +1381,7 @@ const formField = {
     },
     required: {
       true: {
-        label: `after:content-['*'] after:ms-0.5 after:text-(--ui-error)`
+        label: `after:content-['*'] after:ms-0.5 after:text-error`
       }
     }
   },
@@ -1294,13 +1393,13 @@ const formField = {
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
-    base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["w-full rounded-md border-0 placeholder: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-(--ui-text-dimmed)",
+    leadingIcon: "shrink-0 text-dimmed",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
     trailing: "absolute inset-y-0 end-0 flex items-center",
-    trailingIcon: "shrink-0 text-(--ui-text-dimmed)"
+    trailingIcon: "shrink-0 text-dimmed"
   },
   variants: {
     ...buttonGroupVariantWithRoot,
@@ -1347,11 +1446,11 @@ const input = (options) => ({
       }
     },
     variant: {
-      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) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-(--ui-text-highlighted) bg-transparent"
+      outline: "text-highlighted bg-default ring ring-inset ring-accented",
+      soft: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
+      subtle: "text-highlighted bg-elevated ring ring-inset ring-accented",
+      ghost: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-highlighted bg-transparent"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -1370,25 +1469,25 @@ const input = (options) => ({
       true: ""
     },
     type: {
-      file: "file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none"
+      file: "file:me-1.5 file:font-medium file: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-(--ui-${color})`
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
-    class: `ring ring-inset ring-(--ui-${color})`
+    class: `ring ring-inset ring-${color}`
   })), {
     color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
   }, {
     color: "neutral",
     highlight: true,
-    class: "ring ring-inset ring-(--ui-border-inverted)"
+    class: "ring ring-inset ring-inverted"
   }, {
     leading: true,
     size: "xs",
@@ -1453,17 +1552,17 @@ const input = (options) => ({
 const inputMenu = (options) => {
   return defuFn({
     slots: {
-      base: () => ["rounded-[calc(var(--ui-radius)*1.5)]", options.theme.transitions && "transition-colors"],
+      base: () => ["rounded-md", 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-(--ui-border)",
-      content: "max-h-60 w-(--reka-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] pointer-events-auto",
-      viewport: "divide-y divide-(--ui-border) scroll-py-1",
+      arrow: "fill-default",
+      content: "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto",
+      viewport: "divide-y divide-default scroll-py-1",
       group: "p-1 isolate",
-      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"],
+      empty: "py-2 text-center text-sm text-muted",
+      label: "font-semibold text-highlighted",
+      separator: "-mx-1 my-1 h-px bg-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-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1471,9 +1570,9 @@ 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-(--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",
+      tagsItem: "px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75",
       tagsItemText: "truncate",
-      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"],
+      tagsItemDelete: ["inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
       tagsItemDeleteIcon: "",
       tagsInput: ""
     },
@@ -1481,10 +1580,10 @@ const inputMenu = (options) => {
       multiple: {
         true: {
           root: "flex-wrap",
-          tagsInput: "border-0 bg-transparent placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          tagsInput: "border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         },
         false: {
-          base: "w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          base: "w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         }
       },
       size: {
@@ -1549,12 +1648,12 @@ const inputMenu = (options) => {
       color,
       multiple: true,
       variant: ["outline", "subtle"],
-      class: `has-focus-visible:ring-2 has-focus-visible:ring-(--ui-${color})`
+      class: `has-focus-visible:ring-2 has-focus-visible:ring-${color}`
     })), {
       color: "neutral",
       multiple: true,
       variant: ["outline", "subtle"],
-      class: "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-border-inverted)"
+      class: "has-focus-visible:ring-2 has-focus-visible:ring-inverted"
     }]
   }, input(options));
 };
@@ -1564,7 +1663,7 @@ const inputNumber = (options) => {
   return {
     slots: {
       root: "relative inline-flex items-center",
-      base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+      base: ["w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
       increment: "absolute flex items-center",
       decrement: "absolute flex items-center"
     },
@@ -1607,19 +1706,19 @@ const inputNumber = (options) => {
     compoundVariants: [...(options.theme.colors || []).map((color) => ({
       color,
       variant: ["outline", "subtle"],
-      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
+      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
     })), ...(options.theme.colors || []).map((color) => ({
       color,
       highlight: true,
-      class: `ring ring-inset ring-(--ui-${color})`
+      class: `ring ring-inset ring-${color}`
     })), {
       color: "neutral",
       variant: ["outline", "subtle"],
-      class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
+      class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
     }, {
       color: "neutral",
       highlight: true,
-      class: "ring ring-inset ring-(--ui-border-inverted)"
+      class: "ring ring-inset ring-inverted"
     }, {
       orientation: "horizontal",
       size: "xs",
@@ -1670,12 +1769,12 @@ const inputNumber = (options) => {
 };
 
 const kbd = {
-  base: "inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans",
+  base: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans",
   variants: {
     variant: {
-      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)"
+      solid: "bg-inverted text-inverted",
+      outline: "bg-default text-highlighted ring ring-inset ring-accented",
+      subtle: "bg-elevated text-default ring ring-inset ring-accented"
     },
     size: {
       sm: "h-4 min-w-[16px] text-[10px]",
@@ -1690,11 +1789,11 @@ const kbd = {
 };
 
 const link = (options) => ({
-  base: "focus-visible:outline-(--ui-primary)",
+  base: "focus-visible:outline-primary",
   variants: {
     active: {
-      true: "text-(--ui-primary)",
-      false: ["text-(--ui-text-muted) hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
+      true: "text-primary",
+      false: ["text-muted hover:text-default", options.theme.transitions && "transition-colors"]
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
@@ -1704,14 +1803,14 @@ const link = (options) => ({
 
 const modal = {
   slots: {
-    overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
-    content: "fixed bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none",
+    overlay: "fixed inset-0 bg-elevated/75",
+    content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
     header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
     wrapper: "",
     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-(--ui-text-highlighted) font-semibold",
-    description: "mt-1 text-(--ui-text-muted) text-sm",
+    title: "text-highlighted font-semibold",
+    description: "mt-1 text-muted text-sm",
     close: "absolute top-4 end-4"
   },
   variants: {
@@ -1726,7 +1825,7 @@ const modal = {
         content: "inset-0"
       },
       false: {
-        content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)"
+        content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default"
       }
     }
   }
@@ -1736,9 +1835,9 @@ const navigationMenu = (options) => ({
   slots: {
     root: "relative flex gap-1.5 [&>div]:min-w-0",
     list: "isolate min-w-0",
-    label: "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5",
+    label: "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5",
     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-[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",
+    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",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
@@ -1747,31 +1846,31 @@ const navigationMenu = (options) => ({
     linkTrailingBadgeSize: "sm",
     linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     linkLabel: "truncate",
-    linkLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)",
+    linkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
     childList: "",
     childItem: "",
-    childLink: "group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start",
+    childLink: "group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start",
     childLinkWrapper: "flex flex-col items-start",
     childLinkIcon: "size-5 shrink-0",
     childLinkLabel: "font-semibold text-sm relative inline-flex",
-    childLinkLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)",
-    childLinkDescription: "text-sm text-(--ui-text-muted)",
-    separator: "px-2 h-px bg-(--ui-border)",
+    childLinkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
+    childLinkDescription: "text-sm text-muted",
+    separator: "px-2 h-px bg-border",
     viewportWrapper: "absolute top-full left-0 flex w-full",
-    viewport: "relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] 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",
-    indicator: "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
-    arrow: "relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]"
+    viewport: "relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]",
+    content: "absolute top-0 left-0 w-full sm:w-auto",
+    indicator: "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
+    arrow: "relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        link: `focus-visible:before:ring-(--ui-${color})`,
-        childLink: `focus-visible:outline-(--ui-${color})`
+        link: `focus-visible:before:ring-${color}`,
+        childLink: `focus-visible:outline-${color}`
       }])),
       neutral: {
-        link: "focus-visible:before:ring-(--ui-border-inverted)",
-        childLink: "focus-visible:outline-(--ui-border-inverted)"
+        link: "focus-visible:before:ring-inverted",
+        childLink: "focus-visible:outline-inverted"
       }
     },
     highlightColor: {
@@ -1797,25 +1896,23 @@ const navigationMenu = (options) => ({
     },
     contentOrientation: {
       horizontal: {
-        viewport: "",
         viewportWrapper: "justify-center",
         content: "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]"
       },
       vertical: {
-        viewport: "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
-        content: ""
+        viewport: "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)"
       }
     },
     active: {
       true: {
-        childLink: "bg-(--ui-bg-elevated) text-(--ui-text-highlighted)",
-        childLinkIcon: "text-(--ui-text)"
+        childLink: "bg-elevated text-highlighted",
+        childLinkIcon: "text-default"
       },
       false: {
-        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"]
+        link: "text-muted",
+        linkLeadingIcon: "text-dimmed",
+        childLink: ["hover:bg-elevated/50 text-default hover:text-highlighted", options.theme.transitions && "transition-colors"],
+        childLinkIcon: ["text-dimmed group-hover:text-default", options.theme.transitions && "transition-colors"]
       }
     },
     disabled: {
@@ -1864,8 +1961,8 @@ const navigationMenu = (options) => ({
     active: false,
     variant: "pill",
     class: {
-      link: ["hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      linkLeadingIcon: ["group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-highlighted hover:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-default", options.theme.transitions && "transition-colors"]
     }
   }, {
     disabled: false,
@@ -1873,8 +1970,8 @@ const navigationMenu = (options) => ({
     variant: "pill",
     orientation: "horizontal",
     class: {
-      link: "data-[state=open]:text-(--ui-text-highlighted)",
-      linkLeadingIcon: "group-data-[state=open]:text-(--ui-text)"
+      link: "data-[state=open]:text-highlighted",
+      linkLeadingIcon: "group-data-[state=open]:text-default"
     }
   }, {
     disabled: false,
@@ -1882,7 +1979,7 @@ const navigationMenu = (options) => ({
     highlight: true,
     orientation: "horizontal",
     class: {
-      link: "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
+      link: "data-[state=open]:before:bg-elevated/50"
     }
   }, {
     disabled: false,
@@ -1891,45 +1988,45 @@ const navigationMenu = (options) => ({
     active: false,
     orientation: "horizontal",
     class: {
-      link: "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
+      link: "data-[state=open]:before:bg-elevated/50"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "pill",
     active: true,
     class: {
-      link: `text-(--ui-${color})`,
-      linkLeadingIcon: `text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
+      link: `text-${color}`,
+      linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
     }
   })), {
     color: "neutral",
     variant: "pill",
     active: true,
     class: {
-      link: "text-(--ui-text-highlighted)",
-      linkLeadingIcon: "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
+      link: "text-highlighted",
+      linkLeadingIcon: "text-highlighted group-data-[state=open]:text-highlighted"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: false,
     class: {
-      link: "before:bg-(--ui-bg-elevated)"
+      link: "before:bg-elevated"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: true,
     class: {
-      link: ["hover:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "before:transition-colors"]
+      link: ["hover:before:bg-elevated/50", options.theme.transitions && "before:transition-colors"]
     }
   }, {
     disabled: false,
     active: false,
     variant: "link",
     class: {
-      link: ["hover:text-(--ui-text-highlighted)", options.theme.transitions && "transition-colors"],
-      linkLeadingIcon: ["group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-highlighted", options.theme.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-default", options.theme.transitions && "transition-colors"]
     }
   }, {
     disabled: false,
@@ -1937,24 +2034,24 @@ const navigationMenu = (options) => ({
     variant: "link",
     orientation: "horizontal",
     class: {
-      link: "data-[state=open]:text-(--ui-text-highlighted)",
-      linkLeadingIcon: "group-data-[state=open]:text-(--ui-text)"
+      link: "data-[state=open]:text-highlighted",
+      linkLeadingIcon: "group-data-[state=open]:text-default"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     active: true,
     class: {
-      link: `text-(--ui-${color})`,
-      linkLeadingIcon: `text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
+      link: `text-${color}`,
+      linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
     }
   })), {
     color: "neutral",
     variant: "link",
     active: true,
     class: {
-      link: "text-(--ui-text-highlighted)",
-      linkLeadingIcon: "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
+      link: "text-highlighted",
+      linkLeadingIcon: "text-highlighted group-data-[state=open]:text-highlighted"
     }
   }, ...(options.theme.colors || []).map((highlightColor) => ({
     highlightColor,
@@ -1962,7 +2059,7 @@ const navigationMenu = (options) => ({
     level: true,
     active: true,
     class: {
-      link: `after:bg-(--ui-${highlightColor})`
+      link: `after:bg-${highlightColor}`
     }
   })), {
     highlightColor: "neutral",
@@ -1970,13 +2067,13 @@ const navigationMenu = (options) => ({
     level: true,
     active: true,
     class: {
-      link: "after:bg-(--ui-bg-inverted)"
+      link: "after:bg-inverted"
     }
   }, {
     orientation: "vertical",
     collapsed: false,
     class: {
-      childList: "ms-5 border-s border-(--ui-border)",
+      childList: "ms-5 border-s border-default",
       childItem: "ps-1.5 -ms-px"
     }
   }, {
@@ -2010,7 +2107,7 @@ const pagination = {
 const pinInput = (options) => ({
   slots: {
     root: "relative inline-flex items-center gap-1.5",
-    base: ["rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
+    base: ["rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
   },
   variants: {
     size: {
@@ -2031,11 +2128,11 @@ const pinInput = (options) => ({
       }
     },
     variant: {
-      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) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-(--ui-text-highlighted) bg-transparent"
+      outline: "text-highlighted bg-default ring ring-inset ring-accented",
+      soft: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
+      subtle: "text-highlighted bg-elevated ring ring-inset ring-accented",
+      ghost: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-highlighted bg-transparent"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -2048,19 +2145,19 @@ const pinInput = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
-    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
-    class: `ring ring-inset ring-(--ui-${color})`
+    class: `ring ring-inset ring-${color}`
   })), {
     color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
   }, {
     color: "neutral",
     highlight: true,
-    class: "ring ring-inset ring-(--ui-border-inverted)"
+    class: "ring ring-inset ring-inverted"
   }],
   defaultVariants: {
     size: "md",
@@ -2071,17 +2168,17 @@ const pinInput = (options) => ({
 
 const popover = {
   slots: {
-    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 pointer-events-auto",
-    arrow: "fill-(--ui-border)"
+    content: "bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto",
+    arrow: "fill-default"
   }
 };
 
 const progress = (options) => ({
   slots: {
     root: "gap-2",
-    base: "relative overflow-hidden rounded-full bg-(--ui-bg-accented)",
+    base: "relative overflow-hidden rounded-full bg-accented",
     indicator: "rounded-full size-full transition-transform duration-200 ease-out",
-    status: "flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200",
+    status: "flex justify-end text-dimmed transition-[width] duration-200",
     steps: "grid items-end",
     step: "truncate text-end row-start-1 col-start-1 transition-opacity"
   },
@@ -2094,12 +2191,12 @@ const progress = (options) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        indicator: `bg-(--ui-${color})`,
-        steps: `text-(--ui-${color})`
+        indicator: `bg-${color}`,
+        steps: `text-${color}`
       }])),
       neutral: {
-        indicator: "bg-(--ui-bg-inverted)",
-        steps: "text-(--ui-bg)"
+        indicator: "bg-inverted",
+        steps: "text-inverted"
       }
     },
     size: {
@@ -2137,7 +2234,7 @@ const progress = (options) => ({
         step: "opacity-100"
       },
       first: {
-        step: "opacity-100 text-(--ui-text-muted)"
+        step: "opacity-100 text-muted"
       },
       other: {
         step: "opacity-0"
@@ -2293,39 +2390,63 @@ const progress = (options) => ({
 const radioGroup = (options) => ({
   slots: {
     root: "relative",
-    fieldset: "flex",
-    legend: "mb-1 block font-medium text-(--ui-text)",
+    fieldset: "flex gap-x-2",
+    legend: "mb-1 block font-medium text-default",
     item: "flex items-start",
-    base: "rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2",
-    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-(--ui-text)",
-    description: "text-(--ui-text-muted)"
+    base: "rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: "flex items-center justify-center size-full after:bg-default after:rounded-full",
+    wrapper: "w-full",
+    label: "block font-medium text-default",
+    description: "text-muted"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `focus-visible:outline-(--ui-${color})`,
-        indicator: `bg-(--ui-${color})`
+        base: `focus-visible:outline-${color}`,
+        indicator: `bg-${color}`
       }])),
       neutral: {
-        base: "focus-visible:outline-(--ui-border-inverted)",
-        indicator: "bg-(--ui-bg-inverted)"
+        base: "focus-visible:outline-inverted",
+        indicator: "bg-inverted"
+      }
+    },
+    variant: {
+      list: {
+        item: ""
+      },
+      card: {
+        item: "border border-muted rounded-lg"
+      },
+      table: {
+        item: "border border-muted"
       }
     },
     orientation: {
       horizontal: {
-        fieldset: "flex-row",
-        wrapper: "me-2"
+        fieldset: "flex-row"
       },
       vertical: {
         fieldset: "flex-col"
       }
     },
+    indicator: {
+      start: {
+        item: "flex-row",
+        wrapper: "ms-2"
+      },
+      end: {
+        item: "flex-row-reverse",
+        wrapper: "me-2"
+      },
+      hidden: {
+        base: "sr-only",
+        wrapper: "text-center"
+      }
+    },
     size: {
       xs: {
-        fieldset: "gap-0.5",
+        fieldset: "gap-y-0.5",
         legend: "text-xs",
         base: "size-3",
         item: "text-xs",
@@ -2333,7 +2454,7 @@ const radioGroup = (options) => ({
         indicator: "after:size-1"
       },
       sm: {
-        fieldset: "gap-0.5",
+        fieldset: "gap-y-0.5",
         legend: "text-xs",
         base: "size-3.5",
         item: "text-xs",
@@ -2341,7 +2462,7 @@ const radioGroup = (options) => ({
         indicator: "after:size-1"
       },
       md: {
-        fieldset: "gap-1",
+        fieldset: "gap-y-1",
         legend: "text-sm",
         base: "size-4",
         item: "text-sm",
@@ -2349,7 +2470,7 @@ const radioGroup = (options) => ({
         indicator: "after:size-1.5"
       },
       lg: {
-        fieldset: "gap-1",
+        fieldset: "gap-y-1",
         legend: "text-sm",
         base: "size-4.5",
         item: "text-sm",
@@ -2357,7 +2478,7 @@ const radioGroup = (options) => ({
         indicator: "after:size-1.5"
       },
       xl: {
-        fieldset: "gap-1.5",
+        fieldset: "gap-y-1.5",
         legend: "text-base",
         base: "size-5",
         item: "text-base",
@@ -2373,13 +2494,74 @@ const radioGroup = (options) => ({
     },
     required: {
       true: {
-        legend: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
+        legend: "after:content-['*'] after:ms-0.5 after:text-error"
       }
     }
   },
+  compoundVariants: [
+    { size: "xs", variant: ["card", "table"], class: { item: "p-2.5" } },
+    { size: "sm", variant: ["card", "table"], class: { item: "p-3" } },
+    { size: "md", variant: ["card", "table"], class: { item: "p-3.5" } },
+    { size: "lg", variant: ["card", "table"], class: { item: "p-4" } },
+    { size: "xl", variant: ["card", "table"], class: { item: "p-4.5" } },
+    {
+      orientation: "horizontal",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        fieldset: "gap-0 -space-x-px"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
+        fieldset: "gap-0 -space-y-px"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "card",
+      class: {
+        item: `has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "card",
+      class: {
+        item: "has-data-[state=checked]:border-inverted"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "table",
+      class: {
+        item: `has-data-[state=checked]:bg-${color}/10 has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:z-[1]`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "table",
+      class: {
+        item: "has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      variant: ["card", "table"],
+      disabled: true,
+      class: {
+        item: "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
   defaultVariants: {
     size: "md",
-    color: "primary"
+    color: "primary",
+    variant: "list",
+    orientation: "vertical",
+    indicator: "start"
   }
 });
 
@@ -2387,18 +2569,18 @@ const select = (options) => {
   return defuFn({
     slots: {
       root: () => void 0,
-      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"],
+      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 pointer-events-none",
-      placeholder: "truncate text-(--ui-text-dimmed)",
-      arrow: "fill-(--ui-border)",
-      content: "max-h-60 w-(--reka-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] pointer-events-auto",
-      viewport: "divide-y divide-(--ui-border) scroll-py-1",
+      placeholder: "truncate text-dimmed",
+      arrow: "fill-default",
+      content: "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto",
+      viewport: "divide-y divide-default scroll-py-1",
       group: "p-1 isolate",
-      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"],
+      empty: "py-2 text-center text-sm text-muted",
+      label: "font-semibold text-highlighted",
+      separator: "-mx-1 my-1 h-px bg-border",
+      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-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -2461,10 +2643,11 @@ const select = (options) => {
 };
 
 const selectMenu = (options) => {
-  return defu({
+  return defuFn({
     slots: {
-      input: "border-b border-(--ui-border)",
-      focusScope: "flex flex-col min-h-0"
+      input: "border-b border-default",
+      focusScope: "flex flex-col min-h-0",
+      content: (content) => [content, "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"]
     }
   }, select(options));
 };
@@ -2473,7 +2656,7 @@ const separator = (options) => ({
   slots: {
     root: "flex items-center align-center text-center",
     border: "",
-    container: "font-medium text-(--ui-text) flex",
+    container: "font-medium text-default flex",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xs",
@@ -2481,8 +2664,8 @@ const separator = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-(--ui-${color})` }])),
-      neutral: { border: "border-(--ui-border)" }
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-${color}` }])),
+      neutral: { border: "border-default" }
     },
     orientation: {
       horizontal: {
@@ -2564,19 +2747,19 @@ const separator = (options) => ({
 });
 
 const skeleton = {
-  base: "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)"
+  base: "animate-pulse rounded-md bg-elevated"
 };
 
 const slideover = {
   slots: {
-    overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
-    content: "fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--ui-border) sm:shadow-lg flex flex-col focus:outline-none",
+    overlay: "fixed inset-0 bg-elevated/75",
+    content: "fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none",
     header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
     wrapper: "",
     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-(--ui-text-highlighted) font-semibold",
-    description: "mt-1 text-(--ui-text-muted) text-sm",
+    title: "text-highlighted font-semibold",
+    description: "mt-1 text-muted text-sm",
     close: "absolute top-4 end-4"
   },
   variants: {
@@ -2630,19 +2813,19 @@ const slideover = {
 const slider = (options) => ({
   slots: {
     root: "relative flex items-center select-none touch-none",
-    track: "relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow",
+    track: "relative bg-accented overflow-hidden rounded-full grow",
     range: "absolute rounded-full",
-    thumb: "rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
+    thumb: "rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        range: `bg-(--ui-${color})`,
-        thumb: `ring-(--ui-${color}) focus-visible:outline-(--ui-${color})/50`
+        range: `bg-${color}`,
+        thumb: `ring-${color} focus-visible:outline-${color}/50`
       }])),
       neutral: {
-        range: "bg-(--ui-bg-inverted)",
-        thumb: "ring-(--ui-border-inverted) focus-visible:outline-(--ui-border-inverted)/50"
+        range: "bg-inverted",
+        thumb: "ring-inverted focus-visible:outline-inverted/50"
       }
     },
     size: {
@@ -2751,13 +2934,13 @@ const stepper = (options) => ({
     header: "flex",
     item: "group text-center relative w-full",
     container: "relative",
-    trigger: "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-(--ui-bg) group-data-[state=active]:text-(--ui-bg) text-(--ui-text-muted) bg-(--ui-bg-elevated) focus-visible:outline-2 focus-visible:outline-offset-2",
+    trigger: "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2",
     indicator: "flex items-center justify-center size-full",
     icon: "shrink-0",
-    separator: "absolute rounded-full group-data-[disabled]:opacity-75 bg-(--ui-border-accented)",
+    separator: "absolute rounded-full group-data-[disabled]:opacity-75 bg-accented",
     wrapper: "",
-    title: "font-medium text-(--ui-text)",
-    description: "text-(--ui-text-muted) text-wrap",
+    title: "font-medium text-default",
+    description: "text-muted text-wrap",
     content: "size-full"
   },
   variants: {
@@ -2813,12 +2996,12 @@ const stepper = (options) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        trigger: `group-data-[state=completed]:bg-(--ui-${color}) group-data-[state=active]:bg-(--ui-${color}) focus-visible:outline-(--ui-${color})`,
-        separator: `group-data-[state=completed]:bg-(--ui-${color})`
+        trigger: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color} focus-visible:outline-${color}`,
+        separator: `group-data-[state=completed]:bg-${color}`
       }])),
       neutral: {
-        trigger: `group-data-[state=completed]:bg-(--ui-bg-inverted) group-data-[state=active]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)`,
-        separator: `group-data-[state=completed]:bg-(--ui-bg-inverted)`
+        trigger: `group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted`,
+        separator: `group-data-[state=completed]:bg-inverted`
       }
     }
   },
@@ -2872,23 +3055,23 @@ const stepper = (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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented)", options.theme.transitions && "transition-colors duration-200"],
+    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented", options.theme.transitions && "transition-[background] duration-200"],
     container: "flex items-center",
-    thumb: "group pointer-events-none rounded-full bg-(--ui-bg) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-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"],
+    thumb: "group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
+    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
     wrapper: "ms-2",
-    label: "block font-medium text-(--ui-text)",
-    description: "text-(--ui-text-muted)"
+    label: "block font-medium text-default",
+    description: "text-muted"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `data-[state=checked]:bg-(--ui-${color}) focus-visible:outline-(--ui-${color})`,
-        icon: `group-data-[state=checked]:text-(--ui-${color})`
+        base: `data-[state=checked]:bg-${color} focus-visible:outline-${color}`,
+        icon: `group-data-[state=checked]:text-${color}`
       }])),
       neutral: {
-        base: "data-[state=checked]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)",
-        icon: "group-data-[state=checked]:text-(--ui-text-highlighted)"
+        base: "data-[state=checked]:bg-inverted focus-visible:outline-inverted",
+        icon: "group-data-[state=checked]:text-highlighted"
       }
     },
     size: {
@@ -2940,7 +3123,7 @@ const _switch = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
+        label: "after:content-['*'] after:ms-0.5 after:text-error"
       }
     },
     disabled: {
@@ -2963,23 +3146,23 @@ const table = (options) => ({
     base: "min-w-full overflow-clip",
     caption: "sr-only",
     thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)",
-    tbody: "divide-y divide-(--ui-border) [&>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)",
-    tr: "data-[selected=true]:bg-(--ui-bg-elevated)/50",
-    th: "px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
-    td: "p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    empty: "py-6 text-center text-sm text-(--ui-text-muted)",
+    tbody: "divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
+    tr: "data-[selected=true]:bg-elevated/50",
+    th: "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
+    td: "p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+    empty: "py-6 text-center text-sm text-muted",
     loading: "py-6 text-center"
   },
   variants: {
     pinned: {
       true: {
-        th: "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
-        td: "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+        th: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
+        td: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
       }
     },
     sticky: {
       true: {
-        thead: "sticky top-0 inset-x-0 bg-(--ui-bg)/75 z-[1] backdrop-blur"
+        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
       }
     },
     loading: {
@@ -3002,13 +3185,13 @@ const table = (options) => ({
     loading: true,
     loadingColor,
     class: {
-      thead: `after:bg-(--ui-${loadingColor})`
+      thead: `after:bg-${loadingColor}`
     }
   })), {
     loading: true,
     loadingColor: "neutral",
     class: {
-      thead: "after:bg-(--ui-bg-inverted)"
+      thead: "after:bg-inverted"
     }
   }, {
     loading: true,
@@ -3046,7 +3229,7 @@ const tabs = (options) => ({
     root: "flex items-center gap-2",
     list: "relative flex p-1 group",
     indicator: "absolute transition-[translate,width] duration-200",
-    trigger: ["group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden", options.theme.transitions && "transition-colors"],
+    trigger: ["group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     content: "focus:outline-none w-full",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -3060,12 +3243,12 @@ const tabs = (options) => ({
     },
     variant: {
       pill: {
-        list: "bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)]",
+        list: "bg-elevated rounded-lg",
         trigger: "flex-1 w-full",
-        indicator: "rounded-[calc(var(--ui-radius)*1.5)] shadow-xs"
+        indicator: "rounded-md shadow-xs"
       },
       link: {
-        list: "border-(--ui-border)",
+        list: "border-default",
         indicator: "rounded-full"
       }
     },
@@ -3140,29 +3323,29 @@ const tabs = (options) => ({
     color,
     variant: "pill",
     class: {
-      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})`
+      indicator: `bg-${color}`,
+      trigger: `data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
     }
   })), {
     color: "neutral",
     variant: "pill",
     class: {
-      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)"
+      indicator: "bg-inverted",
+      trigger: "data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     class: {
-      indicator: `bg-(--ui-${color})`,
-      trigger: `data-[state=active]:text-(--ui-${color}) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
+      indicator: `bg-${color}`,
+      trigger: `data-[state=active]:text-${color} focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
     }
   })), {
     color: "neutral",
     variant: "link",
     class: {
-      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)"
+      indicator: "bg-inverted",
+      trigger: "data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
     }
   }],
   defaultVariants: {
@@ -3173,15 +3356,49 @@ const tabs = (options) => ({
 });
 
 const textarea = (options) => {
-  return input(options);
+  return defu({
+    slots: {
+      leading: "absolute start-0 flex items-start",
+      trailing: "absolute end-0 flex items-start"
+    },
+    variants: {
+      autoresize: {
+        true: {
+          base: "resize-none"
+        }
+      },
+      size: {
+        xs: {
+          leading: "ps-2 inset-y-1",
+          trailing: "pe-2 inset-y-1"
+        },
+        sm: {
+          leading: "ps-2.5 inset-y-1.5",
+          trailing: "pe-2.5 inset-y-1.5"
+        },
+        md: {
+          leading: "ps-2.5 inset-y-1.5",
+          trailing: "pe-2.5 inset-y-1.5"
+        },
+        lg: {
+          leading: "ps-3 inset-y-2",
+          trailing: "pe-3 inset-y-2"
+        },
+        xl: {
+          leading: "ps-3 inset-y-2",
+          trailing: "pe-3 inset-y-2"
+        }
+      }
+    }
+  }, input(options));
 };
 
 const toast = (options) => ({
   slots: {
-    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",
+    root: "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",
     wrapper: "w-0 flex-1 flex flex-col",
-    title: "text-sm font-medium text-(--ui-text-highlighted)",
-    description: "text-sm text-(--ui-text-muted)",
+    title: "text-sm font-medium text-highlighted",
+    description: "text-sm text-muted",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xl",
@@ -3192,14 +3409,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-(--ui-${color})`,
-        icon: `text-(--ui-${color})`,
-        progress: `bg-(--ui-${color})`
+        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`,
+        icon: `text-${color}`,
+        progress: `bg-${color}`
       }])),
       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)"
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted",
+        icon: "text-highlighted",
+        progress: "bg-inverted"
       }
     },
     orientation: {
@@ -3282,8 +3499,8 @@ const toaster = {
 
 const tooltip = {
   slots: {
-    content: "flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm 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] pointer-events-auto",
-    arrow: "fill-(--ui-border)",
+    content: "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default 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] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
+    arrow: "fill-default",
     text: "truncate",
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:me-0.5`,
     kbdsSize: "sm"
@@ -3294,9 +3511,9 @@ const tree = (options) => ({
   slots: {
     root: "relative isolate",
     item: "",
-    listWithChildren: "ms-4.5 border-s border-(--ui-border)",
+    listWithChildren: "ms-4.5 border-s border-default",
     itemWithChildren: "ps-1.5 -ms-px",
-    link: "relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    link: "relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
     linkLeadingIcon: "shrink-0",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
@@ -3305,10 +3522,10 @@ const tree = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        link: `focus-visible:before:ring-(--ui-${color})`
+        link: `focus-visible:before:ring-${color}`
       }])),
       neutral: {
-        link: "focus-visible:before:ring-(--ui-border-inverted)"
+        link: "focus-visible:before:ring-inverted"
       }
     },
     size: {
@@ -3340,10 +3557,10 @@ const tree = (options) => ({
     },
     selected: {
       true: {
-        link: "before:bg-(--ui-bg-elevated)"
+        link: "before:bg-elevated"
       },
       false: {
-        link: ["hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"]
+        link: ["hover:not-disabled:text-highlighted hover:not-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"]
       }
     },
     disabled: {
@@ -3356,13 +3573,13 @@ const tree = (options) => ({
     color,
     selected: true,
     class: {
-      link: `text-(--ui-${color})`
+      link: `text-${color}`
     }
   })), {
     color: "neutral",
     selected: true,
     class: {
-      link: "text-(--ui-text-highlighted)"
+      link: "text-highlighted"
     }
   }],
   defaultVariants: {
@@ -3385,6 +3602,7 @@ const theme = {
   card: card,
   carousel: carousel,
   checkbox: checkbox,
+  checkboxGroup: checkboxGroup,
   chip: chip,
   collapsible: collapsible,
   colorPicker: colorPicker,
@@ -3475,7 +3693,48 @@ function getTemplates(options, uiConfig) {
   --color-old-neutral-800: ${colors.neutral[800]};
   --color-old-neutral-900: ${colors.neutral[900]};
   --color-old-neutral-950: ${colors.neutral[950]};
-  ${[...(options.theme?.colors || []).filter((color) => !colors[color]), "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
+  ${[...(options.theme?.colors || []).filter((color) => !colors[color]), "neutral"].map((color) => [
+      color !== "neutral" && `--color-${color}: var(--ui-${color});`,
+      ...[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`)
+    ].filter(Boolean).join("\n	")).join("\n	")}
+  --radius-xs: calc(var(--ui-radius) * 0.5);
+  --radius-sm: var(--ui-radius);
+  --radius-md: calc(var(--ui-radius) * 1.5);
+  --radius-lg: calc(var(--ui-radius) * 2);
+  --radius-xl: calc(var(--ui-radius) * 3);
+  --radius-2xl: calc(var(--ui-radius) * 4);
+  --radius-3xl: calc(var(--ui-radius) * 6);
+  --text-color-dimmed: var(--ui-text-dimmed);
+  --text-color-muted: var(--ui-text-muted);
+  --text-color-toned: var(--ui-text-toned);
+  --text-color-default: var(--ui-text);
+  --text-color-highlighted: var(--ui-text-highlighted);
+  --text-color-inverted: var(--ui-text-inverted);
+  --background-color-default: var(--ui-bg);
+  --background-color-muted: var(--ui-bg-muted);
+  --background-color-elevated: var(--ui-bg-elevated);
+  --background-color-accented: var(--ui-bg-accented);
+  --background-color-inverted: var(--ui-bg-inverted);
+  --background-color-border: var(--ui-border);
+  --border-color-default: var(--ui-border);
+  --border-color-muted: var(--ui-border-muted);
+  --border-color-accented: var(--ui-border-accented);
+  --border-color-inverted: var(--ui-border-inverted);
+  --ring-color-default: var(--ui-border);
+  --ring-color-muted: var(--ui-border-muted);
+  --ring-color-accented: var(--ui-border-accented);
+  --ring-color-inverted: var(--ui-border-inverted);
+  --ring-color-bg: var(--ui-bg);
+  --divide-color-default: var(--ui-border);
+  --divide-color-muted: var(--ui-border-muted);
+  --divide-color-accented: var(--ui-border-accented);
+  --divide-color-inverted: var(--ui-border-inverted);
+  --outline-color-default: var(--ui-border);
+  --outline-color-inverted: var(--ui-border-inverted);
+  --stroke-default: var(--ui-border);
+  --stroke-inverted: var(--ui-border-inverted);
+  --fill-default: var(--ui-border);
+  --fill-inverted: var(--ui-border-inverted);
 }
 `
   });
@@ -3498,7 +3757,7 @@ type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent'
 
 type AppConfigUI = {
   colors?: {
-    ${options.theme?.colors?.map((color) => `${color}?: Color`).join("\n		")}
+    ${options.theme?.colors?.map((color) => `'${color}'?: Color`).join("\n		")}
     neutral?: NeutralColor
   }
   icons?: Partial<typeof icons>