diff --git a/examples/components/palette/generate.js b/examples/components/palette/generate.js
new file mode 100644
index 0000000000..202ecc3c7c
--- /dev/null
+++ b/examples/components/palette/generate.js
@@ -0,0 +1,8 @@
+import fs from 'fs';
+
+import { formatLessVarToJs } from './utils.js';
+
+const palette = formatLessVarToJs('../../../packages/theme-chalk/src/common/basic/palette.less');
+const color = formatLessVarToJs('../../../packages/theme-chalk/src/common/basic/color.less');
+
+fs.writeFileSync('./paletteLess.json', JSON.stringify([...color, ...palette]));
diff --git a/examples/components/palette/index.vue b/examples/components/palette/index.vue
new file mode 100644
index 0000000000..3a6346fb60
--- /dev/null
+++ b/examples/components/palette/index.vue
@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <el-input placeholder="请输入" v-model="value" @input="handleChange" />
+    <div class="colors-list">
+      <div
+        v-for="palette in filteredPalette"
+        :key="palette[0]"
+        class="colors-item"
+        @click="copyTkl(palette[0])"
+      >
+        <div class="colors-item-bg" :style="{ background: palette[1] }"></div>
+        <div class="colors-item-text">{{ palette[1] }}</div>
+        <div class="colors-item-name">{{ palette[0] }}</div>
+        <input class="colors-item-copy" :value="palette[0]" :id="palette[0]" readonly />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Input } from 'kyligence-ui';
+import paletteLess from './paletteLess.json';
+
+export default {
+  name: 'Colors',
+  components: {
+    ElInput: Input
+  },
+  data() {
+    return {
+      value: ''
+    };
+  },
+  computed: {
+    filteredPalette() {
+      const arr = this.processArray(paletteLess);
+      return arr.filter(([name, color]) => {
+        let lowerValue = this.value.toLowerCase().replace(/\s/g, '').replace(/\//g, '-');
+        if (lowerValue.startsWith('function-')) {
+          const splitValue = lowerValue.split('-');
+          let end = 1;
+          if (splitValue[1] === splitValue[2]) {
+            end = 2;
+          }
+          splitValue.splice(0, end);
+          lowerValue = splitValue.join('-');
+        }
+        return name.includes(lowerValue) || color.includes(lowerValue);
+      });
+    }
+  },
+  methods: {
+    handleChange(value) {
+      this.value = value;
+    },
+    processArray(arr) {
+      const colors = new Set(); // 用于存储已出现的颜色值
+      const result = [];
+      for (let i = 0; i < arr.length; i++) {
+        const item = arr[i];
+        if (colors.has(item[1])) { // 如果颜色已经出现过
+          if (item[0].startsWith('@color-')) {
+            result.push(item);
+          }
+        } else {
+          colors.add(item[1]);
+          result.push(item); // 添加到结果数组
+        }
+      }
+      return result;
+    },
+    copyTkl(name) {
+      const input = document.getElementById(name);
+      input.select();
+      document.execCommand('copy');
+      this.$message.success(`复制成功：${name}`);
+    }
+  }
+};
+</script>
+
+<style>
+.colors-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+.colors-item {
+  position: relative;
+  flex-shrink: 0;
+  width: 18%;
+  height: 100px;
+  margin: 3px 2.5% 3px 0;
+  padding: 10px;
+  overflow: hidden;
+  text-align: center;
+  list-style: none;
+  background-color: inherit;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: rgba(240, 240, 240, 0.5);
+  color: #666;
+  box-sizing: border-box;
+
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+.colors-item:nth-child(5n) {
+  margin-right: 0;
+}
+.colors-item:hover {
+  color: #fff;
+  background-color: #0875da;
+}
+
+.colors-item-bg {
+  width: 80%;
+  height: 24px;
+}
+.colors-item-name {
+  font-size: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.colors-item-text {
+  font-size: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.colors-item-copy {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+</style>
\ No newline at end of file
diff --git a/examples/components/palette/package.json b/examples/components/palette/package.json
new file mode 100644
index 0000000000..f1da0c77c6
--- /dev/null
+++ b/examples/components/palette/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "color",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "node generate"
+  }
+}
\ No newline at end of file
diff --git a/examples/components/palette/paletteLess.json b/examples/components/palette/paletteLess.json
new file mode 100644
index 0000000000..320588e760
--- /dev/null
+++ b/examples/components/palette/paletteLess.json
@@ -0,0 +1 @@
+[["@color-fill-primary","#1268fb"],["@color-fill-primary-hover","#0454dc"],["@color-fill-primary-active","#0343b0"],["@color-fill-secondary","#ecf0f8"],["@color-fill-secondary-hover","#e6ebf4"],["@color-fill-secondary-active","#ced7e4"],["@color-fill-nav","#19284b"],["@color-fill-nav-hover","#344e8c"],["@color-fill-nav-active","#253c70"],["@color-border-primary","#1268fb"],["@color-border-primary-hover","#0454dc"],["@color-border-primary-active","#0343b0"],["@color-border-secondary","#e6ebf4"],["@color-border-secondary-hover","#ced7e4"],["@color-border-secondary-active","#a5b2c5"],["@color-container-primary","#ffffff"],["@color-container-secondary","#f8f9fb"],["@color-container-hover","#ecf0f8"],["@color-container-active","#e6ebf4"],["@color-divider-primary","#ecf0f8"],["@color-divider-secondary","#e6ebf4"],["@color-overlay-primary","fade(@palette-gray-900,64%)"],["@color-overlay-secondary","fade(@palette-gray-900,80%)"],["@color-overlay-reverse","fade(@palette-white,80%)"],["@color-text-primary","#2f374c"],["@color-text-secondary","#546174"],["@color-text-tertiary","#8b99ae"],["@color-text-placeholder","#a5b2c5"],["@color-text-reverse","#ffffff"],["@color-success","#66c942"],["@color-success-hover","#49a82b"],["@color-success-active","#32671e"],["@color-success-bg","#eff9eb"],["@color-success-tag-bg","#d9f1d0"],["@color-success-background","#eff9eb"],["@color-danger","#e03b3b"],["@color-danger-hover","#ca1616"],["@color-danger-active","#7f2727"],["@color-danger-bg","#fce9e9"],["@color-danger-tag-bg","#ffd6d6"],["@color-danger-background","#fce9e9"],["@color-error","#e03b3b"],["@color-error-hover","#ca1616"],["@color-error-active","#7f2727"],["@color-error-bg","#fce9e9"],["@color-error-tag-bg","#ffd6d6"],["@color-error-background","#fce9e9"],["@color-failure","#e03b3b"],["@color-failure-hover","#ca1616"],["@color-failure-active","#7f2727"],["@color-failure-bg","#fce9e9"],["@color-failure-tag-bg","#ffd6d6"],["@color-failure-background","#fce9e9"],["@color-warning","#f29d41"],["@color-warning-hover","#ec8600"],["@color-warning-active","#844001"],["@color-warning-bg","#fff2e5"],["@color-warning-tag-bg","#ffdfc2"],["@color-warning-background","#fff2e5"],["@color-info-primary","#1268fb"],["@color-info-primary-hover","#0343b0"],["@color-info-primary-active","#023284"],["@color-info-primary-bg","#f1f6fe"],["@color-info-primary-tag-bg","#d5e4fe"],["@color-info-primary-background","#f1f6fe"],["@color-info-secondary","#a5b2c5"],["@color-info-secondary-hover","#546174"],["@color-info-secondary-active","#3b4759"],["@color-info-secondary-bg","#f8f9fb"],["@color-info-secondary-tag-bg","#ecf0f8"],["@color-info-secondary-background","#f8f9fb"],["@color-utility-bg1","#F8F8F8"],["@color-utility-content1","#FF4499"],["@color-utility-content2","#C344FF"],["@color-utility-text","#000000"],["@color-white","#ffffff"],["@color-black","#000000"],["@palette-white","#ffffff"],["@palette-black","#000000"],["@palette-green-100","#eff9eb"],["@palette-green-200","#d9f1d0"],["@palette-green-300","#bae8aa"],["@palette-green-400","#85d468"],["@palette-green-500","#66c942"],["@palette-green-600","#4dba2f"],["@palette-green-700","#49a82b"],["@palette-green-800","#32671e"],["@palette-green-900","#1e3f12"],["@palette-orange-100","#fff2e5"],["@palette-orange-200","#ffdfc2"],["@palette-orange-300","#fecb9a"],["@palette-orange-400","#feb978"],["@palette-orange-500","#f29d41"],["@palette-orange-600","#fe9412"],["@palette-orange-700","#ec8600"],["@palette-orange-800","#844001"],["@palette-orange-900","#522800"],["@palette-coral-100","#fbeeee"],["@palette-coral-200","#f7d4d4"],["@palette-coral-300","#f5a9a9"],["@palette-coral-400","#ff7070"],["@palette-coral-500","#f55353"],["@palette-coral-600","#d64747"],["@palette-coral-700","#b23d3d"],["@palette-coral-800","#802b2b"],["@palette-coral-900","#471f1f"],["@palette-red-100","#fce9e9"],["@palette-red-200","#ffd6d6"],["@palette-red-300","#f1a7a7"],["@palette-red-400","#e66262"],["@palette-red-500","#e03b3b"],["@palette-red-600","#dc1818"],["@palette-red-700","#ca1616"],["@palette-red-800","#7f2727"],["@palette-red-900","#460b0b"],["@palette-pink-100","#fceef3"],["@palette-pink-200","#f9dce6"],["@palette-pink-300","#f0a8c1"],["@palette-pink-400","#e3618e"],["@palette-pink-500","#dc3a72"],["@palette-pink-600","#bd2257"],["@palette-pink-700","#8e1941"],["@palette-pink-800","#5e112c"],["@palette-pink-900","#460c21"],["@palette-purple-100","#f5eefc"],["@palette-purple-200","#ebdcf9"],["@palette-purple-300","#cca8f0"],["@palette-purple-400","#a261e3"],["@palette-purple-500","#8b3adc"],["@palette-purple-600","#6f22bd"],["@palette-purple-700","#53198e"],["@palette-purple-800","#38115e"],["@palette-purple-900","#2a0c46"],["@palette-blue-100","#f1f6fe"],["@palette-blue-200","#d5e4fe"],["@palette-blue-300","#b0ccfb"],["@palette-blue-400","#3b82fc"],["@palette-blue-500","#1268fb"],["@palette-blue-600","#0454dc"],["@palette-blue-700","#0343b0"],["@palette-blue-800","#023284"],["@palette-blue-900","#012158"],["@palette-navy-100","#f2f4ff"],["@palette-navy-200","#e3e9ff"],["@palette-navy-300","#bdc9ff"],["@palette-navy-400","#6c89cc"],["@palette-navy-500","#4763a1"],["@palette-navy-600","#344e8c"],["@palette-navy-700","#253c70"],["@palette-navy-800","#19284b"],["@palette-navy-900","#121d36"],["@palette-gray-100","#f8f9fb"],["@palette-gray-200","#ecf0f8"],["@palette-gray-300","#e6ebf4"],["@palette-gray-400","#ced7e4"],["@palette-gray-500","#a5b2c5"],["@palette-gray-600","#8b99ae"],["@palette-gray-700","#546174"],["@palette-gray-800","#3b4759"],["@palette-gray-900","#2f374c"]]
\ No newline at end of file
diff --git a/examples/components/palette/utils.js b/examples/components/palette/utils.js
new file mode 100644
index 0000000000..5d5fa102c8
--- /dev/null
+++ b/examples/components/palette/utils.js
@@ -0,0 +1,28 @@
+import fs from 'fs';
+import path from 'path';
+
+export const formatLessVarToJs = (lessPath) => {
+  let less = fs.readFileSync(lessPath, 'utf8');
+  less = less.replace(/\s/g, '');
+  less = less.split(';').filter((item) => item);
+  let presetBox = {};
+  const result = [];
+  for (const item of less) {
+    if (item.includes('@import')) {
+      const reg = /"(.*?)"/;
+      const suffix = item.match(reg)[1];
+      const importPath = path.resolve(lessPath, '../', suffix);
+      const importItem = formatLessVarToJs(importPath);
+      presetBox = Object.fromEntries(importItem);
+    } else {
+      // eslint-disable-next-line prefer-const
+      let [key, value] = item.split(':');
+      if (value.startsWith('@')) {
+        value = presetBox[value];
+      }
+      presetBox[key] = value;
+      result.push([key, value]);
+    }
+  }
+  return result;
+};
diff --git a/examples/docs/zh-CN/palette.md b/examples/docs/zh-CN/palette.md
new file mode 100644
index 0000000000..f69e436d00
--- /dev/null
+++ b/examples/docs/zh-CN/palette.md
@@ -0,0 +1,17 @@
+# 色板转换
+
+- 色板转换
+
+
+<template>
+   <Colors />
+</template>
+<script>
+import Colors from '../../components/palette/index.vue'
+export default {
+  components: {
+    Colors,
+  },
+}
+
+</script>
diff --git a/examples/nav.config.json b/examples/nav.config.json
index d2a846df08..1d638b13fa 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -32,6 +32,15 @@
     {
       "name": "组件",
       "groups": [
+        {
+          "groupName": "Tools",
+          "list": [
+            {
+              "path": "/palette",
+              "title": "色板"
+            }
+          ]
+        },
         {
           "groupName": "Basic",
           "list": [
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index b433698a89..90eb3014b3 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -18,18 +18,18 @@ $--color--menu-color1: #102d41;
 $--color--menu-color2: #0a2233;
 /* Colors
 -------------------------- */
-$--color-white: $palette-white !default;
-$--color-black: $palette-black !default;
+$--color-white: $color-white !default;
+$--color-black: $color-black !default;
 
 // $--color-grey-1: #bdbdbd !default;
 // $--color-grey-2: #eeeeee !default;
 // $--color-grey-3: #e2ecf1 !default;
 // $--color-grey-4: #f1f7fa !default;
-$--color-grey-1: $palette-gray-500 !default;
-$--color-grey-2: $palette-gray-200 !default;
-$--color-grey-3: $palette-gray-300 !default;
-$--color-grey-4: $palette-gray-100 !default;
-$--color-grey-5: $palette-gray-700 !default;
+$--color-grey-1: $color-text-placeholder !default;
+$--color-grey-2: $color-divider-primary !default;
+$--color-grey-3: $color-border-secondary !default;
+$--color-grey-4: $color-container-secondary!default;
+$--color-grey-5: $color-text-secondary !default;
 
 $--color-primary: $color-fill-primary !default;
 $--color-primary-hover: $color-fill-primary-hover !default;
@@ -41,7 +41,7 @@ $--color-nav: $color-fill-nav !default;
 $--color-nav-hover: $color-fill-nav-hover !default;
 $--color-nav-active: $color-fill-nav-active !default;
 
-$--color-primary-dark: $palette-blue-600 !default;
+$--color-primary-dark: $color-border-primary-hover !default;
 $--color-primary-light-1: mix(
   $--color-white,
   $--color-primary,
@@ -178,8 +178,8 @@ $--border-width-base: 1px !default;
 $--border-style-base: solid !default;
 $--border-color-base: $--border-secondary-hover !default;
 $--border-color-light: #e4e7ed !default;
-$--border-color-lighter: #ebeef5 !default;
-$--border-color-extra-light: #f2f6fc !default;
+$--border-color-lighter: $palette-gray-300 !default;
+$--border-color-extra-light: $color-info-primary-bg !default;
 $--border-color-hover: $--color-text-placeholder !default;
 $--border-base: $--border-width-base $--border-style-base $--border-secondary !default;
 $--border-radius-big: 12px !default;
@@ -271,7 +271,7 @@ $--checkbox-checked-input-border-color: $--color-primary !default;
 $--checkbox-checked-input-fill: $--color-primary !default;
 $--checkbox-checked-icon-color: $--fill-base !default;
 
-$--checkbox-input-border-color-hover: $--border-secondary-active !default;
+$--checkbox-input-border-color-hover: $--border-secondary-hover !default;
 $--checkbox-input-border-color-active: $--color-primary !default;
 $--checkbox-input-fill-active: $--color-info-bg !default;
 
@@ -316,16 +316,15 @@ $--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-white !default;
 
-$--radio-disabled-checked-primary-input-border-color: #b5d6f4 !default;
-$--radio-disabled-checked-primary-input-fill: #b5d6f4 !default;
+$--radio-disabled-checked-primary-input-border-color: $color-border-primary!default;
+$--radio-disabled-checked-primary-input-fill: $--color-white !default;
 
-$--radio-disabled-text-color: #c1c3c9 !default;
 $--radio-checked-text-color: $--color-text-primary !default;
 $--radio-checked-input-border-color: $--color-primary !default;
 $--radio-checked-input-fill: $--color-white !default;
 $--radio-checked-icon-color: $--color-primary !default;
 
-$--radio-input-border-color-hover: $--border-secondary-active !default;
+$--radio-input-border-color-hover: $--border-secondary-hover !default;
 $--radio-input-border-color-active: $--color-primary !default;
 $--radio-input-fill-active: $--color-info-bg !default;
 
@@ -393,7 +392,7 @@ $--alert-close-font-size: 16px !default;
 $--alert-close-customed-font-size: 12px !default;
 
 $--alert-success-color: $--color-success-active !default;
-$--alert-info-color: #f4f4f4 !default;
+// $--alert-info-color: #f4f4f4 !default;
 $--alert-tip-color: $--color-primary-light-9 !default;
 $--alert-warning-color: $--color-warning-lighter !default;
 $--alert-danger-color: $--color-danger-lighter !default;
@@ -420,7 +419,7 @@ $--msgbox-danger-color: $--color-danger !default;
 -------------------------- */
 $--message-shadow: $--box-shadow-base !default;
 $--message-min-width: 380px !default;
-$--message-background-color: #edf2fc !default;
+$--message-background-color: $--color-info-bg !default;
 $--message-padding: 10px 10px 10px 10px !default;
 $--message-content-color: $--color-text-regular !default;
 $--message-close-color: $--color-text-placeholder !default;
@@ -487,7 +486,7 @@ $--input-clear-hover-color: $--color-text-secondary !default;
 $--input-focus-border: $--color-primary !default;
 $--input-focus-fill: $--color-white !default;
 
-$--input-focus-error-box-shadow: 0px 0px 0px 2px rgba(218, 8, 8, 0.1) !default;
+$--input-focus-error-box-shadow: 0px 0px 0px 1px $--color-danger !default;
 
 $--input-disabled-fill: $--background-color-secondary !default;
 $--input-disabled-border: $--border-secondary !default;
@@ -548,7 +547,7 @@ $--group-title-width: 66px !default;
 /* Tab
 -------------------------- */
 $--tab-font-size: $--font-size-base !default;
-$--tab-border-line: 1px solid #e4e4e4 !default;
+// $--tab-border-line: 1px solid #e4e4e4 !default;
 $--tab-header-color-active: $--color-text-secondary !default;
 $--tab-header-color-hover: $--color-text-regular !default;
 $--tab-header-color: $--color-text-regular !default;
@@ -657,10 +656,10 @@ $--switch-on-color: $--color-primary !default;
 $--switch-off-color: $--border-color-base !default;
 $--switch-disabled-color: $--border-color-lighter !default;
 $--switch-disabled-text-color: $--color-text-placeholder !default;
-$--switch-disabled-border-color: #c1c3c9 !default;
-$--switch-disabled-background-color: #c1c3c9 !default;
-$--switch-disabled-checked-border-color: #b5d6f4 !default;
-$--switch-disabled-checked-background-color: #b5d6f4 !default;
+$--switch-disabled-border-color: $--border-color-base !default;
+$--switch-disabled-background-color: $--border-color-base !default;
+$--switch-disabled-checked-border-color: $--color-primary !default;
+$--switch-disabled-checked-background-color: $--color-primary !default;
 
 $--switch-font-size: 12px !default;
 $--switch-font-small-size: 12px !default;
@@ -736,7 +735,7 @@ $--tag-padding: 1px 5px !default;
 $--tag-padding-small: 1px 3px !default;
 $--tag-padding-mini: 0px 1px !default;
 $--tag-fill: $--color-info-tag-bg !default;
-$--tag-color: $--color-nav !default;
+$--tag-color: $--color-info-active !default;
 $--tag-border: $--color-info-tag-bg !default;
 $--tag-font-size: 14px !default;
 $--tag-line-height: 22px !default;
@@ -767,7 +766,7 @@ $--tag-beta-light: $--color-beta-tag-light !default;
 -------------------------- */
 $--tree-node-hover-color: $--background-color-secondary !default;
 $--tree-text-color: $--color-text-primary !default;
-$--tree-expand-icon-color: $--color-text-disabled !default;
+$--tree-expand-icon-color: $--color-text-secondary !default;
 
 /* Dropdown
 -------------------------- */
@@ -792,7 +791,7 @@ $--card-padding: 16px !default;
 /* Slider
 --------------------------*/
 $--slider-main-background-color: $--color-primary !default;
-$--slider-runway-background-color: $--border-color-base !default;
+$--slider-runway-background-color: $color-container-hover !default;
 $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
 $--slider-stop-background-color: $--border-color-base !default;
 $--slider-disable-color: $--color-text-placeholder !default;
@@ -829,14 +828,14 @@ $--rate-icon-color: $--color-text-placeholder !default;
 $--datepicker-color: $--color-text-primary !default;
 $--datepicker-off-color: $--color-text-placeholder !default;
 $--datepicker-header-color: $--color-text-primary !default;
-$--datepicker-icon-color: $--color-text-primary !default;
+$--datepicker-icon-color: $--color-text-secondary !default;
 $--datepicker-border-color: $--disabled-border-base !default;
-$--datepicker-inner-border-color: #e4e4e4 !default;
+$--datepicker-inner-border-color: $--border-divider-color !default;
 $--datepicker-inrange-color: $--border-color-extra-light !default;
 $--datepicker-inrange-hover-color: $--border-color-extra-light !default;
 $--datepicker-active-color: $--color-primary !default;
 $--datepicker-text-hover-color: $--color-primary !default;
-$--datepicker-cell-hover-color: #fff !default;
+$--datepicker-cell-hover-color: $--color-white !default;
 
 /* Loading
 --------------------------*/
@@ -868,7 +867,7 @@ $--carousel-indicator-out-color: $--border-color-hover !default;
 $--collapse-border-color: $--border-color-lighter !default;
 $--collapse-header-height: 48px !default;
 $--collapse-header-padding: 20px !default;
-$--collapse-header-fill: $--color-white !default;
+$--collapse-header-fill: $color-container-secondary !default;
 $--collapse-header-color: $--color-text-primary !default;
 $--collapse-header-size: 13px !default;
 $--collapse-content-fill: $--color-white !default;
@@ -891,9 +890,9 @@ $--transfer-filter-height: 24px !default;
 /* Avatar
 --------------------------*/
 /// color||Color|0
-$--avatar-font-color: #fff !default;
+$--avatar-font-color: $color-white !default;
 /// color||Color|0
-$--avatar-background-color: #c0c4cc !default;
+$--avatar-background-color: $--color-primary !default;
 /// fontSize||Font Size|1
 $--avatar-text-font-size: 14px !default;
 /// fontSize||Font Size|1
@@ -910,8 +909,8 @@ $--avatar-mini-size: 16px !default;
 
 /* Skeleton 
 --------------------------*/
-$--skeleton-color: #f2f2f2 !default;
-$--skeleton-to-color: #e6e6e6 !default;
+$--skeleton-color: $color-container-secondary !default;
+$--skeleton-to-color: $color-container-hover !default;
 
 /* Svg
 --------------- */
diff --git a/packages/theme-chalk/src/common/var_origin.scss b/packages/theme-chalk/src/common/var_origin.scss
new file mode 100644
index 0000000000..e450cdabfb
--- /dev/null
+++ b/packages/theme-chalk/src/common/var_origin.scss
@@ -0,0 +1,986 @@
+/* Element Chalk Variables */
+/* 这份文件是和组件库对齐之前的var.scss 暂时先保留一下 防止某些变量丢失 找不到  */
+@import 'basic/index.scss';
+
+/* Transition
+-------------------------- */
+$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--fade-linear-transition: opacity 200ms linear !default;
+$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--border-transition-base: border-color 0.2s
+  cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+
+// Menu
+$--color--menu-color: #0e1e28;
+$--color--menu-color1: #102d41;
+$--color--menu-color2: #0a2233;
+/* Colors
+-------------------------- */
+$--color-white: $palette-white !default;
+$--color-black: $palette-black !default;
+
+// $--color-grey-1: #bdbdbd !default;
+// $--color-grey-2: #eeeeee !default;
+// $--color-grey-3: #e2ecf1 !default;
+// $--color-grey-4: #f1f7fa !default;
+$--color-grey-1: $palette-gray-500 !default;
+$--color-grey-2: $palette-gray-200 !default;
+$--color-grey-3: $palette-gray-300 !default;
+$--color-grey-4: $palette-gray-100 !default;
+$--color-grey-5: $palette-gray-700 !default;
+
+$--color-primary: $color-fill-primary !default;
+$--color-primary-hover: $color-fill-primary-hover !default;
+$--color-primary-active: $color-fill-primary-active !default;
+$--color-secondary: $color-fill-secondary !default;
+$--color-secondary-hover: $color-fill-secondary-hover !default;
+$--color-secondary-active: $color-fill-secondary-active !default;
+$--color-nav: $color-fill-nav !default;
+$--color-nav-hover: $color-fill-nav-hover !default;
+$--color-nav-active: $color-fill-nav-active !default;
+
+$--color-primary-dark: $palette-blue-600 !default;
+$--color-primary-light-1: mix(
+  $--color-white,
+  $--color-primary,
+  10%
+) !default; /* #2294e1 */
+$--color-primary-light-2: mix(
+  $--color-white,
+  $--color-primary,
+  20%
+) !default; /* #3aa0e5 */
+$--color-primary-light-3: mix(
+  $--color-white,
+  $--color-primary,
+  30%
+) !default; /* #53ace8 */
+$--color-primary-light-4: mix(
+  $--color-white,
+  $--color-primary,
+  40%
+) !default; /* #6bb8eb */
+$--color-primary-light-5: mix(
+  $--color-white,
+  $--color-primary,
+  50%
+) !default; /* #84c4ef */
+$--color-primary-light-6: mix(
+  $--color-white,
+  $--color-primary,
+  60%
+) !default; /* #9dcff2 */
+$--color-primary-light-7: mix(
+  $--color-white,
+  $--color-primary,
+  70%
+) !default; /* #b5dbf5 */
+$--color-primary-light-8: mix(
+  $--color-white,
+  $--color-primary,
+  80%
+) !default; /* #cee7f8 */
+// $--color-primary-light-9:#e6f3fb;// mix($--color-white, $--color-primary, 89.7%) !default;
+$--color-primary-light-9: mix(
+  $--color-white,
+  $--color-primary,
+  89.7%
+) !default; /* #e6f3fc */
+
+// $--color-success: #4cb050 !default;
+// $--color-warning: #F7BA2A !default;
+// $--color-danger: #e73371 !default;
+// $--color-info: #989898 !default;
+$--color-tip: $--color-primary !default;
+
+$--color-success: $color-success !default;
+$--color-success-hover: $color-success-hover !default;
+$--color-success-active: $color-success-active !default;
+$--color-success-bg: $color-success-bg !default;
+$--color-success-tag-bg: $color-success-tag-bg !default;
+$--color-danger: $color-danger !default;
+$--color-danger-hover: $color-danger-hover !default;
+$--color-danger-active: $color-danger-active !default;
+$--color-danger-bg: $color-danger-bg !default;
+$--color-danger-tag-bg: $color-danger-tag-bg !default;
+$--color-warning: $color-warning !default;
+$--color-warning-hover: $color-warning-hover !default;
+$--color-warning-active: $color-warning-active !default;
+$--color-warning-bg: $color-warning-bg !default;
+$--color-warning-tag-bg: $color-warning-tag-bg !default;
+$--color-info: $color-info-primary !default;
+$--color-info-hover: $color-info-primary-hover !default;
+$--color-info-active: $color-info-primary-active !default;
+$--color-info-bg: $color-info-primary-bg !default;
+$--color-info-tag-bg: $color-info-primary-tag-bg !default;
+$--color-info-secondary: $color-info-secondary !default;
+$--color-info-secondary-hover: $color-info-secondary-hover !default;
+$--color-info-secondary-active: $color-info-secondary-active !default;
+$--color-info-secondary-bg: $color-info-secondary-bg !default;
+$--color-info-secondary-tag-bg: $color-info-secondary-tag-bg !default;
+$--color-beta: $palette-purple-500 !default;
+$--color-beta-hover: $palette-purple-700 !default;
+$--color-beta-tag-bg: $palette-purple-200 !default;
+$--color-beta-tag-light: $palette-purple-100 !default;
+
+$--color-success-border: $palette-green-200 !default;
+
+$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
+$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
+$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
+$--color-info-light: $color-info-primary-bg !default;
+
+$--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: $color-info-primary-bg !default;
+$--color-tip-lighter: $color-success-bg !default;
+
+// $--color-text-primary: #252525 !default;
+// $--color-text-regular: #5c5c5c !default;
+// $--color-text-secondary: #b0bec5 !default;
+// $--color-text-placeholder: #b6b6b6 !default;
+// $--color-text-disabled: #989898 !default;
+$--color-text-primary: $color-text-primary !default;
+$--color-text-regular: $color-text-secondary !default;
+$--color-text-secondary: $color-text-secondary !default;
+$--color-text-placeholder: $color-text-placeholder !default;
+$--color-text-disabled: $color-text-tertiary !default;
+
+/* Link
+-------------------------- */
+$--link-color: $--color-primary !default;
+$--link-hover-color: $--color-primary-hover !default;
+$--link-active-color: $--color-primary-active !default;
+
+/* Background
+-------------------------- */
+$--background-color-white: $palette-white !default;
+$--background-color-secondary: $color-container-secondary !default;
+$--background-color-hover: $color-container-hover !default;
+$--background-color-active: $color-container-active !default;
+
+$--background-color-base: $color-utility-bg1 !default;
+$--background-color-base-1: #fafafa !default;
+$--background-color-light: #f9fbfc !default;
+$--background-color-regular: #cde7f8 !default;
+
+/* Border
+-------------------------- */
+$--border-divider-color: $color-divider-primary !default;
+$--border-secondary: $color-divider-secondary !default;
+$--border-secondary-hover: $color-border-secondary-hover !default;
+$--border-secondary-active: $color-border-secondary-active !default;
+
+$--border-width-base: 1px !default;
+$--border-style-base: solid !default;
+$--border-color-base: $--border-secondary-hover !default;
+$--border-color-light: #e4e7ed !default;
+$--border-color-lighter: #ebeef5 !default;
+$--border-color-extra-light: #f2f6fc !default;
+$--border-color-hover: $--color-text-placeholder !default;
+$--border-base: $--border-width-base $--border-style-base $--border-secondary !default;
+$--border-radius-big: 12px !default;
+$--border-radius-base: 6px !default;
+$--border-radius-small: 4px !default;
+$--border-radius-mini: 2px !default;
+$--border-radius-circle: 100% !default;
+$--border-split-color: #ddd !default;
+
+/* Box-shadow
+-------------------------- */
+$--box-shadow-base: 0 2px 4px 0 #f4f4f4 !default;
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
+
+/* Fill
+-------------------------- */
+$--fill-base: $--color-white !default;
+
+/* Font
+-------------------------- */
+$--font-path: 'fonts' !default;
+$--font-path-new: 'fonts-new' !default;
+$--font-size-base: 14px !default;
+$--font-size-small: 13px !default;
+$--font-size-extra-small: 12px !default;
+$--font-size-extra-large: 20px !default;
+$--font-size-medium: 16px !default;
+$--font-size-large: 18px !default;
+$--font-color-disabled-base: #bbb !default;
+$--font-weight-primary: bold !default;
+$--font-weight-medium: 600 !default;
+$--font-line-height-primary: 24px !default;
+
+$--font-size-page: 26px !default;
+$--font-size-module: 20px !default;
+$--font-size-paragraph: 16px !default;
+$--font-size-primary: 14px !default;
+$--font-size-small: 12px !default;
+
+/* Size
+-------------------------- */
+$--size-base: 14px !default;
+
+/* z-index
+-------------------------- */
+$--index-normal: 1 !default;
+$--index-top: 1000 !default;
+$--index-popper: 2000 !default;
+
+/* Disable base
+-------------------------- */
+$--disabled-fill-base: $--background-color-hover !default;
+$--disabled-color-base: $--color-text-disabled !default;
+$--disabled-border-base: $--border-secondary !default;
+
+/* Icon
+-------------------------- */
+$--icon-color: #5c5c5c !default;
+$--icon-color-base: $--color-info !default;
+
+/* Checkbox
+-------------------------- */
+$--checkbox-font-size: 14px !default;
+$--checkbox-font-weight: 400 !default;
+$--checkbox-color: $--color-text-primary !default;
+$--checkbox-input-height: 14px !default;
+$--checkbox-input-width: 14px !default;
+$--checkbox-input-border-radius: $--border-radius-small !default;
+$--checkbox-input-fill: $--color-white !default;
+$--checkbox-input-border: $--border-base !default;
+$--checkbox-input-border-color: $--border-color-base !default;
+$--checkbox-icon-color: $--color-white !default;
+
+$--checkbox-disabled-input-border-color: $--disabled-border-base !default;
+$--checkbox-disabled-input-fill: $--disabled-fill-base !default;
+$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
+
+$--checkbox-disabled-checked-input-fill: $--disabled-fill-base !default;
+$--checkbox-disabled-checked-input-border-color: $--disabled-border-base !default;
+$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
+
+$--checkbox-disabled-checked-primary-input-border-color: #b5d6f4 !default;
+$--checkbox-disabled-checked-primary-input-fill: #b5d6f4 !default;
+
+$--checkbox-disabled-text-color: #c1c3c9 !default;
+$--checkbox-checked-text-color: $--color-text-primary !default;
+$--checkbox-checked-input-border-color: $--color-primary !default;
+$--checkbox-checked-input-fill: $--color-primary !default;
+$--checkbox-checked-icon-color: $--fill-base !default;
+
+$--checkbox-input-border-color-hover: $--border-secondary-active !default;
+$--checkbox-input-border-color-active: $--color-primary !default;
+$--checkbox-input-fill-active: $--color-info-bg !default;
+
+$--checkbox-bordered-height: 40px !default;
+$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
+$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
+$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
+$--checkbox-bordered-medium-input-height: 14px !default;
+$--checkbox-bordered-medium-input-width: 14px !default;
+$--checkbox-bordered-medium-height: 36px !default;
+$--checkbox-bordered-small-input-height: 12px !default;
+$--checkbox-bordered-small-input-width: 12px !default;
+$--checkbox-bordered-small-height: 32px !default;
+$--checkbox-bordered-mini-input-height: 12px !default;
+$--checkbox-bordered-mini-input-width: 12px !default;
+$--checkbox-bordered-mini-height: 28px !default;
+
+$--checkbox-button-font-size: $--font-size-base !default;
+$--checkbox-button-checked-fill: $--color-primary !default;
+$--checkbox-button-checked-color: $--color-white !default;
+$--checkbox-button-checked-border-color: $--color-primary !default;
+
+/* Radio
+-------------------------- */
+$--radio-font-size: 14px !default;
+$--radio-font-weight: 400 !default;
+$--radio-color: $--color-text-primary !default;
+$--radio-input-height: 14px !default;
+$--radio-input-width: 14px !default;
+$--radio-input-border-radius: $--border-radius-circle !default;
+$--radio-input-fill: $--color-white !default;
+$--radio-input-border: $--border-base !default;
+$--radio-input-border-color: $--border-color-base !default;
+$--radio-icon-color: $--color-white !default;
+
+$--radio-disabled-input-border-color: $--disabled-border-base !default;
+$--radio-disabled-input-fill: $--disabled-fill-base !default;
+$--radio-disabled-icon-color: $--disabled-fill-base !default;
+
+$--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-white !default;
+
+$--radio-disabled-checked-primary-input-border-color: #b5d6f4 !default;
+$--radio-disabled-checked-primary-input-fill: #b5d6f4 !default;
+
+$--radio-disabled-text-color: #c1c3c9 !default;
+$--radio-checked-text-color: $--color-text-primary !default;
+$--radio-checked-input-border-color: $--color-primary !default;
+$--radio-checked-input-fill: $--color-white !default;
+$--radio-checked-icon-color: $--color-primary !default;
+
+$--radio-input-border-color-hover: $--border-secondary-active !default;
+$--radio-input-border-color-active: $--color-primary !default;
+$--radio-input-fill-active: $--color-info-bg !default;
+
+$--radio-bordered-height: 40px !default;
+$--radio-bordered-padding: 9px 10px 9px 10px !default;
+$--radio-bordered-medium-padding: 5px 10px 5px 10px !default;
+$--radio-bordered-small-padding: 4px 8px 4px 8px !default;
+$--radio-bordered-mini-padding: 3px 6px 3px 6px !default;
+$--radio-bordered-medium-input-height: 14px !default;
+$--radio-bordered-medium-input-width: 14px !default;
+$--radio-bordered-medium-height: 36px !default;
+$--radio-bordered-small-input-height: 12px !default;
+$--radio-bordered-small-input-width: 12px !default;
+$--radio-bordered-small-height: 32px !default;
+$--radio-bordered-mini-input-height: 12px !default;
+$--radio-bordered-mini-input-width: 12px !default;
+$--radio-bordered-mini-height: 28px !default;
+
+$--radio-button-font-size: $--font-size-base !default;
+$--radio-button-checked-fill: $--color-primary !default;
+$--radio-button-checked-color: $--color-white !default;
+$--radio-button-checked-border-color: $--color-primary !default;
+$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
+
+/* Select
+-------------------------- */
+$--select-border-color-hover: $--border-color-hover !default;
+$--select-disabled-border: $--disabled-border-base !default;
+$--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: #5c5c5c !default;
+$--select-input-focus-background: $--color-primary !default;
+$--select-input-font-size: 14px !default;
+
+$--select-option-color: $--color-text-primary !default;
+$--select-option-disabled-color: $--color-text-placeholder !default;
+$--select-option-disabled-background: $--color-white !default;
+$--select-option-height: 34px !default;
+$--select-option-hover-background: $--background-color-secondary !default;
+$--select-option-selected: $--color-primary !default;
+$--select-option-selected-background: $--background-color-hover !default;
+$--select-option-selected-hover: $--background-color-hover !default;
+
+$--select-group-color: $--color-text-disabled !default;
+$--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;
+$--select-dropdown-max-height: 274px !default;
+$--select-dropdown-padding: 8px 0 !default;
+$--select-dropdown-empty-padding: 10px 0 !default;
+$--select-dropdown-border: solid 1px $--border-color-light !default;
+
+/* Alert
+-------------------------- */
+$--alert-padding: 10px 16px !default;
+$--alert-border-radius: $--border-radius-mini !default;
+$--alert-title-font-size: 12px !default;
+$--alert-description-font-size: 12px !default;
+$--alert-close-font-size: 16px !default;
+$--alert-close-customed-font-size: 12px !default;
+
+$--alert-success-color: $--color-success-active !default;
+$--alert-info-color: #f4f4f4 !default;
+$--alert-tip-color: $--color-primary-light-9 !default;
+$--alert-warning-color: $--color-warning-lighter !default;
+$--alert-danger-color: $--color-danger-lighter !default;
+
+$--alert-icon-size: 16px !default;
+$--alert-icon-large-size: 28px !default;
+
+/* Message Box
+-------------------------- */
+$--msgbox-width: 400px !default;
+$--msgbox-border-radius: $--border-radius-big !default;
+$--msgbox-font-size: $--font-size-medium !default;
+$--msgbox-content-font-size: $--font-size-base !default;
+$--msgbox-content-color: $--color-text-regular !default;
+$--msgbox-error-font-size: 12px !default;
+$--msgbox-padding-primary: 24px !default;
+
+$--msgbox-success-color: $--color-success !default;
+$--msgbox-info-color: $--color-info !default;
+$--msgbox-warning-color: $--color-warning !default;
+$--msgbox-danger-color: $--color-danger !default;
+
+/* Message
+-------------------------- */
+$--message-shadow: $--box-shadow-base !default;
+$--message-min-width: 380px !default;
+$--message-background-color: #edf2fc !default;
+$--message-padding: 10px 10px 10px 10px !default;
+$--message-content-color: $--color-text-regular !default;
+$--message-close-color: $--color-text-placeholder !default;
+$--message-close-size: 16px !default;
+$--message-close-hover-color: $--color-text-secondary !default;
+
+$--message-success-color: $--color-success-active !default;
+$--message-info-color: $--color-nav !default;
+$--message-warning-color: $--color-warning-active !default;
+$--message-danger-color: $--color-danger-active !default;
+
+$--message-info-close-color: $--color-info-secondary-active !default;
+$--message-info-close-hover-color: $--color-info-secondary-hover !default;
+$--message-success-close-color: $--color-success-active !default;
+$--message-success-close-hover-color: $--color-success-hover !default;
+$--message-warning-close-color: $--color-warning-active !default;
+$--message-warning-close-hover-color: $--color-warning-hover !default;
+$--message-error-close-color: $--color-danger-active !default;
+$--message-error-close-hover-color: $--color-danger-hover !default;
+
+/* Notification
+-------------------------- */
+$--notification-width: 330px !default;
+$--notification-padding: 14px 26px 14px 13px !default;
+$--notification-radius: 4px !default;
+$--notification-shadow: $--box-shadow-light !default;
+$--notification-border-color: $--border-color-lighter !default;
+$--notification-icon-size: 24px !default;
+$--notification-close-font-size: $--message-close-size !default;
+$--notification-group-margin: 13px !default;
+$--notification-font-size: $--font-size-base !default;
+$--notification-color: $--color-text-regular !default;
+$--notification-title-font-size: 16px !default;
+$--notification-title-color: $--color-text-primary !default;
+
+$--notification-close-color: $--color-text-secondary !default;
+$--notification-close-hover-color: $--color-text-regular !default;
+
+$--notification-success-color: $--color-success !default;
+$--notification-info-color: $--color-info !default;
+$--notification-warning-color: $--color-warning !default;
+$--notification-danger-color: $--color-danger !default;
+
+/* Input
+-------------------------- */
+$--input-font-size: $--font-size-base !default;
+$--input-color: $--color-text-primary !default;
+$--input-width: 140px !default;
+$--input-height: 38px !default;
+$--input-border: $--border-base !default;
+$--input-border-color: $--border-secondary !default;
+$--input-border-radius: $--border-radius-base !default;
+$--input-border-color-hover: $--border-secondary-hover !default;
+$--input-fill: $--color-white !default;
+$--input-fill-disabled: $--disabled-fill-base !default;
+$--input-color-disabled: $--font-color-disabled-base !default;
+$--input-icon-color: $--color-text-placeholder !default;
+$--input-placeholder-color: $--color-text-placeholder !default;
+$--input-max-width: 314px !default;
+
+$--input-hover-border: $--border-secondary-hover !default;
+$--input-clear-hover-color: $--color-text-secondary !default;
+
+$--input-focus-border: $--color-primary !default;
+$--input-focus-fill: $--color-white !default;
+
+$--input-focus-error-box-shadow: 0px 0px 0px 2px rgba(218, 8, 8, 0.1) !default;
+
+$--input-disabled-fill: $--background-color-secondary !default;
+$--input-disabled-border: $--border-secondary !default;
+$--input-disabled-color: $--border-secondary-active !default;
+$--input-disabled-placeholder-color: $--color-text-placeholder !default;
+
+$--input-medium-font-size: 14px !default;
+$--input-medium-height: 34px !default;
+
+$--input-small-font-size: 12px !default;
+$--input-small-height: 28px !default;
+
+$--input-mini-font-size: 12px !default;
+$--input-mini-height: 24px !default;
+
+/* Cascader
+-------------------------- */
+$--cascader-menu-font-color: $--color-text-regular !default;
+$--cascader-menu-selected-font-color: $--color-primary !default;
+$--cascader-node-background-hover: $--background-color-base !default;
+$--cascader-node-color-disabled: $--color-text-placeholder !default;
+$--cascader-color-empty: $--color-text-placeholder !default;
+$--cascader-tag-background: #f0f2f5;
+
+$--cascader-menu-fill: $--fill-base !default;
+$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-radius: $--border-radius-base !default;
+$--cascader-menu-border: $--border-base !default;
+$--cascader-menu-border-color: $--border-color-base !default;
+$--cascader-menu-border-width: $--border-width-base !default;
+$--cascader-menu-color: $--color-text-regular !default;
+$--cascader-menu-option-color-active: $--color-text-secondary !default;
+$--cascader-menu-option-fill-active: rgba(
+  $--color-text-secondary,
+  0.12
+) !default;
+$--cascader-menu-option-color-hover: $--color-text-regular !default;
+$--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: #5c5c5c !default;
+$--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;
+$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14),
+  1px 0 2px rgba($--color-black, 0.14) !default;
+
+/* Group
+-------------------------- */
+$--group-option-flex: 0 0 (1/5) * 100% !default;
+$--group-option-offset-bottom: 12px !default;
+$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
+$--group-title-color: $--color-black !default;
+$--group-title-font-size: $--font-size-base !default;
+$--group-title-width: 66px !default;
+
+/* Tab
+-------------------------- */
+$--tab-font-size: $--font-size-base !default;
+$--tab-border-line: 1px solid #e4e4e4 !default;
+$--tab-header-color-active: $--color-text-secondary !default;
+$--tab-header-color-hover: $--color-text-regular !default;
+$--tab-header-color: $--color-text-regular !default;
+$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
+$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
+$--tab-vertical-header-width: 90px !default;
+$--tab-vertical-header-count-color: $--color-white !default;
+$--tab-vertical-header-count-fill: $--color-text-secondary !default;
+
+/* Button
+-------------------------- */
+// $--button-hover-color: #4DA9E7!default;
+$--button-hover-color: $--color-primary-hover !default;
+$--button-font-size: 14px !default;
+$--button-font-weight: $--font-weight-primary !default;
+$--button-border-radius: $--border-radius-base !default;
+$--button-padding-vertical: 5px !default;
+$--button-padding-horizontal: 9px !default;
+
+$--button-big-padding-vertical: 7px !default;
+$--button-big-padding-horizontal: 11px !default;
+$--button-big-icon-padding: 7px 8px !default;
+$--button-big-icon-mini-padding: 3px 4px !default;
+
+$--button-medium-font-size: 14px !default;
+$--button-medium-line-height: 22px !default;
+$--button-medium-border-radius: $--border-radius-base !default;
+$--button-medium-padding-vertical: 5px !default;
+$--button-medium-padding-horizontal: 9px !default;
+$--button-medium-icon-padding: 5px 6px !default;
+$--button-medium-icon-mini-padding: 2px 3px !default;
+
+$--button-small-font-size: 12px !default;
+$--button-small-line-height: 16px !default;
+$--button-small-border-radius: #{$--border-radius-base} !default;
+$--button-small-padding-vertical: 5px !default;
+$--button-small-padding-horizontal: 7px !default;
+$--button-small-icon-padding: 5px 6px !default;
+$--button-small-icon-mini-padding: 2px 3px !default;
+
+$--button-mini-font-size: 12px !default;
+$--button-mini-line-height: 16px !default;
+$--button-mini-border-radius: #{$--border-radius-base} !default;
+$--button-mini-padding-vertical: 2px !default;
+$--button-mini-padding-horizontal: 6px !default;
+$--button-mini-icon-padding: 2px 3px !default;
+$--button-mini-icon-mini-padding: 1px 2px !default;
+
+$--button-default-color: $--color-text-regular !default;
+$--button-default-fill: $--color-secondary !default;
+$--button-default-border: $--color-secondary !default;
+$--button-default-hover-color: $--color-text-regular !default;
+$--button-default-hover-fill: $--color-secondary-hover !default;
+$--button-default-hover-border: $--color-secondary-hover !default;
+$--button-default-active-color: $--color-text-regular !default;
+$--button-default-active-fill: $--color-secondary-active !default;
+$--button-default-active-border: $--color-secondary-active !default;
+$--button-default-plain-color: $--color-text-regular !default;
+$--button-default-plain-fill: transparent !default;
+$--button-default-plain-border: $--color-secondary-hover !default;
+$--button-default-plain-hover-border: $--color-secondary-active !default;
+$--button-default-plain-active-border: $--color-text-placeholder !default;
+
+$--button-disabled-color: $--color-text-disabled !default;
+$--button-disabled-fill: $--background-color-base !default;
+$--button-disabled-border: $--border-color-base !default;
+
+$--button-primary-border: $--color-primary !default;
+$--button-primary-color: $--color-white !default;
+$--button-primary-fill: $--color-primary !default;
+
+$--button-success-border: $--color-success !default;
+$--button-success-color: $--color-white !default;
+$--button-success-fill: $--color-success !default;
+
+$--button-warning-border: $--color-warning !default;
+$--button-warning-color: $--color-white !default;
+$--button-warning-fill: $--color-warning !default;
+
+$--button-danger-border: $--color-danger !default;
+$--button-danger-color: $--color-white !default;
+$--button-danger-fill: $--color-danger !default;
+$--button-danger-hover-color: $--color-text-primary !default;
+$--button-danger-hover-fill: $--color-danger-hover !default;
+$--button-danger-hover-border: $--color-danger-hover !default;
+$--button-danger-active-color: $--color-text-primary !default;
+$--button-danger-active-fill: $--color-danger-active !default;
+$--button-danger-active-border: $--color-danger-active !default;
+
+$--button-info-border: $--color-info !default;
+$--button-info-color: $--color-white !default;
+$--button-info-fill: $--color-info !default;
+
+$--button-hover-tint-percent: 20% !default;
+$--button-active-shade-percent: 10% !default;
+
+$--button-icon-btn: $--color-primary !default;
+
+/* cascader
+-------------------------- */
+$--cascader-height: 200px !default;
+
+/* Switch
+-------------------------- */
+$--switch-on-color: $--color-primary !default;
+$--switch-off-color: $--border-color-base !default;
+$--switch-disabled-color: $--border-color-lighter !default;
+$--switch-disabled-text-color: $--color-text-placeholder !default;
+$--switch-disabled-border-color: #c1c3c9 !default;
+$--switch-disabled-background-color: #c1c3c9 !default;
+$--switch-disabled-checked-border-color: #b5d6f4 !default;
+$--switch-disabled-checked-background-color: #b5d6f4 !default;
+
+$--switch-font-size: 12px !default;
+$--switch-font-small-size: 12px !default;
+$--switch-core-border-radius: 8px !default;
+$--switch-width: 48px !default;
+$--switch-small-width: 28px !default;
+$--switch-height: 22px !default;
+$--switch-small-height: 16px !default;
+$--switch-button-size: 16px !default;
+$--switch-button-small-size: 12px !default;
+/* Dialog
+-------------------------- */
+$--dialog-background-color: $--color-primary-light-4 !default;
+$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
+$--dialog-close-hover-color: $--color-primary !default;
+$--dialog-title-font-size: 16px !default;
+$--dialog-font-size: 14px !default;
+$--dialog-line-height: 22px !default;
+$--dialog-padding-primary: 24px !default;
+
+/* Table
+-------------------------- */
+$--table-border: 1px solid $--border-divider-color !default;
+$--table-text-color: $--color-text-primary !default;
+$--table-header-color: $--color-text-regular !default;
+$--table-row-hover-background: $--background-color-secondary !default;
+$--table-current-row-background: $--color-info-bg !default;
+// $--table-header-background: $--background-color-regular !default;
+$--table-header-background: $--color-white !default;
+$--table-header-nested-background: $--color-white; // temp  need verify
+$--table-footer-background: $--color-text-placeholder !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
+
+/* Pagination
+-------------------------- */
+$--pagination-font-size: 12px !default;
+$--pagination-fill: $--color-white !default;
+$--pagination-color: $--color-text-primary !default;
+$--pagination-border-radius: 3px !default;
+$--pagination-button-color: $--color-text-primary !default;
+$--pagination-button-width: 30px !default;
+$--pagination-button-height: 28px !default;
+$--pagination-button-disabled-color: $--color-text-placeholder !default;
+$--pagination-button-disabled-fill: $--color-white !default;
+$--pagination-hover-fill: $--color-primary !default;
+$--pagination-hover-color: $--color-white !default;
+
+/* Popover
+-------------------------- */
+$--popover-fill: $--color-white !default;
+$--popover-font-size: 14px !default;
+$--popover-border-color: $--border-color-lighter !default;
+$--popover-arrow-size: 6px !default;
+$--popover-padding: 16px !default;
+$--popover-padding-large: 18px 20px !default;
+$--popover-title-font-size: 13px !default;
+$--popover-title-color: $--color-text-primary !default;
+
+/* Tooltip
+-------------------------- */
+$--tooltip-fill: $--color-black !default;
+$--tooltip-color: $--color-white !default;
+$--tooltip-font-size: 14px !default;
+$--tooltip-small-font-size: 12px !default;
+$--tooltip-border-color: $--color-black !default;
+$--tooltip-arrow-size: 6px !default;
+$--tooltip-padding: 5px 10px !default;
+$--tooltip-small-padding: 4px 6px !default;
+
+/* Tag
+-------------------------- */
+$--tag-padding: 1px 5px !default;
+$--tag-padding-small: 1px 3px !default;
+$--tag-padding-mini: 0px 1px !default;
+$--tag-fill: $--color-info-tag-bg !default;
+$--tag-color: $--color-nav !default;
+$--tag-border: $--color-info-tag-bg !default;
+$--tag-font-size: 14px !default;
+$--tag-line-height: 22px !default;
+$--tag-border-radius: 4px !default;
+
+$--tag-info-fill: $--color-info-secondary-tag-bg !default;
+$--tag-info-border: $--color-info-secondary-tag-bg !default;
+$--tag-info-color: $--color-info-secondary-active !default;
+
+$--tag-success-fill: $--color-success-tag-bg !default;
+$--tag-success-border: $--color-success-tag-bg !default;
+$--tag-success-color: $--color-success-active !default;
+
+$--tag-warning-fill: $--color-warning-tag-bg !default;
+$--tag-warning-border: $--color-warning-tag-bg !default;
+$--tag-warning-color: $--color-warning-active !default;
+
+$--tag-danger-fill: $--color-danger-tag-bg !default;
+$--tag-danger-border: $--color-danger-tag-bg !default;
+$--tag-danger-color: $--color-danger-active !default;
+
+$--tag-beta-fill: $--color-beta-tag-bg !default;
+$--tag-beta-border: $--color-beta-tag-bg !default;
+$--tag-beta-color: $--color-beta-hover !default;
+$--tag-beta-light: $--color-beta-tag-light !default;
+
+/* Tree
+-------------------------- */
+$--tree-node-hover-color: $--background-color-secondary !default;
+$--tree-text-color: $--color-text-primary !default;
+$--tree-expand-icon-color: $--color-text-disabled !default;
+
+/* Dropdown
+-------------------------- */
+$--dropdown-menu-box-shadow: $--box-shadow-light !default;
+$--dropdown-menuItem-hover-fill: $--background-color-secondary !default;
+$--dropdown-menuItem-hover-color: $--link-color !default;
+
+/* Badge
+-------------------------- */
+$--badge-fill: $--color-danger !default;
+$--badge-radius: 10px !default;
+$--badge-font-size: 12px !default;
+$--badge-padding: 6px !default;
+$--badge-size: 18px !default;
+
+/* Card
+--------------------------*/
+$--card-border-color: $--border-color-base !default;
+$--card-border-radius: 6px !default;
+$--card-padding: 16px !default;
+
+/* Slider
+--------------------------*/
+$--slider-main-background-color: $--color-primary !default;
+$--slider-runway-background-color: $--border-color-base !default;
+$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
+$--slider-stop-background-color: $--border-color-base !default;
+$--slider-disable-color: $--color-text-placeholder !default;
+
+$--slider-margin: 16px 0 !default;
+$--slider-border-radius: 3px !default;
+$--slider-height: 6px !default;
+$--slider-button-size: 8px !default;
+$--slider-button-wrapper-size: 36px !default;
+$--slider-button-wrapper-offset: -15px !default;
+
+/* Steps
+--------------------------*/
+$--steps-border-color: $--disabled-border-base !default;
+$--steps-border-radius: 4px !default;
+$--steps-padding: 20px !default;
+
+/* Menu
+--------------------------*/
+$--menu-item-color: $--color-text-primary !default;
+$--menu-item-fill: $--color-white !default;
+$--menu-item-hover-fill: $--color-primary-light-9 !default;
+
+/* Rate
+--------------------------*/
+$--rate-height: 20px !default;
+$--rate-font-size: $--font-size-base !default;
+$--rate-icon-size: 18px !default;
+$--rate-icon-margin: 6px !default;
+$--rate-icon-color: $--color-text-placeholder !default;
+
+/* DatePicker
+--------------------------*/
+$--datepicker-color: $--color-text-primary !default;
+$--datepicker-off-color: $--color-text-placeholder !default;
+$--datepicker-header-color: $--color-text-primary !default;
+$--datepicker-icon-color: $--color-text-primary !default;
+$--datepicker-border-color: $--disabled-border-base !default;
+$--datepicker-inner-border-color: #e4e4e4 !default;
+$--datepicker-inrange-color: $--border-color-extra-light !default;
+$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
+$--datepicker-active-color: $--color-primary !default;
+$--datepicker-text-hover-color: $--color-primary !default;
+$--datepicker-cell-hover-color: #fff !default;
+
+/* Loading
+--------------------------*/
+$--loading-spinner-size: 24px !default;
+$--loading-fullscreen-spinner-size: 32px !default;
+
+/* Scrollbar
+--------------------------*/
+$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
+$--scrollbar-hover-background-color: rgba(
+  $--color-text-secondary,
+  0.5
+) !default;
+
+/* Carousel
+--------------------------*/
+$--carousel-arrow-font-size: 12px !default;
+$--carousel-arrow-size: 36px !default;
+$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
+$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
+$--carousel-indicator-width: 30px !default;
+$--carousel-indicator-height: 2px !default;
+$--carousel-indicator-padding-horizontal: 4px !default;
+$--carousel-indicator-padding-vertical: 12px !default;
+$--carousel-indicator-out-color: $--border-color-hover !default;
+
+/* Collapse
+--------------------------*/
+$--collapse-border-color: $--border-color-lighter !default;
+$--collapse-header-height: 48px !default;
+$--collapse-header-padding: 20px !default;
+$--collapse-header-fill: $--color-white !default;
+$--collapse-header-color: $--color-text-primary !default;
+$--collapse-header-size: 13px !default;
+$--collapse-content-fill: $--color-white !default;
+$--collapse-content-size: 13px !default;
+$--collapse-content-color: $--color-text-primary !default;
+
+/* Transfer
+--------------------------*/
+$--transfer-border-color: $--border-divider-color !default;
+$--transfer-border-radius: $--border-radius-base !default;
+$--transfer-panel-width: 200px !default;
+$--transfer-panel-header-height: 30px !default;
+$--transfer-panel-header-background: $--background-color-base !default;
+$--transfer-panel-footer-height: 44px !default;
+$--transfer-panel-body-height: 256px !default;
+$--transfer-item-height: 32px !default;
+$--transfer-item-hover-background: $--color-text-secondary !default;
+$--transfer-filter-height: 24px !default;
+
+/* Avatar
+--------------------------*/
+/// color||Color|0
+$--avatar-font-color: #fff !default;
+/// color||Color|0
+$--avatar-background-color: #c0c4cc !default;
+/// fontSize||Font Size|1
+$--avatar-text-font-size: 14px !default;
+/// fontSize||Font Size|1
+$--avatar-icon-font-size: 18px !default;
+/// borderRadius||Border|2
+$--avatar-border-radius: $--border-radius-base !default;
+/// size|1|Avatar Size|3
+$--avatar-large-size: 40px !default;
+/// size|1|Avatar Size|3
+$--avatar-medium-size: 32px !default;
+/// size|1|Avatar Size|3
+$--avatar-small-size: 24px !default;
+$--avatar-mini-size: 16px !default;
+
+/* Skeleton 
+--------------------------*/
+$--skeleton-color: #f2f2f2 !default;
+$--skeleton-to-color: #e6e6e6 !default;
+
+/* Svg
+--------------- */
+$--svg-monochrome-grey: #dcdde0 !default;
+
+/* Header
+  --------------------------*/
+$--header-padding: 0 20px !default;
+
+/* Footer
+--------------------------*/
+$--footer-padding: 0 20px !default;
+
+/* Main
+--------------------------*/
+$--main-padding: 20px !default;
+
+/* Break-point
+--------------------------*/
+$--sm: 768px !default;
+$--md: 992px !default;
+$--lg: 1200px !default;
+$--xl: 1920px !default;
+
+$--breakpoints: (
+  'xs': (
+    max-width: $--sm,
+  ),
+  'sm': (
+    min-width: $--sm,
+  ),
+  'md': (
+    min-width: $--md,
+  ),
+  'lg': (
+    min-width: $--lg,
+  ),
+  'xl': (
+    min-width: $--xl,
+  ),
+);
+
+$--breakpoints-spec: (
+  'xs-only': (
+    max-width: $--sm - 1,
+  ),
+  'sm-and-up': (
+    min-width: $--sm,
+  ),
+  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md} - 1)',
+  'sm-and-down': (
+    max-width: $--md - 1,
+  ),
+  'md-and-up': (
+    min-width: $--md,
+  ),
+  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg } - 1)',
+  'md-and-down': (
+    max-width: $--lg - 1,
+  ),
+  'lg-and-up': (
+    min-width: $--lg,
+  ),
+  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)',
+  'lg-and-down': (
+    max-width: $--xl - 1,
+  ),
+  'xl-only': (
+    min-width: $--xl,
+  ),
+);
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 66e37abb95..27b41cb165 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -130,6 +130,6 @@
     padding: 5px;
     color: $--datepicker-header-color;
     font-weight: 400;
-    border-bottom: solid 1px $--border-color-lighter;
+    border-bottom: solid 1px $--datepicker-inner-border-color;
   }
 }
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index f73fe8c3fa..1627021cde 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -34,8 +34,7 @@
     &:active {
       outline: none;
       border-color: $--input-focus-border;
-      // TODO: 颜色值
-      box-shadow: 0px 0px 0px 2px rgba(8, 117, 218, 0.1);
+      box-shadow: 0px 0px 0px 1px $--input-focus-border;
     }
   }
 
@@ -50,6 +49,12 @@
       &::placeholder {
         color: $--input-disabled-placeholder-color;
       }
+      &:focus,
+      &:active {
+        outline: none;
+        border-color: $--input-disabled-border;
+        box-shadow: none;
+      }
     }
   }
 }
@@ -103,8 +108,7 @@
     &:active {
       outline: none;
       border-color: $--input-focus-border;
-      // TODO: 颜色值
-      box-shadow: 0px 0px 0px 2px rgba(8, 117, 218, 0.1);
+      box-shadow: 0px 0px 0px 1px $--input-focus-border;
     }
   }
 
@@ -158,8 +162,7 @@
     .el-input__inner {
       outline: none;
       border-color: $--input-focus-border;
-      // TODO: 颜色值
-      box-shadow: 0px 0px 0px 2px rgba(8, 117, 218, 0.1);
+      box-shadow: 0px 0px 0px 1px $--input-focus-border;
     }
   }
 
@@ -174,6 +177,12 @@
       &::placeholder {
         color: $--input-disabled-placeholder-color;
       }
+      &:focus,
+      &:active {
+        outline: none;
+        border-color: $--input-disabled-border;
+        box-shadow: none;
+      }
     }
 
     .el-input__icon,
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
index 780cc2bbeb..bdbc5952c2 100644
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -7,7 +7,7 @@
   background: $--popover-fill;
   min-width: 160px;
   border-radius: $--border-radius-base;
-  border: 1px solid $--popover-border-color;
+  // border: 1px solid $--popover-border-color;
   padding: $--popover-padding;
   z-index: $--index-popper;
   color: $--color-text-regular;
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index c3f4489601..3f8cc7cf34 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -127,10 +127,12 @@
       }
       &.is-checked {
         .el-radio__inner {
+          opacity: 0.3;
           background-color: $--radio-disabled-checked-primary-input-fill;
-          border-color: $--radio-disabled-checked-primary-input-border-color;
+          border: 4px solid $--radio-disabled-checked-primary-input-border-color;
 
           &:hover {
+            opacity: 0.3;
             background-color: $--radio-disabled-checked-primary-input-fill;
             border-color: $--radio-disabled-checked-primary-input-border-color;
           }
@@ -141,7 +143,7 @@
         }
       }
       & + span.el-radio__label {
-        color: $--radio-disabled-text-color;
+        opacity: 0.3;
         cursor: not-allowed;
       }
     }
diff --git a/packages/theme-chalk/src/switch.scss b/packages/theme-chalk/src/switch.scss
index 8d3b7abd15..3e26c4e912 100644
--- a/packages/theme-chalk/src/switch.scss
+++ b/packages/theme-chalk/src/switch.scss
@@ -16,10 +16,12 @@
       cursor: not-allowed;
     }
     & .el-switch__title--left {
-      color: $--switch-disabled-background-color;
+      color: $--table-text-color;
+      opacity: 0.3;
     }
     & .el-switch__title--right {
-      color: $--switch-disabled-background-color;
+      color: $--table-text-color;
+      opacity: 0.3;
     }
   }
 
@@ -127,14 +129,15 @@
     .el-switch__core {
       border: 1px solid $--switch-disabled-border-color;
       background-color: $--switch-disabled-background-color;
+      opacity: 0.3;
     }
     &.is-checked {
       .el-switch__core {
         border: 1px solid $--switch-disabled-checked-border-color;
         background-color: $--switch-disabled-checked-background-color;
+        opacity: 0.3;
       }
     }
-    // opacity: 0.6;
   }
 
   @include m(wide) {
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index f6fee9c007..dcd6f5ec92 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -107,8 +107,7 @@
   @include e(expand-icon) {
     position: relative;
     cursor: pointer;
-    // TODO：颜色值
-    color: #5c5c5c;
+    color: $palette-gray-700;
     font-size: 14px;
     transition: transform 0.2s ease-in-out;
     height: 20px;
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 35a6503443..f31be49285 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -53,7 +53,7 @@
       bottom: 0;
       width: 100%;
       height: 1px;
-      background-color: $--border-divider-color;
+      background-color: $--border-secondary;
       z-index: $--index-normal;
     }
 
@@ -206,7 +206,7 @@
   }
   @include m(card) {
     > .el-tabs__header {
-      border-bottom: 1px solid $--border-divider-color;
+      border-bottom: 1px solid $--border-secondary;
       background-color: $--background-color-secondary;
     }
     > .el-tabs__header .el-tabs__nav-wrap::after {
@@ -255,7 +255,7 @@
       //   }
       // }
       &.is-active {
-        border: 1px solid $--border-divider-color;
+        border: 1px solid  $--border-secondary;
         // height: 37px;
         // line-height: 37px;
         border-bottom-color: $--color-white;
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 2aeef3eb87..09f436e584 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -54,7 +54,7 @@
 
     &:hover {
       // background-color: $--tag-color;
-      color: $--color-info-hover;
+      color: $--color-white;
     }
   }
 
@@ -62,7 +62,7 @@
     cursor: pointer;
     &:hover {
       // background-color: $--tag-color;
-      color: $--color-info-hover;
+      // color: $--color-info-hover;
     }
   }
 
@@ -87,10 +87,10 @@
       color: $--tag-info-color;
     }
 
-    .el-tag__close:hover {
-      // background-color: $--tag-info-color;
-      color: $--color-info-secondary-hover;
-    }
+    // .el-tag__close:hover {
+    //   background-color: $--tag-info-color;
+    //   color: $--color-info-secondary-hover;
+    // }
   }
 
   @include m(success) {
@@ -114,10 +114,10 @@
       color: $--tag-success-color;
     }
 
-    .el-tag__close:hover {
-      // background-color: $--tag-success-color;
-      color: $--color-success-hover;
-    }
+    // .el-tag__close:hover {
+    //   background-color: $--tag-success-color;
+    //   color: $--color-success-hover;
+    // }
   }
 
   @include m(warning) {
@@ -141,10 +141,10 @@
       color: $--tag-warning-color;
     }
 
-    .el-tag__close:hover {
-      // background-color: $--tag-warning-color;
-      color: $--color-warning-hover;
-    }
+    // .el-tag__close:hover {
+    //   background-color: $--tag-warning-color;
+    //   color: $--color-warning-hover;
+    // }
   }
 
   @include m(danger) {
@@ -168,10 +168,10 @@
       color: $--tag-danger-color;
     }
 
-    .el-tag__close:hover {
-      // background-color: $--tag-danger-color;
-      color: $--color-danger-hover;
-    }
+    // .el-tag__close:hover {
+    //   background-color: $--tag-danger-color;
+    //   color: $--color-danger-hover;
+    // }
   }
 
   @include m(beta) {
@@ -195,10 +195,10 @@
       color: $--tag-beta-color;
     }
 
-    .el-tag__close:hover {
-      // background-color: $--tag-info-color;
-      color: $--color-beta-hover;
-    }
+    // .el-tag__close:hover {
+    //   background-color: $--tag-info-color;
+    //   color: $--color-beta-hover;
+    // }
   }
 
   @include m(medium) {
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index 979e133f24..2f89a3adbe 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -88,7 +88,7 @@
   }
 
   .el-upload__text {
-    color: $--color-text-regular;
+    color: $--color-text-disabled;
     font-size: 14px;
     text-align: center;
 
@@ -104,8 +104,8 @@
 
   @include when(dragover) {
     // TODO：颜色值
-    background-color: rgba(32, 159, 255, .06);
-    border: 2px dashed $--color-primary;
+    background-color: $--color-secondary;
+    border: 1px dashed $--color-primary;
   }
 }