adata-ui 2.1.40 → 2.1.41-beta.1

package/components/features/payment/process/PaymentMethodSidePanel.vue

@@ -47,28 +47,28 @@ function onBack() {
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          class="rounded-md p-1 transition-colors hover:bg-badge"
           data-test-id="payment-method-back-button"
           @click="onBack"
         >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
+        <p class="text-h3 text-primary">
           {{ t('payment.method.title') }}
         </p>
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4 rounded-xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
+      <div class="flex flex-col items-center gap-4 rounded-xl bg-muted p-6 text-center">
         <a-ill-phone-check class="size-[120px]" />
-        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
+        <p class="text-body-md-medium text-quaternary">
           {{ t('payment.method.description') }}
         </p>
       </div>
 
       <div class="flex flex-col gap-2">
-        <p class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+        <p class="text-body-md-strong text-primary">
           {{ t('payment.method.note') }}
         </p>
 
@@ -79,8 +79,8 @@ function onBack() {
           class="flex items-center gap-3 rounded-xl border p-4 text-left transition-colors"
           :data-test-id="item.dataTestId"
           :class="selected === item.id
-            ? 'border-blue-500 bg-blue-50/60 dark:border-blue-400 dark:bg-blue-950/30'
-            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800'"
+            ? 'border-brand bg-brand-50/60'
+            : 'border-default bg-main hover:border-strong hover:bg-action-secondary-hover'"
           @click="selected = item.id"
         >
           <component
@@ -88,22 +88,22 @@ function onBack() {
             class="h-7 w-auto shrink-0"
           />
           <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
-            <span class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+            <span class="text-body-md-strong text-primary">
               {{ t(item.name) }}
             </span>
-            <span class="text-sm font-semibold text-gray-600 dark:text-gray-300">
+            <span class="text-body-md-strong text-quaternary">
               {{ formattedSum }} ₸
             </span>
           </div>
           <span
             class="flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors"
             :class="selected === item.id
-              ? 'border-blue-600 dark:border-blue-400'
-              : 'border-gray-300 dark:border-gray-600'"
+              ? 'border-brand'
+              : 'border-strong'"
           >
             <span
               v-if="selected === item.id"
-              class="size-2.5 rounded-full bg-blue-600 dark:bg-blue-400"
+              class="size-2.5 rounded-full bg-brand"
             />
           </span>
         </button>

package/components/features/payment/process/PaymentTopUpSidePanel.vue

@@ -48,15 +48,15 @@ function handlePayment() {
     data-test-id="topup-balance-modal"
   >
     <template #header>
-      <div class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
+      <div class="text-h3 text-primary">
         {{ t('payment.topUp.title') }}
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4 rounded-xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
+      <div class="flex flex-col items-center gap-4 rounded-xl bg-muted p-6 text-center">
         <a-ill-bill class="size-[120px]" />
-        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
+        <p class="text-body-md-medium text-quaternary">
           {{ t('payment.topUp.info') }}
         </p>
       </div>
@@ -77,11 +77,11 @@ function handlePayment() {
             v-for="item in sumArr"
             :key="item.id"
             type="button"
-            class="rounded-lg border px-3 py-2.5 text-sm font-semibold transition-colors"
+            class="rounded-lg border px-3 py-2.5 text-body-md-strong transition-colors"
             :data-test-id="item.dataTestId"
             :class="amount === item.value
-              ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-950/40 dark:text-blue-300'
-              : 'border-gray-200 bg-white text-deepblue-900 hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800'"
+              ? 'border-brand bg-brand-subtle text-brand'
+              : 'border-default bg-main text-primary hover:border-strong hover:bg-action-secondary-hover'"
             @click.stop="onSelectAmount(item.value)"
           >
             {{ item.label }}

package/components/features/pk-mobile-services/APkMobileServices.vue

@@ -31,8 +31,8 @@ const blockStyles = [
       <div
         class="size-10 p-2 rounded-md"
         :class="[
-          'bg-deepblue-900/5 dark:bg-gray-200/5',
-          {'!bg-blue-700 text-white dark:!bg-blue-500 ': isActiveService(service.to)}
+          'bg-muted',
+          { '!bg-action-primary text-action-primary-fg': isActiveService(service.to) }
         ]"
       >
         <component
@@ -40,7 +40,7 @@ const blockStyles = [
           class="size-6 shrink-0"
         />
       </div>
-      <p class="text-xs text-center">
+      <p class="text-body-sm text-center">
         {{ service.title }}
       </p>
     </component>
@@ -48,89 +48,60 @@ const blockStyles = [
 </template>
 
 <style lang="scss" scoped>
+/* Градиенты бордеров на токенах (main → muted) — сами переключаются в тёмной теме,
+   ручной .dark-блок не нужен */
 .first-border-gradient {
   border-width: 0 1px 1px 0;
   border-style: solid;
-  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
+  border-image-source: linear-gradient(180deg, var(--background-color-main) 0%, var(--background-color-muted) 100%);
   border-image-slice: 1;
 }
 .second-border-gradient {
   border-width: 0 1px 1px 1px;
   border-style: solid;
-  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
+  border-image-source: linear-gradient(180deg, var(--background-color-main) 0%, var(--background-color-muted) 100%);
   border-image-slice: 1;
 }
 .third-border-gradient {
   border-width: 0 0 1px 1px;
   border-style: solid;
-  border-image-source: linear-gradient(218.84deg, #FFFFFF 41.56%, #F4F5F6 98.73%);
+  border-image-source: linear-gradient(218.84deg, var(--background-color-main) 41.56%, var(--background-color-muted) 98.73%);
   border-image-slice: 1;
 }
 .fourth-border-gradient {
   border-width: 1px 1px 1px 0;
   border-style: solid;
-  border-image-source: linear-gradient(125.34deg, #FFFFFF 7.49%, #F4F5F6 86.67%);
+  border-image-source: linear-gradient(125.34deg, var(--background-color-main) 7.49%, var(--background-color-muted) 86.67%);
   border-image-slice: 1;
 }
 .fifth-border-gradient {
   border-width: 1px;
   border-style: solid;
-  border-color: var(--Bg-tertiary-bg, #F4F5F6);
+  border-color: var(--background-color-muted);
   border-image-slice: 1;
 }
 .sixth-border-gradient {
   border-width: 1px 0 1px 1px;
   border-style: solid;
-  border-image-source: linear-gradient(261.06deg, #FFFFFF -6.98%, #F4F5F6 99.74%);
+  border-image-source: linear-gradient(261.06deg, var(--background-color-main) -6.98%, var(--background-color-muted) 99.74%);
   border-image-slice: 1;
 }
 .seventh-border-gradient {
   border-width: 1px 1px 0 0;
   border-style: solid;
-  border-image-source: linear-gradient(58.51deg, #FFFFFF 35.88%, #F4F5F6 85.8%);
+  border-image-source: linear-gradient(58.51deg, var(--background-color-main) 35.88%, var(--background-color-muted) 85.8%);
   border-image-slice: 1;
 }
 .eighth-border-gradient {
   border-width: 1px 1px 0 1px;
   border-style: solid;
-  border-image-source: linear-gradient(0deg, #FFFFFF 0%, #F4F5F6 100%);
+  border-image-source: linear-gradient(0deg, var(--background-color-main) 0%, var(--background-color-muted) 100%);
   border-image-slice: 1;
 }
 .ninth-border-gradient {
   border-width: 1px 0 0 1px;
   border-style: solid;
-  border-image-source: linear-gradient(41.08deg, #FFFFFF 6.74%, #F4F5F6 63.33%, #FEFEFE 91.03%);
+  border-image-source: linear-gradient(41.08deg, var(--background-color-main) 6.74%, var(--background-color-muted) 63.33%, var(--background-color-main) 91.03%);
   border-image-slice: 1;
 }
-
-.dark {
-  .first-border-gradient {
-    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
-  }
-  .second-border-gradient {
-    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
-  }
-  .third-border-gradient {
-    border-image-source: linear-gradient(218.84deg, #26282b 41.56%, #393d40 98.73%);
-  }
-  .fourth-border-gradient {
-    border-image-source: linear-gradient(125.34deg, #26282b 7.49%, #393d40 86.67%);
-  }
-  .fifth-border-gradient {
-    border-color: #393d40;
-  }
-  .sixth-border-gradient {
-    border-image-source: linear-gradient(261.06deg, #26282b -6.98%, #393d40 99.74%);
-  }
-  .seventh-border-gradient {
-    border-image-source: linear-gradient(58.51deg, #26282b 35.88%, #393d40 85.8%);
-  }
-  .eighth-border-gradient {
-    border-image-source: linear-gradient(0deg, #26282b 0%, #393d40 100%);
-  }
-  .ninth-border-gradient {
-    border-image-source: linear-gradient(41.08deg, #26282b 6.74%, #393d40 63.33%, #26282b 91.03%);
-  }
-}
 </style>
-

package/components/features//321/201hange-version/AChangeVersion.vue

@@ -10,7 +10,7 @@ const { t } = useI18n()
   <nuxt-link
     :to="url"
     target="_blank"
-    class="flex cursor-pointer items-center justify-center gap-1 rounded-sm bg-blue-700/10 px-3 py-2 text-blue-700 transition-colors duration-150 hover:bg-blue-700/15 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
+    class="flex cursor-pointer items-center justify-center gap-1 rounded-sm bg-brand-subtle px-3 py-2 text-brand transition-colors duration-150 hover:bg-blue-subtle"
   >
     <span class="text-body-md">{{ t('header.oldVersion') }}</span>
     <a-icon-arrow-bottom-left-on-square class="rotate-180" />

package/components/forms/checkbox/ACheckbox.vue

@@ -15,7 +15,7 @@
     <label
       v-if="viewType === 'checkbox'"
       :for="name"
-      class="flex items-center text-deepblue-900 dark:text-gray-200"
+      class="flex items-center text-primary"
       :class="twMerge(textSizeOptions[size], disabled ? 'cursor-default': 'cursor-pointer', labelClass)"
     >
       <span
@@ -27,17 +27,17 @@
         <a-icon-checkbox-intermediate
           v-if="isIntermediate"
           class="w-full h-full"
-          :class="twMerge('text-blue-700 dark:text-blue-500', intermediateCheckboxClass)"
+          :class="twMerge('text-brand', intermediateCheckboxClass)"
         />
         <a-icon-checkbox-active
           v-else-if="isChecked"
           class="w-full h-full"
-          :class="twMerge('text-blue-700 dark:text-blue-500', checkboxClass)"
+          :class="twMerge('text-brand', checkboxClass)"
         />
         <a-icon-checkbox-empty
           v-else
           class="w-full h-full"
-          :class="twMerge('text-deepblue-900 dark:text-gray-200', emptyCheckboxClass)"
+          :class="twMerge('text-primary', emptyCheckboxClass)"
         />
       </span>
       <span
@@ -49,8 +49,8 @@
     <label
       v-else-if="viewType === 'chip'"
       :for="name"
-      class="px-[10px] py-[3.5px] text-deepblue-900 border border-gray-500 rounded-full  dark:text-gray-200 text-xs"
-      :class="[{'bg-blue-700 text-white dark:bg-blue-500 dark:border-blue-500 dark:text-gray-900 font-medium': isChecked}]"
+      class="px-[10px] py-[3.5px] text-primary border border-strong rounded-full text-body-sm"
+      :class="[{ 'bg-action-primary text-action-primary-fg font-medium': isChecked }]"
     >
       <slot/>
     </label>
@@ -134,8 +134,8 @@ const sizeOptions = {
   sm: 'min-w-4 min-h-4 max-w-4 max-h-4'
 }
 const textSizeOptions = {
-  lg: 'text-sm gap-2.5',
-  sm: 'text-xs gap-2'
+  lg: 'text-body-md gap-2.5',
+  sm: 'text-body-sm gap-2'
 }
 
 

package/components/forms/checkbox/ACheckboxV2.vue

@@ -87,12 +87,12 @@ const squareClass = computed(() => {
   ]
 
   if (isActive.value) {
-    base.push('border-transparent bg-blue-700 text-white dark:bg-blue-500')
+    base.push('border-transparent bg-action-primary text-action-primary-fg')
   }
   else {
-    base.push('border-gray-300 bg-white text-transparent dark:border-gray-600 dark:bg-white/[0.04]')
+    base.push('border-strong bg-main text-transparent')
     if (!props.disabled) {
-      base.push('group-hover/cb:border-blue-500 dark:group-hover/cb:border-blue-400')
+      base.push('group-hover/cb:border-brand')
     }
   }
 
@@ -105,23 +105,23 @@ const chipClass = computed(() => {
   ]
 
   if (isActive.value) {
-    base.push('border-transparent bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900')
+    base.push('border-transparent bg-action-primary text-action-primary-fg')
   }
   else {
-    base.push('border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-300')
+    base.push('border-strong bg-transparent text-quaternary')
     if (!props.disabled) {
-      base.push('group-hover/cb:border-gray-400 dark:group-hover/cb:border-gray-500')
+      base.push('group-hover/cb:border-strong')
     }
   }
 
   return base.join(' ')
 })
 
-const labelClass = computed(() => `${textClass.value} leading-none text-deepblue-900 dark:text-gray-200`)
+const labelClass = computed(() => `${textClass.value} leading-none text-primary`)
 
 const rootClass = computed(() => {
   const base = [
-    'checkbox-v2 group/cb inline-flex items-center select-none rounded transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900',
+    'checkbox-v2 group/cb inline-flex items-center select-none rounded transition focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2',
   ]
 
   if (props.view === 'checkbox') {

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

@@ -82,12 +82,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="flex flex-col gap-4 bg-white p-8 dark:bg-gray-900 sm:gap-8 sm:rounded-[20px]">
+  <section class="flex flex-col gap-4 bg-main p-8 sm:gap-8 sm:rounded-[20px]">
     <div class="flex flex-col gap-2">
-      <h2 class="heading-01">
+      <h2 class="text-display-sm">
         {{ formType === 'feedback' ? t('forms.feedback.title') : t('forms.demo.t') }}
       </h2>
-      <p class="body-400 text-gray-600 dark:text-gray-200">
+      <p class="text-body-md text-quaternary">
         {{ formType === 'feedback' ? t('forms.feedback.subtitle') : t('forms.demo.st') }}
       </p>
     </div>
@@ -100,7 +100,7 @@ onMounted(() => {
           v-if="formType === 'feedback'"
           v-model="mail"
           type="email"
-          color-classes="bg-gray-50 dark:bg-gray-800"
+          color-classes="bg-muted"
           :error="feedbackValidation.getError('mail')"
           :label="t('forms.feedback.email')"
           required
@@ -120,7 +120,7 @@ onMounted(() => {
           v-model="phone"
           v-maska
           type="tel"
-          color-classes="bg-gray-50 dark:bg-gray-800"
+          color-classes="bg-muted"
           :error="formType === 'feedback' ? feedbackValidation.getError('phone') : getDemoValidation.getError('phone')"
           :label="t('forms.feedback.phone')"
           data-maska="8 (###) ###-##-##"
@@ -136,7 +136,7 @@ onMounted(() => {
           :label="t('forms.feedback.comment')"
           :resizeable="false"
           class="min-h-[72px]"
-          color-classes="bg-gray-50 dark:bg-gray-800"
+          color-classes="bg-muted"
           required
           size="sm"
           :disabled="isLoading"
@@ -159,10 +159,10 @@ onMounted(() => {
   >
     <div class="flex flex-col items-center gap-4 px-6 py-4">
       <a-ill-mail />
-      <h4 class="text-[18px] font-semibold">
+      <h4 class="text-h4">
         {{ t('forms.feedback.modalTitle') }}
       </h4>
-      <p class="body-400 max-[352xp]">
+      <p class="text-body-md max-[352xp]">
         {{ t('forms.feedback.modalSubtitle') }}
       </p>
       <a-button-v2

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

@@ -70,9 +70,10 @@ onMounted(() => {
 
 <template>
   <section class="feedback-v2">
-    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-blue-100 bg-gradient-to-br from-blue-50 to-blue-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-blue-100 bg-white px-3 py-1.5 text-body-md text-blue-600">
+        <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>
@@ -80,7 +81,7 @@ onMounted(() => {
         <h2 class="text-h2 md:text-display-sm">
           {{ title ?? t('forms.feedback.title') }}
         </h2>
-        <p class="mt-3 max-w-[448px] text-body-sm md:text-body-lg text-gray-600">
+        <p class="mt-3 max-w-[448px] text-body-sm text-quaternary md:text-body-lg">
           {{ subtitle ?? t('forms.feedback.subtitle') }}
         </p>
 
@@ -89,7 +90,7 @@ onMounted(() => {
         </div>
       </div>
 
-      <div class="rounded-[24px] border border-gray-200 bg-white p-4 md:p-7 shadow-xl shadow-blue-600/10">
+      <div class="rounded-[24px] border border-default bg-main p-4 shadow-xl shadow-brand-600/10 md:p-7">
         <form
           class="flex flex-col gap-3"
           @submit.prevent="send"
@@ -146,9 +147,9 @@ onMounted(() => {
           >
             {{ t('forms.feedback.send') }}
           </a-button-v2>
-          <p class="mt-1 text-center text-body-sm text-gray-400">
+          <p class="mt-1 text-center text-body-sm text-disabled">
             {{ t('forms.feedback.consent') }}
-            <span class="text-blue-600">
+            <span class="text-brand">
               {{ t('forms.feedback.consentAccent') }}
             </span>
           </p>
@@ -164,10 +165,10 @@ onMounted(() => {
   >
     <div class="flex flex-col items-center gap-4 px-6 py-4">
       <a-ill-mail />
-      <h4 class="text-[18px] font-semibold">
+      <h4 class="text-h4">
         {{ t('forms.feedback.modalTitle') }}
       </h4>
-      <p class="body-400 max-[352xp]">
+      <p class="max-w-[352px] text-center text-body-md">
         {{ t('forms.feedback.modalSubtitle') }}
       </p>
       <a-button-v2

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]'
 })
 
@@ -283,15 +290,20 @@ const inputAttrs = computed(() => {
 
 const fieldClass = computed(() => {
   if (props.disabled) {
-    return 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+    return 'border-default bg-badge/70'
   }
   if (props.variant === 'gray') {
-    return 'border-transparent bg-gray-50 dark:border-transparent dark:bg-white/[0.04]'
+    /* по макету ДС-2026 у залитого поля бордер видимый, а не прозрачный */
+    return 'border-default bg-muted'
   }
   if (props.variant === 'blue') {
-    return 'border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20'
+    return 'border-brand-200 bg-brand-subtle'
   }
-  return 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'
+  if (props.variant === 'canvas') {
+    /* «утопленная» зона ДС + hero-поиск лендинга: bg-canvas глубже bg-muted в дарке */
+    return 'border-default bg-canvas'
+  }
+  return 'border-default bg-main'
 })
 
 function rowDisplay(item: T): unknown {
@@ -308,7 +320,7 @@ function rowDisplay(item: T): unknown {
   >
     <div
       ref="fieldRef"
-      class="input-v2__field text-deepblue-900 relative flex w-full cursor-text items-center gap-2 rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-600/20 hover:border-blue-500 dark:text-gray-200 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20 dark:hover:border-blue-400"
+      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,
@@ -321,21 +333,23 @@ function rowDisplay(item: T): unknown {
       <label
         v-if="label"
         :for="inputId"
-        class="input-v2__label pointer-events-none absolute top-1/2 max-w-[calc(100%-32px)] truncate text-gray-500 dark:text-gray-400"
+        class="input-v2__label pointer-events-none absolute top-1/2 max-w-[calc(100%-32px)] truncate text-secondary"
         :data-size="size"
         :class="[
           startIcon ? 'left-9' : 'left-4',
           { 'input-v2__label--floated': isLabelFloated },
         ]"
       >
-        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+        {{ 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-gray-400 dark:text-gray-500"
-        :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-deepblue-900 w-full min-w-0 bg-transparent leading-tight outline-none placeholder:text-gray-500 disabled:cursor-not-allowed dark:text-gray-200 dark:placeholder:text-gray-400"
+        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"
@@ -358,7 +372,7 @@ function rowDisplay(item: T): unknown {
 
       <a-icon-loader-circle
         v-if="loading"
-        class="size-4 shrink-0 animate-spin text-gray-400 dark:text-gray-500"
+        class="size-4 shrink-0 animate-spin text-icon-disabled"
         :class="iconOffsetClass"
       />
 
@@ -366,18 +380,18 @@ function rowDisplay(item: T): unknown {
         v-else-if="showClearButton"
         type="button"
         tabindex="-1"
-        class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
+        class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-badge"
         :class="iconOffsetClass"
         @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
         :is="endIcon"
         v-else-if="endIcon"
-        class="size-4 shrink-0 text-gray-400 dark:text-gray-500"
+        class="size-4 shrink-0 text-icon-disabled"
         :class="iconOffsetClass"
       />
 
@@ -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-gray-200 bg-white p-1.5 shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/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-gray-50 dark:hover:bg-gray-800/60"
+            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)"
@@ -430,7 +444,7 @@ function rowDisplay(item: T): unknown {
       leave-from-class="input-v2__error-leave-from"
       leave-to-class="input-v2__error-leave-to"
     >
-      <p v-if="hasError" class="mt-1 flex flex-col text-body-sm text-red-500 dark:text-red-400">
+      <p v-if="hasError" class="mt-1 flex flex-col text-body-sm text-danger">
         <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
       </p>
     </transition>
@@ -439,7 +453,7 @@ function rowDisplay(item: T): unknown {
 
 <style scoped>
 .input-v2__field--error {
-  border-color: theme('colors.red.500');
+  border-color: var(--border-color-danger);
 }
 
 .input-v2__field--disabled {
@@ -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:
@@ -505,11 +523,7 @@ function rowDisplay(item: T): unknown {
 }
 
 .input-v2__option--active {
-  background-color: theme('colors.blue.50');
-}
-
-:is(.dark) .input-v2__option--active {
-  background-color: rgb(30 64 175 / 0.18);
+  background-color: var(--background-color-brand-subtle);
 }
 
 .input-v2__error-enter-active {

package/components/forms/input/button/AInputButton.vue

@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
     v-bind.prop="props"
   >
     <template #endButton>
-      <div class="pointer-events-click absolute right-1 top-1/2 translate-y-[-50%] transform fill-gray-500 text-gray-500 hover:opacity-80 disabled:pointer-events-none">
+      <div class="pointer-events-click absolute right-1 top-1/2 translate-y-[-50%] transform fill-icon-secondary text-secondary hover:opacity-80 disabled:pointer-events-none">
         <a-button
           :class="size === 'sm' ? 'h-6 pt-px' : 'h-8'"
           :loading="loading"