@element-plus/nightly 0.0.20220222 → 0.0.20220225

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

@@ -1,10 +1,11 @@
 @use 'sass:map';
 
 @use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
 @use 'common/var' as *;
 
 @include b(check-tag) {
-  background-color: var(--el-bg-color);
+  background-color: getCssVar('color', 'info', 'light-9');
   border-radius: var(--el-border-radius-base);
   color: var(--el-color-info);
   cursor: pointer;
@@ -14,15 +15,16 @@
   padding: 7px 15px;
   transition: var(--el-transition-all);
   font-weight: bold;
+
   &:hover {
-    background-color: rgb(220, 223, 230);
+    background-color: getCssVar('color', 'info', 'light-7');
   }
 
   @include when(checked) {
-    background-color: #deedfc;
-    color: map.get($colors, 'primary', 'light-1');
+    background-color: getCssVar('color', 'primary', 'light-8');
+    color: getCssVar('color', 'primary', 'light-1');
     &:hover {
-      background-color: map.get($colors, 'primary', 'light-7');
+      background-color: getCssVar('color', 'primary', 'light-7');
     }
   }
 }

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

@@ -67,7 +67,7 @@
       color: var(--el-checkbox-button-checked-text-color);
       background-color: var(--el-checkbox-button-checked-bg-color);
       border-color: var(--el-checkbox-button-checked-border-color);
-      box-shadow: -1px 0 0 0 var(--el-color-primary-light-5);
+      box-shadow: -1px 0 0 0 var(--el-color-primary-light-7);
     }
     &:first-child .#{$namespace}-checkbox-button__inner {
       border-left-color: var(--el-checkbox-button-checked-border-color);

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

@@ -461,9 +461,9 @@ $input: () !default;
 $input: map.merge(
   (
     'text-color': var(--el-text-color-regular),
-    'border': 0 0 0 1px var(--el-input-border-color) inset,
-    'hover-border': 0 0 0 1px var(--el-input-hover-border-color) inset,
-    'focus-border': 0 0 0 1px var(--el-input-focus-border-color) inset,
+    'border': var(--el-border-base),
+    '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-radius': var(--el-border-radius-base),
@@ -795,8 +795,6 @@ $tag: map.merge(
   $tag
 );
 
-$tag-color: () !default;
-
 $tag-height: () !default;
 $tag-height: map.merge(
   (
@@ -827,15 +825,6 @@ $tag-icon-size: map.merge(
   $tag-icon-size
 );
 
-@each $type in $types {
-  $tag-color: map.merge(
-    (
-      $type: map.get($colors, $type, 'base'),
-    ),
-    $tag-color
-  ) !global;
-}
-
 // Tree
 // css3 var in packages/theme-chalk/src/tree.scss
 $tree: () !default;

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

@@ -65,12 +65,12 @@
 
     &.today {
       position: relative;
-      .el-date-table-cell__text {
+      .#{$namespace}-date-table-cell__text {
         color: var(--el-color-primary);
         font-weight: bold;
       }
-      &.start-date .el-date-table-cell__text,
-      &.end-date .el-date-table-cell__text {
+      &.start-date .#{$namespace}-date-table-cell__text,
+      &.end-date .#{$namespace}-date-table-cell__text {
         color: $color-white;
       }
     }
@@ -79,47 +79,47 @@
       color: var(--el-datepicker-hover-text-color);
     }
 
-    &.in-range .el-date-table-cell {
+    &.in-range .#{$namespace}-date-table-cell {
       background-color: var(--el-datepicker-inrange-bg-color);
       &:hover {
         background-color: var(--el-datepicker-inrange-hover-bg-color);
       }
     }
 
-    &.current:not(.disabled) .el-date-table-cell__text {
+    &.current:not(.disabled) .#{$namespace}-date-table-cell__text {
       color: $color-white;
       background-color: var(--el-datepicker-active-color);
     }
-    &.start-date .el-date-table-cell,
-    &.end-date .el-date-table-cell {
+    &.start-date .#{$namespace}-date-table-cell,
+    &.end-date .#{$namespace}-date-table-cell {
       color: $color-white;
     }
 
-    &.start-date .el-date-table-cell__text,
-    &.end-date .el-date-table-cell__text {
+    &.start-date .#{$namespace}-date-table-cell__text,
+    &.end-date .#{$namespace}-date-table-cell__text {
       background-color: var(--el-datepicker-active-color);
     }
 
-    &.start-date .el-date-table-cell {
+    &.start-date .#{$namespace}-date-table-cell {
       margin-left: 5px;
       border-top-left-radius: 15px;
       border-bottom-left-radius: 15px;
     }
 
-    &.end-date .el-date-table-cell {
+    &.end-date .#{$namespace}-date-table-cell {
       margin-right: 5px;
       border-top-right-radius: 15px;
       border-bottom-right-radius: 15px;
     }
 
-    &.disabled .el-date-table-cell {
+    &.disabled .#{$namespace}-date-table-cell {
       background-color: var(--el-bg-color);
       opacity: 1;
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
     }
 
-    &.selected .el-date-table-cell {
+    &.selected .#{$namespace}-date-table-cell {
       margin-left: 5px;
       margin-right: 5px;
       background-color: var(--el-datepicker-inrange-bg-color);
@@ -129,7 +129,7 @@
       }
     }
 
-    &.selected .el-date-table-cell__text {
+    &.selected .#{$namespace}-date-table-cell__text {
       background-color: var(--el-datepicker-active-color);
       color: $color-white;
       border-radius: 15px;

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

@@ -18,7 +18,7 @@
 
 @include b(date-editor) {
   @include set-component-css-var('date-editor', $date-editor);
-
+  @include set-component-css-var('input', $input);
   position: relative;
   display: inline-block;
   text-align: left;
@@ -144,10 +144,9 @@
   }
 
   @include when(active) {
-    border-color: var(--el-color-primary);
-
+    @include inset-input-border(var(--el-input-focus-border-color));
     &:hover {
-      border-color: var(--el-color-primary);
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }
 

package/theme-chalk/src/input.scss

@@ -52,12 +52,15 @@
     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;
-    box-shadow: var(--el-input-border, map.get($input, 'border'));
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
     border-radius: var(
       --el-input-border-radius,
       map.get($input, 'border-radius')
     );
     transition: var(--el-transition-box-shadow);
+    border: none;
 
     &::placeholder {
       color: var(
@@ -67,12 +70,12 @@
     }
 
     &:hover {
-      box-shadow: var(--el-input-hover-border);
+      @include inset-input-border(var(--el-input-hover-border-color));
     }
 
     &:focus {
       outline: none;
-      box-shadow: var(--el-input-focus-border);
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }
 
@@ -166,8 +169,10 @@
     padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
     transition: var(--el-transition-box-shadow);
     width: 100%;
-    box-shadow: var(--el-input-border, map.get($input, 'border'));
-
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
+    border: none;
     &::placeholder {
       color: var(
         --el-input-placeholder-color,
@@ -176,12 +181,12 @@
     }
 
     &:hover {
-      box-shadow: var(--el-input-hover-border);
+      @include inset-input-border(var(--el-input-hover-border-color));
     }
 
     &:focus {
       outline: none;
-      box-shadow: var(--el-input-focus-border);
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }
 

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

@@ -1,35 +1,139 @@
 @use 'sass:map';
 
+@use '../mixins/var' as *;
+@use '../mixins/function' as *;
 @use '../common/var' as *;
 
 @mixin button-plain($color, $type) {
-  --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')};
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        $type,
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-9',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+      ),
+      'border-color': (
+        'color',
+        $type,
+      ),
+    ),
+    'active': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'border-color': (
+        'color',
+        $type,
+      ),
+    ),
+  );
 
-  --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});
-
-  --el-button-active-text-color: var(--el-color-white);
-  --el-button-active-border-color: var(--el-color-#{$type});
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
 
   &.is-disabled {
     &,
     &:hover,
     &:focus,
     &:active {
-      color: map.get($colors, $type, 'light-5');
-      background-color: map.get($colors, $type, 'light-9');
-      border-color: map.get($colors, $type, 'light-8');
+      color: getCssVar('color', $type, 'light-5');
+      background-color: getCssVar('color', $type, 'light-9');
+      border-color: getCssVar('color', $type, 'light-8');
     }
   }
 }
 
 @mixin button-variant($type) {
-  --el-button-text-color: var(--el-color-white);
-  --el-button-hover-text-color: var(--el-color-white);
-  --el-button-disabled-text-color: var(--el-color-white);
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+      ),
+      'border-color': (
+        'color',
+        $type,
+      ),
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-3',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-3',
+      ),
+    ),
+    'active': (
+      'bg-color': (
+        'color',
+        $type,
+        'dark-2',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'dark-2',
+      ),
+    ),
+    'disabled': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+    ),
+  );
+
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
+
   &.is-plain {
     @include button-plain(var(--el-button-bg-color), $type);
   }

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

@@ -1,5 +1,7 @@
 @use 'sass:map';
 
+@use 'config';
+@use 'function' as *;
 @use '../common/var' as *;
 
 @mixin set-css-color-type-light($type, $i) {
@@ -29,3 +31,13 @@
   $color: map.get($colors, $type, 'base');
   --el-color-#{$type}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
 }
+
+// generate css var from existing css var
+// for example:
+// @include css-var-from-global(('button', 'text-color'), ('color', $type))
+// --el-button-text-color: var(--el-color-#{$type});
+@mixin css-var-from-global($var, $gVar) {
+  $varName: joinVarName($var);
+  $gVarName: joinVarName($gVar);
+  #{$varName}: var(#{$gVarName});
+}

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

@@ -41,3 +41,20 @@
   @return containsModifier($selector) or containWhenFlag($selector) or
     containPseudoClass($selector);
 }
+
+// join var name
+// joinVarName('button', 'text-color') => '--el-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}

package/theme-chalk/src/row.scss

@@ -20,7 +20,9 @@
   @include when(justify-space-around) {
     justify-content: space-around;
   }
-
+  @include when(justify-space-evenly) {
+    justify-content: space-evenly;
+  }
   @include when(align-middle) {
     align-items: center;
   }

package/theme-chalk/src/select.scss

@@ -157,6 +157,9 @@
       box-sizing: border-box;
       border-color: transparent;
       margin: 2px 6px 2px 0;
+      &:last-child {
+        margin-right: 0;
+      }
 
       .#{$namespace}-icon-close {
         background-color: var(--el-text-color-placeholder);

package/theme-chalk/src/tag.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 @use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
@@ -20,39 +21,63 @@ $tag-icon-span-gap: map.merge(
   $tag-icon-span-gap
 );
 
+@function returnVarList($var, $type: 'primary') {
+  $list: ('color', 'white');
+  @if $var != false {
+    $list: ('color', $type, $var);
+  }
+  @return $list;
+}
+// false mean --el-color-white
 @mixin genTheme(
   $backgroundColorWeight,
   $borderColorWeight,
   $textColorWeight,
   $hoverColorWeight
 ) {
-  --el-tag-bg-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $backgroundColorWeight
-    )};
-  --el-tag-border-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $borderColorWeight
-    )};
-  --el-tag-text-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $textColorWeight
-    )};
-  --el-tag-hover-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $hoverColorWeight
-    )};
+  @include css-var-from-global(
+    ('tag', 'bg-color'),
+    returnVarList($backgroundColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'border-color'),
+    returnVarList($borderColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'text-color'),
+    returnVarList($textColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'hover-color'),
+    returnVarList($hoverColorWeight)
+  );
 
-  background-color: var(--el-tag-bg-color);
-  border-color: var(--el-tag-border-color);
-  color: var(--el-tag-text-color);
+  @each $type in $types {
+    &.#{$namespace}-tag--#{$type} {
+      @include css-var-from-global(
+        ('tag', 'bg-color'),
+        returnVarList($backgroundColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'border-color'),
+        returnVarList($borderColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'text-color'),
+        returnVarList($textColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'hover-color'),
+        returnVarList($hoverColorWeight, $type)
+      );
+    }
+  }
+}
 
+@include b(tag) {
+  @include genTheme('light-9', 'light-8', '', '');
   @include when(hit) {
-    border-color: map.get($tag-color, 'primary');
+    border-color: getCssVar('color', 'primary');
   }
 
   .#{$namespace}-tag__close {
@@ -63,38 +88,10 @@ $tag-icon-span-gap: map.merge(
     }
   }
 
-  @each $type in $types {
-    &.#{$namespace}-tag--#{$type} {
-      --el-tag-bg-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $backgroundColorWeight
-        )};
-      --el-tag-border-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $borderColorWeight
-        )};
-      --el-tag-text-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $textColorWeight
-        )};
-      --el-tag-hover-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $hoverColorWeight
-        )};
-
-      @include when(hit) {
-        border-color: map.get($tag-color, $type);
-      }
-    }
-  }
-}
+  background-color: var(--el-tag-bg-color);
+  border-color: var(--el-tag-border-color);
+  color: var(--el-tag-text-color);
 
-@include b(tag) {
-  @include genTheme(10%, 20%, 100%, 100%);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -111,21 +108,14 @@ $tag-icon-span-gap: map.merge(
 
   --el-icon-size: 14px;
 
+  $svg-margin-size: 1px;
   .#{$namespace}-icon {
     border-radius: 50%;
-    text-align: center;
-    position: relative;
     cursor: pointer;
 
-    font-size: calc(var(--el-icon-size) - 1px);
-
+    font-size: calc(var(--el-icon-size) - #{$svg-margin-size * 2});
     height: var(--el-icon-size);
     width: var(--el-icon-size);
-    line-height: var(--el-icon-size);
-
-    svg {
-      margin: 1px;
-    }
   }
 
   .#{$namespace}-tag__close {
@@ -133,11 +123,11 @@ $tag-icon-span-gap: map.merge(
   }
 
   @include m(dark) {
-    @include genTheme(100%, 100%, 0, 80%);
+    @include genTheme('', '', false, 'light-3');
   }
 
   @include m(plain) {
-    @include genTheme(0, 40%, 100%, 100%);
+    @include genTheme(false, 'light-5', '', '');
   }
 
   &.is-closable {
@@ -166,4 +156,12 @@ $tag-icon-span-gap: map.merge(
       transform: scale(0.8);
     }
   }
+
+  @each $type in $types {
+    &.#{$namespace}-tag--#{$type} {
+      @include when(hit) {
+        border-color: getCssVar('color', $type);
+      }
+    }
+  }
 }