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/common/var.css

@@ -12,33 +12,44 @@
   /* Colors
   -------------------------- */
   --color-primary: #20a0ff;
+
   --color-success: #13ce66;
   --color-warning: #f7ba2a;
   --color-danger: #ff4949;
   --color-info: #50bfff;
-  --color-blue: #2e90fe;
-  --color-blue-light: #5da9ff;
-  --color-blue-lighter: rgba(var(--color-blue), 0.12);
+
+  --color-secondary: color(var(--color-primary) s(99%) l(*0.9));
   --color-white: #fff;
+  --color-dark-white: color(var(--color-white) blend(var(--color-primary) 2%));
   --color-black: #000;
-  --color-grey: #c0ccda;
+
+  --color-base-black: color(var(--color-primary) h(+6) s(33%) l(18%));
+  --color-light-black: color(var(--color-base-black) h(+5) s(27%) l(27%));
+  --color-extra-light-black: color(var(--color-base-black) h(+2) s(19%) l(35%));
+
+  --color-base-silver: color(var(--color-base-black) h(+3) s(16%) l(58%));
+  --color-light-silver: color(var(--color-base-black) h(+3) s(23%) l(67%));
+  --color-extra-light-silver: color(var(--color-base-black) s(26%) l(80%));
+
+  --color-base-gray: color(var(--color-base-black) s(28%) l(86%));
+  --color-light-gray: color(var(--color-base-black) h(+10) s(33%) l(92%));
+  --color-extra-light-gray: color(var(--color-base-black) h(+6) s(33%) l(95%));
 
   /* Link
   -------------------------- */
-  --link-color: #475669;
+  --link-color: var(--color-extra-light-black);
   --link-hover-color: var(--color-primary);
 
   /* Border
   -------------------------- */
   --border-width-base: 1px;
   --border-style-base: solid;
-  --border-color-base: var(--color-grey);
-  --border-color-hover: #8492a6;
+  --border-color-base: var(--color-extra-light-silver);
+  --border-color-hover: var(--color-base-silver);
   --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
   --border-radius-base: 4px;
   --border-radius-small: 2px;
   --border-radius-circle: 100%;
-  --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
 
   /* Box-shadow
   -------------------------- */
@@ -52,7 +63,7 @@
   /* Font
   -------------------------- */
   --font-size-base: 14px;
-  --font-color-base: #1f2d3d;
+  --font-color-base: var(--color-base-black);
   --font-color-disabled-base: #bbb;
 
   /* Size
@@ -67,9 +78,9 @@
 
   /* Disable base
   -------------------------- */
-  --disabled-fill-base: #EFF2F7;
+  --disabled-fill-base: var(--color-extra-light-gray);
   --disabled-color-base: #bbb;
-  --disabled-border-base: #D3DCE6;
+  --disabled-border-base: var(--color-base-gray);
 
   /* Icon
   -------------------------- */
@@ -78,7 +89,7 @@
   /* Checkbox
   -------------------------- */
   --checkbox-font-size: 14px;
-  --checkbox-color: #1f2d3d;
+  --checkbox-color: var(--color-base-black);
   --checkbox-input-height: 18px;
   --checkbox-input-width: 18px;
   --checkbox-input-border-radius: var(--border-radius-base);
@@ -95,17 +106,16 @@
   --checkbox-disabled-checked-input-border-color: var(--disabled-border-base);
   --checkbox-disabled-checked-icon-color: var(--color-white);
 
-  --checkbox-checked-input-border-color: var(--color-blue);
+  --checkbox-checked-input-border-color: var(--color-secondary);
   --checkbox-checked-input-fill: var(--color-primary);
   --checkbox-checked-icon-color: var(--fill-base);
 
-  --checkbox-input-shadow-hover: var(--shadow-base);
   --checkbox-input-border-color-hover: var(--color-primary);
 
   /* Radio
   -------------------------- */
   --radio-font-size: 14px;
-  --radio-color: #1f2d3d;
+  --radio-color: var(--color-base-black);
   --radio-input-height: 18px;
   --radio-input-width: 18px;
   --radio-input-border-radius: var(--border-radius-circle);
@@ -126,7 +136,6 @@
   --radio-checked-input-fill: var(--color-white);
   --radio-checked-icon-color: var(--color-primary);
 
-  --radio-input-shadow-hover: var(--shadow-base);
   --radio-input-border-color-hover: var(--color-primary);
 
   --radio-button-font-size: var(--font-size-base);
@@ -136,9 +145,9 @@
   --select-border-color-hover: var(--border-color-hover);
   --select-disabled-border: var(--disabled-border-base);
   --select-font-size: var(--font-size-base);
-  --select-close-hover-color: #99a9bf;
+  --select-close-hover-color: var(--color-light-silver);
 
-  --select-input-color: var(--color-grey);
+  --select-input-color: var(--color-extra-light-silver);
   --select-multiple-input-color: #666;
   --select-input-focus-background: var(--color-primary);
   --select-input-font-size: 12px;
@@ -148,11 +157,11 @@
   --select-tag-background: var(--color-primary);
 
   --select-option-color: var(--link-color);
-  --select-option-disabled-color: var(--color-grey);
+  --select-option-disabled-color: var(--color-extra-light-silver);
   --select-option-height: 36px;
-  --select-option-hover-background: #e5e9f2;
+  --select-option-hover-background: var(--color-light-gray);
   --select-option-selected: var(--color-primary);
-  --select-option-selected-hover: #1D8CE0;
+  --select-option-selected-hover: shade(var(--color-primary), 0.12);
 
   --select-group-color: #999;
   --select-group-height: 30px;
@@ -203,8 +212,8 @@
   --message-min-width: 300px;
   --message-padding: 10px 12px;
   --message-content-color: var(--border-color-hover);
-  --message-close-color: var(--color-grey);
-  --message-close-hover-color: #99A9BF;
+  --message-close-color: var(--color-extra-light-silver);
+  --message-close-hover-color: var(--color-light-silver);
 
   --message-success-color: var(--color-success);
   --message-info-color: var(--color-info);
@@ -220,10 +229,10 @@
   --notification-font-size: var(--font-size-base);
   --notification-color: var(--border-color-hover);
   --notification-title-font-size: 16px;
-  --notification-title-color: #1f2d3d;
+  --notification-title-color: var(--color-base-black);
 
-  --notification-close-color: var(--color-grey);
-  --notification-close-hover-color: #99A9BF;
+  --notification-close-color: var(--color-extra-light-silver);
+  --notification-close-hover-color: var(--color-light-silver);
 
   --notification-success-color: var(--color-success);
   --notification-info-color: var(--color-info);
@@ -236,7 +245,6 @@
   --input-color: var(--font-color-base);
   --input-width: 140px;
   --input-height: 36px;
-  --input-shadow-hover: var(--shadow-base);
   --input-border: var(--border-base);
   --input-border-color: var(--border-color-base);
   --input-border-radius: var(--border-radius-base);
@@ -244,8 +252,8 @@
   --input-fill: var(--color-white);
   --input-fill-disabled: var(--disabled-fill-base);
   --input-color-disabled: var(--font-color-disabled-base);
-  --input-icon-color: var(--color-grey);
-  --input-placeholder-color: #99a9bf;
+  --input-icon-color: var(--color-extra-light-silver);
+  --input-placeholder-color: var(--color-light-silver);
   --input-max-width: 314px;
 
   --input-hover-border: var(--border-color-hover);
@@ -256,7 +264,7 @@
   --input-disabled-fill: var(--disabled-fill-base);
   --input-disabled-border: var(--disabled-border-base);
   --input-disabled-color: var(--disabled-color-base);
-  --input-disabled-placeholder-color: var(--color-grey);
+  --input-disabled-placeholder-color: var(--color-extra-light-silver);
 
   --input-large-font-size: 16px;
   --input-large-height: 42px;
@@ -276,8 +284,8 @@
   --cascader-menu-border-color: var(--border-color-base);
   --cascader-menu-border-width: var(--border-width-base);
   --cascader-menu-color: var(--font-color-base);
-  --cascader-menu-option-color-active: var(--color-blue);
-  --cascader-menu-option-fill-active: rgba(var(--color-blue), 0.12);
+  --cascader-menu-option-color-active: var(--color-secondary);
+  --cascader-menu-option-fill-active: rgba(var(--color-secondary), 0.12);
   --cascader-menu-option-color-hover: var(--font-color-base);
   --cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06);
   --cascader-menu-option-color-disabled: #999;
@@ -301,15 +309,14 @@
   -------------------------- */
   --tab-font-size: var(--font-size-base);
   --tab-border-line: 1px solid #e4e4e4;
-  --tab-header-color-active: var(--color-blue);
+  --tab-header-color-active: var(--color-secondary);
   --tab-header-color-hover: var(--font-color-base);
   --tab-header-color: var(--font-color-base);
   --tab-header-fill-active: rgba(var(--color-black), 0.06);
   --tab-header-fill-hover: rgba(var(--color-black), 0.06);
   --tab-vertical-header-width: 90px;
   --tab-vertical-header-count-color: var(--color-white);
-  --tab-vertical-header-count-fill: var(--color-blue);
-  --tab-horizontal-border: 2px solid #438de0;
+  --tab-vertical-header-count-fill: var(--color-secondary);
 
   /* Button
   -------------------------- */
@@ -331,7 +338,7 @@
   --button-mini-padding-vertical: 4px;
   --button-mini-padding-horizontal: 4px;
 
-  --button-default-color: #1F2D3D;
+  --button-default-color: var(--color-base-black);
   --button-default-fill: var(--color-white);
   --button-default-border: #c4c4c4;
 
@@ -339,8 +346,8 @@
   --button-ghost-fill: transparent;
   --button-ghost-border: none;
 
-  --button-disabled-color: var(--color-grey);
-  --button-disabled-fill: #EFF2F7;
+  --button-disabled-color: var(--color-extra-light-silver);
+  --button-disabled-fill: var(--color-extra-light-gray);
   --button-disabled-border: var(--disabled-border-base);
 
   --button-primary-border: var(--color-primary);
@@ -374,9 +381,9 @@
   /* Switch
  -------------------------- */
   --switch-on-color: var(--color-primary);
-  --switch-off-color: var(--color-grey);
-  --switch-disabled-color: #E5E9F3;
-  --switch-disabled-text-color: #F9FAFC;
+  --switch-off-color: var(--color-extra-light-silver);
+  --switch-disabled-color: var(--color-light-gray);
+  --switch-disabled-text-color: var(--color-dark-white);
 
   --switch-font-size: var(--font-size-base);
   --switch-core-border-radius: 12px;
@@ -386,22 +393,21 @@
 
   /* Dialog
  -------------------------- */
-  --dialog-background-color: var(--color-blue);
-  --dialog-footer-background: var(--color-blue-lighter);
+  --dialog-background-color: var(--color-secondary);
   --dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   --dialog-tiny-width: 30%;
   --dialog-small-width: 50%;
   --dialog-large-width: 90%;
-  --dialog-close-color: var(--color-grey);
+  --dialog-close-color: var(--color-extra-light-silver);
   --dialog-close-hover-color: var(--color-primary);
   --dialog-title-font-size: 16px;
   --dialog-font-size: 14px;
 
   /* Table
  -------------------------- */
-  --table-border-color: #e0e6ed;
-  --table-text-color: #1f2d3d;
-  --table-header-background: #EFF2F7;
+  --table-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
+  --table-text-color: var(--color-base-black);
+  --table-header-background: var(--color-extra-light-gray);
 
   /* Pagination
  -------------------------- */
@@ -409,7 +415,7 @@
   --pagination-fill: var(--color-white);
   --pagination-color: var(--link-color);
   --pagination-border-radius: 2px;
-  --pagination-button-color: #99a9bf;
+  --pagination-button-color: var(--color-light-silver);
   --pagination-button-size: 28px;
   --pagination-button-disabled-color: #e4e4e4;
   --pagination-button-disabled-fill: var(--color-white);
@@ -425,14 +431,14 @@
   --popover-arrow-size: 6px;
   --popover-padding: 10px;
   --popover-title-font-size: 13px;
-  --popover-title-color: #1f2d3d;
+  --popover-title-color: var(--color-base-black);
 
   /* Tooltip
   -------------------------- */
-  --tooltip-fill: #1f2d3d;
+  --tooltip-fill: var(--color-base-black);
   --tooltip-color: var(--color-white);
   --tooltip-font-size: 12px;
-  --tooltip-border-color: #1f2d3d;
+  --tooltip-border-color: var(--color-base-black);
   --tooltip-arrow-size: 6px;
   --tooltip-padding: 10px;
 
@@ -445,8 +451,8 @@
   --tag-font-size: 12px;
   --tag-border-radius: 4px;
 
-  --tag-gray-fill: #e5e9f2;
-  --tag-gray-border: #e5e9f2;
+  --tag-gray-fill: var(--color-light-gray);
+  --tag-gray-border: var(--color-light-gray);
   --tag-gray-color: var(--link-color);
 
   --tag-primary-fill: rgba(32,159,255,0.10);
@@ -468,7 +474,7 @@
   /* Dropdown
   -------------------------- */
   --dropdown-menu-box-shadow: var(--box-shadow-dark);
-  --dropdown-menuItem-hover-fill: #e5e9f2;
+  --dropdown-menuItem-hover-fill: var(--color-light-gray);
   --dropdown-menuItem-hover-color: var(--link-color);
 
   /* Badge
@@ -488,10 +494,10 @@
   /* Slider
   --------------------------*/
   --slider-main-background-color: var(--color-primary);
-  --slider-runway-background-color: #e5e9f2;
-  --slider-button-hover-color: #1d8ce0;
-  --slider-stop-background-color: var(--color-grey);
-  --slider-disable-color: var(--color-grey);
+  --slider-runway-background-color: var(--color-light-gray);
+  --slider-button-hover-color: shade(var(--color-primary), 0.12);
+  --slider-stop-background-color: var(--color-extra-light-silver);
+  --slider-disable-color: var(--color-extra-light-silver);
 
   --slider-margin: 16px 0;
   --slider-border-radius: 3px;
@@ -509,14 +515,14 @@
   /* Steps
   --------------------------*/
   --menu-item-color: var(--link-color);
-  --menu-item-fill: #eff2f7;
+  --menu-item-fill: var(--color-extra-light-gray);
   --menu-item-hover-fill: var(--disabled-border-base);
-  --submenu-item-fill: #e5e9f2;
+  --submenu-item-fill: var(--color-light-gray);
 
   --dark-menu-item-color: var(--link-color);
-  --dark-menu-item-fill: #324057;
+  --dark-menu-item-fill: var(--color-light-black);
   --dark-menu-item-hover-fill: var(--link-color);
-  --dark-submenu-item-fill: #1f2d3d;
+  --dark-submenu-item-fill: var(--color-base-black);
 
   /* Rate
   --------------------------*/
@@ -524,19 +530,19 @@
   --rate-font-size: var(--font-size-base);
   --rate-icon-size: 18px;
   --rate-icon-margin: 6px;
-  --rate-icon-color: #C6D1DE;
+  --rate-icon-color: var(--color-extra-light-silver);
 
   /* DatePicker
   --------------------------*/
   --datepicker-color: var(--link-color);
   --datepicker-off-color: #ddd;
   --datepicker-header-color: var(--border-color-hover);
-  --datepicker-icon-color: #99a9bf;
+  --datepicker-icon-color: var(--color-light-silver);
   --datepicker-border-color: var(--disabled-border-base);
   --datepicker-inner-border-color: #e4e4e4;
-  --datepicker-cell-hover-color: #e5e9f2;
-  --datepicker-inrange-color: #D3ECFF;
-  --datepicker-inrange-hover-color: #AFDCFF;
+  --datepicker-cell-hover-color: var(--color-light-gray);
+  --datepicker-inrange-color: tint(var(--color-primary), 0.8);
+  --datepicker-inrange-hover-color: tint(var(--color-primary), 0.64);
   --datepicker-active-color: var(--color-primary);
   --datepicker-text-hover-color: var(--color-primary);
 
@@ -547,8 +553,8 @@
 
   /* Scrollbar
   --------------------------*/
-  --scrollbar-background-color: rgba(#99a9bf, .3);
-  --scrollbar-hover-background-color: rgba(#99a9bf, .5);
+  --scrollbar-background-color: rgba(var(--color-light-silver), .3);
+  --scrollbar-hover-background-color: rgba(var(--color-light-silver), .5);
 
   /* Carousel
   --------------------------*/
@@ -564,14 +570,14 @@
 
   /* Collapse
   --------------------------*/
-  --collapse-border-color: #e0e6ed;
+  --collapse-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
   --collapse-header-height: 43px;
   --collapse-border-radius: 0;
   --collapse-header-padding: 20px;
-  --collapse-header-fill: #fff;
-  --collapse-header-color: #475669;
+  --collapse-header-fill: var(--color-white);
+  --collapse-header-color: var(--color-extra-light-black);
   --collapse-header-size: 13px;
-  --collapse-content-fill: #f9fafc;
+  --collapse-content-fill: var(--color-dark-white);
   --collapse-content-size: 13px;
-  --collapse-content-color: #1f2d3d;
+  --collapse-content-color: var(--color-base-black);
 }

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;