Theme: parameterize color variables

packages/theme-default/src/alert.css

@@ -12,7 +12,7 @@
     position: relative;
     background-color: var(--color-white);
     overflow: hidden;
-    color: #fff;
+    color: var(--color-white);
     opacity: 1;
     display: table;
     transition: opacity .2s;
@@ -59,14 +59,14 @@
     }
 
     & .el-alert__description {
-      color: #fff;
+      color: var(--color-white);
       font-size: var(--alert-description-font-size);
       margin: 5px 0 0 0;
     }
 
     @e closebtn {
       font-size: var(--alert-close-font-size);
-      color: #fff;
+      color: var(--color-white);
       opacity: 1;
       position: absolute 12px 15px * *;
       cursor: pointer;

packages/theme-default/src/autocomplete.css

@@ -12,8 +12,8 @@
       left: 0;
       top: 110%;
       margin: 5px 0 0;
-      background-color: #fff;
-      border: 1px solid #D3DCE6;
+      background-color: var(--color-white);
+      border: 1px solid var(--color-base-gray);
       width: 100%;
       padding: 6px 0;
       z-index: 10;
@@ -29,7 +29,7 @@
         padding: 0 10px;
         margin: 0;
         cursor: pointer;
-        color: #475669;
+        color: var(--color-extra-light-black);
         font-size: 14px;
         white-space: nowrap;
         overflow: hidden;
@@ -40,14 +40,14 @@
         }
         &.highlighted {
           background-color: var(--color-primary);
-          color: #fff;
+          color: var(--color-white);
         }
         &:active {
           background-color: darken(var(--color-primary), 0.2);
         }
         &.divider {
           margin-top: 6px;
-          border-top: 1px solid #D3DCE6;
+          border-top: 1px solid var(--color-base-gray);
         }
         &.divider:last-child {
           margin-bottom: -6px;
@@ -64,7 +64,7 @@
           @utils-vertical-center;
 
           &:hover {
-            background-color: #fff;
+            background-color: var(--color-white);
           }
         }
 

packages/theme-default/src/badge.css

@@ -10,7 +10,7 @@
     @e content {
       background-color: var(--badge-fill);
       border-radius: var(--badge-radius);
-      color: #fff;
+      color: var(--color-white);
       display: inline-block;
       font-size: var(--badge-font-size);
       height: var(--badge-size);
@@ -18,7 +18,7 @@
       padding: 0 var(--badge-padding);
       text-align: center;
       white-space: nowrap;
-      border: 1px solid #fff;
+      border: 1px solid var(--color-white);
 
       @when fixed {
         position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;

packages/theme-default/src/breadcrumb.css

@@ -10,7 +10,7 @@
 
     @e separator {
       margin: 0 8px;
-      color: #c0ccda;
+      color: var(--color-extra-light-silver);
     }
     @e item {
       float: left;
@@ -18,7 +18,7 @@
       @e inner {
         &, & a {
           transition: color .15s linear;
-          color:#475669;
+          color:var(--color-extra-light-black);
 
           &:hover {
             color: var(--color-primary);
@@ -31,7 +31,7 @@
         .el-breadcrumb__item__inner,
         .el-breadcrumb__item__inner a {
           &, &:hover {
-            color: #99a9bf;
+            color: var(--color-light-silver);
             cursor: text;
           }
         }

packages/theme-default/src/button.css

@@ -48,13 +48,13 @@
     @when plain {
       &:hover,
       &:focus {
-        background: #fff;
+        background: var(--color-white);
         border-color: var(--color-primary);
         color: var(--color-primary);
       }
       
       &:active {
-        background: #fff;
+        background: var(--color-white);
         border-color: shade(var(--color-primary), var(--button-active-shade-percent));
         color: shade(var(--color-primary), var(--button-active-shade-percent));
         outline: none;
@@ -85,9 +85,9 @@
         &,
         &:hover,
         &:focus {
-          background-color: #fff;
-          border-color: #d3dce6;
-          color: #C0CCDA;
+          background-color: var(--color-white);
+          border-color: var(--color-base-gray);
+          color: var(--color-extra-light-silver);
         }
       }
     }
@@ -190,14 +190,14 @@
     @each $type in (primary, success, warning, danger, info) {
       .el-button--$type {
         &:first-child {
-          border-right-color: rgba(#fff, 0.5);
+          border-right-color: rgba(var(--color-white), 0.5);
         }
         &:last-child {
-          border-left-color: rgba(#fff, 0.5);
+          border-left-color: rgba(var(--color-white), 0.5);
         }
         &:not(:first-child):not(:last-child) {
-          border-left-color: rgba(#fff, 0.5);
-          border-right-color: rgba(#fff, 0.5);
+          border-left-color: rgba(var(--color-white), 0.5);
+          border-right-color: rgba(var(--color-white), 0.5);
         }
       }
     }

packages/theme-default/src/card.css

@@ -5,7 +5,7 @@
   @b card {
     border: 1px solid var(--card-border-color);
     border-radius: var(--card-border-radius);
-    background-color: #fff;
+    background-color: var(--color-white);
     overflow: hidden;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
                 0px 0px 6px 0px rgba(0, 0, 0, .04);

packages/theme-default/src/date-picker/month-table.css

@@ -31,7 +31,7 @@
 
       &.current .cell {
         background-color: var(--datepicker-active-color) !important;
-        color: #fff;
+        color: var(--color-white);
       }
     }
   }

packages/theme-default/src/date-picker/picker-panel.css

@@ -5,7 +5,7 @@
     color: var(--datepicker-color);
     border: 1px solid var(--datepicker-border-color);
     box-shadow: 0 2px 6px #ccc;
-    background: #fff;
+    background: var(--color-white);
     border-radius: 2px;
     line-height: 20px;
     margin: 5px 0;
@@ -27,7 +27,7 @@
       border-top: 1px solid var(--datepicker-inner-border-color);
       padding: 4px;
       text-align: right;
-      background-color: #fff;
+      background-color: var(--color-white);
       position: relative;
     }
 
@@ -103,7 +103,7 @@
     border-right: 1px solid var(--datepicker-inner-border-color);
     box-sizing: border-box;
     padding-top: 6px;
-    background-color: #f9fafc;
+    background-color: var(--color-dark-white);
   }
 
   .el-picker-panel *[slot=sidebar] + .el-picker-panel__body,

packages/theme-default/src/date-picker/time-picker.css

@@ -75,7 +75,7 @@
       background-color: transparent;
       outline: none;
       font-size: 12px;
-      color: #8492a6;
+      color: var(--color-base-silver);
 
       &.confirm {
         font-weight: 800;

packages/theme-default/src/date-picker/year-table.css

@@ -35,7 +35,7 @@
 
       &.current .cell {
         background-color: var(--datepicker-active-color) !important;
-        color: #fff;
+        color: var(--color-white);
       }
     }
   }

packages/theme-default/src/dialog.css

@@ -8,7 +8,7 @@
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    background: #fff;
+    background: var(--color-white);
     border-radius: var(--border-radius-small);
     box-shadow: var(--dialog-box-shadow);
     box-sizing: border-box;
@@ -55,12 +55,12 @@
       line-height: 1;
       font-size: var(--dialog-title-font-size);
       font-weight: bold;
-      color: #1f2d3d;
+      color: var(--color-base-black);
     }
 
     @e body {
       padding: 30px 20px;
-      color: #475669;
+      color: var(--color-extra-light-black);
       font-size: var(--dialog-font-size);
     }
 

packages/theme-default/src/dropdown.css

@@ -6,7 +6,7 @@
   @b dropdown {
     display: inline-block;
     position: relative;
-    color: #475669;
+    color: var(--color-extra-light-black);
     font-size: var(--font-size-base);
 
     .el-button-group {
@@ -27,8 +27,8 @@
   }
   @b dropdown-menu {
     margin: 5px 0;
-    background-color: #fff;
-    border: 1px solid #D3DCE6;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-base-gray);
     box-shadow: var(--dropdown-menu-box-shadow);
     padding: 6px 0;
     z-index: 10;
@@ -51,19 +51,19 @@
       @m divided {
         position: relative;
         margin-top: 6px;
-        border-top: 1px solid #D3DCE6;
+        border-top: 1px solid var(--color-base-gray);
 
         &:before {
           content: '';
           height: 6px;
           display: block;
           margin: 0 -10px;
-          background-color: #fff;
+          background-color: var(--color-white);
         }
       }
       @when disabled {
         cursor: default;
-        color: #c0ccda;
+        color: var(--color-extra-light-silver);
         pointer-events: none;
       }
     }

packages/theme-default/src/form.css

@@ -40,7 +40,7 @@
       vertical-align: middle;
       float: left;
       font-size: 14px;
-      color: #5e6d82;
+      color: var(--color-extra-light-black);
       line-height: 1;
       padding: 11px 12px 11px 0;
       box-sizing: border-box;
@@ -52,7 +52,7 @@
       @utils-clearfix;
     }
     @e error {
-      color: #ff4949;
+      color: var(--color-danger);
       font-size: 12px;
       line-height: 1;
       padding-top: 4px;

packages/theme-default/src/input-number.css

@@ -20,7 +20,7 @@
       line-height: calc(var(--input-height) - 2);
       top: 1px;
       text-align: center;
-      color: #99A9BF;
+      color: var(--color-light-silver);
       cursor: pointer;
       position: absolute;
       z-index: 1;

packages/theme-default/src/input.css

@@ -114,8 +114,8 @@
       display: table-cell;
     }
     @e append, prepend {
-      background-color: #f9fafc;
-      color: #99a9bf;
+      background-color: var(--color-dark-white);
+      color: var(--color-light-silver);
       vertical-align: middle;
       display: table-cell;
       position: relative;
@@ -184,7 +184,7 @@
       width: 100%;
       font-size: var(--font-size-base);
       color: var(--input-color);
-      background-color: #fff;
+      background-color: var(--color-white);
       background-image: none;
       border: var(--input-border);
       border-radius: 4px;

packages/theme-default/src/menu.css

@@ -33,18 +33,18 @@
 
       & .el-menu-item,
       & .el-submenu__title {
-        color: #c0ccda;
+        color: var(--color-extra-light-silver);
 
         &:hover {
-          background-color: #475669;
+          background-color: var(--color-extra-light-black);
         }
       }
       
       & .el-submenu .el-menu {
-        background-color: #1f2f3d;
+        background-color: var(--color-base-black);
 
         & .el-menu-item:hover {
-          background-color: #475669;
+          background-color: var(--color-extra-light-black);
         }
       }
     }
@@ -76,9 +76,9 @@
           position: absolute;
           top: 65px;
           left: 0;
-          border:1px solid #d3dce6;
+          border:1px solid var(--color-base-gray);
           padding: 5px 0;
-          background-color: #fff;
+          background-color: var(--color-white);
           z-index: 100;
           min-width: 100%;
           box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
@@ -91,7 +91,7 @@
         }
 
         & .el-menu-item {
-          background-color: #fff;
+          background-color: var(--color-white);
           float: none;
           height: 36px;
           line-height: 36px;
@@ -102,7 +102,7 @@
           position: static;
           vertical-align: middle;
           margin-left: 5px;
-          color: #99a9bf;
+          color: var(--color-light-silver);
           margin-top: -3px;
         }
       }
@@ -125,10 +125,10 @@
         & .el-submenu {
           .el-menu-item,
           .el-submenu-title {
-            color: #475669;
+            color: var(--color-extra-light-black);
 
             &:hover {
-              background-color: #d3dce6;
+              background-color: var(--color-base-gray);
             }
           }
           .el-menu-item.is-active {
@@ -152,7 +152,7 @@
       margin-right: 0;
     }
     &:hover {
-      background-color: #d3dce6;
+      background-color: var(--color-base-gray);
     }
     @when active {
       color: var(--color-primary);
@@ -165,11 +165,11 @@
       @extend menu-item;
 
       &:hover {
-        background-color: #d3dce6;
+        background-color: var(--color-base-gray);
       }
     }
     & .el-menu {
-      background-color: #e5e9f2;
+      background-color: var(--color-light-gray);
     }
     & .el-menu-item {
       height: 50px;
@@ -177,7 +177,7 @@
       padding: 0 45px;
 
       &:hover {
-        background-color: #d3dce6;
+        background-color: var(--color-base-gray);
       }
     }
     @e icon-arrow {
@@ -213,7 +213,7 @@
       line-height: normal;
       font-size: 14px;
       padding-left: 20px;
-      color: #99a9bf;
+      color: var(--color-light-silver);
     }
   }
 }

packages/theme-default/src/message-box.css

@@ -10,7 +10,7 @@
     text-align: left;
     display: inline-block;
     vertical-align: middle;
-    background-color: #fff;
+    background-color: var(--color-white);
     width: var(--msgbox-width);
     border-radius: var(--msgbox-border-radius);
     font-size: var(--msgbox-font-size);

packages/theme-default/src/message.css

@@ -13,7 +13,7 @@
     left: 50%;
     top: 20px;
     transform: translateX(-50%);
-    background-color: #fff;
+    background-color: var(--color-white);
     transition: opacity 0.3s, transform .4s;
     overflow: hidden;
 

packages/theme-default/src/mixins/_button.css

@@ -30,13 +30,13 @@
 
     &:hover,
     &:focus {
-      background: #fff;
+      background: var(--color-white);
       border-color: $border-color;
       color: $background-color;
     }
     
     &:active {
-      background: #fff;
+      background: var(--color-white);
       border-color: shade($border-color, var(--button-active-shade-percent));
       color: shade($background-color, var(--button-active-shade-percent));
       outline: none;

packages/theme-default/src/notification.css

@@ -10,7 +10,7 @@
     border-radius: var(--border-radius-small);
     position: fixed;
     right: 16px;
-    background-color: #fff;
+    background-color: var(--color-white);
     box-shadow: var(--notification-shadow);
     transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
     overflow: hidden;

packages/theme-default/src/progress.css

@@ -8,7 +8,7 @@
 
     @e text {
       font-size:14px;
-      color:#475669;
+      color:var(--color-extra-light-black);
       display: inline-block;
       vertical-align: middle;
       margin-left: 10px;
@@ -81,7 +81,7 @@
     @e outer {
       height: 6px;
       border-radius: 100px;
-      background-color: #e5e9f2;
+      background-color: var(--color-light-gray);
       overflow: hidden;
       position: relative;
       vertical-align: middle;
@@ -102,7 +102,7 @@
     @e innerText {
       display: inline-block;
       vertical-align: middle;
-      color: #fff;
+      color: var(--color-white);
       font-size: 12px;
       margin: 0 5px;
     }

packages/theme-default/src/radio.css

@@ -87,7 +87,7 @@
       }
 
       &::after {
-        circle: 6px #fff;
+        circle: 6px var(--color-white);
         content: "";
         position: absolute;
         left: 50%;

packages/theme-default/src/step.css

@@ -25,7 +25,7 @@
       display: inline-block;
       position: absolute;
       border-color: inherit;
-      background-color: #c0ccda;
+      background-color: var(--color-extra-light-silver);
 
       @when icon {
         @when horizontal {
@@ -83,59 +83,59 @@
         border-style: solid;
 
         @when process {
-          color: #fff;
-          background-color: #c0ccda;
-          border-color: #c0ccda;
+          color: var(--color-white);
+          background-color: var(--color-extra-light-silver);
+          border-color: var(--color-extra-light-silver);
         }
 
         @when wait {
-          color: #c0ccda;
-          background-color: #fff;
-          border-color: #c0ccda;
+          color: var(--color-extra-light-silver);
+          background-color: var(--color-white);
+          border-color: var(--color-extra-light-silver);
         }
 
         @when success {
-          color: #fff;
-          background-color: #13ce66;
-          border-color: #13ce66;
+          color: var(--color-white);
+          background-color: var(--color-success);
+          border-color: var(--color-success);
         }
 
         @when error {
-          color: #fff;
-          background-color: #ff4949;
-          border-color: #ff4949;
+          color: var(--color-white);
+          background-color: var(--color-danger);
+          border-color: var(--color-danger);
         }
 
         @when finish {
-          color: #fff;
-          background-color: #20a0ff;
-          border-color: #20a0ff;
+          color: var(--color-white);
+          background-color: var(--color-primary);
+          border-color: var(--color-primary);
         }
       }
 
       @when process {
-        color: #c0ccda;
-        border-color: #c0ccda;
+        color: var(--color-extra-light-silver);
+        border-color: var(--color-extra-light-silver);
       }
 
       @when wait {
-        color: #c0ccda;
-        border-color: #c0ccda;
+        color: var(--color-extra-light-silver);
+        border-color: var(--color-extra-light-silver);
       }
 
       @when success {
-        color: #13ce66;
-        border-color: #13ce66;
+        color: var(--color-success);
+        border-color: var(--color-success);
       }
 
       @when error {
-        color: #ff4949;
-        border-color: #ff4949;
+        color: var(--color-danger);
+        border-color: var(--color-danger);
       }
 
       @when finish {
-        color: #20a0ff;
-        border-color: #20a0ff;
+        color: var(--color-primary);
+        border-color: var(--color-primary);
       }
     }
 
@@ -152,27 +152,27 @@
 
       @when process {
         font-weight: 700;
-        color: #475669;
+        color: var(--color-extra-light-black);
       }
 
       @when wait {
         font-weight: normal;
-        color: #99a9bf;
+        color: var(--color-light-silver);
       }
 
       @when success {
         font-weight: 700;
-        color: #13ce66;
+        color: var(--color-success);
       }
 
       @when error {
         font-weight: 700;
-        color: #ff4949;
+        color: var(--color-danger);
       }
 
       @when finish {
         font-weight: 700;
-        color: #20a0ff;
+        color: var(--color-primary);
       }
     }
 
@@ -182,23 +182,23 @@
       line-height: 14px;
 
       @when process {
-        color: #8492a6;
+        color: var(--color-base-silver);
       }
 
       @when wait {
-        color: #c0ccda;
+        color: var(--color-extra-light-silver);
       }
 
       @when success {
-        color: #13ce66;
+        color: var(--color-success);
       }
 
       @when error {
-        color: #ff4949;
+        color: var(--color-danger);
       }
 
       @when finish {
-        color: #20a0ff;
+        color: var(--color-primary);
       }
     }
   }

packages/theme-default/src/table-column.css

@@ -12,9 +12,9 @@
   }
 
   @b table-filter {
-    border: solid 1px #d3dce6;
+    border: solid 1px var(--color-base-gray);
     border-radius: 2px;
-    background-color: #fff;
+    background-color: var(--color-white);
     box-shadow: var(--dropdown-menu-box-shadow);
     box-sizing: border-box;
     margin: 2px 0;
@@ -39,8 +39,8 @@
       }
 
       @when active {
-        background-color: #20a0ff;
-        color: #fff;
+        background-color: var(--color-primary);
+        color: var(--color-white);
       }
     }
 
@@ -49,19 +49,19 @@
     }
 
     @e bottom {
-      border-top: 1px solid #d3dce6;
+      border-top: 1px solid var(--color-base-gray);
       padding: 8px;
 
       button {
         background: transparent;
         border: none;
-        color: #8492a6;
+        color: var(--color-base-silver);
         cursor: pointer;
         font-size: var(--font-size-base);
         padding: 0 3px;
 
         &:hover {
-          color: #20a0ff;
+          color: var(--color-primary);
         }
 
         &:focus {
@@ -69,7 +69,7 @@
         }
 
         &.is-disabled {
-          color: #c0ccda;
+          color: var(--color-extra-light-silver);
           cursor: not-allowed;
         }
       }

packages/theme-default/src/table.css

@@ -11,7 +11,7 @@
     box-sizing: border-box;
     width: 100%;
     max-width: 100%;
-    background-color: #fff;
+    background-color: var(--color-white);
     border: 1px solid var(--table-border-color);
     font-size: 14px;
     color: var(--table-text-color);
@@ -63,7 +63,7 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      color: #5e6d82;
+      color: color(var(--color-primary) s(16%) l(44%));
     }
 
     @e expand-column {
@@ -96,11 +96,11 @@
 
     @e expanded-cell {
       padding: 20px 50px;
-      background-color: #f9fafc;
+      background-color: var(--color-dark-white);
       box-shadow: inset 0 2px 0 #f4f4f4;
 
       &:hover {
-        background-color: #f9fafc !important;
+        background-color: var(--color-dark-white) !important;
       }
     }
 
@@ -277,7 +277,7 @@
       box-sizing: border-box;
 
       &.highlight {
-        color: #20a0ff;
+        color: var(--color-primary);
       }
     }
 
@@ -307,13 +307,13 @@
         top: 11px;
         border-top: none;
         border-right: 5px solid transparent;
-        border-bottom: 5px solid #99a9bf;
+        border-bottom: 5px solid var(--color-light-silver);
         border-left: 5px solid transparent;
       }
 
       &.descending {
         bottom: 11px;
-        border-top: 5px solid #99a9bf;
+        border-top: 5px solid var(--color-light-silver);
         border-right: 5px solid transparent;
         border-bottom: none;
         border-left: 5px solid transparent;
@@ -321,11 +321,11 @@
     }
 
     & .ascending .sort-caret.ascending {
-      border-bottom-color: #475669;
+      border-bottom-color: var(--color-extra-light-black);
     }
 
     & .descending .sort-caret.descending {
-      border-top-color: #475669;
+      border-top-color: var(--color-extra-light-black);
     }
 
     & th.gutter, td.gutter {
@@ -361,7 +361,7 @@
     }
 
     & tr {
-      background-color: #fff;
+      background-color: var(--color-white);
     }
 
     @modifier striped {
@@ -372,7 +372,7 @@
           }
 
           &.current-row td {
-            background: #EFF7FF;
+            background: color(var(--color-primary) tint(92%));
           }
         }
       }
@@ -380,11 +380,11 @@
 
     @e body {
       tr.hover-row > td {
-        background-color: #eff2f7;
+        background-color: var(--color-extra-light-gray);
       }
 
       tr.current-row > td {
-        background: #eff7ff;
+        background: color(var(--color-primary) tint(92%));
       }
     }
 
@@ -411,7 +411,7 @@
       cursor: pointer;
 
       & i {
-        color: #99a9bf;
+        color: var(--color-light-silver);
       }
     }
 
@@ -423,7 +423,7 @@
 
     @modifier enable-row-hover {
       tr:hover > td {
-        background-color: #eff2f7;
+        background-color: var(--color-extra-light-gray);
       }
     }
 

packages/theme-default/src/tabs.css

@@ -4,7 +4,7 @@
 @component-namespace el {
   @b tabs {
     @e header {
-      border-bottom: 1px solid #d3dce6;
+      border-bottom: 1px solid var(--color-base-gray);
       padding: 0;
       position: relative;
       margin: 0 0 15px;
@@ -28,7 +28,7 @@
       float: left;
       list-style: none;
       font-size: 14px;
-      color: #8492a6;
+      color: var(--color-base-silver);
       margin-bottom: -1px;
       position: relative;
 
@@ -43,8 +43,8 @@
         }
 
         &:hover {
-          background-color: #99a9bf;
-          color: #fff;
+          background-color: var(--color-light-silver);
+          color: var(--color-white);
         }
       }
 
@@ -53,7 +53,7 @@
       }
 
       &:hover {
-        color: #1f2d3d;
+        color: var(--color-base-black);
         cursor: pointer;
       }
 
@@ -96,8 +96,8 @@
           }
         }
         &.is-active {
-          border: 1px solid #d3dce6;
-          border-bottom-color: #fff;
+          border: 1px solid var(--color-base-gray);
+          border-bottom-color: var(--color-white);
           border-radius: 4px 4px 0 0;
 
           &.is-closable {
@@ -111,15 +111,15 @@
       }
     }
     @m border-card {
-      background: #fff;
-      border: 1px solid #d3dce6;
+      background: var(--color-white);
+      border: 1px solid var(--color-base-gray);
       box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
 
       &>.el-tabs__content {
         padding: 15px;
       }
       &>.el-tabs__header {
-        background-color: #eff2f7;
+        background-color: var(--color-extra-light-gray);
         margin: 0;
       }
       &>.el-tabs__header>.el-tabs__item {
@@ -129,15 +129,15 @@
         margin: * -1px;
 
         &.is-active {
-          background-color: #fff;
-          border-right-color: #d3dce6;
-          border-left-color: #d3dce6;
+          background-color: var(--color-white);
+          border-right-color: var(--color-base-gray);
+          border-left-color: var(--color-base-gray);
 
           &:first-child {
-            border-left-color: #d3dce6;
+            border-left-color: var(--color-base-gray);
           }
           &:last-child {
-            border-right-color: #d3dce6;
+            border-right-color: var(--color-base-gray);
           }
         }
       }

packages/theme-default/src/tag.css

@@ -31,7 +31,7 @@
       right: -2px;
 
       &:hover {
-        background-color: #fff;
+        background-color: var(--color-white);
         color: var(--tag-fill);
       }
     }
@@ -46,7 +46,7 @@
 
       & .el-tag__close:hover {
         background-color: var(--tag-gray-color);
-        color: #fff;
+        color: var(--color-white);
       }
     }
     @m primary {
@@ -59,7 +59,7 @@
 
       & .el-tag__close:hover {
         background-color: var(--tag-primary-color);
-        color: #fff;
+        color: var(--color-white);
       }
     }
     @m success {
@@ -72,7 +72,7 @@
 
       & .el-tag__close:hover {
         background-color: var(--tag-success-color);
-        color: #fff;
+        color: var(--color-white);
       }
     }
     @m warning {
@@ -85,7 +85,7 @@
 
       & .el-tag__close:hover {
         background-color: var(--tag-warning-color);
-        color: #fff;
+        color: var(--color-white);
       }
     }
     @m danger {
@@ -98,7 +98,7 @@
 
       & .el-tag__close:hover {
         background-color: var(--tag-danger-color);
-        color: #fff;
+        color: var(--color-white);
       }
     }
   }

packages/theme-default/src/time-select.css

@@ -19,7 +19,7 @@
 
 .time-select-item.selected:not(.disabled) {
   background-color: var(--datepicker-active-color);
-  color: #fff;
+  color: var(--color-white);
 
   &:hover {
     background-color: var(--color-primary);

packages/theme-default/src/tree.css

@@ -4,8 +4,8 @@
 @component-namespace el {
   @b tree {
     cursor: default;
-    background: #ffffff;
-    border: 1px solid #d3dce6;
+    background: var(--color-white);
+    border: 1px solid var(--color-base-gray);
 
     @e empty-block {
       position: relative;
@@ -20,7 +20,7 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      color: #5e6d82;
+      color: color(var(--color-primary) s(16%) l(44%));
     }
   }
 
@@ -40,7 +40,7 @@
         vertical-align: middle;
       }
       &:hover {
-        background: #e5e9f2;
+        background: var(--color-light-gray);
       }
     }
 
@@ -53,7 +53,7 @@
       margin-left: 10px;
       border: 6px solid transparent;
       border-right-width: 0;
-      border-left-color: #99a9bf;
+      border-left-color: var(--color-light-silver);
       border-left-width: 7px;
 
       transform: rotate(0deg);
@@ -84,7 +84,7 @@
       vertical-align: middle;
       margin-right: 4px;
       font-size: 14px;
-      color: #99a9bf;
+      color: var(--color-light-silver);
     }
 
     & > .el-tree-node__children {
@@ -99,7 +99,7 @@
 }
 
 .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-  background-color: #eff7ff;
+  background-color: color(var(--color-primary) tint(92%));
 }
 
 .collapse-transition {

packages/theme-default/src/upload.css

@@ -31,7 +31,7 @@
     @e file {
       transition: all .5s cubic-bezier(.55,0,.1,1);
       font-size: 14px;
-      color: #475669;
+      color: var(--color-extra-light-black);
       line-height: 32px;
       position: relative;
       box-sizing: border-box;
@@ -40,7 +40,7 @@
       position: relative;
 
       a {
-        color: #475669;
+        color: var(--color-extra-light-black);
         display: block;
         margin-right: 40px;
         overflow: hidden;
@@ -50,7 +50,7 @@
         white-space: nowrap;
 
         [class^="el-icon"] {
-          color: #99a9bf;
+          color: var(--color-light-silver);
           margin-right: 7px;
           height: 100%;
           line-height: inherit;
@@ -72,7 +72,7 @@
         padding-right: 0;
       }
       &:hover {
-        background-color: #eff2f7;
+        background-color: var(--color-extra-light-gray);
       }
       @when finished {
         & a:hover {
@@ -89,7 +89,7 @@
     }
     @e tip {
       font-size: 12px;
-      color: #8492a6;
+      color: var(--color-base-silver);
       margin-top: 7px;
     }
     @e btn-delete {
@@ -102,8 +102,8 @@
     }
   }
   @b dragger {
-    background-color: #f9fafc;
-    border: 1px solid #c0ccda;
+    background-color: var(--color-dark-white);
+    border: 1px solid var(--color-extra-light-silver);
     box-sizing: border-box;
     width: 360px;
     height: 180px;
@@ -119,7 +119,7 @@
     }
     & .el-icon-upload {
       font-size: 67px;
-      color: #99a9bf;
+      color: var(--color-light-silver);
       margin: 40px 0 16px;
       line-height: 50px;
     }
@@ -130,7 +130,7 @@
     & ~ .el-upload__files {
       margin-top: 7px;
       padding-top: 5px;
-      border-top: 1px solid rgba(#c0ccda, .2);
+      border-top: 1px solid rgba(var(--color-extra-light-silver), .2);
     }
 
     @e cover {
@@ -180,7 +180,7 @@
 
         & .btn {
           display: inline-block;
-          color: #fff;
+          color: var(--color-white);
           font-size: 14px;
           cursor: pointer;
           vertical-align: middle;
@@ -209,7 +209,7 @@
           }
 
           & i {
-            color: #fff;
+            color: var(--color-white);
             display: block;
             font-size: 24px;
             line-height: inherit;
@@ -222,7 +222,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        background-color: #fff;
+        background-color: var(--color-white);
         height: 36px;
         width: 100%;
         overflow: hidden;
@@ -234,7 +234,7 @@
         margin: 0;
         line-height: 36px;
         font-size: 14px;
-        color: #475669;
+        color: var(--color-extra-light-black);
       }
 
       & + .el-upload__inner {
@@ -245,7 +245,7 @@
     }
 
     @e text {
-      color: #99a9bf;
+      color: var(--color-light-silver);
       font-size: 14px;
       text-align: center;