adata-ui 2.1.40 → 2.1.41-beta.1

package/components/navigation/header/HeaderUsage.vue

@@ -39,22 +39,22 @@ const usageLevel = computed<'normal' | 'warning' | 'critical'>(() => {
 const barColorClass = computed(() => {
   switch (usageLevel.value) {
     case 'critical':
-      return 'bg-red-500 dark:bg-red-400'
+      return 'bg-danger'
     case 'warning':
-      return 'bg-yellow-500 dark:bg-yellow-400'
+      return 'bg-warning'
     default:
-      return 'bg-blue-600 dark:bg-blue-500'
+      return 'bg-brand'
   }
 })
 
 const valueColorClass = computed(() => {
   switch (usageLevel.value) {
     case 'critical':
-      return 'text-red-600 dark:text-red-400'
+      return 'text-icon-danger'
     case 'warning':
-      return 'text-yellow-600 dark:text-yellow-400'
+      return 'text-warning'
     default:
-      return 'text-gray-900 dark:text-gray-100'
+      return 'text-primary'
   }
 })
 </script>
@@ -72,9 +72,9 @@ const valueColorClass = computed(() => {
         :z-index="10001"
         content-class="py-0.5"
       >
-        <gauge class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
+        <gauge class="size-4 shrink-0 text-quaternary" />
 
-        <div class="h-1.5 w-20 rounded-full bg-deepblue-900/30 dark:bg-white/30">
+        <div class="h-1.5 w-20 rounded-full bg-badge">
           <div
             class="usage-bar h-full rounded-full"
             :class="barColorClass"
@@ -89,17 +89,17 @@ const valueColorClass = computed(() => {
           <span
             class="font-bold transition-colors duration-300"
             :class="valueColorClass"
-          >{{ limitRemaining }}</span><span class="font-medium text-gray-600 dark:text-gray-300">/{{ maxLimit }}</span>
+          >{{ limitRemaining }}</span><span class="font-medium text-quaternary">/{{ maxLimit }}</span>
         </span>
 
         <template #content>
-          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
+          <span class="whitespace-nowrap text-body-sm leading-none text-primary">
             Лимит запросов: {{ limitRemaining }}
           </span>
         </template>
       </a-tooltip-v2>
 
-      <span class="h-4 w-px shrink-0 bg-deepblue-900/15 dark:bg-white/15" />
+      <span class="h-4 w-px shrink-0 bg-(--border-color-default)" />
 
       <a-tooltip-v2
         class="shrink-0"
@@ -112,12 +112,12 @@ const valueColorClass = computed(() => {
           class="flex shrink-0 items-center gap-1.5"
           data-test-id="header-usage-days"
         >
-          <calendar class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
-          <span class="text-body-md font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
+          <calendar class="size-4 shrink-0 text-quaternary" />
+          <span class="text-body-md font-bold tabular-nums text-primary">{{ daysRemaining }}</span>
         </div>
 
         <template #content>
-          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
+          <span class="whitespace-nowrap text-body-sm leading-none text-primary">
             Остаток дней: {{ daysRemaining }}
           </span>
         </template>

package/components/navigation/header/ListItem.vue

@@ -4,15 +4,16 @@
     @mouseenter="hover = true"
     @mouseleave="hover = false"
     :class="{'opacity-30' : !hover && someHovered}"
-    class="flex items-center gap-4 px-2.5 py-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-800 normal-case transition-all "
+    class="flex items-center gap-4 px-2.5 py-2 hover:bg-action-secondary-hover rounded-md normal-case transition-all "
   >
-    <div class="min-w-8 h-8 rounded-md flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
+    <!-- осознанно константный: белая иконка на брендовом градиенте bg-gradient-blue -->
+    <div class="min-w-8 h-8 rounded-md flex items-center justify-center text-white bg-gradient-blue">
       <component
         :is="item.icon"
         class="h-5 w-5"
       />
     </div>
-    <span class="text-sm text-deepblue-900 dark:text-[#E3E5E8]">{{ item.title }}</span>
+    <span class="text-body-md text-primary">{{ item.title }}</span>
   </nuxt-link-locale>
 </template>
 

package/components/navigation/header/NavCard.vue

@@ -12,24 +12,25 @@ const hover = ref(false)
 <template>
   <nuxt-link-locale
     :to="item.to"
-    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-gray-50 p-4 dark:bg-gray-800  transition-all dark:hover:bg-gray-800"
+    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-muted p-4  transition-all"
     :class="{'opacity-30': !hover && someHovered}"
     @mouseenter="hover = true"
     @mouseleave="hover = false"
   >
     <div class="normal-case">
       <h4
-        class="mb-2 font-semibold text-deepblue-900 dark:text-[#E3E5E8]"
-        :class="{'heading-04' : size==='lg', 'heading-05' : size === 'sm'}"
+        class="mb-2 text-primary"
+        :class="{'text-h5' : size==='lg', 'text-body-md-strong' : size === 'sm'}"
       >
         {{ item.title }}
       </h4>
-      <p class="text-gray-600 dark:text-gray-300 body-400">
+      <p class="text-quaternary text-body-md">
         {{ item.subtitle ? item.subtitle : '' }}
       </p>
     </div>
+    <!-- осознанно константный: белая иконка на брендовом градиенте bg-gradient-blue -->
     <div
-      class="flex items-center justify-center self-end rounded-md bg-gradient-blue  dark:text-gray-900 text-white"
+      class="flex items-center justify-center self-end rounded-md bg-gradient-blue text-white"
       :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
     >
       <component

package/components/navigation/header/NavList.vue

@@ -31,10 +31,11 @@ function isActive(itemPath: string) {
     <div class="mb-3 flex items-start justify-between gap-2">
       <nuxt-link-locale
         :to="link"
-        class="group/title flex min-w-0 items-center gap-2 text-base font-semibold text-deepblue-900 transition-colors hover:text-blue-700 dark:text-gray-100 dark:hover:text-blue-500"
+        class="group/title flex min-w-0 items-center gap-2 text-body-lg-strong text-primary transition-colors hover:text-link-hover"
       >
+        <!-- осознанно константный: белая иконка на брендовом ховер-фоне -->
         <span
-          class="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-500 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover/title:bg-blue-500">
+          class="flex size-8 shrink-0 items-center justify-center rounded-md bg-brand-subtle text-brand transition-colors group-hover/title:bg-action-primary-hover group-hover/title:text-white">
           <component
             :is="icon"
             class="size-4"
@@ -53,15 +54,15 @@ function isActive(itemPath: string) {
           v-if="item.to"
           :to="item.to"
           itemprop="name"
-          class="group/item flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-200/10"
-          :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
+          class="group/item flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-action-secondary-hover"
+          :class="{ 'bg-blue-subtle': isActive(item.to) }"
         >
-          <a-icon-chevron-right class="size-[14px] shrink-0 text-gray-300 group-hover/item:text-blue-500 dark:group-hover/item:text-blue-700" />
+          <a-icon-chevron-right class="size-[14px] shrink-0 text-icon-disabled group-hover/item:text-brand" />
           <span
-            class="min-w-0 text-sm normal-case transition-colors group-hover/item:text-deepblue-900 group-hover/item:font-semibold dark:group-hover/item:text-gray-100"
+            class="min-w-0 text-body-md normal-case transition-colors group-hover/item:text-primary group-hover/item:font-semibold"
             :class="isActive(item.to)
-              ? 'text-blue-700 dark:text-blue-500'
-              : 'text-gray-600 dark:text-gray-300'"
+              ? 'text-brand'
+              : 'text-quaternary'"
           >{{ item.title }}</span>
         </nuxt-link-locale>
       </li>

package/components/navigation/header/NotificationsMenu.vue

@@ -14,37 +14,37 @@ defineProps<{
 }>()
 </script>
 <template>
-  <div class="flex w-[423px] flex-col gap-4 rounded-md bg-white p-4 dark:bg-gray-900">
+  <div class="flex w-[423px] flex-col gap-4 rounded-md bg-main p-4">
     <div class="flex items-center justify-between">
-      <h4 class="heading-04">Уведомления</h4>
+      <h4 class="text-h5">Уведомления</h4>
       <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
     </div>
-    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
+    <hr class="border-default" />
 
     <ul v-if="notifications?.length" class="flex flex-col gap-2">
       <li
         v-for="(notification, idx) in notifications"
         :key="idx"
-        class="flex items-center justify-between gap-2.5 rounded-sm bg-gray-50 px-4 py-2 dark:bg-gray-950"
+        class="flex items-center justify-between gap-2.5 rounded-sm bg-muted px-4 py-2"
       >
-        <div class="rounded-full bg-blue-500 p-2">
+        <div class="rounded-full bg-brand p-2">
           <icon-user />
         </div>
         <div class="flex flex-col items-start gap-1 break-all">
-          <p class="body-s-400">
+          <p class="text-body-md">
             {{ notification.message + ' ' }}
-            <a class="link-s-400" href="#">{{ notification.email }}</a>
+            <a class="text-body-md text-link" href="#">{{ notification.email }}</a>
           </p>
-          <p class="text-[12px] leading-4 dark:text-gray-300">{{ notification.date }}</p>
+          <p class="text-body-sm">{{ notification.date }}</p>
         </div>
       </li>
     </ul>
 
     <div v-else class="flex flex-col items-center gap-4 py-8">
-      <p class="body-400">Новых уведомлений нет</p>
+      <p class="text-body-md">Новых уведомлений нет</p>
     </div>
 
-    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
+    <hr class="border-default" />
     <AButton block>Посмотреть все уведомления</AButton>
   </div>
 </template>

package/components/navigation/header/ProductMenu.vue

@@ -35,7 +35,7 @@ function handleExportClick() {
 
 <template>
   <div class="capitalize">
-    <div class="relative bg-white dark:bg-gray-950">
+    <div class="relative bg-main">
       <div class="a-container max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain py-8">
         <div class="flex justify-between gap-5">
           <div class="grid min-w-0 flex-1 grid-cols-5 gap-3">
@@ -43,7 +43,7 @@ function handleExportClick() {
               v-for="(column, index) in catalogColumns"
               :key="index"
               class="flex flex-col gap-[22px]"
-              :class="index > 0 ? 'border-l border-gray-100 pl-3 dark:border-gray-800' : ''"
+              :class="index > 0 ? 'border-l border-default pl-3' : ''"
             >
               <nav-list
                 v-for="module in column"
@@ -62,29 +62,30 @@ function handleExportClick() {
                   v-if="module.key === 'edo'"
                   #bottom
                 >
-                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
+                  <!-- осознанно константный: белый текст на брендовой solid-карточке bg-brand -->
+                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-brand p-4 normal-case text-white">
                     <div class="flex items-center gap-3">
-                      <span class="rounded-[10px] bg-white p-[10px] dark:bg-gray-950">
-                        <a-icon-download-rounded class="size-5 text-blue-700 dark:text-blue-500" />
+                      <span class="rounded-[10px] bg-main p-[10px]">
+                        <a-icon-download-rounded class="size-5 text-brand" />
                       </span>
-                      <span class="font-semibold text-white dark:text-gray-950">
+                      <span class="font-semibold text-white">
                         {{ t('header.products.exportCard.title') }}
                       </span>
                     </div>
 
-                    <div class="text-xs text-white dark:text-gray-950">
+                    <div class="text-body-sm text-white">
                       {{ t('header.products.exportCard.subTitle') }}
                     </div>
 
                     <a-button-v2
                       view="soft"
-                      class="!h-9 w-fit !bg-white text-blue-700 dark:!bg-gray-950 dark:text-blue-500"
+                      class="!h-9 w-fit !bg-main text-brand"
                       size="sm"
                       :icon="AIconArrowRight"
                       icon-right
                       @click="handleExportClick"
                     >
-                      <span class="text-sm">
+                      <span class="text-body-md-strong">
                         {{ t('header.products.exportCard.receive') }}
                       </span>
                     </a-button-v2>

package/components/navigation/header/ProfileMenu.vue

@@ -39,9 +39,10 @@ function onReplenish() {
 </script>
 
 <template>
-  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-lg lg:border lg:border-gray-200 lg:dark:border-gray-800">
+  <div class="w-full overflow-hidden bg-main text-primary lg:w-[320px] lg:rounded-lg lg:border lg:border-default">
     <div class="p-2">
-      <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
+      <!-- осознанно константный брендовый баннер: белое/тинты на цветном градиенте -->
+      <div class="relative overflow-hidden rounded-lg bg-linear-to-br from-brand-600/95 to-brand-500/85 p-3 text-white">
         <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
 
         <div class="relative">
@@ -54,8 +55,8 @@ function onReplenish() {
             </p>
             <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-body-sm-medium text-white ring-1 ring-inset ring-white/20">
               <span class="relative flex size-1.5 items-center justify-center">
-                <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
-                <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
+                <span class="absolute inline-flex size-full animate-ping rounded-full bg-icon-success/80" />
+                <span class="relative inline-flex size-1.5 rounded-full bg-icon-success" />
               </span>
               {{ t('header.profile.connected') }}
             </span>
@@ -103,11 +104,11 @@ function onReplenish() {
 
           <button
             type="button"
-            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
+            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-brand shadow-xs transition-all duration-150 hover:shadow-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-brand-500 active:scale-[0.98]"
             @click="onReplenish"
           >
             <a-icon-plus-circle class="size-4" />
-            <span class="bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
+            <span class="bg-linear-to-r from-brand-600 to-brand-500 bg-clip-text text-transparent">
               {{ t('header.profile.addBalance') }}
             </span>
           </button>
@@ -119,26 +120,26 @@ function onReplenish() {
       <nuxt-link-locale
         v-for="item in items"
         :key="item.title"
-        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
+        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-action-secondary-hover"
         :to="item.to"
         :data-test-id="item?.dataTestId"
         target="_blank"
       >
         <!--        <span -->
-        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400" -->
+        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-brand-100 bg-brand-subtle text-brand" -->
         <!--        > -->
         <!--          <component -->
         <!--            :is="item.icon" -->
         <!--            class="size-4" -->
         <!--          /> -->
         <!--        </span> -->
-        <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
+        <span class="truncate text-primary group-hover:text-link-hover">
           {{ item.title }}
         </span>
       </nuxt-link-locale>
     </nav>
 
-    <div class="border-t border-gray-100 p-2 dark:border-gray-800">
+    <div class="border-t border-default p-2">
       <a-change-version
         v-if="oldVersion"
         :url="oldVersion"
@@ -147,7 +148,7 @@ function onReplenish() {
 
       <div
         v-if="!isLargeScreen"
-        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-deepblue-900 dark:text-gray-200"
+        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-primary"
       >
         <span>{{ t('header.profile.colorScheme') }}</span>
         <a-color-mode />
@@ -155,7 +156,7 @@ function onReplenish() {
 
       <button
         type="button"
-        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-action-danger transition-colors hover:bg-danger-subtle"
         data-test-id="logout-button"
         @click="$emit('logout')"
       >

package/components/navigation/header/SystemNotification.vue

@@ -65,17 +65,17 @@ onMounted(fetchNotification)
     <transition name="system-notification">
       <div
         v-if="isOpen && systemMessage"
-        class="bg-[#FFF5E6] px-2 py-3 dark:bg-[#161617] md:px-0"
+        class="bg-warning-subtle px-2 py-3 md:px-0"
       >
         <div class="a-container flex items-center justify-between gap-4">
           <div class="flex items-center gap-2">
             <a-icon-info-circle
-              class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-orange-500"
+              class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-icon-amber"
             />
-            <span class="text-body-md-strong text-orange-500">{{ systemMessage }}</span>
+            <span class="text-body-md-strong text-warning">{{ systemMessage }}</span>
           </div>
           <a-icon-x-mark
-            class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-orange-500"
+            class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-icon-amber"
             @click="close"
           />
         </div>

package/components/navigation/line-tabs/ALineTabs.vue

@@ -30,7 +30,7 @@
           </a-digit-badge>
           <a-icon-warning-circle
             v-if="option.warning"
-            class="text-black justify-self-end"
+            class="justify-self-end text-primary"
           />
         </span>
       </slot>
@@ -67,25 +67,26 @@ const activeTab = defineModel<any>({
 
 const viewTypeValues: ViewType = {
   bottom: {
-    default: 'border-b-2 border-white dark:border-gray-900 pt-[3px] ',
-    selected: 'border-b-2 border-blue-700 dark:border-blue-500 pt-[3px]'
+    default: 'border-b-2 border-transparent pt-[3px]',
+    selected: 'border-b-2 border-brand pt-[3px]'
   },
   right: {
-    default: 'text-deepblue-900 bg-transparent',
-    selected: 'border-r-2 border-deepblue-900'
+    default: 'text-primary bg-transparent',
+    selected: 'border-r-2 border-brand'
   },
   left: {
-    default: 'text-deepblue-900 bg-transparent',
-    selected: 'border-l-2 border-deepblue-900'
+    default: 'text-primary bg-transparent',
+    selected: 'border-l-2 border-brand'
   },
 };
 
 
 
 
+/* осознанно константный focus-shadow #1B64B3: документированное исключение */
 const defaultClasses = () =>
   [
-    'disabled:cursor-not-allowed disabled:text-gray-500 hover:bg-deepblue-900 disabled:dark:text-gray-300 body-s-400 cursor-pointer text-deepblue-900 dark:text-gray-200 bg-transparent select-none hover:bg-opacity-5 hover:disabled:bg-transparent focus-visible:shadow-[0_0_0_4px#1B64B3]',
+    'cursor-pointer select-none bg-transparent text-primary hover:bg-action-secondary-hover hover:disabled:bg-transparent disabled:cursor-not-allowed disabled:text-disabled focus-visible:shadow-[0_0_0_4px#1B64B3]',
     viewTypeValues[props.view]['default'],
     props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
     props.block ? 'w-full' : '',
@@ -93,7 +94,7 @@ const defaultClasses = () =>
 
 const selectedClasses = () =>
   [
-    'body-s-400 cursor-pointer transition duration-200 select-none font-semibold focus-visible:shadow-[0_0_0_4px#1B64B3]',
+    'text-body-md-strong cursor-pointer transition duration-200 select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
     viewTypeValues[props.view]['selected'],
     props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
     props.block ? 'w-full' : '',

package/components/navigation/pill-tabs/APillTabs.vue

@@ -4,7 +4,7 @@
     class="scroll-container overflow-auto whitespace-nowrap"
     :class="[
       props.wrapper === 'row' ? 'flex gap-1' : 'flex flex-col gap-1',
-      isSegmented ? 'rounded-[12px] bg-gray-50 p-1 shadow-[inset_2px_2px_4px_0_#00000014] dark:bg-gray-800' : ''
+      isSegmented ? 'rounded-[12px] bg-muted p-1 shadow-[inset_2px_2px_4px_0] shadow-surface-dark/8' : ''
     ]"
   >
 
@@ -86,43 +86,45 @@ const isSegmented = computed(() => props.view === 'segmented')
 const viewTypeValues: ViewType = {
   main: {
     default:
-      'text-deepblue-900 bg-deepblue-900/5 hover:bg-deepblue-900/10 dark:bg-gray-200/5 dark:text-gray-200 dark:hover:bg-gray-800 ',
-    selected: 'bg-blue-700 font-semibold text-white dark:text-gray-900 dark:bg-blue-500'
+      'text-body-md bg-muted text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-action-primary text-action-primary-fg'
   },
   transparent: {
-    default: 'text-deepblue-900 bg-transparent hover:bg-deepblue-100',
-    selected: 'font-semibold bg-white text-deepblue-900 '
+    default: 'text-body-md bg-transparent text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-main text-primary '
   },
+  /* осознанно константный selected-инверт (gray/mobile): белый текст на bg-secondary-500 */
   gray: {
     default:
-      'bg-deepblue-900/5 hover:bg-deepblue-900/20 dark:bg-gray-50/10 dark:hover:bg-gray-50/20 dark:text-gray-50',
-    selected: 'text-white bg-deepblue-900 dark:bg-gray-50 dark:text-gray-900'
+      'text-body-md bg-muted hover:bg-action-secondary-hover',
+    selected: 'text-body-md text-white bg-secondary-500'
   },
   blue: {
     default:
-      'text-deepblue-900 bg-white font-semibold leading-5 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-deepblue-100 ',
-    selected: 'bg-blue-700 font-semibold leading-5 text-white dark:text-gray-900 dark:bg-blue-500'
+      'text-body-md-strong bg-main text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-action-primary text-action-primary-fg'
   },
   mobile: {
     default:
-      'bg-white dark:text-gray-200 font-semibold dark:bg-gray-900  dark:hover:bg-gray-500 hover:bg-deepblue-100 ',
-    selected: 'text-white dark:text-gray-900 font-semibold dark:bg-white  bg-deepblue-900'
+      'text-body-md-strong bg-main hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong text-white bg-secondary-500'
   },
   segmented: {
-    default: 'text-deepblue-900 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 dark:text-gray-200',
-    selected: 'bg-white text-deepblue-900 font-semibold shadow dark:bg-gray-900 dark:text-gray-200  shadow-[2px_2px_4px_0_#00000014]'
+    default: 'text-body-md bg-transparent text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-main text-primary shadow-[2px_2px_4px_0] shadow-surface-dark/8'
   }
 }
 
+/* осознанно константный focus-shadow #1B64B3: документированное исключение */
 const defaultClasses = (isDisabled: boolean) => [
-  'text-sm rounded-sm outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
-  isDisabled ? 'bg-deepblue-900/5 dark:bg-gray-200/5 text-gray-500 dark:text-gray-500' : '',
+  'rounded-sm outline-hidden select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  isDisabled ? 'bg-action-disabled text-action-disabled-fg' : '',
   props.view === 'transparent' && isDisabled ? 'bg-transparent' : '',
   viewTypeValues[props.view]['default'],
   props.block ? 'w-full' : ''
 ]
 const selectedClasses = () => [
-  'text-sm rounded-sm select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  'rounded-sm select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
   viewTypeValues[props.view]['selected'],
   props.block ? 'w-full' : ''
 ]

package/components/navigation/pill-tabs/APillTabsV2.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 type CountColor = 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'neutral'
-type PillTabsType = 'pill' | 'underline'
+/* pill-round — полностью округлый переключатель-«тумблер» (ДС-2026, тарифы):
+   меняется не только радиус, но и поверхность трека, плотность и цвет активного
+   таба, поэтому это отдельная шкура, а не проп радиуса. */
+type PillTabsType = 'pill' | 'pill-round' | 'underline'
 
 export interface PillTab {
   key: string
@@ -44,17 +47,18 @@ const SIZE_CLASS: Record<'sm' | 'md', string> = {
 }
 
 const COUNT_COLOR_CLASS: Record<CountColor, string> = {
-  gray: 'bg-gray-200/70 text-gray-600 dark:bg-white/[0.08] dark:text-gray-300',
-  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
-  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
-  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
-  green: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
-  neutral: 'bg-gray-100 text-gray-500 dark:bg-white/[0.06] dark:text-gray-400',
+  gray: 'bg-badge/70 text-quaternary',
+  blue: 'bg-blue-subtle text-brand',
+  yellow: 'bg-yellow-subtle text-warning',
+  red: 'bg-danger-subtle text-danger',
+  green: 'bg-success-subtle text-success',
+  neutral: 'bg-badge text-secondary',
 }
 
 const { t, te } = useI18n()
 
 const isUnderline = computed(() => props.type === 'underline')
+const isPillRound = computed(() => props.type === 'pill-round')
 
 function hasCount(option: PillTab) {
   if (typeof option.count === 'string') {
@@ -142,11 +146,13 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="pill-tabs-v2 min-w-0 max-w-full"
+    class="pill-tabs-v2 max-w-full min-w-0"
     :class="[
       isUnderline
-        ? 'border-b border-gray-200 dark:border-white/10'
-        : 'rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-white/10 dark:bg-white/[0.03]',
+        ? 'border-b border-default'
+        : isPillRound
+          ? 'rounded-full border border-default bg-canvas p-0.5'
+          : 'rounded-lg border border-default bg-muted p-1',
       block ? 'w-full' : 'w-fit',
       disabled ? 'pill-tabs-v2--disabled opacity-60' : '',
     ]"
@@ -168,26 +174,35 @@ onBeforeUnmount(() => {
         :aria-disabled="isDisabled(option) || undefined"
         :disabled="isDisabled(option)"
         :tabindex="modelValue === option.key ? 0 : -1"
-        class="inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors duration-150"
+        class="inline-flex items-center gap-1.5 whitespace-nowrap transition-colors duration-150"
         :class="[
           SIZE_CLASS[size],
           isUnderline
             ? [
-              'px-4 py-2',
+              'px-4 py-2 font-medium',
               isDisabled(option)
-                ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
+                ? 'cursor-not-allowed text-icon-disabled'
                 : modelValue === option.key
-                  ? 'text-blue-600 dark:text-blue-400'
-                  : 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200',
+                  ? 'text-brand'
+                  : 'text-quaternary hover:text-primary',
             ]
-            : [
-              'rounded-md px-3 py-1.5',
-              isDisabled(option)
-                ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
-                : modelValue === option.key
-                  ? 'bg-white text-deepblue-900 shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
-                  : 'text-gray-700 hover:bg-white/70 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.06] dark:hover:text-gray-100',
-            ],
+            : isPillRound
+              ? [
+                'rounded-full px-3.5 py-1 font-semibold',
+                isDisabled(option)
+                  ? 'cursor-not-allowed text-icon-disabled'
+                  : modelValue === option.key
+                    ? 'bg-main text-brand shadow-xs dark:shadow-none dark:ring-1 dark:ring-white/10 dark:ring-inset'
+                    : 'text-secondary hover:text-primary',
+              ]
+              : [
+                'rounded-md px-3 py-1.5 font-medium',
+                isDisabled(option)
+                  ? 'cursor-not-allowed text-icon-disabled'
+                  : modelValue === option.key
+                    ? 'bg-main text-primary shadow-xs dark:shadow-none dark:ring-1 dark:ring-white/10 dark:ring-inset'
+                    : 'text-quaternary hover:bg-action-secondary-hover hover:text-primary',
+              ],
           block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
         ]"
         @click="select(option)"
@@ -197,7 +212,7 @@ onBeforeUnmount(() => {
 
           <span
             v-if="showCount && !option.hideCount"
-            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm font-semibold leading-5"
+            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm leading-5 font-semibold"
             :class="COUNT_COLOR_CLASS[resolveCountColor(option)]"
           >
             {{ formatCount(option) }}
@@ -208,7 +223,7 @@ onBeforeUnmount(() => {
       <span
         v-if="isUnderline"
         aria-hidden="true"
-        class="pill-tabs-v2__indicator pointer-events-none absolute -bottom-px left-0 h-0.5 rounded-full bg-blue-600 dark:bg-blue-400"
+        class="pill-tabs-v2__indicator pointer-events-none absolute -bottom-px left-0 h-0.5 rounded-full bg-brand"
         :class="indicatorAnimate ? 'transition-[transform,width,opacity] duration-300 ease-out' : ''"
         :style="indicatorStyle"
       />