From 2ce25566857c559a8bef0163844df9ff40cb1162 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Thu, 2 Apr 2026 15:53:27 +0200
Subject: [PATCH] fix: tabs

---
 bo/components.d.ts                            |   1 +
 bo/src/app.config.ts                          |   3 -
 bo/src/assets/main.css                        |  17 +--
 bo/src/components/admin/ProductDetailView.vue | 126 +++++++++---------
 bo/src/components/customer/PageAddresses.vue  |   4 +-
 bo/src/components/customer/PageCarts.vue      |  12 +-
 bo/src/components/customer/PageProduct.vue    |   4 +-
 .../customer/PageProfileDetails.vue           |   6 +-
 .../customer/PageProfileDetailsAddInfo.vue    |   8 +-
 bo/src/views/LoginView.vue                    |   8 +-
 bo/src/views/PasswordRecoveryView.vue         |   4 +-
 bo/src/views/RegisterView.vue                 |   4 +-
 bo/src/views/ResetPasswordForm.vue            |   2 +-
 bo/src/views/VerifyEmailView.vue              |   2 +-
 14 files changed, 100 insertions(+), 101 deletions(-)

diff --git a/bo/components.d.ts b/bo/components.d.ts
index 7c39661..69cd141 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -58,5 +58,6 @@ declare module 'vue' {
     USelectMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue')['default']
     USidebar: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Sidebar.vue')['default']
     UTable: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Table.vue')['default']
+    UTabs: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Tabs.vue')['default']
   }
 }
diff --git a/bo/src/app.config.ts b/bo/src/app.config.ts
index c0be82b..7e88496 100644
--- a/bo/src/app.config.ts
+++ b/bo/src/app.config.ts
@@ -8,9 +8,6 @@ export const uiOptions: NuxtUIOptions = {
             }
         },
         button: {
-            slots: {
-                base: 'px-10!',
-            },
         },
         input: {
             slots: {
diff --git a/bo/src/assets/main.css b/bo/src/assets/main.css
index 13e3a47..c657abf 100644
--- a/bo/src/assets/main.css
+++ b/bo/src/assets/main.css
@@ -15,9 +15,9 @@ body {
 
 @theme {
   --main-light: #FFFEFB;
-  --second-light: #F5F6FA;
+  --second-light: #F8FAFC;
 
-  --main-dark: #212121;
+  --main-dark: #1A1A1A;
   --black: #1A1A1A;
 
   /* gray */
@@ -25,15 +25,15 @@ body {
   --gray-dark: #6B7280;
 
   /* borders */
-  --border-light: #E8E7E0;
-  --border-dark: #3F3E3D;
+  --border-light: #E2E8F0;
+  --border-dark: #334155;
 
   /* text */
-  --accent-green-dark: #22c55e;
-  --accent-green-light: #16A34A;
-  --accent-blue-dark: #3B82F6;
-  --accent-blue-light: #2563EB;
+  --accent-blue-dark: #0EA5E91A;
+  --accent-blue-light: #E0F2FE;
   --text-dark: #FFFEFB;
+  --text-sky-light: #0284C7;
+  --text-sky-dark: #38BDF8;
 
   /* placeholder */
   --placeholder: #8C8C8A;
@@ -55,6 +55,7 @@ body {
   --ui-error: var(--dark-red);
   --border: var(--border-dark);
   --tw-border-style: var(--border-dark);
+  --ui-text-inverted: #fff;
 }
 
 .label-form {
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 67a6494..0ccfe5b 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -1,16 +1,16 @@
 <template>
   <component :is="Default || 'div'">
     <div class="flex items-center gap-2 mb-4">
-      <UIcon name="line-md:arrow-left" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
-      <p class="cursor-pointer text-(--accent-blue-light) dark:text-(--accent-blue-dark)" @click="backFromProduct()">
+      <UIcon name="line-md:arrow-left" class="text-(--text-sky-light) dark:text-(--text-sky-dark)" />
+      <p class="cursor-pointer text-(--text-sky-light) dark:text-(--text-sky-dark)" @click="backFromProduct()">
         Back to products</p>
     </div>
     <div class="container mx-auto ">
       <div
-        class=" gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        class=" gap-4 mb-6 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
         <div v-if="!isShowProductView" class="flex items-center justify-between">
           <div class="flex flex-col items-center gap-3" v-if="!isTranslations">
-            <p class="light:text-(--accent-green-light) dark:text-(--accent-green-dark) text-md whitespace-nowrap">
+            <p class="text-md whitespace-nowrap">
               Translate from Polish to :</p>
             <USelectMenu v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
               class="w-48 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm" :searchInput="false">
@@ -36,17 +36,16 @@
             </USelectMenu>
           </div>
 
-          <div class="flex gap-7">
+          <div class="flex gap-3">
             <UButton @click="() => {
               fetchForLanguage(toLangId)
               isShowProductView = true
-            }" v-if="isTranslations === false" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)"
-              color="neutral" variant="outline">
+            }" v-if="!isTranslations" class="text-(--text-sky-light) dark:text-(--text-sky-dark)" color="neutral"
+              variant="outline">
               <p class="dark:text-white"> Show product</p>
             </UButton>
-            <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
-              v-if="isTranslations === false"
-              class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) flex items-center! justify-center! px-12">
+            <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating" v-if="!isTranslations"
+              class="text-sky-600 bg-sky-100 dark:bg-(--accent-blue-dark) flex items-center! justify-center!">
               Translate
             </UButton>
             <div v-else class="flex gap-3">
@@ -95,12 +94,12 @@
             {{ productStore.productDescription.name || 'Product Name' }}
           </p>
           <p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
-          
+
           <div class="space-y-[10px]">
             <div class="flex items-center gap-1">
               <UIcon name="lets-icons:done-ring-round-fill"
                 class="text-[20px] light:text-(--accent-green-light) dark:text-(--accent-green-dark)" />
-              <p class="text-[16px] font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
+              <p class="text-[16px] font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
                 {{ productStore.productDescription.available_now }}
               </p>
             </div>
@@ -116,60 +115,57 @@
       </div>
 
       <div v-if="productStore.productDescription" class="mt-16">
-        <div class="flex gap-4 my-6">
-          <UButton @click="activeTab = 'description'"
-            :class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
-            variant="outline">
-            <p class="dark:text-white">Description</p>
-          </UButton>
+        <UTabs :items="items" v-model="activeTab" color="info" :content="true">
+          <template #description>
+            <div class="px-7">
+              <div class="flex items-center justify-end gap-3 mb-4">
+                <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
+                  class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
+                  <p class="text-white">Change Text</p>
+                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+                </UButton>
 
-          <UButton @click="activeTab = 'usage'"
-            :class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
-            variant="outline">
-            <p class="dark:text-white">Usage</p>
-          </UButton>
-        </div>
+                <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral"
+                  variant="outline" class="p-2.5 cursor-pointer">
+                  <p class="dark:text-white text-black">Save the edited text</p>
+                </UButton>
 
-        <div v-if="activeTab === 'usage'"
-          class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
+                <UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral"
+                  variant="outline" class="p-2.5 cursor-pointer">
+                  Cancel
+                </UButton>
+              </div>
 
-          <div class="flex justify-end items-center gap-3 mb-4">
-            <UButton v-if="!isEditing" @click="enableEdit"
-              class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-              <p class="text-white">Change Text</p>
-              <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
-            </UButton>
-            <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
-              <p class="dark:text-white text-black">Save the edited text</p>
-            </UButton>
-            <UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline"
-              class="p-2.5 cursor-pointer">
-              Cancel
-            </UButton>
-          </div>
-          <p ref="usageRef" v-html="productStore.productDescription.usage"
-            class="flex flex-col justify-center w-full text-start dark:text-white! text-black!"></p>
-        </div>
+              <div ref="description" v-html="productStore.productDescription.description"
+                class="flex flex-col justify-center dark:text-white text-black"></div>
+            </div>
+          </template>
 
-        <div v-if="activeTab === 'description'"
-          class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
-          <div class="flex items-center justify-end gap-3 mb-4">
-            <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
-              class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-              <p class="text-white">Change Text</p>
-              <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
-            </UButton>
-            <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral" variant="outline"
-              class="p-2.5 cursor-pointer">
-              <p class="dark:text-white text-black ">Save the edited text</p>
-            </UButton>
-            <UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral"
-              variant="outline" class="p-2.5 cursor-pointer">Cancel</UButton>
-          </div>
-          <div ref="descriptionRef" v-html="productStore.productDescription.description"
-            class="flex flex-col justify-center dark:text-white text-black">
-          </div>
-        </div>
+          <template #usage>
+            <div class="px-7">
+              <div class="flex justify-end items-center gap-3 mb-4">
+                <UButton v-if="!isEditing" @click="enableEdit"
+                  class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
+                  <p class="text-white">Change Text</p>
+                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+                </UButton>
+
+                <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline"
+                  class="p-2.5 cursor-pointer">
+                  <p class="dark:text-white text-black">Save the edited text</p>
+                </UButton>
+
+                <UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline"
+                  class="p-2.5 cursor-pointer">
+                  Cancel
+                </UButton>
+              </div>
+
+              <p ref="usage" v-html="productStore.productDescription.usage"
+                class="flex flex-col justify-center w-full text-start dark:text-white text-black"></p>
+            </div>
+          </template>
+        </UTabs>
       </div>
     </div>
   </component>
@@ -256,6 +252,10 @@ onMounted(async () => {
   }
 })
 
+const items = ref([
+  { label: 'Description', slot: 'description', name: 'description' },
+  { label: 'Usage', slot: 'usage', name: 'usage' }
+])
 
 // text edit
 const enableEdit = () => {
@@ -334,7 +334,7 @@ function removeInlineStylesFromAll(product) {
     })
     div.querySelectorAll('table').forEach(table => {
       table.querySelectorAll('tbody').forEach(tbody => {
-        tbody.style.setProperty('background-color', '#F5F6FA', 'important')
+        tbody.style.setProperty('background-color', '#F8FAFC', 'important')
         tbody.querySelectorAll('tr').forEach(tr => {
           tr.querySelectorAll('td').forEach(td => {
             td.style.setProperty('padding', '10px', 'important')
diff --git a/bo/src/components/customer/PageAddresses.vue b/bo/src/components/customer/PageAddresses.vue
index 2c18503..3e2dc2f 100644
--- a/bo/src/components/customer/PageAddresses.vue
+++ b/bo/src/components/customer/PageAddresses.vue
@@ -8,7 +8,7 @@
                     <UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
                         class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
                     <UIcon name="ic:baseline-search"
-                        class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) relative left-40" />
+                        class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark) relative left-40" />
                 </div>
                 <UButton color="primary" @click="openCreateModal"
                     class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
@@ -32,7 +32,7 @@
                     <UIcon name="material-symbols:delete" class="text-[18px]" />
                 </button>
                 <UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
-                    class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) text-[13px]">
+                    class="text-(--text-sky-light) dark:text-(--text-sky-dark) text-[13px]">
                     {{ t('edit') }}
                     <UIcon name="ic:sharp-edit" class="text-[15px]" />
                 </UButton>
diff --git a/bo/src/components/customer/PageCarts.vue b/bo/src/components/customer/PageCarts.vue
index 1df9313..4e3d43f 100644
--- a/bo/src/components/customer/PageCarts.vue
+++ b/bo/src/components/customer/PageCarts.vue
@@ -43,7 +43,7 @@
                 name: 'customer-product', params: {
                   product_id: '51'
                 }
-              }" class="inline-block mt-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
+              }" class="inline-block mt-4 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
                 {{ t('Continue Shopping') }}
               </RouterLink>
             </div>
@@ -72,7 +72,7 @@
             </div>
             <div class="flex justify-between mb-6">
               <span class="text-black dark:text-white font-semibold text-lg">{{ t('Total') }}</span>
-              <span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-bold text-lg">${{
+              <span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-bold text-lg">${{
                 cartStore.orderTotal.toFixed(2) }}</span>
             </div>
             <div class="flex flex-col gap-3">
@@ -103,7 +103,7 @@
                   ? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
                   : 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
                 <input type="radio" :value="address.id" v-model="selectedAddress"
-                  class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                  class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                 <div class="flex-1">
                   <p class="text-black dark:text-white font-medium">{{ address.street }}</p>
                   <p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode }}, {{ address.city }}</p>
@@ -115,7 +115,7 @@
               <UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
               <p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
               <RouterLink :to="{ name: 'addresses' }"
-                class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
+                class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
                 {{ t('Add Address') }}
               </RouterLink>
             </div>
@@ -131,11 +131,11 @@
                   ? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
                   : 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
                 <input type="radio" :value="method.id" v-model="selectedDeliveryMethod"
-                  class="w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                  class="w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                 <div class="flex-1">
                   <div class="flex justify-between items-center">
                     <span class="text-black dark:text-white font-medium">{{ method.name }}</span>
-                    <span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-medium">
+                    <span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-medium">
                       {{ method.price > 0 ? `$${method.price.toFixed(2)}` : t('Free') }}
                     </span>
                   </div>
diff --git a/bo/src/components/customer/PageProduct.vue b/bo/src/components/customer/PageProduct.vue
index 2ba96a0..0e10ce5 100644
--- a/bo/src/components/customer/PageProduct.vue
+++ b/bo/src/components/customer/PageProduct.vue
@@ -15,7 +15,7 @@
                 <p class="text-gray-600 dark:text-gray-300">
                     {{ productData.description }}
                 </p>
-                <div class="text-3xl font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
+                <div class="text-3xl font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
                     {{ productData.price }}
                 </div>
                 <div class="flex flex-col">
@@ -32,7 +32,7 @@
         </div>
         <div class="flex md:flex-row flex-col justify-between md:items-end items-start gap-5 md:gap-0 md:mb-8 mb-4">
             <div class="flex flex-col gap-3">
-                <span class="text-sm text-(--accent-blue-light) dark:text-(--accent-blue-dark) ">Colors:</span>
+                <span class="text-sm text-(--text-sky-light) dark:text-(--text-sky-dark) ">Colors:</span>
                 <div class="flex gap-2">
                     <button v-for="color in productData.colors" :key="color.id" @click="selectedColor = color"
                         class="w-10 h-10 border-2 transition-all" :class="selectedColor?.id === color.id
diff --git a/bo/src/components/customer/PageProfileDetails.vue b/bo/src/components/customer/PageProfileDetails.vue
index 0e406fc..ef345c0 100644
--- a/bo/src/components/customer/PageProfileDetails.vue
+++ b/bo/src/components/customer/PageProfileDetails.vue
@@ -24,7 +24,7 @@
                             class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
                             <h2 class="text-xl font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
                                 <UIcon name="mdi:domain"
-                                    class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                    class="text-[24px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                                 {{ t('Company Information') }}
                             </h2>
                             <div class="grid grid-cols-1 gap-10">
@@ -65,7 +65,7 @@
                                     <h2
                                         class="text-xl font-semibold text-black dark:text-white mb-2 flex items-center gap-2">
                                         <UIcon name="mdi:map-marker"
-                                            class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                            class="text-[24px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                                         {{ t('Addresses') }}
                                     </h2>
                                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -88,7 +88,7 @@
                     </div>
                     <div class="flex justify-end">
                         <UButton color="primary" variant="outline"
-                            class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
+                            class="text-(--text-sky-light) dark:text-(--text-sky-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
                             @click="goToCreateAccount">
                             <UIcon name="ic:sharp-edit" />
                             {{ t('Edit Account') }}
diff --git a/bo/src/components/customer/PageProfileDetailsAddInfo.vue b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
index bc492df..4b2a660 100644
--- a/bo/src/components/customer/PageProfileDetailsAddInfo.vue
+++ b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
@@ -11,7 +11,7 @@
                                 <h2
                                     class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
                                     <UIcon name="mdi:domain"
-                                        class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                        class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                                     {{ t('Company Information') }}
                                 </h2>
                                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -54,7 +54,7 @@
                                 <h2
                                     class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
                                     <UIcon name="mdi:map-marker"
-                                        class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                        class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                                     {{ t('Select Addresses') }}
                                 </h2>
                                 <div class="bg-(--second-light) dark:bg-(--main-dark)">
@@ -70,7 +70,7 @@
                                                 ? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
                                                 : 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
                                             <input type="radio" :value="address.id" v-model="selectedAddress"
-                                                class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                                class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                                             <div class="flex-1">
                                                 <p class="text-black dark:text-white font-medium">{{ address.street }}
                                                 </p>
@@ -87,7 +87,7 @@
                                         <UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
                                         <p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
                                         <RouterLink :to="{ name: 'addresses' }"
-                                            class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
+                                            class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
                                             {{ t('Add Address') }}
                                         </RouterLink>
                                     </div>
diff --git a/bo/src/views/LoginView.vue b/bo/src/views/LoginView.vue
index eeceb93..78f1981 100644
--- a/bo/src/views/LoginView.vue
+++ b/bo/src/views/LoginView.vue
@@ -107,7 +107,7 @@ const PrivacyComponent = computed(() =>
 
         <div class="flex items-center justify-between w-full dark:text-white text-black">
           <button variant="link" size="sm" @click="goToPasswordRecovery"
-            class="text-[15px] w-full flex justify-end text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">
+            class="text-[15px] w-full flex justify-end text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">
             {{ $t('general.forgot_password') }}?
           </button>
         </div>
@@ -145,18 +145,18 @@ const PrivacyComponent = computed(() =>
         <p class="dark:text-white text-black">
           {{ $t('general.dont_have_an_account') }}?
           <button variant="link" size="sm"
-            class="text-[15px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer"
+            class="text-[15px] text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer"
             @click="goToRegister">{{ $t('general.create_account_now') }}</button>
         </p>
       </div>
       <p class="mt-8 text-center text-xs dark:text-white text-black">
         {{ $t('general.by_signing_in_you_agree_to_our') }}
         <span @click="showTherms = !showTherms"
-          class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
+          class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">{{
             $t('general.terms_of_service') }}</span>
         {{ $t('general.and') }}
         <span @click="showPrivacy = !showPrivacy"
-          class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
+          class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">{{
             $t('general.privacy_policy') }}</span>
       </p>
     </div>
diff --git a/bo/src/views/PasswordRecoveryView.vue b/bo/src/views/PasswordRecoveryView.vue
index 6c1154b..1b75201 100644
--- a/bo/src/views/PasswordRecoveryView.vue
+++ b/bo/src/views/PasswordRecoveryView.vue
@@ -92,13 +92,13 @@ function validate(): FormError[] {
               class="w-full flex items-center gap-2 justify-center text-[15px] dark:text-white text-black cursor-pointer"
               @click="goToLogin">
               <UIcon name="mingcute:arrow-left-line"
-                class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) text-[16px]" />
+                class="text-(--text-sky-light) dark:text-(--text-sky-dark) text-[16px]" />
               {{ $t('general.back_to_sign_in') }}
             </button>
             <p class="text-sm text-gray-600 dark:text-gray-400">
               {{ $t('general.dont_have_an_account') }}
               <button variant="link" size="sm" @click="goToRegister"
-                class=" text-[15px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
+                class=" text-[15px] text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">{{
                   $t('general.create_account_now') }}
               </button>
             </p>
diff --git a/bo/src/views/RegisterView.vue b/bo/src/views/RegisterView.vue
index 38b2d91..12a6322 100644
--- a/bo/src/views/RegisterView.vue
+++ b/bo/src/views/RegisterView.vue
@@ -83,12 +83,12 @@
             <span class="dark:text-white text-black">
               {{ $t('general.i_agree_to_the') }}
               <span @click="showTherms = !showTherms"
-                class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{
+                class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark)">{{
                   $t('general.terms_of_service')
                 }}</span>
               {{ $t('general.and') }}
               <span @click="showPrivacy = !showPrivacy"
-                class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{
+                class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark)">{{
                   $t('general.privacy_policy')
                 }}</span>
             </span>
diff --git a/bo/src/views/ResetPasswordForm.vue b/bo/src/views/ResetPasswordForm.vue
index 95b9e40..922c4b0 100644
--- a/bo/src/views/ResetPasswordForm.vue
+++ b/bo/src/views/ResetPasswordForm.vue
@@ -120,7 +120,7 @@ function validate(): FormError[] {
 
                         <div class="text-center border-t dark:border-(--border-dark) border-(--border-light) pt-4">
                             <button color="neutral" variant="ghost" @click="goToLogin"
-                                class="text-[15px] flex items-center gap-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">
+                                class="text-[15px] flex items-center gap-2 text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">
                                 <UIcon name="mingcute:arrow-left-line" />
                                 {{ $t('general.back_to_sign_in') }}
                             </button>
diff --git a/bo/src/views/VerifyEmailView.vue b/bo/src/views/VerifyEmailView.vue
index 7093aa9..a68b264 100644
--- a/bo/src/views/VerifyEmailView.vue
+++ b/bo/src/views/VerifyEmailView.vue
@@ -135,7 +135,7 @@ function goToLogin() {
                 <p class="text-sm text-gray-600 dark:text-gray-400">
                   {{ $t('verify_email.already_registered') }}
                   <button variant="link" size="sm" @click="goToLogin"
-                    class="cursor-pointer text-(--accent-blue-light) dark:text-(--accent-blue-dark)"> {{
+                    class="cursor-pointer text-(--text-sky-light) dark:text-(--text-sky-dark)"> {{
                       $t('general.sign_in')
                     }}
                   </button>