element-plus 2.1.0 → 2.1.3

package/theme-chalk/src/button.scss

@@ -31,7 +31,7 @@ $button-icon-span-gap: map.merge(
   white-space: nowrap;
   cursor: pointer;
   background-color: var(--el-button-bg-color, #{map.get($button, 'bg-color')});
-  border: var(--el-border-base);
+  border: var(--el-border);
   border-color: var(
     --el-button-border-color,
     #{map.get($button, 'border-color')}
@@ -113,7 +113,7 @@ $button-icon-span-gap: map.merge(
       )};
 
     --el-button-hover-text-color: var(--el-color-primary);
-    --el-button-hover-bg-color: var(--el-color-white);
+    --el-button-hover-bg-color: getCssVar('fill-color', 'blank');
     --el-button-hover-border-color: var(--el-color-primary);
   }
 
@@ -146,7 +146,7 @@ $button-icon-span-gap: map.merge(
       &,
       &:hover,
       &:focus {
-        background-color: var(--el-color-white);
+        background-color: getCssVar('fill-color', 'blank');
         border-color: var(--el-button-disabled-border-color);
         color: var(--el-button-disabled-text-color);
       }

package/theme-chalk/src/card.scss

@@ -6,10 +6,6 @@
   @include set-component-css-var('card', $card);
 }
 
-@include dark(card) {
-  @include set-component-css-var('card', $dark-card);
-}
-
 @include b(card) {
   border-radius: var(--el-card-border-radius);
   border: 1px solid var(--el-card-border-color);

package/theme-chalk/src/carousel.scss

@@ -2,6 +2,7 @@
 
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
+@use 'mixins/utils' as *;
 @use 'common/var' as *;
 
 @include b(carousel) {
@@ -41,6 +42,8 @@
     text-align: center;
     font-size: var(--el-carousel-arrow-font-size);
 
+    @include utils-inline-flex-center;
+
     @include m(left) {
       left: 16px;
     }

package/theme-chalk/src/cascader.scss

@@ -210,7 +210,7 @@
     flex: 1;
     height: 24px;
     min-width: 60px;
-    margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width-base;
+    margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
     padding: 0;
     color: var(--el-cascader-menu-text-color);
     border: none;

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

@@ -22,7 +22,7 @@
     vertical-align: middle;
     cursor: pointer;
     background: var(--el-button-bg-color, map.get($button, 'bg-color'));
-    border: $border-base;
+    border: getCssVar('border');
     border-left: 0;
     color: var(--el-button-text-color, map.get($button, 'text-color'));
     -webkit-appearance: none;
@@ -102,7 +102,7 @@
 
   &:first-child {
     .#{$namespace}-checkbox-button__inner {
-      border-left: $border-base;
+      border-left: getCssVar('border');
       border-radius: var(--el-border-radius-base) 0 0
         var(--el-border-radius-base);
       box-shadow: none !important;

package/theme-chalk/src/checkbox.scss

@@ -52,10 +52,10 @@ $checkbox-bordered-input-width: map.merge(
   height: map.get($checkbox-height, 'default');
 
   @include when(bordered) {
-    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
-      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
     border-radius: var(--el-border-radius-base);
-    border: var(--el-border-base);
+    border: var(--el-border);
     box-sizing: border-box;
 
     &.is-checked {
@@ -70,9 +70,9 @@ $checkbox-bordered-input-width: map.merge(
     @each $size in (large, small) {
       &.#{$namespace}-checkbox--#{$size} {
         padding: 0
-          map.get($checkbox-bordered-padding-right, $size)-$border-width-base
+          map.get($checkbox-bordered-padding-right, $size)-$border-width
           0
-          map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
+          map.get($checkbox-bordered-padding-left, $size)-$border-width;
 
         border-radius: map.get($button-border-radius, $size);
 

package/theme-chalk/src/collapse.scss

@@ -13,7 +13,7 @@
 @include b(collapse-item) {
   @include when(disabled) {
     .#{$namespace}-collapse-item__header {
-      color: var(--el-text-color-disabled-base);
+      color: var(--el-text-color-disabled);
       cursor: not-allowed;
     }
   }

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

@@ -2,6 +2,8 @@
 @use 'sass:math';
 @use 'sass:map';
 
+@use '../mixins/function.scss' as *;
+
 // Special comment for theme configurator
 // type|skipAutoTranslation|Category|Order
 // skipAutoTranslation 1
@@ -108,7 +110,8 @@ $text-color: map.merge(
     'primary': #303133,
     'regular': #606266,
     'secondary': #909399,
-    'placeholder': #c0c4cc,
+    'placeholder': #a8abb2,
+    'disabled': #c0c4cc,
   ),
   $text-color
 );
@@ -116,25 +119,45 @@ $text-color: map.merge(
 $border-color: () !default;
 $border-color: map.merge(
   (
-    'base': #dcdfe6,
+    '': #dcdfe6,
     'light': #e4e7ed,
     'lighter': #ebeef5,
     'extra-light': #f2f6fc,
+    'dark': #d4d7de,
+    'darker': #cdd0d6,
   ),
   $border-color
 );
 
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    '': #f0f2f5,
+    'light': #f5f7fa,
+    'lighter': #fafafa,
+    'extra-light': #fafcff,
+    'dark': #ebedf0,
+    'darker': #e6e8eb,
+    'blank': #ffffff,
+  ),
+  $fill-color
+);
+
 // Background
-/// color|1|Background Color|4
-$bg-color: #f5f7fa !default;
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    '': #ffffff,
+    'page': #ffffff,
+    'overlay': #ffffff,
+  ),
+  $bg-color
+);
 
 // Border
-$border-width-base: 1px !default;
-$border-style-base: solid !default;
+$border-width: 1px !default;
+$border-style: solid !default;
 $border-color-hover: var(--el-text-color-placeholder) !default;
-$border-base: $border-width-base $border-style-base
-  map.get($border-color, 'base') !default;
-/// borderRadius|1|Radius|0
 
 $border-radius: () !default;
 $border-radius: map.merge(
@@ -174,11 +197,22 @@ $font-size: map.merge(
   $font-size
 );
 
+// zIndex
+$z-index: () !default;
+$z-index: map.merge(
+  (
+    'normal': 1,
+    'top': 1000,
+    'popper': 2000,
+  ),
+  $z-index
+);
+
 // Disable default
 $disabled: () !default;
 $disabled: map.merge(
   (
-    'bg-color': var(--el-bg-color),
+    'bg-color': getCssVar('fill-color', 'light'),
     'text-color': var(--el-text-color-placeholder),
     'border-color': var(--el-border-color-light),
   ),
@@ -195,6 +229,8 @@ $common-component-size: map.merge(
   $common-component-size
 );
 
+// Components
+// ---
 // Checkbox
 // css3 var in packages/theme-chalk/src/checkbox.scss
 $checkbox: () !default;
@@ -206,18 +242,18 @@ $checkbox: map.merge(
     'input-height': 14px,
     'input-width': 14px,
     'border-radius': var(--el-border-radius-small),
-    'bg-color': var(--el-color-white),
-    'input-border': var(--el-border-base),
-    'disabled-border-color': var(--el-border-color-base),
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'input-border': var(--el-border),
+    'disabled-border-color': getCssVar('border-color'),
     'disabled-input-fill': #edf2fc,
     'disabled-icon-color': var(--el-text-color-placeholder),
     'disabled-checked-input-fill': var(--el-border-color-extra-light),
-    'disabled-checked-input-border-color': var(--el-border-color-base),
+    'disabled-checked-input-border-color': getCssVar('border-color'),
     'disabled-checked-icon-color': var(--el-text-color-placeholder),
     'checked-text-color': var(--el-color-primary),
     'checked-input-border-color': var(--el-color-primary),
     'checked-bg-color': var(--el-color-primary),
-    'checked-icon-color': var(--el-fill-base),
+    'checked-icon-color': getCssVar('fill-color', 'blank'),
     'input-border-color-hover': var(--el-color-primary),
   ),
   $checkbox
@@ -264,9 +300,9 @@ $radio: map.merge(
     'input-height': 14px,
     'input-width': 14px,
     'input-border-radius': var(--el-border-radius-circle),
-    'input-bg-color': var(--el-color-white),
-    'input-border': var(--el-border-base),
-    'input-border-color': var(--el-border-color-base),
+    'input-bg-color': getCssVar('fill-color', 'blank'),
+    'input-border': var(--el-border),
+    'input-border-color': getCssVar('border-color'),
     'input-border-color-hover': var(--el-color-primary),
   ),
   $radio
@@ -351,7 +387,7 @@ $select-option: map.merge(
     'text-color': var(--el-text-color-regular),
     'disabled-color': var(--el-text-color-placeholder),
     'height': 34px,
-    'hover-background': var(--el-bg-color),
+    'hover-background': getCssVar('fill-color', 'light'),
     'selected-text-color': var(--el-color-primary),
   ),
   $select-option
@@ -472,13 +508,13 @@ $input: () !default;
 $input: map.merge(
   (
     'text-color': var(--el-text-color-regular),
-    'border': var(--el-border-base),
+    'border': var(--el-border),
     'hover-border': var(--el-border-color-hover),
     'focus-border': var(--el-color-primary),
     'transparent-border': 0 0 0 1px transparent inset,
-    'border-color': var(--el-border-color-base),
+    'border-color': getCssVar('border-color'),
     'border-radius': var(--el-border-radius-base),
-    'bg-color': var(--el-color-white),
+    'bg-color': getCssVar('fill-color', 'blank'),
     'icon-color': var(--el-text-color-placeholder),
     'placeholder-color': var(--el-text-color-placeholder),
     'hover-border-color': var(--el-border-color-hover),
@@ -542,12 +578,12 @@ $cascader: map.merge(
   (
     'menu-text-color': var(--el-text-color-regular),
     'menu-selected-text-color': var(--el-color-primary),
-    'menu-fill': var(--el-fill-base),
+    'menu-fill': getCssVar('fill-color', 'blank'),
     '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-bg-color),
+    'node-background-hover': getCssVar('fill-color', 'light'),
     'node-color-disabled': var(--el-text-color-placeholder),
     'color-empty': var(--el-text-color-placeholder),
     'tag-background': #f0f2f5,
@@ -561,11 +597,11 @@ $button: () !default;
 $button: map.merge(
   (
     'font-weight': var(--el-font-weight-primary),
-    'border-color': var(--el-border-color-base),
-    'bg-color': var(--el-color-white),
+    'border-color': getCssVar('border-color'),
+    'bg-color': getCssVar('fill-color', 'blank'),
     'text-color': var(--el-text-color-regular),
     'disabled-text-color': var(--el-disabled-text-color),
-    'disabled-bg-color': var(--el-color-white),
+    'disabled-bg-color': getCssVar('fill-color', 'blank'),
     'disabled-border-color': var(--el-border-color-light),
     'divide-border-color': rgba($color-white, 0.5),
     'hover-text-color': var(--el-color-primary),
@@ -578,7 +614,7 @@ $button: map.merge(
   $button
 );
 
-$button-border-width: $border-width-base !default;
+$button-border-width: $border-width !default;
 
 // need mix, so do not use css var
 $button-hover-tint-percent: 20%;
@@ -650,7 +686,7 @@ $switch: () !default;
 $switch: map.merge(
   (
     'on-color': var(--el-color-primary),
-    'off-color': var(--el-border-color-base),
+    'off-color': getCssVar('border-color'),
     'core-border-radius': 10px,
     'width': 40px,
     'height': 20px,
@@ -686,13 +722,13 @@ $table: map.merge(
     'border': 1px solid var(--el-table-border-color),
     'text-color': var(--el-text-color-regular),
     'header-text-color': var(--el-text-color-secondary),
-    'row-hover-bg-color': var(--el-bg-color),
+    'row-hover-bg-color': getCssVar('fill-color', 'light'),
     'current-row-bg-color': var(--el-color-primary-light-9),
-    'header-bg-color': var(--el-color-white),
+    'header-bg-color': getCssVar('fill-color', 'blank'),
     'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
-    'bg-color': var(--el-color-white),
-    'tr-bg-color': var(--el-color-white),
-    'expanded-cell-bg-color': var(--el-color-white),
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'tr-bg-color': getCssVar('fill-color', 'blank'),
+    'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
     'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
     'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
   ),
@@ -735,15 +771,15 @@ $pagination: () !default;
 $pagination: map.merge(
   (
     'font-size': 14px,
-    'bg-color': var(--el-color-white),
+    'bg-color': getCssVar('fill-color', 'blank'),
     'text-color': var(--el-text-color-primary),
     'border-radius': 3px,
     'button-color': var(--el-text-color-primary),
     'button-width': 32px,
     'button-height': 32px,
     'button-disabled-color': var(--el-text-color-placeholder),
-    'button-disabled-bg-color': var(--el-color-white),
-    'button-bg-color': map.get($colors, 'info', 'light-9'),
+    'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
+    'button-bg-color': getCssVar('fill-color'),
     'hover-color': var(--el-color-primary),
     'height-extra-small': 24px,
     'line-height-extra-small': var(--el-pagination-height-extra-small),
@@ -844,7 +880,7 @@ $tag-icon-size: map.merge(
 $tree: () !default;
 $tree: map.merge(
   (
-    'node-hover-bg-color': var(--el-bg-color),
+    'node-hover-bg-color': getCssVar('fill-color', 'light'),
     'text-color': var(--el-text-color-regular),
     'expand-icon-color': var(--el-text-color-placeholder),
   ),
@@ -868,8 +904,12 @@ $dropdown: map.merge(
 $drawer: () !default;
 $drawer: map.merge(
   (
-    'bg-color': var(--el-dialog-bg-color, var(--el-color-white)),
-    'padding-primary': var(--el-dialog-padding-primary, 20px),
+    'bg-color':
+      var(
+        #{getCssVarName('dialog', 'bg-color')},
+        #{getCssVar('color', 'white')}
+      ),
+    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
   ),
   $drawer
 );
@@ -896,19 +936,11 @@ $card: map.merge(
       var(--el-border-color-light, map.get($border-color, 'lighter')),
     'border-radius': 4px,
     'padding': 20px,
-    'bg-color': var(--el-color-white),
+    'bg-color': getCssVar('fill-color', 'blank'),
   ),
   $card
 );
 
-$dark-card: () !default;
-$dark-card: map.merge(
-  (
-    'bg-color': var(--el-color-black),
-  ),
-  $dark-card
-);
-
 // Slider
 // css3 var in packages/theme-chalk/src/slider.scss
 $slider: () !default;
@@ -917,7 +949,7 @@ $slider: map.merge(
     '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),
+    'disabled-color': var(--el-text-color-placeholder),
     'border-radius': 3px,
     'height': 6px,
     'button-size': 20px,
@@ -935,12 +967,12 @@ $menu: map.merge(
     'active-color': var(--el-color-primary),
     'text-color': var(--el-text-color-primary),
     'hover-text-color': var(--el-text-color-primary),
-    'bg-color': var(--el-color-white),
+    'bg-color': getCssVar('fill-color', 'blank'),
     'hover-bg-color': var(--el-color-primary-light-9),
     'item-height': 56px,
     'item-font-size': var(--el-font-size-base),
     'item-hover-fill': var(--el-color-primary-light-9),
-    'border-color': #e6e6e6,
+    'border-color': getCssVar('border-color'),
   ),
   $menu
 );
@@ -953,11 +985,12 @@ $rate: map.merge(
     'font-size': var(--el-font-size-base),
     'icon-size': 18px,
     'icon-margin': 6px,
-    'icon-color': var(--el-text-color-placeholder),
-    'void-color': #c6d1de,
-    'star-color': #f7ba2a,
-    'disable-void-color': #eff2f7,
-    'text-color': #1f2d3d,
+    // seems not be used, to remove
+    // 'icon-color': var(--el-text-color-placeholder),
+    'void-color': getCssVar('border-color', 'darker'),
+    'fill-color': #f7ba2a,
+    'disabled-void-color': getCssVar('fill-color'),
+    'text-color': getCssVar('text-color', 'primary'),
   ),
   $rate
 );
@@ -1041,10 +1074,10 @@ $collapse: map.merge(
   (
     'border-color': var(--el-border-color-lighter),
     'header-height': 48px,
-    'header-bg-color': var(--el-color-white),
+    'header-bg-color': getCssVar('fill-color', 'blank'),
     'header-text-color': var(--el-text-color-primary),
     'header-font-size': 13px,
-    'content-bg-color': var(--el-color-white),
+    'content-bg-color': getCssVar('fill-color', 'blank'),
     'content-font-size': 13px,
     'content-text-color': var(--el-text-color-primary),
   ),
@@ -1060,7 +1093,7 @@ $transfer: map.merge(
     'border-radius': var(--el-border-radius-base),
     'panel-width': 200px,
     'panel-header-height': 40px,
-    'panel-header-bg-color': var(--el-bg-color),
+    'panel-header-bg-color': getCssVar('fill-color', 'light'),
     'panel-footer-height': 40px,
     'panel-body-height': 278px,
     'item-height': 30px,
@@ -1086,7 +1119,7 @@ $timeline: map.merge(
 $backtop: () !default;
 $backtop: map.merge(
   (
-    'bg-color': var(--el-color-white),
+    'bg-color': getCssVar('fill-color', 'blank'),
     'text-color': var(--el-color-primary),
     'hover-bg-color': var(--el-border-color-extra-light),
   ),

package/theme-chalk/src/dark/css-vars.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+// CSS3 var
+@use './var' as *;
+@use '../mixins/var' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // todo dark.scss
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+}

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

@@ -0,0 +1,59 @@
+@use 'sass:map';
+
+// dark-mode
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    'page': #0a0a0a,
+    '': #141414,
+    'overlay': #1d1e1f,
+  ),
+  $bg-color
+);
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'darker': rgba($border-color-base, 0.35),
+    'dark': rgba($border-color-base, 0.3),
+    '': rgba($border-color-base, 0.25),
+    'light': rgba($border-color-base, 0.2),
+    'lighter': rgba($border-color-base, 0.15),
+    'extra-light': rgba($border-color-base, 0.1),
+  ),
+  $border-color
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'darker': rgba($fill-color-base, 0.2),
+    'dark': rgba($fill-color-base, 0.16),
+    '': rgba($fill-color-base, 0.12),
+    'light': rgba($fill-color-base, 0.08),
+    'lighter': rgba($fill-color-base, 0.04),
+    'extra-light': rgba($fill-color-base, 0.02),
+    'blank': transparent,
+  ),
+  $fill-color
+);
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': rgba($text-color-base, 0.95),
+    'regular': rgba($text-color-base, 0.85),
+    'secondary': rgba($text-color-base, 0.65),
+    'placeholder': rgba($text-color-base, 0.55),
+    'disabled': rgba($text-color-base, 0.4),
+  ),
+  $text-color
+);

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

@@ -113,7 +113,7 @@
     }
 
     &.disabled .#{$namespace}-date-table-cell {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       opacity: 1;
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);

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

@@ -27,7 +27,7 @@
     }
 
     &.disabled .cell {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 

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

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

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

@@ -95,7 +95,7 @@
     color: var(--el-text-color-regular);
 
     &:hover:not(.disabled):not(.active) {
-      background: var(--el-bg-color);
+      background: getCssVar('fill-color', 'light');
       cursor: pointer;
     }
 

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

@@ -23,7 +23,7 @@
     }
 
     &.disabled .cell {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 

package/theme-chalk/src/divider.scss

@@ -9,7 +9,7 @@
     height: 1px;
     width: 100%;
     margin: 24px 0;
-    border-top: 1px var(--el-border-color-base) var(--el-border-style);
+    border-top: 1px getCssVar('border-color') var(--el-border-style);
   }
 
   @include m(vertical) {
@@ -19,7 +19,7 @@
     margin: 0 8px;
     vertical-align: middle;
     position: relative;
-    border-left: 1px var(--el-border-color-base) var(--el-border-style);
+    border-left: 1px getCssVar('border-color') var(--el-border-style);
   }
 
   @include e(text) {