element-plus 2.1.7 → 2.1.10

package/theme-chalk/src/alert.scss

@@ -8,17 +8,17 @@
   @include set-component-css-var('alert', $alert);
 
   width: 100%;
-  padding: var(--el-alert-padding);
+  padding: getCssVar('alert', 'padding');
   margin: 0;
   box-sizing: border-box;
-  border-radius: var(--el-alert-border-radius-base);
+  border-radius: getCssVar('alert', 'border-radius-base');
   position: relative;
-  background-color: var(--el-color-white);
+  background-color: getCssVar('color', 'white');
   overflow: hidden;
   opacity: 1;
   display: flex;
   align-items: center;
-  transition: opacity var(--el-transition-duration-fast);
+  transition: opacity getCssVar('transition-duration', 'fast');
 
   @include when(light) {
     .#{$namespace}-alert__close-btn {
@@ -28,10 +28,10 @@
 
   @include when(dark) {
     .#{$namespace}-alert__close-btn {
-      color: var(--el-color-white);
+      color: getCssVar('color', 'white');
     }
     .#{$namespace}-alert__description {
-      color: var(--el-color-white);
+      color: getCssVar('color', 'white');
     }
   }
 
@@ -41,20 +41,23 @@
 
   @each $type in (success, info, warning, error) {
     @include m($type) {
-      --el-alert-bg-color: #{map.get($colors, $type, 'light-9')};
+      @include css-var-from-global(
+        ('alert', 'bg-color'),
+        ('color', $type, 'light-9')
+      );
 
       &.is-light {
-        background-color: var(--el-alert-bg-color);
-        color: var(--el-color-#{$type});
+        background-color: getCssVar('alert', 'bg-color');
+        color: getCssVar('color', $type);
 
         .#{$namespace}-alert__description {
-          color: var(--el-color-#{$type});
+          color: getCssVar('color', $type);
         }
       }
 
       &.is-dark {
-        background-color: var(--el-color-#{$type});
-        color: var(--el-color-white);
+        background-color: getCssVar('color', $type);
+        color: getCssVar('color', 'white');
       }
     }
   }
@@ -65,8 +68,9 @@
   }
 
   & .#{$namespace}-alert__icon {
-    font-size: var(--el-alert-icon-size);
-    width: var(--el-alert-icon-size);
+    font-size: getCssVar('alert', 'icon-size');
+    width: getCssVar('alert', 'icon-size');
+
     @include when(big) {
       font-size: var(--el-alert-icon-large-size);
       width: var(--el-alert-icon-large-size);

package/theme-chalk/src/avatar.scss

@@ -8,6 +8,11 @@
   @include set-component-css-var('avatar', $avatar);
   @include set-component-css-var('avatar-size', $avatar-size);
 
+  @include set-css-var-value(
+    ('avatar', 'size'),
+    map.get($avatar-size, 'default')
+  );
+
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -37,9 +42,12 @@
     font-size: var(--el-avatar-icon-size);
   }
 
-  @each $size in (small, default, large) {
+  @each $size in (small, large) {
     @include m($size) {
-      --el-avatar-size: #{map.get($avatar-size, $size)};
+      @include set-css-var-value(
+        ('avatar', 'size'),
+        map.get($avatar-size, $size)
+      );
     }
   }
 }

package/theme-chalk/src/badge.scss

@@ -13,22 +13,24 @@
   display: inline-block;
 
   @include e(content) {
-    background-color: var(--el-badge-bg-color);
-    border-radius: var(--el-badge-radius);
-    color: var(--el-color-white);
-    display: inline-block;
-    font-size: var(--el-badge-font-size);
-    height: var(--el-badge-size);
-    line-height: var(--el-badge-size);
-    padding: 0 var(--el-badge-padding);
-    text-align: center;
+    background-color: getCssVar('badge', 'bg-color');
+    border-radius: getCssVar('badge', 'radius');
+    color: getCssVar('color', 'white');
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: getCssVar('badge', 'font-size');
+    height: getCssVar('badge', 'size');
+    padding: 0 getCssVar('badge', 'padding');
     white-space: nowrap;
-    border: 1px solid var(--el-color-white);
+    border: 1px solid getCssVar('bg-color');
 
     @include when(fixed) {
       position: absolute;
       top: 0;
-      right: calc(1px + var(--el-badge-size) / 2);
+      right: calc(1px + #{getCssVar('badge', 'size')} / 2);
       transform: translateY(-50%) translateX(100%);
 
       @include when(dot) {
@@ -46,7 +48,7 @@
 
     @each $type in (primary, success, warning, info, danger) {
       @include m($type) {
-        background-color: var(--el-color-#{$type});
+        background-color: getCssVar('color', $type);
       }
     }
   }

package/theme-chalk/src/button.scss

@@ -126,6 +126,8 @@ $button-icon-span-gap: map.merge(
     pointer-events: none;
 
     &:before {
+      // mask the button
+      z-index: 1;
       pointer-events: none;
       content: '';
       position: absolute;

package/theme-chalk/src/calendar.scss

@@ -5,7 +5,7 @@
 @include b(calendar) {
   @include set-component-css-var('calendar', $calendar);
 
-  background-color: #fff;
+  background-color: getCssVar('fill-color', 'blank');
 
   @include e(header) {
     display: flex;
@@ -15,7 +15,7 @@
   }
 
   @include e(title) {
-    color: getCssVar('color-black');
+    color: getCssVar('text-color');
     align-self: center;
   }
 

package/theme-chalk/src/card.scss

@@ -7,31 +7,32 @@
 }
 
 @include b(card) {
-  border-radius: var(--el-card-border-radius);
-  border: 1px solid var(--el-card-border-color);
-  background-color: var(--el-card-bg-color);
+  border-radius: getCssVar('card', 'border-radius');
+  border: 1px solid getCssVar('card', 'border-color');
+  background-color: getCssVar('card', 'bg-color');
   overflow: hidden;
-  color: var(--el-text-color-primary);
-  transition: var(--el-transition-duration);
+  color: getCssVar('text-color', 'primary');
+  transition: getCssVar('transition-duration');
 
   @include when(always-shadow) {
-    box-shadow: var(--el-box-shadow-light);
+    box-shadow: getCssVar('box-shadow', 'light');
   }
 
   @include when(hover-shadow) {
     &:hover,
     &:focus {
-      box-shadow: var(--el-box-shadow-light);
+      box-shadow: getCssVar('box-shadow', 'light');
     }
   }
 
   @include e(header) {
-    padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding);
-    border-bottom: 1px solid var(--el-card-border-color);
+    padding: calc(#{getCssVar('card', 'padding')} - 2px)
+      getCssVar('card', 'padding');
+    border-bottom: 1px solid getCssVar('card', 'border-color');
     box-sizing: border-box;
   }
 
   @include e(body) {
-    padding: var(--el-card-padding);
+    padding: getCssVar('card', 'padding');
   }
 }

package/theme-chalk/src/cascader.scss

@@ -14,7 +14,7 @@
   outline: none;
 
   &:not(.is-disabled):hover {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       cursor: pointer;
       box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
     }
@@ -25,15 +25,7 @@
 
     .#{$namespace}-input__inner {
       text-overflow: ellipsis;
-
-      &:focus {
-        box-shadow: 0 0 0 1px
-          var(
-            --el-input-focus-border-color,
-            map.get($input, 'focus-border-color')
-          )
-          inset;
-      }
+      cursor: pointer;
     }
 
     .#{$namespace}-input__suffix-inner {
@@ -63,7 +55,7 @@
     }
 
     @include when(focus) {
-      .#{$namespace}-input__inner {
+      .#{$namespace}-input__wrapper {
         box-shadow: 0 0 0 1px
           var(
             --el-input-focus-border-color,
@@ -84,7 +76,7 @@
   @include when(disabled) {
     .#{$namespace}-cascader__label {
       z-index: calc(var(--el-index-normal) + 1);
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
     }
   }
 
@@ -212,13 +204,16 @@
     min-width: 60px;
     margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
     padding: 0;
-    color: var(--el-cascader-menu-text-color);
+    color: getCssVar('cascader', 'menu-text-color');
     border: none;
     outline: none;
     box-sizing: border-box;
 
+    background: transparent;
+
     &::placeholder {
-      color: var(--el-text-color-placeholder);
+      // two input overlap
+      color: transparent;
     }
   }
 }

package/theme-chalk/src/check-tag.scss

@@ -21,7 +21,7 @@
 
   @include when(checked) {
     background-color: getCssVar('color', 'primary', 'light-8');
-    color: getCssVar('color', 'primary', 'light-1');
+    color: getCssVar('color', 'primary');
     &:hover {
       background-color: getCssVar('color', 'primary', 'light-7');
     }

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

@@ -76,10 +76,7 @@
 
   &.is-disabled {
     & .#{$namespace}-checkbox-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/checkbox.scss

@@ -144,7 +144,7 @@ $checkbox-bordered-input-width: map.merge(
       }
 
       & + span.#{$namespace}-checkbox__label {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
       }
     }

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

@@ -6,6 +6,34 @@
 $color-picker-size: () !default;
 $color-picker-size: map.merge($common-component-size, $color-picker-size);
 
+@mixin color-picker-thumb {
+  position: absolute;
+  cursor: pointer;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  border-radius: 1px;
+  background: #fff;
+  border: 1px solid getCssVar('border-color', 'lighter');
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  z-index: 1;
+}
+
+@mixin bar-background($side: right) {
+  background: linear-gradient(
+    to $side,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+}
+
 @include b(color-predefine) {
   display: flex;
   font-size: 12px;
@@ -56,32 +84,12 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
 
   @include e(bar) {
     position: relative;
-    background: linear-gradient(
-      to right,
-      #f00 0%,
-      #ff0 17%,
-      #0f0 33%,
-      #0ff 50%,
-      #00f 67%,
-      #f0f 83%,
-      #f00 100%
-    );
+    @include bar-background;
     height: 100%;
   }
 
   @include e(thumb) {
-    position: absolute;
-    cursor: pointer;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    border-radius: 1px;
-    background: #fff;
-    border: 1px solid getCssVar('border-color', 'lighter');
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-    z-index: 1;
+    @include color-picker-thumb;
   }
 
   @include when(vertical) {
@@ -90,16 +98,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     padding: 2px 0;
 
     .#{$namespace}-color-hue-slider__bar {
-      background: linear-gradient(
-        to bottom,
-        #f00 0%,
-        #ff0 17%,
-        #0f0 33%,
-        #0ff 50%,
-        #00f 67%,
-        #f0f 83%,
-        #f00 100%
-      );
+      @include bar-background(bottom);
     }
 
     .#{$namespace}-color-hue-slider__thumb {
@@ -147,36 +146,50 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 }
 
+@mixin alpha-bg {
+  background-image: linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    );
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
+}
+
 @include b(color-alpha-slider) {
   position: relative;
   box-sizing: border-box;
   width: 280px;
   height: 12px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  @include alpha-bg;
 
   @include e(bar) {
     position: relative;
     background: linear-gradient(
       to right,
       rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
+      getCssVar('bg-color') 100%
     );
     height: 100%;
   }
 
   @include e(thumb) {
-    position: absolute;
-    cursor: pointer;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    border-radius: 1px;
-    background: #fff;
-    border: 1px solid getCssVar('border-color', 'lighter');
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-    z-index: 1;
+    @include color-picker-thumb;
   }
 
   @include when(vertical) {
@@ -300,7 +313,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     text-align: center;
 
     @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+      @include alpha-bg;
+      // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
     }
   }
 
@@ -338,3 +352,16 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 }
+
+.#{bem('color-picker')},
+.#{bem('color-picker', 'panel')} {
+  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
+}
+
+.dark {
+  .#{bem('color-picker')},
+  .#{bem('color-picker', 'panel')} {
+    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+  }
+}

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

@@ -49,31 +49,19 @@ $color-error: map.get($colors, 'error', 'base') !default;
 $color-info: map.get($colors, 'info', 'base') !default;
 
 // https://sass-lang.com/documentation/values/maps#immutability
-// mix color with white
-@mixin set-color-type-light($type, $number) {
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
   $colors: map.deep-merge(
     (
       $type: (
-        'light-#{$number}':
+        '#{$mode}-#{$number}':
           mix(
-            $color-white,
-            map.get($colors, $type, 'base'),
-            math.percentage(math.div($number, 10))
-          ),
-      ),
-    ),
-    $colors
-  ) !global;
-}
-
-// mix color with black
-@mixin set-color-type-dark($type, $number) {
-  $colors: map.deep-merge(
-    (
-      $type: (
-        'dark-#{$number}':
-          mix(
-            $color-black,
+            $mix-color,
             map.get($colors, $type, 'base'),
             math.percentage(math.div($number, 10))
           ),
@@ -94,14 +82,15 @@ $color-info: map.get($colors, 'info', 'base') !default;
 // 70% c6e2ff
 // 80% d9ecff
 // 90% ecf5ff
-@for $i from 1 through 9 {
-  @each $type in $types {
-    @include set-color-type-light($type, $i);
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', $color-white);
   }
 }
+
 // --el-color-primary-dark-2
 @each $type in $types {
-  @include set-color-type-dark($type, 2);
+  @include set-color-mix-level($type, 2, 'dark', $color-black);
 }
 
 $text-color: () !default;
@@ -233,7 +222,7 @@ $disabled: () !default;
 $disabled: map.merge(
   (
     'bg-color': getCssVar('fill-color', 'light'),
-    'text-color': getCssVar('text-color-placeholder'),
+    'text-color': getCssVar('text-color', 'placeholder'),
     'border-color': getCssVar('border-color', 'light'),
   ),
   $disabled
@@ -294,7 +283,7 @@ $checkbox: map.merge(
     'checked-text-color': getCssVar('color-primary'),
     'checked-input-border-color': getCssVar('color-primary'),
     'checked-bg-color': getCssVar('color-primary'),
-    'checked-icon-color': getCssVar('fill-color', 'blank'),
+    'checked-icon-color': getCssVar('color', 'white'),
     'input-border-color-hover': getCssVar('color-primary'),
   ),
   $checkbox
@@ -447,7 +436,7 @@ $select-group: map.merge(
 $select-dropdown: () !default;
 $select-dropdown: map.merge(
   (
-    'bg-color': getCssVar('color-white'),
+    'bg-color': getCssVar('bg-color', 'overlay'),
     'shadow': getCssVar('box-shadow-light'),
     'empty-color': getCssVar('text-color-secondary'),
     'max-height': 274px,
@@ -622,7 +611,7 @@ $cascader: map.merge(
   (
     'menu-text-color': getCssVar('text-color-regular'),
     'menu-selected-text-color': getCssVar('color-primary'),
-    'menu-fill': getCssVar('fill-color', 'blank'),
+    'menu-fill': getCssVar('bg-color', 'overlay'),
     'menu-font-size': getCssVar('font-size-base'),
     'menu-radius': getCssVar('border-radius-base'),
     'menu-border': solid 1px getCssVar('border-color-light'),
@@ -746,7 +735,7 @@ $dialog: map.merge(
   (
     'width': 50%,
     'margin-top': 15vh,
-    'bg-color': getCssVar('color-white'),
+    'bg-color': getCssVar('bg-color'),
     'box-shadow': getCssVar('box-shadow'),
     'title-font-size': getCssVar('font-size-large'),
     'content-font-size': 14px,
@@ -886,6 +875,7 @@ $tag: map.merge(
   (
     'font-size': 12px,
     'border-radius': 4px,
+    'border-radius-rounded': 9999px,
   ),
   $tag
 );
@@ -950,10 +940,7 @@ $drawer: () !default;
 $drawer: map.merge(
   (
     'bg-color':
-      var(
-        #{getCssVarName('dialog', 'bg-color')},
-        #{getCssVar('color', 'white')}
-      ),
+      var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
     'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
   ),
   $drawer
@@ -1163,7 +1150,7 @@ $timeline: map.merge(
 $backtop: () !default;
 $backtop: map.merge(
   (
-    'bg-color': getCssVar('fill-color', 'blank'),
+    'bg-color': getCssVar('bg-color', 'overlay'),
     'text-color': getCssVar('color-primary'),
     'hover-bg-color': getCssVar('border-color-extra-light'),
   ),
@@ -1248,7 +1235,6 @@ $avatar-size: map.merge(
 );
 
 // Empty
-
 // css3 var in packages/theme-chalk/src/empty.scss
 $empty: () !default;
 $empty: map.merge(
@@ -1272,7 +1258,6 @@ $empty: map.merge(
 );
 
 // Descriptions
-
 // css3 var in packages/theme-chalk/src/descriptions.scss
 $descriptions: () !default;
 $descriptions: map.merge(

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

@@ -2,12 +2,19 @@
 
 // CSS3 var
 @use './var' as *;
-@use '../mixins/var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;
 
 html.dark {
   color-scheme: dark;
 
-  // todo dark.scss
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
 
   // color-scheme
   // Background --el-bg-color-#{$type}
@@ -18,4 +25,17 @@ html.dark {
   @include set-component-css-var('border-color', $border-color);
   // Fill --el-fill-color-#{$type}
   @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
 }