adata-ui 2.1.40 → 2.1.41-beta.1

package/components/modals/id/IdLoginModal.vue

@@ -223,10 +223,10 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex flex-col gap-5">
-    <h1 class="heading-02 text-center" data-test-id="login-form-title">
+    <h1 class="text-h2 text-center" data-test-id="login-form-title">
       {{ t('modals.id.login.title') }}
     </h1>
-    <p class="body-400 text-center" data-test-id="login-form-subtitle">
+    <p class="text-body-md text-center" data-test-id="login-form-subtitle">
       {{ t('modals.id.login.subtitle') }}
     </p>
     <div class="flex flex-col gap-4">
@@ -244,7 +244,7 @@ onBeforeUnmount(() => {
         :error="getError('password')"
       />
       <div class="flex items-center justify-between">
-        <div class="body-400 flex gap-2" data-test-id="login-form-remember-me-checkbox">
+        <div class="text-body-md flex gap-2" data-test-id="login-form-remember-me-checkbox">
           <a-checkbox
             v-model="rememberMe"
             name="remember_me"
@@ -257,7 +257,7 @@ onBeforeUnmount(() => {
           }}</label>
         </div>
         <button
-          class="link-s-400"
+          class="text-body-md text-link"
           data-test-id="login-form-forgot-password-button"
           @click="onForgotPassword"
         >
@@ -266,7 +266,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <div class="flex items-center gap-4">
-      <div class="h-px w-full bg-deepblue-500/30" />
+      <div class="h-px w-full bg-(--border-color-default)" />
       <div class="flex shrink-0 gap-4">
         <span
           class="cursor-pointer"
@@ -290,7 +290,7 @@ onBeforeUnmount(() => {
           <a-icon-mailru />
         </span>
       </div>
-      <div class="h-px w-full bg-deepblue-500/30" />
+      <div class="h-px w-full bg-(--border-color-default)" />
     </div>
     <a-button
       :loading="loading"
@@ -300,7 +300,7 @@ onBeforeUnmount(() => {
     >
       {{ t('actions.login') }}
     </a-button>
-    <p class="body-400 text-center">
+    <p class="text-body-md text-center">
       {{ t('modals.id.login.first_time') }}
     </p>
 
@@ -325,7 +325,7 @@ onBeforeUnmount(() => {
     </a-button>
 
     <a-alert
-      class="max-w-screen-sm !text-[10px]"
+      class="max-w-screen-sm !text-body-sm"
       size="xs"
     >
       {{ t('info.userAgreement') }}

package/components/modals/id/IdModals.vue

@@ -119,9 +119,7 @@ const autoLoginClose = () => {
     <id-password-successful-modal v-if="passwordSuccessfulModal" />
   </a-modal>
 
-  <a-modal v-model="autoLogoutModal" prevent-close>
-    <id-auto-logout-modal v-if="autoLogoutModal" @closed="autoLoginClose" />
-  </a-modal>
+  <id-auto-logout-modal v-if="autoLogoutModal" @closed="autoLoginClose" />
 </template>
 
 <style scoped></style>

package/components/modals/id/IdNewPasswordModal.vue

@@ -85,10 +85,10 @@ async function onSubmit() {
     novalidate
     @submit.prevent="onSubmit"
   >
-    <h2 class="text-center text-2xl font-bold">
+    <h2 class="text-center text-h2">
       {{ t('modals.id.newPassword.title') }}
     </h2>
-    <p class="text-center text-sm">
+    <p class="text-center text-body-md">
       {{ t('modals.id.newPassword.content') }}
     </p>
 
@@ -114,7 +114,7 @@ async function onSubmit() {
       {{ t('actions.set') }}
     </a-button>
 
-    <p class="text-center text-sm">
+    <p class="text-center text-body-md">
       {{ t('reuse.or') }}
     </p>
 

package/components/modals/id/IdOtpInput.vue

@@ -126,10 +126,10 @@ function moveFocus(index: number, to: string) {
         type="text"
         inputmode="numeric"
         maxlength="1"
-        class="size-10 rounded bg-deepblue-900/5 text-center text-lg caret-transparent focus:outline-none dark:bg-[#E3E5E80D]"
+        class="size-10 rounded bg-muted text-center text-lg caret-transparent focus:outline-hidden"
         :class="{
-          'border border-[#E74135] bg-[#E741351A] dark:border-[#F47E75] dark:bg-[#F47E751A]': showError,
-          'focus:border focus:border-blue-700  dark:focus:border-blue-500': !showError,
+          'border border-danger bg-danger/10': showError,
+          'focus:border focus:border-focus': !showError,
         }"
         @input="onInput($event, index)"
         @keydown.backspace="onBackspace(index, $event)"

package/components/modals/id/IdPasswordSuccessfulModal.vue

@@ -5,13 +5,13 @@ const { t } = useI18n()
 
 <template>
   <div class="flex flex-col gap-4 text-center">
-    <h2 class="text-2xl font-bold">
+    <h2 class="text-h2">
       {{ t('modals.id.passwordSuccessful.title') }}
     </h2>
-    <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
+    <span class="mx-auto size-[100px] rounded-full bg-muted">
       <a-ill-ok />
     </span>
-    <p class="text-sm">
+    <p class="text-body-md">
       {{ t('modals.id.passwordSuccessful.content') }}
     </p>
     <a-button @click="passwordSuccessfulModal = false">

package/components/modals/id/IdRecoveryModal.vue

@@ -87,10 +87,10 @@ onBeforeUnmount(() => {
     novalidate
     @submit.prevent="onSubmit"
   >
-    <h2 class="text-center text-2xl font-bold">
+    <h2 class="text-center text-h2">
       {{ t('modals.id.recovery.title') }}
     </h2>
-    <p class="text-center text-sm">
+    <p class="text-center text-body-md">
       {{ t('modals.id.recovery.content') }}
     </p>
     <a-input-standard
@@ -101,7 +101,7 @@ onBeforeUnmount(() => {
     <a-button :loading="loading">
       {{ t('actions.recover') }}
     </a-button>
-    <p class="text-center text-sm">
+    <p class="text-center text-body-md">
       {{ t('reuse.or') }}
     </p>
     <a-button

package/components/modals/id/IdRegistrationModal.vue

@@ -149,10 +149,10 @@ onBeforeUnmount(() => {
     novalidate
     @submit.prevent="onSubmit"
   >
-    <h2 class="text-center text-2xl font-bold">
+    <h2 class="text-center text-h2">
       {{ t('modals.id.register.title') }}
     </h2>
-    <p class="text-center text-sm">
+    <p class="text-center text-body-md">
       {{ t('modals.id.register.subtitle') }}
     </p>
     <a-input-standard
@@ -187,7 +187,7 @@ onBeforeUnmount(() => {
       <i18n-t keypath="modals.id.register.agreement.text">
         <template #link>
           <nuxt-link-locale
-            class="text-blue-700"
+            class="text-brand"
             @click="getUrl"
           >
             {{ t('modals.id.register.agreement.link') }}
@@ -201,7 +201,7 @@ onBeforeUnmount(() => {
     >
       {{ t('modals.id.register.continue') }}
     </a-button>
-    <p class="text-center text-sm">
+    <p class="text-center text-body-md">
       {{ t('modals.id.register.haveAcc') }}
     </p>
     <a-button

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -108,24 +108,25 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex flex-col items-center gap-4 text-center">
-    <h2 class="text-2xl font-bold">
+    <h2 class="text-h2">
       {{ t('modals.id.resetPasswordOtp.title') }}
     </h2>
 
+    <!-- осознанно константный: пара light/dark-ассетов, тема переключается dark:-классами -->
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
     <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
 
-    <div class="text-sm">
+    <div class="text-body-md">
       <p class="mb-1">
         {{ t('modals.id.resetPasswordOtp.content') }}
       </p>
 
-      <div v-if="timer > 0" class="text-2xl font-bold">
+      <div v-if="timer > 0" class="text-h2">
         {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
       </div>
       <button
         v-else
-        class="text-blue-700 dark:text-blue-500 flex items-center gap-2 mx-auto"
+        class="text-brand flex items-center gap-2 mx-auto"
         @click="onResend"
         :disabled="isResendLoading"
       >

package/components/modals/id/IdTwoFactorModal.vue

@@ -96,9 +96,10 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <p class="heading-02 text-center">
+    <p class="text-h2 text-center">
       {{ t('modals.id.twoFactor.title') }}
     </p>
+    <!-- осознанно константный: пара light/dark-ассетов, тема переключается dark:-классами -->
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
     <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
     <id-otp-input
@@ -106,7 +107,7 @@ onBeforeUnmount(() => {
       v-model:error="showError"
       @on-completed="onConfirm"
     />
-    <p class="body-400 text-center">
+    <p class="text-body-md text-center">
       {{ t('modals.id.twoFactor.code') }}
     </p>
 

package/components/navigation/bottom-navigation/ABottomNavigation.vue

@@ -56,17 +56,17 @@ const profile: string = 'modals.mobile_navigation.type_profile'
 </script>
 
 <template>
-  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-deepblue-900/10 bg-gray-50/20 shadow-lg backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30">
+  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-default bg-subtle shadow-lg backdrop-blur-lg">
     <div class="grid w-full grid-cols-3 justify-items-center">
       <slot>
         <button
           v-for="(item, index) in items"
           :key="index"
-          class="h-16 w-auto min-w-16 max-w-[168px] lg:hover:bg-blue-700/20 lg:hover:text-blue-700"
-          :class="{ grow, 'text-blue-700': modelValue === item.value }"
+          class="h-16 w-auto min-w-16 max-w-[168px] lg:hover:bg-brand-subtle lg:hover:text-link-hover"
+          :class="{ grow, 'text-brand': modelValue === item.value }"
           @click="onClick(item.value)"
         >
-          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+          <span class="flex flex-col items-center justify-center text-body-sm lg:text-body-md">
             <template v-if="Object.prototype.hasOwnProperty.call(item, 'icon')">
               <component
                 :is="item.icon"
@@ -81,9 +81,9 @@ const profile: string = 'modals.mobile_navigation.type_profile'
           class="h-16 w-auto min-w-16 max-w-[168px]"
           @click="onClick('profile')"
         >
-          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+          <span class="flex flex-col items-center justify-center text-body-sm lg:text-body-md">
             <avatar
-              class="bg-gray outline-blue size-6 rounded-full"
+              class="size-6 rounded-full bg-muted outline-(--border-color-focus)"
             />
             {{ t(profile) }}
           </span>
@@ -93,7 +93,7 @@ const profile: string = 'modals.mobile_navigation.type_profile'
           class="h-16 w-auto min-w-16 max-w-[168px]"
           @click="goAuth"
         >
-          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+          <span class="flex flex-col items-center justify-center text-body-sm lg:text-body-md">
             <icon-logout class="lg:size-6" />
             {{ t(login) }}
           </span>

package/components/navigation/breadcrumbs/ABreadcrumbs.vue

@@ -46,12 +46,12 @@ const items = computed<Item[]>(() => {
           v-if="item.kind === 'ellipsis'"
           class="flex items-center gap-2"
         >
-          <span class="text-[#CAD5E2] dark:text-gray-600">
+          <span class="text-icon-disabled">
             <a-icon-chevron-right class="size-4" />
           </span>
           <button
             type="button"
-            class="flex size-[18px] items-center justify-center rounded text-[#62748E] transition-colors hover:text-deepblue-900 dark:text-gray-400 dark:hover:text-gray-200"
+            class="flex size-[18px] items-center justify-center rounded text-quaternary transition-colors hover:text-primary"
             :aria-label="t('actions.showMore')"
             @click="expanded = true"
           >
@@ -62,7 +62,7 @@ const items = computed<Item[]>(() => {
           v-else
           :class="
             twMerge(
-              'flex items-center gap-2 text-body-md text-[#62748E] underline-offset-2 last-of-type:font-semibold last-of-type:text-deepblue-900 hover:underline dark:text-gray-400 dark:last-of-type:text-gray-200',
+              'flex items-center gap-2 text-body-md text-quaternary underline-offset-2 last-of-type:font-semibold last-of-type:text-primary hover:underline',
               customClasses,
             )
           "
@@ -81,7 +81,7 @@ const items = computed<Item[]>(() => {
           >
             <span
               v-if="idx !== 0"
-              class="text-[#CAD5E2] dark:text-gray-600"
+              class="text-icon-disabled"
             >
               <a-icon-chevron-right class="size-4" />
             </span>

package/components/navigation/footer/AFooter.vue

@@ -166,7 +166,7 @@ const contactLinks = computed(() => ({
 <template>
   <footer
     id="footer"
-    class="rounded-t-2xl bg-deepblue-900 py-4 dark:bg-gray-900 lg:py-5"
+    class="rounded-t-[32px] bg-secondary-500 py-4 lg:py-5 dark:bg-black"
   >
     <div class="a-container mobile-padding flex flex-col justify-between gap-8 py-5 text-white lg:flex-row">
       <div class="flex flex-col justify-between gap-8">
@@ -221,7 +221,7 @@ const contactLinks = computed(() => ({
         <!-- noindex -->
         <div class="flex flex-col items-start gap-2" data-nosnippet>
           <nuxt-link
-            class="cursor-pointer border-b-[0.5px] border-white pb-3 pr-4 text-body-md-strong"
+            class="cursor-pointer border-b-[0.5px] border-current pr-4 pb-3 text-body-md-strong"
             :to="contactLinks.link?.replace(/\/$/, '')"
           >
             {{ contactLinks.title }}

package/components/navigation/footer/ui/a-footer-accordion.vue

@@ -40,7 +40,7 @@ const filterCheck = computed(() => {
   <div class="flex flex-col items-start gap-2">
     <div class="flex w-full justify-between gap-2">
       <nuxt-link
-        class="cursor-default text-body-md-strong lg:border-b-[0.5px] lg:border-white lg:pb-3 lg:pr-4"
+        class="cursor-default text-body-md-strong lg:border-b-[0.5px] lg:border-current lg:pb-3 lg:pr-4"
         :class="{ 'cursor-pointer': link }"
         :to="link?.replace(/\/$/, '')"
       >

package/components/navigation/header/AHeader.vue

@@ -107,7 +107,7 @@ onMounted(() => {
     <system-notification />
     <header
       ref="headerRef"
-      class="relative h-16 border-b border-deepblue-900/10 bg-gray-50/20 backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30"
+      class="relative h-16 border-b border-default bg-main/72 backdrop-blur-[14px] backdrop-saturate-140"
     >
       <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
         <!--        Desktop hidden -->
@@ -117,7 +117,7 @@ onMounted(() => {
         >
           <div
             v-if="mobileHeaderType === 'default'"
-            class="text-deepblue dark:text-[#E3E5E8]"
+            class="text-primary"
             @click="goToAnotherModule"
           >
             <span class="visually-hidden"> Сервисы Adata.kz</span>
@@ -132,15 +132,15 @@ onMounted(() => {
             class="flex w-full items-center gap-2 lg:hidden"
           >
             <logo
-              class="dark:text-gray-200"
+              class=""
               @click="goToAnotherModule"
             />
             <button
-              class="flex w-full items-center gap-2 rounded-full border border-gray-300/50 bg-white/30 px-4 py-1.5 backdrop-blur-sm dark:border-gray-600/50 dark:bg-white/5 dark:text-gray-300"
+              class="flex w-full items-center gap-2 rounded-full border border-strong/50 bg-main/30 px-4 py-1.5 backdrop-blur-sm"
               @click="$emit('search')"
             >
-              <a-icon-search class="text-gray-400 dark:text-gray-500" />
-              <span class="text-body-md text-gray-500 dark:text-gray-400">{{ t('header.search') }}</span>
+              <a-icon-search class="text-icon-disabled" />
+              <span class="text-body-md text-secondary">{{ t('header.search') }}</span>
             </button>
           </div>
         </section>
@@ -161,7 +161,7 @@ onMounted(() => {
           <nuxt-link-locale
             aria-label="Adata-logo"
             :to="buildLocalizedUrl(locale, urls.landing)"
-            class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
+            class="cursor-pointer text-primary"
             data-test-id="header-main-adata-logo"
             @click="goToAnotherModule"
           >
@@ -172,7 +172,7 @@ onMounted(() => {
           </nuxt-link-locale>
           <header-link :menu-top="headerBottom || 64" />
         </nav>
-        <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
+        <div class="hidden items-center gap-4 text-primary lg:flex">
           <header-usage
             v-if="isAuthenticated"
             :limit-remaining="limitRemaining"
@@ -197,10 +197,10 @@ onMounted(() => {
             <template #default="{ toggle, isOpen }">
               <button
                 type="button"
-                class="hidden h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-body-md-medium transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
+                class="hidden h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-body-md-medium transition-colors duration-150 hover:bg-action-secondary-hover focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1 focus-visible:outline-hidden lg:inline-flex"
                 :class="isOpen
-                  ? 'bg-deepblue-900/10 text-deepblue-900 dark:bg-white/15 dark:text-white'
-                  : 'text-gray-900 dark:text-gray-100'"
+                  ? 'bg-action-secondary-hover text-primary'
+                  : 'text-primary'"
                 data-test-id="header-email-text"
                 :aria-label="email"
                 @click.stop="toggle"

package/components/navigation/header/AlmatyContacts.vue

@@ -62,7 +62,7 @@ const newContacts = computed(() => contacts.value.map(item => ({
             {{ item.title }}
           </div>
           <a
-            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
+            class="flex items-center gap-1 text-primary"
             :href="item.to"
           >
             <component
@@ -85,7 +85,7 @@ const newContacts = computed(() => contacts.value.map(item => ({
               <a
                 v-for="link in newContacts"
                 :key="link.subtitle"
-                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
+                class="flex gap-1 text-primary 2xl:items-center"
                 :href="link.to"
                 :target="link.icon === Whatsapp ? '_blank' : '_self'"
               >
@@ -104,16 +104,16 @@ const newContacts = computed(() => contacts.value.map(item => ({
               <a
                 v-for="link in technicalSupport"
                 :key="link.subtitle"
-                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
+                class="flex gap-1 text-primary 2xl:items-center"
                 :href="link.to"
                 target="_blank"
               >
-                <div class="line-clamp-1 text-body-md text-blue-600">
+                <div class="line-clamp-1 text-body-md text-brand">
                   {{ link.subtitle }}
                 </div>
                 <component
                   :is="link.icon"
-                  class="stroke-blue-600"
+                  class="stroke-icon-brand"
                 />
               </a>
             </div>
@@ -130,10 +130,10 @@ const newContacts = computed(() => contacts.value.map(item => ({
       <!--          to="https://api.whatsapp.com/send?phone=77713954561" -->
       <!--          target="_blank" -->
       <!--        > -->
-      <!--          <div class="body-400 line-clamp-1 text-blue-600"> -->
+      <!--          <div class="body-400 line-clamp-1 text-brand"> -->
       <!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }} -->
       <!--          </div> -->
-      <!--          <a-icon-expand-window class="stroke-blue-600"/> -->
+      <!--          <a-icon-expand-window class="stroke-icon-brand"/> -->
       <!--        </nuxt-link> -->
       <!--      </div> -->
     </div>

package/components/navigation/header/AstanaContacts.vue

@@ -1,22 +1,22 @@
 <template>
   <!--noindex-->
   <div class="h-[272px]" data-nosnippet>
-    <h2 class="heading-02 mb-4">
+    <h2 class="text-h2 mb-4">
       {{ t('header.contacts.astana.title') }}
     </h2>
     <div class="grid grid-cols-2 gap-5 ">
       <div class="xl:grid grid-cols-2 grid-rows-3 flex flex-wrap gap-4 ">
         <div v-for="(item, index) in AstanaItems" class="flex flex-col gap-2 " :class="{'col-span-2':index===0 }">
-          <div class="heading-04">
+          <div class="text-h5">
             {{ item.title }}
           </div>
           <a
-            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
+            class="flex items-center gap-1 text-primary"
             :href="item?.to"
             :target="item.icon === Whatsapp ? '_blank' : '_self'"
           >
             <component :is="item.icon"/>
-            <div class=" body-400">
+            <div class=" text-body-md">
               {{ item.subtitle }}
             </div>
           </a>

package/components/navigation/header/CardGallery.vue

@@ -122,27 +122,28 @@ onUnmounted(() => clearTimer())
           :src="items[currentIndex].image"
           class="size-full object-cover rounded-xl"
         />
+        <!-- осознанно константный: белый текст/иконки и bg-white/50-точки на брендовом оверлее поверх изображения -->
         <nuxt-link-locale :to="items[currentIndex].to">
-          <div class="absolute bottom-0 rounded-xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
+          <div class="absolute bottom-0 flex w-full flex-col gap-6 rounded-xl bg-brand/80 px-4 pb-12 pt-4 shadow-[0_-2px_4px_0] shadow-surface-dark/25 backdrop-blur-md">
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-md">
+                  <div class="flex items-center justify-center bg-main text-brand size-8 rounded-md">
                     <component
                       :is="items[currentIndex].icon"
                       class="size-6"
                     />
                   </div>
-                  <p class="normal-case text-white dark:text-gray-900 font-semibold text-xl">
+                  <p class="normal-case text-white text-h3">
                     {{ t(items[currentIndex].title) }}
                   </p>
                 </div>
                 <a-icon-arrow-side-up
-                  class="icon-link size-6 text-white dark:text-gray-900"
+                  class="icon-link size-6 text-white"
                   :class="{ 'visible': isHovered }"
                 />
               </div>
-              <p class="normal-case text-white font-semibold dark:text-gray-900">
+              <p class="normal-case text-white font-semibold">
                 {{ t(items[currentIndex].subtitle) }}
               </p>
             </div>
@@ -155,13 +156,13 @@ onUnmounted(() => clearTimer())
         <div
           v-for="(item, index) in items"
           :key="index"
-          class="relative bg-white/50 dark:bg-gray-900/50 rounded-full overflow-hidden cursor-pointer h-2 w-2 transition-[width] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
+          class="relative bg-white/50 rounded-full overflow-hidden cursor-pointer h-2 w-2 transition-[width] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
           :class="{ 'w-[52px]': currentIndex === index }"
           @click="setCurrentIndex(index)"
         >
           <div
             v-if="currentIndex === index"
-            class="absolute inset-0 bg-white dark:bg-gray-900 progress-bar"
+            class="absolute inset-0 bg-main progress-bar"
             :style="{ animationPlayState: isHovered ? 'paused' : 'running' }"
           />
         </div>

package/components/navigation/header/ContactMenu.vue

@@ -21,7 +21,7 @@ const options = [
 
 <template>
   <div class="normal-case">
-    <div class="bg-white dark:bg-gray-950">
+    <div class="bg-main">
       <div class="a-container">
         <div class="mb-8 flex justify-between pt-2">
           <a-pill-tabs

package/components/navigation/header/HeaderLink.vue

@@ -131,7 +131,7 @@ onBeforeUnmount(() => {
       <li
         v-for="(nav, index) in navs"
         :key="nav.label"
-        class="relative after:absolute after:right-0 after:top-1/2 after:h-6 after:w-px after:-translate-y-1/2 after:bg-gray-300 last:after:hidden dark:after:bg-gray-700"
+        class="relative after:absolute after:right-0 after:top-1/2 after:h-6 after:w-px after:-translate-y-1/2 after:bg-(--border-color-strong) last:after:hidden"
         :data-test-id="nav.dataAttribute"
         role="listitem"
       >
@@ -139,15 +139,15 @@ onBeforeUnmount(() => {
           type="button"
           class="group relative cursor-pointer px-3 py-2 font-bold uppercase tracking-tight transition-colors duration-150"
           :class="isActive(index)
-            ? 'text-blue-700 dark:text-blue-400'
-            : 'text-deepblue-900 hover:text-blue-700 dark:text-gray-200 dark:hover:text-blue-400'"
+            ? 'text-brand'
+            : 'text-primary hover:text-link-hover'"
           @mouseenter="scheduleOpen(index)"
           @mouseleave="clearHoverTimer"
           @click="toggleMenu(index)"
         >
           {{ t(nav.label) }}
           <span
-            class="absolute inset-x-3 -bottom-0.5 h-0.5 origin-left rounded-full bg-blue-600 transition-transform duration-200 dark:bg-blue-400"
+            class="absolute inset-x-3 -bottom-0.5 h-0.5 origin-left rounded-full bg-brand transition-transform duration-200"
             :class="isActive(index) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
           />
         </button>
@@ -162,7 +162,7 @@ onBeforeUnmount(() => {
         :style="{ top: `${menuTop}px`, height: `calc(100dvh - ${menuTop}px)` }"
       >
         <div
-          class="absolute inset-0 bg-gray-900/30 backdrop-blur dark:bg-black/50"
+          class="absolute inset-0 bg-overlay backdrop-blur"
           @click="closeMenu"
           @mouseover="onOverlayHover"
         />