adata-ui 2.1.40 → 2.1.41-beta.1

package/components/modals/ContactsMobileModel.vue

@@ -139,19 +139,19 @@ watch(tab, (e) => {
 <template>
   <a-modal v-model="isOpen" :title="t('modals.mobile_navigation.type_contacts')">
     <div class="flex flex-col gap-4">
-      <div class="h-[1px] w-full bg-deepblue-900/5" />
+      <div class="h-px w-full bg-(--border-color-default)" />
       <div>
         <a-pill-tabs v-model="tab" :options="tabOptions" view="gray" />
       </div>
       <div class="flex h-[40vh] flex-col gap-2 overflow-auto sm:h-[300px]">
         <div v-for="items in currentInfo" :key="items.title" class="flex flex-col gap-2">
           <p class="font-semibold">{{ items.title }}</p>
-          <div class="flex flex-wrap gap-4 text-sm">
+          <div class="flex flex-wrap gap-4 text-body-md">
             <template v-for="item in items.info">
               <a
                 v-if="item.to"
                 :href="item.to"
-                class="flex items-center gap-1 text-blue-700 dark:text-blue-500"
+                class="flex items-center gap-1 text-brand"
               >
                 <component :is="item.icon" class="h-[16px] w-[16px] min-w-[16px]" />
                 {{ item.label }}
@@ -164,13 +164,13 @@ watch(tab, (e) => {
           </div>
         </div>
       </div>
-      <div class="h-[1px] w-full bg-deepblue-900/5" />
+      <div class="h-px w-full bg-(--border-color-default)" />
     </div>
     <template #footer>
       <nuxt-link
         to="/"
         @click="emits('pushMain')"
-        class="flex items-center gap-4 rounded-sm bg-gray-50 px-4 py-3 dark:bg-gray-800"
+        class="flex items-center gap-4 rounded-sm bg-muted px-4 py-3"
       >
         <a-icon-menu />
         {{ t('modals.mobile_navigation.return_button') }}

package/components/modals/ContentNavigationModal.vue

@@ -44,10 +44,10 @@ function onReturn() {
   <a-modal-v2
     v-model="open"
     hide-close
-    content-class="bg-gray-50/60 dark:bg-gray-950/40"
+    content-class="bg-muted"
   >
     <template #header>
-      <h2 class="w-full text-center text-base font-semibold text-gray-900 dark:text-gray-100">
+      <h2 class="w-full text-center text-body-lg-strong text-primary">
         {{ t('modals.mobile_navigation.type_main') }}
       </h2>
     </template>
@@ -66,27 +66,28 @@ function onReturn() {
         v-for="item in currentLinks"
         :key="item.to"
         :to="item.to"
-        class="group flex items-center gap-3 rounded-xl border border-gray-100 bg-white px-3 py-2.5 transition-colors hover:border-blue-200 hover:bg-blue-50/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-blue-500/30 dark:hover:bg-gray-800"
+        class="group flex items-center gap-3 rounded-xl border border-default bg-main px-3 py-2.5 transition-colors hover:border-brand-200 hover:bg-brand-50/50 dark:hover:border-brand-500/40 dark:hover:bg-brand-subtle"
       >
-        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-500 transition-colors group-hover:bg-blue-700 group-hover:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover:bg-blue-500 dark:group-hover:text-white">
+        <!-- осознанно константный group-hover:text-white: белая иконка на brand-hover-заливке -->
+        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-brand-subtle text-brand transition-colors group-hover:bg-action-primary-hover group-hover:text-white">
           <component
             :is="item.icon"
             class="size-5"
           />
         </span>
 
-        <span class="min-w-0 flex-1 truncate text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+        <span class="min-w-0 flex-1 truncate text-body-md-strong text-primary">
           {{ item.title }}
         </span>
 
-        <a-icon-chevron-right class="size-4 shrink-0 text-gray-300 transition-colors group-hover:text-blue-500 dark:text-gray-600" />
+        <a-icon-chevron-right class="size-4 shrink-0 text-icon-disabled transition-colors group-hover:text-brand" />
       </nuxt-link>
     </div>
 
     <template #footer>
       <nuxt-link
         to="/"
-        class="flex items-center justify-center gap-2 rounded-xl bg-gray-100 px-4 py-3 text-sm font-semibold text-deepblue-900 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+        class="flex items-center justify-center gap-2 rounded-xl bg-badge px-4 py-3 text-body-md-strong text-primary transition-colors hover:bg-badge"
         @click="onReturn"
       >
         <a-icon-menu class="size-5" />

package/components/modals/Insufficient-funds-modal.vue

@@ -24,17 +24,17 @@ function cancel() {
   >
     <div class="flex flex-col gap-4 px-6 py-4">
       <a-ill-empty-wallet class="self-center" />
-      <p class="text-center text-[18px] font-semibold">
+      <p class="text-h4 text-center">
         {{ t('modals.low_balance.title') }}
       </p>
       <p class="text-center">
         {{ t('modals.low_balance.questions') }}
       </p>
-      <div class="flex flex-col rounded-lg border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
-        <p class="body-600 text-center text-blue-700 dark:text-blue-300">
+      <div class="flex flex-col rounded-lg border border-brand bg-brand-subtle px-4 py-2">
+        <p class="text-body-md-strong text-center text-brand">
           {{ t('modals.low_balance.current_balance') }}
         </p>
-        <p class="body-600 text-center text-xl text-blue-700 dark:text-blue-300">
+        <p class="text-h3 text-center text-brand">
           {{ userInfo?.balance ? userInfo?.balance.toLocaleString('ru-RU') : 0 }}₸
         </p>
       </div>

package/components/modals/LimitReachedModal.vue

@@ -14,20 +14,31 @@ function goTariffs() {
   <a-modal-v2
     v-model="isOpen"
     width="424px"
-    :title="t('modals.limit.title')"
+    hide-header-border
   >
-    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
       <a-ill-empty-wallet />
-      <p class="body-400 text-center">
+      <p class="text-h4 whitespace-pre-wrap text-center">
+        {{ t('modals.limit.title') }}
+      </p>
+      <p class="text-body-md whitespace-pre-wrap text-center text-quaternary">
         {{ t('modals.limit.content') }}
       </p>
+      <a-alert>
+        {{ t('modals.limit.alert') }}
+      </a-alert>
     </div>
     <template #footer>
-      <a-button-v2 block @click="goTariffs">
-        {{ t('modals.buttons.goTariffs') }}
-      </a-button-v2>
+      <div class="flex flex-col items-center gap-3">
+        <p class="text-body-md whitespace-pre-wrap text-center text-quaternary">
+          {{ t('modals.limit.firstTime') }}
+        </p>
+        <a-button-v2 block @click="goTariffs">
+          {{ t('modals.buttons.goTariffs') }}
+        </a-button-v2>
+      </div>
     </template>
   </a-modal-v2>
 </template>
 
-<style scoped></style>
+<style scoped></style>

package/components/modals/NoAccessModal.vue

@@ -14,10 +14,14 @@ function onClose() {
   <a-modal-v2
     v-model="isOpen"
     width="424px"
+    hide-header-border
   >
-    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
-      <a-ill-door />
-      <p class="body-400 whitespace-pre-wrap text-center">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
+      <a-ill-no-access />
+      <p class="text-h4 whitespace-pre-wrap text-center">
+        {{ t('modals.no_access.title') }}
+      </p>
+      <p class="text-body-md whitespace-pre-wrap text-center text-quaternary">
         {{ t('modals.no_access.info') }}
       </p>
     </div>

package/components/modals/PaymentMethodModal.vue

@@ -52,11 +52,11 @@ if (props.deleteFromDom) {
     :prevent-close="true"
   >
     <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
+      <p class="text-h2 text-center">
         {{ t('modals.payment_method.title') }}
       </p>
       <a-ill-phone-check class="w-full" />
-      <p class="body-400 whitespace-pre-wrap text-center">
+      <p class="text-body-md whitespace-pre-wrap text-center">
         {{ t('modals.payment_method.questions') }}
       </p>
       <a-radio-button
@@ -66,13 +66,13 @@ if (props.deleteFromDom) {
         :name="`${item.name}`"
         side="right"
         :value="item.id"
-        class="flex items-center justify-between	gap-2 rounded-sm bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
+        class="flex items-center justify-between	gap-2 rounded-sm bg-muted p-[10px_16px]"
       >
         <div class="flex w-full items-center gap-2">
           <component :is="item.img" />
           <div class="flex w-full items-center justify-between">
             {{ t(item.name) }}
-            <p class="body-600">
+            <p class="text-body-md-strong">
               {{ Math.round(sum).toLocaleString('RU-ru') }} ₸
             </p>
           </div>

package/components/modals/RedirectsBanksModal.vue

@@ -36,21 +36,21 @@ if (props.deleteFromDom) {
     :prevent-close="true"
   >
     <div class="flex flex-col gap-5">
-      <p class="heading-02 whitespace-pre-wrap text-center">
+      <p class="text-h2 whitespace-pre-wrap text-center">
         {{ t('modals.payment_method.redirects_bank.title') }}
       </p>
       <a-button block @click="goKaspi">
         {{ t('modals.buttons.goToKaspi') }}
       </a-button>
       <div class="flex flex-col gap-2">
-        <p class="body-400 text-center">
+        <p class="text-body-md text-center">
           {{ t('modals.payment_method.redirects_bank.paymentId') }}
         </p>
-        <p class="text-center text-xl	font-semibold">
+        <p class="text-h3 text-center">
           {{ requestId }}
         </p>
       </div>
-      <p class="body-400 text-center">
+      <p class="text-body-md text-center">
         {{ t('modals.payment_method.redirects_bank.subtitle') }}
       </p>
       <a-button

package/components/modals/ReplenishModal.vue

@@ -75,7 +75,7 @@ watch(
   >
     <div class="flex flex-col items-center justify-center gap-5">
       <a-ill-bill class="max-h-[120px] max-w-[120px]" />
-      <p class="body-400 font-semibold">
+      <p class="text-body-md-strong">
         {{ t('modals.replenish_modal.info') }}
       </p>
       <a-input-standard
@@ -99,7 +99,7 @@ watch(
           size="lg"
           :class="[
             money === item.value
-              ? 'bg-blue-700 text-white hover:bg-blue-700 dark:border-blue-500 dark:bg-transparent dark:text-blue-500 dark:hover:bg-transparent'
+              ? 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover'
               : ''
           ]"
           @click.stop="onClick(item.value)"

package/components/modals/ReportBugConfirmModal.vue

@@ -11,10 +11,10 @@ const isOpen = defineModel<boolean>({ required: true })
   >
     <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
       <a-ill-ok />
-      <p class="heading-02 text-center font-bold">
+      <p class="text-h2 text-center">
         {{ t('modals.report_bug.confirmed') }}
       </p>
-      <p class="body-400 text-center">
+      <p class="text-body-md text-center">
         {{ t('modals.report_bug.gratitude') }}
       </p>
     </div>

package/components/modals/ReportBugModal.vue

@@ -93,7 +93,7 @@ async function send() {
     data-test-id="report-form-modal"
   >
     <template #header>
-      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100" data-test-id="report-form-title">
+      <h2 class="text-body-lg-strong text-primary" data-test-id="report-form-title">
         {{ t('modals.report_bug.title') }}
       </h2>
     </template>
@@ -102,7 +102,7 @@ async function send() {
       <div class="flex flex-col items-center justify-center gap-4">
         <a-ill-stop-sign class="size-[140px]" />
         <slot name="title">
-          <p class="label-400 text-center">
+          <p class="text-body-md text-center">
             {{ name }}
           </p>
         </slot>

package/components/modals/Resend.vue

@@ -43,19 +43,19 @@ function goToMain() {
 
 <template>
   <div class="flex flex-col items-center justify-center gap-5">
-    <p class="heading-02">
+    <p class="text-h2">
       {{ $t('login.modal.title') }}
     </p>
     <a-ill-mail />
-    <p class="body-400 text-center">
+    <p class="text-body-md text-center">
       {{ $t('login.modal.subtitle1') }}
     </p>
-    <p class="body-400 text-center">
+    <p class="text-body-md text-center">
       {{ $t('login.modal.subtitle2') }}
     </p>
     <p
       v-if="!isResend"
-      class="heading-02"
+      class="text-h2"
     >
       {{ timer }} {{ $t('login.modal.seconds') }}
     </p>

package/components/modals/SubmitApplicationModal.vue

@@ -51,10 +51,6 @@ defineExpose({
   reset: () => (submitted.value = false),
 })
 
-watch(isOpen, (value) => {
-  if (!value) submitted.value = false
-})
-
 onMounted(() => {
   form.email = props.userInfo?.email || ''
 })
@@ -67,7 +63,7 @@ onMounted(() => {
     persistent
   >
     <div class="flex flex-col gap-5 px-6 py-4">
-      <p class="heading-02 text-center">
+      <p class="text-h2 text-center">
         {{ t('modals.submit_application_modal.title') }}
       </p>
       <a-ill-mail class="w-full" />

package/components/modals/id/AuthModal.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { useUrls } from '#adata-ui/composables/useUrls'
 
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
 const { t } = useI18n()
 const isOpen = useAuthModal()
 const { myLayer } = useAppConfig()
 const { login } = useUrls()
 
-const { loginModal, registrationModal } = useIdModals()
+const { loginModal } = useIdModals()
+
+function close(){
+  isOpen.value = false
+}
 
 function goAuth() {
   if (myLayer.authMode !== 'local') {
@@ -26,67 +27,46 @@ function goAuth() {
     loginModal.value = true
   }
 }
-
-function goRegister() {
-  if (myLayer.authMode !== 'local') {
-    if (window) {
-      let fullPath = encodeURIComponent(window.location.toString())
-      if (fullPath.includes('basic-info')) {
-        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
-      }
-      window.location.href = `${login}register?url=${fullPath}`
-    }
-  }
-  else {
-    isOpen.value = false
-    registrationModal.value = true
-  }
-}
-const close = () => {
-  isOpen.value = false
-  emit('close')
-}
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    :title="t('modals.auth.title')"
+    width="424px"
     data-test-id="no-access-popup"
+    hide-header-border
   >
-    <div class="flex flex-col items-center gap-5 text-center text-sm">
-      <a-ill-door />
-      <div>{{ t('modals.auth.content') }}</div>
-      <a-button
-        block
-        variant="success"
-        data-test-id="no-access-popup-authorize-button"
-        @click="goAuth"
-      >
-        {{ t('modals.buttons.logIn') }}
-      </a-button>
-      <div>{{ t('modals.auth.firstTime') }}</div>
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
+      <a-ill-shield-user />
+      <p class="text-h4 whitespace-pre-wrap text-center">
+        {{ t('modals.auth.title') }}
+      </p>
+      <p class="text-body-md whitespace-pre-wrap text-center text-quaternary">
+        {{ t('modals.auth.content') }}
+      </p>
     </div>
     <template #footer>
-      <div class="flex gap-2">
-        <a-button
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <a-button-v2
           view="outline"
+          color="white"
           block
           data-test-id="no-access-popup-close-button"
           @click="close"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
+          color="blue"
           block
-          data-test-id="no-access-popup-register-button"
-          @click="goRegister"
+          data-test-id="no-access-popup-authorize-button"
+          @click="goAuth"
         >
-          {{ t('modals.buttons.register') }}
-        </a-button>
+          {{ t('modals.buttons.logIn') }}
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped></style>

package/components/modals/id/IdAutoLogoutModal.vue

@@ -5,12 +5,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const { loginModal, autoLogoutModal } = useIdModals()
-
-function onLogin() {
-  autoLogoutModal.value = false
-  loginModal.value = true
-}
+const { autoLogoutModal } = useIdModals()
 
 function onClose() {
   emit('closed', true)
@@ -18,26 +13,30 @@ function onClose() {
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4 text-center">
-    <h2 class="text-2xl font-bold">
-      {{ t('modals.id.autoLogout.title') }}
-    </h2>
-    <a-ill-info class="size-[120px]" />
-    <p class="text-sm">
-      {{ t('modals.id.autoLogout.content') }}
-    </p>
-    <div class="flex w-full gap-2">
-      <a-button block view="outline" @click="onClose">
-        {{ t('actions.close') }}
-      </a-button>
-      <a-button
+  <a-modal-v2
+    v-model="autoLogoutModal"
+    width="424px"
+    hide-header-border
+  >
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
+      <a-ill-door />
+      <p class="text-h4 whitespace-pre-wrap text-center">
+        {{ t('modals.id.autoLogout.title') }}
+      </p>
+      <p class="text-body-md whitespace-pre-wrap text-center text-quaternary">
+        {{ t('modals.id.autoLogout.content') }}
+      </p>
+    </div>
+    <template #footer>
+      <a-button-v2
+        color="blue"
         block
-        @click="onLogin"
+        @click="onClose"
       >
-        {{ t('actions.login') }}
-      </a-button>
-    </div>
-  </div>
+        {{ t('actions.close') }}
+      </a-button-v2>
+    </template>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/id/IdBanner.vue

@@ -9,7 +9,7 @@ function onRegister() {
 </script>
 
 <template>
-  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="bg-gradient-banner flex flex-col justify-between gap-2 rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80 lg:flex-row lg:gap-0">
     <div>
       <p class="mb-2 text-h5">
         {{ t('modals.id.banners.auth.title') }}
@@ -17,15 +17,15 @@ function onRegister() {
       <i18n-t
         keypath="modals.id.banners.auth.subtitle"
         tag="p"
-        class="text-body-md text-gray-600 dark:text-gray-200"
+        class="text-body-md text-quaternary"
       >
         <template #register>
-          <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">
+          <button class="font-semibold text-brand" @click="onRegister">
             {{ t('modals.id.banners.auth.register') }}
           </button>
         </template>
         <template #checks>
-          <span class="font-bold text-deepblue-900 dark:text-white">{{ t('modals.id.banners.auth.checks') }}</span>
+          <span class="font-bold text-primary">{{ t('modals.id.banners.auth.checks') }}</span>
         </template>
       </i18n-t>
     </div>
@@ -39,23 +39,3 @@ function onRegister() {
     </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/modals/id/IdConfirmAccountOtpModal.vue

@@ -139,24 +139,25 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex flex-col items-center gap-4 text-center">
-    <h2 class="text-2xl font-bold">
+    <h2 class="text-h2">
       {{ t('modals.id.confirmAccount.title') }}
     </h2>
 
+    <!-- осознанно константный: пара light/dark-ассетов, тема переключается dark:-классами -->
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
     <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
 
-    <div class="text-sm">
+    <div class="text-body-md">
       <p class="mb-1">
         {{ t('modals.id.resetPasswordOtp.content') }}
       </p>
 
-      <div v-if="timer > 0" class="text-2xl font-bold">
+      <div v-if="timer > 0" class="text-h2">
         {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
       </div>
       <button
         v-else
-        class="text-blue-700 dark:text-blue-500"
+        class="text-brand"
         :disabled="isResendLoading"
         @click="onResend"
       >

package/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -21,13 +21,13 @@ function onClose() {
 
 <template>
   <div class="flex flex-col gap-4 text-center">
-    <h2 class="text-2xl font-bold">
+    <h2 class="text-h2">
       {{ t('modals.id.confirmSuccessful.title') }}
     </h2>
-    <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
+    <span class="mx-auto size-[100px] rounded-full bg-muted">
       <a-ill-ok />
     </span>
-    <p class="text-sm">
+    <p class="text-body-md">
       {{ t('modals.id.confirmSuccessful.content') }}
     </p>
     <a-button view="outline" @click="onClose">