adata-ui 2.1.40-beta.11 → 2.1.40-beta.13

package/components/navigation/footer/AFooter.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
 import AdataLogo from '#adata-ui/icons/adata-logo.vue'
 import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
-import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
+import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
 import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
 import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
-import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
 import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
-import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
 import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
 import { AIconExpandWindow, AIconLocation, AIconMail, AIconPhone } from '#components'
-import { useUrls } from '#adata-ui/composables/useUrls'
 
 const year = new Date().getFullYear()
 const { t, locale } = useI18n()
@@ -20,33 +20,33 @@ const socialMedia = [
   {
     icon: LinkedinIcon,
     link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
-    name: 'Linkedin'
+    name: 'Linkedin',
   },
   {
     icon: YouTubeIcon,
     link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
-    name: 'YouTube'
+    name: 'YouTube',
   },
   {
     icon: InstagramIcon,
     link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
-    name: 'Instagram'
+    name: 'Instagram',
   },
   {
     icon: TelegramIcon,
     link: 'https://t.me/adatakz_official',
-    name: 'Telegram'
+    name: 'Telegram',
   },
   {
     icon: FaceBookIcon,
     link: 'https://www.facebook.com/adata.kz',
-    name: 'Facebook'
+    name: 'Facebook',
   },
   {
     icon: TikTokIcon,
     link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
-    name: 'Tiktok'
-  }
+    name: 'Tiktok',
+  },
 ]
 
 const mainLinks = computed(() => ({
@@ -74,27 +74,27 @@ const mainLinks = computed(() => ({
         {
           title: t('footer.zakupki.title'),
           link: urls.zakupki + PAGES.tender.main,
-          isNew: true
-        }
+          isNew: true,
+        },
       ],
       [
         {
           title: t('footer.compliance.title'),
           link: buildLocalizedUrl(locale.value, urls.compliance, PAGES.compliance.l),
-          isNew: true
+          isNew: true,
         },
         {
           title: t('header.products.edo.label'),
           link: urls.edo_docs,
-          isNew: true
+          isNew: true,
         },
         {
           title: t('footer.fea.title'),
           link: buildLocalizedUrl(locale.value, urls.tnved, PAGES.fea.main),
-          isNew: true
+          isNew: true,
         },
-      ]
-    ]
+      ],
+    ],
   },
   useful: {
     title: t('footer.useful'),
@@ -123,11 +123,11 @@ const mainLinks = computed(() => ({
         },
         {
           title: t('footer.info.onlineServices'),
-          link: buildLocalizedUrl(locale.value, urls.pk, PAGES.services + '/taxpayer'),
+          link: buildLocalizedUrl(locale.value, urls.pk, `${PAGES.services}/taxpayer`),
         },
-      ]
-    ]
-  }
+      ],
+    ],
+  },
 }))
 
 const contactLinks = computed(() => ({
@@ -161,16 +161,15 @@ const contactLinks = computed(() => ({
     },
   ],
 }))
-
 </script>
 
 <template>
   <footer
     id="footer"
-    class="bg-deepblue-900 dark:bg-gray-900 py-4 lg:py-5 rounded-t-3xl"
+    class="rounded-t-2xl bg-deepblue-900 py-4 dark:bg-gray-900 lg:py-5"
   >
-    <div class="a-container mobile-padding py-5 text-white flex flex-col lg:flex-row justify-between gap-8">
-      <div class="flex flex-col gap-8 justify-between">
+    <div class="a-container mobile-padding flex flex-col justify-between gap-8 py-5 text-white lg:flex-row">
+      <div class="flex flex-col justify-between gap-8">
         <div class="flex flex-col gap-4">
           <adata-logo
             filled
@@ -178,11 +177,11 @@ const contactLinks = computed(() => ({
             class="shrink-0"
           />
 
-          <p class="text-sm">
+          <p class="text-body-md">
             {{ t('footer.subtitle') }}
           </p>
 
-          <div class="hidden lg:flex gap-8">
+          <div class="hidden gap-8 lg:flex">
             <nuxt-link
               v-for="(social, idx) in socialMedia"
               :key="idx"
@@ -201,13 +200,13 @@ const contactLinks = computed(() => ({
           </div>
         </div>
 
-        <p class="hidden lg:block text-[10px]">
+        <p class="hidden text-body-sm lg:block">
           {{ year }} © {{ t('footer.LLP') }} "Alldata"
         </p>
       </div>
 
-      <div class="flex gap-6 lg:gap-[75px] flex-col lg:flex-row">
-        <div class="flex gap-[18px] lg:gap-[75px] flex-col lg:flex-row">
+      <div class="flex flex-col gap-6 lg:flex-row lg:gap-[75px]">
+        <div class="flex flex-col gap-[18px] lg:flex-row lg:gap-[75px]">
           <div
             v-for="(item, idx) in mainLinks"
             :key="idx"
@@ -219,10 +218,10 @@ const contactLinks = computed(() => ({
             />
           </div>
         </div>
-        <!--noindex-->
-        <div class="flex flex-col gap-2 items-start" data-nosnippet>
+        <!-- noindex -->
+        <div class="flex flex-col items-start gap-2" data-nosnippet>
           <nuxt-link
-            class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
+            class="cursor-pointer border-b-[0.5px] border-white pb-3 pr-4 text-body-md-strong"
             :to="contactLinks.link?.replace(/\/$/, '')"
           >
             {{ contactLinks.title }}
@@ -232,10 +231,10 @@ const contactLinks = computed(() => ({
             <div
               v-for="(link, idx) in contactLinks.items"
               :key="idx"
-              class="flex gap-2 items-center"
+              class="flex items-center gap-2"
             >
               <nuxt-link
-                class="text-xs font-medium flex gap-2 items-center cursor-pointer"
+                class="flex cursor-pointer items-center gap-2 text-body-sm-medium"
                 :class="link.class"
                 :to="link.link?.replace(/\/$/, '')"
               >
@@ -256,10 +255,10 @@ const contactLinks = computed(() => ({
             </div>
           </div>
         </div>
-        <!--/noindex-->
+        <!-- /noindex -->
       </div>
 
-      <div class="lg:hidden flex gap-8 flex-wrap">
+      <div class="flex flex-wrap gap-8 lg:hidden">
         <nuxt-link
           v-for="(social, idx) in socialMedia"
           :key="idx"
@@ -276,7 +275,7 @@ const contactLinks = computed(() => ({
         </nuxt-link>
       </div>
 
-      <p class="lg:hidden text-[10px]">
+      <p class="text-body-sm lg:hidden">
         {{ year }} © {{ t('footer.LLP') }} "Alldata"
       </p>
     </div>

package/components/navigation/footer/ui/a-footer-accordion.vue

@@ -18,7 +18,7 @@ const isDesktop = useMediaQuery('(max-width: 1024px)')
 
 const open = ref(false)
 function toFinalValues(el: HTMLDivElement) {
-  el.style.height = el.scrollHeight + 'px'
+  el.style.height = `${el.scrollHeight}px`
   el.style.opacity = '1'
 }
 
@@ -37,17 +37,17 @@ const filterCheck = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 items-start">
-    <div class="flex gap-2 justify-between w-full">
+  <div class="flex flex-col items-start gap-2">
+    <div class="flex w-full justify-between gap-2">
       <nuxt-link
-        class="text-sm font-semibold lg:pb-3 lg:pr-4 lg:border-b-[0.5px] lg:border-white cursor-default"
+        class="cursor-default text-body-md-strong lg:border-b-[0.5px] lg:border-white lg:pb-3 lg:pr-4"
         :class="{ 'cursor-pointer': link }"
         :to="link?.replace(/\/$/, '')"
       >
         {{ label }}
       </nuxt-link>
 
-      <div class="transition-all lg:hidden cursor-pointer">
+      <div class="cursor-pointer transition-all lg:hidden">
         <a-icon-chevron-down
           v-if="content.length"
           filled
@@ -67,7 +67,7 @@ const filterCheck = computed(() => {
     >
       <div
         v-if="filterCheck"
-        class="flex gap-3 lg:gap-6 flex-col lg:flex-row"
+        class="flex flex-col gap-3 lg:flex-row lg:gap-6"
       >
         <div
           v-for="(subItem, subIdx) in content"
@@ -77,10 +77,10 @@ const filterCheck = computed(() => {
           <div
             v-for="(link, idx) in subItem"
             :key="idx"
-            class="flex gap-2 items-center"
+            class="flex items-center gap-2"
           >
             <nuxt-link
-              class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
+              class="flex cursor-pointer items-center gap-2 text-body-sm lg:font-medium"
               :to="link.link?.replace(/\/$/, '')"
             >
               {{ link.title }}
@@ -88,7 +88,7 @@ const filterCheck = computed(() => {
 
             <div
               v-if="link.isNew"
-              class="text-[9px] font-bold px-1 py-[2px] rounded-sm bg-white/20"
+              class="rounded-xs bg-white/20 px-1 py-[2px] text-body-sm font-bold"
             >
               NEW
             </div>

package/components/navigation/header/AHeader.vue

@@ -56,8 +56,6 @@ const langIsOn = myLayer.langIsOn
 const contacts = useContacts()
 const { loginModal } = useIdModals()
 
-// Anchor the navigation mega-menu to the actual bottom of the header bar so it
-// stays aligned even when the system-notification banner is shown above it.
 const headerRef = ref<HTMLElement | null>(null)
 const { bottom: headerBottom } = useElementBounding(headerRef)
 
@@ -142,7 +140,7 @@ onMounted(() => {
               @click="$emit('search')"
             >
               <a-icon-search class="text-gray-400 dark:text-gray-500" />
-              <span class="body-400 text-gray-500 dark:text-gray-400">{{ t('header.search') }}</span>
+              <span class="text-body-md text-gray-500 dark:text-gray-400">{{ t('header.search') }}</span>
             </button>
           </div>
         </section>
@@ -199,7 +197,7 @@ onMounted(() => {
             <template #default="{ toggle, isOpen }">
               <button
                 type="button"
-                class="hidden h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-sm font-medium 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:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
+                class="hidden h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-body-md-medium 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:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
                 :class="isOpen
                   ? 'bg-deepblue-900/10 text-deepblue-900 dark:bg-white/15 dark:text-white'
                   : 'text-gray-900 dark:text-gray-100'"

package/components/navigation/header/AlmatyContacts.vue

@@ -1,16 +1,64 @@
+<script setup lang="ts">
+import { useContacts } from '#adata-ui/composables/projectState'
+import Clock from '#adata-ui/icons/clock.vue'
+import ExpandWindow from '#adata-ui/icons/expand-window.vue'
+import Location from '#adata-ui/icons/location.vue'
+import Mail from '#adata-ui/icons/mail.vue'
+import Phone from '#adata-ui/icons/phone.vue'
+import Whatsapp from '#adata-ui/icons/whatsapp.vue'
+
+const { t } = useI18n()
+const contacts = useContacts()
+const AlmatyItems = computed(() => ([
+  {
+    title: t('header.contacts.almaty.adress.title'),
+    subtitle: t('header.contacts.almaty.adress.subtitle'),
+    icon: Location,
+    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72',
+  },
+  {
+    title: t('header.contacts.almaty.email.title'),
+    subtitle: 'info@adata.kz',
+    icon: Mail,
+    to: 'mailto:info@adata.kz',
+  },
+  {
+    title: t('header.contacts.almaty.schedule.title'),
+    subtitle: t('header.contacts.almaty.schedule.subtitle'),
+    icon: Clock,
+  },
+]))
+
+const technicalSupport = computed(() => ([
+  {
+    subtitle: t('header.contacts.almaty.support.linkTitle'),
+    icon: ExpandWindow,
+    to: 'https://api.whatsapp.com/send/?phone=77712289041',
+  },
+]))
+
+const newContacts = computed(() => contacts.value.map(item => ({
+  subtitle: item.contact,
+  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
+  to: item.platform_code === 'telephone'
+    ? `tel:${item.contact}`
+    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/\D/g, '')}`,
+})))
+</script>
+
 <template>
-  <!--noindex-->
+  <!-- noindex -->
   <div class="h-[272px]" data-nosnippet>
-    <h2 class="heading-02 mb-4">
+    <h2 class="mb-4 text-h2">
       {{ t('header.contacts.almaty.title') }}
     </h2>
     <div class="flex gap-10">
       <div class="flex flex-col gap-4">
         <div
-          v-for="item in AlmatyItems.slice(0,3)"
+          v-for="item in AlmatyItems.slice(0, 3)"
           class="flex flex-col gap-2 "
         >
-          <div class="heading-04">
+          <div class="text-h5">
             {{ item.title }}
           </div>
           <a
@@ -21,46 +69,46 @@
               :is="item.icon"
               class="shrink-0"
             />
-            <div class=" body-400">
+            <div class="text-body-md">
               {{ item.subtitle }}
             </div>
           </a>
         </div>
       </div>
       <div class="flex flex-col gap-2 2xl:gap-4">
-        <div class="flex flex-col gap-4 h-full justify-between">
+        <div class="flex h-full flex-col justify-between gap-4">
           <div class="flex flex-col gap-2 ">
-            <div class="heading-04">
+            <div class="text-h5">
               {{ t('header.contacts.almaty.contactUs.title') }}
             </div>
-            <div class="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] max-w-[484px] gap-x-8 gap-y-2">
+            <div class="grid max-w-[484px] grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-x-8 gap-y-2">
               <a
                 v-for="link in newContacts"
                 :key="link.subtitle"
-                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
                 :href="link.to"
                 :target="link.icon === Whatsapp ? '_blank' : '_self'"
               >
                 <component :is="link.icon" />
-                <div class="body-400 line-clamp-1">
+                <div class="line-clamp-1 text-body-md">
                   {{ link.subtitle }}
                 </div>
               </a>
             </div>
           </div>
           <div class="flex flex-col gap-2 ">
-            <div class="heading-04 whitespace-nowrap">
+            <div class="whitespace-nowrap text-h5">
               {{ t('header.contacts.almaty.support.title') }}
             </div>
             <div class="flex flex-col lg:gap-y-5">
               <a
                 v-for="link in technicalSupport"
                 :key="link.subtitle"
-                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
                 :href="link.to"
                 target="_blank"
               >
-                <div class="body-400 line-clamp-1 text-blue-600">
+                <div class="line-clamp-1 text-body-md text-blue-600">
                   {{ link.subtitle }}
                 </div>
                 <component
@@ -72,74 +120,26 @@
           </div>
         </div>
       </div>
-<!--      Here is the financial department-->
-<!--      <div class="flex flex-col gap-2 self-end">-->
-<!--        <div class="heading-04 whitespace-nowrap">-->
-<!--          {{ t('header.contacts.almaty.financeDep.title') }}-->
-<!--        </div>-->
-<!--        <nuxt-link-->
-<!--          class="flex gap-1 items-center"-->
-<!--          to="https://api.whatsapp.com/send?phone=77713954561"-->
-<!--          target="_blank"-->
-<!--        >-->
-<!--          <div class="body-400 line-clamp-1 text-blue-600">-->
-<!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }}-->
-<!--          </div>-->
-<!--          <a-icon-expand-window class="stroke-blue-600"/>-->
-<!--        </nuxt-link>-->
-<!--      </div>-->
+      <!--      Here is the financial department -->
+      <!--      <div class="flex flex-col gap-2 self-end"> -->
+      <!--        <div class="heading-04 whitespace-nowrap"> -->
+      <!--          {{ t('header.contacts.almaty.financeDep.title') }} -->
+      <!--        </div> -->
+      <!--        <nuxt-link -->
+      <!--          class="flex gap-1 items-center" -->
+      <!--          to="https://api.whatsapp.com/send?phone=77713954561" -->
+      <!--          target="_blank" -->
+      <!--        > -->
+      <!--          <div class="body-400 line-clamp-1 text-blue-600"> -->
+      <!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }} -->
+      <!--          </div> -->
+      <!--          <a-icon-expand-window class="stroke-blue-600"/> -->
+      <!--        </nuxt-link> -->
+      <!--      </div> -->
     </div>
   </div>
-  <!--/noindex-->
+  <!-- /noindex -->
 </template>
 
-<script setup lang="ts">
-
-import Location from "#adata-ui/icons/location.vue";
-import Mail from "#adata-ui/icons/mail.vue";
-import Clock from "#adata-ui/icons/clock.vue";
-import Whatsapp from "#adata-ui/icons/whatsapp.vue";
-import Phone from "#adata-ui/icons/phone.vue";
-import ExpandWindow from "#adata-ui/icons/expand-window.vue";
-import {useContacts} from "#adata-ui/composables/projectState";
-
-const {t} = useI18n()
-const contacts = useContacts()
-const AlmatyItems = computed(() => ([
-  {
-    title: t('header.contacts.almaty.adress.title'),
-    subtitle: t('header.contacts.almaty.adress.subtitle'),
-    icon: Location,
-    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72'
-  },
-  {
-    title: t('header.contacts.almaty.email.title'),
-    subtitle: 'info@adata.kz',
-    icon: Mail,
-    to: 'mailto:info@adata.kz'
-  },
-  {
-    title: t('header.contacts.almaty.schedule.title'),
-    subtitle: t('header.contacts.almaty.schedule.subtitle'),
-    icon: Clock,
-  },
-]))
-
-const technicalSupport = computed(() => ([
-  {
-    subtitle: t('header.contacts.almaty.support.linkTitle'),
-    icon: ExpandWindow,
-    to: "https://api.whatsapp.com/send/?phone=77712289041"
-  }
-]))
-
-const newContacts = computed(()=> contacts.value.map(item => ({
-  subtitle: item.contact,
-  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
-  to: item.platform_code === 'telephone' ? `tel:${item.contact}`
-    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/[^0-9]/g, '')}`
-})))
-</script>
-
 <style scoped>
 </style>

package/components/navigation/header/CardGallery.vue

@@ -109,7 +109,7 @@ onUnmounted(() => clearTimer())
 
 <template>
   <div
-    class="overflow-hidden relative w-[320px] h-[480px] rounded-2xl"
+    class="overflow-hidden relative w-[320px] h-[480px] rounded-xl"
     @mouseover="handleMouseOver"
     @mouseout="handleMouseOut"
   >
@@ -120,14 +120,14 @@ onUnmounted(() => clearTimer())
       >
         <img
           :src="items[currentIndex].image"
-          class="size-full object-cover rounded-2xl"
+          class="size-full object-cover rounded-xl"
         />
         <nuxt-link-locale :to="items[currentIndex].to">
-          <div class="absolute bottom-0 rounded-2xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
+          <div class="absolute bottom-0 rounded-xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-lg">
+                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-md">
                     <component
                       :is="items[currentIndex].icon"
                       class="size-6"

package/components/navigation/header/HeaderUsage.vue

@@ -16,14 +16,12 @@ interface Props {
   daysRemaining?: number
 }
 
-// Bar fill represents the remaining quota: full bar = plenty of requests left.
 const percent = computed(() => {
   if (props.maxLimit <= 0) return 0
   const ratio = (props.limitRemaining / props.maxLimit) * 100
   return Math.min(100, Math.max(0, ratio))
 })
 
-// Animate the fill from 0 on mount and on every value change.
 const displayPercent = ref(0)
 onMounted(() => {
   displayPercent.value = percent.value
@@ -32,17 +30,33 @@ watch(percent, (value) => {
   displayPercent.value = value
 })
 
-const isLow = computed(() => percent.value < 20)
+const usageLevel = computed<'normal' | 'warning' | 'critical'>(() => {
+  if (percent.value < 20) return 'critical'
+  if (percent.value < 40) return 'warning'
+  return 'normal'
+})
 
-const barColorClass = computed(() =>
-  isLow.value
-    ? 'bg-red-500 dark:bg-red-400'
-    : 'bg-blue-600 dark:bg-blue-500',
-)
+const barColorClass = computed(() => {
+  switch (usageLevel.value) {
+    case 'critical':
+      return 'bg-red-500 dark:bg-red-400'
+    case 'warning':
+      return 'bg-yellow-500 dark:bg-yellow-400'
+    default:
+      return 'bg-blue-600 dark:bg-blue-500'
+  }
+})
 
-const valueColorClass = computed(() =>
-  isLow.value ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100',
-)
+const valueColorClass = computed(() => {
+  switch (usageLevel.value) {
+    case 'critical':
+      return 'text-red-600 dark:text-red-400'
+    case 'warning':
+      return 'text-yellow-600 dark:text-yellow-400'
+    default:
+      return 'text-gray-900 dark:text-gray-100'
+  }
+})
 </script>
 
 <template>
@@ -69,7 +83,7 @@ const valueColorClass = computed(() =>
         </div>
 
         <span
-          class="text-sm tabular-nums leading-none"
+          class="text-body-md tabular-nums leading-none"
           data-test-id="header-usage-requests"
         >
           <span
@@ -79,7 +93,7 @@ const valueColorClass = computed(() =>
         </span>
 
         <template #content>
-          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
+          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
             Лимит запросов: {{ limitRemaining }}
           </span>
         </template>
@@ -99,11 +113,11 @@ const valueColorClass = computed(() =>
           data-test-id="header-usage-days"
         >
           <calendar class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
-          <span class="text-sm font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
+          <span class="text-body-md font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
         </div>
 
         <template #content>
-          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
+          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
             Остаток дней: {{ daysRemaining }}
           </span>
         </template>

package/components/navigation/header/ListItem.vue

@@ -4,9 +4,9 @@
     @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-lg dark:hover:bg-gray-800 normal-case transition-all "
+    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 "
   >
-    <div class="min-w-8 h-8 rounded-lg flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
+    <div class="min-w-8 h-8 rounded-md flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
       <component
         :is="item.icon"
         class="h-5 w-5"

package/components/navigation/header/NavCard.vue

@@ -29,7 +29,7 @@ const hover = ref(false)
       </p>
     </div>
     <div
-      class="flex items-center justify-center self-end rounded-lg bg-gradient-blue  dark:text-gray-900 text-white"
+      class="flex items-center justify-center self-end rounded-md bg-gradient-blue  dark:text-gray-900 text-white"
       :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
     >
       <component