diff --git a/docs/.vitepress/vitepress/components/globals/icons.vue b/docs/.vitepress/vitepress/components/globals/icons.vue
index 87ed661ca9..875433b80a 100644
--- a/docs/.vitepress/vitepress/components/globals/icons.vue
+++ b/docs/.vitepress/vitepress/components/globals/icons.vue
@@ -71,8 +71,8 @@ const copySvgIcon = async (name, refs) => {
   overflow: hidden;
   list-style: none;
   padding: 0 !important;
-  border-top: 1px solid var(--el-border-color-base);
-  border-left: 1px solid var(--el-border-color-base);
+  border-top: 1px solid getCssVar('border-color');
+  border-left: 1px solid getCssVar('border-color');
   border-radius: 4px;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -82,8 +82,8 @@ const copySvgIcon = async (name, refs) => {
     color: var(--el-text-color-regular);
     height: 90px;
     font-size: 13px;
-    border-right: 1px solid var(--el-border-color-base);
-    border-bottom: 1px solid var(--el-border-color-base);
+    border-right: 1px solid getCssVar('border-color');
+    border-bottom: 1px solid getCssVar('border-color');
     transition: background-color var(--el-transition-duration);
     &:hover {
       background-color: var(--el-border-color-extra-light);
diff --git a/docs/.vitepress/vitepress/styles/scrollbar.scss b/docs/.vitepress/vitepress/styles/scrollbar.scss
index 4788184cc2..9359339d67 100644
--- a/docs/.vitepress/vitepress/styles/scrollbar.scss
+++ b/docs/.vitepress/vitepress/styles/scrollbar.scss
@@ -1,6 +1,6 @@
 // scrollbar
 * {
-  scrollbar-color: var(--el-scrollbar-bg-color) var(--el-bg-color);
+  scrollbar-color: var(--el-scrollbar-bg-color) var(--el-fill-color-light);
 }
 
 ::-webkit-scrollbar {
diff --git a/docs/.vitepress/vitepress/styles/vars.scss b/docs/.vitepress/vitepress/styles/vars.scss
index 6f717de152..1853007ff5 100644
--- a/docs/.vitepress/vitepress/styles/vars.scss
+++ b/docs/.vitepress/vitepress/styles/vars.scss
@@ -11,7 +11,7 @@
   --bg-color: var(--el-color-white);
   --bg-color-soft: #fafafa;
   --bg-color-mute: #f2f2f2;
-  --border-color: var(--el-border-color-base);
+  --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;
@@ -42,7 +42,7 @@
   // code block vars
   --code-line-height: 1.4;
   --code-font-size: var(--el-font-size-base);
-  --code-bg-color: var(--el-bg-color);
+  --code-bg-color: var(--el-fill-color-light);
   --code-text-color: var(--text-color);
   --code-font-family: var(--font-family-mono);
 
diff --git a/docs/examples/avatar/basic.vue b/docs/examples/avatar/basic.vue
index c34c31a39a..0065efdbec 100644
--- a/docs/examples/avatar/basic.vue
+++ b/docs/examples/avatar/basic.vue
@@ -54,12 +54,12 @@ const { circleUrl, squareUrl, sizeList } = toRefs(state)
   align-items: center;
 }
 .demo-basic .block:not(:last-child) {
-  border-right: 1px solid var(--el-border-color-base);
+  border-right: 1px solid getCssVar('border-color');
 }
 .demo-basic .block {
   flex: 1;
 }
 .demo-basic .el-col:not(:last-child) {
-  border-right: 1px solid var(--el-border-color-base);
+  border-right: 1px solid getCssVar('border-color');
 }
 </style>
diff --git a/docs/examples/avatar/types.vue b/docs/examples/avatar/types.vue
index 6ca525daa7..c8cbaa0ece 100644
--- a/docs/examples/avatar/types.vue
+++ b/docs/examples/avatar/types.vue
@@ -28,6 +28,6 @@ import { UserFilled } from '@element-plus/icons-vue'
 }
 
 .demo-type > div:not(:last-child) {
-  border-right: 1px solid var(--el-border-color-base);
+  border-right: 1px solid getCssVar('border-color');
 }
 </style>
diff --git a/docs/examples/border/border.vue b/docs/examples/border/border.vue
index 38a8f16f45..98fe718585 100644
--- a/docs/examples/border/border.vue
+++ b/docs/examples/border/border.vue
@@ -33,9 +33,9 @@
 .demo-border .line div {
   width: 100%;
   height: 0;
-  border-top: 1px solid var(--el-border-color-base);
+  border-top: 1px solid getCssVar('border-color');
 }
 .demo-border .line .dashed {
-  border-top: 2px dashed var(--el-border-color-base);
+  border-top: 2px dashed getCssVar('border-color');
 }
 </style>
diff --git a/docs/examples/border/radius.vue b/docs/examples/border/radius.vue
index 59d89cae0f..8076301971 100644
--- a/docs/examples/border/radius.vue
+++ b/docs/examples/border/radius.vue
@@ -66,7 +66,7 @@ const getValue = (type: string) => {
 .demo-radius .radius {
   height: 40px;
   width: 70%;
-  border: 1px solid var(--el-border-color-base);
+  border: 1px solid getCssVar('border-color');
   border-radius: 0;
   margin-top: 20px;
 }
diff --git a/docs/examples/date-picker/custom-prefix-icon.vue b/docs/examples/date-picker/custom-prefix-icon.vue
index 61eef2e0e7..c232b88f2a 100644
--- a/docs/examples/date-picker/custom-prefix-icon.vue
+++ b/docs/examples/date-picker/custom-prefix-icon.vue
@@ -34,7 +34,7 @@ const customPrefix = shallowRef({
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/date-formats.vue b/docs/examples/date-picker/date-formats.vue
index 4d01bfc480..9ae8279ef8 100644
--- a/docs/examples/date-picker/date-formats.vue
+++ b/docs/examples/date-picker/date-formats.vue
@@ -55,7 +55,7 @@ const value3 = ref('')
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/date-range.vue b/docs/examples/date-picker/date-range.vue
index fd52f1c150..6c5d342117 100644
--- a/docs/examples/date-picker/date-range.vue
+++ b/docs/examples/date-picker/date-range.vue
@@ -73,7 +73,7 @@ const shortcuts = [
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/default-time.vue b/docs/examples/date-picker/default-time.vue
index e3ff470d7b..3859f7e390 100644
--- a/docs/examples/date-picker/default-time.vue
+++ b/docs/examples/date-picker/default-time.vue
@@ -32,7 +32,7 @@ const defaultTime = ref([
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/default-value.vue b/docs/examples/date-picker/default-value.vue
index 7256cafa47..324332d720 100644
--- a/docs/examples/date-picker/default-value.vue
+++ b/docs/examples/date-picker/default-value.vue
@@ -40,7 +40,7 @@ const value2 = ref('')
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/enter-date.vue b/docs/examples/date-picker/enter-date.vue
index aaf075f2f0..3bc31c98bd 100644
--- a/docs/examples/date-picker/enter-date.vue
+++ b/docs/examples/date-picker/enter-date.vue
@@ -62,7 +62,7 @@ const disabledDate = (time: Date) => {
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/month-range.vue b/docs/examples/date-picker/month-range.vue
index 5bff10cfd7..3f75965785 100644
--- a/docs/examples/date-picker/month-range.vue
+++ b/docs/examples/date-picker/month-range.vue
@@ -67,7 +67,7 @@ const shortcuts = [
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/other-measurements.vue b/docs/examples/date-picker/other-measurements.vue
index 1f64becdef..1cb1b5ad62 100644
--- a/docs/examples/date-picker/other-measurements.vue
+++ b/docs/examples/date-picker/other-measurements.vue
@@ -58,7 +58,7 @@ const value4 = ref('')
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-date-picker .block:last-child {
@@ -67,13 +67,13 @@ const value4 = ref('')
 
 .demo-date-picker .container {
   flex: 1;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
 }
 .demo-date-picker .container .block {
   border-right: none;
 }
 .demo-date-picker .container .block:last-child {
-  border-top: solid 1px var(--el-border-color-base);
+  border-top: solid 1px getCssVar('border-color');
 }
 .demo-date-picker .container:last-child {
   border-right: none;
diff --git a/docs/examples/datetime-picker/date-and-time-formats.vue b/docs/examples/datetime-picker/date-and-time-formats.vue
index 44496c1d5b..355edd868c 100644
--- a/docs/examples/datetime-picker/date-and-time-formats.vue
+++ b/docs/examples/datetime-picker/date-and-time-formats.vue
@@ -55,7 +55,7 @@ const value3 = ref('')
 .demo-datetime-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-datetime-picker .block:last-child {
diff --git a/docs/examples/datetime-picker/date-and-time-range.vue b/docs/examples/datetime-picker/date-and-time-range.vue
index 06e9436fad..9d90ae52bb 100644
--- a/docs/examples/datetime-picker/date-and-time-range.vue
+++ b/docs/examples/datetime-picker/date-and-time-range.vue
@@ -67,7 +67,7 @@ const shortcuts = [
 .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .block:last-child {
diff --git a/docs/examples/datetime-picker/date-and-time.vue b/docs/examples/datetime-picker/date-and-time.vue
index 6160dc93db..dd70bada76 100644
--- a/docs/examples/datetime-picker/date-and-time.vue
+++ b/docs/examples/datetime-picker/date-and-time.vue
@@ -73,7 +73,7 @@ const shortcuts = [
 .demo-datetime-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .demo-datetime-picker .block:last-child {
diff --git a/docs/examples/datetime-picker/default-time.vue b/docs/examples/datetime-picker/default-time.vue
index d93dc22518..876be5d3e1 100644
--- a/docs/examples/datetime-picker/default-time.vue
+++ b/docs/examples/datetime-picker/default-time.vue
@@ -41,7 +41,7 @@ const defaultTime2 = [
 .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   flex: 1;
 }
 .block:last-child {
diff --git a/docs/examples/image/basic-usage.vue b/docs/examples/image/basic-usage.vue
index 4e226d1a29..bdde365159 100644
--- a/docs/examples/image/basic-usage.vue
+++ b/docs/examples/image/basic-usage.vue
@@ -21,7 +21,7 @@ const url =
 .demo-image .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   display: inline-block;
   width: 20%;
   box-sizing: border-box;
diff --git a/docs/examples/image/load-failed.vue b/docs/examples/image/load-failed.vue
index 8583469e9c..2bf2e8f333 100644
--- a/docs/examples/image/load-failed.vue
+++ b/docs/examples/image/load-failed.vue
@@ -25,7 +25,7 @@ import { Picture as IconPicture } from '@element-plus/icons-vue'
 .demo-image__error .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   display: inline-block;
   width: 49%;
   box-sizing: border-box;
diff --git a/docs/examples/image/placeholder.vue b/docs/examples/image/placeholder.vue
index a4e5e4d982..6bc07cb451 100644
--- a/docs/examples/image/placeholder.vue
+++ b/docs/examples/image/placeholder.vue
@@ -24,7 +24,7 @@ const src =
 .demo-image__placeholder .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   display: inline-block;
   width: 49%;
   box-sizing: border-box;
diff --git a/docs/examples/rate/basic-usage.vue b/docs/examples/rate/basic-usage.vue
index 9f4bca747c..8b9c7a234d 100644
--- a/docs/examples/rate/basic-usage.vue
+++ b/docs/examples/rate/basic-usage.vue
@@ -21,7 +21,7 @@ const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF',
 .demo-rate-block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px var(--el-border-color-base);
+  border-right: solid 1px getCssVar('border-color');
   display: inline-block;
   width: 49%;
   box-sizing: border-box;
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index a3bde4786b..4d180c1b99 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -31,7 +31,7 @@ $button-icon-span-gap: map.merge(
   white-space: nowrap;
   cursor: pointer;
   background-color: var(--el-button-bg-color, #{map.get($button, 'bg-color')});
-  border: var(--el-border-base);
+  border: var(--el-border);
   border-color: var(
     --el-button-border-color,
     #{map.get($button, 'border-color')}
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index e4ac3dcf28..8172e98b12 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -210,7 +210,7 @@
     flex: 1;
     height: 24px;
     min-width: 60px;
-    margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width-base;
+    margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
     padding: 0;
     color: var(--el-cascader-menu-text-color);
     border: none;
diff --git a/packages/theme-chalk/src/checkbox-button.scss b/packages/theme-chalk/src/checkbox-button.scss
index e901fee140..a9611c5d3f 100644
--- a/packages/theme-chalk/src/checkbox-button.scss
+++ b/packages/theme-chalk/src/checkbox-button.scss
@@ -22,7 +22,7 @@
     vertical-align: middle;
     cursor: pointer;
     background: var(--el-button-bg-color, map.get($button, 'bg-color'));
-    border: $border-base;
+    border: getCssVar('border');
     border-left: 0;
     color: var(--el-button-text-color, map.get($button, 'text-color'));
     -webkit-appearance: none;
@@ -102,7 +102,7 @@
 
   &:first-child {
     .#{$namespace}-checkbox-button__inner {
-      border-left: $border-base;
+      border-left: getCssVar('border');
       border-radius: var(--el-border-radius-base) 0 0
         var(--el-border-radius-base);
       box-shadow: none !important;
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index eea2d5f68d..6a10edc96a 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -52,10 +52,10 @@ $checkbox-bordered-input-width: map.merge(
   height: map.get($checkbox-height, 'default');
 
   @include when(bordered) {
-    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
-      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
     border-radius: var(--el-border-radius-base);
-    border: var(--el-border-base);
+    border: var(--el-border);
     box-sizing: border-box;
 
     &.is-checked {
@@ -70,9 +70,9 @@ $checkbox-bordered-input-width: map.merge(
     @each $size in (large, small) {
       &.#{$namespace}-checkbox--#{$size} {
         padding: 0
-          map.get($checkbox-bordered-padding-right, $size)-$border-width-base
+          map.get($checkbox-bordered-padding-right, $size)-$border-width
           0
-          map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
+          map.get($checkbox-bordered-padding-left, $size)-$border-width;
 
         border-radius: map.get($button-border-radius, $size);
 
diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss
index 8f0a1db5c3..1e6981f685 100644
--- a/packages/theme-chalk/src/collapse.scss
+++ b/packages/theme-chalk/src/collapse.scss
@@ -13,7 +13,7 @@
 @include b(collapse-item) {
   @include when(disabled) {
     .#{$namespace}-collapse-item__header {
-      color: var(--el-text-color-disabled-base);
+      color: var(--el-text-color-disabled);
       cursor: not-allowed;
     }
   }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index a6c51518d0..8d24d7ba73 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -2,6 +2,8 @@
 @use 'sass:math';
 @use 'sass:map';
 
+@use '../mixins/function.scss' as *;
+
 // Special comment for theme configurator
 // type|skipAutoTranslation|Category|Order
 // skipAutoTranslation 1
@@ -108,7 +110,8 @@ $text-color: map.merge(
     'primary': #303133,
     'regular': #606266,
     'secondary': #909399,
-    'placeholder': #c0c4cc,
+    'placeholder': #a8abb2,
+    'disable': #c0c4cc,
   ),
   $text-color
 );
@@ -116,25 +119,46 @@ $text-color: map.merge(
 $border-color: () !default;
 $border-color: map.merge(
   (
-    'base': #dcdfe6,
+    '': #dcdfe6,
     'light': #e4e7ed,
     'lighter': #ebeef5,
     'extra-light': #f2f6fc,
+    'dark': #d4d7de,
+    'darker': #cdd0d6,
   ),
   $border-color
 );
 
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    '': #f0f2f5,
+    'light': #f5f7fa,
+    'lighter': #fafafa,
+    'extra-light': #fafcff,
+    'dark': #ebedf0,
+    'darker': #e6e8eb,
+    'blank': #ffffff,
+  ),
+  $fill-color
+);
+
 // Background
 /// color|1|Background Color|4
-$bg-color: #f5f7fa !default;
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    '': #ffffff,
+    'page': #ffffff,
+    'overlay': #ffffff,
+  ),
+  $bg-color
+);
 
 // Border
-$border-width-base: 1px !default;
-$border-style-base: solid !default;
+$border-width: 1px !default;
+$border-style: solid !default;
 $border-color-hover: var(--el-text-color-placeholder) !default;
-$border-base: $border-width-base $border-style-base
-  map.get($border-color, 'base') !default;
-/// borderRadius|1|Radius|0
 
 $border-radius: () !default;
 $border-radius: map.merge(
@@ -174,11 +198,22 @@ $font-size: map.merge(
   $font-size
 );
 
+// zIndex
+$z-index: () !default;
+$z-index: map.merge(
+  (
+    'normal': 1,
+    'top': 1000,
+    'popper': 2000,
+  ),
+  $z-index
+);
+
 // Disable default
 $disabled: () !default;
 $disabled: map.merge(
   (
-    'bg-color': var(--el-bg-color),
+    'bg-color': getCssVar('fill-color', 'light'),
     'text-color': var(--el-text-color-placeholder),
     'border-color': var(--el-border-color-light),
   ),
@@ -195,6 +230,8 @@ $common-component-size: map.merge(
   $common-component-size
 );
 
+// Components
+// ---
 // Checkbox
 // css3 var in packages/theme-chalk/src/checkbox.scss
 $checkbox: () !default;
@@ -207,17 +244,17 @@ $checkbox: map.merge(
     'input-width': 14px,
     'border-radius': var(--el-border-radius-small),
     'bg-color': var(--el-color-white),
-    'input-border': var(--el-border-base),
-    'disabled-border-color': var(--el-border-color-base),
+    'input-border': var(--el-border),
+    'disabled-border-color': getCssVar('border-color'),
     'disabled-input-fill': #edf2fc,
     'disabled-icon-color': var(--el-text-color-placeholder),
     'disabled-checked-input-fill': var(--el-border-color-extra-light),
-    'disabled-checked-input-border-color': var(--el-border-color-base),
+    'disabled-checked-input-border-color': getCssVar('border-color'),
     'disabled-checked-icon-color': var(--el-text-color-placeholder),
     'checked-text-color': var(--el-color-primary),
     'checked-input-border-color': var(--el-color-primary),
     'checked-bg-color': var(--el-color-primary),
-    'checked-icon-color': var(--el-fill-base),
+    'checked-icon-color': getCssVar('fill-color'),
     'input-border-color-hover': var(--el-color-primary),
   ),
   $checkbox
@@ -265,8 +302,8 @@ $radio: map.merge(
     'input-width': 14px,
     'input-border-radius': var(--el-border-radius-circle),
     'input-bg-color': var(--el-color-white),
-    'input-border': var(--el-border-base),
-    'input-border-color': var(--el-border-color-base),
+    'input-border': var(--el-border),
+    'input-border-color': getCssVar('border-color'),
     'input-border-color-hover': var(--el-color-primary),
   ),
   $radio
@@ -351,7 +388,7 @@ $select-option: map.merge(
     'text-color': var(--el-text-color-regular),
     'disabled-color': var(--el-text-color-placeholder),
     'height': 34px,
-    'hover-background': var(--el-bg-color),
+    'hover-background': getCssVar('fill-color', 'light'),
     'selected-text-color': var(--el-color-primary),
   ),
   $select-option
@@ -472,11 +509,11 @@ $input: () !default;
 $input: map.merge(
   (
     'text-color': var(--el-text-color-regular),
-    'border': var(--el-border-base),
+    'border': var(--el-border),
     'hover-border': var(--el-border-color-hover),
     'focus-border': var(--el-color-primary),
     'transparent-border': 0 0 0 1px transparent inset,
-    'border-color': var(--el-border-color-base),
+    'border-color': getCssVar('border-color'),
     'border-radius': var(--el-border-radius-base),
     'bg-color': var(--el-color-white),
     'icon-color': var(--el-text-color-placeholder),
@@ -542,12 +579,12 @@ $cascader: map.merge(
   (
     'menu-text-color': var(--el-text-color-regular),
     'menu-selected-text-color': var(--el-color-primary),
-    'menu-fill': var(--el-fill-base),
+    'menu-fill': getCssVar('fill-color'),
     'menu-font-size': var(--el-font-size-base),
     'menu-radius': var(--el-border-radius-base),
     'menu-border': solid 1px var(--el-border-color-light),
     'menu-shadow': var(--el-box-shadow-light),
-    'node-background-hover': var(--el-bg-color),
+    'node-background-hover': getCssVar('fill-color', 'light'),
     'node-color-disabled': var(--el-text-color-placeholder),
     'color-empty': var(--el-text-color-placeholder),
     'tag-background': #f0f2f5,
@@ -561,7 +598,7 @@ $button: () !default;
 $button: map.merge(
   (
     'font-weight': var(--el-font-weight-primary),
-    'border-color': var(--el-border-color-base),
+    'border-color': getCssVar('border-color'),
     'bg-color': var(--el-color-white),
     'text-color': var(--el-text-color-regular),
     'disabled-text-color': var(--el-disabled-text-color),
@@ -578,7 +615,7 @@ $button: map.merge(
   $button
 );
 
-$button-border-width: $border-width-base !default;
+$button-border-width: $border-width !default;
 
 // need mix, so do not use css var
 $button-hover-tint-percent: 20%;
@@ -650,7 +687,7 @@ $switch: () !default;
 $switch: map.merge(
   (
     'on-color': var(--el-color-primary),
-    'off-color': var(--el-border-color-base),
+    'off-color': getCssVar('border-color'),
     'core-border-radius': 10px,
     'width': 40px,
     'height': 20px,
@@ -686,7 +723,7 @@ $table: map.merge(
     'border': 1px solid var(--el-table-border-color),
     'text-color': var(--el-text-color-regular),
     'header-text-color': var(--el-text-color-secondary),
-    'row-hover-bg-color': var(--el-bg-color),
+    'row-hover-bg-color': getCssVar('fill-color', 'light'),
     'current-row-bg-color': var(--el-color-primary-light-9),
     'header-bg-color': var(--el-color-white),
     'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
@@ -844,7 +881,7 @@ $tag-icon-size: map.merge(
 $tree: () !default;
 $tree: map.merge(
   (
-    'node-hover-bg-color': var(--el-bg-color),
+    'node-hover-bg-color': getCssVar('fill-color', 'light'),
     'text-color': var(--el-text-color-regular),
     'expand-icon-color': var(--el-text-color-placeholder),
   ),
@@ -1060,7 +1097,7 @@ $transfer: map.merge(
     'border-radius': var(--el-border-radius-base),
     'panel-width': 200px,
     'panel-header-height': 40px,
-    'panel-header-bg-color': var(--el-bg-color),
+    'panel-header-bg-color': getCssVar('fill-color', 'light'),
     'panel-footer-height': 40px,
     'panel-body-height': 278px,
     'item-height': 30px,
diff --git a/packages/theme-chalk/src/dark/vars.scss b/packages/theme-chalk/src/dark/vars.scss
index b8932720a1..03a493c69c 100644
--- a/packages/theme-chalk/src/dark/vars.scss
+++ b/packages/theme-chalk/src/dark/vars.scss
@@ -1,6 +1,4 @@
 html.dark {
-  --el-bg-color: #1a1a1a;
-
-  // border
-  --el-border-color-base: #434343;
+  // todo dark.scss
+  --el-bg-color: #141414;
 }
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 6dcf232d0e..143148fc80 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -113,7 +113,7 @@
     }
 
     &.disabled .#{$namespace}-date-table-cell {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       opacity: 1;
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index 784ea135b6..aba97e7720 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -27,7 +27,7 @@
     }
 
     &.disabled .cell {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 5f3e332432..f6681e469e 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -90,7 +90,7 @@
     }
 
     @include when(disabled) {
-      color: var(--el-text-color-disabled-base);
+      color: var(--el-text-color-disabled);
 
       &:hover {
         cursor: not-allowed;
diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss
index 4169114bef..5c4105864c 100644
--- a/packages/theme-chalk/src/date-picker/time-spinner.scss
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -95,7 +95,7 @@
     color: var(--el-text-color-regular);
 
     &:hover:not(.disabled):not(.active) {
-      background: var(--el-bg-color);
+      background: getCssVar('fill-color', 'light');
       cursor: pointer;
     }
 
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index fa1b3ebf5a..84054436e9 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -23,7 +23,7 @@
     }
 
     &.disabled .cell {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 
diff --git a/packages/theme-chalk/src/divider.scss b/packages/theme-chalk/src/divider.scss
index a05d3052b9..e1a4f6b852 100644
--- a/packages/theme-chalk/src/divider.scss
+++ b/packages/theme-chalk/src/divider.scss
@@ -9,7 +9,7 @@
     height: 1px;
     width: 100%;
     margin: 24px 0;
-    border-top: 1px var(--el-border-color-base) var(--el-border-style);
+    border-top: 1px getCssVar('border-color') var(--el-border-style);
   }
 
   @include m(vertical) {
@@ -19,7 +19,7 @@
     margin: 0 8px;
     vertical-align: middle;
     position: relative;
-    border-left: 1px var(--el-border-color-base) var(--el-border-style);
+    border-left: 1px getCssVar('border-color') var(--el-border-style);
   }
 
   @include e(text) {
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 2a1d7d943d..e1debd6135 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -112,7 +112,7 @@ $dropdown-divider-width: 1px !default;
     }
 
     &.#{$namespace}-button::before {
-      background: var(--el-border-color-base);
+      background: getCssVar('border-color');
       opacity: 0.5;
     }
 
@@ -158,8 +158,7 @@ $dropdown-menu-padding-vertical: map.merge(
   top: 0;
   left: 0;
   z-index: var(--el-dropdown-menu-index);
-  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width-base
-    0;
+  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
   margin: 0;
   background-color: $color-white;
   border: none;
@@ -195,14 +194,13 @@ $dropdown-menu-padding-vertical: map.merge(
 
     @include when(disabled) {
       cursor: not-allowed;
-      color: var(--el-text-color-disabled-base);
+      color: var(--el-text-color-disabled);
     }
   }
 
   @each $size in (large, small) {
     @include m($size) {
-      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width-base
-        0;
+      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;
 
       @include e(item) {
         padding: map.get($dropdown-item-padding, $size);
diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss
index 0438630562..ecf346ec9b 100644
--- a/packages/theme-chalk/src/image.scss
+++ b/packages/theme-chalk/src/image.scss
@@ -18,7 +18,7 @@
 
   @include e(placeholder) {
     @extend %size !optional;
-    background: var(--el-bg-color);
+    background: getCssVar('fill-color', 'light');
   }
 
   @include e(error) {
@@ -27,7 +27,7 @@
     justify-content: center;
     align-items: center;
     font-size: 14px;
-    background: var(--el-bg-color);
+    background: getCssVar('fill-color', 'light');
     color: var(--el-text-color-placeholder);
     vertical-align: middle;
   }
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index 9b8033e869..e2b389293d 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -39,7 +39,7 @@
     bottom: 1px;
 
     width: map.get($input-height, 'default');
-    background: var(--el-bg-color);
+    background: getCssVar('fill-color', 'light');
     color: var(--el-text-color-regular);
     cursor: pointer;
     font-size: 13px;
@@ -67,13 +67,13 @@
   @include e(increase) {
     right: 1px;
     border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
-    border-left: var(--el-border-base);
+    border-left: var(--el-border);
   }
 
   @include e(decrease) {
     left: 1px;
     border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
-    border-right: var(--el-border-base);
+    border-right: var(--el-border);
   }
 
   @include when(disabled) {
@@ -144,7 +144,7 @@
       bottom: auto;
       left: auto;
       border-radius: 0 var(--el-border-radius-base) 0 0;
-      border-bottom: var(--el-border-base);
+      border-bottom: var(--el-border);
     }
 
     @include e(decrease) {
@@ -152,7 +152,7 @@
       top: auto;
       left: auto;
       border-right: none;
-      border-left: var(--el-border-base);
+      border-left: var(--el-border);
       border-radius: 0 0 var(--el-border-radius-base) 0;
     }
 
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 31cf86faf7..3ecebbeb57 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -166,7 +166,7 @@
     height: map.get($input-height, 'default');
     line-height: map.get($input-height, 'default');
     outline: none;
-    padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
+    padding: 0 map.get($input-padding-horizontal, 'default')-$border-width;
     transition: var(--el-transition-box-shadow);
     width: 100%;
     @include inset-input-border(
@@ -311,7 +311,7 @@
       @include e(inner) {
         height: map.get($input-height, $size);
         line-height: map.get($input-height, $size);
-        padding: 0 map.get($input-padding-horizontal, $size)-$border-width-base;
+        padding: 0 map.get($input-padding-horizontal, $size)-$border-width;
       }
 
       .#{$namespace}-input__icon {
@@ -361,7 +361,7 @@
   }
 
   @include e((append, prepend)) {
-    background-color: var(--el-bg-color);
+    background-color: getCssVar('fill-color', 'light');
     color: var(--el-color-info);
     vertical-align: middle;
     display: table-cell;
diff --git a/packages/theme-chalk/src/page-header.scss b/packages/theme-chalk/src/page-header.scss
index d87dd03bab..0e57ba15ef 100644
--- a/packages/theme-chalk/src/page-header.scss
+++ b/packages/theme-chalk/src/page-header.scss
@@ -19,7 +19,7 @@
       right: -20px;
       top: 50%;
       transform: translateY(-50%);
-      background-color: var(--el-border-color-base);
+      background-color: getCssVar('border-color');
     }
 
     @include e(icon) {
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
index 767228c793..5425ef9b82 100644
--- a/packages/theme-chalk/src/radio-button.scss
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -21,7 +21,7 @@
     white-space: nowrap;
     vertical-align: middle;
     background: var(--el-button-bg-color, map.get($button, 'bg-color'));
-    border: $border-base;
+    border: getCssVar('border');
     font-weight: var(--el-button-font-weight, map.get($button, 'font-weight'));
     border-left: 0;
     color: var(--el-button-text-color, map.get($button, 'text-color'));
@@ -57,7 +57,7 @@
 
   &:first-child {
     .#{$namespace}-radio-button__inner {
-      border-left: $border-base;
+      border-left: getCssVar('border');
       border-radius: var(--el-border-radius-base) 0 0
         var(--el-border-radius-base);
       box-shadow: none !important;
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index c79ea7f28b..fc6920c757 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -41,11 +41,11 @@ $radio-font-size: map.merge(
   }
 
   @include when(bordered) {
-    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
-      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
 
     border-radius: var(--el-border-radius-base);
-    border: var(--el-border-base);
+    border: var(--el-border);
     box-sizing: border-box;
 
     &.is-checked {
@@ -60,9 +60,9 @@ $radio-font-size: map.merge(
     @each $size in (large, small) {
       &.#{$namespace}-radio--#{$size} {
         padding: 0
-          map.get($checkbox-bordered-padding-right, $size)-$border-width-base
+          map.get($checkbox-bordered-padding-right, $size)-$border-width
           0
-          map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
+          map.get($checkbox-bordered-padding-left, $size)-$border-width;
         border-radius: var(--el-border-radius-base);
 
         .#{$namespace}-radio__label {
diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss
index c13bf6cc5a..015983fda5 100644
--- a/packages/theme-chalk/src/select-v2.scss
+++ b/packages/theme-chalk/src/select-v2.scss
@@ -29,7 +29,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     box-sizing: border-box;
     cursor: pointer;
     padding: 1px 30px 1px 0;
-    border: 1px solid var(--el-border-color-base);
+    border: 1px solid getCssVar('border-color');
     border-radius: var(--el-border-radius-base);
     transition: border-color var(--el-transition-duration-fast)
       var(--el-ease-in-out-bezier-function);
@@ -54,7 +54,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     @include when(disabled) {
       cursor: not-allowed;
 
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       color: var(--el-text-color-placeholder);
       border-color: var(--el-select-disabled-border);
 
diff --git a/packages/theme-chalk/src/steps.scss b/packages/theme-chalk/src/steps.scss
index 8915954830..60d123f760 100644
--- a/packages/theme-chalk/src/steps.scss
+++ b/packages/theme-chalk/src/steps.scss
@@ -7,7 +7,7 @@
   @include m(simple) {
     padding: 13px 8%;
     border-radius: 4px;
-    background: var(--el-bg-color);
+    background: getCssVar('fill-color', 'light');
   }
 
   @include m(horizontal) {
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index f9dec5c509..5f4dcc0c6d 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -122,7 +122,7 @@
 
     &.is-group {
       th.#{$namespace}-table__cell {
-        background: var(--el-bg-color);
+        background: getCssVar('fill-color', 'light');
       }
     }
   }
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index cacce47c5f..6bacce0d39 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -224,14 +224,14 @@
   }
   @include m(border-card) {
     background: $color-white;
-    border: 1px solid var(--el-border-color-base);
+    border: 1px solid getCssVar('border-color');
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
 
     > .#{$namespace}-tabs__content {
       padding: 15px;
     }
     > .#{$namespace}-tabs__header {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       border-bottom: 1px solid var(--el-border-color-light);
       margin: 0;
     }
@@ -256,8 +256,8 @@
       &.is-active {
         color: var(--el-color-primary);
         background-color: $color-white;
-        border-right-color: var(--el-border-color-base);
-        border-left-color: var(--el-border-color-base);
+        border-right-color: getCssVar('border-color');
+        border-left-color: getCssVar('border-color');
       }
       &:not(.is-disabled):hover {
         color: var(--el-color-primary);
@@ -305,7 +305,7 @@
     &.#{$namespace}-tabs--border-card {
       .#{$namespace}-tabs__header.is-bottom {
         border-bottom: 0;
-        border-top: 1px solid var(--el-border-color-base);
+        border-top: 1px solid getCssVar('border-color');
       }
       .#{$namespace}-tabs__nav-wrap.is-bottom {
         margin-top: -1px;
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 3c3d0030da..eb97f87ce8 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -96,7 +96,7 @@ $tag-icon-span-gap: map.merge(
   align-items: center;
 
   height: map.get($tag-height, 'default');
-  padding: 0 map.get($tag-padding, 'default') - $border-width-base;
+  padding: 0 map.get($tag-padding, 'default') - $border-width;
   font-size: var(--el-tag-font-size);
   line-height: 1;
   border-width: $tag-border-width;
@@ -130,7 +130,7 @@ $tag-icon-span-gap: map.merge(
   }
 
   &.is-closable {
-    padding-right: map.get($tag-icon-span-gap, 'default') - $border-width-base;
+    padding-right: map.get($tag-icon-span-gap, 'default') - $border-width;
   }
 
   @each $size in (large, default, small) {
@@ -145,7 +145,7 @@ $tag-icon-span-gap: map.merge(
       }
 
       &.is-closable {
-        padding-right: map.get($tag-icon-span-gap, $size) - $border-width-base;
+        padding-right: map.get($tag-icon-span-gap, $size) - $border-width;
       }
     }
   }
diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss
index f01a518900..bd36e8a9db 100644
--- a/packages/theme-chalk/src/time-select.scss
+++ b/packages/theme-chalk/src/time-select.scss
@@ -1,4 +1,5 @@
 @use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
 @use 'common/var' as *;
 @use './date-picker/picker.scss';
 @use './date-picker/date-picker.scss';
@@ -23,7 +24,7 @@
     }
 
     &:hover {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       font-weight: bold;
       cursor: pointer;
     }
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index f76ccc3d7e..98dda2035a 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -86,7 +86,7 @@
   }
 
   ~ .#{bem('upload', 'files')} {
-    border-top: $border-base;
+    border-top: getCssVar('border');
     margin-top: 7px;
     padding-top: 5px;
   }
@@ -177,7 +177,7 @@
     }
 
     &:hover {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
 
       .#{bem('icon', '', 'close')} {
         display: inline-flex;
diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
index d655c97972..ed28e71c93 100644
--- a/packages/theme-chalk/src/var.scss
+++ b/packages/theme-chalk/src/var.scss
@@ -9,6 +9,8 @@
 // https://lisilinhart.info/posts/css-variables-performance/
 
 :root {
+  color-scheme: light;
+
   --el-color-white: #{$color-white};
   --el-color-black: #{$color-black};
 
@@ -30,45 +32,40 @@
     @include set-css-color-type($type);
   }
 
-  // Background
-  --el-bg-color: #{$bg-color};
-
-  // Border
-  --el-border-width-base: #{$border-width-base};
-  --el-border-style-base: #{$border-style-base};
-  --el-border-color-hover: #{$border-color-hover};
-  --el-border-base: var(--el-border-width-base) var(--el-border-style-base)
-    var(--el-border-color-base);
-
-  // Svg
-  --el-svg-monochrome-grey: #dcdde0;
-
-  // Fill
-  --el-fill-base: var(--el-color-white);
-
-  // Typography
-  @include set-component-css-var('font-size', $font-size);
-
-  --el-font-weight-primary: 500;
-  --el-font-line-height-primary: 24px;
-  --el-text-color-disabled-base: #bbb;
-
-  // z-index
-  --el-index-normal: 1;
-  --el-index-top: 1000;
-  --el-index-popper: 2000;
-
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
   // --el-text-color-#{$type}
   @include set-component-css-var('text-color', $text-color);
   // --el-border-color-#{$type}
   @include set-component-css-var('border-color', $border-color);
   // --el-border-radius-#{$type}
   @include set-component-css-var('border-radius', $border-radius);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+  // Typography
+  @include set-component-css-var('font-size', $font-size);
   // Box-shadow
   // --el-box-shadow-#{$type}
   @include set-component-css-var('box-shadow', $box-shadow);
   // Disable base
   @include set-component-css-var('disabled', $disabled);
+  // z-index --el-index-#{$type}
+  @include set-component-css-var('index', $z-index);
+
+  // Border
+  --el-border-width: #{$border-width};
+  --el-border-style: #{$border-style};
+  --el-border-color-hover: #{$border-color-hover};
+  --el-border: var(--el-border-width) var(--el-border-style)
+    var(--el-border-color);
+
+  // Svg
+  --el-svg-monochrome-grey: #dcdde0;
+
+  --el-font-weight-primary: 500;
+  --el-font-line-height-primary: 24px;
+
+  // z-index
 
   /* Transition
 -------------------------- */