@@ -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) ' ' text-(--ui-text- accented) ' "
274+ :ui =" { title: ' text-accented' ' text-accented' "
275275 />
276276 </template >
277277 <UColorModeImage
0 commit comments