chore(deps): update @nuxt/ui-pro (#3255)

---------

Co-authored-by: Farnabaz <[email protected]>

Author: benjamincanac

docs/app/app.config.ts

@@ -10,14 +10,14 @@ export default defineAppConfig({
     pageHero: {
       slots: {
         title: 'font-semibold sm:text-6xl',
-        description: 'sm:text-lg text-[var(--ui-text-toned)] max-w-5xl mx-auto',
+        description: 'sm:text-lg text-(--ui-text-toned) max-w-5xl mx-auto',
         container: 'py-16 sm:py-20 lg:py-24',
       },
     },
     pageSection: {
       slots: {
         title: 'font-semibold lg:text-4xl',
-        featureLeadingIcon: 'text-[var(--ui-text-highlighted)]',
+        featureLeadingIcon: 'text-(--ui-text-highlighted)',
       },
     },
   },

docs/app/assets/css/main.css

@@ -1,9 +1,9 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
-@source "../../../content";
+@source "../../../content/**/*.md";
 
-@theme {
+@theme static {
   --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;

docs/app/components/AppFooter.vue

@@ -30,17 +30,17 @@ const route = useRoute()
         v-if="route.path.startsWith('/pro')"
         to="https://content.nuxt.com/pro/purchase"
         target="_blank"
-        class="text-sm text-[--ui-text-muted]"
+        class="text-sm text-(--ui-text-muted)"
       >
-        Purchase <span class="text-[--ui-text-highlighted]">Nuxt Content Pro</span>
+        Purchase <span class="text-(--ui-text-highlighted)">Nuxt Content Pro</span>
       </NuxtLink>
       <NuxtLink
         v-else
         to="https://github.com/nuxt/content"
         target="_blank"
-        class="text-sm text-[--ui-text-muted]"
+        class="text-sm text-(--ui-text-muted)"
       >
-        Published under <span class="text-[--ui-text-highlighted]">MIT License</span>
+        Published under <span class="text-(--ui-text-highlighted)">MIT License</span>
       </NuxtLink>
     </template>
 

docs/app/components/AppHeader.vue

@@ -17,7 +17,7 @@ const linksWithoutIcon = computed(() => links.value.map(({ icon, ...link }) => l
     <template #left>
       <NuxtLink
         to="/"
-        class="flex items-end gap-2 font-bold text-xl text-[--ui-text-highlighted] min-w-0"
+        class="flex items-end gap-2 font-bold text-xl text-(--ui-text-highlighted) min-w-0"
         aria-label="Nuxt Content"
       >
         <AppLogo class="w-auto h-6 shrink-0" />
@@ -35,7 +35,7 @@ const linksWithoutIcon = computed(() => links.value.map(({ icon, ...link }) => l
             trailing-icon="i-lucide-chevron-down"
             size="xs"
             class="-mb-[3px] font-semibold rounded-full truncate hidden sm:flex"
-            :class="[open && 'bg-[var(--ui-primary)]/15 ']"
+            :class="[open && 'bg-(--ui-primary)/15 ']"
             :ui="{
               trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' '),
             }"

docs/app/components/PreviewCard.vue

@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="px-4 py-1 border rounded-b-md border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] bg-[var(--ui-color-neutral-50)] dark:bg-[var(--ui-color-neutral-800)] dark:text-white"
+    class="px-4 py-1 border rounded-b-md border-(--ui-border-muted) bg-(--ui-bg-muted) dark:text-white"
   >
     <slot />
   </div>

docs/app/components/post/PostPage.vue

@@ -92,7 +92,7 @@ function copyLink() {
                 variant="outline"
                 color="neutral"
               />
-              <time class="text-[var(--ui-text)]">{{ formatDateByLocale(post.date) }}</time>
+              <time class="text-(--ui-text)">{{ formatDateByLocale(post.date) }}</time>
             </div>
           </div>
         </template>

docs/app/pages/changelog/index.vue

@@ -96,11 +96,11 @@ watch(() => arrivedState.bottom, () => {
                 <div class="relative hidden lg:flex lg:min-w-[150px]">
                   <div
                     ref="dots"
-                    class="hidden w-2 h-2 rounded-full lg:block bg-[var(--ui-primary)]"
+                    class="hidden w-2 h-2 rounded-full lg:block bg-(--ui-primary)"
                     :class="{ neon: index === 0 }"
                   />
 
-                  <div class="absolute left-[3.5px] top-0.5 h-full w-[1px] bg-[var(--ui-primary)]" />
+                  <div class="absolute left-[3.5px] top-0.5 h-full w-[1px] bg-(--ui-primary)" />
                 </div>
                 <div class="pb-32">
                   <UBlogPost

docs/app/pages/docs/[...slug].vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content'
+import { kebabCase } from 'scule'
 import { findPageHeadline } from '#ui-pro/utils/content'
 
 const route = useRoute()
@@ -68,6 +69,7 @@ const communityLinks = computed(() => [{
       <template #description>
         <MDC
           v-if="page.description"
+          :cache-key="`${kebabCase(route.path)}-description`"
           :value="page.description"
           unwrap="p"
         />

docs/app/pages/studio/pricing.vue

@@ -69,14 +69,14 @@ const data = computed(() => {
 const cell = (type: 'solo' | 'team' | 'unlimited', row: any) => {
   const value = row.original[type]
   const color = value === 'Coming soon'
-    ? '!text-[var(--ui-text-muted)]'
-    : type === 'team' ? 'text-[var(--ui-primary)]' : 'text-[var(--ui-text-highlighted)]'
+    ? '!text-(--ui-text-muted)'
+    : type === 'team' ? 'text-(--ui-primary)' : 'text-(--ui-text-highlighted)'
   const background = type === 'team' ? 'bg-gray-300/10 dark:bg-gray-800/50' : ''
-  const borderBottom = row.original.main ? 'border-b border-[var(--ui-color-neutral-100)] dark:border-[var(--ui-color-neutral-800)]' : ''
-  const borderSide = type === 'team' ? 'border-l border-r !border-r-[var(--ui-primary)] !border-l-[var(--ui-primary)]' : ''
-  const borderClosed = type === 'team' && row.original.title?.includes('Commit') ? 'border-b border-b-[var(--ui-primary)] rounded-b-lg' : ''
+  const borderBottom = row.original.main ? 'border-b border-(--ui-color-neutral-100) dark:border-(--ui-color-neutral-800)' : ''
+  const borderSide = type === 'team' ? 'border-l border-r !border-r-(--ui-primary) !border-l-(--ui-primary)' : ''
+  const borderClosed = type === 'team' && row.original.title?.includes('Commit') ? 'border-b border-b-(--ui-primary) rounded-b-lg' : ''
 
-  return h('div', { class: `flex justify-center border-primary p-4 text-[var(--ui-text-highlighted)] ${color} ${background} ${borderBottom} ${borderSide} ${borderClosed}` },
+  return h('div', { class: `flex justify-center border-primary p-4 text-(--ui-text-highlighted) ${color} ${background} ${borderBottom} ${borderSide} ${borderClosed}` },
     typeof value === 'string'
       ? h('span', { class: 'h-5' }, value)
       : value === true
@@ -86,11 +86,11 @@ const cell = (type: 'solo' | 'team' | 'unlimited', row: any) => {
 }
 
 const header = (type: 'solo' | 'team' | 'unlimited') => {
-  const border = type === 'team' ? 'border-l border-r  border-t border-[var(--ui-primary)] rounded-t-lg' : ''
-  const gradient = type === 'team' ? 'bg-gradient-to-b from-[var(--ui-primary)]/10 to-gray-300/10 dark:from-[var(--ui-primary)]/20 dark:to-gray-800/50' : ''
+  const border = type === 'team' ? 'border-l border-r  border-t border-(--ui-primary) rounded-t-lg' : ''
+  const gradient = type === 'team' ? 'bg-gradient-to-b from-(--ui-primary)/10 to-gray-300/10 dark:from-(--ui-primary)/20 dark:to-gray-800/50' : ''
   return h('div', { class: `flex flex-col items-center p-4 ${border} ${gradient}` }, [
     h('span', { class: 'text-lg font-semibold' }, page.value?.plans?.[type]?.title),
-    h('span', { class: 'text-sm text-[var(--ui-text-muted)]' }, `${page.value?.plans?.[type]?.price}${page.value?.plans?.[type]?.cycle}`),
+    h('span', { class: 'text-sm text-(--ui-text-muted)' }, `${page.value?.plans?.[type]?.price}${page.value?.plans?.[type]?.cycle}`),
   ])
 }
 
@@ -100,8 +100,8 @@ const columns: TableColumn<Feature>[] = [
     header: '',
     cell: ({ row }) => {
       return row.original.main
-        ? h('span', { class: 'flex text-[var(--ui-text-highlighted)] font-medium border-b border-[var(--ui-color-neutral-100)] dark:border-[var(--ui-color-neutral-800)] p-4 w-full' }, row.original.title)
-        : h('span', { class: 'text-[var(--ui-text-muted)] p-4' }, row.original.title)
+        ? h('span', { class: 'flex text-(--ui-text-highlighted) font-medium border-b border-(--ui-color-neutral-100) dark:border-(--ui-color-neutral-800) p-4 w-full' }, row.original.title)
+        : h('span', { class: 'text-(--ui-text-muted) p-4' }, row.original.title)
     },
   },
   {
@@ -142,7 +142,7 @@ const columns: TableColumn<Feature>[] = [
     <UPageSection
       :title="page.onboarding.title"
       :ui="{
-        root: 'bg-[var(--ui-bg-elevated)]/25 border-t border-b border-[var(--ui-border)] mt-8 sm:mt-12 lg:mt-16',
+        root: 'bg-(--ui-bg-elevated)/25 border-t border-b border-(--ui-border) mt-8 sm:mt-12 lg:mt-16',
         container: 'py-8 sm:py-12 lg:py-16',
       }"
     >

docs/app/pages/templates/index.vue

@@ -36,7 +36,7 @@ useSeoMeta({
             :image="template.mainScreen"
             :to="`/templates/${template.slug}`"
             :ui="{
-              root: 'hover:ring-2 hover:ring-[var(--ui-primary)]',
+              root: 'hover:ring-2 hover:ring-(--ui-primary)',
               description: 'text-pretty',
               image: 'group-hover:scale-100',
               header: 'aspect-auto',