element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/theme-chalk/src/common/var.scss

@@ -152,10 +152,16 @@ $font-size: map.merge(
   $font-size
 );
 
-// Disable base
-$disabled-fill-base: var(--el-background-color-base) !default;
-$disabled-color-base: var(--el-text-color-placeholder) !default;
-$disabled-border-base: var(--el-border-color-light) !default;
+// Disable default
+$disabled: () !default;
+$disabled: map.merge(
+  (
+    'bg-color': var(--el-bg-color-base),
+    'text-color': var(--el-text-color-placeholder),
+    'border-color': var(--el-border-color-light),
+  ),
+  $disabled
+);
 
 // Checkbox
 // css3 var in packages/theme-chalk/src/checkbox.scss
@@ -164,11 +170,11 @@ $checkbox: map.merge(
   (
     'font-size': 14px,
     'font-weight': var(--el-font-weight-primary),
-    'font-color': var(--el-text-color-regular),
+    'text-color': var(--el-text-color-regular),
     'input-height': 14px,
     'input-width': 14px,
     'border-radius': var(--el-border-radius-small),
-    'background-color': var(--el-color-white),
+    'bg-color': var(--el-color-white),
     'input-border': var(--el-border-base),
     'disabled-border-color': var(--el-border-color-base),
     'disabled-input-fill': #edf2fc,
@@ -176,9 +182,9 @@ $checkbox: map.merge(
     'disabled-checked-input-fill': var(--el-border-color-extra-light),
     'disabled-checked-input-border-color': var(--el-border-color-base),
     'disabled-checked-icon-color': var(--el-text-color-placeholder),
-    'checked-font-color': var(--el-color-primary),
+    'checked-text-color': var(--el-color-primary),
     'checked-input-border-color': var(--el-color-primary),
-    'checked-background-color': var(--el-color-primary),
+    'checked-bg-color': var(--el-color-primary),
     'checked-icon-color': var(--el-fill-base),
     'input-border-color-hover': var(--el-color-primary),
   ),
@@ -188,8 +194,8 @@ $checkbox: map.merge(
 $checkbox-button: () !default;
 $checkbox-button: map.merge(
   (
-    'checked-background-color': var(--el-color-primary),
-    'checked-font-color': var(--el-color-white),
+    'checked-bg-color': var(--el-color-primary),
+    'checked-text-color': var(--el-color-white),
     'checked-border-color': var(--el-color-primary),
   ),
   $checkbox-button
@@ -201,12 +207,12 @@ $radio: () !default;
 $radio: map.merge(
   (
     'font-size': var(--el-font-size-base),
-    'font-color': var(--el-text-color-regular),
+    'text-color': var(--el-text-color-regular),
     'font-weight': var(--el-font-weight-primary),
     'input-height': 14px,
     'input-width': 14px,
     'input-border-radius': var(--el-border-radius-circle),
-    'input-background-color': var(--el-color-white),
+    'input-bg-color': var(--el-color-white),
     'input-border': var(--el-border-base),
     'input-border-color': var(--el-border-color-base),
     'input-border-color-hover': var(--el-color-primary),
@@ -228,8 +234,8 @@ $radio-height: map.merge(
 $radio-button: () !default;
 $radio-button: map.merge(
   (
-    'checked-background-color': var(--el-color-primary),
-    'checked-font-color': var(--el-color-white),
+    'checked-bg-color': var(--el-color-primary),
+    'checked-text-color': var(--el-color-white),
     'checked-border-color': var(--el-color-primary),
     'disabled-checked-fill': var(--el-border-color-extra-light),
   ),
@@ -239,11 +245,11 @@ $radio-button: map.merge(
 $radio-disabled: () !default;
 $radio-disabled: map.merge(
   (
-    'input-border-color': var(--el-disabled-border-base),
-    'input-fill': var(--el-disabled-fill-base),
-    'icon-color': var(--el-disabled-fill-base),
-    'checked-input-border-color': var(--el-disabled-border-base),
-    'checked-input-fill': var(--el-disabled-fill-base),
+    'input-border-color': var(--el-disabled-border-color),
+    'input-fill': var(--el-disabled-bg-color),
+    'icon-color': var(--el-disabled-bg-color),
+    'checked-input-border-color': var(--el-disabled-border-color),
+    'checked-input-fill': var(--el-disabled-bg-color),
     'checked-icon-color': var(--el-text-color-placeholder),
   ),
   $radio-disabled
@@ -252,7 +258,7 @@ $radio-disabled: map.merge(
 $radio-checked: () !default;
 $radio-checked: map.merge(
   (
-    'font-color': var(--el-color-primary),
+    'text-color': var(--el-color-primary),
     'input-border-color': var(--el-color-primary),
     'icon-color': var(--el-color-primary),
   ),
@@ -295,7 +301,7 @@ $select: () !default;
 $select: map.merge(
   (
     'border-color-hover': var(--el-border-color-hover),
-    'disabled-border': var(--el-disabled-border-base),
+    'disabled-border': var(--el-disabled-border-color),
     'font-size': var(--el-font-size-base),
     'close-hover-color': var(--el-text-color-secondary),
     'input-color': var(--el-text-color-placeholder),
@@ -309,11 +315,11 @@ $select: map.merge(
 $select-option: () !default;
 $select-option: map.merge(
   (
-    'color': var(--el-text-color-regular),
+    'text-color': var(--el-text-color-regular),
     'disabled-color': var(--el-text-color-placeholder),
     'height': 34px,
-    'hover-background': var(--el-background-color-base),
-    'selected-font-color': var(--el-color-primary),
+    'hover-background': var(--el-bg-color-base),
+    'selected-text-color': var(--el-color-primary),
   ),
   $select-option
 );
@@ -321,7 +327,7 @@ $select-option: map.merge(
 $select-group: () !default;
 $select-group: map.merge(
   (
-    'color': var(--el-color-info),
+    'text-color': var(--el-color-info),
     'height': 30px,
     'font-size': 12px,
   ),
@@ -331,7 +337,7 @@ $select-group: map.merge(
 $select-dropdown: () !default;
 $select-dropdown: map.merge(
   (
-    'background': var(--el-color-white),
+    'bg-color': var(--el-color-white),
     'shadow': var(--el-box-shadow-light),
     'empty-color': var(--el-text-color-secondary),
     'max-height': 274px,
@@ -382,7 +388,7 @@ $message: () !default;
 $message: map.merge(
   (
     'min-width': 380px,
-    'background-color': #edf2fc,
+    'bg-color': #edf2fc,
     'padding': 15px 15px 15px 20px,
     'close-size': 16px,
     'close-icon-color': var(--el-text-color-placeholder),
@@ -421,11 +427,11 @@ $notification: map.merge(
 $input: () !default;
 $input: map.merge(
   (
-    'font-color': var(--el-text-color-regular),
+    'text-color': var(--el-text-color-regular),
     'border': var(--el-border-base),
     'border-color': var(--el-border-color-base),
     'border-radius': var(--el-border-radius-base),
-    'background-color': var(--el-color-white),
+    'bg-color': var(--el-color-white),
     'icon-color': var(--el-text-color-placeholder),
     'placeholder-color': var(--el-text-color-placeholder),
     'hover-border': var(--el-border-color-hover),
@@ -438,9 +444,9 @@ $input: map.merge(
 $input-disabled: () !default;
 $input-disabled: map.merge(
   (
-    'fill': var(--el-disabled-fill-base),
-    'border': var(--el-disabled-border-base),
-    'color': var(--el-disabled-color-base),
+    'fill': var(--el-disabled-bg-color),
+    'border': var(--el-disabled-border-color),
+    'text-color': var(--el-disabled-text-color),
     'placeholder-color': var(--el-text-color-placeholder),
   ),
   $input-disabled
@@ -493,14 +499,14 @@ $input-number-width: map.merge(
 $cascader: () !default;
 $cascader: map.merge(
   (
-    'menu-font-color': var(--el-text-color-regular),
-    'menu-selected-font-color': var(--el-color-primary),
+    'menu-text-color': var(--el-text-color-regular),
+    'menu-selected-text-color': var(--el-color-primary),
     'menu-fill': var(--el-fill-base),
     'menu-font-size': var(--el-font-size-base),
     'menu-radius': var(--el-border-radius-base),
     'menu-border': solid 1px var(--el-border-color-light),
     'menu-shadow': var(--el-box-shadow-light),
-    'node-background-hover': var(--el-background-color-base),
+    'node-background-hover': var(--el-bg-color-base),
     'node-color-disabled': var(--el-text-color-placeholder),
     'color-empty': var(--el-text-color-placeholder),
     'tag-background': #f0f2f5,
@@ -515,12 +521,18 @@ $button: map.merge(
   (
     'font-weight': var(--el-font-weight-primary),
     'border-color': var(--el-border-color-base),
-    'background-color': var(--el-color-white),
-    'font-color': var(--el-text-color-regular),
-    'disabled-font-color': var(--el-text-color-placeholder),
-    'disabled-background-color': var(--el-color-white),
+    'bg-color': var(--el-color-white),
+    'text-color': var(--el-text-color-regular),
+    'disabled-text-color': var(--el-disabled-text-color),
+    'disabled-bg-color': var(--el-color-white),
     'disabled-border-color': var(--el-border-color-light),
     'divide-border-color': rgba($color-white, 0.5),
+    'hover-text-color': var(--el-color-white),
+    'hover-bg-color': var(--el-color-primary-light-9),
+    'hover-border-color': var(--el-color-primary-light-7),
+    'active-text-color': var(--el-button-hover-text-color),
+    'active-border-color': var(--el-color-primary),
+    'active-bg-color': var(--el-button-hover-bg-color),
   ),
   $button
 );
@@ -530,8 +542,8 @@ $button-hover-tint-percent: 20%;
 $button-active-shade-percent: 10%;
 
 $button-border-color: () !default;
-$button-background-color: () !default;
-$button-font-color: () !default;
+$button-bg-color: () !default;
+$button-text-color: () !default;
 
 @each $type in $types {
   $button-border-color: map.merge(
@@ -541,18 +553,11 @@ $button-font-color: () !default;
     $button-border-color
   ) !global;
 
-  $button-background-color: map.merge(
+  $button-bg-color: map.merge(
     (
       $type: map.get($colors, $type, 'base'),
     ),
-    $button-background-color
-  ) !global;
-
-  $button-font-color: map.merge(
-    (
-      $type: map.get($colors, 'white'),
-    ),
-    $button-font-color
+    $button-bg-color
   ) !global;
 }
 
@@ -623,7 +628,7 @@ $dialog: map.merge(
   (
     'width': 50%,
     'margin-top': 15vh,
-    'background-color': var(--el-color-white),
+    'bg-color': var(--el-color-white),
     'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
     'title-font-size': var(--el-font-size-large),
     'content-font-size': 14px,
@@ -640,15 +645,15 @@ $table: map.merge(
   (
     'border-color': var(--el-border-color-lighter),
     'border': 1px solid var(--el-table-border-color),
-    'font-color': var(--el-text-color-regular),
-    'header-font-color': var(--el-text-color-secondary),
-    'row-hover-background-color': var(--el-background-color-base),
-    'current-row-background-color': var(--el-color-primary-light-9),
-    'header-background-color': var(--el-color-white),
+    'text-color': var(--el-text-color-regular),
+    'header-text-color': var(--el-text-color-secondary),
+    'row-hover-bg-color': var(--el-bg-color-base),
+    'current-row-bg-color': var(--el-color-primary-light-9),
+    'header-bg-color': var(--el-color-white),
     'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
-    'background-color': var(--el-color-white),
-    'tr-background-color': var(--el-color-white),
-    'expanded-cell-background-color': var(--el-color-white),
+    'bg-color': var(--el-color-white),
+    'tr-bg-color': var(--el-color-white),
+    'expanded-cell-bg-color': var(--el-color-white),
   ),
   $table
 );
@@ -659,14 +664,14 @@ $pagination: () !default;
 $pagination: map.merge(
   (
     'font-size': 13px,
-    'background-color': var(--el-color-white),
-    'font-color': var(--el-text-color-primary),
+    'bg-color': var(--el-color-white),
+    'text-color': var(--el-text-color-primary),
     'border-radius': 3px,
     'button-color': var(--el-text-color-primary),
     'button-width': 35.5px,
     'button-height': 28px,
     'button-disabled-color': var(--el-text-color-placeholder),
-    'button-disabled-background-color': var(--el-color-white),
+    'button-disabled-bg-color': var(--el-color-white),
     'hover-color': var(--el-color-primary),
     'height-extra-small': 22px,
     'line-height-extra-small': var(--el-pagination-height-extra-small),
@@ -679,7 +684,7 @@ $pagination: map.merge(
 $popup: () !default;
 $popup: map.merge(
   (
-    'modal-background-color': var(--el-color-black),
+    'modal-bg-color': var(--el-color-black),
     'modal-opacity': 0.5,
   ),
   $popup
@@ -690,13 +695,13 @@ $popup: map.merge(
 $popover: () !default;
 $popover: map.merge(
   (
-    'background-color': var(--el-color-white),
+    'bg-color': var(--el-color-white),
     'font-size': var(--el-font-size-base),
     'border-color': var(--el-border-color-lighter),
     'padding': 12px,
     'padding-large': 18px 20px,
     'title-font-size': 16px,
-    'title-font-color': var(--el-text-color-primary),
+    'title-text-color': var(--el-text-color-primary),
     'border-radius': 4px,
   ),
   $popover
@@ -727,7 +732,7 @@ $tooltip: () !default;
 $tooltip: map.merge(
   (
     'fill': var(--el-text-color-primary),
-    'color': var(--el-color-white),
+    'text-color': var(--el-color-white),
     'font-size': 12px,
     'border-color': var(--el-text-color-primary),
     'arrow-size': 6px,
@@ -775,8 +780,8 @@ $tag-height: map.merge(
 $tree: () !default;
 $tree: map.merge(
   (
-    'node-hover-background-color': var(--el-background-color-base),
-    'font-color': var(--el-text-color-regular),
+    'node-hover-bg-color': var(--el-bg-color-base),
+    'text-color': var(--el-text-color-regular),
     'expand-icon-color': var(--el-text-color-placeholder),
   ),
   $tree
@@ -799,7 +804,7 @@ $dropdown: map.merge(
 $drawer: () !default;
 $drawer: map.merge(
   (
-    'background-color': var(--el-dialog-background-color, var(--el-color-white)),
+    'bg-color': var(--el-dialog-bg-color, var(--el-color-white)),
     'padding-primary': var(--el-dialog-padding-primary, 20px),
   ),
   $drawer
@@ -810,7 +815,7 @@ $drawer: map.merge(
 $badge: () !default;
 $badge: map.merge(
   (
-    'background-color': var(--el-color-danger),
+    'bg-color': var(--el-color-danger),
     'radius': 10px,
     'font-size': 12px,
     'padding': 6px,
@@ -827,7 +832,7 @@ $card: map.merge(
       var(--el-border-color-light, map.get($border-color, 'lighter')),
     'border-radius': 4px,
     'padding': 20px,
-    'background-color': var(--el-color-white),
+    'bg-color': var(--el-color-white),
   ),
   $card
 );
@@ -835,7 +840,7 @@ $card: map.merge(
 $dark-card: () !default;
 $dark-card: map.merge(
   (
-    'background-color': var(--el-color-black),
+    'bg-color': var(--el-color-black),
   ),
   $dark-card
 );
@@ -845,9 +850,9 @@ $dark-card: map.merge(
 $slider: () !default;
 $slider: map.merge(
   (
-    'main-background-color': var(--el-color-primary),
-    'runway-background-color': var(--el-border-color-light),
-    'stop-background-color': var(--el-color-white),
+    'main-bg-color': var(--el-color-primary),
+    'runway-bg-color': var(--el-border-color-light),
+    'stop-bg-color': var(--el-color-white),
     'disable-color': var(--el-text-color-placeholder),
     'margin': 16px 0,
     'border-radius': 3px,
@@ -867,8 +872,8 @@ $menu: map.merge(
     'active-color': var(--el-color-primary),
     'text-color': var(--el-text-color-primary),
     'hover-text-color': var(--el-text-color-primary),
-    'background-color': var(--el-color-white),
-    'hover-background-color': var(--el-color-primary-light-9),
+    'bg-color': var(--el-color-white),
+    'hover-bg-color': var(--el-color-primary-light-9),
     'item-font-size': var(--el-font-size-base),
     'item-hover-fill': var(--el-color-primary-light-9),
     'border-color': #e6e6e6,
@@ -894,16 +899,16 @@ $rate: map.merge(
 $datepicker: () !default;
 $datepicker: map.merge(
   (
-    'font-color': var(--el-text-color-regular),
-    'off-font-color': var(--el-text-color-placeholder),
-    'header-font-color': var(--el-text-color-regular),
+    'text-color': var(--el-text-color-regular),
+    'off-text-color': var(--el-text-color-placeholder),
+    'header-text-color': var(--el-text-color-regular),
     'icon-color': var(--el-text-color-primary),
-    'border-color': var(--el-disabled-border-base),
+    'border-color': var(--el-disabled-border-color),
     'inner-border-color': var(--el-border-color-light),
-    'inrange-background-color': var(--el-border-color-extra-light),
-    'inrange-hover-background-color': var(--el-border-color-extra-light),
+    'inrange-bg-color': var(--el-border-color-extra-light),
+    'inrange-hover-bg-color': var(--el-border-color-extra-light),
     'active-color': var(--el-color-primary),
-    'hover-font-color': var(--el-color-primary),
+    'hover-text-color': var(--el-color-primary),
   ),
   $datepicker
 );
@@ -936,9 +941,9 @@ $scrollbar: () !default;
 $scrollbar: map.merge(
   (
     'opacity': 0.3,
-    'background-color': var(--el-text-color-secondary),
+    'bg-color': var(--el-text-color-secondary),
     'hover-opacity': 0.5,
-    'hover-background-color': var(--el-text-color-secondary),
+    'hover-bg-color': var(--el-text-color-secondary),
   ),
   $scrollbar
 );
@@ -968,12 +973,12 @@ $collapse: map.merge(
   (
     'border-color': var(--el-border-color-lighter),
     'header-height': 48px,
-    'header-background-color': var(--el-color-white),
-    'header-font-color': var(--el-text-color-primary),
+    'header-bg-color': var(--el-color-white),
+    'header-text-color': var(--el-text-color-primary),
     'header-font-size': 13px,
-    'content-background-color': var(--el-color-white),
+    'content-bg-color': var(--el-color-white),
     'content-font-size': 13px,
-    'content-font-color': var(--el-text-color-primary),
+    'content-text-color': var(--el-text-color-primary),
   ),
   $collapse
 );
@@ -987,7 +992,7 @@ $transfer: map.merge(
     'border-radius': var(--el-border-radius-base),
     'panel-width': 200px,
     'panel-header-height': 40px,
-    'panel-header-background-color': var(--el-background-color-base),
+    'panel-header-bg-color': var(--el-bg-color-base),
     'panel-footer-height': 40px,
     'panel-body-height': 246px,
     'item-height': 30px,
@@ -1013,9 +1018,9 @@ $timeline: map.merge(
 $backtop: () !default;
 $backtop: map.merge(
   (
-    'background-color': var(--el-color-white),
-    'font-color': var(--el-color-primary),
-    'hover-background-color': var(--el-border-color-extra-light),
+    'bg-color': var(--el-color-white),
+    'text-color': var(--el-color-primary),
+    'hover-bg-color': var(--el-border-color-extra-light),
   ),
   $backtop
 );
@@ -1027,18 +1032,18 @@ $link: map.merge(
   (
     'font-size': var(--el-font-size-base),
     'font-weight': var(--el-font-weight-primary),
-    'default-font-color': var(--el-text-color-regular),
+    'default-text-color': var(--el-text-color-regular),
     'default-active-color': var(--el-color-primary),
-    'disabled-font-color': var(--el-text-color-placeholder),
+    'disabled-text-color': var(--el-text-color-placeholder),
   ),
   $link
 );
 
-$link-font-color: () !default;
+$link-text-color: () !default;
 
 @each $type in $types {
-  $link-font-color: map.merge(
-    $link-font-color,
+  $link-text-color: map.merge(
+    $link-text-color,
     (
       $type: map.get($colors, $type, 'base'),
     )
@@ -1052,7 +1057,7 @@ $calendar: map.merge(
   (
     'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)),
     'header-border-bottom': var(--el-calendar-border),
-    'selected-background-color': #f2f8fe,
+    'selected-bg-color': #f2f8fe,
     'cell-width': 85px,
   ),
   $calendar
@@ -1074,8 +1079,8 @@ $form: map.merge(
 $avatar: () !default;
 $avatar: map.merge(
   (
-    'font-color': #fff,
-    'background-color': #c0c4cc,
+    'text-color': #fff,
+    'bg-color': #c0c4cc,
     'text-font-size': 14px,
     'icon-font-size': 18px,
     'border-radius': var(--el-border-radius-base),

package/theme-chalk/src/date-picker/date-picker.scss

@@ -72,7 +72,7 @@
     color: var(--el-text-color-regular);
 
     &:hover {
-      color: var(--el-datepicker-hover-font-color);
+      color: var(--el-datepicker-hover-text-color);
     }
 
     &.active {

package/theme-chalk/src/date-picker/date-table.scss

@@ -9,10 +9,10 @@
     .#{$namespace}-date-table__row {
       &:hover {
         .el-date-table-cell {
-          background-color: var(--el-datepicker-inrange-background-color);
+          background-color: var(--el-datepicker-inrange-bg-color);
         }
         td.available:hover {
-          color: var(--el-datepicker-font-color);
+          color: var(--el-datepicker-text-color);
         }
         td:first-child .el-date-table-cell {
           margin-left: 5px;
@@ -27,7 +27,7 @@
       }
 
       &.current .el-date-table-cell {
-        background-color: var(--el-datepicker-inrange-background-color);
+        background-color: var(--el-datepicker-inrange-bg-color);
       }
     }
   }
@@ -60,7 +60,7 @@
 
     &.next-month,
     &.prev-month {
-      color: var(--el-datepicker-off-font-color);
+      color: var(--el-datepicker-off-text-color);
     }
 
     &.today {
@@ -76,13 +76,13 @@
     }
 
     &.available:hover {
-      color: var(--el-datepicker-hover-font-color);
+      color: var(--el-datepicker-hover-text-color);
     }
 
     &.in-range .el-date-table-cell {
-      background-color: var(--el-datepicker-inrange-background-color);
+      background-color: var(--el-datepicker-inrange-bg-color);
       &:hover {
-        background-color: var(--el-datepicker-inrange-hover-background-color);
+        background-color: var(--el-datepicker-inrange-hover-bg-color);
       }
     }
 
@@ -122,10 +122,10 @@
     &.selected .el-date-table-cell {
       margin-left: 5px;
       margin-right: 5px;
-      background-color: var(--el-datepicker-inrange-background-color);
+      background-color: var(--el-datepicker-inrange-bg-color);
       border-radius: 15px;
       &:hover {
-        background-color: var(--el-datepicker-inrange-hover-background-color);
+        background-color: var(--el-datepicker-inrange-hover-bg-color);
       }
     }
 
@@ -137,13 +137,13 @@
 
     &.week {
       font-size: 80%;
-      color: var(--el-datepicker-header-font-color);
+      color: var(--el-datepicker-header-text-color);
     }
   }
 
   th {
     padding: 5px;
-    color: var(--el-datepicker-header-font-color);
+    color: var(--el-datepicker-header-text-color);
     font-weight: 400;
     border-bottom: solid 1px var(--el-border-color-lighter);
   }

package/theme-chalk/src/date-picker/month-table.scss

@@ -41,18 +41,18 @@
       height: 36px;
       display: block;
       line-height: 36px;
-      color: var(--el-datepicker-font-color);
+      color: var(--el-datepicker-text-color);
       margin: 0 auto;
       border-radius: 18px;
       &:hover {
-        color: var(--el-datepicker-hover-font-color);
+        color: var(--el-datepicker-hover-text-color);
       }
     }
 
     &.in-range div {
-      background-color: var(--el-datepicker-inrange-background-color);
+      background-color: var(--el-datepicker-inrange-bg-color);
       &:hover {
-        background-color: var(--el-datepicker-inrange-hover-background-color);
+        background-color: var(--el-datepicker-inrange-hover-bg-color);
       }
     }
     &.start-date div,

package/theme-chalk/src/date-picker/picker-panel.scss

@@ -43,14 +43,14 @@
     background-color: transparent;
     line-height: 28px;
     font-size: 14px;
-    color: var(--el-datepicker-font-color);
+    color: var(--el-datepicker-text-color);
     padding-left: 12px;
     text-align: left;
     outline: none;
     cursor: pointer;
 
     &:hover {
-      color: var(--el-datepicker-hover-font-color);
+      color: var(--el-datepicker-hover-text-color);
     }
 
     &.active {
@@ -86,11 +86,11 @@
     margin-top: 8px;
 
     &:hover {
-      color: var(--el-datepicker-hover-font-color);
+      color: var(--el-datepicker-hover-text-color);
     }
 
     @include when(disabled) {
-      color: var(--el-font-color-disabled-base);
+      color: var(--el-text-color-disabled-base);
 
       &:hover {
         cursor: not-allowed;