@nuxt/ui 3.0.2 → 3.1.1

package/.nuxt/ui/dropdown-menu.ts

@@ -18,12 +18,12 @@ const size = [
 
 export default {
   "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": "",
@@ -32,7 +32,7 @@ export default {
     "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": {
@@ -46,16 +46,16 @@ export default {
     },
     "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",
+          "text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50",
           "transition-colors before:transition-colors"
         ],
         "itemLeadingIcon": [
-          "text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)",
+          "text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default",
           "transition-colors"
         ]
       }
@@ -118,96 +118,96 @@ export default {
       "color": "primary" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10",
-        "itemLeadingIcon": "text-(--ui-primary)/75 group-data-highlighted:text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)"
+        "item": "text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10",
+        "itemLeadingIcon": "text-primary/75 group-data-highlighted:text-primary group-data-[state=open]:text-primary"
       }
     },
     {
       "color": "secondary" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-(--ui-secondary) data-highlighted:text-(--ui-secondary) data-highlighted:before:bg-(--ui-secondary)/10 data-[state=open]:before:bg-(--ui-secondary)/10",
-        "itemLeadingIcon": "text-(--ui-secondary)/75 group-data-highlighted:text-(--ui-secondary) group-data-[state=open]:text-(--ui-secondary)"
+        "item": "text-secondary data-highlighted:text-secondary data-highlighted:before:bg-secondary/10 data-[state=open]:before:bg-secondary/10",
+        "itemLeadingIcon": "text-secondary/75 group-data-highlighted:text-secondary group-data-[state=open]:text-secondary"
       }
     },
     {
       "color": "success" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-(--ui-success) data-highlighted:text-(--ui-success) data-highlighted:before:bg-(--ui-success)/10 data-[state=open]:before:bg-(--ui-success)/10",
-        "itemLeadingIcon": "text-(--ui-success)/75 group-data-highlighted:text-(--ui-success) group-data-[state=open]:text-(--ui-success)"
+        "item": "text-success data-highlighted:text-success data-highlighted:before:bg-success/10 data-[state=open]:before:bg-success/10",
+        "itemLeadingIcon": "text-success/75 group-data-highlighted:text-success group-data-[state=open]:text-success"
       }
     },
     {
       "color": "info" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-(--ui-info) data-highlighted:text-(--ui-info) data-highlighted:before:bg-(--ui-info)/10 data-[state=open]:before:bg-(--ui-info)/10",
-        "itemLeadingIcon": "text-(--ui-info)/75 group-data-highlighted:text-(--ui-info) group-data-[state=open]:text-(--ui-info)"
+        "item": "text-info data-highlighted:text-info data-highlighted:before:bg-info/10 data-[state=open]:before:bg-info/10",
+        "itemLeadingIcon": "text-info/75 group-data-highlighted:text-info group-data-[state=open]:text-info"
       }
     },
     {
       "color": "warning" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-(--ui-warning) data-highlighted:text-(--ui-warning) data-highlighted:before:bg-(--ui-warning)/10 data-[state=open]:before:bg-(--ui-warning)/10",
-        "itemLeadingIcon": "text-(--ui-warning)/75 group-data-highlighted:text-(--ui-warning) group-data-[state=open]:text-(--ui-warning)"
+        "item": "text-warning data-highlighted:text-warning data-highlighted:before:bg-warning/10 data-[state=open]:before:bg-warning/10",
+        "itemLeadingIcon": "text-warning/75 group-data-highlighted:text-warning group-data-[state=open]:text-warning"
       }
     },
     {
       "color": "error" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10",
-        "itemLeadingIcon": "text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)"
+        "item": "text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10",
+        "itemLeadingIcon": "text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"
       }
     },
     {
       "color": "primary" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-(--ui-primary) before:bg-(--ui-primary)/10",
-        "itemLeadingIcon": "text-(--ui-primary)"
+        "item": "text-primary before:bg-primary/10",
+        "itemLeadingIcon": "text-primary"
       }
     },
     {
       "color": "secondary" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-(--ui-secondary) before:bg-(--ui-secondary)/10",
-        "itemLeadingIcon": "text-(--ui-secondary)"
+        "item": "text-secondary before:bg-secondary/10",
+        "itemLeadingIcon": "text-secondary"
       }
     },
     {
       "color": "success" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-(--ui-success) before:bg-(--ui-success)/10",
-        "itemLeadingIcon": "text-(--ui-success)"
+        "item": "text-success before:bg-success/10",
+        "itemLeadingIcon": "text-success"
       }
     },
     {
       "color": "info" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-(--ui-info) before:bg-(--ui-info)/10",
-        "itemLeadingIcon": "text-(--ui-info)"
+        "item": "text-info before:bg-info/10",
+        "itemLeadingIcon": "text-info"
       }
     },
     {
       "color": "warning" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-(--ui-warning) before:bg-(--ui-warning)/10",
-        "itemLeadingIcon": "text-(--ui-warning)"
+        "item": "text-warning before:bg-warning/10",
+        "itemLeadingIcon": "text-warning"
       }
     },
     {
       "color": "error" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-(--ui-error) before:bg-(--ui-error)/10",
-        "itemLeadingIcon": "text-(--ui-error)"
+        "item": "text-error before:bg-error/10",
+        "itemLeadingIcon": "text-error"
       }
     }
   ],

package/.nuxt/ui/form-field.ts

@@ -11,12 +11,12 @@ export default {
     "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": {
@@ -38,7 +38,7 @@ export default {
     },
     "required": {
       "true": {
-        "label": "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
+        "label": "after:content-['*'] after:ms-0.5 after:text-error"
       }
     }
   },

package/.nuxt/ui/index.ts

@@ -10,6 +10,7 @@ export { default as calendar } from './calendar'
 export { default as card } from './card'
 export { default as carousel } from './carousel'
 export { default as checkbox } from './checkbox'
+export { default as checkboxGroup } from './checkbox-group'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as colorPicker } from './color-picker'

package/.nuxt/ui/input-menu.ts

@@ -37,28 +37,28 @@ export default {
   "slots": {
     "root": "relative inline-flex items-center",
     "base": [
-      "rounded-[calc(var(--ui-radius)*1.5)]",
+      "rounded-md",
       "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": "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
-    "trailingIcon": "shrink-0 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",
+    "trailingIcon": "shrink-0 text-dimmed",
+    "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)",
+    "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-[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",
+      "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",
       "transition-colors before:transition-colors"
     ],
     "itemLeadingIcon": [
-      "shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)",
+      "shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default",
       "transition-colors"
     ],
     "itemLeadingAvatar": "shrink-0",
@@ -68,10 +68,10 @@ export default {
     "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",
+      "inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none",
       "transition-colors"
     ],
     "tagsItemDeleteIcon": "",
@@ -176,11 +176,11 @@ export default {
       }
     },
     "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": {
       "primary": "",
@@ -204,15 +204,15 @@ export default {
       "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"
     },
     "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"
       }
     }
   },
@@ -224,7 +224,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-primary)"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
@@ -233,7 +233,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-secondary)"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
@@ -242,7 +242,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-success)"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-success"
     },
     {
       "color": "info" as typeof color[number],
@@ -251,7 +251,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-info)"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-info"
     },
     {
       "color": "warning" as typeof color[number],
@@ -260,7 +260,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-warning)"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-warning"
     },
     {
       "color": "error" as typeof color[number],
@@ -269,7 +269,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-error)"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-error"
     },
     {
       "color": "neutral" as typeof color[number],
@@ -278,7 +278,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-border-inverted)"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-inverted"
     },
     {
       "color": "primary" as typeof color[number],
@@ -286,7 +286,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
@@ -294,7 +294,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
@@ -302,7 +302,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success"
     },
     {
       "color": "info" as typeof color[number],
@@ -310,7 +310,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info"
     },
     {
       "color": "warning" as typeof color[number],
@@ -318,7 +318,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning"
     },
     {
       "color": "error" as typeof color[number],
@@ -326,37 +326,37 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error"
     },
     {
       "color": "primary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-primary)"
+      "class": "ring ring-inset ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-secondary)"
+      "class": "ring ring-inset ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-success)"
+      "class": "ring ring-inset ring-success"
     },
     {
       "color": "info" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-info)"
+      "class": "ring ring-inset ring-info"
     },
     {
       "color": "warning" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-warning)"
+      "class": "ring ring-inset ring-warning"
     },
     {
       "color": "error" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-error)"
+      "class": "ring ring-inset ring-error"
     },
     {
       "color": "neutral" as typeof color[number],
@@ -364,12 +364,12 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "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" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-border-inverted)"
+      "class": "ring ring-inset ring-inverted"
     },
     {
       "leading": true,

package/.nuxt/ui/input-number.ts

@@ -33,7 +33,7 @@ export default {
   "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",
+      "w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ],
     "increment": "absolute flex items-center",
@@ -57,11 +57,11 @@ export default {
       "xl": "px-3 py-2 text-base gap-2"
     },
     "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"
     },
     "disabled": {
       "true": {
@@ -91,7 +91,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
@@ -99,7 +99,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
@@ -107,7 +107,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success"
     },
     {
       "color": "info" as typeof color[number],
@@ -115,7 +115,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info"
     },
     {
       "color": "warning" as typeof color[number],
@@ -123,7 +123,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning"
     },
     {
       "color": "error" as typeof color[number],
@@ -131,37 +131,37 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error"
     },
     {
       "color": "primary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-primary)"
+      "class": "ring ring-inset ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-secondary)"
+      "class": "ring ring-inset ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-success)"
+      "class": "ring ring-inset ring-success"
     },
     {
       "color": "info" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-info)"
+      "class": "ring ring-inset ring-info"
     },
     {
       "color": "warning" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-warning)"
+      "class": "ring ring-inset ring-warning"
     },
     {
       "color": "error" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-error)"
+      "class": "ring ring-inset ring-error"
     },
     {
       "color": "neutral" as typeof color[number],
@@ -169,12 +169,12 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "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" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-border-inverted)"
+      "class": "ring ring-inset ring-inverted"
     },
     {
       "orientation": "horizontal" as typeof orientation[number],