diff --git a/packages/theme-chalk/src/calendar.scss b/packages/theme-chalk/src/calendar.scss
index c074f4b164..695a50cf2e 100644
--- a/packages/theme-chalk/src/calendar.scss
+++ b/packages/theme-chalk/src/calendar.scss
@@ -3,6 +3,16 @@
 @import 'button';
 @import 'button-group';
 
+:root {
+  --el-calendar-border: var(
+    --el-table-border,
+    1px solid var(--el-border-color-lighter)
+  );
+  --el-calendar-header-border-bottom: var(--el-calendar-border);
+  --el-calendar-selected-background-color: #f2f8fe;
+  --el-calendar-cell-width: 85px;
+}
+
 @include b(calendar) {
   background-color: #fff;
 
@@ -10,7 +20,7 @@
     display: flex;
     justify-content: space-between;
     padding: 12px 20px;
-    border-bottom: $--table-border;
+    border-bottom: var(--el-calendar-header-border-bottom);
   }
 
   @include e(title) {
@@ -29,38 +39,38 @@
 
   thead th {
     padding: 12px 0;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
     font-weight: normal;
   }
 
   &:not(.is-range) {
     td.prev,
     td.next {
-      color: $--color-text-placeholder;
+      color: var(--el-color-text-placeholder);
     }
   }
 
   td {
-    border-bottom: $--calendar-border;
-    border-right: $--calendar-border;
+    border-bottom: var(--el-calendar-border);
+    border-right: var(--el-calendar-border);
     vertical-align: top;
     transition: background-color var(--el-transition-duration-fast) ease;
 
     @include when(selected) {
-      background-color: $--calendar-selected-background-color;
+      background-color: var(--el-calendar-selected-background-color);
     }
 
     @include when(today) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
 
   tr:first-child td {
-    border-top: $--calendar-border;
+    border-top: var(--el-calendar-border);
   }
 
   tr td:first-child {
-    border-left: $--calendar-border;
+    border-left: var(--el-calendar-border);
   }
 
   tr.#{$namespace}-calendar-table__row--hide-border td {
@@ -70,10 +80,10 @@
   @include b(calendar-day) {
     box-sizing: border-box;
     padding: 8px;
-    height: $--calendar-cell-width;
+    height: var(--el-calendar-cell-width);
     &:hover {
       cursor: pointer;
-      background-color: $--calendar-selected-background-color;
+      background-color: var(--el-calendar-selected-background-color);
     }
   }
 }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 026bb476cc..031dba363d 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -444,23 +444,8 @@ $--dialog-padding-primary: 20px !default;
 
 /* Table
 -------------------------- */
-/// color||Color|0
-$--table-border-color: map.get($--border-color, 'lighter') !default;
-$--table-border: 1px solid $--table-border-color !default;
-/// color||Color|0
-$--table-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--table-header-font-color: $--color-text-secondary !default;
-/// color||Color|0
-$--table-row-hover-background-color: $--background-color-base !default;
-$--table-current-row-background-color: map.get(
-  $--colors,
-  'primary',
-  'light-9'
-) !default;
-/// color||Color|0
-$--table-header-background-color: $--color-white !default;
-$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/table.scss
 
 /* Pagination
 -------------------------- */
@@ -734,13 +719,11 @@ $--link-warning-font-color: $--color-warning !default;
 $--link-danger-font-color: $--color-danger !default;
 /// color||Color|0
 $--link-info-font-color: $--color-info !default;
+
 /* Calendar
 --------------------------*/
-/// border||Other|4
-$--calendar-border: $--table-border !default;
-/// color||Other|4
-$--calendar-selected-background-color: #f2f8fe !default;
-$--calendar-cell-width: 85px !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/calendar.scss
 
 /* Form
 -------------------------- */
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index 3bb028d531..d8e46116a3 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -4,6 +4,17 @@
 @import 'tooltip';
 @import 'common/var';
 
+:root {
+  --el-table-border-color: var(--el-border-color-lighter);
+  --el-table-border: 1px solid var(--el-table-border-color);
+  --el-table-font-color: var(--el-color-text-regular);
+  --el-table-header-font-color: var(--el-color-text-secondary);
+  --el-table-row-hover-background-color: var(--el-background-color-base);
+  --el-table-current-row-background-color: var(--el-color-primary-light-9);
+  --el-table-header-background-color: var(--el-color-white);
+  --el-table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+}
+
 @include b(table) {
   position: relative;
   overflow: hidden;
@@ -11,9 +22,9 @@
   height: fit-content;
   width: 100%;
   max-width: 100%;
-  background-color: $--color-white;
+  background-color: var(--el-color-white);
   font-size: 14px;
-  color: $--table-font-color;
+  color: var(--el-table-font-color);
 
   // 数据为空
   @include e(empty-block) {
@@ -30,7 +41,7 @@
     // set empty text line height up to contrainer min-height as workaround.
     line-height: 60px;
     width: 50%;
-    color: $--color-text-secondary;
+    color: var(--el-color-text-secondary);
   }
 
   // 展开行
@@ -63,7 +74,7 @@
   }
 
   @include e(expanded-cell) {
-    background-color: $--color-white;
+    background-color: var(--el-color-white);
 
     // 纯属为了增加权重
     &[class*='cell'] {
@@ -108,12 +119,12 @@
   }
 
   thead {
-    color: $--table-header-font-color;
+    color: var(--el-table-header-font-color);
     font-weight: 500;
 
     &.is-group {
       th {
-        background: $--background-color-base;
+        background: var(--el-background-color-base);
       }
     }
   }
@@ -174,7 +185,7 @@
   }
 
   tr {
-    background-color: $--color-white;
+    background-color: var(--el-color-white);
 
     input[type='checkbox'] {
       margin: 0;
@@ -183,7 +194,7 @@
 
   th.is-leaf,
   td {
-    border-bottom: $--table-border;
+    border-bottom: var(--el-table-border);
   }
 
   th.is-sortable {
@@ -193,7 +204,7 @@
   th {
     overflow: hidden;
     user-select: none;
-    background-color: $--table-header-background-color;
+    background-color: var(--el-table-header-background-color);
 
     > .cell {
       display: inline-block;
@@ -203,7 +214,7 @@
       width: 100%;
 
       &.highlight {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
     }
 
@@ -247,12 +258,12 @@
 
   // 拥有多级表头
   @include m((group, border)) {
-    border: $--table-border;
+    border: var(--el-table-border);
 
     @include share-rule(border-pseudo) {
       content: '';
       position: absolute;
-      background-color: $--table-border-color;
+      background-color: var(--el-table-border-color);
       z-index: 1;
     }
 
@@ -287,7 +298,7 @@
 
     th,
     td {
-      border-right: $--table-border;
+      border-right: var(--el-table-border);
 
       &:first-child .cell {
         padding-left: 10px;
@@ -295,12 +306,12 @@
     }
 
     th.gutter:last-of-type {
-      border-bottom: $--table-border;
+      border-bottom: var(--el-table-border);
       border-bottom-width: 1px;
     }
 
     & th {
-      border-bottom: $--table-border;
+      border-bottom: var(--el-table-border);
     }
   }
 
@@ -314,7 +325,7 @@
     left: 0;
     overflow-x: hidden;
     overflow-y: hidden;
-    box-shadow: $--table-fixed-box-shadow;
+    box-shadow: var(--el-table-fixed-box-shadow);
 
     &::before {
       content: '';
@@ -332,8 +343,8 @@
     position: absolute;
     top: -1px;
     right: 0;
-    background-color: $--color-white;
-    border-bottom: $--table-border;
+    background-color: var(--el-color-white);
+    border-bottom: var(--el-table-border);
   }
 
   @include e(fixed-right) {
@@ -363,9 +374,9 @@
     z-index: 3;
 
     & tbody td {
-      border-top: $--table-border;
-      background-color: $--table-row-hover-background-color;
-      color: $--table-font-color;
+      border-top: var(--el-table-border);
+      background-color: var(--el-table-row-hover-background-color);
+      color: var(--el-table-font-color);
     }
   }
 
@@ -384,7 +395,7 @@
   @include e(footer-wrapper) {
     margin-top: -1px;
     td {
-      border-top: $--table-border;
+      border-top: var(--el-table-border);
     }
   }
 
@@ -397,8 +408,8 @@
     overflow: hidden;
 
     & tbody td {
-      background-color: $--table-row-hover-background-color;
-      color: $--table-font-color;
+      background-color: var(--el-table-row-hover-background-color);
+      color: var(--el-table-font-color);
     }
   }
 
@@ -428,13 +439,13 @@
     .#{$namespace}-table--border {
       @include when(scrolling-right) {
         ~ .#{$namespace}-table__fixed-right {
-          border-left: $--table-border;
+          border-left: var(--el-table-border);
         }
       }
 
       @include when(scrolling-left) {
         ~ .#{$namespace}-table__fixed {
-          border-right: $--table-border;
+          border-right: var(--el-table-border);
         }
       }
     }
@@ -460,22 +471,22 @@
     left: 7px;
 
     &.ascending {
-      border-bottom-color: $--color-text-placeholder;
+      border-bottom-color: var(--el-color-text-placeholder);
       top: -5px;
     }
 
     &.descending {
-      border-top-color: $--color-text-placeholder;
+      border-top-color: var(--el-color-text-placeholder);
       bottom: -3px;
     }
   }
 
   .ascending .sort-caret.ascending {
-    border-bottom-color: $--color-primary;
+    border-bottom-color: var(--el-color-primary);
   }
 
   .descending .sort-caret.descending {
-    border-top-color: $--color-primary;
+    border-top-color: var(--el-color-primary);
   }
 
   .hidden-columns {
@@ -492,7 +503,7 @@
         }
 
         &.current-row td {
-          background-color: $--table-current-row-background-color;
+          background-color: var(--el-table-current-row-background-color);
         }
       }
     }
@@ -505,14 +516,14 @@
         &,
         &.current-row {
           > td {
-            background-color: $--table-row-hover-background-color;
+            background-color: var(--el-table-row-hover-background-color);
           }
         }
       }
     }
 
     tr.current-row > td {
-      background-color: $--table-current-row-background-color;
+      background-color: var(--el-table-current-row-background-color);
     }
   }
 
@@ -522,7 +533,7 @@
     top: 0;
     bottom: 0;
     width: 0;
-    border-left: $--table-border;
+    border-left: var(--el-table-border);
     z-index: 10;
   }
 
@@ -531,7 +542,7 @@
     cursor: pointer;
 
     & i {
-      color: $--color-info;
+      color: var(--el-color-info);
       font-size: 12px;
       vertical-align: middle;
       transform: scale(0.75);
@@ -546,7 +557,7 @@
 
   @include m(enable-row-hover) {
     .#{$namespace}-table__body tr:hover > td {
-      background-color: $--table-row-hover-background-color;
+      background-color: var(--el-table-row-hover-background-color);
     }
   }