@nuxt/ui 3.0.2 → 3.1.1

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

@@ -36,30 +36,33 @@ const type = [
 export default {
   "slots": {
     "base": [
-      "relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "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",
     "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",
+      "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"
+    ],
+    "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 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 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",
@@ -69,7 +72,7 @@ export default {
     "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
     "itemTrailingIcon": "shrink-0",
     "itemLabel": "truncate",
-    "input": "border-b border-(--ui-border)",
+    "input": "border-b border-default",
     "focusScope": "flex flex-col min-h-0"
   },
   "variants": {
@@ -155,11 +158,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": "",
@@ -183,7 +186,7 @@ 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"
     }
   },
   "compoundVariants": [
@@ -193,7 +196,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],
@@ -201,7 +204,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],
@@ -209,7 +212,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],
@@ -217,7 +220,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],
@@ -225,7 +228,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],
@@ -233,37 +236,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],
@@ -271,12 +274,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/select.ts

@@ -36,30 +36,30 @@ const type = [
 export default {
   "slots": {
     "base": [
-      "relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "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",
     "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)",
+    "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-[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 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",
@@ -153,11 +153,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": "",
@@ -181,7 +181,7 @@ 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"
     }
   },
   "compoundVariants": [
@@ -191,7 +191,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],
@@ -199,7 +199,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],
@@ -207,7 +207,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],
@@ -215,7 +215,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],
@@ -223,7 +223,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],
@@ -231,37 +231,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],
@@ -269,12 +269,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/separator.ts

@@ -31,7 +31,7 @@ export default {
   "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",
@@ -40,25 +40,25 @@ export default {
   "variants": {
     "color": {
       "primary": {
-        "border": "border-(--ui-primary)"
+        "border": "border-primary"
       },
       "secondary": {
-        "border": "border-(--ui-secondary)"
+        "border": "border-secondary"
       },
       "success": {
-        "border": "border-(--ui-success)"
+        "border": "border-success"
       },
       "info": {
-        "border": "border-(--ui-info)"
+        "border": "border-info"
       },
       "warning": {
-        "border": "border-(--ui-warning)"
+        "border": "border-warning"
       },
       "error": {
-        "border": "border-(--ui-error)"
+        "border": "border-error"
       },
       "neutral": {
-        "border": "border-(--ui-border)"
+        "border": "border-default"
       }
     },
     "orientation": {

package/.nuxt/ui/skeleton.ts

@@ -1,3 +1,3 @@
 export default {
-  "base": "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)"
+  "base": "animate-pulse rounded-md bg-elevated"
 }

package/.nuxt/ui/slideover.ts

@@ -7,14 +7,14 @@ const side = [
 
 export default {
   "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": {

package/.nuxt/ui/slider.ts

@@ -24,39 +24,39 @@ const orientation = [
 export default {
   "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": {
       "primary": {
-        "range": "bg-(--ui-primary)",
-        "thumb": "ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50"
+        "range": "bg-primary",
+        "thumb": "ring-primary focus-visible:outline-primary/50"
       },
       "secondary": {
-        "range": "bg-(--ui-secondary)",
-        "thumb": "ring-(--ui-secondary) focus-visible:outline-(--ui-secondary)/50"
+        "range": "bg-secondary",
+        "thumb": "ring-secondary focus-visible:outline-secondary/50"
       },
       "success": {
-        "range": "bg-(--ui-success)",
-        "thumb": "ring-(--ui-success) focus-visible:outline-(--ui-success)/50"
+        "range": "bg-success",
+        "thumb": "ring-success focus-visible:outline-success/50"
       },
       "info": {
-        "range": "bg-(--ui-info)",
-        "thumb": "ring-(--ui-info) focus-visible:outline-(--ui-info)/50"
+        "range": "bg-info",
+        "thumb": "ring-info focus-visible:outline-info/50"
       },
       "warning": {
-        "range": "bg-(--ui-warning)",
-        "thumb": "ring-(--ui-warning) focus-visible:outline-(--ui-warning)/50"
+        "range": "bg-warning",
+        "thumb": "ring-warning focus-visible:outline-warning/50"
       },
       "error": {
-        "range": "bg-(--ui-error)",
-        "thumb": "ring-(--ui-error) focus-visible:outline-(--ui-error)/50"
+        "range": "bg-error",
+        "thumb": "ring-error focus-visible:outline-error/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": {

package/.nuxt/ui/stepper.ts

@@ -27,13 +27,13 @@ export default {
     "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": {
@@ -89,32 +89,32 @@ export default {
     },
     "color": {
       "primary": {
-        "trigger": "group-data-[state=completed]:bg-(--ui-primary) group-data-[state=active]:bg-(--ui-primary) focus-visible:outline-(--ui-primary)",
-        "separator": "group-data-[state=completed]:bg-(--ui-primary)"
+        "trigger": "group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary",
+        "separator": "group-data-[state=completed]:bg-primary"
       },
       "secondary": {
-        "trigger": "group-data-[state=completed]:bg-(--ui-secondary) group-data-[state=active]:bg-(--ui-secondary) focus-visible:outline-(--ui-secondary)",
-        "separator": "group-data-[state=completed]:bg-(--ui-secondary)"
+        "trigger": "group-data-[state=completed]:bg-secondary group-data-[state=active]:bg-secondary focus-visible:outline-secondary",
+        "separator": "group-data-[state=completed]:bg-secondary"
       },
       "success": {
-        "trigger": "group-data-[state=completed]:bg-(--ui-success) group-data-[state=active]:bg-(--ui-success) focus-visible:outline-(--ui-success)",
-        "separator": "group-data-[state=completed]:bg-(--ui-success)"
+        "trigger": "group-data-[state=completed]:bg-success group-data-[state=active]:bg-success focus-visible:outline-success",
+        "separator": "group-data-[state=completed]:bg-success"
       },
       "info": {
-        "trigger": "group-data-[state=completed]:bg-(--ui-info) group-data-[state=active]:bg-(--ui-info) focus-visible:outline-(--ui-info)",
-        "separator": "group-data-[state=completed]:bg-(--ui-info)"
+        "trigger": "group-data-[state=completed]:bg-info group-data-[state=active]:bg-info focus-visible:outline-info",
+        "separator": "group-data-[state=completed]:bg-info"
       },
       "warning": {
-        "trigger": "group-data-[state=completed]:bg-(--ui-warning) group-data-[state=active]:bg-(--ui-warning) focus-visible:outline-(--ui-warning)",
-        "separator": "group-data-[state=completed]:bg-(--ui-warning)"
+        "trigger": "group-data-[state=completed]:bg-warning group-data-[state=active]:bg-warning focus-visible:outline-warning",
+        "separator": "group-data-[state=completed]:bg-warning"
       },
       "error": {
-        "trigger": "group-data-[state=completed]:bg-(--ui-error) group-data-[state=active]:bg-(--ui-error) focus-visible:outline-(--ui-error)",
-        "separator": "group-data-[state=completed]:bg-(--ui-error)"
+        "trigger": "group-data-[state=completed]:bg-error group-data-[state=active]:bg-error focus-visible:outline-error",
+        "separator": "group-data-[state=completed]:bg-error"
       },
       "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"
       }
     }
   },

package/.nuxt/ui/switch.ts

@@ -20,48 +20,48 @@ export default {
   "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)",
+      "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",
       "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",
+    "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-(--ui-text-dimmed) opacity-0 size-10/12",
+      "absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12",
       "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": {
       "primary": {
-        "base": "data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--ui-primary)",
-        "icon": "group-data-[state=checked]:text-(--ui-primary)"
+        "base": "data-[state=checked]:bg-primary focus-visible:outline-primary",
+        "icon": "group-data-[state=checked]:text-primary"
       },
       "secondary": {
-        "base": "data-[state=checked]:bg-(--ui-secondary) focus-visible:outline-(--ui-secondary)",
-        "icon": "group-data-[state=checked]:text-(--ui-secondary)"
+        "base": "data-[state=checked]:bg-secondary focus-visible:outline-secondary",
+        "icon": "group-data-[state=checked]:text-secondary"
       },
       "success": {
-        "base": "data-[state=checked]:bg-(--ui-success) focus-visible:outline-(--ui-success)",
-        "icon": "group-data-[state=checked]:text-(--ui-success)"
+        "base": "data-[state=checked]:bg-success focus-visible:outline-success",
+        "icon": "group-data-[state=checked]:text-success"
       },
       "info": {
-        "base": "data-[state=checked]:bg-(--ui-info) focus-visible:outline-(--ui-info)",
-        "icon": "group-data-[state=checked]:text-(--ui-info)"
+        "base": "data-[state=checked]:bg-info focus-visible:outline-info",
+        "icon": "group-data-[state=checked]:text-info"
       },
       "warning": {
-        "base": "data-[state=checked]:bg-(--ui-warning) focus-visible:outline-(--ui-warning)",
-        "icon": "group-data-[state=checked]:text-(--ui-warning)"
+        "base": "data-[state=checked]:bg-warning focus-visible:outline-warning",
+        "icon": "group-data-[state=checked]:text-warning"
       },
       "error": {
-        "base": "data-[state=checked]:bg-(--ui-error) focus-visible:outline-(--ui-error)",
-        "icon": "group-data-[state=checked]:text-(--ui-error)"
+        "base": "data-[state=checked]:bg-error focus-visible:outline-error",
+        "icon": "group-data-[state=checked]:text-error"
       },
       "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": {
@@ -113,7 +113,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"
       }
     },
     "disabled": {