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

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);

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>

examples/components/theme-configurator/editor/boxShadow.vue

@@ -74,6 +74,7 @@
 .plus-button {
   position: absolute;
   left: 90%;
+  margin-top: 4px;
 }
 .colorPicker {
   margin-left: 0;

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>
 

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: {

examples/components/theme-configurator/shortcut.vue

+
+<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

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) => {

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"
     }
   }
 ]

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) {

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;
     }

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;
   }

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 {

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;

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 {

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;

packages/theme-chalk/src/option.scss

@@ -29,7 +29,7 @@
     }
 
     &.selected {
-      color: $--select-option-selected;
+      color: $--select-option-selected-font-color;
       font-weight: bold;
     }
   }

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 {

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;
     }
   }
 

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;
     }
   }
 

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;
     }
   }

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;

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 & {