fix(module): stop using tailwind's shorthand arbitrary variable syntax

docs/app/components/Footer.vue

@@ -23,11 +23,11 @@ const route = useRoute()
 
   <UFooter>
     <template #left>
-      <NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[--ui-text-muted]">
-        Purchase <span class="text-[--ui-text-highlighted]">Nuxt UI Pro</span>
+      <NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
+        Purchase <span class="text-[var(--ui-text-highlighted)]">Nuxt UI Pro</span>
       </NuxtLink>
-      <NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[--ui-text-muted]">
-        Published under <span class="text-[--ui-text-highlighted]">MIT License</span>
+      <NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
+        Published under <span class="text-[var(--ui-text-highlighted)]">MIT License</span>
       </NuxtLink>
     </template>
 

docs/app/components/Header.vue

@@ -22,10 +22,10 @@ defineShortcuts({
 <template>
   <UHeader :ui="{ left: 'min-w-0' }">
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-[--ui-text-highlighted] min-w-0 focus-visible:outline-[--ui-primary]" aria-label="Nuxt UI">
+      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-[var(--ui-text-highlighted)] min-w-0 focus-visible:outline-[var(--ui-primary)]" aria-label="Nuxt UI">
         <Logo class="w-auto h-6 shrink-0" />
 
-        <UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[--ui-radius] font-semibold inline-block truncate" />
+        <UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[var(--ui-radius)] font-semibold inline-block truncate" />
       </NuxtLink>
     </template>
 

docs/app/components/content/ComponentCode.vue

@@ -214,15 +214,15 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 <template>
   <div class="my-5">
     <div>
-      <div v-if="options.length" class="flex items-center gap-2.5 border border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
+      <div v-if="options.length" class="flex items-center gap-2.5 border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField
             :label="option.label"
             size="sm"
-            class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
+            class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
             :ui="{
-              wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
-              label: 'text-[--ui-text-muted] px-2 py-1.5',
+              wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
+              label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
               container: 'mt-0'
             }"
           >
@@ -233,7 +233,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
               value-key="value"
               color="neutral"
               variant="soft"
-              class="rounded-[--ui-radius] rounded-l-none min-w-12"
+              class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
               :search-input="false"
               :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
               :ui="{ itemLeadingChip: 'size-2' }"
@@ -256,14 +256,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
               :model-value="getComponentProp(option.name)"
               color="neutral"
               variant="soft"
-              :ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
+              :ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
               @update:model-value="setComponentProp(option.name, $event)"
             />
           </UFormField>
         </template>
       </div>
 
-      <div class="flex justify-center border border-b-0 border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
+      <div class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
         <component :is="name" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <ContentSlot :name="slot" unwrap="p">

docs/app/components/content/ComponentExample.vue

@@ -114,8 +114,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
 <template>
   <div class="my-5">
     <div v-if="preview">
-      <div class="border border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
-        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700]">
+      <div class="border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
+        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)]">
           <slot name="options" />
 
           <UFormField
@@ -124,10 +124,10 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
             :label="option.label"
             :name="option.name"
             size="sm"
-            class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
+            class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
             :ui="{
-              wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
-              label: 'text-[--ui-text-muted] px-2 py-1.5',
+              wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
+              label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
               container: 'mt-0'
             }"
           >
@@ -139,7 +139,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
               :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
               color="neutral"
               variant="soft"
-              class="rounded-[--ui-radius] rounded-l-none min-w-12"
+              class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
               :multiple="option.multiple"
               :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
               :ui="{ itemLeadingChip: 'size-2' }"
@@ -160,7 +160,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
               :model-value="get(optionsValues, option.name)"
               color="neutral"
               variant="soft"
-              :ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
+              :ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
               @update:model-value="set(optionsValues, option.name, $event)"
             />
           </UFormField>

docs/app/components/content/ComponentProps.vue

@@ -77,7 +77,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
         <ProseTd>
           <HighlightInlineType v-if="prop.type" :type="prop.type" />
 
-          <MDC v-if="prop.description" :value="prop.description" class="text-[--ui-text-toned] mt-1" />
+          <MDC v-if="prop.description" :value="prop.description" class="text-[var(--ui-text-toned)] mt-1" />
 
           <ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
         </ProseTd>

docs/app/components/content/ComponentPropsSchema.vue

@@ -40,7 +40,7 @@ const schemaProps = computed(() => {
       <ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
         <HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
 
-        <MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[--ui-text-muted] my-1" />
+        <MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[var(--ui-text-muted)] my-1" />
       </ProseLi>
     </ProseUl>
   </Collapsible>

docs/app/components/content/ComponentSlots.vue

@@ -31,7 +31,7 @@ const meta = await fetchComponentMeta(name as any)
         <ProseTd>
           <HighlightInlineType v-if="slot.type" :type="slot.type" />
 
-          <MDC v-if="slot.description" :value="slot.description" class="text-[--ui-text-toned] mt-1" />
+          <MDC v-if="slot.description" :value="slot.description" class="text-[var(--ui-text-toned)] mt-1" />
         </ProseTd>
       </ProseTr>
     </ProseTbody>

docs/app/components/content/Placeholder.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="relative overflow-hidden rounded-[--ui-radius] border border-dashed border-[--ui-border-accented] opacity-75 px-4 flex items-center justify-center">
-    <svg class="absolute inset-0 h-full w-full stroke-[--ui-border-inverted]/10" fill="none">
+  <div class="relative overflow-hidden rounded-[var(--ui-radius)] border border-dashed border-[var(--ui-border-accented)] opacity-75 px-4 flex items-center justify-center">
+    <svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
       <defs>
         <pattern
           id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue

@@ -18,7 +18,7 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #content="{ item }">
-      <p class="pb-3.5 text-sm text-[--ui-text-muted]">
+      <p class="pb-3.5 text-sm text-[var(--ui-text-muted)]">
         This is the {{ item.label }} panel.
       </p>
     </template>

docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue

@@ -22,7 +22,7 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #colors="{ item }">
-      <p class="text-sm pb-3.5 text-[--ui-primary]">
+      <p class="text-sm pb-3.5 text-[var(--ui-primary)]">
         {{ item.content }}
       </p>
     </template>

docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue

@@ -3,7 +3,7 @@
     <ULink
       to="https://github.com/benjamincanac"
       target="_blank"
-      class="hover:ring-[--ui-primary] transition"
+      class="hover:ring-[var(--ui-primary)] transition"
       raw
     >
       <UAvatar
@@ -15,7 +15,7 @@
     <ULink
       to="https://github.com/romhml"
       target="_blank"
-      class="hover:ring-[--ui-primary] transition"
+      class="hover:ring-[var(--ui-primary)] transition"
       raw
     >
       <UAvatar
@@ -27,7 +27,7 @@
     <ULink
       to="https://github.com/noook"
       target="_blank"
-      class="hover:ring-[--ui-primary] transition"
+      class="hover:ring-[var(--ui-primary)] transition"
       raw
     >
       <UAvatar

docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue

@@ -14,7 +14,7 @@ const items = [{
 <template>
   <UBreadcrumb :items="items">
     <template #separator>
-      <span class="mx-2 text-[--ui-text-muted]">/</span>
+      <span class="mx-2 text-[var(--ui-text-muted)]">/</span>
     </template>
   </UBreadcrumb>
 </template>

docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

@@ -13,7 +13,7 @@ const items = [{
 
 <template>
   <UContextMenu :items="items" class="w-48">
-    <div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
+    <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
       Right click here
     </div>
 
@@ -22,7 +22,7 @@ const items = [{
     </template>
 
     <template #refresh-trailing>
-      <UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[--ui-primary] animate-spin" />
+      <UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
     </template>
   </UContextMenu>
 </template>

docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue

@@ -32,7 +32,7 @@ const groups = computed(() => [{
         :loading="status === 'pending'"
         :groups="groups"
         placeholder="Search users..."
-        class="h-96 border-t border-[--ui-border]"
+        class="h-96 border-t border-[var(--ui-border)]"
       />
     </template>
   </UDrawer>

docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue

@@ -17,7 +17,7 @@ const items = [{
     <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
 
     <template #profile-trailing>
-      <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[--ui-primary]" />
+      <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
     </template>
   </UDropdownMenu>
 </template>

docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue

@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     <template #item-label="{ item }">
       {{ item.label }}
 
-      <span class="text-[--ui-text-muted]">
+      <span class="text-[var(--ui-text-muted)]">
         {{ item.email }}
       </span>
     </template>

docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue

@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     <template #item-label="{ item }">
       {{ item.label }}
 
-      <span class="text-[--ui-text-muted]">
+      <span class="text-[var(--ui-text-muted)]">
         {{ item.email }}
       </span>
     </template>

docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue

@@ -26,7 +26,7 @@ const state = reactive({
 <template>
   <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
     <template #account="{ item }">
-      <p class="text-[--ui-text-muted] mb-4">
+      <p class="text-[var(--ui-text-muted)] mb-4">
         {{ item.description }}
       </p>
 
@@ -43,7 +43,7 @@ const state = reactive({
     </template>
 
     <template #password="{ item }">
-      <p class="text-[--ui-text-muted] mb-4">
+      <p class="text-[var(--ui-text-muted)] mb-4">
         {{ item.description }}
       </p>
 

docs/app/components/content/examples/toaster/ToasterDurationExample.vue

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.duration"
       size="sm"
-      class="inline-flex ring ring-[--ui-border-accented] rounded"
+      class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
       :ui="{
-        wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
-        label: 'text-[--ui-text-muted] px-2 py-1.5',
+        wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
+        label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
         container: 'mt-0'
       }"
     >

docs/app/components/content/examples/toaster/ToasterExpandExample.vue

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.expand"
       size="sm"
-      class="inline-flex ring ring-[--ui-border-accented] rounded"
+      class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
       :ui="{
-        wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
-        label: 'text-[--ui-text-muted] px-2 py-1.5',
+        wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
+        label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
         container: 'mt-0'
       }"
     >

docs/app/components/content/examples/toaster/ToasterPositionExample.vue

@@ -10,10 +10,10 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.position"
       size="sm"
-      class="inline-flex ring ring-[--ui-border-accented] rounded"
+      class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
       :ui="{
-        wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
-        label: 'text-[--ui-text-muted] px-2 py-1.5',
+        wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
+        label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
         container: 'mt-0'
       }"
     >

docs/app/components/theme-picker/ThemePicker.vue

@@ -7,7 +7,7 @@
         :variant="open ? 'soft' : 'ghost'"
         square
         aria-label="Color picker"
-        :ui="{ leadingIcon: 'text-[--ui-primary]' }"
+        :ui="{ leadingIcon: 'text-[var(--ui-primary)]' }"
       />
     </template>
 

docs/app/components/theme-picker/ThemePickerButton.vue

@@ -5,13 +5,13 @@
     :icon="icon"
     :label="label"
     :variant="selected ? 'soft' : 'outline'"
-    class="capitalize ring-[--ui-border] rounded-[--ui-radius] text-[11px]"
+    class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)] text-[11px]"
     @click.stop.prevent="$emit('select')"
   >
     <template v-if="chip" #leading>
       <span
         class="inline-block w-2 h-2 rounded-full"
-        :class="`bg-[--color-light] dark:bg-[--color-dark]`"
+        :class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
         :style="{
           '--color-light': `var(--color-${chip}-500)`,
           '--color-dark': `var(--color-${chip}-400)`