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

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

@@ -173,7 +173,7 @@
   @include when(disabled) {
     background-color: map.get($input-disabled, 'fill');
     border-color: map.get($input-disabled, 'border');
-    color: map.get($input-disabled, 'color');
+    color: map.get($input-disabled, 'text-color');
     cursor: not-allowed;
 
     &:hover,
@@ -183,7 +183,7 @@
 
     input {
       background-color: map.get($input-disabled, 'fill');
-      color: map.get($input-disabled, 'color');
+      color: map.get($input-disabled, 'text-color');
       cursor: not-allowed;
       &::placeholder {
         color: map.get($input-disabled, 'placeholder-color');
@@ -191,7 +191,7 @@
     }
 
     .#{$namespace}-range-separator {
-      color: map.get($input-disabled, 'color');
+      color: map.get($input-disabled, 'text-color');
     }
   }
 }

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

@@ -23,7 +23,7 @@
     }
 
     &.disabled .cell {
-      background-color: var(--el-background-color-base);
+      background-color: var(--el-bg-color-base);
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 
@@ -37,11 +37,11 @@
       height: 32px;
       display: block;
       line-height: 32px;
-      color: var(--el-datepicker-font-color);
+      color: var(--el-datepicker-text-color);
       margin: 0 auto;
 
       &:hover {
-        color: var(--el-datepicker-hover-font-color);
+        color: var(--el-datepicker-hover-text-color);
       }
     }
 

package/theme-chalk/src/dialog.scss

@@ -11,7 +11,7 @@
 
   position: relative;
   margin: var(--el-dialog-margin-top, 15vh) auto 50px;
-  background: var(--el-dialog-background-color);
+  background: var(--el-dialog-bg-color);
   border-radius: var(--el-border-radius-small);
   box-shadow: var(--el-dialog-box-shadow);
   box-sizing: border-box;

package/theme-chalk/src/drawer.scss

@@ -11,7 +11,7 @@ $directions: rtl, ltr, ttb, btt;
 @include b(drawer) {
   position: absolute;
   box-sizing: border-box;
-  background-color: var(--el-drawer-background-color);
+  background-color: var(--el-drawer-bg-color);
   display: flex;
   flex-direction: column;
   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),

package/theme-chalk/src/dropdown.scss

@@ -148,7 +148,7 @@
 
     @include when(disabled) {
       cursor: not-allowed;
-      color: var(--el-font-color-disabled-base);
+      color: var(--el-text-color-disabled-base);
     }
   }
 

package/theme-chalk/src/input-number.scss

@@ -56,7 +56,7 @@
     }
 
     &.is-disabled {
-      color: var(--el-disabled-color-base);
+      color: var(--el-disabled-text-color);
       cursor: not-allowed;
     }
   }
@@ -75,11 +75,11 @@
 
   @include when(disabled) {
     @include e((increase, decrease)) {
-      border-color: var(--el-disabled-border-base);
-      color: var(--el-disabled-border-base);
+      border-color: var(--el-disabled-border-color);
+      color: var(--el-disabled-border-color);
 
       &:hover {
-        color: var(--el-disabled-border-base);
+        color: var(--el-disabled-border-color);
         cursor: not-allowed;
       }
     }

package/theme-chalk/src/input.scss

@@ -24,11 +24,8 @@
     width: 100%;
     font-size: inherit;
     font-family: inherit;
-    color: var(--el-input-font-color, map.get($input, 'font-color'));
-    background-color: var(
-      --el-input-background-color,
-      map.get($input, 'background-color')
-    );
+    color: var(--el-input-text-color, map.get($input, 'text-color'));
+    background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
     border: var(--el-input-border, map.get($input, 'border'));
     border-radius: var(
@@ -74,7 +71,7 @@
     .#{$namespace}-textarea__inner {
       background-color: map.get($input-disabled, 'fill');
       border-color: map.get($input-disabled, 'border');
-      color: map.get($input-disabled, 'color');
+      color: map.get($input-disabled, 'text-color');
       cursor: not-allowed;
 
       &::placeholder {
@@ -132,10 +129,7 @@
 
   @include e(inner) {
     -webkit-appearance: none;
-    background-color: var(
-      --el-input-background-color,
-      map.get($input, 'background-color')
-    );
+    background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
     border-radius: var(
       --el-input-border-radius,
@@ -143,7 +137,7 @@
     );
     border: var(--el-input-border, map.get($input, 'border'));
     box-sizing: border-box;
-    color: var(--el-input-font-color, map.get($input, 'font-color'));
+    color: var(--el-input-text-color, map.get($input, 'text-color'));
     display: inline-block;
     font-size: inherit;
     height: map.get($input-height, 'default');
@@ -238,7 +232,7 @@
     .#{$namespace}-input__inner {
       background-color: map.get($input-disabled, 'fill');
       border-color: map.get($input-disabled, 'border');
-      color: map.get($input-disabled, 'color');
+      color: map.get($input-disabled, 'text-color');
       cursor: not-allowed;
 
       &::placeholder {
@@ -307,7 +301,7 @@
   }
 
   @include e((append, prepend)) {
-    background-color: var(--el-background-color-base);
+    background-color: var(--el-bg-color-base);
     color: var(--el-color-info);
     vertical-align: middle;
     display: table-cell;

package/theme-chalk/src/link.scss

@@ -45,7 +45,7 @@
   }
 
   &.#{$namespace}-link--default {
-    color: var(--el-link-default-font-color);
+    color: var(--el-link-default-text-color);
 
     &:hover {
       color: var(--el-link-default-active-color);
@@ -56,29 +56,29 @@
     }
 
     @include when(disabled) {
-      color: var(--el-link-disabled-font-color);
+      color: var(--el-link-disabled-text-color);
     }
   }
 
   @each $type in $types {
     &.#{$namespace}-link--#{$type} {
-      --el-link-font-color: var(--el-color-#{$type});
-      color: var(--el-link-font-color);
+      --el-link-text-color: var(--el-color-#{$type});
+      color: var(--el-link-text-color);
 
       &:hover {
-        color: mix(map.get($link-font-color, $type), $color-white, 80%);
+        color: mix(map.get($link-text-color, $type), $color-white, 80%);
       }
 
       &:after {
-        border-color: var(--el-link-font-color);
+        border-color: var(--el-link-text-color);
       }
 
       @include when(disabled) {
-        color: mix(map.get($link-font-color, $type), $color-white, 50%);
+        color: mix(map.get($link-text-color, $type), $color-white, 50%);
       }
       @include when(underline) {
         &:hover:after {
-          border-color: var(--el-link-font-color);
+          border-color: var(--el-link-text-color);
         }
       }
     }

package/theme-chalk/src/menu.scss

@@ -35,7 +35,7 @@
   }
 
   &:hover {
-    background-color: var(--el-menu-hover-background-color);
+    background-color: var(--el-menu-hover-bg-color);
   }
 
   @include when(disabled) {
@@ -53,7 +53,7 @@
   position: relative;
   margin: 0;
   padding-left: 0;
-  background-color: var(--el-menu-background-color);
+  background-color: var(--el-menu-bg-color);
   box-sizing: border-box;
 
   @include m(horizontal) {
@@ -122,7 +122,7 @@
     & .#{$namespace}-menu {
       & .#{$namespace}-menu-item,
       & .#{$namespace}-sub-menu__title {
-        background-color: var(--el-menu-background-color);
+        background-color: var(--el-menu-bg-color);
         display: flex;
         align-items: center;
         height: 36px;
@@ -139,7 +139,7 @@
     & .#{$namespace}-menu-item:not(.is-disabled):focus {
       outline: none;
       color: var(--el-menu-hover-text-color);
-      background-color: var(--el-menu-hover-background-color);
+      background-color: var(--el-menu-hover-bg-color);
     }
     & > .#{$namespace}-menu-item.is-active {
       border-bottom: 2px solid var(--el-menu-active-color);
@@ -241,7 +241,7 @@
     @include menu-item;
 
     &:hover {
-      background-color: var(--el-menu-hover-background-color);
+      background-color: var(--el-menu-hover-bg-color);
     }
   }
   & .#{$namespace}-menu {

package/theme-chalk/src/message.scss

@@ -19,9 +19,9 @@
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
-  background-color: var(--el-message-background-color);
+  background-color: var(--el-message-bg-color);
   transition: opacity 0.3s, transform 0.4s, top 0.4s;
-  background-color: var(--el-message-background-color);
+  background-color: var(--el-message-bg-color);
   transition: opacity var(--el-transition-duration), transform 0.4s, top 0.4s;
   padding: var(--el-message-padding);
   display: flex;
@@ -43,7 +43,7 @@
 
   @include m(info) {
     .#{$namespace}-message__content {
-      color: var(--el-message-info-font-color);
+      color: var(--el-message-info-text-color);
     }
   }
 
@@ -52,10 +52,10 @@
       background-color: map.get($colors, $type, 'light-9');
       border-color: map.get($colors, $type, 'light-8');
 
-      --el-message-font-color: var(--el-color-#{$type});
+      --el-message-text-color: var(--el-color-#{$type});
 
       .#{$namespace}-message__content {
-        color: var(--el-message-font-color);
+        color: var(--el-message-text-color);
       }
     }
   }
@@ -98,8 +98,8 @@
 
   @each $type in (success, info, warning, error) {
     & .#{$namespace}-message-icon--#{$type} {
-      --el-message-font-color: var(--el-color-#{$type});
-      color: var(--el-message-font-color);
+      --el-message-text-color: var(--el-color-#{$type});
+      color: var(--el-message-text-color);
     }
   }
 }

package/theme-chalk/src/mixins/_button.scss

@@ -3,23 +3,16 @@
 @use '../common/var' as *;
 
 @mixin button-plain($color, $type) {
-  color: $color;
-  background-color: map.get($colors, $type, 'light-9');
-  border-color: map.get($colors, $type, 'light-6');
+  --el-button-text-color: var(--el-color-#{$type});
+  --el-button-bg-color: #{map.get($colors, $type, 'light-9')};
+  --el-button-border-color: #{map.get($colors, $type, 'light-6')};
 
-  &:hover,
-  &:focus {
-    background: $color;
-    border-color: $color;
-    color: var(--el-color-white);
-  }
+  --el-button-hover-text-color: var(--el-color-white);
+  --el-button-hover-bg-color: var(--el-color-#{$type});
+  --el-button-hover-border-color: var(--el-color-#{$type});
 
-  &:active {
-    background: var(--el-button-active-background-color);
-    border-color: var(--el-button-active-border-color);
-    color: var(--el-color-white);
-    outline: none;
-  }
+  --el-button-active-text-color: var(--el-color-white);
+  --el-button-active-border-color: var(--el-color-#{$type});
 
   &.is-disabled {
     &,
@@ -34,39 +27,10 @@
 }
 
 @mixin button-variant($type) {
-  &:hover,
-  &:focus {
-    background: var(--el-button-hover-color);
-    border-color: var(--el-button-hover-color);
-    color: var(--el-button-font-color);
-  }
-
-  &:active {
-    background: var(--el-button-active-background-color);
-    border-color: var(--el-button-active-border-color);
-    color: var(--el-button-active-font-color);
-    outline: none;
-  }
-
-  &.is-active {
-    background: var(--el-button-active-background-color);
-    border-color: var(--el-button-active-border-color);
-    color: var(--el-button-active-font-color);
-  }
-
-  &.is-disabled {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      color: $color-white;
-      background-color: map.get($colors, $type, 'light-5');
-      border-color: map.get($colors, $type, 'light-5');
-    }
-  }
-
+  --el-button-text-color: var(--el-color-white);
+  --el-button-disabled-text-color: var(--el-color-white);
   &.is-plain {
-    @include button-plain(var(--el-button-background-color), $type);
+    @include button-plain(var(--el-button-bg-color), $type);
   }
 }
 

package/theme-chalk/src/mixins/mixins.scss

@@ -5,13 +5,13 @@
 
 // Break-points
 @mixin res($key, $map: $breakpoints) {
-  // 循环断点Map，如果存在则返回
+  // loop breakpoint Map, return if present
   @if map-has-key($map, $key) {
     @media only screen and #{unquote(map-get($map, $key))} {
       @content;
     }
   } @else {
-    @warn "Undefeined points: `#{$map}`";
+    @warn "Undefined points: `#{$map}`";
   }
 }
 

package/theme-chalk/src/option-group.scss

@@ -44,7 +44,7 @@
   @include e(title) {
     padding-left: $gap;
     font-size: map.get($select-group, 'font-size');
-    color: map.get($select-group, 'color');
+    color: map.get($select-group, 'text-color');
     line-height: map.get($select-group, 'height');
   }
 

package/theme-chalk/src/option-item.scss

@@ -13,7 +13,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: map.get($select-option, 'color');
+    color: map.get($select-option, 'text-color');
     height: map.get($select-option, 'height');
     line-height: map.get($select-option, 'height');
     box-sizing: border-box;
@@ -33,7 +33,7 @@
       font-weight: 700;
 
       &:not(.is-multiple) {
-        color: map.get($select-option, 'selected-font-color');
+        color: map.get($select-option, 'selected-text-color');
       }
     }
 
@@ -49,8 +49,8 @@
   @include when(multiple) {
     .el-select-dropdown__option-item {
       &.is-selected {
-        color: map.get($select-option, 'selected-font-color');
-        background-color: map.get($select-dropdown, 'background');
+        color: map.get($select-option, 'selected-text-color');
+        background-color: map.get($select-dropdown, 'bg-color');
 
         & .el-icon {
           position: absolute;

package/theme-chalk/src/option.scss

@@ -12,7 +12,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: map.get($select-option, 'color');
+    color: map.get($select-option, 'text-color');
     height: map.get($select-option, 'height');
     line-height: map.get($select-option, 'height');
     box-sizing: border-box;
@@ -33,7 +33,7 @@
     }
 
     &.selected {
-      color: map.get($select-option, 'selected-font-color');
+      color: map.get($select-option, 'selected-text-color');
       font-weight: bold;
     }
   }

package/theme-chalk/src/pagination.scss

@@ -10,7 +10,7 @@
 
   white-space: nowrap;
   padding: 2px 5px;
-  color: var(--el-pagination-font-color);
+  color: var(--el-pagination-text-color);
   font-weight: bold;
   @include utils-clearfix;
 
@@ -62,7 +62,7 @@
 
     &:disabled {
       color: var(--el-pagination-button-disabled-color);
-      background-color: var(--el-pagination-button-disabled-background-color);
+      background-color: var(--el-pagination-button-disabled-bg-color);
       cursor: not-allowed;
     }
   }
@@ -71,7 +71,7 @@
   .btn-next {
     background: center center no-repeat;
     background-size: 16px;
-    background-color: var(--el-pagination-background-color);
+    background-color: var(--el-pagination-bg-color);
     cursor: pointer;
     margin: 0;
     color: var(--el-pagination-button-color);
@@ -267,7 +267,7 @@
 
   li {
     padding: 0 4px;
-    background: var(--el-pagination-background-color);
+    background: var(--el-pagination-bg-color);
     vertical-align: top;
     display: inline-block;
     font-size: var(--el-pagination-font-size);

package/theme-chalk/src/popover.scss

@@ -6,7 +6,7 @@
   @include set-component-css-var('popover', $popover);
 
   &.#{$namespace}-popper {
-    background: var(--el-popover-background-color);
+    background: var(--el-popover-bg-color);
     min-width: 150px;
     border-radius: var(--el-popover-border-radius);
     border: 1px solid var(--el-popover-border-color);
@@ -24,7 +24,7 @@
     }
 
     @include e(title) {
-      color: var(--el-popover-title-font-color);
+      color: var(--el-popover-title-text-color);
       font-size: var(--el-popover-title-font-size);
       line-height: 1;
       margin-bottom: 12px;

package/theme-chalk/src/radio-button.scss

@@ -20,14 +20,11 @@
     line-height: 1;
     white-space: nowrap;
     vertical-align: middle;
-    background: var(
-      --el-button-background-color,
-      map.get($button, 'background-color')
-    );
+    background: var(--el-button-bg-color, map.get($button, 'bg-color'));
     border: $border-base;
     font-weight: var(--el-button-font-weight, map.get($button, 'font-weight'));
     border-left: 0;
-    color: var(--el-button-font-color, map.get($button, 'font-color'));
+    color: var(--el-button-text-color, map.get($button, 'text-color'));
     -webkit-appearance: none;
     text-align: center;
     box-sizing: border-box;
@@ -76,12 +73,12 @@
     &:checked {
       & + .#{$namespace}-radio-button__inner {
         color: var(
-          --el-radio-button-checked-font-color,
-          map.get($radio-button, 'checked-font-color')
+          --el-radio-button-checked-text-color,
+          map.get($radio-button, 'checked-text-color')
         );
         background-color: var(
-          --el-radio-button-checked-background-color,
-          map.get($radio-button, 'checked-background-color')
+          --el-radio-button-checked-bg-color,
+          map.get($radio-button, 'checked-bg-color')
         );
         border-color: var(
           --el-radio-button-checked-border-color,
@@ -98,14 +95,14 @@
     &:disabled {
       & + .#{$namespace}-radio-button__inner {
         color: var(
-          --el-button-disabled-font-color,
-          map.get($button, 'disabled-font-color')
+          --el-button-disabled-text-color,
+          map.get($button, 'disabled-text-color')
         );
         cursor: not-allowed;
         background-image: none;
         background-color: var(
-          --el-button-disabled-background-color,
-          map.get($button, 'disabled-background-color')
+          --el-button-disabled-bg-color,
+          map.get($button, 'disabled-bg-color')
         );
         border-color: var(
           --el-button-disabled-border-color,

package/theme-chalk/src/radio.scss

@@ -11,7 +11,7 @@
 }
 
 @include b(radio) {
-  color: var(--el-radio-font-color);
+  color: var(--el-radio-text-color);
   font-weight: var(--el-radio-font-weight);
   position: relative;
   cursor: pointer;
@@ -121,7 +121,7 @@
       }
 
       & + .#{$namespace}-radio__label {
-        color: map.get($radio-checked, 'font-color');
+        color: map.get($radio-checked, 'text-color');
       }
     }
 
@@ -136,7 +136,7 @@
     border-radius: var(--el-radio-input-border-radius);
     width: var(--el-radio-input-width);
     height: var(--el-radio-input-height);
-    background-color: var(--el-radio-input-background-color);
+    background-color: var(--el-radio-input-bg-color);
     position: relative;
     cursor: pointer;
     display: inline-block;

package/theme-chalk/src/scrollbar.scss

@@ -33,16 +33,16 @@
     cursor: pointer;
     border-radius: inherit;
     background-color: var(
-      --el-scrollbar-background-color,
-      map.get($scrollbar, 'background-color')
+      --el-scrollbar-bg-color,
+      map.get($scrollbar, 'bg-color')
     );
     transition: var(--el-transition-duration) background-color;
     opacity: var(--el-scrollbar-opacity, map.get($scrollbar, 'opacity'));
 
     &:hover {
       background-color: var(
-        --el-scrollbar-hover-background-color,
-        map.get($scrollbar, 'hover-background-color')
+        --el-scrollbar-hover-bg-color,
+        map.get($scrollbar, 'hover-bg-color')
       );
       opacity: var(
         --el-scrollbar-hover-opacity,

package/theme-chalk/src/select-dropdown.scss

@@ -10,8 +10,8 @@
 
   @include when(multiple) {
     & .#{$namespace}-select-dropdown__item.selected {
-      color: map.get($select-option, 'selected-font-color');
-      background-color: map.get($select-dropdown, 'background');
+      color: map.get($select-option, 'selected-text-color');
+      background-color: map.get($select-dropdown, 'bg-color');
 
       &.hover {
         background-color: map.get($select-option, 'hover-background');

package/theme-chalk/src/select-v2.scss

@@ -48,7 +48,7 @@ $input-inline-start: 15px !default;
     @include when(disabled) {
       cursor: not-allowed;
 
-      background-color: var(--el-background-color-base);
+      background-color: var(--el-bg-color-base);
       color: var(--el-text-color-placeholder);
       border-color: var(--el-select-disabled-border);
 
@@ -116,7 +116,7 @@ $input-inline-start: 15px !default;
 
   @include e(popper) {
     @include picker-popper(
-      map.get($select-dropdown, 'background'),
+      map.get($select-dropdown, 'bg-color'),
       map.get($select-dropdown, 'border'),
       map.get($select-dropdown, 'shadow')
     );
@@ -315,7 +315,7 @@ $input-inline-start: 15px !default;
     margin-inline-start: $input-inline-start;
     width: calc(100% - 52px);
     @include utils-ellipsis;
-    color: var(--el-input-font-color, map.get($input, 'font-color'));
+    color: var(--el-input-text-color, map.get($input, 'text-color'));
     font-size: inherit;
     @include when(transparent) {
       color: var(--el-text-color-placeholder);

package/theme-chalk/src/select.scss

@@ -17,7 +17,7 @@
 
   @include e(popper) {
     @include picker-popper(
-      map.get($select-dropdown, 'background'),
+      map.get($select-dropdown, 'bg-color'),
       map.get($select-dropdown, 'border'),
       map.get($select-dropdown, 'shadow')
     );