From 2caac7906e559c06f88083198626cd73192a5d8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Mon, 14 Mar 2022 23:41:39 +0800
Subject: [PATCH] refactor(docs): adjust style details & fix pages width
 (#6624)

* refactor(docs): adjust style details

* refactor(docs): add toc width

* refactor(docs): remove unused var

* fix(docs): typography & button etc pages width unify
---
 .../components/doc-content/vp-edit-link.vue   |  1 -
 .../components/doc-content/vp-page-nav.vue    | 15 ++++++-----
 .../doc-content/vp-table-of-content.vue       |  4 +++
 .../components/globals/parallax-home.vue      |  7 ++++++
 .../components/home/home-sponsors.vue         | 20 +++------------
 .../components/sponsors/sponsors-button.vue   | 25 +++++++++++++++++++
 docs/.vitepress/vitepress/styles/base.scss    |  4 ++-
 docs/.vitepress/vitepress/styles/code.scss    |  9 +++++--
 docs/.vitepress/vitepress/styles/content.scss |  5 ++--
 .../vitepress/styles/content/doc-content.scss | 23 +++++++++++------
 .../styles/content/table-of-content.scss      |  4 ++-
 docs/.vitepress/vitepress/styles/navbar.scss  |  2 +-
 docs/.vitepress/vitepress/styles/sidebar.scss |  9 ++++---
 docs/.vitepress/vitepress/styles/vars.scss    | 16 +++++++++---
 docs/en-US/guide/theming.md                   | 17 ++++++++++---
 15 files changed, 115 insertions(+), 46 deletions(-)
 create mode 100644 docs/.vitepress/vitepress/components/sponsors/sponsors-button.vue

diff --git a/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue b/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
index 4727e62f0a..59595644ac 100644
--- a/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
+++ b/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
@@ -25,7 +25,6 @@ const { url, text } = useEditLink()
 .link {
   display: inline-block;
   font-weight: 500;
-  color: var(--text-color-light);
 }
 
 .link:hover {
diff --git a/docs/.vitepress/vitepress/components/doc-content/vp-page-nav.vue b/docs/.vitepress/vitepress/components/doc-content/vp-page-nav.vue
index ad560ffe96..240c953f31 100644
--- a/docs/.vitepress/vitepress/components/doc-content/vp-page-nav.vue
+++ b/docs/.vitepress/vitepress/components/doc-content/vp-page-nav.vue
@@ -11,7 +11,7 @@ const { hasLinks, prev, next } = usePageNav()
     <div class="container">
       <div class="prev">
         <a v-if="prev" class="link" :href="withBase(prev.link)">
-          <ElIcon>
+          <ElIcon class="mr-1">
             <ArrowLeft />
           </ElIcon>
           <span class="text">{{ prev.text }}</span>
@@ -20,7 +20,7 @@ const { hasLinks, prev, next } = usePageNav()
       <div class="next">
         <a v-if="next" class="link" :href="withBase(next.link)">
           <span class="text">{{ next.text }}</span>
-          <ElIcon>
+          <ElIcon class="ml-1">
             <ArrowRight />
           </ElIcon>
         </a>
@@ -60,23 +60,26 @@ const { hasLinks, prev, next } = usePageNav()
 
 .link {
   display: inline-flex;
+  justify-content: center;
   align-items: center;
+
   max-width: 100%;
-  font-size: 1rem;
+  height: 24px;
+  font-size: 14px;
   font-weight: 500;
 }
 
 .text {
-  display: block;
+  display: inline-flex;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .el-icon {
-  display: block;
+  display: inline-flex;
   flex-shrink: 0;
-  font-size: 1rem;
+  font-size: 12px;
   color: var(--text-color);
   transform: translateY(1px);
 }
diff --git a/docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue b/docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue
index 41d6e8a8a9..a157570cb8 100644
--- a/docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue
+++ b/docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue
@@ -3,6 +3,8 @@ import { ref } from 'vue'
 import { useToc } from '../../composables/use-toc'
 import { useActiveSidebarLinks } from '../../composables/active-bar'
 
+import SponsorsButton from '../sponsors/sponsors-button.vue'
+
 const headers = useToc()
 const marker = ref()
 const container = ref()
@@ -32,6 +34,8 @@ useActiveSidebarLinks(container, marker)
         </li>
       </ul>
       <div ref="marker" class="toc-marker" />
+
+      <sponsors-button class="mt-8" />
     </nav>
   </aside>
 </template>
diff --git a/docs/.vitepress/vitepress/components/globals/parallax-home.vue b/docs/.vitepress/vitepress/components/globals/parallax-home.vue
index 7470f98cc1..97fb7d0ee9 100644
--- a/docs/.vitepress/vitepress/components/globals/parallax-home.vue
+++ b/docs/.vitepress/vitepress/components/globals/parallax-home.vue
@@ -105,6 +105,11 @@ const handleScroll = useThrottleFn(() => {
 }, 10)
 
 useEventListener(window, 'scroll', handleScroll)
+
+function jumpTo(path: string) {
+  // vitepress has not router
+  location.href = `/${lang.value}/${path}`
+}
 </script>
 
 <template>
@@ -127,6 +132,8 @@ useEventListener(window, 'scroll', handleScroll)
             :style="peopleLayer"
             src="/images/home/people.svg"
             alt="banner"
+            class="cursor-pointer"
+            @click="jumpTo('/guide/quickstart.html')"
           />
           <img
             :style="leftLayer"
diff --git a/docs/.vitepress/vitepress/components/home/home-sponsors.vue b/docs/.vitepress/vitepress/components/home/home-sponsors.vue
index e1c1909a87..7f9ac4d4c5 100644
--- a/docs/.vitepress/vitepress/components/home/home-sponsors.vue
+++ b/docs/.vitepress/vitepress/components/home/home-sponsors.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { isDark } from '../../composables/dark'
 import { useLang } from '../../composables/lang'
 import { sponsors } from '../../../config/sponsors'
-import homeLocale from '../../../i18n/pages/home.json'
+
+import SponsorsButton from '../sponsors/sponsors-button.vue'
+
 const lang = useLang()
 
-const homeLang = computed(() => homeLocale[lang.value])
 const langZhCN = 'zh-CN'
 
 const getSponsorName = (sponsor) => {
@@ -48,19 +48,7 @@ const getSponsorSlogan = (sponsor) => {
         </div>
       </a>
     </div>
-    <div class="join">
-      <el-tooltip placement="top" :hide-after="1000" :offset="20">
-        <template #content>
-          {{ homeLang['21'] }}
-          <a href="mailto:element-plus@outlook.com" target="_blank">
-            &nbsp;element-plus@outlook.com
-          </a>
-        </template>
-        <a href="mailto:element-plus@outlook.com" target="_blank">
-          <el-button round>{{ homeLang['20'] }}</el-button>
-        </a>
-      </el-tooltip>
-    </div>
+    <sponsors-button round />
   </div>
 </template>
 
diff --git a/docs/.vitepress/vitepress/components/sponsors/sponsors-button.vue b/docs/.vitepress/vitepress/components/sponsors/sponsors-button.vue
new file mode 100644
index 0000000000..17e0f21134
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/sponsors/sponsors-button.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="join">
+    <el-tooltip placement="top" :hide-after="1000" :offset="20">
+      <template #content>
+        {{ homeLang['21'] }}
+        <a href="mailto:element-plus@outlook.com" target="_blank">
+          &nbsp;element-plus@outlook.com
+        </a>
+      </template>
+      <a href="mailto:element-plus@outlook.com" target="_blank">
+        <el-button :round="round">{{ homeLang['20'] }}</el-button>
+      </a>
+    </el-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useLang } from '../../composables/lang'
+import homeLocale from '../../../i18n/pages/home.json'
+const lang = useLang()
+const homeLang = computed(() => homeLocale[lang.value])
+
+defineProps<{ round?: boolean }>()
+</script>
diff --git a/docs/.vitepress/vitepress/styles/base.scss b/docs/.vitepress/vitepress/styles/base.scss
index b2afc4ed11..f097919f2c 100644
--- a/docs/.vitepress/vitepress/styles/base.scss
+++ b/docs/.vitepress/vitepress/styles/base.scss
@@ -76,6 +76,7 @@ h6:focus .header-anchor {
 
 h1 {
   margin-top: 1.5rem;
+  margin-bottom: 2rem;
   font-size: 1.9rem;
 }
 
@@ -127,6 +128,7 @@ textarea {
 }
 
 a {
+  font-weight: 500;
   text-decoration: inherit;
   color: var(--brand-color);
 
@@ -204,7 +206,7 @@ li > ol {
 
 blockquote {
   margin: 1rem 0;
-  border-left: 0.2rem solid var(--border-color-light);
+  border-left: 0.2rem solid var(--el-border-color);
   padding: 0.25rem 0 0.25rem 1rem;
   font-size: 1rem;
   color: var(--text-color-lighter);
diff --git a/docs/.vitepress/vitepress/styles/code.scss b/docs/.vitepress/vitepress/styles/code.scss
index d732103892..fc4a879298 100644
--- a/docs/.vitepress/vitepress/styles/code.scss
+++ b/docs/.vitepress/vitepress/styles/code.scss
@@ -62,12 +62,17 @@ html.dark {
 
 code {
   margin: 0;
-  border-radius: 3px;
-  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  padding: 0.15rem 0.5rem;
   font-family: var(--code-font-family);
   font-size: var(--code-font-size);
   color: var(--code-text-color);
   background-color: var(--code-bg-color);
+  line-height: var(--code-line-height);
+}
+
+a > code {
+  color: var(--code-link-color);
 }
 
 code .token.deleted {
diff --git a/docs/.vitepress/vitepress/styles/content.scss b/docs/.vitepress/vitepress/styles/content.scss
index 11ac20014a..a3e61eaf4a 100644
--- a/docs/.vitepress/vitepress/styles/content.scss
+++ b/docs/.vitepress/vitepress/styles/content.scss
@@ -9,11 +9,12 @@
     &.has-sidebar {
       padding-left: var(--sidebar-width-sm);
       @include respond-to('xlg') {
-        padding-left: var(--sidebar-width-md);
+        padding-left: var(--vp-sidebar-width-small);
       }
       @include respond-to('xxl') {
         padding-left: calc(
-          (100vw - var(--app-max-width)) / 2 + var(--sidebar-width-md)
+          (100vw - var(--vp-screen-max-width)) / 2 +
+            var(--vp-sidebar-width-small)
         );
       }
     }
diff --git a/docs/.vitepress/vitepress/styles/content/doc-content.scss b/docs/.vitepress/vitepress/styles/content/doc-content.scss
index 91ed33e1bf..26cc88f7a8 100644
--- a/docs/.vitepress/vitepress/styles/content/doc-content.scss
+++ b/docs/.vitepress/vitepress/styles/content/doc-content.scss
@@ -2,11 +2,24 @@
 @use './table-of-content';
 
 .doc-content-wrapper {
-  --toc-width: 144px;
+  --vp-content-width: 800px;
+
   padding: 32px 24px 96px;
+
   .doc-content-container {
-    max-width: 60rem;
-    margin: 0 auto;
+    max-width: var(--vp-content-width);
+
+    .doc-content {
+      width: 100%;
+    }
+
+    @include respond-to('xlg') {
+      width: var(--vp-content-width);
+    }
+
+    @include respond-to('xxl') {
+      width: var(--vp-content-width);
+    }
   }
 
   @include respond-to('md') {
@@ -18,9 +31,5 @@
   @include respond-to('xlg') {
     padding: 64px 0 96px 64px;
     display: flex;
-    .doc-content-container {
-      min-width: 38.75rem;
-      margin: 0;
-    }
   }
 }
diff --git a/docs/.vitepress/vitepress/styles/content/table-of-content.scss b/docs/.vitepress/vitepress/styles/content/table-of-content.scss
index a77d12b0d5..b76275a1af 100644
--- a/docs/.vitepress/vitepress/styles/content/table-of-content.scss
+++ b/docs/.vitepress/vitepress/styles/content/table-of-content.scss
@@ -3,13 +3,15 @@
 .toc-wrapper {
   display: none;
   padding-left: 64px;
+
   .toc-content {
     position: sticky;
     top: calc(var(--header-height) + 32px);
     margin-top: 32px;
     padding: 4px 8px 4px 12px;
     margin-bottom: 32px;
-    width: var(--toc-width);
+    width: 200px;
+
     .toc-marker {
       opacity: 0;
       position: absolute;
diff --git a/docs/.vitepress/vitepress/styles/navbar.scss b/docs/.vitepress/vitepress/styles/navbar.scss
index 1ac59a8af7..bf1b651876 100644
--- a/docs/.vitepress/vitepress/styles/navbar.scss
+++ b/docs/.vitepress/vitepress/styles/navbar.scss
@@ -24,7 +24,7 @@
     display: flex;
     justify-content: space-between;
     margin: 0 auto;
-    max-width: var(--app-max-width);
+    max-width: var(--vp-screen-max-width);
 
     .content {
       display: flex;
diff --git a/docs/.vitepress/vitepress/styles/sidebar.scss b/docs/.vitepress/vitepress/styles/sidebar.scss
index b91e253784..d0da03b3e5 100644
--- a/docs/.vitepress/vitepress/styles/sidebar.scss
+++ b/docs/.vitepress/vitepress/styles/sidebar.scss
@@ -64,17 +64,20 @@
   }
 
   @include respond-to('md') {
-    width: var(--sidebar-width-md);
+    width: var(--vp-sidebar-width-small);
   }
 
   @include respond-to('lg') {
     top: var(--header-height);
     transform: translate(0);
     border-right: 1px solid var(--border-color);
+    width: var(--vp-sidebar-width-small);
   }
 
   @include respond-to('xxl') {
-    padding: 24px 32px 96px calc((100% - var(--app-max-width)) / 2);
-    width: calc((100% - var(--app-max-width)) / 2 + var(--sidebar-width-md));
+    padding: 0 32px 96px calc((100% - var(--vp-screen-max-width)) / 2.2);
+    width: calc(
+      (100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
+    );
   }
 }
diff --git a/docs/.vitepress/vitepress/styles/vars.scss b/docs/.vitepress/vitepress/styles/vars.scss
index 4d9fb5b2ea..d31fc6ca7f 100644
--- a/docs/.vitepress/vitepress/styles/vars.scss
+++ b/docs/.vitepress/vitepress/styles/vars.scss
@@ -14,7 +14,9 @@
   --border-color: var(--el-border-color);
   --border-color-light: var(--el-border-color-lighter);
 
-  --font-family: Inter, Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
+  --font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
 
   --font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
     'Courier New', monospace;
@@ -27,7 +29,14 @@
   // header vars
   --header-height: 55px;
   --nav-height: 55px; // alias of --header-height
-  --sidebar-width-md: 18rem;
+
+  /* Screen Size */
+  --vp-screen-max-width: 1376px;
+
+  // sidebar
+  --vp-sidebar-width-mobile: 320px;
+  --vp-sidebar-width-small: 272px;
+
   --sidebar-width-sm: 16rem;
   --sidebar-width-xs: 20rem;
   --content-min-width: 16rem;
@@ -58,8 +67,9 @@
   --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
 }
 
+// layouts
 :root {
-  --app-max-width: 1376px;
+  --vp-screen-max-width: 1376px;
 }
 
 .dark {
diff --git a/docs/en-US/guide/theming.md b/docs/en-US/guide/theming.md
index d0678ecf4f..cb74d659ee 100644
--- a/docs/en-US/guide/theming.md
+++ b/docs/en-US/guide/theming.md
@@ -7,8 +7,9 @@ lang: en-US
 
 Element Plus uses BEM-styled CSS so that you can override styles easily. But if
 you need to replace styles at a large scale, e.g. change the theme color from
-blue to orange or green, maybe overriding them one by one is not a good idea. We
-provide four ways to change the style variables.
+blue to orange or green, maybe overriding them one by one is not a good idea.
+
+We provide four ways to change the style variables.
 
 ## Change theme color
 
@@ -24,7 +25,7 @@ You can find SCSS variables in [`packages/theme-chalk/src/common/var.scss`](http
 
 ::: warning
 
-We use sass modules ([sass:map](https://sass-lang.com/documentation/values/maps)...) to refactor all SCSS variables.
+We use sass modules ([sass:map](https://sass-lang.com/documentation/values/maps)...) and `@use` to refactor all SCSS variables.
 
 > [Introducing Sass Modules | CSS-TRICKS](https://css-tricks.com/introducing-sass-modules/)
 
@@ -69,6 +70,16 @@ $colors: map.deep-merge(
 
 If your project also uses SCSS, you can directly change Element Plus style variables. Create a new style file, e.g. `styles/element/index.scss`:
 
+::: warning
+
+You should use `@use 'xxx.scss' as *;` instead of `@import 'xxx.scss';`.
+
+Because the sass team said they will remove it eventually.
+
+> [Sass: @use](https://sass-lang.com/documentation/at-rules/use) vs [Sass: @import](https://sass-lang.com/documentation/at-rules/import)
+
+:::
+
 ```scss
 // styles/element/index.scss
 /* just override what you need */