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

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

docs/app/pages/pro/.content/pricing.yml

@@ -2,7 +2,7 @@ title: Nuxt UI Pro Pricing
 description: Start for free in development mode, then upgrade to a paid plan to unlock the full features of Nuxt UI Pro when you are ready to launch.
 pricing:
   headline: Pricing
-  title: Upgrade to Nuxt UI [Pro]{class="text-(--ui-primary)"}.
+  title: Upgrade to Nuxt UI [Pro]{class="text-primary"}.
   description: On top of 40+ open source components from Nuxt UI, Pro gives you access to 50+ premium Vue components to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
   freePlan:
     title: Free in development

docs/app/pages/pro/.content/pro.yml

@@ -1,8 +1,8 @@
 title: Build faster with Nuxt UI Pro.
 description: A collection of premium Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your application.
 hero:
-  title: Build faster with Nuxt UI [Pro]{class="text-(--ui-primary)"}.
-  description: A collection of premium Vue components, composables and utils built on top of Nuxt UI. :br Focused on structure and layout, these [responsive components]{class="text-(--ui-text)"} are designed to be the perfect [building blocks for your next idea]{class="text-(--ui-text)"}.
+  title: Build faster with Nuxt UI [Pro]{class="text-primary"}.
+  description: A collection of premium Vue components, composables and utils built on top of Nuxt UI. :br Focused on structure and layout, these [responsive components]{class="text-default"} are designed to be the perfect [building blocks for your next idea]{class="text-default"}.
   links:
     - label: Buy a license
       size: xl
@@ -62,7 +62,7 @@ testimonial:
 #     avatar:
 #       src: https://github.com/benjamincanac.png
 mainSection:
-  title: Meet the [Pro Components]{class="text-(--ui-primary)"}.
+  title: Meet the [Pro Components]{class="text-primary"}.
   description: Code with 50+ components and sections of Nuxt UI Pro to build your next application by reducing the amount of code you need to write.
 sections:
   - title: The freedom to build anything

docs/app/pages/pro/.content/templates.yml

@@ -1,7 +1,7 @@
 title: Official Nuxt UI Pro Templates
 description: 'Ready to use templates powered by our premium Vue components and Nuxt Content. The templates are responsive, accessible and easy to customize so you can get started in no time.'
 hero:
-  title: Ship [in minutes]{.text-(--ui-primary)} with :br Nuxt UI Pro Templates
+  title: Ship [in minutes]{.text-primary} with :br Nuxt UI Pro Templates
   description: 'Ready to use templates powered by our premium Vue components and Nuxt Content.<br class="hidden lg:block"> The templates are responsive, accessible and easy to customize so you can get started in no time.'
 navigation: false
 links:

docs/app/pages/pro/activate.vue

@@ -73,9 +73,9 @@ onMounted(() => {
     <UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative overflow-hidden', wrapper: 'lg:px-12', description: 'text-pretty' }">
       <LazyStarsBg />
 
-      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
 
-      <div class="px-4 py-10 lg:border border-(--ui-border) bg-(--ui-bg)">
+      <div class="px-4 py-10 lg:border border-default bg-default">
         <div class="max-w-xl mx-auto">
           <UForm
             :schema="schema"

docs/app/pages/pro/index.vue

@@ -35,9 +35,9 @@ useSeoMeta({
       <LazyStarsBg />
 
       <Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
-        <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+        <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
       </Motion>
-      <div class="relative h-[400px] border border-(--ui-border) bg-(--ui-bg-muted) overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
+      <div class="relative h-[400px] border border-default bg-muted overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
         <UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -left-[100px] -top-[300px] h-[940px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
           <img
             v-for="i in 4"
@@ -46,7 +46,7 @@ useSeoMeta({
             width="460"
             height="258"
             :alt="`Nuxt UI Pro Screenshot ${i}`"
-            class="aspect-video border border-(--ui-border) rounded-lg bg-white"
+            class="aspect-video border border-default rounded-lg bg-white"
           >
         </UPageMarquee>
         <UPageMarquee orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -top-[400px] left-[480px] h-[1160px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -57,7 +57,7 @@ useSeoMeta({
             width="460"
             height="258"
             :alt="`Nuxt UI Pro Screenshot ${i}`"
-            class="aspect-video border border-(--ui-border) rounded-lg bg-white"
+            class="aspect-video border border-default rounded-lg bg-white"
           >
         </UPageMarquee>
         <UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: 'hidden md:flex [--duration:40s] absolute w-[460px] -top-[300px] left-[1020px] h-[1060px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -68,7 +68,7 @@ useSeoMeta({
             width="460"
             height="258"
             :alt="`Nuxt UI Pro Screenshot ${i}`"
-            class="aspect-video border border-(--ui-border) rounded-lg bg-white"
+            class="aspect-video border border-default rounded-lg bg-white"
           >
         </UPageMarquee>
       </div>
@@ -101,10 +101,10 @@ useSeoMeta({
         container: 'relative',
         wrapper: 'sm:px-8'
       }"
-      class="border-t border-(--ui-border)"
+      class="border-t border-default"
     >
       <Motion as-child :initial="{ height: 0 }" :while-in-view="{ height: 'auto' }" :transition="{ delay: 0.4, duration: 1 }">
-        <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+        <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
       </Motion>
     </UPageSection>
 
@@ -116,7 +116,7 @@ useSeoMeta({
         wrapper: 'grid grid-cols-1 lg:grid-cols-2',
         description: 'lg:mt-0' }"
       orientation="horizontal"
-      class="rounded-none border-t border-(--ui-border) bg-gradient-to-b from-(--ui-bg-elevated)/50 to-(--ui-bg)"
+      class="rounded-none border-t border-default bg-gradient-to-b from-elevated/50 to-default"
     >
       <template #title>
         <MDC :value="page.mainSection.title" tag="span" unwrap="p" cache-key="pro-main-section-title" />
@@ -134,7 +134,7 @@ useSeoMeta({
       :reverse="section.reverse"
       :features="section.features"
       orientation="horizontal"
-      :class="{ 'border-b border-(--ui-border)': index === page.sections.length - 1 }"
+      :class="{ 'border-b border-default': index === page.sections.length - 1 }"
       :ui="{
         container: index === 0 ? 'pb-0 sm:pb-0 lg:pb-0 py-16 sm:py-16 lg:py-16' : ''
       }"
@@ -145,10 +145,10 @@ useSeoMeta({
     <UPageSection
       id="templates"
       v-bind="page.templates"
-      class="overflow-hidden border-x border-(--ui-border)"
+      class="overflow-hidden border-x border-default"
       :ui="{ container: 'relative' }"
     >
-      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
       <UCarousel
         v-slot="{ item }"
         loop
@@ -160,7 +160,7 @@ useSeoMeta({
         :ui="{
           item: 'basis-1/2',
           container: 'py-2',
-          viewport: 'border-x border-(--ui-border)',
+          viewport: 'border-x border-default',
           arrows: 'hidden 2xl:block'
         }"
       >
@@ -181,7 +181,7 @@ useSeoMeta({
             :light="item.thumbnail.light"
             :dark="item.thumbnail.dark"
             :alt="item.title"
-            class="rounded-lg w-full border border-(--ui-border) aspect-video"
+            class="rounded-lg w-full border border-default aspect-video"
             loading="lazy"
           />
         </UPageCard>

docs/app/pages/pro/pricing.vue

@@ -29,13 +29,13 @@ useSeoMeta({
 
       <LazyStarsBg />
 
-      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
 
-      <div class="flex flex-col bg-(--ui-bg) gap-8 lg:gap-0">
+      <div class="flex flex-col bg-default gap-8 lg:gap-0">
         <UPricingPlan
           v-bind="page.pricing.freePlan"
           variant="naked"
-          class="lg:rounded-none border-x border-(--ui-border) border-t border-b lg:border-b-0"
+          class="lg:rounded-none border-x border-default border-t border-b lg:border-b-0"
         />
         <UPricingPlans compact>
           <UPricingPlan
@@ -48,7 +48,7 @@ useSeoMeta({
             :billing-period="plan.billing_period"
             :billing-cycle="plan.billing_cycle"
             :variant="plan.highlight ? 'soft' : 'outline'"
-            :class="['lg:rounded-none', { 'border-2 lg:border lg:border-x-0 border-(--ui-primary) lg:border-(--ui-border)': plan.highlight }]"
+            :class="['lg:rounded-none', { 'border-2 lg:border lg:border-x-0 border-primary lg:border-default': plan.highlight }]"
             :features="plan.features"
             :button="plan.button"
           />
@@ -58,12 +58,12 @@ useSeoMeta({
           variant="naked"
           :billing-period="page.pricing.figma.billing_period"
           :billing-cycle="page.pricing.figma.billing_cycle"
-          class="lg:rounded-none border lg:border-y-0 border-(--ui-border)"
+          class="lg:rounded-none border lg:border-y-0 border-default"
         >
           <template #features>
             <li v-for="(feature, index) in page.pricing.figma.features" :key="index" class="flex items-center gap-2 min-w-0">
-              <UIcon name="i-lucide-circle-check" class="size-5 text-(--ui-primary) shrink-0" />
-              <MDC :value="feature" unwrap="p" class="text-sm truncate text-(--ui-text-toned)" :cache-key="`pro-pricing-figma-feature-${index}`" />
+              <UIcon name="i-lucide-circle-check" class="size-5 text-primary shrink-0" />
+              <MDC :value="feature" unwrap="p" class="text-sm truncate text-toned" :cache-key="`pro-pricing-figma-feature-${index}`" />
             </li>
           </template>
         </UPricingPlan>
@@ -73,7 +73,7 @@ useSeoMeta({
     <UPageSection
       id="testimonials"
       v-bind="page.testimonials"
-      class="border-y border-(--ui-border)"
+      class="border-y border-default"
     >
       <UPageMarquee pause-on-hover :ui="{ root: '[--duration:40s]' }">
         <img
@@ -110,7 +110,7 @@ useSeoMeta({
       class="scroll-mt-(--ui-header-height)"
       :ui="{ container: 'relative' }"
     >
-      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
       <UPageAccordion
         multiple
         :items="(page.faq.items as any[])"

docs/app/pages/pro/templates.vue

@@ -20,7 +20,7 @@ useSeoMeta({
     <UPageHero :links="page.links" :ui="{ container: 'relative' }">
       <LazyStarsBg />
 
-      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
 
       <template #title>
         <MDC :value="page.hero.title" unwrap="p" cache-key="pro-templates-hero-title" />
@@ -38,10 +38,10 @@ useSeoMeta({
       :links="template.links"
       :features="template.features"
       orientation="horizontal"
-      class="lg:border-t border-(--ui-border)"
+      class="lg:border-t border-default"
       :ui="{
         title: 'lg:text-4xl',
-        wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
+        wrapper: 'lg:py-16 lg:border-r border-default order-last lg:pr-16',
         container: 'lg:py-0',
         links: 'gap-x-3'
       }"
@@ -50,12 +50,12 @@ useSeoMeta({
         <MDC :value="template.description" unwrap="p" :cache-key="`pro-templates-${index}-description`" />
       </template>
 
-      <div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
+      <div class="lg:border-x border-default h-full flex items-center lg:bg-muted/20">
         <Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
           <UColorModeImage
             v-if="template.thumbnail"
             v-bind="template.thumbnail"
-            class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-sm lg:rounded-none"
+            class="w-full h-auto border lg:border-y lg:border-x-0 border-default rounded-sm lg:rounded-none"
             :alt="`Template ${index} thumbnail`"
             width="656"
             height="369"