adata-ui 2.1.41-beta.0 → 2.1.41-beta.1

package/components/elements/step-slider/AStepSliderColCard.vue

@@ -87,14 +87,18 @@ function goTo(index: number) {
   startTicker()
 }
 
+const isPaused = ref(false)
+
 function onMouseEnter() {
-  if (props.pauseOnHover)
-    stopTicker()
+  if (!props.pauseOnHover) return
+  isPaused.value = true
+  stopTicker()
 }
 
 function onMouseLeave() {
-  if (props.pauseOnHover)
-    startTicker()
+  if (!props.pauseOnHover) return
+  isPaused.value = false
+  startTicker()
 }
 
 onMounted(startTicker)
@@ -106,27 +110,33 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
 </script>
 
 <template>
+  <!-- eslint-disable tailwindcss/no-unnecessary-arbitrary-value --
+       Размеры и типографика скопированы из макета литералами (см. предупреждения
+       правила). Токены здесь не использовать: подсказка leading-1.4 в v4 значит
+       0.35rem, а не line-height 1.4. -->
   <div
-    class="grid grid-cols-1 gap-4 lg:gap-10"
+    class="grid grid-cols-1 gap-8"
     :class="colsClass"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
-    <ol class="flex flex-col gap-3">
+    <ol class="flex flex-col gap-2">
       <li
         v-for="(step, i) in steps"
         :key="i"
-        class="ss-card group relative cursor-pointer overflow-hidden rounded-2xl border bg-main transition-all duration-300"
+        class="ss-card group relative cursor-pointer overflow-hidden rounded-14 border bg-main transition-[background-color,box-shadow,border-color,opacity] duration-300"
         :class="i === active
-          ? 'ss-card-active border-brand-200 dark:border-brand-500/40'
-          : 'border-default hover:border-brand-100 dark:hover:border-brand-500/25'"
+          ? 'ss-card-active border-strong'
+          : 'border-default opacity-60 hover:bg-brand-subtle hover:opacity-100'"
         @click="goTo(i)"
       >
         <div class="p-4">
           <div
-            class="flex gap-4"
+            class="flex gap-[13px]"
             :class="expandable ? 'items-center' : 'items-start'"
           >
             <span
-              class="flex size-11 shrink-0 items-center justify-center rounded-xl"
+              class="flex size-10 shrink-0 items-center justify-center rounded-[12px]"
               :class="step.iconBg || 'bg-brand-subtle'"
             >
               <component
@@ -137,12 +147,18 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
               />
             </span>
             <div class="min-w-0 flex-1">
-              <p class="text-body-md-strong md:text-body-lg-strong text-primary">
+              <p
+                class="block text-[14px] font-bold transition-colors"
+                :class="i === active ? 'text-primary' : 'text-quaternary'"
+              >
                 {{ step.title }}
               </p>
 
               <div v-if="!expandable">
-                <p class="mt-1 text-body-sm text-secondary">
+                <p
+                  class="mt-0.5 block text-[12px] leading-[1.4] transition-colors"
+                  :class="i === active ? 'text-quaternary' : 'text-secondary'"
+                >
                   {{ step.description }}
                 </p>
                 <div
@@ -172,7 +188,7 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
               : 'grid-rows-[0fr] opacity-0'"
           >
             <div class="overflow-hidden">
-              <p class="text-body-sm text-secondary">
+              <p class="text-body-sm text-quaternary">
                 {{ step.description }}
               </p>
               <div
@@ -194,40 +210,61 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
           </div>
         </div>
 
+        <!-- Прогресс — CSS-анимация scaleX, как в макете (не JS-ширина);
+             длительность приходит переменной: scoped-стили переименовывают
+             @keyframes, поэтому inline-строку animation здесь использовать нельзя.
+             Константный бренд-градиент — одинаков в темах. -->
         <span
           v-if="i === active && autoplay && steps.length > 1"
-          class="absolute inset-x-0 bottom-0 h-1 bg-muted"
-        >
-          <!-- осознанно константный: фирменный бренд-градиент прогресса, одинаков в темах -->
-          <span
-            class="block h-full rounded-r-full bg-linear-to-r from-brand-500 to-brand-400 transition-[width] duration-100 ease-linear"
-            :style="{ width: fillWidth }"
-          />
-        </span>
+          :key="active"
+          class="cap-prog absolute inset-x-0 bottom-0 h-[3px] bg-linear-to-r from-brand to-[#4da8ff]"
+          :class="{ 'is-paused': isPaused }"
+          :style="{ '--cap-dur': `${interval}ms` }"
+        />
       </li>
     </ol>
 
-    <div
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
-      <div class="flex justify-center">
-        <slot
-          name="panel"
-          :active="active"
-          :step="steps[active]"
-          :progress="progress"
-          :count="steps.length"
-          :fill-width="fillWidth"
-          :go-to="goTo"
-        />
-      </div>
+    <div class="flex justify-center">
+      <slot
+        name="panel"
+        :active="active"
+        :step="steps[active]"
+        :progress="progress"
+        :count="steps.length"
+        :fill-width="fillWidth"
+        :go-to="goTo"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
 .ss-card-active {
-  box-shadow: 0 22px 60px -18px color-mix(in srgb, var(--color-brand-500) 22%, transparent);
+  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 32%, transparent);
+}
+
+@keyframes cap-prog {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.cap-prog {
+  transform-origin: left;
+  animation: cap-prog var(--cap-dur, 4600ms) linear;
+}
+
+.cap-prog.is-paused {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cap-prog {
+    animation: none;
+    transform: none;
+  }
 }
 </style>

package/components/elements/step-slider/AStepSliderColNumber.vue

@@ -99,80 +99,101 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
 
 <template>
   <div
-    class="grid grid-cols-1 items-center gap-4 lg:gap-16"
+    class="grid grid-cols-1 items-start gap-[34px] lg:gap-13"
     :class="colsClass"
   >
-    <ol class="flex flex-col gap-4">
-      <li
-        v-for="(step, i) in steps"
-        :key="i"
-        class="group relative flex cursor-pointer items-start gap-4 px-4 py-3"
-        @click="goTo(i)"
-      >
+    <div class="flex flex-col">
+      <ol class="relative flex flex-col gap-1.5">
+        <!-- Одна непрерывная линия с прогрессивной заливкой (как в макете),
+             а не дискретные сегменты между шагами. Линия проходит ЗА кружками,
+             поэтому их фон обязан быть непрозрачным (см. ниже). -->
         <span
-          v-if="i === active"
-          class="ss-card-glow absolute inset-0 z-[1] rounded-2xl bg-main"
-        />
-        <span
-          v-if="i < steps.length - 1"
-          class="absolute left-[34px] top-[46px] z-0 h-[calc(100%_-_18px)] w-0.5 -translate-x-1/2 rounded transition-colors"
-          :class="i < active ? 'bg-brand' : 'bg-badge'"
-        />
-        <span class="relative z-10 flex w-9 shrink-0 justify-center">
+          v-if="steps.length > 1"
+          class="absolute inset-y-9 left-[31px] z-0 w-0.5 overflow-hidden rounded bg-badge"
+          aria-hidden="true"
+        >
+          <span
+            class="ss-line-fill absolute inset-x-0 top-0 rounded bg-brand"
+            :style="{ height: `${(active / (steps.length - 1)) * 100}%` }"
+          />
+        </span>
+
+        <li
+          v-for="(step, i) in steps"
+          :key="i"
+          class="ss-step relative z-10 flex cursor-pointer gap-[15px] rounded-14 px-4 py-3.5"
+          :class="i === active ? 'ss-step-on bg-main' : ''"
+          @click="goTo(i)"
+        >
+          <!-- Фон кружка только НЕПРОЗРАЧНЫМИ токенами: bg-brand-subtle в тёмной
+               теме = #068DFF1A (10% альфы), и линия прогресса просвечивала
+               сквозь пройденный шаг. Для дарка берём непрозрачный brand-900. -->
           <span
-            class="text-body-md flex items-center justify-center rounded-full font-bold transition-all duration-300"
+            class="relative z-10 flex size-[34px] shrink-0 items-center justify-center rounded-full text-body-md font-bold transition-all duration-300"
             :class="i === active
-              ? 'ss-num-glow size-9 bg-brand text-action-primary-fg'
+              ? 'ss-num-glow scale-[1.08] bg-brand text-inverted'
               : i < active
-                ? 'size-[34px] bg-brand-subtle text-brand group-hover:bg-blue-subtle'
-                : 'size-[34px] bg-muted text-disabled group-hover:bg-badge'"
+                ? 'bg-brand-100 text-brand dark:bg-brand-900 dark:text-brand-300'
+                : 'bg-canvas text-secondary'"
           >
             {{ i + 1 }}
           </span>
-        </span>
-        <div class="relative z-10">
-          <p
-            class="text-body-lg-strong transition-colors"
-            :class="i === active
-              ? 'text-primary'
-              : i < active
-                ? 'text-quaternary'
-                : 'text-disabled'"
-          >
-            {{ step.title }}
-          </p>
-          <p class="text-body-md text-secondary">
-            {{ step.description }}
-          </p>
-        </div>
-      </li>
-    </ol>
+          <div>
+            <p
+              class="text-body-md-strong transition-colors"
+              :class="i === active ? 'text-primary' : 'text-secondary'"
+            >
+              {{ step.title }}
+            </p>
+            <p class="mt-[3px] text-body-sm leading-normal text-secondary">
+              {{ step.description }}
+            </p>
+          </div>
+        </li>
+      </ol>
+
+      <slot name="steps-footer" />
+    </div>
 
     <div
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
     >
-      <div class="flex justify-center">
-        <slot
-          name="panel"
-          :active="active"
-          :step="steps[active]"
-          :progress="progress"
-          :count="steps.length"
-          :fill-width="fillWidth"
-          :go-to="goTo"
-        />
-      </div>
+      <slot
+        name="panel"
+        :active="active"
+        :step="steps[active]"
+        :progress="progress"
+        :count="steps.length"
+        :fill-width="fillWidth"
+        :go-to="goTo"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
+.ss-line-fill {
+  transition: height .6s cubic-bezier(.4, 0, .2, 1);
+}
+
+.ss-step {
+  background: transparent;
+  transition: background .4s, box-shadow .4s;
+}
+
+.ss-step-on {
+  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
+}
+
 .ss-num-glow {
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand-500) 45%, transparent);
+  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
 }
 
-.ss-card-glow {
-  box-shadow: 0 22px 60px -18px color-mix(in srgb, var(--color-brand-500) 32%, transparent);
+@media (prefers-reduced-motion: reduce) {
+  .ss-line-fill,
+  .ss-step {
+    transition: none;
+  }
 }
 </style>

package/components/features/color-mode/AColorMode.client.vue

@@ -1,36 +1,14 @@
 <script setup lang="ts">
 import Moon from '#adata-ui/icons/moon.vue'
 import Sun from '#adata-ui/icons/sun.vue'
-import { useEventListener } from '@vueuse/core'
 
 const colorMode = useColorMode()
-const setColorMode = useCookie('colorMode')
-
-if (setColorMode.value) {
-  colorMode.preference = setColorMode.value
-}
-
-const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
-
-function cookieDomainAttr(): string {
-  const parts = location.hostname.split('.').reverse()
-  if (parts.length < 2) return ''
-  return `; domain=.${parts[1]}.${parts[0]}`
-}
 
 const isDark = computed(() => colorMode.value === 'dark')
 
 function toggle() {
-  const value = isDark.value ? 'light' : 'dark'
-  colorMode.preference = value
-  document.cookie = `colorMode=${value}; max-age=${ONE_YEAR_SECONDS}${cookieDomainAttr()}; path=/`
+  colorMode.preference = isDark.value ? 'light' : 'dark'
 }
-
-useEventListener(window, 'storage', (event: StorageEvent) => {
-  if (event.key === 'nuxt-color-mode' && event.newValue) {
-    colorMode.preference = event.newValue
-  }
-})
 </script>
 
 <template>

package/components/forms/feedback-form/FeedbackFormV2.vue

@@ -70,10 +70,10 @@ onMounted(() => {
 
 <template>
   <section class="feedback-v2">
-    <!-- осознанно константный: промо-градиент brand-50/100 и shadow-brand-600/10 — константно-яркая промо-карточка, не флипается в тёмной теме -->
-    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-brand-100 bg-linear-to-br from-brand-50 to-brand-100 p-4 md:gap-10 md:p-12 lg:grid-cols-2">
+    <!-- градиент промо-карточки — осознанный литерал (§05 аудита), но флипается в тёмной теме -->
+    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-default bg-linear-to-br from-[#f0f8ff] via-[#eef4ff] to-[#f0f8ff] p-4 md:gap-10 md:p-12 lg:grid-cols-2 dark:from-[#1a2231] dark:via-[#15191f] dark:to-[#121316]">
       <div>
-        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-100 bg-main px-3 py-1.5 text-body-md text-brand">
+        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-default bg-main px-3 py-1.5 text-body-md text-brand">
           <message-square class="size-3.5" />
           {{ t('forms.feedback.value') }}
         </div>

package/components/forms/input/AInputV2.vue

@@ -43,12 +43,13 @@ interface Props {
   disabled?: boolean
   readonly?: boolean
   clearable?: boolean
-  size?: 'sm' | 'md'
+  size?: 'sm' | 'md' | 'lg'
   error?: string | string[]
   startIcon?: Component
+  startIconClass?: string
   endIcon?: Component
   loading?: boolean
-  variant?: 'default' | 'gray' | 'blue'
+  variant?: 'default' | 'gray' | 'blue' | 'canvas'
   mask?: string
   inputId?: string
   autocomplete?: string
@@ -255,13 +256,19 @@ defineExpose({ focus, blur, inputRef })
 
 const layoutClass = computed(() => {
   if (!props.label) {
+    if (props.size === 'lg') return 'h-11 py-2'
     return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
   }
+  if (props.size === 'lg') return 'h-11 pt-4 pb-1'
   return props.size === 'md' ? 'h-10 pt-4 pb-0.5' : 'h-9 pt-3 pb-0.5'
 })
 
+/* Компенсация асимметричных паддингов поля с label: иконки возвращаются к
+   визуальному центру. Величина = (pt + контент/2) - h/2:
+   sm 12+11-18=5, md 16+11-20=7, lg 16+12-22=6. */
 const iconOffsetClass = computed(() => {
   if (!props.label) return ''
+  if (props.size === 'lg') return '-translate-y-[6px]'
   return props.size === 'md' ? '-translate-y-[7px]' : '-translate-y-[5px]'
 })
 
@@ -286,11 +293,16 @@ const fieldClass = computed(() => {
     return 'border-default bg-badge/70'
   }
   if (props.variant === 'gray') {
-    return 'border-transparent bg-muted'
+    /* по макету ДС-2026 у залитого поля бордер видимый, а не прозрачный */
+    return 'border-default bg-muted'
   }
   if (props.variant === 'blue') {
     return 'border-brand-200 bg-brand-subtle'
   }
+  if (props.variant === 'canvas') {
+    /* «утопленная» зона ДС + hero-поиск лендинга: bg-canvas глубже bg-muted в дарке */
+    return 'border-default bg-canvas'
+  }
   return 'border-default bg-main'
 })
 
@@ -308,7 +320,7 @@ function rowDisplay(item: T): unknown {
   >
     <div
       ref="fieldRef"
-      class="input-v2__field text-primary relative flex w-full cursor-text items-center gap-2 rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
+      class="input-v2__field relative flex w-full cursor-text items-center gap-2 rounded-10 border border-solid text-primary transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
       :class="[
         layoutClass,
         fieldClass,
@@ -331,11 +343,13 @@ function rowDisplay(item: T): unknown {
         {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
       </label>
 
+      <!-- startIconClass ЗАМЕНЯЕТ дефолтные размер+цвет, а не дописывается:
+           конфликт одинаковых утилит решается порядком в stylesheet, не в class -->
       <component
         :is="startIcon"
         v-if="startIcon"
-        class="size-4 shrink-0 text-icon-disabled"
-        :class="iconOffsetClass"
+        class="shrink-0"
+        :class="[startIconClass || 'size-4 text-icon-disabled', iconOffsetClass]"
       />
 
       <input
@@ -348,7 +362,7 @@ function rowDisplay(item: T): unknown {
         :readonly="readonly"
         :autocomplete="autocomplete"
         :tabindex="disabled ? -1 : 0"
-        class="input-v2__input text-primary w-full min-w-0 bg-transparent leading-tight outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
+        class="input-v2__input w-full min-w-0 bg-transparent leading-tight text-primary outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
         v-bind="inputAttrs"
         @input="onInput"
         @focus="onFocus"
@@ -371,7 +385,7 @@ function rowDisplay(item: T): unknown {
         @mousedown.prevent
         @click.stop="onClear"
       >
-        <a-icon-x-mark class="!m-0 size-3.5" />
+        <a-icon-x-mark class="m-0! size-3.5" />
       </button>
 
       <component
@@ -395,7 +409,7 @@ function rowDisplay(item: T): unknown {
       <div
         v-if="isDropdownOpen"
         ref="floatingRef"
-        class="input-v2__dropdown z-[10000] flex flex-col gap-2 rounded-lg border border-default bg-main p-1.5 shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
+        class="input-v2__dropdown z-10000 flex flex-col gap-2 rounded-xl border border-default bg-main p-1.5 shadow-[0_24px_50px_-24px] shadow-brand-500/50"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -406,7 +420,7 @@ function rowDisplay(item: T): unknown {
           <li
             v-for="(item, idx) in autocompleteList"
             :key="idx"
-            class="cursor-pointer rounded-md px-3 py-2 text-body-md transition-colors duration-100 hover:bg-action-secondary-hover"
+            class="cursor-pointer rounded-lg px-3.5 py-2.5 text-body-md transition-colors duration-100 hover:bg-brand-subtle"
             :class="{ 'input-v2__option--active': currentItemIndex === idx }"
             @mousedown.prevent="onSelectOption(item)"
             @touchend.prevent="onTouchEndOption(item)"
@@ -471,6 +485,10 @@ function rowDisplay(item: T): unknown {
   transform: translateY(-14px);
 }
 
+.input-v2__label--floated[data-size="lg"] {
+  transform: translateY(-19px);
+}
+
 .input-v2__dropdown-enter-active,
 .input-v2__dropdown-leave-active {
   transition:

package/components/forms/input/textarea/ATextareaV2.vue

@@ -30,7 +30,7 @@ interface Props {
   readonly?: boolean
   error?: string | string[]
   size?: 'sm' | 'md'
-  variant?: 'default' | 'gray' | 'blue'
+  variant?: 'default' | 'gray' | 'blue' | 'canvas'
   rows?: number
   resize?: 'none' | 'vertical' | 'both'
   maxlength?: number
@@ -60,11 +60,16 @@ const fieldClass = computed(() => {
     return 'border-default bg-badge/70'
   }
   if (props.variant === 'gray') {
-    return 'border-transparent bg-muted'
+    /* по макету ДС-2026 у залитого поля бордер видимый, а не прозрачный */
+    return 'border-default bg-muted'
   }
   if (props.variant === 'blue') {
     return 'border-brand-200 bg-brand-subtle'
   }
+  if (props.variant === 'canvas') {
+    /* «утопленная» зона ДС: bg-canvas глубже bg-muted в дарке (парно с AInputV2) */
+    return 'border-default bg-canvas'
+  }
   return 'border-default bg-main'
 })
 
@@ -124,7 +129,7 @@ defineExpose({ focus, blur, textareaRef })
 <template>
   <div class="textarea-v2 relative w-full text-body-md" v-bind="wrapperAttrs">
     <div
-      class="textarea-v2__field relative rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
+      class="textarea-v2__field relative rounded-10 border border-solid transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
       :class="[fieldClass, { 'textarea-v2__field--error': hasError, 'textarea-v2__field--disabled': disabled }]"
     >
       <label
@@ -147,7 +152,7 @@ defineExpose({ focus, blur, textareaRef })
         :disabled="disabled"
         :readonly="readonly"
         :tabindex="disabled ? -1 : 0"
-        class="textarea-v2__input text-primary block w-full bg-transparent leading-snug outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
+        class="textarea-v2__input block w-full bg-transparent leading-snug text-primary outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
         :class="[resizeClass, paddingClass]"
         v-bind="inputAttrs"
         @focus="onFocus"
@@ -156,7 +161,7 @@ defineExpose({ focus, blur, textareaRef })
 
       <span
         v-if="maxlength"
-        class="textarea-v2__counter pointer-events-none absolute bottom-1.5 right-3 text-body-sm text-icon-disabled"
+        class="textarea-v2__counter pointer-events-none absolute right-3 bottom-1.5 text-body-sm text-icon-disabled"
       >
         {{ modelValue?.length ?? 0 }}/{{ maxlength }}
       </span>

package/components/navigation/footer/AFooter.vue

@@ -166,7 +166,7 @@ const contactLinks = computed(() => ({
 <template>
   <footer
     id="footer"
-    class="rounded-t-2xl bg-secondary-500 py-4 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-current 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/header/AHeader.vue

@@ -107,7 +107,7 @@ onMounted(() => {
     <system-notification />
     <header
       ref="headerRef"
-      class="relative h-16 border-b border-default bg-subtle backdrop-blur-lg"
+      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 -->
@@ -136,7 +136,7 @@ onMounted(() => {
               @click="goToAnotherModule"
             />
             <button
-              class="flex w-full items-center gap-2 rounded-full border border-strong/50 bg-white/30 px-4 py-1.5 backdrop-blur-sm"
+              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-icon-disabled" />
@@ -197,7 +197,7 @@ 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-action-secondary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1 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-action-secondary-hover text-primary'
                   : 'text-primary'"