From ba8959cb6478161993cc507e3c720b898de5a989 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 8 Jul 2022 15:12:35 +0300
Subject: [PATCH 01/13] Added text utils docs demo.

---
 packages/docs/src/locales/en/en.json          |  3 +-
 packages/docs/src/locales/ru/ru.json          |  3 +-
 .../styles/typography/examples/textUtils.vue  | 29 +++++++++++++++++++
 .../styles/typography/page-config.ts          |  3 ++
 packages/ui/src/styles/global/typography.scss |  4 +++
 5 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/textUtils.vue

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index c3951b5768..a6d2454b3e 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -3805,7 +3805,8 @@
     "links": "Links",
     "textHighlighted": "Highlighted text",
     "blockquote": "Blockquote",
-    "textBlock": "Text block"
+    "textBlock": "Text block",
+    "textUtils": "Text utils"
   },
   "ag-grid": {
     "title": "AG Grid Theme",
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index baba482372..331ade4d22 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -3686,7 +3686,8 @@
     "links": "Ссылки",
     "textHighlighted": "Выделенный текст",
     "blockquote": "Цитата",
-    "textBlock": "Текстовый блок"
+    "textBlock": "Текстовый блок",
+    "textUtils": "Текстовые утилиты"
   },
   "ag-grid": {
     "title": "Тема для AG Grid",
diff --git a/packages/docs/src/page-configs/styles/typography/examples/textUtils.vue b/packages/docs/src/page-configs/styles/typography/examples/textUtils.vue
new file mode 100644
index 0000000000..4e33dc0825
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/textUtils.vue
@@ -0,0 +1,29 @@
+<template>
+  <p class="text--left">
+    Left
+  </p>
+
+  <p class="text--center">
+    Center
+  </p>
+
+  <p class="text--right">
+    Right
+  </p>
+
+  <p class="text--justify" style="width: 33%;">
+    Justify
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet neque explicabo maxime optio doloremque alias quam eveniet saepe, facilis ullam.
+  </p>
+
+  <p class="text--truncate" style="width: 33%;">
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nulla necessitatibus ullam esse ab a explicabo nesciunt nihil laborum? Ex numquam delectus accusantium repellendus est quis. Officia perferendis perspiciatis recusandae?
+  </p>
+
+  <p>
+    <span class="text--uppercase mr-2">UpperCAse</span>
+    <span class="text--lowercase mr-2">LoweRCAse</span>
+    <span class="text--capitalize mr-2">Capitalize text</span>
+    <span class="text--bold">Bold</span>
+  </p>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/page-config.ts b/packages/docs/src/page-configs/styles/typography/page-config.ts
index bd25e63014..e452df0aa4 100644
--- a/packages/docs/src/page-configs/styles/typography/page-config.ts
+++ b/packages/docs/src/page-configs/styles/typography/page-config.ts
@@ -44,6 +44,9 @@ const config: ApiDocsBlock[] = [
 
   block.headline('typography.textBlock'),
   block.example('textBlock'),
+
+  block.headline('typography.textUtils'),
+  block.example('textUtils'),
 ]
 
 export default config
diff --git a/packages/ui/src/styles/global/typography.scss b/packages/ui/src/styles/global/typography.scss
index 9e38e71c77..16c8834829 100644
--- a/packages/ui/src/styles/global/typography.scss
+++ b/packages/ui/src/styles/global/typography.scss
@@ -72,6 +72,10 @@
     text-align: center !important;
   }
 
+  &--justify {
+    text-align: justify !important;
+  }
+
   &--uppercase {
     text-transform: uppercase !important;
   }

From 1414a541d8079f8dc317bbb55d965090d51a5376 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 8 Jul 2022 15:21:38 +0300
Subject: [PATCH 02/13] Removed extra grid styles.

---
 packages/ui/src/styles/global/_utility-global.scss   | 12 ------------
 packages/ui/src/styles/grid/_grid-global-styles.scss |  5 -----
 2 files changed, 17 deletions(-)

diff --git a/packages/ui/src/styles/global/_utility-global.scss b/packages/ui/src/styles/global/_utility-global.scss
index 97aa3f3d24..2fa390ceaa 100644
--- a/packages/ui/src/styles/global/_utility-global.scss
+++ b/packages/ui/src/styles/global/_utility-global.scss
@@ -8,18 +8,6 @@
   cursor: pointer;
 }
 
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
 .visually-hidden {
   @include visually-hidden;
 }
diff --git a/packages/ui/src/styles/grid/_grid-global-styles.scss b/packages/ui/src/styles/grid/_grid-global-styles.scss
index d2539fdd92..737f5fb35c 100644
--- a/packages/ui/src/styles/grid/_grid-global-styles.scss
+++ b/packages/ui/src/styles/grid/_grid-global-styles.scss
@@ -255,11 +255,6 @@
   display: inline-flex !important;
 }
 
-// Not solitary. Is used in other places.
-.fill-height {
-  height: 100%;
-}
-
 .no-wrap {
   @include va-no-wrap();
 }

From 84b08dafb8916d6238acd5979af0a5b130fff938 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 18:17:37 +0300
Subject: [PATCH 03/13] Fix stylelint issues.

---
 packages/ui/src/styles/global/reset.scss | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/styles/global/reset.scss b/packages/ui/src/styles/global/reset.scss
index 634ee09cd6..513590faf2 100644
--- a/packages/ui/src/styles/global/reset.scss
+++ b/packages/ui/src/styles/global/reset.scss
@@ -9,6 +9,7 @@ body {
   height: 100%;
   min-height: 100vh;
   position: relative;
+  line-height: 1;
 }
 
 main {
@@ -31,10 +32,6 @@ pre {
   font-size: 1em;
 }
 
-a {
-  background-color: transparent;
-}
-
 abbr[title] {
   border-bottom: none;
   text-decoration: underline;
@@ -113,13 +110,6 @@ button::-moz-focus-inner,
   padding: 0;
 }
 
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
@@ -288,6 +278,7 @@ video {
 
 a {
   text-decoration: none;
+  background-color: transparent;
 }
 
 input {
@@ -310,10 +301,6 @@ section {
   display: block;
 }
 
-body {
-  line-height: 1;
-}
-
 ol,
 ul {
   list-style: none;

From e5d932819bedc4ed53ca63637bd9c59691fd5635 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 18:19:46 +0300
Subject: [PATCH 04/13] Added VaIcon svg size support.

---
 packages/ui/src/components/va-icon/VaIcon.vue |  7 +++++++
 packages/ui/src/styles/global/reset.scss      | 10 +++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/va-icon/VaIcon.vue b/packages/ui/src/components/va-icon/VaIcon.vue
index 241d89044b..518933c373 100644
--- a/packages/ui/src/components/va-icon/VaIcon.vue
+++ b/packages/ui/src/components/va-icon/VaIcon.vue
@@ -75,6 +75,8 @@ export default defineComponent({
       cursor: attrs.onClick ? 'pointer' : null,
       color: props.color ? getColor(props.color, undefined, true) : iconConfig.value.color,
       fontSize: sizeComputed.value,
+      height: sizeComputed.value,
+      lineHeight: sizeComputed.value,
     }))
 
     return {
@@ -125,5 +127,10 @@ export default defineComponent({
       transform: rotate(360deg);
     }
   }
+
+  svg {
+    fill: currentColor;
+    height: 100%;
+  }
 }
 </style>
diff --git a/packages/ui/src/styles/global/reset.scss b/packages/ui/src/styles/global/reset.scss
index 513590faf2..4a51c03b35 100644
--- a/packages/ui/src/styles/global/reset.scss
+++ b/packages/ui/src/styles/global/reset.scss
@@ -27,11 +27,6 @@ hr {
   overflow: visible;
 }
 
-pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
 abbr[title] {
   border-bottom: none;
   text-decoration: underline;
@@ -45,8 +40,9 @@ strong {
 
 code,
 kbd,
-samp {
-  font-family: monospace, monospace;
+samp,
+pre {
+  font-family: monospace;
   font-size: 1em;
 }
 

From f0b85e131eb33e43211d842f950a53e2e7ccab61 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 18:22:04 +0300
Subject: [PATCH 05/13] Update docs demo card design.

---
 packages/docs/src/components/DocsExample.vue  | 187 +++++++++---------
 .../docs/src/components/DocsNavigation.vue    | 127 +++++++-----
 2 files changed, 173 insertions(+), 141 deletions(-)

diff --git a/packages/docs/src/components/DocsExample.vue b/packages/docs/src/components/DocsExample.vue
index dca2e9fed8..9d89deb6b8 100644
--- a/packages/docs/src/components/DocsExample.vue
+++ b/packages/docs/src/components/DocsExample.vue
@@ -1,25 +1,23 @@
 <template>
   <div class="mb-3">
-    <component :is="component" />
-    <template v-if="!exampleOptions.hideCode">
-      <va-button
-        v-if="!exampleOptions.forceShowCode"
-        class="mt-2 d-block docs-example__show-code-button"
-        flat
-        size="small"
-        color="primary"
-        @click="showCode = !showCode"
-      >
-        {{ showCode ? $t('docsExample.hideCode') : $t('docsExample.showCode') }}
-      </va-button>
-      <va-content v-if="showCode || exampleOptions.forceShowCode">
-        <DocsNavigation
-          v-if="componentTemplate"
-          :code="componentTemplate"
-          :config="exampleOptions.codesandboxConfig"
-          :git-url="path"
-          :git-component="file"
-        />
+    <va-card outlined class="docs-example-card">
+      <va-card-content>
+        <component :is="component" />
+      </va-card-content>
+    </va-card>
+
+    <va-content v-if="!exampleOptions.hideCode">
+      <DocsNavigation
+        v-if="componentTemplate"
+        :code="componentTemplate"
+        :config="exampleOptions.codesandboxConfig"
+        :git-url="path"
+        :git-component="file"
+        :hide-show-code-button="exampleOptions.forceShowCode"
+        v-model:show-code="showCode"
+      />
+
+      <template v-if="showCode || exampleOptions.forceShowCode">
         <DocsCode
           v-if="!exampleOptions.hideTemplate"
           language="markup"
@@ -35,84 +33,73 @@
           :code="parsed.style"
           language="markup"
         />
-      </va-content>
-    </template>
+      </template>
+    </va-content>
   </div>
 </template>
 
-<script>
-// Manually forked from https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/doc/Example.vue
-// import VaContent from '../../ui/src/components/va-content/VaContent'
-import { ref, reactive, computed, shallowRef } from 'vue'
-import DocsCode from './DocsCode'
-import DocsNavigation from './DocsNavigation'
+<script setup lang="ts">
+import { ref, reactive, computed, shallowRef, defineProps, PropType } from 'vue'
+import DocsCode from './DocsCode.vue'
+import DocsNavigation from './DocsNavigation.vue'
 import { readComponent, readTemplate } from '../helpers/ReadHelper'
+import type { ExampleOptions } from '../types/configTypes'
 
-export default {
-  name: 'DocsExample',
-  components: { DocsCode, DocsNavigation },
-  props: {
-    value: {
-      type: [Object, String],
-      default: undefined,
-    },
-    path: {
-      type: String,
-      default: undefined,
-    },
-    exampleOptions: {
-      type: Object,
-      default: () => ({}),
-    },
+const props = defineProps({
+  value: {
+    type: [Object, String],
+    default: undefined,
   },
-  setup (props) {
-    const showCode = ref(false)
-    const parsed = reactive({
-      template: '',
-      style: '',
-      script: '',
-    })
-    const file = computed(() => {
-      if (props.value === Object(props.value)) {
-        return props.value.file
-      }
+  path: {
+    type: String,
+    required: true,
+  },
+  exampleOptions: {
+    type: Object as PropType<ExampleOptions>,
+    default: () => ({}),
+  },
+})
+const showCode = ref(false)
+const parsed = reactive({
+  template: '',
+  style: '',
+  script: '',
+})
 
-      return props.value
-    })
-    const path = ref(props.path)
-    const component = shallowRef(null)
-    const componentTemplate = shallowRef(null)
+const file = computed(() => {
+  if (typeof props.value === 'object') {
+    return props.value.file
+  }
 
-    importComponent()
-    importTemplate()
+  return props.value
+})
+const path = ref(props.path)
+const component = shallowRef(null)
+const componentTemplate = shallowRef<string | null>(null)
 
-    async function importComponent () {
-      component.value = (await readComponent(path.value, file.value)).default
-    }
-    async function importTemplate () {
-      componentTemplate.value = (await readTemplate(path.value, file.value)).default
-      parse(componentTemplate.value)
-    }
-    function parse (res) {
-      parsed.template = parseTemplate('template', res)
-      parsed.style = parseTemplate('style', res)
-      parsed.script = parseTemplate('script', res)
-    }
-    function parseTemplate (target, template) {
-      const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`
-      const regex = new RegExp(string, 'g')
-      const parsed = regex.exec(template) || []
-      return parsed[1] || ''
-    }
+importComponent()
+importTemplate()
 
-    return {
-      showCode,
-      parsed,
-      component,
-      componentTemplate,
-      file,
-    }
-  },
+async function importComponent () {
+  component.value = (await readComponent(path.value, file.value)).default
+}
+async function importTemplate () {
+  componentTemplate.value = (await readTemplate(path.value, file.value)).default
+  if (componentTemplate.value) {
+    parse(componentTemplate.value)
+  }
+}
+
+function parse (res: string) {
+  parsed.template = parseTemplate('template', res)
+  parsed.style = parseTemplate('style', res)
+  parsed.script = parseTemplate('script', res)
+}
+function parseTemplate (target: string, template: string) {
+  const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`
+  const regex = new RegExp(string, 'g')
+  const parsed = regex.exec(template) || []
+  return parsed[1] || ''
 }
 </script>
 
@@ -125,3 +112,27 @@ export default {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+  .docs-example-card {
+    --va-card-outlined-border: 3px solid var(--va-background);
+    --va-card-border-radius: 0.25rem;
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    position: relative;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--va-background);
+      opacity: 0.3;
+      z-index: -1;
+    }
+  }
+</style>
diff --git a/packages/docs/src/components/DocsNavigation.vue b/packages/docs/src/components/DocsNavigation.vue
index 7c24e20711..46cfd4f84a 100644
--- a/packages/docs/src/components/DocsNavigation.vue
+++ b/packages/docs/src/components/DocsNavigation.vue
@@ -1,5 +1,17 @@
 <template>
   <div class="docs-navigation">
+    <va-button
+      v-if="!hideShowCodeButton"
+      flat
+      size="small"
+      class="docs-navigation__button"
+      color="gray"
+      @click="showCodeComputed = !showCodeComputed"
+    >
+      <va-icon class="docs-navigation__button__icon" name="fa4-code" size="13px" />
+      <span class="docs-navigation__button__text"> {{ showCode ? $t('docsExample.hideCode') : $t('docsExample.showCode') }}</span>
+    </va-button>
+
     <va-button
       flat
       size="small"
@@ -7,7 +19,7 @@
       color="gray"
       @click="copy"
     >
-      <va-icon class="docs-navigation__button__icon" :class="copyButton.icon" size="sm" />
+      <va-icon class="docs-navigation__button__icon" :name="copyButton.icon" size="13px" />
       <span class="docs-navigation__button__text">{{ copyButton.text }}</span>
     </va-button>
 
@@ -19,7 +31,7 @@
       :href="gitLink"
       target="_blank"
     >
-      <va-icon class="docs-navigation__button__icon fa fa-github" size="sm" />
+      <va-icon class="docs-navigation__button__icon fa fa-github" size="13px" />
       <span class="docs-navigation__button__text">{{ $t('docsNavigation.openGithub') }}</span>
     </va-button>
 
@@ -32,15 +44,17 @@
         class="docs-navigation__button"
         color="gray"
       >
-        <va-icon class="docs-navigation__button__icon fa fa-code" size="sm" />
+        <va-icon class="docs-navigation__button__icon" size="13px">
+          <svg width="19" height="20" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 88h88V0H0v88Zm79-9V9H9v70h70Z" /></svg>
+        </va-icon>
         <span class="docs-navigation__button__text">{{ $t('docsNavigation.openCodeSandbox') }}</span>
       </va-button>
     </form>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, Ref } from 'vue'
+<script lang="ts" setup>
+import { computed, defineEmits, defineProps, PropType, ref, Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { CodesandboxConfig } from '../types/configTypes'
 import getCodesandboxExample from '../helpers/CodeSandboxExample'
@@ -51,53 +65,50 @@ const query = '?query=file=/src/App.vue'
 
 type ButtonStates = 'active' | 'error' | 'default'
 
-export default defineComponent({
-  name: 'DocsNavigation',
-  props: {
-    code: { type: String as PropType<string>, default: '' },
-    config: { type: Object as PropType<CodesandboxConfig>, default: () => ({}) },
-    gitUrl: { type: String as PropType<string>, default: '' },
-    gitComponent: { type: String as PropType<string>, default: '' },
-  },
-  setup (props) {
-    const { t } = useI18n()
-
-    const copyButtonState: Ref<ButtonStates> = ref('default')
-    const copy = async () => {
-      try {
-        await getWindow()?.navigator.clipboard.writeText(props.code)
-        copyButtonState.value = 'active'
-      } catch (e: any) {
-        if (e.message === 'NotAllowedError') {
-          copyButtonState.value = 'error'
-        }
-      }
-
-      setTimeout(() => { copyButtonState.value = 'default' }, 1500)
-    }
+const props = defineProps({
+  code: { type: String as PropType<string>, default: '' },
+  config: { type: Object as PropType<CodesandboxConfig>, default: () => ({}) },
+  gitUrl: { type: String as PropType<string>, default: '' },
+  gitComponent: { type: String as PropType<string>, default: '' },
+  showCode: { type: Boolean, required: true },
+  hideShowCodeButton: { type: Boolean, default: false },
+})
 
-    const buttonStates = {
-      active: { text: t('docsNavigation.copyCopied'), icon: 'fa fa-check' },
-      error: { text: t('docsNavigation.copyFailure'), icon: 'fa fa-times' },
-      default: { text: t('docsNavigation.copyCode'), icon: 'fa fa-files-o' },
-    }
-    const copyButton = computed(() => buttonStates[copyButtonState.value])
-
-    const sandboxDefineUrl = computed(() => `https://codesandbox.io/api/v1/sandboxes/define${query}`)
-    const sandboxParams = computed(() => getCodesandboxExample(applyTranslations(props.code), props.config))
-    const gitLink = computed(
-      () => `https://github.com/epicmaxco/vuestic-ui/tree/develop/packages/docs/src/page-configs/${props.gitUrl}/examples/${props.gitComponent}.vue`,
-    )
-
-    return {
-      copy,
-      copyButton,
-      sandboxDefineUrl,
-      sandboxParams,
-      gitLink,
-    }
-  },
+const emit = defineEmits(['update:showCode'])
+
+const { t } = useI18n()
+
+const showCodeComputed = computed({
+  get () { return props.showCode },
+  set (newValue) { emit('update:showCode', newValue) },
 })
+
+const copyButtonState: Ref<ButtonStates> = ref('default')
+const copy = async () => {
+  try {
+    await getWindow()?.navigator.clipboard.writeText(props.code)
+    copyButtonState.value = 'active'
+  } catch (e: any) {
+    if (e.message === 'NotAllowedError') {
+      copyButtonState.value = 'error'
+    }
+  }
+
+  setTimeout(() => { copyButtonState.value = 'default' }, 1500)
+}
+
+const buttonStates = {
+  active: { text: t('docsNavigation.copyCopied'), icon: 'fa4-check' },
+  error: { text: t('docsNavigation.copyFailure'), icon: 'fa4-times' },
+  default: { text: t('docsNavigation.copyCode'), icon: 'fa4-files-o' },
+}
+const copyButton = computed(() => buttonStates[copyButtonState.value])
+
+const sandboxDefineUrl = computed(() => `https://codesandbox.io/api/v1/sandboxes/define${query}`)
+const sandboxParams = computed(() => getCodesandboxExample(applyTranslations(props.code), props.config))
+const gitLink = computed(
+  () => `https://github.com/epicmaxco/vuestic-ui/tree/develop/packages/docs/src/page-configs/${props.gitUrl}/examples/${props.gitComponent}.vue`,
+)
 </script>
 
 <style lang="scss">
@@ -105,14 +116,24 @@ export default defineComponent({
 
 .docs-navigation {
   background: $prism-background;
-  margin: 0.2rem 0;
+  margin: 0 0 0.2rem 0;
   border-radius: 0.25rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  padding: 0 var(--va-card-padding);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 
   &__button {
-    padding: 1.5rem 0.5rem;
-    margin: 0 0.5rem;
+    padding: 0.5rem 0rem;
+    margin-right: 0.25rem;
     font-weight: bold;
 
+    &:first-child {
+      margin-left: calc(var(--va-button-sm-content-px) / -2);
+    }
+
     div {
       color: var(--va-gray);
     }

From b1a13f766ad890c5253b892f59fd0c076c66976b Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 18:37:22 +0300
Subject: [PATCH 06/13] Separate typography demos.

---
 packages/docs/src/locales/en/en.json          |  1 +
 .../styles/typography/examples/headings.vue   |  8 -----
 .../typography/examples/headings/heading1.vue |  3 ++
 .../typography/examples/headings/heading2.vue |  3 ++
 .../typography/examples/headings/heading3.vue |  3 ++
 .../typography/examples/headings/heading4.vue |  3 ++
 .../typography/examples/headings/heading5.vue |  3 ++
 .../typography/examples/headings/heading6.vue |  3 ++
 .../examples/text-utils/alignment.vue         | 18 +++++++++++
 .../examples/text-utils/transform.vue         |  7 ++++
 .../typography/examples/text/default.vue      |  3 ++
 .../typography/examples/text/secondary.vue    |  3 ++
 .../typography/examples/textHighlighted.vue   |  7 ----
 .../styles/typography/examples/textStyles.vue |  6 ----
 .../styles/typography/page-config.ts          | 32 ++++++++-----------
 packages/ui/src/styles/global/reset.scss      |  3 +-
 16 files changed, 65 insertions(+), 41 deletions(-)
 delete mode 100644 packages/docs/src/page-configs/styles/typography/examples/headings.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/headings/heading1.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/headings/heading2.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/headings/heading3.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/headings/heading4.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/headings/heading5.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/headings/heading6.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/text-utils/alignment.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/text-utils/transform.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/text/default.vue
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/text/secondary.vue
 delete mode 100644 packages/docs/src/page-configs/styles/typography/examples/textHighlighted.vue
 delete mode 100644 packages/docs/src/page-configs/styles/typography/examples/textStyles.vue

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index c52d7c78c5..1424b6b454 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -3802,6 +3802,7 @@
     "codeSnippetWarn": "You need to install `Source Code Pro` font if you want to use `.code-snippet` class",
     "textCode": "Text-code",
     "other": "Other typography styles",
+    "list": "List styles",
     "orderedList": "Ordered list",
     "unorderedList": "Unordered list",
     "links": "Links",
diff --git a/packages/docs/src/page-configs/styles/typography/examples/headings.vue b/packages/docs/src/page-configs/styles/typography/examples/headings.vue
deleted file mode 100644
index 7a8eeade5e..0000000000
--- a/packages/docs/src/page-configs/styles/typography/examples/headings.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <h1 class="display-1">Display 1 Heading</h1>
-  <h2 class="display-2">Display 2 Heading</h2>
-  <h3 class="display-3">Display 3 Heading</h3>
-  <h4 class="display-4">Display 4 Heading</h4>
-  <h5 class="display-5">Display 5 Heading</h5>
-  <h6 class="display-6">Display 6 Heading</h6>
-</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/headings/heading1.vue b/packages/docs/src/page-configs/styles/typography/examples/headings/heading1.vue
new file mode 100644
index 0000000000..ea851c858d
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/headings/heading1.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1 class="display-1">Display 1 Heading</h1>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/headings/heading2.vue b/packages/docs/src/page-configs/styles/typography/examples/headings/heading2.vue
new file mode 100644
index 0000000000..f0bf716c24
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/headings/heading2.vue
@@ -0,0 +1,3 @@
+<template>
+  <h2 class="display-2">Display 2 Heading</h2>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/headings/heading3.vue b/packages/docs/src/page-configs/styles/typography/examples/headings/heading3.vue
new file mode 100644
index 0000000000..efe7949e33
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/headings/heading3.vue
@@ -0,0 +1,3 @@
+<template>
+  <h3 class="display-3">Display 3 Heading</h3>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/headings/heading4.vue b/packages/docs/src/page-configs/styles/typography/examples/headings/heading4.vue
new file mode 100644
index 0000000000..1aaedb96ab
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/headings/heading4.vue
@@ -0,0 +1,3 @@
+<template>
+  <h4 class="display-4">Display 4 Heading</h4>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/headings/heading5.vue b/packages/docs/src/page-configs/styles/typography/examples/headings/heading5.vue
new file mode 100644
index 0000000000..226ef64254
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/headings/heading5.vue
@@ -0,0 +1,3 @@
+<template>
+  <h5 class="display-5">Display 5 Heading</h5>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/headings/heading6.vue b/packages/docs/src/page-configs/styles/typography/examples/headings/heading6.vue
new file mode 100644
index 0000000000..78f8a2a43c
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/headings/heading6.vue
@@ -0,0 +1,3 @@
+<template>
+  <h6 class="display-6">Display 6 Heading</h6>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text-utils/alignment.vue b/packages/docs/src/page-configs/styles/typography/examples/text-utils/alignment.vue
new file mode 100644
index 0000000000..02d112e59f
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/text-utils/alignment.vue
@@ -0,0 +1,18 @@
+<template>
+  <p class="text--left">
+    Left
+  </p>
+
+  <p class="text--center">
+    Center
+  </p>
+
+  <p class="text--right">
+    Right
+  </p>
+
+  <p class="text--justify">
+    Justify
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet neque explicabo maxime optio doloremque alias quam eveniet saepe, facilis ullam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam est amet illum molestiae beatae adipisci numquam, repudiandae excepturi quidem vero, illo iure dignissimos cumque minus voluptatem harum odio provident!
+  </p>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text-utils/transform.vue b/packages/docs/src/page-configs/styles/typography/examples/text-utils/transform.vue
new file mode 100644
index 0000000000..d5c05a6c34
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/text-utils/transform.vue
@@ -0,0 +1,7 @@
+<template>
+  <span class="text--uppercase mr-2">UpperCAse</span>
+  <span class="text--lowercase mr-2">LoweRCAse</span>
+  <span class="text--capitalize mr-2">Capitalize text</span>
+  <span class="text--bold mr-2">Bold</span>
+  <span class="text--highlighted">highlighted text</span>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text/default.vue b/packages/docs/src/page-configs/styles/typography/examples/text/default.vue
new file mode 100644
index 0000000000..05473c836e
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/text/default.vue
@@ -0,0 +1,3 @@
+<template>
+  <p>Of all of the celestial bodies that capture our attention and fascination as astronomers, none has a greater influence on life on planet Earth than it’s own satellite, the moon. When you think about it.</p>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text/secondary.vue b/packages/docs/src/page-configs/styles/typography/examples/text/secondary.vue
new file mode 100644
index 0000000000..58f136988e
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/text/secondary.vue
@@ -0,0 +1,3 @@
+<template>
+  <p class="text--secondary">Of all of the celestial bodies that capture our attention and fascination as astronomers, none has a greater influence on life on planet Earth than it’s own satellite, the moon. When you think about it.</p>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/textHighlighted.vue b/packages/docs/src/page-configs/styles/typography/examples/textHighlighted.vue
deleted file mode 100644
index 49aaf02404..0000000000
--- a/packages/docs/src/page-configs/styles/typography/examples/textHighlighted.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <p>None has a greater influence on
-    <span class="text--highlighted">highlighted text</span>
-    life on planet Earth than it’s own satellite, the selected chunk of text.
-    When you think about it.
-  </p>
-</template>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/textStyles.vue b/packages/docs/src/page-configs/styles/typography/examples/textStyles.vue
deleted file mode 100644
index de33cbbfab..0000000000
--- a/packages/docs/src/page-configs/styles/typography/examples/textStyles.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <!-- Default style -->
-  <p>Of all of the celestial bodies that capture our attention and fascination as astronomers, none has a greater influence on life on planet Earth than it’s own satellite, the moon. When you think about it.</p>
-  <!-- Secondary style -->
-  <p class="text--secondary">Of all of the celestial bodies that capture our attention and fascination as astronomers, none has a greater influence on life on planet Earth than it’s own satellite, the moon. When you think about it.</p>
-</template>p
diff --git a/packages/docs/src/page-configs/styles/typography/page-config.ts b/packages/docs/src/page-configs/styles/typography/page-config.ts
index e452df0aa4..0038e9e800 100644
--- a/packages/docs/src/page-configs/styles/typography/page-config.ts
+++ b/packages/docs/src/page-configs/styles/typography/page-config.ts
@@ -8,37 +8,30 @@ const config: ApiDocsBlock[] = [
   block.title('typography.title'),
   block.paragraph('typography.description'),
 
-  block.subtitle('typography.headings'),
-  block.example('headings'),
-
-  block.headline('typography.titled'),
-  block.example('title'),
-
   block.headline('typography.textStyles'),
-  block.example('textStyles'),
+  block.example('headings/heading1'),
+  block.example('headings/heading2'),
+  block.example('headings/heading3'),
+  block.example('headings/heading4'),
+  block.example('headings/heading5'),
+  block.example('headings/heading6'),
+  block.example('title'),
+  block.example('text/default'),
+  block.example('text/secondary'),
 
   block.headline('typography.codeSnippet'),
   block.example('codeSnippet'),
+  block.example('textCode'),
   block.alert('typography.codeSnippetWarn', 'warning'),
   block.code(fontUsing, 'html'),
 
-  block.headline('typography.textCode'),
-  block.example('textCode'),
-
-  block.subtitle('typography.other'),
-
-  block.headline('typography.orderedList'),
+  block.headline('typography.list'),
   block.example('orderedList'),
-
-  block.headline('typography.unorderedList'),
   block.example('unorderedList'),
 
   block.headline('typography.links'),
   block.example('links'),
 
-  block.headline('typography.textHighlighted'),
-  block.example('textHighlighted'),
-
   block.headline('typography.blockquote'),
   block.example('blockquote'),
 
@@ -46,7 +39,8 @@ const config: ApiDocsBlock[] = [
   block.example('textBlock'),
 
   block.headline('typography.textUtils'),
-  block.example('textUtils'),
+  block.example('text-utils/alignment'),
+  block.example('text-utils/transform'),
 ]
 
 export default config
diff --git a/packages/ui/src/styles/global/reset.scss b/packages/ui/src/styles/global/reset.scss
index 4a51c03b35..925376115d 100644
--- a/packages/ui/src/styles/global/reset.scss
+++ b/packages/ui/src/styles/global/reset.scss
@@ -181,6 +181,7 @@ b {
 }
 
 // reset
+
 /* We use reset.css to reduce browser inconsistencies in things like default
  line heights, margins and font sizes of headings, and so on. */
 html,
@@ -337,4 +338,4 @@ button:-moz-focusring,
 
 button {
   padding: 0;
-}
\ No newline at end of file
+}

From c6cd3abddba0c8266bbf0117e7183057b1c84828 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 19:53:53 +0300
Subject: [PATCH 07/13] Fix typography headline chaos.

---
 .../src/components/va-content/VaContent.vue   | 13 ------------
 packages/ui/src/styles/resources/_mixins.scss |  3 ++-
 .../ui/src/styles/resources/_variables.scss   | 20 +++++++++++++------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/va-content/VaContent.vue b/packages/ui/src/components/va-content/VaContent.vue
index 065e6a459b..0b96e9483e 100644
--- a/packages/ui/src/components/va-content/VaContent.vue
+++ b/packages/ui/src/components/va-content/VaContent.vue
@@ -20,39 +20,26 @@ export default {
 
   h1 {
     @include va-display(1);
-    @include va-header-margin(1);
-
-    line-height: 3.5rem;
   }
 
   h2 {
     @include va-display(2);
-    @include va-header-margin(2);
   }
 
   h3 {
     @include va-display(3);
-    @include va-header-margin(3);
-
-    line-height: 2.5rem;
-    margin-bottom: 1rem;
   }
 
   h4 {
     @include va-display(4);
-    @include va-header-margin(4);
   }
 
   h5 {
     @include va-display(5);
-    @include va-header-margin(5);
-
-    line-height: 1.875rem;
   }
 
   h6 {
     @include va-display(6);
-    @include va-header-margin(6);
   }
 
   i {
diff --git a/packages/ui/src/styles/resources/_mixins.scss b/packages/ui/src/styles/resources/_mixins.scss
index 4d1633096e..b0fb882f44 100644
--- a/packages/ui/src/styles/resources/_mixins.scss
+++ b/packages/ui/src/styles/resources/_mixins.scss
@@ -22,8 +22,9 @@
 @mixin va-display($element) {
   color: var(--va-dark);
   font-size: map-get($display-font-sizes, $element);
+  margin: map-get($display-margins, $element);
   font-weight: 700;
-  line-height: 1;
+  line-height: map-get($display-line-height, $element);
 }
 
 @mixin va-disabled() {
diff --git a/packages/ui/src/styles/resources/_variables.scss b/packages/ui/src/styles/resources/_variables.scss
index 985606d4eb..bc559b2e10 100644
--- a/packages/ui/src/styles/resources/_variables.scss
+++ b/packages/ui/src/styles/resources/_variables.scss
@@ -302,13 +302,21 @@ $display-font-sizes: (
   5: 1.5rem,
   6: 1.25rem,
 ) !default;
+$display-line-height: (
+  1: 3.5rem,
+  2: 3rem,
+  3: 2.5rem,
+  4: 2rem,
+  5: 1.75rem,
+  6: 1.5rem,
+) !default;
 $display-margins: (
-  1: 1rem,
-  2: 4rem,
-  3: 3rem,
-  4: 2.5rem,
-  5: 1.5rem,
-  6: 2rem,
+  1: 0.5rem 0 0.5rem 0,
+  2: 0.5rem 0 0.5rem 0,
+  3: 0.5rem 0 0.5rem 0,
+  4: 0.5rem 0 0.5rem 0,
+  5: 0.5rem 0 0.5rem 0,
+  6: 0.5rem 0 0.5rem 0,
 ) !default;
 
 // Modals

From 74c7c3ef3d8ab693d4b81455da2c95dbff0426d0 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 20:01:21 +0300
Subject: [PATCH 08/13] Fix docs headlines.

---
 packages/docs/src/components/DocsContent.vue      | 13 +------------
 packages/docs/src/components/DocsHeadline.vue     |  9 ++++++++-
 packages/docs/src/components/DocsNavigation.vue   |  8 ++------
 packages/docs/src/components/DocsSubtitle.vue     | 12 +++++++++++-
 .../typography/examples/text-utils/truncate.vue   |  5 +++++
 .../page-configs/styles/typography/page-config.ts | 15 ++++++++-------
 6 files changed, 35 insertions(+), 27 deletions(-)
 create mode 100644 packages/docs/src/page-configs/styles/typography/examples/text-utils/truncate.vue

diff --git a/packages/docs/src/components/DocsContent.vue b/packages/docs/src/components/DocsContent.vue
index d71b618dd8..2a6725c177 100644
--- a/packages/docs/src/components/DocsContent.vue
+++ b/packages/docs/src/components/DocsContent.vue
@@ -28,6 +28,7 @@
       />
       <MarkdownView
         v-else-if="block.type === BlockType.TITLE"
+        class="docs-title"
         :key="block.type + index"
         :value="`# ${$t(block.translationString)}`"
       />
@@ -126,15 +127,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss">
-.va-content h5 {
-  margin-top: 4rem;
-  line-height: 1.25;
-
-  &:first-of-type {
-    margin-top: 1.25rem;
-    margin-bottom: 0.75rem;
-  }
-}
-</style>
diff --git a/packages/docs/src/components/DocsHeadline.vue b/packages/docs/src/components/DocsHeadline.vue
index 6b03bafba3..e738354d95 100644
--- a/packages/docs/src/components/DocsHeadline.vue
+++ b/packages/docs/src/components/DocsHeadline.vue
@@ -29,11 +29,18 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .docs-headline {
     a,
     a:visited {
       color: var(--va-primary);
     }
+
+    margin-top: 4rem;
+
+    .docs-subtitle + &,
+    .docs-title + & {
+      margin-top: 1.25rem;
+    }
   }
 </style>
diff --git a/packages/docs/src/components/DocsNavigation.vue b/packages/docs/src/components/DocsNavigation.vue
index 46cfd4f84a..ccf7c468a3 100644
--- a/packages/docs/src/components/DocsNavigation.vue
+++ b/packages/docs/src/components/DocsNavigation.vue
@@ -45,7 +45,7 @@
         color="gray"
       >
         <va-icon class="docs-navigation__button__icon" size="13px">
-          <svg width="19" height="20" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 88h88V0H0v88Zm79-9V9H9v70h70Z" /></svg>
+          <svg width="13" height="13" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 88h88V0H0v88Zm79-9V9H9v70h70Z" /></svg>
         </va-icon>
         <span class="docs-navigation__button__text">{{ $t('docsNavigation.openCodeSandbox') }}</span>
       </va-button>
@@ -120,7 +120,7 @@ const gitLink = computed(
   border-radius: 0.25rem;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  padding: 0 var(--va-card-padding);
+  padding: 0 calc(var(--va-card-padding) - var(--va-button-sm-content-px) / 2);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -130,10 +130,6 @@ const gitLink = computed(
     margin-right: 0.25rem;
     font-weight: bold;
 
-    &:first-child {
-      margin-left: calc(var(--va-button-sm-content-px) / -2);
-    }
-
     div {
       color: var(--va-gray);
     }
diff --git a/packages/docs/src/components/DocsSubtitle.vue b/packages/docs/src/components/DocsSubtitle.vue
index d7a84cf63b..63bdb1dad6 100644
--- a/packages/docs/src/components/DocsSubtitle.vue
+++ b/packages/docs/src/components/DocsSubtitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <h3>
+  <h3 class="docs-subtitle">
     <MarkdownView
       tag="span"
       inline
@@ -35,3 +35,13 @@ export default class DocsSubtitle extends mixins(PropsMixin) {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .docs-subtitle {
+    margin-top: 4rem;
+
+    .docs-title + & {
+      margin-top: 1.25rem;
+    }
+  }
+</style>
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text-utils/truncate.vue b/packages/docs/src/page-configs/styles/typography/examples/text-utils/truncate.vue
new file mode 100644
index 0000000000..a85cab82e0
--- /dev/null
+++ b/packages/docs/src/page-configs/styles/typography/examples/text-utils/truncate.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="text--truncate">
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet neque explicabo maxime optio doloremque alias quam eveniet saepe, facilis ullam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam est amet illum molestiae beatae adipisci numquam, repudiandae excepturi quidem vero, illo iure dignissimos cumque minus voluptatem harum odio provident!
+  </p>
+</template>
diff --git a/packages/docs/src/page-configs/styles/typography/page-config.ts b/packages/docs/src/page-configs/styles/typography/page-config.ts
index 0038e9e800..b863db0c3b 100644
--- a/packages/docs/src/page-configs/styles/typography/page-config.ts
+++ b/packages/docs/src/page-configs/styles/typography/page-config.ts
@@ -8,7 +8,7 @@ const config: ApiDocsBlock[] = [
   block.title('typography.title'),
   block.paragraph('typography.description'),
 
-  block.headline('typography.textStyles'),
+  block.subtitle('typography.textStyles'),
   block.example('headings/heading1'),
   block.example('headings/heading2'),
   block.example('headings/heading3'),
@@ -19,27 +19,28 @@ const config: ApiDocsBlock[] = [
   block.example('text/default'),
   block.example('text/secondary'),
 
-  block.headline('typography.codeSnippet'),
+  block.subtitle('typography.codeSnippet'),
   block.example('codeSnippet'),
   block.example('textCode'),
   block.alert('typography.codeSnippetWarn', 'warning'),
   block.code(fontUsing, 'html'),
 
-  block.headline('typography.list'),
+  block.subtitle('typography.list'),
   block.example('orderedList'),
   block.example('unorderedList'),
 
-  block.headline('typography.links'),
+  block.subtitle('typography.links'),
   block.example('links'),
 
-  block.headline('typography.blockquote'),
+  block.subtitle('typography.blockquote'),
   block.example('blockquote'),
 
-  block.headline('typography.textBlock'),
+  block.subtitle('typography.textBlock'),
   block.example('textBlock'),
 
-  block.headline('typography.textUtils'),
+  block.subtitle('typography.textUtils'),
   block.example('text-utils/alignment'),
+  block.example('text-utils/truncate'),
   block.example('text-utils/transform'),
 ]
 

From 0b3fb59910125966b32d8e7b1cba593908606047 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 20:18:18 +0300
Subject: [PATCH 09/13] Rename text utils to text helpers.

---
 packages/docs/src/locales/en/en.json                      | 2 +-
 .../examples/{text-utils => text-helpers}/alignment.vue   | 0
 .../examples/{text-utils => text-helpers}/transform.vue   | 0
 .../examples/{text-utils => text-helpers}/truncate.vue    | 0
 .../src/page-configs/styles/typography/page-config.ts     | 8 ++++----
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/docs/src/page-configs/styles/typography/examples/{text-utils => text-helpers}/alignment.vue (100%)
 rename packages/docs/src/page-configs/styles/typography/examples/{text-utils => text-helpers}/transform.vue (100%)
 rename packages/docs/src/page-configs/styles/typography/examples/{text-utils => text-helpers}/truncate.vue (100%)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 1424b6b454..ed7374b48c 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -3809,7 +3809,7 @@
     "textHighlighted": "Highlighted text",
     "blockquote": "Blockquote",
     "textBlock": "Text block",
-    "textUtils": "Text utils"
+    "textHelpers": "Text helpers"
   },
   "ag-grid": {
     "title": "AG Grid Theme",
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text-utils/alignment.vue b/packages/docs/src/page-configs/styles/typography/examples/text-helpers/alignment.vue
similarity index 100%
rename from packages/docs/src/page-configs/styles/typography/examples/text-utils/alignment.vue
rename to packages/docs/src/page-configs/styles/typography/examples/text-helpers/alignment.vue
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text-utils/transform.vue b/packages/docs/src/page-configs/styles/typography/examples/text-helpers/transform.vue
similarity index 100%
rename from packages/docs/src/page-configs/styles/typography/examples/text-utils/transform.vue
rename to packages/docs/src/page-configs/styles/typography/examples/text-helpers/transform.vue
diff --git a/packages/docs/src/page-configs/styles/typography/examples/text-utils/truncate.vue b/packages/docs/src/page-configs/styles/typography/examples/text-helpers/truncate.vue
similarity index 100%
rename from packages/docs/src/page-configs/styles/typography/examples/text-utils/truncate.vue
rename to packages/docs/src/page-configs/styles/typography/examples/text-helpers/truncate.vue
diff --git a/packages/docs/src/page-configs/styles/typography/page-config.ts b/packages/docs/src/page-configs/styles/typography/page-config.ts
index b863db0c3b..b66a1a0c02 100644
--- a/packages/docs/src/page-configs/styles/typography/page-config.ts
+++ b/packages/docs/src/page-configs/styles/typography/page-config.ts
@@ -38,10 +38,10 @@ const config: ApiDocsBlock[] = [
   block.subtitle('typography.textBlock'),
   block.example('textBlock'),
 
-  block.subtitle('typography.textUtils'),
-  block.example('text-utils/alignment'),
-  block.example('text-utils/truncate'),
-  block.example('text-utils/transform'),
+  block.subtitle('typography.textHelpers'),
+  block.example('text-helpers/alignment'),
+  block.example('text-helpers/truncate'),
+  block.example('text-helpers/transform'),
 ]
 
 export default config

From 363f829e5dbfe2fb364a5a0e52d74e63eccf49d4 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 20:18:47 +0300
Subject: [PATCH 10/13] Fix: move back subtitle bottom margin.

---
 packages/docs/src/components/DocsSubtitle.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/src/components/DocsSubtitle.vue b/packages/docs/src/components/DocsSubtitle.vue
index 63bdb1dad6..01589ea2b8 100644
--- a/packages/docs/src/components/DocsSubtitle.vue
+++ b/packages/docs/src/components/DocsSubtitle.vue
@@ -39,6 +39,7 @@ export default class DocsSubtitle extends mixins(PropsMixin) {
 <style lang="scss" scoped>
   .docs-subtitle {
     margin-top: 4rem;
+    margin-bottom: 1.5rem;
 
     .docs-title + & {
       margin-top: 1.25rem;

From de45b6e25b7ab9f84d998776f17cd053aba53542 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Fri, 15 Jul 2022 20:26:04 +0300
Subject: [PATCH 11/13] Fix search input focus style.

---
 .../header/components/algolia-search/AlgoliaSearch.vue      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/components/header/components/algolia-search/AlgoliaSearch.vue b/packages/docs/src/components/header/components/algolia-search/AlgoliaSearch.vue
index 63e5d57c27..e76f274269 100644
--- a/packages/docs/src/components/header/components/algolia-search/AlgoliaSearch.vue
+++ b/packages/docs/src/components/header/components/algolia-search/AlgoliaSearch.vue
@@ -8,9 +8,9 @@
       @focus="onFocusHandler('dark', 'block')"
       @blur="onFocusHandler('gray', 'none')"
     >
-      <template #prepend>
+      <template #prependInner>
         <va-icon
-          class="search-icon"
+          class="search-icon mr-2"
           name="search"
           :color="color"
           size="100%"
@@ -72,7 +72,7 @@ export default class Search extends Vue {
   width: 100%;
   z-index: 1;
 
-  .va-input-wrapper__container {
+  .va-input-wrapper__field {
     padding: 0.25rem;
     padding-left: 0.75rem;
     background: var(--va-input-wrapper-background);

From 4caacf0bae038a966c4de589b737e013bac32040 Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Thu, 21 Jul 2022 19:55:50 +0300
Subject: [PATCH 12/13] Minor review fixes.

---
 packages/docs/src/components/DocsHeadline.vue | 10 +++----
 .../docs/src/components/DocsNavigation.vue    |  6 ++--
 packages/docs/src/locales/ru/ru.json          |  2 +-
 .../styles/typography/examples/textUtils.vue  | 29 -------------------
 4 files changed, 9 insertions(+), 38 deletions(-)
 delete mode 100644 packages/docs/src/page-configs/styles/typography/examples/textUtils.vue

diff --git a/packages/docs/src/components/DocsHeadline.vue b/packages/docs/src/components/DocsHeadline.vue
index e738354d95..79be757c62 100644
--- a/packages/docs/src/components/DocsHeadline.vue
+++ b/packages/docs/src/components/DocsHeadline.vue
@@ -31,16 +31,16 @@ export default defineComponent({
 
 <style lang="scss" scoped>
   .docs-headline {
-    a,
-    a:visited {
-      color: var(--va-primary);
-    }
-
     margin-top: 4rem;
 
     .docs-subtitle + &,
     .docs-title + & {
       margin-top: 1.25rem;
     }
+
+    a,
+    a:visited {
+      color: var(--va-primary);
+    }
   }
 </style>
diff --git a/packages/docs/src/components/DocsNavigation.vue b/packages/docs/src/components/DocsNavigation.vue
index ccf7c468a3..7739aa0c6f 100644
--- a/packages/docs/src/components/DocsNavigation.vue
+++ b/packages/docs/src/components/DocsNavigation.vue
@@ -66,10 +66,10 @@ const query = '?query=file=/src/App.vue'
 type ButtonStates = 'active' | 'error' | 'default'
 
 const props = defineProps({
-  code: { type: String as PropType<string>, default: '' },
+  code: { type: String, default: '' },
   config: { type: Object as PropType<CodesandboxConfig>, default: () => ({}) },
-  gitUrl: { type: String as PropType<string>, default: '' },
-  gitComponent: { type: String as PropType<string>, default: '' },
+  gitUrl: { type: String, default: '' },
+  gitComponent: { type: String, default: '' },
   showCode: { type: Boolean, required: true },
   hideShowCodeButton: { type: Boolean, default: false },
 })
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 91e871e897..4b1c3a5a38 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -3686,7 +3686,7 @@
     "textHighlighted": "Выделенный текст",
     "blockquote": "Цитата",
     "textBlock": "Текстовый блок",
-    "textUtils": "Текстовые утилиты"
+    "textHelpers": "Текстовые утилиты"
   },
   "ag-grid": {
     "title": "Тема для AG Grid",
diff --git a/packages/docs/src/page-configs/styles/typography/examples/textUtils.vue b/packages/docs/src/page-configs/styles/typography/examples/textUtils.vue
deleted file mode 100644
index 4e33dc0825..0000000000
--- a/packages/docs/src/page-configs/styles/typography/examples/textUtils.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <p class="text--left">
-    Left
-  </p>
-
-  <p class="text--center">
-    Center
-  </p>
-
-  <p class="text--right">
-    Right
-  </p>
-
-  <p class="text--justify" style="width: 33%;">
-    Justify
-    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet neque explicabo maxime optio doloremque alias quam eveniet saepe, facilis ullam.
-  </p>
-
-  <p class="text--truncate" style="width: 33%;">
-    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nulla necessitatibus ullam esse ab a explicabo nesciunt nihil laborum? Ex numquam delectus accusantium repellendus est quis. Officia perferendis perspiciatis recusandae?
-  </p>
-
-  <p>
-    <span class="text--uppercase mr-2">UpperCAse</span>
-    <span class="text--lowercase mr-2">LoweRCAse</span>
-    <span class="text--capitalize mr-2">Capitalize text</span>
-    <span class="text--bold">Bold</span>
-  </p>
-</template>

From 2e2058c22e77b2d28f724a02e0a7baad1ae3767e Mon Sep 17 00:00:00 2001
From: m0ksem <m0ksem1337@gmail.com>
Date: Thu, 21 Jul 2022 20:07:06 +0300
Subject: [PATCH 13/13] Fix text-secondary color.

---
 packages/ui/src/styles/global/typography.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/styles/global/typography.scss b/packages/ui/src/styles/global/typography.scss
index 16c8834829..4cf6a8aa51 100644
--- a/packages/ui/src/styles/global/typography.scss
+++ b/packages/ui/src/styles/global/typography.scss
@@ -105,8 +105,10 @@
     padding: 0.1rem 0.2rem;
   }
 
+  // Colors
+  // TODO: Move it to CSS Helpers
   &--secondary {
-    opacity: 0.4;
+    color: var(--va-secondary);
   }
 }