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

2026-01-24 00:40:34 +01:00 · 2024-10-07 14:48:02 +02:00
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -86,7 +86,7 @@ const options = computed(() => {
          value: variant,
          label: variant,
          chip: key.toLowerCase().endsWith('color') ? { color: variant } : undefined
-        })).filter(variant => key.toLowerCase().endsWith('color') ? !['error'].includes(variant.value) : true)
+        }))

    return {
      name: key,
@@ -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-gray-200 dark:border-gray-700 border-b-0 relative rounded-t-md px-4 py-2.5 overflow-x-auto">
+      <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-md 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-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'
            }"
          >
@@ -231,7 +231,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
              :model-value="getComponentProp(option.name)"
              :items="option.items"
              value-key="value"
-              color="gray"
+              color="neutral"
              variant="soft"
              class="rounded rounded-l-none min-w-12"
              :search-input="false"
@@ -254,7 +254,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
              v-else
              :type="option.type?.includes('number') ? 'number' : 'text'"
              :model-value="getComponentProp(option.name)"
-              color="gray"
+              color="neutral"
              variant="soft"
              :ui="{ base: 'rounded rounded-l-none min-w-12' }"
              @update:model-value="setComponentProp(option.name, $event)"
@@ -263,7 +263,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
        </template>
      </div>

-      <div class="flex justify-center border border-b-0 border-gray-200 dark:border-gray-700 relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class]">
+      <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-md', 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">
--- a/docs/app/components/content/ComponentExample.vue
+++ b/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-gray-200 dark:border-gray-700 relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source }]">
-        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-gray-200 dark:border-gray-700">
+      <div class="border border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !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]">
          <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-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'
            }"
          >
@@ -137,7 +137,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
              :items="option.items"
              :search-input="false"
              :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
-              color="gray"
+              color="neutral"
              variant="soft"
              class="rounded rounded-l-none min-w-12"
              :multiple="option.multiple"
@@ -158,7 +158,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
            <UInput
              v-else
              :model-value="get(optionsValues, option.name)"
-              color="gray"
+              color="neutral"
              variant="soft"
              :ui="{ base: 'rounded rounded-l-none min-w-12' }"
              @update:model-value="set(optionsValues, option.name, $event)"
--- a/docs/app/components/content/ComponentProps.vue
+++ b/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-gray-600 dark:text-gray-300 mt-1" />
+          <MDC v-if="prop.description" :value="prop.description" class="text-[--ui-text-toned] mt-1" />

          <ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
        </ProseTd>
--- a/docs/app/components/content/ComponentPropsSchema.vue
+++ b/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-gray-500 dark:text-gray-400 my-1" />
+        <MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[--ui-text-muted] my-1" />
      </ProseLi>
    </ProseUl>
  </Collapsible>
--- a/docs/app/components/content/ComponentSlots.vue
+++ b/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-gray-600 dark:text-gray-300 mt-1" />
+          <MDC v-if="slot.description" :value="slot.description" class="text-[--ui-text-toned] mt-1" />
        </ProseTd>
      </ProseTr>
    </ProseTbody>
--- a/docs/app/components/content/ComponentTheme.vue
+++ b/docs/app/components/content/ComponentTheme.vue
@@ -13,7 +13,7 @@ function stripCompoundVariants(component?: any) {
  if (component?.compoundVariants) {
    component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => {
      if (compoundVariant.color) {
-        if (!['primary', 'gray'].includes(compoundVariant.color)) {
+        if (!['primary', 'neutral'].includes(compoundVariant.color)) {
          strippedCompoundVariants.value = true

          return false
@@ -21,7 +21,7 @@ function stripCompoundVariants(component?: any) {
      }

      if (compoundVariant.highlightColor) {
-        if (!['primary', 'gray'].includes(compoundVariant.highlightColor)) {
+        if (!['primary', 'neutral'].includes(compoundVariant.highlightColor)) {
          strippedCompoundVariants.value = true

          return false
@@ -53,11 +53,11 @@ export default defineAppConfig(${json5.stringify(component.value, null, 2).repla
 ::

 ${strippedCompoundVariants.value
-    ? `
+  ? `
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/v3/src/theme/${name}.ts"}
 Some colors in \`compoundVariants\` are omitted for readability. Check out the source code on GitHub.
 ::`
-    : ''}
+  : ''}
 `

  return parseMarkdown(md)
--- a/docs/app/components/content/IconsTheme.vue
+++ b/docs/app/components/content/IconsTheme.vue
@@ -6,10 +6,10 @@ const { data: ast } = await useAsyncData(`icons-theme`, async () => {
  const md = `
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify({
-    ui: {
-      icons
-    }
-  }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
+  ui: {
+    icons
+  }
+}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
 `

--- a/docs/app/components/content/Placeholder.vue
+++ b/docs/app/components/content/Placeholder.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
-    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+  <div class="relative overflow-hidden rounded 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">
      <defs>
        <pattern
          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
--- a/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
+++ b/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',
--- a/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue
+++ b/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"
--- a/docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue
+++ b/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
--- a/docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue
+++ b/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"
      />
--- a/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue
+++ b/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"
      />
--- a/docs/app/components/content/examples/chip/ChipShowExample.vue
+++ b/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')

--- a/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
+++ b/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="{
--- a/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
+++ b/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
--- a/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
+++ b/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"
    />
--- a/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/drawer/DrawerOpenExample.vue
+++ b/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" />
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleBasic.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleElements.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleJoi.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleNested.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleNestedList.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleOnError.vue
+++ b/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)
 }

--- a/docs/app/components/content/examples/form/FormExampleValibot.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleYup.vue
+++ b/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>
--- a/docs/app/components/content/examples/form/FormExampleZod.vue
+++ b/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>
--- a/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue
+++ b/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
    }
  }
 ])
--- a/docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue
+++ b/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"
    />
--- a/docs/app/components/content/examples/modal/ModalExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/modal/ModalFooterSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/modal/ModalNestedExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/modal/ModalOpenExample.vue
+++ b/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" />
--- a/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
+++ b/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',
--- a/docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/popover/PopoverOpenExample.vue
+++ b/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" />
--- a/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
+++ b/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
    }
  }
 ])
--- a/docs/app/components/content/examples/select/SelectItemsChipExample.vue
+++ b/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
    }
  }
 ])
--- a/docs/app/components/content/examples/slideover/SlideoverExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/slideover/SlideoverNestedExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/slideover/SlideoverOpenExample.vue
+++ b/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" />
--- a/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
+++ b/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>

--- a/docs/app/components/content/examples/toast/ToastActionsExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastAvatarExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastCloseExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastCloseIconExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastColorExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastDescriptionExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastIconExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toast/ToastTitleExample.vue
+++ b/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>
--- a/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
+++ b/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"
--- a/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
+++ b/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"
--- a/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
+++ b/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"
--- a/docs/app/components/content/examples/tooltip/TooltipOpenExample.vue
+++ b/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>