refactor(tailwindcss): simplify tailwindcss arbitrary values

.vitepress/theme/components/AsideOutlineAfter.vue

@@ -37,17 +37,17 @@ const editComponent = computed(() => {
 </script>
 
 <template>
-  <div v-if="show" class="mt-6 pt-6 border-t border-dashed border-[var(--vp-c-divider)]">
+  <div v-if="show" class="mt-6 pt-6 border-t border-dashed border-[--vp-c-divider]">
     <div role="heading" aria-level="2" class="font-semibold text-sm ml-4 leading-8">
       Contribute
     </div>
 
-    <a :href="viewComponent" target="_blank" class="flex flex-row items-center text-[var(--vp-c-text-2)]! text-sm transition-colors duration-[250ms] leading-8 hover:text-[var(--vp-c-text-1)]!">
+    <a :href="viewComponent" target="_blank" class="flex flex-row items-center text-[--vp-c-text-2]! text-sm transition-colors duration-[250ms] leading-8 hover:text-[--vp-c-text-1]!">
       <span class="i-simple-icons-github mr-2 size-4" />
       View on GitHub
     </a>
 
-    <a :href="editComponent" target="_blank" class="flex flex-row items-center text-[var(--vp-c-text-2)]! text-sm transition-colors duration-[250ms] leading-8 hover:text-[var(--vp-c-text-1)]!">
+    <a :href="editComponent" target="_blank" class="flex flex-row items-center text-[--vp-c-text-2]! text-sm transition-colors duration-[250ms] leading-8 hover:text-[--vp-c-text-1]!">
       <span class="i-lucide-pen mr-2 size-4" />
       Edit the component
     </a>

.vitepress/theme/components/Changelog.vue

@@ -12,17 +12,17 @@ const commits = computed(() => changelog
 <template>
   <div class="space-y-1">
     <div v-for="commit of commits" :key="commit.hash" class="flex items-center gap-2">
-      <div class="bg-[var(--vp-c-bg-alt)] rounded-full p-1.5 shrink-0 flex items-center justify-center">
+      <div class="bg-[--vp-c-bg-alt] rounded-full p-1.5 shrink-0 flex items-center justify-center">
         <span class="i-lucide-git-commit-vertical size-4" />
       </div>
 
       <a :href="`https://github.com/barbapapazes-sponsors/vue-ui/commits/${commit.hash}`" class="text-sm font-mono">
         {{ commit.hash.slice(0, 5) }}
       </a>
       -
-      <span class="text-[var(--vp-c-text-alt)]" v-html="renderCommitMessage(commit.message)" />
+      <span class="text-[--vp-c-text-alt]" v-html="renderCommitMessage(commit.message)" />
 
-      <span class="text-[var(--vp-c-text-2)]">
+      <span class="text-[--vp-c-text-2]">
         on {{ new Date(commit.date).toLocaleDateString() }}
       </span>
     </div>

.vitepress/theme/components/DemoWrapper.vue

@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <div class="demo w-full min-h-64 flex items-center justify-center rounded-md bg-[var(--vp-c-bg-alt)] p-8">
+  <div class="demo w-full min-h-64 flex items-center justify-center rounded-md bg-[--vp-c-bg-alt] p-8">
     <slot />
   </div>
 </template>

.vitepress/theme/components/SidebarNavBefore.vue

@@ -5,7 +5,7 @@ import ToolSelector from './ToolSelector.vue'
 <template>
   <div class="group pt-[10px]">
     <section class="pb-[24px]">
-      <h2 class="text-[var(--vp-c-text-1)] font-bold text-sm leading-[24px] pt-1 pb-1">
+      <h2 class="text-[--vp-c-text-1] font-bold text-sm leading-[24px] pt-1 pb-1">
         Settings
       </h2>
       <div class="py-1">

.vitepress/theme/components/ToolSelector.vue

@@ -34,7 +34,7 @@ onMounted(() => {
 
 <template>
   <SelectRoot v-slot="{ open }" v-model="tool">
-    <SelectTrigger class="flex items-center justify-between w-full text-[13px] font-medium text-[var(--vp-c-text-2)] border border-[var(--vp-input-border-color)] rounded px-2 py-1 hover:border-[var(--vp-c-brand-1)] hover:text-[var(--vp-c-text-1)] transition-colors duration-[250ms]">
+    <SelectTrigger class="flex items-center justify-between w-full text-[13px] font-medium text-[--vp-c-text-2] border border-[--vp-input-border-color] rounded px-2 py-1 hover:border-[--vp-c-brand-1] hover:text-[--vp-c-text-1] transition-colors duration-[250ms]">
       <SelectValue placeholder="Select a tool" class="capitalize flex items-center gap-1">
         <span :class="selectedTool?.icon" />
         <span>{{ selectedTool?.label }}</span>
@@ -45,11 +45,11 @@ onMounted(() => {
     </SelectTrigger>
 
     <SelectPortal>
-      <SelectContent class="w-[var(--reka-select-trigger-width)] bg-[var(--vp-c-bg-elv)] border border-[var(--vp-input-border-color)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-100 rounded p-1 shadow-[var(--vp-shadow-3)] capitalize" :side-offset="4" position="popper" side="bottom">
+      <SelectContent class="w-[--reka-select-trigger-width] bg-[--vp-c-bg-elv] border border-[--vp-input-border-color] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-100 rounded p-1 shadow-[--vp-shadow-3] capitalize" :side-offset="4" position="popper" side="bottom">
         <SelectItem
           v-for="option in options"
           :key="option.label"
-          class="flex items-center gap-2 text-[13px] data-[highlighted]:bg-[var(--vp-c-bg-alt)] text-[var(--vp-c-text-2)] data-[highlighted]:text-[var(--vp-c-text-1)] p-1"
+          class="flex items-center gap-2 text-[13px] data-[highlighted]:bg-[--vp-c-bg-alt] text-[--vp-c-text-2] data-[highlighted]:text-[--vp-c-text-1] p-1"
           :value="option.label"
         >
           <span :class="option.icon" />

playground/src/pages/components/context-menu.vue

@@ -87,7 +87,7 @@ const items = ref<ContextMenuItem[][]>([
     }"
   >
     <div
-      class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"
+      class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"
     >
       Right click here
     </div>

src/components/Accordion/Accordion.test.ts

@@ -48,7 +48,7 @@
     ['with trailingIcon', { props: { ...props, trailingIcon: 'i-lucide-plus' } }],
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: 'w-96' } }],
-    ['with ui', { props: { ...props, ui: { item: 'border-[var(--ui-border-accented)]' } } }],
+    ['with ui', { props: { ...props, ui: { item: 'border-[--ui-border-accented]' } } }],
     // Slots
     ['with leading slot', { props: { ...props, modelValue: '1' }, slots: { leading: () => 'Leading slot' } }],
     ['with default slot', { props: { ...props, modelValue: '1' }, slots: { default: () => 'Default slot' } }],
@@ -65,6 +65,6 @@
       ...options,
     })
 
     expect(screen.getByTestId('accordion')).toMatchSnapshot()
   })
 })

src/components/Avatar/Avatar.test.ts

@@ -15,7 +15,7 @@ describe('avatar', () => {
     ['with icon', { props: { icon: 'i-lucide-image' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { src: 'https://github.com/vuejs.png', size } }]),
     ['with as', { props: { as: 'section' } }],
-    ['with class', { props: { class: 'bg-[var(--ui-bg)]' } }],
+    ['with class', { props: { class: 'bg-[--ui-bg]' } }],
     ['with ui', { props: { ui: { fallback: 'font-bold' } } }],
     // Slots
     ['with default slot', { slots: { default: '🇫🇷' } }],

src/components/Chip/Chip.test.ts

@@ -18,7 +18,7 @@ describe('chip', () => {
     ['without show', { props: { show: false } }],
     ['with as', { props: { as: 'span' } }],
     ['with class', { props: { class: 'mx-auto' } }],
-    ['with ui', { props: { ui: { base: 'text-[var(--ui-text-muted)]' } } }],
+    ['with ui', { props: { ui: { base: 'text-[--ui-text-muted]' } } }],
     // Slots
     ['with default slot', { slots: { default: () => 'Default slot' } }],
     ['with content slot', { slots: { content: () => 'Content slot' } }],

src/components/ContextMenu/demo.vue

@@ -32,7 +32,7 @@ const items = [
     }"
   >
     <div
-      class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"
+      class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"
     >
       Right click here
     </div>

src/components/ContextMenuContent/demo.vue

@@ -32,7 +32,7 @@ const items = [
     }"
   >
     <div
-      class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"
+      class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"
     >
       Right click here
     </div>

src/components/FormField/FormField.test.ts

@@ -19,7 +19,7 @@ describe('form-field', () => {
     ...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'relative' } }],
-    ['with ui', { props: { ui: { label: 'text-[var(--ui-text-highlighted)]' } } }],
+    ['with ui', { props: { ui: { label: 'text-[--ui-text-highlighted]' } } }],
     // Slots
     ['with default slot', { slots: { default: () => 'Default slot' } }],
     ['with label slot', { slots: { label: () => 'Label slot' } }],

src/components/Modal/Modal.test.ts

@@ -14,7 +14,7 @@ describe('modal', () => {
     ['with fullscreen', { props: { ...props, fullscreen: true, title: 'Title', description: 'Description' } }],
     ['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
     ['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
-    ['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
+    ['with class', { props: { ...props, class: 'bg-[--ui-bg-elevated]' } }],
     ['with ui', { props: { ...props, ui: { close: 'end-2' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],

src/components/Slideover/Slideover.test.ts

@@ -17,7 +17,7 @@ describe('slideover', () => {
     ['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
     ['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
     ['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
-    ['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
+    ['with class', { props: { ...props, class: 'bg-[--ui-bg-elevated]' } }],
     ['with ui', { props: { ...props, ui: { close: 'end-2' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],

src/components/Tabs/Tabs.test.ts

@@ -41,7 +41,7 @@ describe('tabs', () => {
     ['with unmountOnHide', { props: { ...props, unmountOnHide: false } }],
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: 'w-96' } }],
-    ['with ui', { props: { ...props, ui: { content: 'w-full ring ring-[var(--ui-border)]' } } }],
+    ['with ui', { props: { ...props, ui: { content: 'w-full ring ring-[--ui-border]' } } }],
     // Slots
     ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],

src/components/Toast/Toast.test.ts

@@ -34,7 +34,7 @@ describe('toast', () => {
     ['with type', { props: { ...props, type: 'background' as const } }],
     ['with color neutral', { props: { ...props, color: 'neutral' as const } }],
     ['with as', { props: { ...props, as: 'section' } }],
-    ['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]/50' } }],
+    ['with class', { props: { ...props, class: 'bg-[--ui-bg-elevated]/50' } }],
     ['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
     // Slots
     ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],

src/theme/accordion.ts

@@ -1,9 +1,9 @@
 export default {
   slots: {
     root: 'w-full',
-    item: 'border-b border-[var(--ui-border)] last:border-b-0',
+    item: 'border-b border-[--ui-border] last:border-b-0',
     header: 'flex',
-    trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--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-[--ui-primary] min-w-0',
     content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
     body: 'text-sm pb-3.5',
     leadingIcon: 'shrink-0 size-5',

src/theme/alert.ts

@@ -37,56 +37,56 @@ export default {
       color: 'primary',
       variant: 'solid',
       class: {
-        root: `bg-[var(--ui-primary)] text-[var(--ui-bg)]`,
+        root: `bg-[--ui-primary] text-[--ui-bg]`,
       },
     } as const,
     {
       color: 'primary',
       variant: 'outline',
       class: {
-        root: `text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25`,
+        root: `text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25`,
       },
     } as const,
     {
       color: 'primary',
       variant: 'soft',
       class: {
-        root: `bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]`,
+        root: `bg-[--ui-primary]/10 text-[--ui-primary]`,
       },
     } as const,
     {
       color: 'primary',
       variant: 'subtle',
       class: {
-        root: `bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25`,
+        root: `bg-[--ui-primary]/10 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25`,
       },
     } as const,
     {
       color: 'neutral',
       variant: 'solid',
       class: {
-        root: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]',
+        root: 'text-[--ui-bg] bg-[--ui-bg-inverted]',
       },
     } as const,
     {
       color: 'neutral',
       variant: 'outline',
       class: {
-        root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]',
+        root: 'text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border]',
       },
     } as const,
     {
       color: 'neutral',
       variant: 'soft',
       class: {
-        root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50',
+        root: 'text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50',
       },
     } as const,
     {
       color: 'neutral',
       variant: 'subtle',
       class: {
-        root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]',
+        root: 'text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 ring ring-inset ring-[--ui-border-accented]',
       },
     } as const,
   ],

src/theme/avatar-group.ts

@@ -1,7 +1,7 @@
 export default {
   slots: {
     root: 'inline-flex flex-row-reverse justify-end',
-    base: 'relative rounded-full ring-[var(--ui-bg)] first:me-0',
+    base: 'relative rounded-full ring-[--ui-bg] first:me-0',
   },
   variants: {
     size: {

src/theme/avatar.ts

@@ -1,9 +1,9 @@
 export default {
   slots: {
-    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]',
+    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated]',
     image: 'h-full w-full rounded-[inherit] object-cover',
-    fallback: 'font-medium leading-none text-[var(--ui-text-muted)] truncate',
-    icon: 'text-[var(--ui-text-muted)] shrink-0',
+    fallback: 'font-medium leading-none text-[--ui-text-muted] truncate',
+    icon: 'text-[--ui-text-muted] shrink-0',
   },
   variants: {
     size: {

src/theme/badge.ts

@@ -54,35 +54,35 @@ export default {
   compoundVariants: [{
     color: 'primary',
     variant: 'solid',
-    class: `bg-[var(--ui-primary)] text-[var(--ui-bg)]`,
+    class: `bg-[--ui-primary] text-[--ui-bg]`,
   } as const, {
     color: 'primary',
     variant: 'outline',
-    class: `text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50`,
+    class: `text-[--ui-primary] ring ring-inset ring-[--ui-primary]/50`,
   } as const, {
     color: 'primary',
     variant: 'soft',
-    class: `bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]`,
+    class: `bg-[--ui-primary]/10 text-[--ui-primary]`,
   } as const, {
     color: 'primary',
     variant: 'subtle',
-    class: `bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25`,
+    class: `bg-[--ui-primary]/10 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25`,
   } as const, {
     color: 'neutral',
     variant: 'solid',
-    class: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]',
+    class: 'text-[--ui-bg] bg-[--ui-bg-inverted]',
   } as const, {
     color: 'neutral',
     variant: 'outline',
-    class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]',
+    class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg]',
   } as const, {
     color: 'neutral',
     variant: 'soft',
-    class: 'text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]',
+    class: 'text-[--ui-text] bg-[--ui-bg-elevated]',
   } as const, {
     color: 'neutral',
     variant: 'subtle',
-    class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]',
+    class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated]',
   } as const],
   defaultVariants: {
     color: 'primary',