refactor: css vars for reset.scss & reset for docs & fix cards (#6698)

docs/.vitepress/vitepress/components/globals/design-guide.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="guide-design">
+    <div class="el-row cards" style="margin-left: -7px; margin-right: -7px">
+      <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
+        <div class="card">
+          <img src="/images/consistency.png" alt="Consistency" />
+          <p>Consistency</p>
+        </div>
+      </div>
+      <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
+        <div class="card">
+          <img src="/images/feedback.png" alt="Feedback" />
+          <p>Feedback</p>
+        </div>
+      </div>
+      <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
+        <div class="card">
+          <img src="/images/efficiency.png" alt="Efficiency" />
+          <p>Efficiency</p>
+        </div>
+      </div>
+      <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
+        <div class="card">
+          <img src="/images/controllability.png" alt="Controllability" />
+          <p>Controllability</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.el-col {
+  padding: 0 7px;
+}
+.card {
+  background: var(--el-fill-color-lighter);
+  height: 204px;
+  text-align: center;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  img {
+    margin: 1rem;
+    width: 5rem;
+    height: 5rem;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .el-col {
+    padding-bottom: 8px;
+  }
+}
+</style>

docs/.vitepress/vitepress/index.ts

@@ -2,6 +2,8 @@ import 'normalize.css'
 // import 'element-plus/dist/index.css'
 
 // for dev
+// reset
+import '../../../packages/theme-chalk/src/reset.scss'
 import '../../../packages/theme-chalk/src/index.scss'
 // for dark mode
 import '../../../packages/theme-chalk/src/dark/css-vars.scss'
@@ -18,6 +20,7 @@ import IconList from './components/globals/icons.vue'
 
 import ParallaxHome from './components/globals/parallax-home.vue'
 import Resource from './components/globals/resource.vue'
+import DesignGuide from './components/globals/design-guide.vue'
 
 import type { Component } from 'vue'
 
@@ -33,4 +36,5 @@ export const globals: [string, Component][] = [
   ['Changelog', Changelog],
   ['ParallaxHome', ParallaxHome],
   ['Resource', Resource],
+  ['DesignGuide', DesignGuide],
 ]

docs/.vitepress/vitepress/styles/base.scss

@@ -22,7 +22,6 @@ body {
   min-width: 320px;
   min-height: 100vh;
   line-height: 1.4;
-  font-family: var(--font-family-base);
   font-size: 16px;
   font-weight: 400;
   color: var(--text-color);

docs/.vitepress/vitepress/styles/vars.scss

@@ -14,9 +14,7 @@
   --border-color: var(--el-border-color);
   --border-color-light: var(--el-border-color-lighter);
 
-  --font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  --font-family: var(--el-font-family);
 
   --font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
     'Courier New', monospace;

docs/en-US/guide/design.md

@@ -3,64 +3,9 @@ title: Design
 lang: en-US
 ---
 
-<style scoped lang="scss">
-
-.guide__design {
-  margin-top: 1rem;
-}
-
-.el-col {
-  padding: 0 7px;
-}
-.card {
-  background: #fbfcfd;
-  height: 204px;
-  text-align: center;
-
-  img {
-    margin: 40px auto 25px;
-    width: 5rem;
-    height: 5rem;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .el-col {
-    padding-bottom: 8px;
-  }
-}
-</style>
-
 # Design Disciplines
 
-<div class="guide__design">
-  <div class="el-row cards" style="margin-left: -7px; margin-right: -7px;">
-    <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
-      <div class="card">
-        <img src="/images/consistency.png" alt="Consistency">
-        <p>Consistency</p>
-      </div>
-    </div>
-    <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
-      <div class="card">
-        <img src="/images/feedback.png" alt="Feedback">
-        <p>Feedback</p>
-      </div>
-    </div>
-    <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
-      <div class="card">
-        <img src="/images/efficiency.png" alt="Efficiency">
-        <p>Efficiency</p>
-      </div>
-    </div>
-    <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
-      <div class="card">
-        <img src="/images/controllability.png" alt="Controllability">
-        <p>Controllability</p>
-      </div>
-    </div>
-  </div>
-</div>
+<design-guide />
 
 ## Consistency
 

docs/en-US/guide/theming.md

@@ -74,7 +74,7 @@ If your project also uses SCSS, you can directly change Element Plus style varia
 
 You should use `@use 'xxx.scss' as *;` instead of `@import 'xxx.scss';`.
 
-Because the sass team said they will remove it eventually.
+Because the sass team said they will remove `@import` eventually.
 
 > [Sass: @use](https://sass-lang.com/documentation/at-rules/use) vs [Sass: @import](https://sass-lang.com/documentation/at-rules/import)
 

packages/theme-chalk/src/common/var.scss

@@ -184,6 +184,16 @@ $box-shadow: map.merge(
 );
 
 // Typography
+$font-family: () !default;
+$font-family: map.merge(
+  (
+    // default family
+    '':
+      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
+  ),
+  $font-family
+);
+
 $font-size: () !default;
 $font-size: map.merge(
   (

packages/theme-chalk/src/reset.scss

@@ -1,12 +1,15 @@
 @use 'common/var' as *;
+@use 'mixins/mixins' as *;
 
 body {
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
     'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   font-weight: 400;
-  font-size: var(--el-font-size-base);
-  color: $color-black;
+  font-size: getCssVar('font-size', 'base');
+  color: getCssVar('text-color', 'primary');
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
 }
 
 a {
@@ -15,7 +18,7 @@ a {
 
   &:hover,
   &:focus {
-    color: var(--el-color-primary-light-3);
+    color: getCssVar('color-primary', 'light-3');
   }
 
   &:active {
@@ -42,15 +45,15 @@ h6 {
 }
 
 h1 {
-  font-size: #{var(--el-font-size-base) + 6px};
+  font-size: calc(getCssVar('font-size', 'base') + 6px);
 }
 
 h2 {
-  font-size: #{var(--el-font-size-base) + 4px};
+  font-size: calc(getCssVar('font-size', 'base') + 4px);
 }
 
 h3 {
-  font-size: #{var(--el-font-size-base) + 2px};
+  font-size: calc(getCssVar('font-size', 'base') + 2px);
 }
 
 h4,
@@ -74,16 +77,16 @@ p {
 
 sup,
 sub {
-  font-size: #{var(--el-font-size-base) - 1px};
+  font-size: calc(getCssVar('font-size', 'base') - 1px);
 }
 
 small {
-  font-size: #{var(--el-font-size-base) - 2px};
+  font-size: calc(getCssVar('font-size', 'base') - 2px);
 }
 
 hr {
   margin-top: 20px;
   margin-bottom: 20px;
   border: 0;
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid getCssVar('border-color');
 }

packages/theme-chalk/src/var.scss

@@ -46,6 +46,7 @@
   @include set-component-css-var('border-radius', $border-radius);
   // Typography
   @include set-component-css-var('font-size', $font-size);
+  @include set-component-css-var('font-family', $font-family);
   // Box-shadow
   // --el-box-shadow-#{$type}
   @include set-component-css-var('box-shadow', $box-shadow);