refactor(module)!: implement design system with CSS variables (#2298)

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-gray-500 dark:text-gray-400">
+      <p class="pb-3.5 text-sm text-[--ui-text-muted]">
         This is the {{ item.label }} panel.
       </p>
     </template>

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

@@ -9,7 +9,7 @@ const items = [
     label: 'Colors',
     icon: 'i-heroicons-swatch',
     slot: 'colors',
-    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+    content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {
     label: 'Components',
@@ -22,7 +22,7 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #colors="{ item }">
-      <p class="text-sm pb-3.5 text-primary-500 dark:text-primary-400">
+      <p class="text-sm pb-3.5 text-[--ui-primary]">
         {{ item.content }}
       </p>
     </template>

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

@@ -8,7 +8,7 @@ const items = [
   {
     label: 'Colors',
     icon: 'i-heroicons-swatch',
-    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+    content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {
     label: 'Components',

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

@@ -1,20 +1,20 @@
 <template>
   <UAvatarGroup>
-    <UChip inset color="green">
+    <UChip inset color="success">
       <UAvatar
         src="https://avatars.githubusercontent.com/u/739984?v=4"
         alt="Benjamin Canac"
       />
     </UChip>
 
-    <UChip inset color="amber">
+    <UChip inset color="warning">
       <UAvatar
         src="https://avatars.githubusercontent.com/u/25613751?v=4"
         alt="Romain Hamel"
       />
     </UChip>
 
-    <UChip inset color="red">
+    <UChip inset color="error">
       <UAvatar
         src="https://avatars.githubusercontent.com/u/19751938?v=4"
         alt="Neil Richter"

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

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

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

@@ -25,7 +25,7 @@ const items = [{
   <UBreadcrumb :items="items">
     <template #dropdown="{ item }">
       <UDropdownMenu :items="item.children">
-        <UButton :icon="item.icon" color="gray" variant="link" class="p-0.5" />
+        <UButton :icon="item.icon" color="neutral" variant="link" class="p-0.5" />
       </UDropdownMenu>
     </template>
   </UBreadcrumb>

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-gray-500 dark:text-gray-400">/</span>
+      <span class="mx-2 text-[--ui-text-muted]">/</span>
     </template>
   </UBreadcrumb>
 </template>

docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue

@@ -20,11 +20,11 @@ const items = [{
 
 <template>
   <UButtonGroup>
-    <UButton color="gray" variant="subtle" label="Settings" />
+    <UButton color="neutral" variant="subtle" label="Settings" />
 
     <UDropdownMenu :items="items">
       <UButton
-        color="gray"
+        color="neutral"
         variant="outline"
         icon="i-heroicons-chevron-down-20-solid"
       />

docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue

@@ -1,10 +1,10 @@
 <template>
   <UButtonGroup>
-    <UInput color="gray" variant="outline" placeholder="Enter token" />
+    <UInput color="neutral" variant="outline" placeholder="Enter token" />
 
     <UTooltip text="Copy to clipboard">
       <UButton
-        color="gray"
+        color="neutral"
         variant="subtle"
         icon="i-heroicons-clipboard-document"
       />

docs/app/components/content/examples/chip/ChipShowExample.vue

@@ -2,7 +2,7 @@
 const statuses = ['online', 'away', 'busy', 'offline']
 const status = ref(statuses[0])
 
-const color = computed(() => status.value ? { online: 'green', away: 'amber', busy: 'red', offline: 'gray' }[status.value] as any : 'online')
+const color = computed(() => status.value ? { online: 'success', away: 'warning', busy: 'error', offline: 'neutral' }[status.value] as any : 'online')
 
 const show = computed(() => status.value !== 'offline')
 

docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue

@@ -3,7 +3,7 @@
     <UButton
       class="group"
       label="Open"
-      color="gray"
+      color="neutral"
       variant="subtle"
       trailing-icon="i-heroicons-chevron-down-20-solid"
       :ui="{

docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue

@@ -10,7 +10,7 @@ defineShortcuts({
   <UCollapsible v-model:open="open" class="w-48">
     <UButton
       label="Open"
-      color="gray"
+      color="neutral"
       variant="subtle"
       trailing-icon="i-heroicons-chevron-down-20-solid"
       block

docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue

@@ -14,7 +14,7 @@ const users = [
   <UModal v-model:open="open">
     <UButton
       label="Search users..."
-      color="gray"
+      color="neutral"
       variant="subtle"
       icon="i-heroicons-magnifying-glass"
     />

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-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
+    <div 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>
 
@@ -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-primary-500 dark:text-primary-400 animate-spin" />
+      <UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[--ui-primary] animate-spin" />
     </template>
   </UContextMenu>
 </template>

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

@@ -21,7 +21,7 @@ const groups = computed(() => [{
   <UDrawer>
     <UButton
       label="Search users..."
-      color="gray"
+      color="neutral"
       variant="subtle"
       icon="i-heroicons-magnifying-glass"
     />
@@ -32,7 +32,7 @@ const groups = computed(() => [{
         :loading="status === 'pending'"
         :groups="groups"
         placeholder="Search users..."
-        class="h-96 border-t border-gray-200 dark:border-gray-800"
+        class="h-96 border-t border-[--ui-border]"
       />
     </template>
   </UDrawer>

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

@@ -4,15 +4,15 @@ const open = ref(false)
 
 <template>
   <UDrawer v-model:open="open" title="Drawer with footer" description="This is useful when you want a form in a Drawer." :ui="{ container: 'max-w-xl mx-auto' }">
-    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
 
     <template #body>
       <Placeholder class="h-48" />
     </template>
 
     <template #footer>
-      <UButton label="Submit" color="gray" class="justify-center" />
-      <UButton label="Cancel" color="gray" variant="outline" class="justify-center" @click="open = false" />
+      <UButton label="Submit" color="neutral" class="justify-center" />
+      <UButton label="Cancel" color="neutral" variant="outline" class="justify-center" @click="open = false" />
     </template>
   </UDrawer>
 </template>

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

@@ -8,7 +8,7 @@ defineShortcuts({
 
 <template>
   <UDrawer v-model:open="open">
-    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
 
     <template #content>
       <Placeholder class="h-48 m-4" />

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

@@ -14,10 +14,10 @@ const items = [{
 
 <template>
   <UDropdownMenu :items="items" class="w-48">
-    <UButton label="Open" color="gray" variant="outline" icon="i-heroicons-bars-3" />
+    <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-primary-500 dark:text-primary-400" />
+      <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[--ui-primary]" />
     </template>
   </UDropdownMenu>
 </template>

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

@@ -19,6 +19,6 @@ const items = [{
 
 <template>
   <UDropdownMenu v-model:open="open" :items="items" class="w-48">
-    <UButton label="Open" color="gray" variant="outline" icon="i-heroicons-bars-3" />
+    <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
   </UDropdownMenu>
 </template>

docs/app/components/content/examples/form/FormExampleBasic.vue

@@ -15,7 +15,7 @@ const validate = (state: any): FormError[] => {
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -45,7 +45,7 @@ const items = [
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>
@@ -103,11 +103,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     </div>
 
     <div class="flex gap-2 mt-8">
-      <UButton color="gray" type="submit">
+      <UButton color="neutral" type="submit">
         Submit
       </UButton>
 
-      <UButton color="gray" variant="outline" @click="form?.clear()">
+      <UButton color="neutral" variant="outline" @click="form?.clear()">
         Clear
       </UButton>
     </div>

docs/app/components/content/examples/form/FormExampleJoi.vue

@@ -16,7 +16,7 @@ const state = reactive({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleNested.vue

@@ -19,7 +19,7 @@ const state = reactive<Partial<Schema & NestedSchema>>({ })
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleNestedList.vue

@@ -35,7 +35,7 @@ const formItemRef = ref()
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>
@@ -62,11 +62,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     </UForm>
 
     <div class="flex gap-2">
-      <UButton color="gray" variant="subtle" size="sm" @click="addItem()">
+      <UButton color="neutral" variant="subtle" size="sm" @click="addItem()">
         Add Item
       </UButton>
 
-      <UButton color="gray" variant="ghost" size="sm" @click="removeItem()">
+      <UButton color="neutral" variant="ghost" size="sm" @click="removeItem()">
         Remove Item
       </UButton>
     </div>

docs/app/components/content/examples/form/FormExampleOnError.vue

@@ -15,7 +15,7 @@ const validate = (state: any): FormError[] => {
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 

docs/app/components/content/examples/form/FormExampleValibot.vue

@@ -16,7 +16,7 @@ const state = reactive({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleYup.vue

@@ -18,7 +18,7 @@ const state = reactive({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleZod.vue

@@ -16,7 +16,7 @@ const state = reactive<Partial<Schema>>({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

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-gray-500 dark:text-gray-400">
+      <span class="text-[--ui-text-muted]">
         {{ item.email }}
       </span>
     </template>

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

@@ -4,21 +4,21 @@ const items = ref([
     label: 'bug',
     value: 'bug',
     chip: {
-      color: 'red' as const
-    }
-  },
-  {
-    label: 'enhancement',
-    value: 'enhancement',
-    chip: {
-      color: 'blue' as const
+      color: 'error' as const
     }
   },
   {
     label: 'feature',
     value: 'feature',
     chip: {
-      color: 'violet' as const
+      color: 'success' as const
+    }
+  },
+  {
+    label: 'enhancement',
+    value: 'enhancement',
+    chip: {
+      color: 'info' as const
     }
   }
 ])

docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue

@@ -21,7 +21,7 @@ const groups = computed(() => [{
   <UModal>
     <UButton
       label="Search users..."
-      color="gray"
+      color="neutral"
       variant="subtle"
       icon="i-heroicons-magnifying-glass"
     />

docs/app/components/content/examples/modal/ModalExample.vue

@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <UModal :title="`This modal was opened programmatically ${count} times`">
     <template #footer>
-      <UButton color="gray" label="Close" @click="modal.close()" />
+      <UButton color="neutral" label="Close" @click="modal.close()" />
     </template>
   </UModal>
 </template>

docs/app/components/content/examples/modal/ModalFooterSlotExample.vue

@@ -4,15 +4,15 @@ const open = ref(false)
 
 <template>
   <UModal v-model:open="open" title="Modal with footer" description="This is useful when you want a form in a Modal." :ui="{ footer: 'justify-end' }">
-    <UButton label="Open" color="gray" variant="subtle" />
+    <UButton label="Open" color="neutral" variant="subtle" />
 
     <template #body>
       <Placeholder class="h-48" />
     </template>
 
     <template #footer>
-      <UButton label="Cancel" color="gray" variant="outline" @click="open = false" />
-      <UButton label="Submit" color="gray" />
+      <UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
+      <UButton label="Submit" color="neutral" />
     </template>
   </UModal>
 </template>

docs/app/components/content/examples/modal/ModalNestedExample.vue

@@ -5,16 +5,16 @@ const second = ref(false)
 
 <template>
   <UModal v-model:open="first" title="First modal" :ui="{ footer: 'justify-end' }">
-    <UButton color="gray" variant="subtle" label="Open" />
+    <UButton color="neutral" variant="subtle" label="Open" />
 
     <template #footer>
-      <UButton label="Close" color="gray" variant="outline" @click="first = false" />
+      <UButton label="Close" color="neutral" variant="outline" @click="first = false" />
 
       <UModal v-model:open="second" title="Second modal" :ui="{ footer: 'justify-end' }">
-        <UButton label="Open second" color="gray" />
+        <UButton label="Open second" color="neutral" />
 
         <template #footer>
-          <UButton label="Close" color="gray" variant="outline" @click="second = false" />
+          <UButton label="Close" color="neutral" variant="outline" @click="second = false" />
         </template>
       </UModal>
     </template>

docs/app/components/content/examples/modal/ModalOpenExample.vue

@@ -8,7 +8,7 @@ defineShortcuts({
 
 <template>
   <UModal v-model:open="open">
-    <UButton label="Open" color="gray" variant="subtle" />
+    <UButton label="Open" color="neutral" variant="subtle" />
 
     <template #content>
       <Placeholder class="h-48 m-4" />

docs/app/components/content/examples/modal/ModalProgrammaticExample.vue

@@ -16,5 +16,5 @@ function open() {
 </script>
 
 <template>
-  <UButton label="Open" color="gray" variant="subtle" @click="open" />
+  <UButton label="Open" color="neutral" variant="subtle" @click="open" />
 </template>

docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue

@@ -22,7 +22,7 @@ const items = [
       {
         label: 'Colors',
         icon: 'i-heroicons-swatch',
-        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
       },
       {
         label: 'Theme',

docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
-const labels = [{
-  label: 'bug',
-  chip: {
-    color: 'red' as const
+const items = ref([
+  {
+    label: 'bug',
+    value: 'bug',
+    chip: {
+      color: 'error' as const
+    }
+  },
+  {
+    label: 'feature',
+    value: 'feature',
+    chip: {
+      color: 'success' as const
+    }
+  },
+  {
+    label: 'enhancement',
+    value: 'enhancement',
+    chip: {
+      color: 'info' as const
+    }
   }
-}, {
-  label: 'feature',
-  chip: {
-    color: 'green' as const
-  }
-}, {
-  label: 'enhancement',
-  chip: {
-    color: 'blue' as const
-  }
-}]
+])
 const label = ref([])
 </script>
 
@@ -23,7 +30,7 @@ const label = ref([])
     <UButton
       icon="i-heroicons-tag"
       label="Select labels"
-      color="gray"
+      color="neutral"
       variant="subtle"
     />
 
@@ -32,7 +39,7 @@ const label = ref([])
         v-model="label"
         multiple
         placeholder="Search labels..."
-        :groups="[{ id: 'labels', items: labels }]"
+        :groups="[{ id: 'labels', items }]"
         :ui="{ input: '[&>input]:h-8' }"
       />
     </template>

docs/app/components/content/examples/popover/PopoverOpenExample.vue

@@ -8,7 +8,7 @@ defineShortcuts({
 
 <template>
   <UPopover v-model:open="open">
-    <UButton label="Open" color="gray" variant="subtle" />
+    <UButton label="Open" color="neutral" variant="subtle" />
 
     <template #content>
       <Placeholder class="size-48 m-4 inline-flex" />

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-gray-500 dark:text-gray-400">
+      <span class="text-[--ui-text-muted]">
         {{ item.email }}
       </span>
     </template>

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

@@ -4,21 +4,21 @@ const items = ref([
     label: 'bug',
     value: 'bug',
     chip: {
-      color: 'red' as const
-    }
-  },
-  {
-    label: 'enhancement',
-    value: 'enhancement',
-    chip: {
-      color: 'blue' as const
+      color: 'error' as const
     }
   },
   {
     label: 'feature',
     value: 'feature',
     chip: {
-      color: 'violet' as const
+      color: 'success' as const
+    }
+  },
+  {
+    label: 'enhancement',
+    value: 'enhancement',
+    chip: {
+      color: 'info' as const
     }
   }
 ])

docs/app/components/content/examples/select/SelectItemsChipExample.vue

@@ -4,21 +4,21 @@ const items = ref([
     label: 'bug',
     value: 'bug',
     chip: {
-      color: 'red' as const
-    }
-  },
-  {
-    label: 'enhancement',
-    value: 'enhancement',
-    chip: {
-      color: 'blue' as const
+      color: 'error' as const
     }
   },
   {
     label: 'feature',
     value: 'feature',
     chip: {
-      color: 'violet' as const
+      color: 'success' as const
+    }
+  },
+  {
+    label: 'enhancement',
+    value: 'enhancement',
+    chip: {
+      color: 'info' as const
     }
   }
 ])

docs/app/components/content/examples/slideover/SlideoverExample.vue

@@ -13,7 +13,7 @@ defineProps<{
     </template>
 
     <template #footer>
-      <UButton color="gray" label="Close" @click="slideover.close()" />
+      <UButton color="neutral" label="Close" @click="slideover.close()" />
     </template>
   </USlideover>
 </template>

docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue

@@ -4,15 +4,15 @@ const open = ref(false)
 
 <template>
   <USlideover v-model:open="open" title="Slideover with footer" description="This is useful when you want a form in a Slideover." :ui="{ footer: 'justify-end' }">
-    <UButton label="Open" color="gray" variant="subtle" />
+    <UButton label="Open" color="neutral" variant="subtle" />
 
     <template #body>
       <Placeholder class="h-full" />
     </template>
 
     <template #footer>
-      <UButton label="Cancel" color="gray" variant="outline" @click="open = false" />
-      <UButton label="Submit" color="gray" />
+      <UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
+      <UButton label="Submit" color="neutral" />
     </template>
   </USlideover>
 </template>

docs/app/components/content/examples/slideover/SlideoverNestedExample.vue

@@ -5,24 +5,24 @@ const second = ref(false)
 
 <template>
   <USlideover v-model:open="first" title="First slideover" :ui="{ footer: 'justify-end' }">
-    <UButton color="gray" variant="subtle" label="Open" />
+    <UButton color="neutral" variant="subtle" label="Open" />
 
     <template #body>
       <Placeholder class="h-full" />
     </template>
 
     <template #footer>
-      <UButton label="Close" color="gray" variant="outline" @click="first = false" />
+      <UButton label="Close" color="neutral" variant="outline" @click="first = false" />
 
       <USlideover v-model:open="second" title="Second slideover" :ui="{ footer: 'justify-end' }">
-        <UButton label="Open second" color="gray" />
+        <UButton label="Open second" color="neutral" />
 
         <template #body>
           <Placeholder class="h-full" />
         </template>
 
         <template #footer>
-          <UButton label="Close" color="gray" variant="outline" @click="second = false" />
+          <UButton label="Close" color="neutral" variant="outline" @click="second = false" />
         </template>
       </USlideover>
     </template>

docs/app/components/content/examples/slideover/SlideoverOpenExample.vue

@@ -8,7 +8,7 @@ defineShortcuts({
 
 <template>
   <USlideover v-model:open="open">
-    <UButton label="Open" color="gray" variant="subtle" />
+    <UButton label="Open" color="neutral" variant="subtle" />
 
     <template #content>
       <Placeholder class="h-full m-4" />

docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue

@@ -16,5 +16,5 @@ function open() {
 </script>
 
 <template>
-  <UButton label="Open" color="gray" variant="subtle" @click="open" />
+  <UButton label="Open" color="neutral" variant="subtle" @click="open" />
 </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-gray-500 dark:text-gray-400 mb-4">
+      <p class="text-[--ui-text-muted] mb-4">
         {{ item.description }}
       </p>
 
@@ -43,7 +43,7 @@ const state = reactive({
     </template>
 
     <template #password="{ item }">
-      <p class="text-gray-500 dark:text-gray-400 mb-4">
+      <p class="text-[--ui-text-muted] mb-4">
         {{ item.description }}
       </p>
 

docs/app/components/content/examples/toast/ToastActionsExample.vue

@@ -12,7 +12,7 @@ function showToast() {
     actions: [{
       icon: 'i-heroicons-arrow-path-20-solid',
       label: 'Retry',
-      color: 'gray',
+      color: 'neutral',
       variant: 'outline',
       onClick: (e) => {
         e?.stopPropagation()
@@ -23,5 +23,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
 </template>

docs/app/components/content/examples/toast/ToastAvatarExample.vue

@@ -17,5 +17,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Invite user" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Invite user" color="neutral" variant="outline" @click="showToast" />
 </template>

docs/app/components/content/examples/toast/ToastCloseExample.vue

@@ -16,5 +16,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
 </template>

docs/app/components/content/examples/toast/ToastCloseIconExample.vue

@@ -15,5 +15,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
 </template>

docs/app/components/content/examples/toast/ToastColorExample.vue

@@ -18,5 +18,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
 </template>

docs/app/components/content/examples/toast/ToastDescriptionExample.vue

@@ -12,5 +12,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
 </template>

docs/app/components/content/examples/toast/ToastExample.vue

@@ -14,5 +14,5 @@ function addToCalendar() {
 </script>
 
 <template>
-  <UButton label="Add to calendar" color="gray" variant="outline" icon="i-heroicons-plus" @click="addToCalendar" />
+  <UButton label="Add to calendar" color="neutral" variant="outline" icon="i-heroicons-plus" @click="addToCalendar" />
 </template>

docs/app/components/content/examples/toast/ToastIconExample.vue

@@ -15,5 +15,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
 </template>

docs/app/components/content/examples/toast/ToastTitleExample.vue

@@ -11,5 +11,5 @@ function showToast() {
 </script>
 
 <template>
-  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
 </template>

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

@@ -7,16 +7,16 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.duration"
       size="sm"
-      class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+      class="inline-flex ring ring-[--ui-border-accented] rounded"
       :ui="{
-        wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
-        label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+        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',
         container: 'mt-0'
       }"
     >
       <UInput
         v-model="appConfig.toaster.duration"
-        color="gray"
+        color="neutral"
         variant="soft"
         class="rounded rounded-l-none min-w-12"
         :search-input="false"

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

@@ -7,17 +7,17 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.expand"
       size="sm"
-      class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+      class="inline-flex ring ring-[--ui-border-accented] rounded"
       :ui="{
-        wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
-        label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+        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',
         container: 'mt-0'
       }"
     >
       <USelectMenu
         v-model="appConfig.toaster.expand"
         :items="[true, false]"
-        color="gray"
+        color="neutral"
         variant="soft"
         class="rounded rounded-l-none min-w-12"
         :search-input="false"

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

@@ -10,17 +10,17 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.position"
       size="sm"
-      class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+      class="inline-flex ring ring-[--ui-border-accented] rounded"
       :ui="{
-        wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
-        label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+        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',
         container: 'mt-0'
       }"
     >
       <USelectMenu
         v-model="appConfig.toaster.position"
         :items="positions"
-        color="gray"
+        color="neutral"
         variant="soft"
         class="rounded rounded-l-none min-w-12"
         :search-input="false"

docs/app/components/content/examples/tooltip/TooltipOpenExample.vue

@@ -8,6 +8,6 @@ defineShortcuts({
 
 <template>
   <UTooltip v-model:open="open" text="Open on GitHub">
-    <UButton label="Open" color="gray" variant="subtle" />
+    <UButton label="Open" color="neutral" variant="subtle" />
   </UTooltip>
 </template>