adata-ui 2.1.40 → 2.1.41-beta.1

package/components/elements/section-heading/ASectionHeading.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Заголовок блока лендинга: Display/Small → Display/Large + подзаголовок.
+// Бейджи-eyebrow в блоках не используются — они живут только в hero и форме обратной связи.
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  center?: boolean
+}>(), {
+  title: '',
+  subtitle: '',
+  center: false,
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2.5"
+    :class="center ? 'items-center text-center' : 'text-left'"
+  >
+    <h2 class="text-display-sm text-primary md:text-display-lg">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h2>
+    <p
+      v-if="subtitle || $slots.subtitle"
+      class="text-body-lg text-quaternary"
+      :class="{ 'max-w-2xl': center }"
+    >
+      <slot name="subtitle">
+        {{ subtitle }}
+      </slot>
+    </p>
+  </div>
+</template>

package/components/elements/segmented/ASegmentedV2.vue

@@ -37,40 +37,43 @@ const modelValue = defineModel<T | undefined | null>()
 
 const CHIP_CLASS: Record<Color, Record<View | 'selected', string>> = {
   gray: {
-    outline: 'border-[#D1D5DC] bg-white text-[#4A5565] hover:bg-[#F3F4F6] dark:bg-gray-900 dark:border-[#4A5565]/50 dark:text-gray-300 dark:hover:bg-[#4A5565]/10',
-    solid: 'border-transparent bg-[#F3F4F6] text-[#4A5565] hover:bg-[#D1D5DC] dark:bg-[#4A5565]/10 dark:text-gray-300 dark:hover:bg-[#4A5565]/20',
-    selected: 'border-transparent bg-[#4A5565] text-white dark:border-[#4A5565]/50 dark:bg-[#4A5565]/30 dark:text-gray-100',
+    outline: 'border-strong bg-action-secondary text-quaternary hover:bg-action-secondary-hover',
+    solid: 'border-transparent bg-muted text-quaternary hover:bg-gray-300 dark:hover:bg-gray-600',
+    /* осознанно константный серый selected (bg-gray-600 text-white): токена нет */
+    selected: 'border-transparent bg-gray-600 text-white',
   },
+  /* пастельные border/hover: токенов нет — примитивы осознанно, dark:-компенсации */
   blue: {
-    outline: 'border-[#B3DCFF] bg-white text-[#068DFF] hover:bg-[#F0F8FF] dark:bg-gray-900 dark:border-[#068DFF]/50 dark:text-blue-400 dark:hover:bg-[#068DFF]/10',
-    solid: 'border-transparent bg-[#F0F8FF] text-[#068DFF] hover:bg-[#B3DCFF] dark:bg-[#068DFF]/10 dark:text-blue-400 dark:hover:bg-[#068DFF]/20',
-    selected: 'border-transparent bg-[#068DFF] text-white dark:border-[#068DFF]/50 dark:bg-[#068DFF]/30 dark:text-blue-100',
+    outline: 'border-brand-200 dark:border-brand-500/40 bg-action-secondary text-brand hover:bg-brand-subtle',
+    solid: 'border-transparent bg-brand-subtle text-brand hover:bg-brand-200 dark:hover:bg-blue-subtle',
+    selected: 'border-transparent bg-brand text-white',
   },
   green: {
-    outline: 'border-[#7BF1A8] bg-white text-[#00A63E] hover:bg-[#DCFCE7] dark:bg-gray-900 dark:border-[#00A63E]/50 dark:text-green-400 dark:hover:bg-[#00A63E]/10',
-    solid: 'border-transparent bg-[#DCFCE7] text-[#00A63E] hover:bg-[#7BF1A8] dark:bg-[#00A63E]/10 dark:text-green-400 dark:hover:bg-[#00A63E]/20',
-    selected: 'border-transparent bg-[#00A63E] text-white dark:border-[#00A63E]/50 dark:bg-[#00A63E]/30 dark:text-green-100',
+    outline: 'border-green-300 dark:border-green-600/40 bg-action-secondary text-success hover:bg-success-subtle',
+    solid: 'border-transparent bg-success-subtle text-success hover:bg-green-300 dark:hover:bg-green-subtle',
+    selected: 'border-transparent bg-success text-white',
   },
   yellow: {
-    outline: 'border-[#FFD230] bg-white text-[#E17100] hover:bg-[#FEF3C6] dark:bg-gray-900 dark:border-[#E17100]/50 dark:text-orange-400 dark:hover:bg-[#E17100]/10',
-    solid: 'border-transparent bg-[#FEF3C6] text-[#E17100] hover:bg-[#FFD230] dark:bg-[#E17100]/10 dark:text-orange-400 dark:hover:bg-[#E17100]/20',
-    selected: 'border-transparent bg-[#E17100] text-white dark:border-[#E17100]/50 dark:bg-[#E17100]/30 dark:text-orange-100',
+    outline: 'border-yellow-300 dark:border-amber-600/40 bg-action-secondary text-warning hover:bg-warning-subtle',
+    solid: 'border-transparent bg-warning-subtle text-warning hover:bg-yellow-300 dark:hover:bg-warning-subtle',
+    selected: 'border-transparent bg-warning text-white',
   },
   red: {
-    outline: 'border-[#FFA2A2] bg-white text-[#E7000B] hover:bg-[#FFE2E2] dark:bg-gray-900 dark:border-[#E7000B]/50 dark:text-red-400 dark:hover:bg-[#E7000B]/10',
-    solid: 'border-transparent bg-[#FFE2E2] text-[#E7000B] hover:bg-[#FFA2A2] dark:bg-[#E7000B]/10 dark:text-red-400 dark:hover:bg-[#E7000B]/20',
-    selected: 'border-transparent bg-[#E7000B] text-white dark:border-[#E7000B]/50 dark:bg-[#E7000B]/30 dark:text-red-100',
+    outline: 'border-red bg-action-secondary text-danger hover:bg-danger-subtle',
+    solid: 'border-transparent bg-danger-subtle text-danger hover:bg-red-300 dark:hover:bg-red-subtle',
+    selected: 'border-transparent bg-action-danger text-white',
   },
 }
 
 const DOT_CLASS: Record<Color, Record<View, string>> = {
-  gray: { outline: 'bg-[#6A7282] dark:bg-gray-300', solid: 'bg-[#6A7282] dark:bg-gray-300' },
-  blue: { outline: 'bg-[#068DFF] dark:bg-blue-400', solid: 'bg-[#068DFF] dark:bg-blue-400' },
-  green: { outline: 'bg-[#00A63E] dark:bg-green-400', solid: 'bg-[#00A63E] dark:bg-green-400' },
-  yellow: { outline: 'bg-[#E17100] dark:bg-orange-400', solid: 'bg-[#E17100] dark:bg-orange-400' },
-  red: { outline: 'bg-[#E7000B] dark:bg-red-400', solid: 'bg-[#E7000B] dark:bg-red-400' },
+  gray: { outline: 'bg-icon-default', solid: 'bg-icon-default' },
+  blue: { outline: 'bg-brand', solid: 'bg-brand' },
+  green: { outline: 'bg-success', solid: 'bg-success' },
+  yellow: { outline: 'bg-warning', solid: 'bg-warning' },
+  red: { outline: 'bg-action-danger', solid: 'bg-action-danger' },
 }
 
+/* белая точка на цветной выбранной пилюле — осознанно константный white */
 const DOT_SELECTED_CLASS = 'bg-white'
 
 function dotColorName(option: Option): Color {
@@ -118,7 +121,7 @@ function select(option: Option) {
       :key="String(option.value)"
       type="button"
       :disabled="option.disabled"
-      class="inline-flex items-center gap-1.5 rounded-full border transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+      class="inline-flex items-center gap-1.5 rounded-full border transition-colors duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-50"
       :class="[
         size === 'sm' ? 'px-3 py-1 text-body-sm' : 'px-3.5 py-1.5 text-body-md',
         chipClass(option),

package/components/elements/select/ASelect.vue

@@ -61,7 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
   minimalWords: false,
   canChipRemove: true,
   showFirstItem: false,
-  buttonBg: 'border-deepblue-50 bg-deepblue-50 dark:border-gray-900 dark:bg-gray-200/5',
+  buttonBg: 'border-default bg-muted',
   maxHeight: 320,
 })
 
@@ -106,7 +106,7 @@ const valueToShow = ref<T | T[] | null>()
 const countedVisibleItems = ref(0)
 
 const disabledStyles =
-  'disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500'
+  'disabled:pointer-events-none disabled:opacity-40 disabled:bg-action-disabled disabled:text-action-disabled-fg'
 
 const componentOptions = computed(() =>
   props.options.filter((item: T) => {
@@ -279,84 +279,85 @@ watch(() => isOpen.value, (open) => {
 onUnmounted(() => cleanup?.())
 </script>
 <template>
-  <div ref="wrapper" class="relative w-full rounded-sm text-sm">
+  <div ref="wrapper" class="relative w-full rounded-sm text-body-md">
+    <!-- осознанно константная тень фокуса #1B64B3: документированное исключение -->
     <button
       ref="reference"
       :class="[
         clearable ? 'pr-16' : 'pr-9',
         {
           'pb-0.5 pt-2.5': valueToShow && !multiple && label,
-          'border-red': error,
+          'border-danger': error,
           '!h-10': size === 'md'
         },
         disabledStyles,
         buttonBg,
       ]"
       :disabled="disabled"
-      class="hover:border-blue-700 focus-visible:outline-blue relative flex h-8 w-full items-center gap-2 rounded-sm border border-solid py-1.5 pl-4 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:hover:border-blue-500"
+      class="relative flex h-8 w-full items-center gap-2 rounded-sm border border-solid py-1.5 pl-4 hover:border-brand focus-visible:outline-(--border-color-focus) focus-visible:shadow-[0_0_0_4px#1B64B3]"
       @click="toggleOpen()"
     >
       <span
         v-if="valueToShow && !multiple && label"
-        class="ease pointer-events-none absolute left-4 top-[6px] text-[10px] leading-none text-gray-500 transition-all duration-300"
+        class="ease pointer-events-none absolute left-4 top-[6px] text-[10px] leading-none text-secondary transition-all duration-300"
       >
         {{ label }}
-        <span v-if="required" class="text-red-500 dark:text-red-400">*</span>
+        <span v-if="required" class="text-danger">*</span>
       </span>
       <component :is="startIcon" v-if="startIcon" />
 
       <span :class="{ 'py-1': size === 'md' }" class=" w-full text-start">
         <span v-if="valueToShow">
-          <span v-if="!multiple" class="line-clamp-1 text-deepblue-900 dark:text-gray-200">
+          <span v-if="!multiple" class="line-clamp-1 text-primary">
             <slot name="single-selected" :value="valueToShow">{{ valueToShow[keyToShow] }}</slot>
           </span>
           <span
             v-else-if="valueToShow"
             :class="{ 'py-0': size === 'md' }"
-            class="flex gap-2 py-0.5 text-deepblue-900 dark:text-gray-200"
+            class="flex gap-2 py-0.5 text-primary"
           >
             <a-chips
               v-for="(item, index) in valueToShow.slice(0, countOfVisibleItems)"
               :key="index"
               :style="{ 'max-width': maxWidthOfChip }"
-              class="border-gray-500 text-deepblue-900 dark:text-gray-200"
+              class="border-strong text-primary"
               view="standard"
               @click.stop="canChipRemove ? onClearFromMulti(index) : (isOpen = true)"
             >
               <span class="truncate">{{ item[keyToShow] }}</span>
-              <button v-if="canChipRemove" class="rounded-full bg-deepblue-100 dark:bg-gray-200/10">
-                <a-icon-x-mark class="size-3 dark:text-gray-200" />
+              <button v-if="canChipRemove" class="rounded-full bg-badge">
+                <a-icon-x-mark class="size-3" />
               </button>
             </a-chips>
             <a-chips
               v-if="(valueToShow?.length || 0) > countOfVisibleItems"
-              class="border-blue-700 text-blue-700 dark:border-blue-500 dark:text-blue-500 whitespace-nowrap"
+              class="whitespace-nowrap border-brand text-brand"
             >
               + {{ countOfInvisibleItems }}
             </a-chips>
           </span>
         </span>
-        <span v-else class="body-400 text-gray-500">{{ label }}</span>
+        <span v-else class="text-body-md text-secondary">{{ label }}</span>
       </span>
       <button
         v-if="((multiple && valueToShow?.length) || (!multiple && valueToShow)) && clearable"
-        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10"
+        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-badge"
         @click.stop="onClear"
       >
-        <a-icon-x-mark class="!m-0 text-base dark:text-gray-200" />
+        <a-icon-x-mark class="!m-0 text-base" />
       </button>
       <span
         :class="{ 'rotate-180': isOpen }"
         class="absolute right-4 top-1/2 -translate-y-1/2 text-base transition-transform"
       >
-        <a-icon-chevron-down class="!m-0" style="color: #9da3ac" />
+        <a-icon-chevron-down class="!m-0 text-secondary" />
       </span>
     </button>
     <transition>
         <div
           v-if="isOpen"
           ref="floating"
-          class="z-[10000] rounded-sm bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
+          class="z-[10000] rounded-sm bg-main shadow-[0_1px_8px_0] shadow-surface-dark/10 dark:shadow-surface-dark/30"
           :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -380,30 +381,30 @@ onUnmounted(() => cleanup?.())
             <li v-for="(option, index) in componentOptions" :key="index">
               <button
                 v-if="!multiple"
-                :class="{ 'dark:bg-[#E3E5E80D]': isEqual(valueToShow, option) }"
+                :class="{ '': isEqual(valueToShow, option) }"
                 :disabled="isEqual(valueToShow, option)"
-                class="flex w-full items-center justify-between px-4 py-1.5 text-start hover:bg-deepblue-50 dark:bg-[#E3E5E80D]"
+                class="flex w-full items-center justify-between px-4 py-1.5 text-start hover:bg-action-secondary-hover"
                 @click="onSelect(option)"
               >
                 <span>
                   <slot name="option" :option="option">{{ option[keyToShow] }}</slot>
                 </span>
                 <span v-if="isEqual(valueToShow, option)">
-                  <a-icon-check style="color: #0070eb" />
+                  <a-icon-check class="text-brand" />
                 </span>
               </button>
               <button
                 v-else
                 :class="{
-                  'dark:bg-[#E3E5E80D]':
+                  '':
                     valueToShow && valueToShow.some((item) => isEqual(option, item))
                 }"
-                class="flex w-full items-center justify-between px-4 py-1.5 text-start hover:bg-deepblue-50 dark:hover:bg-[#E3E5E80D]"
+                class="flex w-full items-center justify-between px-4 py-1.5 text-start hover:bg-action-secondary-hover"
                 @click="onSelect(option)"
               >
                 <span>{{ option[keyToShow] }}</span>
                 <span v-if="valueToShow && valueToShow.some((item) => isEqual(option, item))">
-                  <a-icon-check style="color: #0070eb" />
+                  <a-icon-check class="text-brand" />
                 </span>
               </button>
             </li>
@@ -411,7 +412,7 @@ onUnmounted(() => cleanup?.())
         </slot>
         <div
           v-if="props.hasButtons"
-          class="-mb-2 flex w-full flex-col gap-2 rounded-sm p-4 shadow-[0_-2px_8px_0#9DA3AC3D] xl:flex-row"
+          class="-mb-2 flex w-full flex-col gap-2 rounded-sm p-4 shadow-[0_-2px_8px_0] shadow-surface-dark/10 dark:shadow-surface-dark/30 xl:flex-row"
         >
           <slot name="buttons">
             <a-button view="outline" variant="gray" block @click="onClear"> Сбросить </a-button>
@@ -432,12 +433,12 @@ onUnmounted(() => cleanup?.())
 
   /* Track */
   &::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: var(--background-color-muted);
   }
 
   /* Handle */
   &::-webkit-scrollbar-thumb {
-    background: #888;
+    background: color-mix(in srgb, var(--text-color-primary) 45%, transparent);
   }
   button {
     user-select: text !important;

package/components/elements/select/ASelectMobile.vue

@@ -44,7 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
   searchKey: 'name',
   multiple: false,
   showCount: true,
-  buttonClass: 'border-deepblue-50 bg-deepblue-50 dark:border-gray-900 dark:bg-gray-200/5'
+  buttonClass: 'border-default bg-muted'
 })
 
 const emits = defineEmits<Emits>()
@@ -113,10 +113,10 @@ defineExpose({
     <template #header>
       <div class="pt-4 px-2 flex flex-col justify-between gap-3">
         <div class="flex items-center" :class="{'justify-center':!showCount, 'justify-between': showCount}">
-          <h4 class="heading-04">
+          <h4 class="text-h5">
             {{title}}
           </h4>
-          <p v-if="showCount" class="text-xs text-blue-500">
+          <p v-if="showCount" class="text-body-sm text-brand">
             Выбрано: {{ selectedData?.length }}
           </p>
         </div>
@@ -130,7 +130,7 @@ defineExpose({
     </template>
     <div class="flex flex-col justify-between ">
       <div
-        class="mt-1 w-full h-full bg-white p-2 border rounded-sm dark:bg-gray-900 overflow-y-auto"
+        class="mt-1 w-full h-full bg-main p-2 border rounded-sm overflow-y-auto"
       >
         <slot
           name="options"
@@ -171,7 +171,7 @@ defineExpose({
   </a-slideover>
   <div
     ref="wrapper"
-    class="relative w-full rounded-sm text-sm"
+    class="relative w-full rounded-sm text-body-md"
   >
     <a-select-row
       v-model:selected-items="selectedData"

package/components/elements/select/ASelectV2.vue

@@ -304,19 +304,19 @@ const isDefaultSelection = computed(() => {
         clearable ? 'pr-16' : 'pr-9',
         { 'select-v2__trigger--error': error },
         disabled
-          ? 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
-          : (buttonBg || 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'),
+          ? 'border-default bg-badge/70'
+          : (buttonBg || 'border-default bg-main'),
       ]"
-      class="select-v2__trigger text-deepblue-900 relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-blue-500 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 dark:text-gray-200 dark:hover:border-blue-400 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/20"
+      class="select-v2__trigger text-primary relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/20"
       @click="toggleOpen()"
     >
       <span
         v-if="showFloatingLabel"
         :data-size="size"
-        class="select-v2__label pointer-events-none absolute left-4 top-1.5 text-[10px] leading-none text-gray-500 dark:text-gray-400"
+        class="select-v2__label pointer-events-none absolute left-4 top-1.5 text-[10px] leading-none text-secondary"
         :class="valueToShow ? 'select-v2__label--floated' : 'select-v2__label--placeholder'"
       >
-        {{ 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>
       </span>
 
       <component
@@ -330,7 +330,7 @@ const isDefaultSelection = computed(() => {
           <span v-if="valueToShow" class="block truncate leading-tight">
             <slot name="single-selected" :value="valueToShow">{{ (valueToShow as any)[keyToShow] }}</slot>
           </span>
-          <span v-else class="text-gray-500 dark:text-gray-400">&#8203;</span>
+          <span v-else class="text-secondary">&#8203;</span>
         </template>
 
         <template v-else>
@@ -339,20 +339,20 @@ const isDefaultSelection = computed(() => {
               <span
                 v-for="(item, index) in (valueToShow as any[]).slice(0, visibleChipCount)"
                 :key="index"
-                class="select-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-[#F0F8FF] px-2 py-0.5 text-body-sm text-blue-600 dark:bg-blue-600/15 dark:text-blue-400"
+                class="select-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-brand-subtle px-2 py-0.5 text-body-sm text-brand"
                 @click.stop="canChipRemove ? onClearFromMulti(item) : (isOpen = true)"
               >
                 <span class="truncate">{{ item[keyToShow] }}</span>
                 <button
                   v-if="canChipRemove"
-                  class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-100 dark:hover:bg-blue-500/20"
+                  class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-subtle"
                 >
                   <a-icon-x-mark class="size-2.5" />
                 </button>
               </span>
               <span
                 v-if="hiddenChipCount > 0"
-                class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-[#DBEFFF] px-2 py-0.5 text-body-sm-medium text-[#0066BD] dark:bg-blue-600/25 dark:text-blue-300"
+                class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-blue-subtle px-2 py-0.5 text-body-sm-medium text-brand"
               >
                 +{{ hiddenChipCount }}
               </span>
@@ -366,7 +366,7 @@ const isDefaultSelection = computed(() => {
               <span
                 v-for="(item, index) in (valueToShow as any[])"
                 :key="`measure-${index}`"
-                class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-gray-50 px-2 py-0.5 text-body-sm"
+                class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-muted px-2 py-0.5 text-body-sm"
               >
                 <span>{{ item[keyToShow] }}</span>
                 <span
@@ -381,13 +381,13 @@ const isDefaultSelection = computed(() => {
               </span>
             </span>
           </template>
-          <span v-else class="text-gray-500 dark:text-gray-400">{{ label }}</span>
+          <span v-else class="text-secondary">{{ label }}</span>
         </template>
       </span>
 
       <button
         v-if="valueToShow && clearable && !isDefaultSelection"
-        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
+        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5transition-colors hover:bg-badge"
         @click.stop="onClear"
       >
         <a-icon-x-mark class="!m-0 size-3.5" />
@@ -397,7 +397,7 @@ const isDefaultSelection = computed(() => {
         :class="{ 'rotate-180': isOpen }"
         class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
       >
-        <a-icon-chevron-down class="!m-0 size-4 text-gray-400 dark:text-gray-500" />
+        <a-icon-chevron-down class="!m-0 size-4 text-icon-disabled" />
       </span>
     </button>
 
@@ -412,7 +412,7 @@ const isDefaultSelection = computed(() => {
       <div
         v-if="isOpen"
         ref="floating"
-        class="select-v2__dropdown z-[10000] rounded-lg border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        class="select-v2__dropdown z-[10000] rounded-lg border border-default bg-main shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -445,7 +445,7 @@ const isDefaultSelection = computed(() => {
               <button
                 :disabled="!multiple && isItemSelected(option)"
                 :class="{ 'select-v2__option--selected': isItemSelected(option) }"
-                class="select-v2__option flex w-full items-center justify-between rounded-md px-3 py-2 text-start text-body-md transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
+                class="select-v2__option flex w-full items-center justify-between rounded-md px-3 py-2 text-start text-body-md transition-colors duration-100 hover:bg-action-secondary-hover"
                 @click="onSelect(option)"
               >
                 <span>
@@ -453,7 +453,7 @@ const isDefaultSelection = computed(() => {
                 </span>
                 <a-icon-check
                   v-if="isItemSelected(option)"
-                  class="size-4 shrink-0 text-blue-600 dark:text-blue-400"
+                  class="size-4 shrink-0 text-brand"
                 />
               </button>
             </li>
@@ -462,7 +462,7 @@ const isDefaultSelection = computed(() => {
 
         <div
           v-if="props.hasButtons"
-          class="flex w-full flex-col gap-2 border-t border-gray-200 p-3 xl:flex-row dark:border-gray-700"
+          class="flex w-full flex-col gap-2 border-t border-default p-3 xl:flex-row"
         >
           <slot name="buttons">
             <a-button
@@ -491,7 +491,7 @@ const isDefaultSelection = computed(() => {
 }
 
 .select-v2__trigger--error {
-  border-color: theme('colors.red.500');
+  border-color: var(--border-color-danger);
 }
 
 .select-v2__dropdown-enter-active,
@@ -528,25 +528,17 @@ const isDefaultSelection = computed(() => {
 }
 
 .select-v2__option--selected {
-  background-color: theme('colors.blue.50');
+  background-color: var(--background-color-brand-subtle);
   font-weight: 500;
 }
 
-:is(.dark) .select-v2__option--selected {
-  background-color: rgb(30 64 175 / 0.12);
-}
-
 .select-v2__chip {
   cursor: pointer;
   transition: background-color 150ms;
 }
 
 .select-v2__chip:hover {
-  background-color: theme('colors.blue.100');
-}
-
-:is(.dark) .select-v2__chip:hover {
-  background-color: rgb(6 141 255 / 0.25);
+  background-color: var(--background-color-blue-subtle);
 }
 
 .select-v2__option {

package/components/elements/select/ui/select-button.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const emits = defineEmits<Emits>()
 const disabledStyles =
-  'disabled:pointer-events-none disabled:bg-deepblue-50 disabled:text-deepblue-200'
+  'disabled:pointer-events-none disabled:bg-action-disabled disabled:text-action-disabled-fg'
 const isOpen = defineModel<boolean>('isOpen')
 
 
@@ -60,9 +60,10 @@ const onClear = () => {
 <template>
   <div>
     <!--    <pre>{{ items }} items</pre>-->
+    <!-- осознанно константная тень фокуса #1B64B3: документированное исключение -->
     <button
       ref="buttonElement"
-      class="hover:border-blue focus-visible:outline-blue relative flex justify-between w-full items-center gap-2 rounded-sm border border-solid border-deepblue-50 bg-deepblue-50 px-4 py-1.5 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-900 dark:hover:border-blue-700 dark:bg-[#E3E5E80D]"
+      class="relative flex w-full items-center justify-between gap-2 rounded-sm border border-solid border-default bg-muted px-4 py-1.5 hover:border-brand focus-visible:outline-(--border-color-focus) focus-visible:shadow-[0_0_0_4px#1B64B3]"
       :class="[disabledStyles]"
       :disabled="disabled"
       @click="isOpen = !isOpen"
@@ -79,8 +80,8 @@ const onClear = () => {
             @click.stop="deleteItem( item)"
           >
             {{ item.name }}
-            <button class="rounded-full bg-deepblue-100 dark:bg-gray-200/10">
-              <a-icon-x-mark class="size-3 dark:text-gray-300" />
+            <button class="rounded-full bg-badge">
+              <a-icon-x-mark class="size-3" />
             </button>
           </a-chips>
           <a-chips v-if="countOfUnvisibleItems">
@@ -93,15 +94,14 @@ const onClear = () => {
       </div>
       <button
         v-if="visibleItems && countOfVisibleItems"
-        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10"
+        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-badge"
         @click.stop="onClear"
       >
-        <a-icon-x-mark class="!m-0 text-base dark:text-gray-300" />
+        <a-icon-x-mark class="!m-0 text-base" />
       </button>
       <a-icon-chevron-up
-        class="!m-0 transition-all "
+        class="!m-0 text-secondary transition-all "
         :class="{'rotate-180': isOpen}"
-        style="color: #9da3ac"
       />
     </button>
   </div>

package/components/elements/select/ui/select-list.vue

@@ -82,12 +82,12 @@ const formattedOptions = computed(() => {
       :key="option.id"
     >
       <button
-        class="flex w-full items-center justify-between px-4 py-1.5 text-start hover:bg-deepblue-50 dark:bg-[#E3E5E80D] bg-white"
+        class="flex w-full items-center justify-between bg-action-secondary px-4 py-1.5 text-start hover:bg-action-secondary-hover"
         @click="setData(option)"
       >
         {{ option.name }}
         <span v-if="isSelected(option)">
-          <a-icon-check style="color: #0070eb"/>
+          <a-icon-check class="text-brand"/>
         </span>
       </button>
     </template>

package/components/elements/show-more/AShowMore.vue

@@ -12,7 +12,7 @@ const { t } = useI18n()
 
 <template>
   <div class="flex items-center gap-4">
-    <hr class="h-[0.5px] w-full bg-gray-500/50">
+    <hr class="h-[0.5px] w-full bg-(--border-color-default)">
     <a-button
       :loading="loading"
       :disabled="loading"
@@ -26,7 +26,7 @@ const { t } = useI18n()
         <a-icon-chevron-down />
       </slot>
     </a-button>
-    <hr class="h-[0.5px] w-full bg-gray-500/50">
+    <hr class="h-[0.5px] w-full bg-(--border-color-default)">
   </div>
 </template>
 

package/components/elements/show-more/AShowMoreV2.vue

@@ -8,11 +8,11 @@ const { t } = useI18n()
 
 <template>
   <div class="flex items-center gap-3">
-    <hr class="h-px flex-1 border-0 bg-gray-200 dark:bg-white/10">
+    <hr class="h-px flex-1 border-0 bg-badge">
     <button
       type="button"
       :disabled="loading"
-      class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-4 py-1.5 text-sm font-medium text-gray-700 transition-colors duration-150 hover:border-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-white/[0.06]"
+      class="inline-flex items-center gap-1.5 rounded-full border border-default bg-action-secondary px-4 py-1.5 text-body-md-medium text-quaternary transition-colors duration-150 hover:border-strong hover:bg-action-secondary-hover disabled:cursor-not-allowed disabled:opacity-60"
       @click="emit('click')"
     >
       <a-icon-loader-circle v-if="loading" class="size-4 animate-spin" />
@@ -21,6 +21,6 @@ const { t } = useI18n()
         <a-icon-chevron-down v-if="!loading" class="size-4" />
       </slot>
     </button>
-    <hr class="h-px flex-1 border-0 bg-gray-200 dark:bg-white/10">
+    <hr class="h-px flex-1 border-0 bg-badge">
   </div>
 </template>

package/components/elements/skeleton/ASkeleton.vue

@@ -29,7 +29,7 @@ const styles = computed(() => {
 
 <template>
   <div
-    class="skeleton-loader animate-pulse bg-gray-300 dark:bg-gray-800"
+    class="skeleton-loader animate-pulse bg-badge"
     :style="styles"
   />
 </template>