element-plus 2.1.8 → 2.1.9

package/theme-chalk/src/dialog.scss

@@ -11,9 +11,9 @@
 
   position: relative;
   margin: var(--el-dialog-margin-top, 15vh) auto 50px;
-  background: var(--el-dialog-bg-color);
-  border-radius: var(--el-dialog-border-radius);
-  box-shadow: var(--el-dialog-box-shadow);
+  background: getCssVar('dialog', 'bg-color');
+  border-radius: getCssVar('dialog', 'border-radius');
+  box-shadow: getCssVar('dialog', 'box-shadow');
   box-sizing: border-box;
   width: var(--el-dialog-width, 50%);
 
@@ -43,7 +43,7 @@
   }
 
   @include e(header) {
-    padding: var(--el-dialog-padding-primary);
+    padding: getCssVar('dialog', 'padding-primary');
     padding-bottom: 10px;
     margin-right: 16px;
     word-break: break-all;
@@ -63,14 +63,14 @@
     font-size: var(--el-message-close-size, map.get($message, 'close-size'));
 
     .#{$namespace}-dialog__close {
-      color: var(--el-color-info);
+      color: getCssVar('color', 'info');
       font-size: inherit;
     }
 
     &:focus,
     &:hover {
       .#{$namespace}-dialog__close {
-        color: var(--el-color-primary);
+        color: getCssVar('color', 'primary');
       }
     }
   }

package/theme-chalk/src/divider.scss

@@ -24,7 +24,7 @@
 
   @include e(text) {
     position: absolute;
-    background-color: $color-white;
+    background-color: getCssVar('bg-color');
     padding: 0 20px;
     font-weight: 500;
     color: var(--el-text-color-primary);

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-bg-color);
+  background-color: getCssVar('drawer', 'bg-color');
   display: flex;
   flex-direction: column;
   box-shadow: getCssVar('box-shadow', 'dark');

package/theme-chalk/src/dropdown.scss

@@ -60,7 +60,7 @@ $dropdown-divider-width: 1px !default;
     // using attributes selector to override
 
     @include picker-popper(
-      $color-white,
+      getCssVar('bg-color', 'overlay'),
       1px solid var(--el-border-color-light),
       var(--el-dropdown-menu-box-shadow)
     );
@@ -160,7 +160,7 @@ $dropdown-menu-padding-vertical: map.merge(
   z-index: var(--el-dropdown-menu-index);
   padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
   margin: 0;
-  background-color: $color-white;
+  background-color: getCssVar('bg-color', 'overlay');
   border: none;
   border-radius: var(--el-border-radius-base);
   box-shadow: none;

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

@@ -59,7 +59,7 @@
     }
 
     &.is-disabled {
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
       cursor: not-allowed;
     }
   }

package/theme-chalk/src/input.scss

@@ -15,13 +15,13 @@
 }
 
 @mixin inset-prepend-input-border($color) {
-  box-shadow: 1px 0 0 0px $color inset, 1px 0 0 0px $color,
-    0px 1px 0 0px $color inset, 0px -1px 0 0px $color inset !important;
+  box-shadow: 1px 0 0 0 $color inset, 1px 0 0 0 $color, 0 1px 0 0 $color inset,
+    0 -1px 0 0 $color inset !important;
 }
 
 @mixin inset-append-input-border($color) {
-  box-shadow: -1px 0 0 0px $color, -1px 0 0 0px $color inset,
-    0px 1px 0 0px $color inset, 0px -1px 0 0px $color inset !important;
+  box-shadow: -1px 0 0 0 $color, -1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
+    0 -1px 0 0 $color inset !important;
 }
 
 @mixin mixed-input-border($color) {
@@ -413,9 +413,9 @@
 
   @include m(prepend) {
     .#{$namespace}-input__inner {
-      box-shadow: 1px 0 0 0px var(--el-input-border-color) inset,
-        0px 1px 0 0px var(--el-input-border-color) inset,
-        0px -1px 0 0px var(--el-input-border-color) inset;
+      box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,
+        0 1px 0 0 var(--el-input-border-color) inset,
+        0 -1px 0 0 var(--el-input-border-color) inset;
     }
 
     > .#{$namespace}-input__inner {

package/theme-chalk/src/menu.scss

@@ -107,7 +107,7 @@
         color: var(--el-menu-text-color);
 
         &:hover {
-          background-color: #fff;
+          background-color: getCssVar('bg-color', 'overlay');
         }
       }
 

package/theme-chalk/src/message-box.scss

@@ -14,7 +14,7 @@
   width: var(--el-messagebox-width);
   padding-bottom: 10px;
   vertical-align: middle;
-  background-color: var(--el-color-white);
+  background-color: getCssVar('bg-color');
   border-radius: var(--el-messagebox-border-radius);
   border: 1px solid var(--el-border-color-lighter);
   font-size: var(--el-messagebox-font-size);

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

@@ -12,28 +12,26 @@
   #{joinVarName($name)}: #{$value};
 }
 
-@mixin set-css-color-type-light($type, $i) {
-  #{getCssVarName('color', $type, 'light', $i)}: #{map.get(
-      $colors,
-      $type,
-      'light-#{$i}'
-    )};
+// @include set-css-var-type('color', 'primary', $map);
+// --el-color-primary: #{map.get($map, 'primary')};
+@mixin set-css-var-type($name, $type, $variables) {
+  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
 }
 
-@mixin set-css-color-type($type) {
-  #{getCssVarName('color', $type)}: #{map.get($colors, $type, 'base')};
+@mixin set-css-color-type($colors, $type) {
+  @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+
   @each $i in (3, 5, 7, 8, 9) {
-    @include set-css-color-type-light($type, $i);
+    @include set-css-var-value(
+      ('color', $type, 'light', $i),
+      map.get($colors, $type, 'light-#{$i}')
+    );
   }
-  #{getCssVarName('color', $type, 'dark-2')}: #{map.get(
-      $colors,
-      $type,
-      'dark-2'
-    )};
-}
 
-@mixin set-css-var-type($name, $type, $variables) {
-  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
+  @include set-css-var-value(
+    ('color', $type, 'dark-2'),
+    map.get($colors, $type, 'dark-2')
+  );
 }
 
 // set all css var for component by map

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

@@ -219,7 +219,7 @@
 
 // dark
 @mixin dark($block) {
-  .dark {
+  html.dark {
     @include b($block) {
       @content;
     }

package/theme-chalk/src/notification.scss

@@ -14,7 +14,7 @@
   box-sizing: border-box;
   border: 1px solid var(--el-notification-border-color);
   position: fixed;
-  background-color: var(--el-color-white);
+  background-color: getCssVar('bg-color', 'overlay');
   box-shadow: var(--el-notification-shadow);
   transition: opacity var(--el-transition-duration),
     transform var(--el-transition-duration), left var(--el-transition-duration),
@@ -48,7 +48,7 @@
   @include e(content) {
     font-size: var(--el-notification-content-font-size);
     line-height: 24px;
-    margin: 6px 0 0 0;
+    margin: 6px 0 0;
     color: var(--el-notification-content-color);
     text-align: justify;
 

package/theme-chalk/src/pagination.scss

@@ -22,6 +22,17 @@
   }
 }
 
+@mixin pagination-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--el-pagination-font-size);
+  min-width: var(--el-pagination-button-width);
+  height: var(--el-pagination-button-height);
+  line-height: var(--el-pagination-button-height);
+  box-sizing: border-box;
+}
+
 @include b(pagination) {
   @include set-component-css-var('pagination', $pagination);
 
@@ -35,14 +46,7 @@
 
   span:not([class*='suffix']),
   button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: var(--el-pagination-font-size);
-    min-width: var(--el-pagination-button-width);
-    height: var(--el-pagination-button-height);
-    line-height: var(--el-pagination-button-height);
-    box-sizing: border-box;
+    @include pagination-button;
   }
 
   .#{$namespace}-input__inner {
@@ -287,15 +291,8 @@
   li {
     padding: 0 4px;
     background: var(--el-pagination-bg-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: var(--el-pagination-font-size);
-    min-width: var(--el-pagination-button-width);
-    height: var(--el-pagination-button-height);
-    line-height: var(--el-pagination-button-height);
+    @include pagination-button;
     cursor: pointer;
-    box-sizing: border-box;
     text-align: center;
 
     &.btn-quickprev:hover {

package/theme-chalk/src/popper.scss

@@ -8,7 +8,7 @@
 
 @include b(popper) {
   position: absolute;
-  border-radius: var(--el-popper-border-radius);
+  border-radius: getCssVar('popper', 'border-radius');
   padding: 5px 11px;
   z-index: 2000;
   font-size: 12px;
@@ -20,24 +20,24 @@
   $arrow-selector: #{& + '__arrow'};
 
   @include when(dark) {
-    color: var(--el-color-white);
-    background: var(--el-text-color-primary);
-    border: 1px solid var(--el-text-color-primary);
+    color: getCssVar('bg-color');
+    background: getCssVar('text-color', 'primary');
+    border: 1px solid getCssVar('text-color', 'primary');
 
     #{$arrow-selector}::before {
-      border: 1px solid var(--el-text-color-primary);
-      background: var(--el-text-color-primary);
+      border: 1px solid getCssVar('text-color', 'primary');
+      background: getCssVar('text-color', 'primary');
       right: 0;
     }
   }
 
   @include when(light) {
-    background: var(--el-color-white);
-    border: 1px solid var(--el-border-color-light);
+    background: getCssVar('bg-color', 'overlay');
+    border: 1px solid getCssVar('border-color', 'light');
 
     #{$arrow-selector}::before {
-      border: 1px solid var(--el-border-color-light);
-      background: var(--el-color-white);
+      border: 1px solid getCssVar('border-color', 'light');
+      background: getCssVar('bg-color', 'overlay');
       right: 0;
     }
   }
@@ -59,7 +59,7 @@
       z-index: -1;
       content: ' ';
       transform: rotate(45deg);
-      background: var(--el-text-color-primary);
+      background: getCssVar('text-color', 'primary');
       box-sizing: border-box;
     }
   }

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

@@ -94,10 +94,7 @@
 
     &:disabled {
       & + .#{$namespace}-radio-button__inner {
-        color: var(
-          --el-button-disabled-text-color,
-          map.get($button, 'disabled-text-color')
-        );
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
         background-image: none;
         background-color: var(

package/theme-chalk/src/radio.scss

@@ -32,7 +32,6 @@ $radio-font-size: map.merge(
   user-select: none;
   margin-right: 32px;
   height: map.get($radio-height, 'default');
-  user-select: none;
 
   @each $size in (large, small) {
     &.#{$namespace}-radio--#{$size} {

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

@@ -257,7 +257,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
   }
 
   @include e(wrapper) {
-    background-color: #fff;
+    background-color: getCssVar('fill-color', 'blank');
     border: 1px solid getCssVar('border-color');
     border-radius: var(--el-border-radius-base);
     position: relative;

package/theme-chalk/src/select.scss

@@ -7,6 +7,14 @@
 @use './select-dropdown.scss';
 @use './select/common.scss' as *;
 
+@mixin select-tag-normal {
+  white-space: normal;
+  z-index: var(--el-index-normal);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 @include b(select) {
   @include set-component-css-var('select', $select);
 }
@@ -150,21 +158,13 @@
   @include e(tags) {
     position: absolute;
     line-height: normal;
-    white-space: normal;
-    z-index: var(--el-index-normal);
     top: 50%;
     transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    @include select-tag-normal;
   }
 
   @include e(collapse-tags) {
-    white-space: normal;
-    z-index: var(--el-index-normal);
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    @include select-tag-normal;
   }
 
   @include e(collapse-tag) {

package/theme-chalk/src/step.scss

@@ -62,7 +62,7 @@
     height: 24px;
     font-size: 14px;
     box-sizing: border-box;
-    background: $color-white;
+    background: getCssVar('bg-color', 'overlay');
     transition: 0.15s ease-out;
 
     @include when(text) {

package/theme-chalk/src/table-column.scss

@@ -69,7 +69,7 @@
       }
 
       &.is-disabled {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
       }
     }

package/theme-chalk/src/table.scss

@@ -345,7 +345,7 @@
         &.#{$namespace}-table-fixed-column--right {
           position: sticky !important;
           z-index: 2;
-          background: #fff;
+          background: getCssVar('bg-color');
           &.is-last-column,
           &.is-first-column {
             &::before {

package/theme-chalk/src/tabs.scss

@@ -152,7 +152,7 @@
     }
 
     @include when(disabled) {
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
       cursor: default;
     }
   }
@@ -223,7 +223,7 @@
     }
   }
   @include m(border-card) {
-    background: $color-white;
+    background: getCssVar('bg-color', 'overlay');
     border: 1px solid getCssVar('border-color');
 
     > .#{$namespace}-tabs__content {
@@ -254,7 +254,7 @@
 
       &.is-active {
         color: var(--el-color-primary);
-        background-color: $color-white;
+        background-color: getCssVar('bg-color', 'overlay');
         border-right-color: getCssVar('border-color');
         border-left-color: getCssVar('border-color');
       }
@@ -262,7 +262,7 @@
         color: var(--el-color-primary);
       }
       &.is-disabled {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
       }
     }
 
@@ -314,7 +314,7 @@
         border: 1px solid transparent;
       }
       .#{$namespace}-tabs__item.is-bottom {
-        margin: 0 -1px -1px -1px;
+        margin: 0 -1px -1px;
       }
     }
   }

package/theme-chalk/src/transfer.scss

@@ -39,7 +39,7 @@
 
 @include b(transfer-panel) {
   overflow: hidden;
-  background: var(--el-color-white);
+  background: getCssVar('bg-color', 'overlay');
   display: inline-block;
   text-align: left;
   vertical-align: middle;
@@ -168,7 +168,7 @@
 
   .#{$namespace}-transfer-panel__footer {
     height: var(--el-transfer-panel-footer-height);
-    background: var(--el-color-white);
+    background: getCssVar('bg-color', 'overlay');
     margin: 0;
     padding: 0;
     border: 1px solid var(--el-transfer-border-color);

package/theme-chalk/src/tree.scss

@@ -10,7 +10,7 @@
 @include b(tree) {
   position: relative;
   cursor: default;
-  background: var(--el-color-white);
+  background: getCssVar('fill-color', 'blank');
   color: var(--el-tree-text-color);
 
   @include e(empty-block) {

package/theme-chalk/src/upload.scss

@@ -2,6 +2,23 @@
 @use 'mixins/utils' as *;
 @use 'common/var' as *;
 
+@mixin upload-success($color: null) {
+  right: -15px;
+  top: -6px;
+  width: 40px;
+  height: 24px;
+  background: var(--el-color-success);
+  text-align: center;
+  transform: rotate(45deg);
+
+  i {
+    font-size: 12px;
+    margin-top: 11px;
+    transform: rotate(-45deg);
+    color: $color;
+  }
+}
+
 @include b(upload) {
   @include utils-inline-flex-center;
 
@@ -341,20 +358,7 @@
     }
 
     .#{bem('upload-list', 'item-status-label')} {
-      position: absolute;
-      right: -15px;
-      top: -6px;
-      width: 40px;
-      height: 24px;
-      background: var(--el-color-success);
-      text-align: center;
-      transform: rotate(45deg);
-
-      i {
-        font-size: 12px;
-        margin-top: 11px;
-        transform: rotate(-45deg);
-      }
+      @include upload-success();
     }
 
     .#{bem('upload-list', 'item-actions')} {
@@ -510,21 +514,7 @@
   }
 
   @include e(label) {
-    position: absolute;
-    right: -15px;
-    top: -6px;
-    width: 40px;
-    height: 24px;
-    background: var(--el-color-success);
-    text-align: center;
-    transform: rotate(45deg);
-
-    i {
-      font-size: 12px;
-      margin-top: 11px;
-      transform: rotate(-45deg);
-      color: #fff;
-    }
+    @include upload-success(#fff);
   }
 
   @include e(progress) {

package/theme-chalk/src/var.scss

@@ -8,30 +8,49 @@
 // do not need that, since this could introduce recalculation overhead for rendering.
 // https://lisilinhart.info/posts/css-variables-performance/
 
+// common
 :root {
-  color-scheme: light;
-
   @include set-css-var-value('color-white', $color-white);
   @include set-css-var-value('color-black', $color-black);
-  @include set-css-var-value('color-primary', $color-primary);
 
   // get rgb
   @each $type in (primary, success, warning, danger, error, info) {
     @include set-css-color-rgb($type);
   }
 
-  @for $i from 1 through 9 {
-    @include set-css-color-type-light('primary', $i);
-  }
-  @include set-css-var-value(
-    ('color-primary', 'dark-2'),
-    map.get($colors, 'primary', 'dark-2')
-  );
+  // Typography
+  @include set-component-css-var('font-size', $font-size);
+  @include set-component-css-var('font-family', $font-family);
+
+  @include set-css-var-value('font-weight-primary', 500);
+  @include set-css-var-value('font-line-height-primary', 24px);
+
+  // z-index --el-index-#{$type}
+  @include set-component-css-var('index', $z-index);
+
+  // --el-border-radius-#{$type}
+  @include set-component-css-var('border-radius', $border-radius);
+
+  // Transition
+  // refer to this website to get the bezier motion function detail
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  @include set-component-css-var('transition-duration', $transition-duration);
+
+  @include set-component-css-var('transition-function', $transition-function);
+  @include set-component-css-var('transition', $transition);
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
 
   // --el-color-#{$type}
   // --el-color-#{$type}-light-{$i}
-  @each $type in (success, warning, danger, error, info) {
-    @include set-css-color-type($type);
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
   }
 
   // color-scheme
@@ -44,18 +63,12 @@
   // Fill --el-fill-color-#{$type}
   @include set-component-css-var('fill-color', $fill-color);
 
-  // --el-border-radius-#{$type}
-  @include set-component-css-var('border-radius', $border-radius);
-  // Typography
-  @include set-component-css-var('font-size', $font-size);
-  @include set-component-css-var('font-family', $font-family);
   // Box-shadow
   // --el-box-shadow-#{$type}
   @include set-component-css-var('box-shadow', $box-shadow);
   // Disable base
   @include set-component-css-var('disabled', $disabled);
-  // z-index --el-index-#{$type}
-  @include set-component-css-var('index', $z-index);
+
   // overlay & mask
   @include set-component-css-var('overlay-color', $overlay-color);
   @include set-component-css-var('mask-color', $mask-color);
@@ -71,18 +84,4 @@
 
   // Svg
   @include css-var-from-global('svg-monochrome-grey', 'border-color');
-
-  @include set-css-var-value('font-weight-primary', 500);
-  @include set-css-var-value('font-line-height-primary', 24px);
-
-  // z-index
-
-  /* Transition
--------------------------- */
-  // refer to this website to get the bezier motion function detail
-  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
-  @include set-component-css-var('transition-duration', $transition-duration);
-
-  @include set-component-css-var('transition-function', $transition-function);
-  @include set-component-css-var('transition', $transition);
 }