From 5b6cb3180f979743cfc717cff82547ab7cc7c08e Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Thu, 14 Mar 2019 17:55:28 +0800
Subject: [PATCH] chore: generate theme (#14666)

* update es fr i18n

* update no need edit pages

* move var name to frontend

* add i18n

* update i18n

* fix bug

* update style

* add callback

* add shortcut

* redo undo logic

* update picker style

* update shadow style

* save config to local

* button color

* button color

* add message

* update save logic
---
 .../theme-configurator/docStyle.vue           |  14 +-
 .../theme-configurator/download.vue           |   1 +
 .../theme-configurator/editor/boxShadow.vue   |   1 +
 .../src/components/color-list.vue             |  22 +-
 .../components/theme-configurator/index.vue   |  79 ++++-
 .../theme-configurator/shortcut.vue           |  27 ++
 .../theme-configurator/utils/utils.js         |  10 +-
 examples/i18n/theme-editor.json               | 139 ++++++++
 packages/theme-chalk/src/cascader.scss        |   4 +-
 packages/theme-chalk/src/checkbox.scss        |  14 +-
 packages/theme-chalk/src/common/var.scss      | 310 ++++++++++++------
 .../src/date-picker/date-table.scss           |   8 +-
 .../src/date-picker/month-table.scss          |   2 +-
 .../src/date-picker/picker-panel.scss         |   2 +-
 .../src/date-picker/year-table.scss           |   2 +-
 packages/theme-chalk/src/input.scss           |   8 +-
 packages/theme-chalk/src/option.scss          |   2 +-
 packages/theme-chalk/src/select-dropdown.scss |   2 +-
 packages/theme-chalk/src/select.scss          |   4 +-
 packages/theme-chalk/src/table.scss           |  20 +-
 packages/theme-chalk/src/tag.scss             |   6 +-
 packages/theme-chalk/src/transfer.scss        |   2 +-
 packages/theme-chalk/src/tree.scss            |   6 +-
 23 files changed, 511 insertions(+), 174 deletions(-)
 create mode 100644 examples/components/theme-configurator/shortcut.vue

diff --git a/examples/components/theme-configurator/docStyle.vue b/examples/components/theme-configurator/docStyle.vue
index 434ad103970..83ceb6df704 100644
--- a/examples/components/theme-configurator/docStyle.vue
+++ b/examples/components/theme-configurator/docStyle.vue
@@ -6,17 +6,19 @@ export default {
   data() {
     return {
       docs: '', // content of docs css
-      theme: ORIGINAL_THEME
+      theme: ORIGINAL_THEME,
+      asyncCb: true
     };
   },
   methods: {
-    updateDocStyle(e) {
+    updateDocStyle(e, cb) {
       const val = e.global['$--color-primary'] || ORIGINAL_THEME;
       const oldVal = this.theme;
       const getHandler = (variable, id) => {
         return () => {
           let newStyle = this.updateStyle(this[variable], ORIGINAL_THEME, val);
           updateDomHeadStyle(id, newStyle);
+          this.asyncCb && cb();
         };
       };
       const docsHandler = getHandler('docs', 'docs-style');
@@ -24,11 +26,14 @@ export default {
         const links = [].filter.call(document.querySelectorAll('link'), link => {
           return /docs\..+\.css/.test(link.href || '');
         });
-        links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');
+        if (links[0]) {
+          this.getCSSString(links[0].href, docsHandler, 'docs');
+        } else {
+          this.asyncCb = false;
+        }
       } else {
         docsHandler();
       }
-
       const styles = [].slice.call(document.querySelectorAll('style'))
         .filter(style => {
           const text = style.innerText;
@@ -40,6 +45,7 @@ export default {
         style.innerText = this.updateStyle(innerText, oldVal, val);
       });
       this.theme = val;
+      !this.asyncCb && cb();
     },
     updateStyle(style, oldColor, newColor) {
       return style.replace(new RegExp(oldColor, 'ig'), newColor);
diff --git a/examples/components/theme-configurator/download.vue b/examples/components/theme-configurator/download.vue
index 56ece1853fb..5f69c1fd00f 100644
--- a/examples/components/theme-configurator/download.vue
+++ b/examples/components/theme-configurator/download.vue
@@ -8,6 +8,7 @@
       <el-button 
         type="primary" 
         :loading=downloading
+        style="background: #66b1ff;border-color: #66b1ff"
         @click.stop="onDownload">
         {{getActionDisplayName("download-theme")}}
       </el-button>
diff --git a/examples/components/theme-configurator/editor/boxShadow.vue b/examples/components/theme-configurator/editor/boxShadow.vue
index 2e937f6ed52..bfcd8eebb4d 100644
--- a/examples/components/theme-configurator/editor/boxShadow.vue
+++ b/examples/components/theme-configurator/editor/boxShadow.vue
@@ -74,6 +74,7 @@
 .plus-button {
   position: absolute;
   left: 90%;
+  margin-top: 4px;
 }
 .colorPicker {
   margin-left: 0;
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue b/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
index da3d99ea8b7..0230eed8985 100644
--- a/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
@@ -10,9 +10,9 @@
         </span>
         <div class="color-list-item-label">
           {{item.info.label}} 
-        </div>
-        <div class="color-list-item-value">
-          {{item.info.value}} 
+          <div class="color-list-item-value">
+            {{item.info.value}} 
+          </div>
         </div>
       </div>
     </div>
@@ -34,6 +34,7 @@
     width: 100%;
     cursor: pointer;
     margin: 2px 0;
+    position: relative;
   }
   .color-list-item:hover {
     background: #efefef;
@@ -44,22 +45,19 @@
     margin-top: 2px;
     margin-left: 5px;
     border-radius: 100%;
-    display: inline-block;
+    display: block;
+    position: absolute;
   }
   .color-list-item-label {
-    margin-left: 15px;
+    margin-left: 35px;
     font-size: 13px;
     line-height: 24px;
     display: inline-block;
-    vertical-align: super;
-    width: 30%;
+    width: 85%;
+    overflow: hidden;
   }
   .color-list-item-value { 
-    margin-left: 15px;
-    font-size: 13px;
-    line-height: 24px;
-    display: inline-block;
-    vertical-align: super;
+    float: right;
   }
 </style>
 
diff --git a/examples/components/theme-configurator/index.vue b/examples/components/theme-configurator/index.vue
index 3740d3af0f3..5ec6a2eff30 100644
--- a/examples/components/theme-configurator/index.vue
+++ b/examples/components/theme-configurator/index.vue
@@ -4,6 +4,7 @@
       round
       type="primary"
       size="mini"
+      style="background: #66b1ff;border-color: #66b1ff"
       @click.stop="showConfigurator"
     >{{getActionDisplayName("theme-editor")}}</el-button>
     <transition name="fade">
@@ -23,7 +24,8 @@
           </div>
           <div v-if="init && !currentConfig" class="no-config">
             <img src="../../assets/images/theme-no-config.png" alt>
-            <span>{{getActionDisplayName("no-config")}}</span>
+            <span v-if="pageCouldEdit">{{getActionDisplayName("no-config")}}</span>
+            <span v-else>{{getActionDisplayName("no-need-config")}}</span>
           </div>
           <download-area></download-area>
         </div>
@@ -100,8 +102,16 @@ import {
 } from './utils/utils.js';
 import DocStyle from './docStyle';
 import Loading from './loading';
+import Shortcut from './shortcut';
 import DownloadArea from './download';
 
+const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
+
+const DEFAULT_USER_CONFIG = {
+  global: {},
+  local: {}
+};
+
 export default {
   components: {
     mainPanel,
@@ -117,21 +127,33 @@ export default {
         global: {},
         local: {}
       },
-      lastApply: 0
+      lastApply: 0,
+      userConfigHistory: [],
+      userConfigRedoHistory: [],
+      hasLocalConfig: false
     };
   },
-  mixins: [DocStyle, Loading],
+  mixins: [DocStyle, Loading, Shortcut],
   computed: {
     globalValue() {
       return filterGlobalValue(this.defaultConfig, this.userConfig);
+    },
+    pageCouldEdit() {
+      const noNeedEdit = ['installation', 'quickstart', 'i18n', 'custom-theme', 'transition'];
+      const lastPath = this.$route.path.split('/').slice(-1).pop();
+      return noNeedEdit.indexOf(lastPath) < 0;
     }
   },
+  mounted() {
+    this.checkLocalThemeConfig();
+  },
   methods: {
     getActionDisplayName(key) {
       return getActionDisplayName(key);
     },
     showConfigurator() {
       this.visible = !this.visible;
+      this.visible ? this.enableShortcut() : this.disableShortcut();
       bus.$emit('user-theme-config-visible', this.visible);
       window.userThemeConfigVisible = Boolean(this.visible);
       if (this.init) return;
@@ -154,25 +176,46 @@ export default {
                 this.defaultConfig = defaultConfig;
                 this.filterCurrentConfig();
                 this.init = true;
+                this.checkLocalThemeConfig();
               }
               loading.close();
             }, 300); // action after transition
           });
       });
     },
+    checkLocalThemeConfig() {
+      try {
+        if (this.hasLocalConfig) {
+          this.$message(getActionDisplayName('load-local-theme-config'));
+          this.onAction();
+          return;
+        }
+        const config = JSON.parse(localStorage.getItem(ELEMENT_THEME_USER_CONFIG));
+        if (config && config.global) {
+          this.userConfig = config;
+          this.hasLocalConfig = true;
+          this.showConfigurator();
+        }
+      } catch (e) {
+        // bad local config
+      }
+    },
     filterCurrentConfig() {
       this.currentConfig = this.defaultConfig.find((config) => {
-        return config.name === this.$route.path.split('/').pop().toLowerCase();
+        return config.name === this.$route.path.split('/').pop().toLowerCase().replace('-', '');
       });
     },
     userConfigChange(e) {
+      this.userConfigHistory.push(JSON.stringify(this.userConfig));
+      this.userConfigRedoHistory = [];
       this.$set(this.userConfig[filterConfigType(this.currentConfig.name)], e.key, e.value);
       this.onAction();
     },
     applyStyle(res, time) {
       if (time < this.lastApply) return;
-      this.updateDocs();
-      updateDomHeadStyle('chalk-style', res);
+      this.updateDocs(() => {
+        updateDomHeadStyle('chalk-style', res);
+      });
       this.lastApply = time;
     },
     onDownload() {
@@ -190,6 +233,12 @@ export default {
     onAction() {
       this.triggerComponentLoading(true);
       const time = +new Date();
+      const currentConfigString = JSON.stringify(this.userConfig);
+      if (JSON.stringify(DEFAULT_USER_CONFIG) === currentConfigString) {
+        localStorage.removeItem(ELEMENT_THEME_USER_CONFIG);
+      } else {
+        localStorage.setItem(ELEMENT_THEME_USER_CONFIG, currentConfigString);
+      }
       updateVars(this.userConfig)
         .then((res) => {
           this.applyStyle(res, time);
@@ -213,10 +262,24 @@ export default {
     triggerComponentLoading(val) {
       bus.$emit('user-theme-config-loading', val);
     },
-    updateDocs() {
+    updateDocs(cb) {
       window.userThemeConfig = JSON.parse(JSON.stringify(this.userConfig));
       bus.$emit('user-theme-config-update', this.userConfig);
-      this.updateDocStyle(this.userConfig);
+      this.updateDocStyle(this.userConfig, cb);
+    },
+    undo() {
+      if (this.userConfigHistory.length > 0) {
+        this.userConfigRedoHistory.push(JSON.stringify(this.userConfig));
+        this.userConfig = JSON.parse(this.userConfigHistory.pop());
+        this.onAction();
+      }
+    },
+    redo() {
+      if (this.userConfigRedoHistory.length > 0) {
+        this.userConfigHistory.push(JSON.stringify(this.userConfig));
+        this.userConfig = JSON.parse(this.userConfigRedoHistory.shift());
+        this.onAction();
+      }
     }
   },
   watch: {
diff --git a/examples/components/theme-configurator/shortcut.vue b/examples/components/theme-configurator/shortcut.vue
new file mode 100644
index 00000000000..7a77098d8af
--- /dev/null
+++ b/examples/components/theme-configurator/shortcut.vue
@@ -0,0 +1,27 @@
+
+<script>
+export default {
+  data() {
+    return {
+      downloading: false
+    };
+  },
+  methods: {
+    shortcut(e) {
+      if (e.keyCode === 90 && (e.ctrlKey || e.metaKey)) {
+        if (e.shiftKey) {
+          this.redo();
+        } else {
+          this.undo();
+        }
+      }
+    },
+    enableShortcut() {
+      document.addEventListener('keydown', this.shortcut);
+    },
+    disableShortcut() {
+      document.removeEventListener('keydown', this.shortcut);
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/utils/utils.js b/examples/components/theme-configurator/utils/utils.js
index d1b87e90be0..7f1ae91f3f6 100644
--- a/examples/components/theme-configurator/utils/utils.js
+++ b/examples/components/theme-configurator/utils/utils.js
@@ -46,12 +46,14 @@ const getNameFromI18N = (name) => {
   return constant.filter(config => config.lang === lang)[0][name];
 };
 
+export const getVariableDisplayName = (key) => {
+  return getNameFromI18N('variable-name')[key] || key;
+};
+
 export const getStyleDisplayName = (config, componentName) => {
   const displayNameMap = getNameFromI18N('display-name');
-  if (config.name !== '[]') {
-    const langIndex = {'zh-CN': '0', 'es': 2, 'fr-FR': 3}[getLang()] || 1;
-    const nameArr = config.name.replace(/\[?\]?/g, '').split(',');
-    return nameArr[langIndex] || nameArr[1];
+  if (config.name) {
+    return getVariableDisplayName(config.key.replace('$--', ''));
   }
   let displayName = config.key.replace(`$--${componentName}-`, '').replace();
   Object.keys(displayNameMap).forEach((name) => {
diff --git a/examples/i18n/theme-editor.json b/examples/i18n/theme-editor.json
index d145dd24877..72bca951d58 100644
--- a/examples/i18n/theme-editor.json
+++ b/examples/i18n/theme-editor.json
@@ -9,11 +9,29 @@
       "font-size": "文字大小",
       "font-line-height": "文字行高",
       "border-radius": "边框圆角",
+      "vertical": "纵向",
+      "horizontal": "横向",
+      "padding": "内间距",
+      "margin": "外间距",
+      "icon": "图标",
+      "placeholder": "占位符",
+      "dropdown": "下拉菜单",
+      "max": "最大",
+      "min": "最小",
+      "focus": "聚焦",
+      "selected": "选中",
+      "height": "高度",
+      "size": "大小",
+      "group": "分组",
+      "radius": "圆角",
+      "width": "宽度",
       "color": "颜色"
     },
     "action": {
       "theme-editor": "主题编辑器",
       "no-config": "暂不可编辑，敬请期待",
+      "no-need-config": "本页无需编辑，看看其他页面吧",
+      "load-local-theme-config": "正在恢复您上次自定义的主题",
       "reset-theme": "重置",
       "download-theme": "下载"
     },
@@ -29,13 +47,82 @@
       "Font": "文字",
       "Radius": "边框圆角",
       "Shadow": "阴影",
+      "Spacing": "间距",
       "FontSize": "文字大小",
       "FontWeight": "文字粗细",
       "LineHeight": "文字行高"
+    },
+    "variable-name" : {
+      "color-primary": "主题色",
+      "color-white": "基础白色",
+      "color-black": "基础黑色",
+      "color-success": "成功颜色",
+      "color-warning": "警告颜色",
+      "color-danger": "危险颜色",
+      "color-info": "信息颜色",
+      "color-text-primary": "主要文字颜色",
+      "color-text-regular": "常规文字颜色",
+      "color-text-secondary": "次要文字颜色",
+      "color-text-placeholder": "占位文字颜色",
+      "border-color-base": "一级边框颜色",
+      "border-color-light": "二级边框颜色",
+      "border-color-lighter": "三级边框颜色",
+      "border-color-extra-light": "四级边框颜色",
+      "background-color-base": "基础背景色",
+      "border-radius-base": "大圆角",
+      "border-radius-small": "小圆角",
+      "border-radius-circle": "圆形圆角",
+      "box-shadow-base": "基础投影",
+      "box-shadow-dark": "深色投影",
+      "box-shadow-light": "浅色投影",
+      "font-size-extra-large": "主标题文字大小",
+      "font-size-large": "标题文字大小",
+      "font-size-medium": "小标题文字大小",
+      "font-size-base": "正文文字大小",
+      "font-size-small": "正文（小）文字大小",
+      "font-size-extra-small": "辅助文字大小",
+      "font-weight-primary": "主要文字粗细",
+      "font-weight-secondary": "次要文字粗细",
+      "font-line-height-primary": "主要文字行高",
+      "font-line-height-secondary": "次要文字行高"
     }
   },
   {
     "lang": "en-US",
+    "variable-name" : {
+      "color-primary": "primary color",
+      "color-white": "basic white",
+      "color-black": "basic black",
+      "color-success": "success color",
+      "color-warning": "warning color",
+      "color-danger": "danger color",
+      "color-info": "info color",
+      "color-text-primary": "primary text color",
+      "color-text-regular": "regular text color",
+      "color-text-secondary": "secondary text color",
+      "color-text-placeholder": "placeholder text color",
+      "border-color-base": "border color base",
+      "border-color-light": "border color light",
+      "border-color-lighter": "border color lighter",
+      "border-color-extra-light": "border color extra light",
+      "background-color-base": "base background color",
+      "border-radius-base": "border radius base",
+      "border-radius-small": "border radius small",
+      "border-radius-circle": "border radius circle",
+      "box-shadow-base": "box shadow base",
+      "box-shadow-dark": "box shadow dark",
+      "box-shadow-light": "box shadow light",
+      "font-size-extra-large": "extra large font size",
+      "font-size-large": "large font size",
+      "font-size-medium": "medium font size",
+      "font-size-base": "base font size",
+      "font-size-small": "small font size",
+      "font-size-extra-small": "extra small font size",
+      "font-weight-primary": "primary font weight",
+      "font-weight-secondary": "secondary font weight",
+      "font-line-height-primary": "primary font line height",
+      "font-line-height-secondary": "secondary font line height"
+    },
     "display-name": {
       "border-color": "border color",
       "font-color": "font color",
@@ -48,6 +135,8 @@
     "action": {
       "theme-editor": "Theme Editor",
       "no-config": "Please stay tuned",
+      "load-local-theme-config": "Loading your last edit theme config",
+      "no-need-config": "No config in this page",
       "reset-theme": "Reset",
       "download-theme": "Download"
     },
@@ -65,11 +154,61 @@
   {
     "lang": "es",
     "display-name": {
+      "border-color": "border color",
+      "font-color": "font color",
+      "background-color": "background color",
+      "font-weight": "font weight",
+      "font-size": "font size",
+      "font-line-height": "font line height",
+      "border-radius": "border radius"
+    },
+    "action": {
+      "theme-editor": "Theme Editor",
+      "no-config": "Please stay tuned",
+      "load-local-theme-config": "Loading your last edit theme config",
+      "no-need-config": "No config in this page",
+      "reset-theme": "Reset",
+      "download-theme": "Download"
+    },
+    "category": {
+      "BrandColor": "Brand Color",
+      "SecondaryColor": "Secondary Color",
+      "FontColor": "Font Color",
+      "BorderColor": "Border Color",
+      "BackgroundColor": "Background Color",
+      "FontSize": "Font Size",
+      "FontWeight": "Font Weight",
+      "LineHeight": "Line Height"
     }
   },
   {
     "lang": "fr-FR",
     "display-name": {
+      "border-color": "border color",
+      "font-color": "font color",
+      "background-color": "background color",
+      "font-weight": "font weight",
+      "font-size": "font size",
+      "font-line-height": "font line height",
+      "border-radius": "border radius"
+    },
+    "action": {
+      "theme-editor": "Theme Editor",
+      "no-config": "Please stay tuned",
+      "load-local-theme-config": "Loading your last edit theme config",
+      "no-need-config": "No config in this page",
+      "reset-theme": "Reset",
+      "download-theme": "Download"
+    },
+    "category": {
+      "BrandColor": "Brand Color",
+      "SecondaryColor": "Secondary Color",
+      "FontColor": "Font Color",
+      "BorderColor": "Border Color",
+      "BackgroundColor": "Background Color",
+      "FontSize": "Font Size",
+      "FontWeight": "Font Weight",
+      "LineHeight": "Line Height"
     }
   }
 ]
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index 451fec4f483..485d5f4f433 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -51,7 +51,7 @@
     top: 0;
     height: 100%;
     padding: 0 25px 0 15px;
-    color: $--input-color;
+    color: $--cascader-menu-font-color;
     width: 100%;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -156,7 +156,7 @@
     }
 
     @include when(active) {
-      color: $--select-option-selected;
+      color: $--cascader-menu-selected-font-color;
     }
 
     &:hover, &:focus:not(:active) {
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index a6a76e81083..143671ef155 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -4,7 +4,7 @@
 @import "mixins/utils";
 
 @include b(checkbox) {
-  color: $--checkbox-color;
+  color: $--checkbox-font-color;
   font-weight: $--checkbox-font-weight;
   font-size: $--font-size-base;
   position: relative;
@@ -149,7 +149,7 @@
 
     @include when(checked) {
       .el-checkbox__inner {
-        background-color: $--checkbox-checked-input-fill;
+        background-color: $--checkbox-checked-input-background-color;
         border-color: $--checkbox-checked-input-border-color;
 
         &::after {
@@ -158,7 +158,7 @@
       }
 
       & + .el-checkbox__label {
-        color: $--checkbox-checked-text-color;
+        color: $--checkbox-checked-font-color;
       }
     }
     @include when(focus) { /*focus时 视觉上区分*/
@@ -168,7 +168,7 @@
     }
     @include when(indeterminate) {
       .el-checkbox__inner {
-        background-color: $--checkbox-checked-input-fill;
+        background-color: $--checkbox-checked-input-background-color;
         border-color: $--checkbox-checked-input-border-color;
 
         &::before {
@@ -197,7 +197,7 @@
     box-sizing: border-box;
     width: $--checkbox-input-width;
     height: $--checkbox-input-height;
-    background-color: $--checkbox-input-fill;
+    background-color: $--checkbox-input-background-color;
     z-index: $--index-normal;
     transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
     background-color .25s cubic-bezier(.71,-.46,.29,1.46);
@@ -294,8 +294,8 @@
 
   &.is-checked {
     & .el-checkbox-button__inner {
-      color: $--checkbox-button-checked-color;
-      background-color: $--checkbox-button-checked-fill;
+      color: $--checkbox-button-checked-font-color;
+      background-color: $--checkbox-button-checked-background-color;
       border-color: $--checkbox-button-checked-border-color;
       box-shadow: -1px 0 0 0 $--color-primary-light-4;
     }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 1952b8292df..5a4cee0ec3b 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1,7 +1,8 @@
 /* Element Chalk Variables */
 
 // Special comment for theme configurator
-// type|[Chinese Name, English Name, Spanish Name, French Name]|Category|Order
+// type|skipAutoTranslation|Category|Order
+// skipAutoTranslation 1
 
 /* Transition
 -------------------------- */
@@ -14,11 +15,11 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 
 /* Color
 -------------------------- */
-/// color|[主题色,primary color,color primario]|BrandColor|0
+/// color|1|BrandColor|0
 $--color-primary: #409EFF !default;
-/// color|[基础白色,basic white,basic white]|BackgroundColor|4
+/// color|1|BackgroundColor|4
 $--color-white: #FFFFFF !default;
-/// color|[基础黑色,basic black,basic black]|BackgroundColor|4
+/// color|1|BackgroundColor|4
 $--color-black: #000000 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
 $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
@@ -29,13 +30,13 @@ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /
 $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
 $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
-/// color|[成功颜色,success color,success color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
 $--color-success: #67C23A !default;
-/// color|[警告颜色,warning color,warning color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
 $--color-warning: #E6A23C !default;
-/// color|[危险颜色,danger color,danger color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
 $--color-danger: #F56C6C !default;
-/// color|[信息颜色,info color,info color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
 $--color-info: #909399 !default;
 
 $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
@@ -47,25 +48,25 @@ $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
 $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
 $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
 $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
-/// color|[主要文字颜色,primary text color,primary text color]|FontColor|2
+/// color|1|FontColor|2
 $--color-text-primary: #303133 !default;
-/// color|[常规文字颜色,regular text color,regular text color]|FontColor|2
+/// color|1|FontColor|2
 $--color-text-regular: #606266 !default;
-/// color|[次要文字颜色,secondary text color,secondary text color]|FontColor|2
+/// color|1|FontColor|2
 $--color-text-secondary: #909399 !default;
-/// color|[占位文字颜色,placeholder text color,placeholder text color]|FontColor|2
+/// color|1|FontColor|2
 $--color-text-placeholder: #C0C4CC !default;
-/// color|[一级边框颜色,border color,border color]|BorderColor|3
+/// color|1|BorderColor|3
 $--border-color-base: #DCDFE6 !default;
-/// color|[二级边框颜色,border color light,border color light]|BorderColor|3
+/// color|1|BorderColor|3
 $--border-color-light: #E4E7ED !default;
-/// color|[三级边框颜色,border color lighter,border color lighter]|BorderColor|3
+/// color|1|BorderColor|3
 $--border-color-lighter: #EBEEF5 !default;
-/// color|[四级边框颜色,border color extra light,border color extra light]|BorderColor|3
+/// color|1|BorderColor|3
 $--border-color-extra-light: #F2F6FC !default;
 
 // Background
-/// color|[基础背景色,base background color,base background color]|BackgroundColor|4
+/// color|1|BackgroundColor|4
 $--background-color-base: #f5f7fa !default;
 
 /* Link
@@ -79,19 +80,19 @@ $--border-width-base: 1px !default;
 $--border-style-base: solid !default;
 $--border-color-hover: $--color-text-placeholder !default;
 $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
-/// borderRadius|[大圆角,border radius base,border radius base]|Radius|0
+/// borderRadius|1|Radius|0
 $--border-radius-base: 4px !default;
-/// borderRadius|[小圆角,border radius small,border radius small]|Radius|0
+/// borderRadius|1|Radius|0
 $--border-radius-small: 2px !default;
-/// borderRadius|[圆形圆角,border radius circle,border radius circle]|Radius|0
+/// borderRadius|1|Radius|0
 $--border-radius-circle: 100% !default;
 
 // Box-shadow
-/// boxShadow|[基础投影,box shadow base,box shadow base]|Shadow|1
+/// boxShadow|1|Shadow|1
 $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
-// boxShadow|[深色投影,box shadow,box shadow]|Shadow|1
+// boxShadow|1|Shadow|1
 $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
-/// boxShadow|[浅色投影,box shadow,box shadow]|Shadow|1
+/// boxShadow|1|Shadow|1
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
 /* Fill
@@ -101,25 +102,25 @@ $--fill-base: $--color-white !default;
 /* Typography
 -------------------------- */
 $--font-path: 'fonts' !default;
-/// fontSize|[主标题文字大小,Extra large font size,Extra large font size]|FontSize|0
+/// fontSize|1|FontSize|0
 $--font-size-extra-large: 20px !default;
-/// fontSize|[标题文字大小,large font size,large font size]|FontSize|0
+/// fontSize|1|FontSize|0
 $--font-size-large: 18px !default;
-/// fontSize|[小标题文字大小,Medium font size,Medium font size]|FontSize|0
+/// fontSize|1|FontSize|0
 $--font-size-medium: 16px !default;
-/// fontSize|[正文文字大小,base font size,base font size]|FontSize|0
+/// fontSize|1|FontSize|0
 $--font-size-base: 14px !default;
-/// fontSize|[正文（小）文字大小,small font size,small font size]|FontSize|0
+/// fontSize|1|FontSize|0
 $--font-size-small: 13px !default;
-/// fontSize|[辅助文字大小,Extra small font size,Extra small font size]|FontSize|0
+/// fontSize|1|FontSize|0
 $--font-size-extra-small: 12px !default;
-/// fontWeight|[主要文字粗细,primary font weight,primary font weight]|FontWeight|1
+/// fontWeight|1|FontWeight|1
 $--font-weight-primary: 500 !default;
-/// fontWeight|[次要文字粗细,secondary font weight,secondary font weight]|FontWeight|1
+/// fontWeight|1|FontWeight|1
 $--font-weight-secondary: 100 !default;
-/// fontLineHeight|[主要文字行高,primary font line height,primary font line height]|LineHeight|2
+/// fontLineHeight|1|LineHeight|2
 $--font-line-height-primary: 24px !default;
-/// fontLineHeight|[次要文字行高,secondary font line height,secondary font line height]|LineHeight|2
+/// fontLineHeight|1|LineHeight|2
 $--font-line-height-secondary: 16px !default;
 $--font-color-disabled-base: #bbb !default;
 /* Size
@@ -145,17 +146,25 @@ $--icon-color-base: $--color-info !default;
 
 /* Checkbox
 -------------------------- */
+/// fontSize||Font|1
 $--checkbox-font-size: 14px !default;
+/// fontWeight||Font|1
 $--checkbox-font-weight: $--font-weight-primary !default;
-$--checkbox-color: $--color-text-regular !default;
+/// color||Color|0
+$--checkbox-font-color: $--color-text-regular !default;
 $--checkbox-input-height: 14px !default;
 $--checkbox-input-width: 14px !default;
+/// borderRadius||Border|2
 $--checkbox-input-border-radius: $--border-radius-small !default;
-$--checkbox-input-fill: $--color-white !default;
+/// color||Color|0
+$--checkbox-input-background-color: $--color-white !default;
 $--checkbox-input-border: $--border-base !default;
+/// color||Color|0
 $--checkbox-input-border-color: $--border-color-base !default;
+/// color||Color|0
 $--checkbox-icon-color: $--color-white !default;
 
+/// color||Color|0
 $--checkbox-disabled-input-border-color: $--border-color-base !default;
 $--checkbox-disabled-input-fill: #edf2fc !default;
 $--checkbox-disabled-icon-color: $--color-text-placeholder !default;
@@ -164,53 +173,66 @@ $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
 $--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
 $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
 
-$--checkbox-checked-text-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-font-color: $--color-primary !default;
 $--checkbox-checked-input-border-color: $--color-primary !default;
-$--checkbox-checked-input-fill: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-input-background-color: $--color-primary !default;
 $--checkbox-checked-icon-color: $--fill-base !default;
 
 $--checkbox-input-border-color-hover: $--color-primary !default;
-
+/// height||Other|4
 $--checkbox-bordered-height: 40px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
 $--checkbox-bordered-medium-input-height: 14px !default;
 $--checkbox-bordered-medium-input-width: 14px !default;
+/// height||Other|4
 $--checkbox-bordered-medium-height: 36px !default;
 $--checkbox-bordered-small-input-height: 12px !default;
 $--checkbox-bordered-small-input-width: 12px !default;
+/// height||Other|4
 $--checkbox-bordered-small-height: 32px !default;
 $--checkbox-bordered-mini-input-height: 12px !default;
 $--checkbox-bordered-mini-input-width: 12px !default;
+/// height||Other|4
 $--checkbox-bordered-mini-height: 28px !default;
 
+/// fontSize||Font|1
 $--checkbox-button-font-size: $--font-size-base !default;
-$--checkbox-button-checked-fill: $--color-primary !default;
-$--checkbox-button-checked-color: $--color-white !default;
+/// color||Color|0
+$--checkbox-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-button-checked-font-color: $--color-white !default;
+/// color||Color|0
 $--checkbox-button-checked-border-color: $--color-primary !default;
 
 
 
 /* Radio
 -------------------------- */
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
 $--radio-font-size: $--font-size-base !default;
-/// fontWeight|[]|Font|1
+/// fontWeight||Font|1
 $--radio-font-weight: $--font-weight-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-font-color: $--color-text-regular !default;
 $--radio-input-height: 14px !default;
 $--radio-input-width: 14px !default;
-/// borderRadius|[]|Border|2
+/// borderRadius||Border|2
 $--radio-input-border-radius: $--border-radius-circle !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-input-background-color: $--color-white !default;
 $--radio-input-border: $--border-base !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-input-border-color: $--border-color-base !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-icon-color: $--color-white !default;
 
 $--radio-disabled-input-border-color: $--disabled-border-base !default;
@@ -221,13 +243,13 @@ $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
 $--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
 $--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
 
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-checked-font-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-checked-input-border-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-checked-input-background-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-checked-icon-color: $--color-primary !default;
 
 $--radio-input-border-color-hover: $--color-primary !default;
@@ -247,13 +269,13 @@ $--radio-bordered-mini-input-height: 12px !default;
 $--radio-bordered-mini-input-width: 12px !default;
 $--radio-bordered-mini-height: 28px !default;
 
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
 $--radio-button-font-size: $--font-size-base !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-button-checked-background-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-button-checked-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--radio-button-checked-border-color: $--color-primary !default;
 $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
 
@@ -261,30 +283,38 @@ $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
 -------------------------- */
 $--select-border-color-hover: $--border-color-hover !default;
 $--select-disabled-border: $--disabled-border-base !default;
+/// fontSize||Font|1
 $--select-font-size: $--font-size-base !default;
 $--select-close-hover-color: $--color-text-secondary !default;
 
 $--select-input-color: $--color-text-placeholder !default;
 $--select-multiple-input-color: #666 !default;
-$--select-input-focus-background: $--color-primary !default;
+/// color||Color|0
+$--select-input-focus-border-color: $--color-primary !default;
+/// fontSize||Font|1
 $--select-input-font-size: 14px !default;
 
 $--select-option-color: $--color-text-regular !default;
 $--select-option-disabled-color: $--color-text-placeholder !default;
 $--select-option-disabled-background: $--color-white !default;
+/// height||Other|4
 $--select-option-height: 34px !default;
 $--select-option-hover-background: $--background-color-base !default;
-$--select-option-selected: $--color-primary !default;
+/// color||Color|0
+$--select-option-selected-font-color: $--color-primary !default;
 $--select-option-selected-hover: $--background-color-base !default;
 
 $--select-group-color: $--color-info !default;
+/// height||Other|4
 $--select-group-height: 30px !default;
 $--select-group-font-size: 12px !default;
 
 $--select-dropdown-background: $--color-white !default;
 $--select-dropdown-shadow: $--box-shadow-light !default;
 $--select-dropdown-empty-color: #999 !default;
+/// height||Other|4
 $--select-dropdown-max-height: 274px !default;
+/// padding||Spacing|3
 $--select-dropdown-padding: 6px 0 !default;
 $--select-dropdown-empty-padding: 10px 0 !default;
 $--select-dropdown-border: solid 1px $--border-color-light !default;
@@ -362,18 +392,26 @@ $--notification-danger-color: $--color-danger !default;
 
 /* Input
 -------------------------- */
+/// fontSize||Font|1
 $--input-font-size: $--font-size-base !default;
-$--input-color: $--color-text-regular !default;
+/// color||Color|0
+$--input-font-color: $--color-text-regular !default;
+/// height||Other|4
 $--input-width: 140px !default;
+/// height||Other|4
 $--input-height: 40px !default;
 $--input-border: $--border-base !default;
 $--input-border-color: $--border-color-base !default;
+/// borderRadius||Border|2
 $--input-border-radius: $--border-radius-base !default;
 $--input-border-color-hover: $--border-color-hover !default;
-$--input-fill: $--color-white !default;
+/// color||Color|0
+$--input-background-color: $--color-white !default;
 $--input-fill-disabled: $--disabled-fill-base !default;
 $--input-color-disabled: $--font-color-disabled-base !default;
+/// color||Color|0
 $--input-icon-color: $--color-text-placeholder !default;
+/// color||Color|0
 $--input-placeholder-color: $--color-text-placeholder !default;
 $--input-max-width: 314px !default;
 
@@ -388,21 +426,32 @@ $--input-disabled-border: $--disabled-border-base !default;
 $--input-disabled-color: $--disabled-color-base !default;
 $--input-disabled-placeholder-color: $--color-text-placeholder !default;
 
+/// fontSize||Font|1
 $--input-medium-font-size: 14px !default;
+/// height||Other|4
 $--input-medium-height: 36px !default;
-
+/// fontSize||Font|1
 $--input-small-font-size: 13px !default;
+/// height||Other|4
 $--input-small-height: 32px !default;
-
+/// fontSize||Font|1
 $--input-mini-font-size: 12px !default;
+/// height||Other|4
 $--input-mini-height: 28px !default;
 
 /* Cascader
 -------------------------- */
+/// color||Color|0
+$--cascader-menu-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--cascader-menu-selected-font-color: $--color-primary !default;
 $--cascader-menu-fill: $--fill-base !default;
+/// fontSize||Font|1
 $--cascader-menu-font-size: $--font-size-base !default;
+/// borderRadius||Border|2
 $--cascader-menu-radius: $--border-radius-base !default;
 $--cascader-menu-border: $--border-base !default;
+/// color||Color|0
 $--cascader-menu-border-color: $--border-color-base !default;
 $--cascader-menu-border-width: $--border-width-base !default;
 $--cascader-menu-color: $--color-text-regular !default;
@@ -413,6 +462,7 @@ $--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
 $--cascader-menu-option-color-disabled: #999 !default;
 $--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
 $--cascader-menu-option-empty-color: #666 !default;
+/// color||Color|0
 $--cascader-menu-group-color: #999 !default;
 $--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
 $--cascader-menu-option-pinyin-color: #999 !default;
@@ -442,76 +492,84 @@ $--tab-vertical-header-count-fill: $--color-text-secondary !default;
 
 /* Button
 -------------------------- */
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
 $--button-font-size: $--font-size-base !default;
-/// fontWeight|[]|Font|1
+/// fontWeight||Font|1
 $--button-font-weight: $--font-weight-primary !default;
-/// borderRadius|[]|Border|2
+/// borderRadius||Border|2
 $--button-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
 $--button-padding-vertical: 12px !default;
+/// padding||Spacing|3
 $--button-padding-horizontal: 20px !default;
 
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
 $--button-medium-font-size: $--font-size-base !default;
-/// borderRadius|[]|Border|2
+/// borderRadius||Border|2
 $--button-medium-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
 $--button-medium-padding-vertical: 10px !default;
+/// padding||Spacing|3
 $--button-medium-padding-horizontal: 20px !default;
 
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
 $--button-small-font-size: 12px !default;
 $--button-small-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
 $--button-small-padding-vertical: 9px !default;
+/// padding||Spacing|3
 $--button-small-padding-horizontal: 15px !default;
-
+/// fontSize||Font|1
 $--button-mini-font-size: 12px !default;
 $--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
 $--button-mini-padding-vertical: 7px !default;
+/// padding||Spacing|3
 $--button-mini-padding-horizontal: 15px !default;
 
-/// color|[]|Color|0
+/// color||Color|0
 $--button-default-font-color: $--color-text-regular !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-default-background-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-default-border-color: $--border-color-base !default;
 
-/// color|[]|Color|0
+/// color||Color|0
 $--button-disabled-font-color: $--color-text-placeholder !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-disabled-background-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-disabled-border-color: $--border-color-lighter !default;
 
-/// color|[]|Color|0
+/// color||Color|0
 $--button-primary-border-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-primary-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-primary-background-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-success-border-color: $--color-success !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-success-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-success-background-color: $--color-success !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-warning-border-color: $--color-warning !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-warning-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-warning-background-color: $--color-warning !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-danger-border-color: $--color-danger !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-danger-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-danger-background-color: $--color-danger !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-info-border-color: $--color-info !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-info-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
 $--button-info-background-color: $--color-info !default;
 
 $--button-hover-tint-percent: 20% !default;
@@ -524,15 +582,21 @@ $--cascader-height: 200px !default;
 
 /* Switch
 -------------------------- */
+/// color||Color|0
 $--switch-on-color: $--color-primary !default;
+/// color||Color|0
 $--switch-off-color: $--border-color-base !default;
+/// color||Color|0
 $--switch-disabled-color: $--border-color-lighter !default;
-$--switch-disabled-text-color: $--color-text-placeholder !default;
-
+/// fontSize||Font|1
 $--switch-font-size: $--font-size-base !default;
+/// borderRadius||Border|2
 $--switch-core-border-radius: 10px !default;
+/// height||Other|4
 $--switch-width: 40px !default;
+/// height||Other|4
 $--switch-height: 20px !default;
+/// height||Other|4
 $--switch-button-size: 16px !default;
 
 /* Dialog
@@ -542,20 +606,24 @@ $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
 $--dialog-close-hover-color: $--color-primary !default;
 $--dialog-title-font-size: $--font-size-large !default;
 $--dialog-font-size: 14px !default;
-/// fontLineHeight|[]
+/// fontLineHeight|
 $--dialog-font-line-height: $--font-line-height-primary !default;
 $--dialog-padding-primary: 20px !default;
 
 /* Table
 -------------------------- */
+/// color||Color|0
 $--table-border-color: $--border-color-lighter !default;
 $--table-border: 1px solid $--table-border-color !default;
-$--table-text-color: $--color-text-regular !default;
+/// color||Color|0
+$--table-font-color: $--color-text-regular !default;
+/// color||Color|0
 $--table-header-color: $--color-text-secondary !default;
-$--table-row-hover-background: $--background-color-base !default;
-$--table-current-row-background: $--color-primary-light-9 !default;
-$--table-header-background: $--color-white !default;
-$--table-footer-background: $--color-text-placeholder !default;
+/// color||Color|0
+$--table-row-hover-background-color: $--background-color-base !default;
+$--table-current-row-background-color: $--color-primary-light-9 !default;
+/// color||Color|0
+$--table-header-background-color: $--color-white !default;
 $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
 
 /* Pagination
@@ -596,8 +664,12 @@ $--tooltip-padding: 10px !default;
 -------------------------- */
 $--tag-padding: 0 10px !default;
 $--tag-fill: rgba($--color-primary, 0.10) !default;
-$--tag-color: $--color-primary !default;
+/// color||Color|0
+$--tag-font-color: $--color-primary !default;
+/// color||Color|0
+$--tag-background-color: $--color-primary !default;
 $--tag-border: rgba($--color-primary, 0.20) !default;
+/// fontSize||Font|1
 $--tag-font-size: 12px !default;
 $--tag-border-radius: 4px !default;
 
@@ -623,8 +695,11 @@ $--tag-danger-color: $--color-danger !default;
 
 /* Tree
 -------------------------- */
-$--tree-node-hover-color: $--background-color-base !default;
-$--tree-text-color: $--color-text-regular !default;
+/// color||Color|0
+$--tree-node-hover-background-color: $--background-color-base !default;
+/// color||Color|0
+$--tree-font-color: $--color-text-regular !default;
+/// color||Color|0
 $--tree-expand-icon-color: $--color-text-placeholder !default;
 
 /* Dropdown
@@ -649,15 +724,22 @@ $--card-padding: 20px !default;
 
 /* Slider
 --------------------------*/
+/// color||Color|0
 $--slider-main-background-color: $--color-primary !default;
+/// color||Color|0
 $--slider-runway-background-color: $--border-color-light !default;
 $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
+/// color||Color|0
 $--slider-stop-background-color: $--color-white !default;
+/// color||Color|0
 $--slider-disable-color: $--color-text-placeholder !default;
 
+/// margin||Spacing|3
 $--slider-margin: 16px 0 !default;
 $--slider-border-radius: 3px !default;
+/// height||Other|4
 $--slider-height: 6px !default;
+/// height||Other|4
 $--slider-button-size: 16px !default;
 $--slider-button-wrapper-size: 36px !default;
 $--slider-button-wrapper-offset: -15px !default;
@@ -677,23 +759,35 @@ $--menu-item-hover-fill: $--color-primary-light-9 !default;
 
 /* Rate
 --------------------------*/
+/// height||Other|3
 $--rate-height: 20px !default;
+/// fontSize||Font|1
 $--rate-font-size: $--font-size-base !default;
+/// height||Other|3
 $--rate-icon-size: 18px !default;
+/// margin||Spacing|2
 $--rate-icon-margin: 6px !default;
+/// color||Color|0
 $--rate-icon-color: $--color-text-placeholder !default;
 
 /* DatePicker
 --------------------------*/
-$--datepicker-color: $--color-text-regular !default;
-$--datepicker-off-color: $--color-text-placeholder !default;
-$--datepicker-header-color: $--color-text-regular !default;
+/// color||Color|0
+$--datepicker-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--datepicker-off-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--datepicker-header-font-color: $--color-text-regular !default;
 $--datepicker-icon-color: $--color-text-primary !default;
 $--datepicker-border-color: $--disabled-border-base !default;
 $--datepicker-inner-border-color: #e4e4e4 !default;
+/// color||Color|0
 $--datepicker-inrange-color: $--border-color-extra-light !default;
+/// color||Color|0
 $--datepicker-inrange-hover-color: $--border-color-extra-light !default;
+/// color||Color|0
 $--datepicker-active-color: $--color-primary !default;
+/// color||Color|0
 $--datepicker-text-hover-color: $--color-primary !default;
 $--datepicker-cell-hover-color: #fff !default;
 
@@ -735,13 +829,19 @@ $--collapse-content-color: $--color-text-primary !default;
 --------------------------*/
 $--transfer-border-color: $--border-color-lighter !default;
 $--transfer-border-radius: $--border-radius-base !default;
+/// height||Other|4
 $--transfer-panel-width: 200px !default;
+/// height||Other|4
 $--transfer-panel-header-height: 40px !default;
-$--transfer-panel-header-background: $--background-color-base !default;
+/// color||Color|0
+$--transfer-panel-header-background-color: $--background-color-base !default;
+/// height||Other|4
 $--transfer-panel-footer-height: 40px !default;
+/// height||Other|4
 $--transfer-panel-body-height: 246px !default;
+/// height||Other|4
 $--transfer-item-height: 30px !default;
-$--transfer-item-hover-background: $--color-text-secondary !default;
+/// height||Other|4
 $--transfer-filter-height: 32px !default;
 
 /* Header
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 94bb24a0d85..71b4205e614 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -12,7 +12,7 @@
           background-color: $--datepicker-inrange-color;
         }
         td.available:hover {
-          color: $--datepicker-color;
+          color: $--datepicker-font-color;
         }
         td:first-child div {
           margin-left: 5px;
@@ -61,7 +61,7 @@
 
     &.next-month,
     &.prev-month {
-      color: $--datepicker-off-color;
+      color: $--datepicker-off-font-color;
     }
 
     &.today {
@@ -138,13 +138,13 @@
 
     &.week {
       font-size: 80%;
-      color: $--datepicker-header-color;
+      color: $--datepicker-header-font-color;
     }
   }
 
   th {
     padding: 5px;
-    color: $--datepicker-header-color;
+    color: $--datepicker-header-font-color;
     font-weight: 400;
     border-bottom: solid 1px $--border-color-lighter;
   }
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index ca071d38657..e6ea897ca6a 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -40,7 +40,7 @@
       height: 36px;
       display: block;
       line-height: 36px;
-      color: $--datepicker-color;
+      color: $--datepicker-font-color;
       margin: 0 auto;
       border-radius: 18px;
       &:hover {
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 3a8e386a6a0..380d6d1f1ff 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -38,7 +38,7 @@
     background-color: transparent;
     line-height: 28px;
     font-size: 14px;
-    color: $--datepicker-color;
+    color: $--datepicker-font-color;
     padding-left: 12px;
     text-align: left;
     outline: none;
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index 511e2fa4047..c4ae2e2e47d 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -36,7 +36,7 @@
       height: 32px;
       display: block;
       line-height: 32px;
-      color: $--datepicker-color;
+      color: $--datepicker-font-color;
       margin: 0 auto;
 
       &:hover {
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index acc8891480b..26b8983a067 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -15,8 +15,8 @@
     box-sizing: border-box;
     width: 100%;
     font-size: inherit;
-    color: $--input-color;
-    background-color: $--input-fill;
+    color: $--input-font-color;
+    background-color: $--input-background-color;
     background-image: none;
     border: $--input-border;
     border-radius: $--input-border-radius;
@@ -71,12 +71,12 @@
 
   @include e(inner) {
     -webkit-appearance: none;
-    background-color: $--input-fill;
+    background-color: $--input-background-color;
     background-image: none;
     border-radius: $--input-border-radius;
     border: $--input-border;
     box-sizing: border-box;
-    color: $--input-color;
+    color: $--input-font-color;
     display: inline-block;
     font-size: inherit;
     height: $--input-height;
diff --git a/packages/theme-chalk/src/option.scss b/packages/theme-chalk/src/option.scss
index f4d023dbf53..ee5a383ee88 100644
--- a/packages/theme-chalk/src/option.scss
+++ b/packages/theme-chalk/src/option.scss
@@ -29,7 +29,7 @@
     }
 
     &.selected {
-      color: $--select-option-selected;
+      color: $--select-option-selected-font-color;
       font-weight: bold;
     }
   }
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
index d6a9135d8af..567b411afe8 100644
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/packages/theme-chalk/src/select-dropdown.scss
@@ -14,7 +14,7 @@
 
   @include when(multiple) {
     & .el-select-dropdown__item.selected {
-      color: $--select-option-selected;
+      color: $--select-option-selected-font-color;
       background-color: $--select-dropdown-background;
 
       &.hover {
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index d11dcdca59d..d5f6a30d1ba 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -28,7 +28,7 @@
     padding-right: 35px;
 
     &:focus {
-      border-color: $--select-input-focus-background;
+      border-color: $--select-input-focus-border-color;
     }
   }
 
@@ -69,7 +69,7 @@
     }
 
     &.is-focus .el-input__inner {
-      border-color: $--select-input-focus-background;
+      border-color: $--select-input-focus-border-color;
     }
   }
 
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index f454859d581..031b999cd04 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -13,7 +13,7 @@
   max-width: 100%;
   background-color: $--color-white;
   font-size: 14px;
-  color: $--table-text-color;
+  color: $--table-font-color;
 
   // 数据为空
   @include e(empty-block) {
@@ -179,7 +179,7 @@
     white-space: nowrap;
     overflow: hidden;
     user-select: none;
-    background-color: $--table-header-background;
+    background-color: $--table-header-background-color;
 
     div {
       display: inline-block;
@@ -361,8 +361,8 @@
 
     & tbody td {
       border-top: $--table-border;
-      background-color: $--table-row-hover-background;
-      color: $--table-text-color;
+      background-color: $--table-row-hover-background-color;
+      color: $--table-font-color;
     }
   }
 
@@ -394,8 +394,8 @@
     overflow: hidden;
 
     & tbody td {
-      background-color: $--table-row-hover-background;
-      color: $--table-text-color;
+      background-color: $--table-row-hover-background-color;
+      color: $--table-font-color;
     }
   }
 
@@ -489,7 +489,7 @@
         }
 
         &.current-row td {
-          background-color: $--table-current-row-background;
+          background-color: $--table-current-row-background-color;
         }
       }
     }
@@ -500,14 +500,14 @@
       &, &.el-table__row--striped {
         &, &.current-row {
           > td {
-            background-color: $--table-current-row-background;
+            background-color: $--table-current-row-background-color;
           }
         }
       }
     }
 
     tr.current-row > td {
-      background-color: $--table-current-row-background;
+      background-color: $--table-current-row-background-color;
     }
   }
 
@@ -541,7 +541,7 @@
 
   @include m(enable-row-hover) {
     .el-table__body tr:hover > td {
-      background-color: $--table-row-hover-background;
+      background-color: $--table-row-hover-background-color;
     }
   }
 
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 6c949d7164c..2b6d67b71e7 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -8,7 +8,7 @@
   height: 32px;
   line-height: 30px;
   font-size: $--tag-font-size;
-  color: $--tag-color;
+  color: $--tag-font-color;
   border-radius: $--tag-border-radius;
   box-sizing: border-box;
   border: 1px solid $--tag-border;
@@ -26,14 +26,14 @@
     vertical-align: middle;
     top: -1px;
     right: -5px;
-    color: $--tag-color;
+    color: $--tag-font-color;
 
     &::before {
       display: block;
     }
 
     &:hover {
-      background-color: $--tag-color;
+      background-color: $--tag-background-color;
       color: $--color-white;
     }
   }
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index e231fd05462..3d594c1d670 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -155,7 +155,7 @@
   .el-transfer-panel__header {
     height: $--transfer-panel-header-height;
     line-height: $--transfer-panel-header-height;
-    background: $--transfer-panel-header-background;
+    background: $--transfer-panel-header-background-color;
     margin: 0;
     padding-left: 15px;
     border-bottom: 1px solid $--transfer-border-color;
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 8d4591f9ab6..197b84c2e80 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -7,7 +7,7 @@
   position: relative;
   cursor: default;
   background: $--color-white;
-  color: $--tree-text-color;
+  color: $--tree-font-color;
 
   @include e(empty-block) {
     position: relative;
@@ -39,7 +39,7 @@
   outline: none;
   &:focus { /* focus */
     > .el-tree-node__content {
-      background-color: $--tree-node-hover-color;
+      background-color: $--tree-node-hover-background-color;
     }
   }
 
@@ -63,7 +63,7 @@
       margin-right: 8px;
     }
     &:hover {
-      background-color: $--tree-node-hover-color;
+      background-color: $--tree-node-hover-background-color;
     }
 
     .el-tree.is-dragging & {