feat: our fonts (#147)

Author: hmbanan666

apps/storefront-telegram/app/app.config.ts

@@ -27,7 +27,7 @@ export default defineAppConfig({
     },
     button: {
       slots: {
-        base: 'font-semibold',
+        base: 'font-semibold font-headers',
       },
       variants: {
         size: {
@@ -58,7 +58,9 @@ export default defineAppConfig({
     },
     drawer: {
       slots: {
-        content: '!max-h-10/12 ring-default',
+        header: 'text-xl/6 font-bold font-headers',
+        body: 'mb-12 hide-scroll',
+        content: '!max-h-10/12 ring-default hide-scroll',
       },
     },
     navigationMenu: {

apps/storefront-telegram/app/assets/css/styles.css

@@ -128,3 +128,7 @@ body::-webkit-scrollbar {
   display: none;
   width: 0;
 }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-headers);
+}

apps/storefront-telegram/app/components/CitySelector.vue

@@ -8,7 +8,7 @@
   >
     <template #content>
       <div class="p-4 pb-20 flex flex-col gap-3 overflow-y-auto hide-scroll">
-        <h3 class="text-lg font-semibold">
+        <h3 class="text-lg font-bold">
           Выберите город
         </h3>
 

apps/storefront-telegram/app/components/catalog/AverageProgressButton.vue

@@ -53,7 +53,7 @@
   <UDrawer v-model:open="isDrawerOpened">
     <template #content>
       <div class="p-4 pb-20 flex flex-col gap-5 overflow-y-auto hide-scroll">
-        <h2 class="text-xl/6 font-semibold">
+        <h2 class="text-xl/6 font-bold">
           Увеличим чек?
         </h2>
 

apps/storefront-telegram/app/components/catalog/CategoriesButton.vue

@@ -20,30 +20,24 @@
     />
   </div>
 
-  <UDrawer v-model:open="isDrawerOpened">
-    <template #content>
-      <div class="p-4 pb-20 flex flex-col gap-5 overflow-y-auto hide-scroll">
-        <h2 class="text-xl/6 font-semibold">
-          Категории
-        </h2>
-
-        <div class="flex flex-col gap-0">
-          <UButton
-            v-for="category in menuStore.menu?.categories"
-            :key="category.id"
-            variant="ghost"
-            color="neutral"
-            size="xl"
-            class="-ml-2 px-2 py-1.5 font-medium motion-preset-slide-left"
-            :class="[
-              visibleCategory === category.slug
-                ? 'font-semibold text-primary'
-                : '',
-            ]"
-            :label="category.name"
-            @click="handleScroll(category.slug)"
-          />
-        </div>
+  <UDrawer v-model:open="isDrawerOpened" title="Категории">
+    <template #body>
+      <div class="-ml-2 flex flex-col gap-0">
+        <UButton
+          v-for="category in menuStore.menu?.categories"
+          :key="category.id"
+          variant="ghost"
+          color="neutral"
+          size="xl"
+          class="px-2 py-1.5 font-medium motion-preset-slide-left"
+          :class="[
+            visibleCategory === category.slug
+              ? 'font-semibold text-primary'
+              : '',
+          ]"
+          :label="category.name"
+          @click="handleScroll(category.slug)"
+        />
       </div>
     </template>
   </UDrawer>

apps/storefront-telegram/app/components/catalog/CategoryBlock.vue

@@ -3,7 +3,7 @@
     ref="target"
     class="flex flex-col gap-3 mb-10"
   >
-    <h2 :id="category?.slug" class="scroll-mt-36 text-2xl/5 font-semibold tracking-tight">
+    <h2 :id="category?.slug" class="scroll-mt-36 text-2xl/5 font-bold tracking-tight">
       {{ category?.name }}
     </h2>
 

apps/storefront-telegram/app/components/catalog/ClosedNowHeader.vue

@@ -8,7 +8,7 @@
         <UIcon name="i-lucide-moon" class="size-12 motion-preset-oscillate-sm motion-preset-seesaw motion-duration-3000" />
 
         <div class="flex flex-col">
-          <h3 class="text-lg font-semibold">
+          <h3 class="text-lg font-bold">
             Мы сейчас закрыты
           </h3>
           <p>Работаем с 10:00 до 22:00</p>

apps/storefront-telegram/app/components/catalog/ProductCard.vue

@@ -10,7 +10,7 @@
       </div>
 
       <div class="px-3 py-1 flex-1 flex flex-col gap-1">
-        <p class="text-sm/4 font-semibold">
+        <p class="text-sm/4 font-bold">
           {{ product?.name }}
         </p>
 
@@ -35,7 +35,7 @@
           <div class="text-base font-medium">
             <span v-if="!withSingleVariant" class="pr-1 lowercase">{{ $t('app.cart.from') }}</span>
             <span>{{ price }}</span>
-            <span class="pl-1 text-lg">{{ channelStore.currencySign }}</span>
+            <span class="pl-1">{{ channelStore.currencySign }}</span>
           </div>
         </UButton>
       </div>

apps/storefront-telegram/app/components/client/BonusProgramRegistration.vue

@@ -26,7 +26,7 @@
   >
     <template #content>
       <div class="p-4 pb-20 flex flex-col gap-5 overflow-y-auto">
-        <h2 class="text-xl/6 font-semibold">
+        <h2 class="text-xl/6 font-bold">
           Регистрация в программе лояльности
         </h2>
 

apps/storefront-telegram/app/components/client/PointsCard.vue

@@ -21,10 +21,10 @@
               Клиент {{ clientStore.level.level }} уровня
             </div>
             <div class="flex flex-row gap-1.5 items-center">
-              <p class="text-4xl/6 font-semibold">
+              <h3 class="text-4xl/8 font-bold">
                 {{ clientStore.points }}
-              </p>
-              <UIcon name="fluent:heart-circle-24-filled" class="size-7" />
+              </h3>
+              <UIcon name="fluent:heart-circle-24-filled" class="size-6" />
             </div>
           </div>
 
@@ -41,9 +41,9 @@
               {{ clientStore.level.cashback }}%
             </div>
 
-            <div class="tg-text-inverted">
+            <p class="tg-text-inverted font-medium">
               Ваш кешбэк
-            </div>
+            </p>
           </div>
 
           <UIcon name="i-lucide-info" class="size-6 tg-text-inverted" />
@@ -62,7 +62,7 @@
   >
     <template #content>
       <div class="p-4 pb-20 flex flex-col gap-5 overflow-y-auto">
-        <h2 class="text-xl/6 font-semibold">
+        <h2 class="text-xl/6 font-bold">
           У вас есть {{ clientStore.points }} «Лавчиков»
         </h2>