From cbaf9ec7760be8c42ee210094f784ec0e3679664 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 16 Feb 2025 12:49:08 +0100
Subject: [PATCH] docs(app): clean css variables

---
 docs/app/pages/pro/activate.vue  | 4 ++--
 docs/app/pages/pro/index.vue     | 4 ++--
 docs/app/pages/pro/pricing.vue   | 4 ++--
 docs/app/pages/pro/templates.vue | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/app/pages/pro/activate.vue b/docs/app/pages/pro/activate.vue
index 3695c6f2..a0877a26 100644
--- a/docs/app/pages/pro/activate.vue
+++ b/docs/app/pages/pro/activate.vue
@@ -72,7 +72,7 @@ onMounted(() => {
 <template>
   <UPageHero headline="License Activation" :title="title" :description="description">
     <template #top>
-      <div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+      <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
       <StarsBg />
     </template>
     <div>
@@ -90,7 +90,7 @@ onMounted(() => {
           <UFormField label="GitHub Username" name="username">
             <UInput v-model="state.username" autocomplete="off" :ui="{ root: 'flex' }" />
           </UFormField>
-          <UButton type="submit" :loading="activating" :disabled="state.license.length !== 36 || !state.username">
+          <UButton type="submit" :loading="activating" :disabled="state.license?.length !== 36 || !state.username">
             Activate the license
           </UButton>
           <UAlert v-if="successMessage" color="success" variant="subtle" :title="successMessage">
diff --git a/docs/app/pages/pro/index.vue b/docs/app/pages/pro/index.vue
index 95d94d71..a109abd2 100644
--- a/docs/app/pages/pro/index.vue
+++ b/docs/app/pages/pro/index.vue
@@ -27,7 +27,7 @@ defineOgImageComponent('Docs', {
         <MDC :value="page.hero.description" unwrap="p" />
       </template>
       <template #top>
-        <div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
         <StarsBg />
       </template>
 
@@ -103,7 +103,7 @@ defineOgImageComponent('Docs', {
       variant="naked"
       class="overflow-hidden"
     >
-      <div class="absolute rounded-full dark:bg-[var(--ui-primary)] blur-[250px] size-40 sm:size-50 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+      <div class="absolute rounded-full dark:bg-(--ui-primary) blur-[250px] size-40 sm:size-50 transform -translate-x-1/2 left-1/2 -translate-y-80" />
 
       <StarsBg />
     </UPageCTA>
diff --git a/docs/app/pages/pro/pricing.vue b/docs/app/pages/pro/pricing.vue
index 53da6c17..457ae033 100644
--- a/docs/app/pages/pro/pricing.vue
+++ b/docs/app/pages/pro/pricing.vue
@@ -23,7 +23,7 @@ defineOgImageComponent('Docs', {
         <MDC :value="page.pricing.title" unwrap="p" />
       </template>
       <template #top>
-        <div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
         <StarsBg />
       </template>
       <UContainer>
@@ -98,7 +98,7 @@ defineOgImageComponent('Docs', {
     <UPageSection
       id="faq"
       v-bind="page.faq"
-      class="scroll-mt-[var(--header-height)]"
+      class="scroll-mt-(--ui-header-height)"
     >
       <UPageAccordion
         multiple
diff --git a/docs/app/pages/pro/templates.vue b/docs/app/pages/pro/templates.vue
index cc0deda3..3010ee18 100644
--- a/docs/app/pages/pro/templates.vue
+++ b/docs/app/pages/pro/templates.vue
@@ -20,7 +20,7 @@ defineOgImageComponent('Docs', {
   <div class="relative">
     <UPageHero :links="page.links">
       <template #top>
-        <div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
         <StarsBg />
       </template>