@@ -89,28 +89,28 @@ onMounted(() => {
8989 v-for =" i in [1, 2, 3, 4]"
9090 :key =" i"
9191 :src =" `/images/landing/companies/logo-${i}-dark.svg`"
92- class =" bg-(--ui-bg- elevated) p-[5px] hidden dark:inline-flex"
92+ class =" bg-elevated p-[5px] hidden dark:inline-flex"
9393 />
9494 <UAvatar
9595 v-for =" i in [1, 2, 3, 4]"
9696 :key =" i"
9797 :src =" `/images/landing/companies/logo-${i}-light.svg`"
98- class =" bg-(--ui-bg- elevated) p-[5px] dark:hidden"
98+ class =" bg-elevated p-[5px] dark:hidden"
9999 />
100100 <UAvatar text =" ..."
101101 </UAvatarGroup >
102- <span class =" text-sm text-(--ui-text- elevated) "
103- Used and loved by <span class =" font-medium text-(--ui-text- highlighted) " span >.
102+ <span class =" text-sm text-elevated"
103+ Used and loved by <span class =" font-medium text-highlighted" span >.
104104 </span >
105105 </div >
106106 <USeparator type =" dashed" class =" w-24"
107107 <div class =" flex flex-col gap-y-2"
108- <p class =" text-sm text-(--ui-text- highlighted) "
108+ <p class =" text-sm text-highlighted"
109109 “Nuxt on Cloudflare infra with minimal effort - this is huge!”
110110 </p >
111- <div class =" flex items-center flex-wrap gap-2 text-sm text-(--ui-text- muted) "
111+ <div class =" flex items-center flex-wrap gap-2 text-sm text-muted"
112112 <UAvatar src =" https://avatars.githubusercontent.com/u/499550?v=4" size =" xs" alt =" Evan You"
113- <span class =" font-medium text-(--ui-text) " span >
113+ <span class =" font-medium text-default " span >
114114 <span >•</span >
115115 <span >Author of Vue.js and Vite.</span >
116116 </div >
@@ -120,7 +120,7 @@ onMounted(() => {
120120
121121 <UCard
122122 variant =" soft"
123- class =" hidden lg:block max-2xl:absolute border border-(--ui-border- accented) bg-(--ui-bg- accented) /40 max-2xl:-right-30 [--padding-card:--spacing(3)] rounded-[calc(theme(borderRadius.lg)+var(--padding-card))] 2xl:scale-110 2xl:origin-right"
123+ class =" hidden lg:block max-2xl:absolute border border-accented bg-accented/40 max-2xl:-right-30 [--padding-card:--spacing(3)] rounded-[calc(theme(borderRadius.lg)+var(--padding-card))] 2xl:scale-110 2xl:origin-right"
124124 :ui =" {
125125 body: 'lg:pl-(--padding-card) lg:pt-(--padding-card) lg:pb-(--padding-card) lg:pr-0 2xl:pr-(--padding-card) rounded-(--padding-card)'
126126 }"
@@ -162,19 +162,19 @@ onMounted(() => {
162162 :class =" { 'opacity-75': feature.soon }"
163163 >
164164 <NuxtLink v-if =" feature.to" :to =" feature.to" class =" absolute inset-0 z-10"
165- <div class =" p-[3px] border border-dashed rounded-md border-(--ui-border- accented) "
166- <div class =" bg-(--ui-bg- muted) p-1.5 rounded-md flex items-center justify-center border border-(--ui-border) "
165+ <div class =" p-[3px] border border-dashed rounded-md border-accented"
166+ <div class =" bg-muted p-1.5 rounded-md flex items-center justify-center border border-default "
167167 <UIcon :name =" feature.icon" class =" size-6 flex-shrink-0"
168168 </div >
169169 </div >
170170 <div class =" flex flex-col"
171- <h2 class =" font-medium text-(--ui-text- highlighted) inline-flex items-center gap-x-1"
171+ <h2 class =" font-medium text-highlighted inline-flex items-center gap-x-1"
172172 {{ feature.title }} <UBadge v-if =" feature.soon" color =" neutral" variant =" subtle" size =" sm" class =" rounded-full"
173173 Soon
174174 </UBadge >
175175 <UIcon v-if =" feature.to" name =" i-lucide-arrow-right" class =" size-4 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-200 -translate-x-1 group-hover:translate-x-0"
176176 </h2 >
177- <p class =" text-sm text-(--ui-text- muted) "
177+ <p class =" text-sm text-muted"
178178 {{ feature.description }}
179179 </p >
180180 </div >
@@ -202,7 +202,7 @@ onMounted(() => {
202202 :key =" index"
203203 v-bind =" feature"
204204 orientation =" vertical"
205- :ui =" { leadingIcon: 'text-(--ui-text- highlighted) ' }"
205+ :ui =" { leadingIcon: 'text-highlighted' }"
206206 />
207207 </template >
208208 </UPageSection >
@@ -226,10 +226,10 @@ onMounted(() => {
226226 lazy
227227 />
228228 <div >
229- <h2 class =" font-medium text-(--ui-text- highlighted) "
229+ <h2 class =" font-medium text-highlighted"
230230 {{ step.title }}
231231 </h2 >
232- <p class =" text-sm text-(--ui-text- muted) "
232+ <p class =" text-sm text-muted"
233233 {{ step.description }}
234234 </p >
235235 </div >
@@ -259,8 +259,8 @@ onMounted(() => {
259259 >
260260 <template #headline >
261261 <div class =" flex items-center gap-1.5"
262- <UIcon :name =" section.headline.icon" class =" w-5 h-5 flex-shrink-0 text-(--ui-text- highlighted) dark:text-(--ui- primary) "
263- <span class =" font-medium text-xs uppercase text-(--ui-text- accented) " span >
262+ <UIcon :name =" section.headline.icon" class =" w-5 h-5 flex-shrink-0 text-highlighted dark:text-primary"
263+ <span class =" font-medium text-xs uppercase text-accented" span >
264264 </div >
265265 </template >
266266 <template #description >
@@ -271,7 +271,7 @@ onMounted(() => {
271271 v-for =" (feature, i) in section.features"
272272 :key =" i"
273273 v-bind =" feature"
274- :ui =" { title: 'text-(--ui-text- accented) ', leadingIcon: 'text-(--ui-text- accented) ' }"
274+ :ui =" { title: 'text-accented', leadingIcon: 'text-accented' }"
275275 />
276276 </template >
277277 <UColorModeImage
0 commit comments