feat(module): define neutral utilities (#3629)

Co-authored-by: Sébastien Chopin <atinux@gmail.com>

playground/app/app.vue

@@ -89,9 +89,9 @@ useHead({
 <template>
   <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
     <UApp :toaster="appConfig.toaster">
-      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
-        <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
-        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
+      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-default" data-vaul-drawer-wrapper>
+        <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-default overflow-y-auto w-48 p-4" />
+        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-default [&>div]:min-w-min overflow-x-auto" />
 
         <div class="fixed top-15 lg:top-3 end-4 flex items-center gap-2">
           <ClientOnly v-if="!colorMode?.forced">

playground/app/components/Placeholder.vue

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

playground/app/pages/components/accordion.vue

@@ -33,18 +33,18 @@ const items = [{
   <UCard :ui="{ body: 'p-0 sm:p-0' }">
     <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
       <template #body="{ item }">
-        <p class="text-(--ui-text-muted)">
+        <p class="text-muted">
           {{ item.content }}
         </p>
       </template>
 
       <template #custom="{ item }">
-        <p class="text-(--ui-text-muted)">
+        <p class="text-muted">
           Custom: {{ item.content }}
         </p>
       </template>
       <template #custom-body="{ item }">
-        <p class="text-(--ui-text-muted)">
+        <p class="text-muted">
           Custom: {{ item.content }}
         </p>
       </template>

playground/app/pages/components/chip.vue

@@ -18,7 +18,7 @@ const items = [{
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex items-center gap-2">
-      <UChip v-for="position in positions" :key="position" :position="position">
+      <UChip v-for="position in positions" :key="position" :position="position" color="neutral">
         <UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
       </UChip>
     </div>

playground/app/pages/components/command-palette.vue

@@ -138,7 +138,7 @@ defineShortcuts({
         <UButton label="Open drawer" color="neutral" variant="outline" />
 
         <template #content>
-          <ReuseTemplate class="border-t border-(--ui-border) mt-4" />
+          <ReuseTemplate class="border-t border-default mt-4" />
         </template>
       </UDrawer>
 

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

@@ -106,13 +106,13 @@ defineShortcuts(extractShortcuts(items.value))
     </div>
 
     <UContextMenu :items="items" :ui="{ content: 'w-48' }" :size="size">
-      <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
+      <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
         Right click here
       </div>
     </UContextMenu>
 
     <UContextMenu :items="itemsWithColor" :ui="{ content: 'w-48' }" :size="size">
-      <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
+      <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
         Color right click here
       </div>
     </UContextMenu>

playground/app/pages/components/dropdown-menu.vue

@@ -144,7 +144,7 @@ defineShortcuts(extractShortcuts(items.value))
         <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
 
         <template #custom-trailing>
-          <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-(--ui-primary)" />
+          <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-primary" />
         </template>
       </UDropdownMenu>
 

playground/app/pages/components/form.vue

@@ -54,7 +54,7 @@ const disabled = ref(false)
       <FormExampleNestedList />
     </div>
 
-    <div class="border border-(--ui-border) rounded-lg">
+    <div class="border border-default rounded-lg">
       <div class="py-2 px-4 flex gap-4 items-center">
         <UFormField label="Validate on" class="flex items-center gap-2">
           <USelectMenu v-model="validateOn" :items="['input', 'change', 'blur']" multiple class="w-48" />
@@ -62,7 +62,7 @@ const disabled = ref(false)
         <UCheckbox v-model="disabled" label="Disabled" />
       </div>
 
-      <FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-(--ui-border) p-4" />
+      <FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-default p-4" />
     </div>
   </div>
 </template>

playground/app/pages/components/link.vue

@@ -8,7 +8,7 @@
       <ULink active>
         Button active
       </ULink>
-      <ULink active class="font-medium" active-class="text-(--ui-text-highlighted)">
+      <ULink active class="font-medium" active-class="text-highlighted">
         Button active with class
       </ULink>
       <ULink active disabled>
@@ -18,7 +18,7 @@
       <ULink>
         Button inactive
       </ULink>
-      <ULink class="font-medium" inactive-class="hover:text-(--ui-primary)">
+      <ULink class="font-medium" inactive-class="hover:text-primary">
         Button inactive with class
       </ULink>
       <ULink disabled>
@@ -34,7 +34,7 @@
       <ULink to="/components/link">
         Link active
       </ULink>
-      <ULink to="/components/link" class="font-medium" active-class="text-(--ui-text-highlighted)">
+      <ULink to="/components/link" class="font-medium" active-class="text-highlighted">
         Link active with class
       </ULink>
       <ULink to="/components/link" disabled>
@@ -44,7 +44,7 @@
       <ULink to="/components/button">
         Link inactive
       </ULink>
-      <ULink to="/components/button" class="font-medium" inactive-class="hover:text-(--ui-primary)">
+      <ULink to="/components/button" class="font-medium" inactive-class="hover:text-primary">
         Link inactive with class
       </ULink>
       <ULink to="/components/button" disabled>

playground/app/pages/components/navigation-menu.vue

@@ -112,7 +112,7 @@ const items = [
       :content-orientation="contentOrientation"
       :highlight="highlight"
       :highlight-color="highlightColor"
-      :class="highlight && 'data-[orientation=horizontal]:border-b border-(--ui-border)'"
+      :class="highlight && 'data-[orientation=horizontal]:border-b border-default'"
       class="data-[orientation=vertical]:data-[collapsed=false]:w-48"
     />
   </div>

playground/app/pages/components/separator.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-4">
     <div>
-      <p class="font-semibold text-(--ui-text-highlighted)">
+      <p class="font-semibold text-highlighted">
         Nuxt UI
       </p>
       <p>An open-source UI component library.</p>

playground/app/pages/components/table.vue

@@ -339,10 +339,10 @@ onMounted(() => {
         getPaginationRowModel: getPaginationRowModel()
       }"
       :ui="{
-        tr: 'divide-x divide-(--ui-border)'
+        tr: 'divide-x divide-default'
       }"
       sticky
-      class="border border-(--ui-border-accented) rounded-sm"
+      class="border border-accented rounded-sm"
       @select="onSelect"
     >
       <template #expanded="{ row }">
@@ -351,7 +351,7 @@ onMounted(() => {
     </UTable>
 
     <div class="flex items-center justify-between gap-3">
-      <div class="text-sm text-(--ui-text-muted)">
+      <div class="text-sm text-muted">
         {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
         {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
       </div>

playground/app/pages/components/tabs.vue

@@ -57,7 +57,7 @@ const items = [{
         class="w-96"
       >
         <template #custom="{ item }">
-          <span class="text-(--ui-text-muted)">Custom: {{ item.content }}</span>
+          <span class="text-muted">Custom: {{ item.content }}</span>
         </template>
 
         <template #list-trailing>

playground/app/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-center">
-    <h1 class="font-semibold mb-1">
+    <h1 class="font-semibold text-primary mb-1">
       Playground
     </h1>