VEGA-4499: адаптация UI главной страницы документации

src/.vitepress/theme/components/CustomHero.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { type Ref, inject } from 'vue'
+import { type Ref, inject, ref } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import CustomButton from './CustomButton.vue'
 import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
+import HomeHeroSearchButton from './HomeHeroSearchButton.vue'
+import VPLocalSearchBox from 'vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -14,11 +16,14 @@ defineProps<{
   name?: string
   text?: string
   tagline?: string
+  search?: boolean
   image?: DefaultTheme.ThemeableImage
   actions?: HeroAction[]
 }>()
 
 const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+
+const showSearch = ref(false)
 </script>
 
 <template>
@@ -27,21 +32,20 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
       <div class="main">
         <slot name="home-hero-info">
           <h1 v-if="name" class="name">
-            <span v-html="name" class="clip"></span>
+            {{ name }}
           </h1>
           <p v-if="text" v-html="text" class="text"></p>
           <p v-if="tagline" v-html="tagline" class="tagline"></p>
         </slot>
 
+        <div v-if="search" class="VPHeroSearchWrapper">
+          <VPLocalSearchBox v-if="showSearch" @close="showSearch = false" />
+          <HomeHeroSearchButton @click="showSearch = true" />
+        </div>
+
         <div v-if="actions" class="actions">
           <div v-for="action in actions" :key="action.link" class="action">
-            <CustomButton
-              tag="a"
-              size="medium"
-              :theme="action.theme"
-              :text="action.text"
-              :href="action.link"
-            />
+            <CustomButton tag="a" size="medium" :theme="action.theme" :text="action.text" :href="action.link" />
           </div>
         </div>
       </div>
@@ -59,6 +63,9 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 </template>
 
 <style lang="scss" scoped>
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/mixin";
 .VPHero {
   margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
   padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
@@ -80,7 +87,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 1080px;
 }
 
 @media (min-width: 960px) {
@@ -95,46 +102,41 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   order: 2;
   flex-grow: 1;
   flex-shrink: 0;
-}
-
-.VPHero.has-image .container {
-  text-align: center;
-}
-
-@media (min-width: 960px) {
+  background-color: themes.$color-background-secondary;
+  padding: 98px 92px;
+  border-radius: sizes.$size-border-radius-x6;
+  
   .VPHero.has-image .container {
-    text-align: left;
+    text-align: center;
   }
-}
+  
+  @media (min-width: 960px) {
+    .main {
+      order: 1;
+      width: calc((100% / 3) * 2);
+    }
 
-@media (min-width: 960px) {
-  .main {
-    order: 1;
-    width: calc((100% / 3) * 2);
+    .VPHero.has-image .main {
+      max-width: 592px;
+    }
   }
 
-  .VPHero.has-image .main {
-    max-width: 592px;
+  .name,
+  .text {
+    @include mixin.h1;
+    white-space: pre-wrap;
   }
-}
 
-.name,
-.text {
-  max-width: 392px;
-  letter-spacing: -0.4px;
-  line-height: 40px;
-  font-size: 32px;
-  font-weight: 700;
-  white-space: pre-wrap;
-}
-
-.VPHero.has-image .name,
-.VPHero.has-image .text {
-  margin: 0 auto;
-}
-
-.name {
-  color: var(--vp-home-hero-name-color);
+  .VPHero.has-image .name,
+  .VPHero.has-image .text {
+    margin: 0 auto;
+  }
+  
+  .name {
+    color: themes.$color-text-active;
+    padding-bottom: 40px;
+    text-align: center;
+  }
 }
 
 .clip {
@@ -144,22 +146,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   -webkit-text-fill-color: var(--vp-home-hero-name-color);
 }
 
-@media (min-width: 640px) {
-  .name,
-  .text {
-    max-width: 576px;
-    line-height: 56px;
-    font-size: 48px;
-  }
-}
-
 @media (min-width: 960px) {
-  .name,
-  .text {
-    line-height: 64px;
-    font-size: 56px;
-  }
-
   .VPHero.has-image .name,
   .VPHero.has-image .text {
     margin: 0;
@@ -168,7 +155,6 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 
 .tagline {
   padding-top: 8px;
-  max-width: 392px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
@@ -183,7 +169,6 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 @media (min-width: 640px) {
   .tagline {
     padding-top: 12px;
-    max-width: 576px;
     line-height: 32px;
     font-size: 20px;
   }