adata-ui 2.1.40 → 2.1.41-beta.1

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-white"
-        />
-        <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-blue-600' : 'bg-gray-200'"
-        />
-        <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-blue-600 text-white'
+              ? 'ss-num-glow scale-[1.08] bg-brand text-inverted'
               : i < active
-                ? 'size-[34px] bg-blue-50 text-blue-600 group-hover:bg-blue-100'
-                : 'size-[34px] bg-gray-100 text-gray-400 group-hover:bg-gray-200'"
+                ? '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-gray-900'
-              : i < active
-                ? 'text-[#5b6472]'
-                : 'text-gray-400'"
-          >
-            {{ step.title }}
-          </p>
-          <p class="text-body-md text-[#9ca3af]">
-            {{ 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 rgb(6 141 255 / 45%);
+  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 rgb(6 141 255 / 32%);
+@media (prefers-reduced-motion: reduce) {
+  .ss-line-fill,
+  .ss-step {
+    transition: none;
+  }
 }
 </style>

package/components/elements/table/table.config.ts

@@ -1,18 +1,18 @@
 export const ui = {
-  wrapper: 'relative overflow-x-auto rounded bg-white dark:bg-gray-900',
+  wrapper: 'relative overflow-x-auto rounded bg-main',
   base: 'min-w-full table-fixed ',
   divide: '',
-  thead: 'relative bg-gray-100 dark:bg-[#E3E5E81A]',
+  thead: 'relative bg-badge',
   tbody: '',
   tr: {
-    base: 'even:bg-gray-50 dark:even:bg-[#E3E5E81A]',
-    selected: 'bg-gray-50 dark:bg-gray-800/50',
-    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
+    base: 'even:bg-muted',
+    selected: 'bg-muted',
+    active: 'hover:bg-action-secondary-hover cursor-pointer',
   },
   th: {
     base: 'text-left rtl:text-right',
     padding: 'px-4 py-3.5',
-    color: 'text-deepblue-900 dark:text-gray-200',
+    color: 'text-primary',
     font: 'font-semibold',
     size: 'text-body-sm',
   },
@@ -22,11 +22,11 @@ export const ui = {
       sm: 'px-3 py-2',
       md: 'px-4 py-4'
     },
-    color: 'text-deepblue-900 dark:text-gray-200',
+    color: 'text-primary',
     font: '',
     size: 'text-body-md',
   },
   progress: {
-    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
+    wrapper: 'absolute inset-x-0 h-[2px] animate-pulse bg-action-primary',
   },
 }

package/components/elements/tree-select/components/ATreeSelectNode.vue

@@ -25,17 +25,17 @@ function onSelectToggle() {
 <template>
   <li
     :style="{ paddingLeft: `${node.level * 20}px` }"
-    :class="[{ 'bg-[#2C3E500D] dark:bg-[#E3E5E80D]': node.state === 'checked' && type === 'select' }]"
+    :class="[{ 'bg-muted': node.state === 'checked' && type === 'select' }]"
   >
     <div
       v-if="!node.hidden"
       class="flex items-center gap-1 p-2"
-      :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': isDisabled }"
+      :class="{ 'bg-action-disabled': isDisabled }"
     >
       <div class="flex min-w-4 items-center">
         <a-icon-loader-circle
           v-if="node.loading"
-          class="size-4 animate-spin text-gray-400 dark:text-gray-500"
+          class="size-4 animate-spin text-icon-disabled"
         />
         <a-icon-chevron-down
           v-else-if="node.expandable"
@@ -78,7 +78,7 @@ function onSelectToggle() {
         </slot>
         <a-icon-check
           v-if="node.state === 'checked'"
-          class="min-w-4 text-blue-700 dark:text-blue-400"
+          class="min-w-4 text-brand"
         />
       </div>
     </div>

package/components/elements/tree-select-mobile/components/ATreeSelectNodesMobile.vue

@@ -3,7 +3,7 @@
     :key="node.id"
   >
     <li
-      :class="[`flex gap-2 items-center px-4 py-3 `, {'bg-[#2C3E500D]': isChecked}]"
+      :class="['flex gap-2 items-center px-4 py-3', { 'bg-muted': isChecked }]"
       :style="{ 'padding-left': `${getIndent(deep)}px` }"
     >
       <div class="min-w-4 cursor-pointer">
@@ -27,12 +27,12 @@
           type="checkbox"
           @change="handelChange"
         >
-        <p class="text-deepblue-900 dark:text-gray-200 heading-03 w-full ">
+        <p class="text-primary text-h3 w-full ">
           {{ node.name }}
         </p>
         <a-icon-check
           v-if="isChecked"
-          class="text-blue-700 min-w-4"
+          class="text-brand min-w-4"
         />
       </label>
     </li>

package/components/elements/tree-select-modal/ATreeSelectModal.vue

@@ -133,14 +133,14 @@ defineExpose({ open: openModal, close: () => (isOpen.value = false) })
     >
       <template #header>
         <slot name="header" :title="title">
-          <h2 class="text-h5 text-gray-900 dark:text-gray-100">
+          <h2 class="text-h5 text-primary">
             {{ title }}
           </h2>
         </slot>
       </template>
 
       <div class="flex flex-col">
-        <div class="sticky top-0 z-[1] flex flex-col gap-4 bg-white px-5 pb-4 pt-4 dark:bg-gray-900">
+        <div class="sticky top-0 z-[1] flex flex-col gap-4 bg-main px-5 pb-4 pt-4">
           <a-input-v2
             v-model="search"
             type="search"
@@ -149,7 +149,7 @@ defineExpose({ open: openModal, close: () => (isOpen.value = false) })
             clearable
           />
 
-          <p v-if="filteringLabel" class="text-body-sm text-gray-500 dark:text-gray-400">
+          <p v-if="filteringLabel" class="text-body-sm text-secondary">
             {{ filteringLabel }}
           </p>
         </div>
@@ -182,7 +182,7 @@ defineExpose({ open: openModal, close: () => (isOpen.value = false) })
             </template>
           </a-tree-select>
 
-          <div v-else class="flex items-center justify-center py-10 text-gray-400 dark:text-gray-500">
+          <div v-else class="flex items-center justify-center py-10 text-icon-disabled">
             <a-icon-loader-circle class="size-6 animate-spin" />
           </div>
         </div>

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

@@ -1,43 +1,21 @@
 <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>
   <client-only>
     <button
       type="button"
-      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg text-deepblue-900/80 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg text-primary/80 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"
       :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
       data-test-id="header-switch-theme-toggle"
       @click="toggle"

package/components/features/dropdown/ADropdownV2.vue

@@ -84,7 +84,7 @@ onKeyStroke('Escape', () => {
       <div
         v-if="isOpen"
         ref="floating"
-        class="z-[60] overflow-hidden rounded-lg shadow-lg shadow-gray-900/10 dark:shadow-black/30"
+        class="z-[60] overflow-hidden rounded-lg shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',

package/components/features/lang-switcher/lang-switcher.vue

@@ -66,10 +66,10 @@ function onSelect(loc: LocaleItem) {
     <button
       ref="reference"
       type="button"
-      class="inline-flex size-8 items-center justify-center rounded-lg text-body-sm font-semibold text-gray-900 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      class="inline-flex size-8 items-center justify-center rounded-lg text-body-sm font-semibold text-primary 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"
       :class="[
         isOpen
-          ? 'bg-blue-50 text-blue-700 ring-2 ring-blue-500/20 dark:bg-blue-900/40 dark:text-blue-300'
+          ? 'bg-brand-subtle text-brand ring-2 ring-brand-500/20'
           : '',
       ]"
       :data-test-id="`header-switch-language-button${testIdSuffix}`"
@@ -91,7 +91,7 @@ function onSelect(loc: LocaleItem) {
       <div
         v-if="isOpen"
         ref="floating"
-        class="z-[10000] w-fit 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="z-[10000] w-fit 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` : '',
@@ -111,15 +111,15 @@ function onSelect(loc: LocaleItem) {
               class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-body-md transition-colors duration-100"
               :class="[
                 localeCode(loc) === locale
-                  ? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
-                  : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60',
+                  ? 'bg-brand-subtle font-medium text-brand'
+                  : 'text-quaternary hover:bg-action-secondary-hover',
               ]"
               @click.prevent="onSelect(loc)"
             >
               <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
               <check
                 v-if="localeCode(loc) === locale"
-                class="size-4 shrink-0 text-blue-600 dark:text-blue-400"
+                class="size-4 shrink-0 text-brand"
               />
             </nuxt-link>
           </li>

package/components/features/payment/banner/BasicPlusLimitBanner.vue

@@ -51,7 +51,7 @@ function onUpdate() {
 </script>
 
 <template>
-  <div class="gradient flex justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
     <div>
       <p class="mb-2 text-h5">
         {{ t('modals.id.banners.basicPlusLimit.title') }}
@@ -59,11 +59,11 @@ function onUpdate() {
       <i18n-t
         keypath="modals.id.banners.basicPlusLimit.subtitle"
         tag="p"
-        class="text-body-md text-gray-600 dark:text-gray-200"
+        class="text-body-md text-quaternary"
       >
         <template #topUp>
           <button
-            class="font-semibold text-blue-700 dark:text-blue-500"
+            class="font-semibold text-brand"
             @click="topUpSidePanel = true"
           >
             {{ t('modals.id.banners.basicPlusLimit.topUp') }}
@@ -82,23 +82,3 @@ function onUpdate() {
     </a-button>
   </div>
 </template>
-
-<style scoped>
-.gradient {
-  background: linear-gradient(
-    239.71deg,
-    #B3D5F9 -7.48%,
-    #E6F1FD 39.62%,
-    #CCE2FB 85.82%
-  );
-}
-
-.dark .gradient {
-  background: linear-gradient(
-    239.71deg,
-    #17303F -7.48%,
-    #161617 39.62%,
-    #17303F 85.82%
-  );
-}
-</style>

package/components/features/payment/banner/PaymentBanner.vue

@@ -56,7 +56,7 @@ function onBuy() {
 </script>
 
 <template>
-  <div class="gradient flex justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
     <div>
       <p class="mb-2 text-h5">
         {{ t('payment.banner.title') }}
@@ -64,11 +64,11 @@ function onBuy() {
       <i18n-t
         keypath="payment.banner.subtitle"
         tag="p"
-        class="text-body-md text-gray-600 dark:text-gray-200"
+        class="text-body-md text-quaternary"
       >
         <template #tariffs>
           <nuxt-link
-            class="font-semibold text-blue-700 dark:text-blue-500"
+            class="font-semibold text-brand"
             :to="buildLocalizedUrl(locale, landing, '/tariffs')"
           >
             {{ t('payment.banner.tariffs') }}
@@ -86,23 +86,3 @@ function onBuy() {
     </a-button>
   </div>
 </template>
-
-<style scoped>
-.gradient {
-  background: linear-gradient(
-    239.71deg,
-    #B3D5F9 -7.48%,
-    #E6F1FD 39.62%,
-    #CCE2FB 85.82%
-  );
-}
-
-.dark .gradient {
-  background: linear-gradient(
-    239.71deg,
-    #17303F -7.48%,
-    #161617 39.62%,
-    #17303F 85.82%
-  );
-}
-</style>

package/components/features/payment/banner/UpSellBanner.vue

@@ -72,7 +72,7 @@ function onBuy() {
 </script>
 
 <template>
-  <div class="relative gradient flex justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="relative bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
     <div class="flex flex-col gap-3">
       <p class="text-h5">
         {{ t(`payment.upsell.${code}.title`) }}
@@ -103,23 +103,3 @@ function onBuy() {
     </a-button>
   </div>
 </template>
-
-<style scoped>
-.gradient {
-  background: linear-gradient(
-    239.71deg,
-    #B3D5F9 -7.48%,
-    #E6F1FD 39.62%,
-    #CCE2FB 85.82%
-  );
-}
-
-.dark .gradient {
-  background: linear-gradient(
-    239.71deg,
-    #17303F -7.48%,
-    #161617 39.62%,
-    #17303F 85.82%
-  );
-}
-</style>

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

@@ -72,6 +72,7 @@ watch(isOpen, async (value) => {
       errorCorrectionLevel: 'H',
       width: 300,
       margin: 0,
+      /* Canvas API: CSS-переменные недоступны — hex обязателен */
       color: {
         dark: colorMode.value === 'dark' ? '#FFFFFF' : '#000000', // квадраты
         light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF', // фон
@@ -121,32 +122,32 @@ watch(isOpen, async (value) => {
       <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="kaspi-qr-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" data-test-id="kaspi-qr-title">
+        <p class="text-h3 text-primary" data-test-id="kaspi-qr-title">
           {{ t('payment.kaspi.title') }}
         </p>
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <p class="text-center text-sm font-medium text-gray-600 dark:text-gray-300">
+      <p class="text-center text-body-md-medium text-quaternary">
         {{ t('payment.kaspi.description') }}
       </p>
 
-      <div class="flex flex-col items-center gap-5 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900" data-test-id="kaspi-qr-payment-block">
+      <div class="flex flex-col items-center gap-5 rounded-xl border border-default bg-main p-6" data-test-id="kaspi-qr-payment-block">
         <div class="flex items-center gap-3">
           <a-icon-kaspi-qr class="size-14" />
-          <span class="text-[40px] font-bold leading-none text-deepblue-900 dark:text-white">
+          <span class="text-[40px] font-bold leading-none text-primary">
             {{ t('payment.kaspi.qr') }}
           </span>
         </div>
 
-        <p class="text-center text-xl font-bold text-deepblue-900 dark:text-white">
+        <p class="text-center text-h3 font-bold text-primary">
           {{ t('payment.kaspi.scan') }}
         </p>
 
@@ -155,7 +156,7 @@ watch(isOpen, async (value) => {
           class="rounded-md"
         />
 
-        <p class="text-center text-base text-gray-600 dark:text-gray-300">
+        <p class="text-center text-body-lg text-quaternary">
           {{ t('payment.kaspi.adata') }}
         </p>
       </div>

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

@@ -79,20 +79,20 @@ watch(isOpen, async (value) => {
     width="484px"
   >
     <div class="flex flex-col gap-6">
-      <p class="whitespace-pre-wrap text-center text-xl font-bold text-deepblue-900 dark:text-gray-100">
+      <p class="whitespace-pre-wrap text-center text-h3 font-bold text-primary">
         {{ t('payment.redirect.title') }}
       </p>
 
-      <div class="flex flex-col items-center gap-1 rounded-xl bg-gray-50 p-5 text-center dark:bg-white/[0.03]">
-        <span class="text-xs text-gray-500 dark:text-gray-400">
+      <div class="flex flex-col items-center gap-1 rounded-xl bg-muted p-5 text-center">
+        <span class="text-body-sm text-secondary">
           {{ t('payment.redirect.paymentId') }}
         </span>
-        <span class="text-2xl font-bold text-deepblue-900 dark:text-gray-100">
+        <span class="text-h2 text-primary">
           {{ requestId }}
         </span>
       </div>
 
-      <p class="text-center text-sm text-gray-600 dark:text-gray-300">
+      <p class="text-center text-body-md text-quaternary">
         {{ t('payment.redirect.description') }}
       </p>
     </div>