refactor(color): add css var color for button & fix style for datepicker (#2869)

* refactor(color): add css var color for button & fix style for datepicker

* refactor(button): generate var in class for type

* refactor(var): remove color light-i css var

packages/theme-chalk/src/alert.scss

@@ -8,7 +8,7 @@
   @include set-component-css-var('alert', $--alert);
 
   @each $type in (success, info, warning, error) {
-    --el-alert-#{$type}-color: #{map.get($--colors, $type, 'lighter')};
+    --el-alert-#{$type}-color: #{map.get($--colors, $type, 'light-9')};
   }
 
   width: 100%;

packages/theme-chalk/src/button-group.scss

@@ -0,0 +1,80 @@
+@use "sass:map";
+
+@import 'common/var';
+@import 'mixins/mixins';
+@import 'mixins/utils';
+
+@include b(button-group) {
+  @include utils-clearfix;
+  display: inline-block;
+  vertical-align: middle;
+
+  & > .#{$namespace}-button {
+    float: left;
+    position: relative;
+    & + .#{$namespace}-button {
+      margin-left: 0;
+    }
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &:first-child:last-child {
+      border-top-right-radius: map.get($--button-border-radius, 'default');
+      border-bottom-right-radius: map.get($--button-border-radius, 'default');
+      border-top-left-radius: map.get($--button-border-radius, 'default');
+      border-bottom-left-radius: map.get($--button-border-radius, 'default');
+
+      &.is-round {
+        border-radius: var(--el-border-radius-round);
+      }
+
+      &.is-circle {
+        border-radius: 50%;
+      }
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 1;
+    }
+
+    @include when(active) {
+      z-index: 1;
+    }
+  }
+
+  & > .#{$namespace}-dropdown {
+    & > .#{$namespace}-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: var(--el-button-divide-border-color);
+    }
+  }
+
+  @each $type in (primary, success, warning, danger, info) {
+    .#{$namespace}-button--#{$type} {
+      &:first-child {
+        border-right-color: var(--el-button-divide-border-color);
+      }
+      &:last-child {
+        border-left-color: var(--el-button-divide-border-color);
+      }
+      &:not(:first-child):not(:last-child) {
+        border-left-color: var(--el-button-divide-border-color);
+        border-right-color: var(--el-button-divide-border-color);
+      }
+    }
+  }
+}

packages/theme-chalk/src/button.scss

@@ -8,10 +8,6 @@
 
 @include b(button) {
   @include set-component-css-var('button', $--button);
-
-  @each $type in (primary, success, warning, danger, info) {
-    --el-button-#{$type}-border-color: var(--el-color-#{$type});
-  }
 }
 
 @include b(button) {
@@ -20,13 +16,16 @@
   min-height: map.get($--input-height, 'default');
   white-space: nowrap;
   cursor: pointer;
-  background: var(--el-button-default-background-color);
-  border: var(--el-border-base);
-  border-color: var(--el-button-default-border-color);
-  color: var(
-    --el-button-default-font-color,
-    map.get($--button, 'default-font-color')
+  background: var(
+    --el-button-background-color,
+    map.get($--button, 'background-color')
   );
+  border: var(--el-border-base);
+  border-color: var(
+    --el-button-border-color,
+    map.get($--button, 'border-color')
+  );
+  color: var(--el-button-font-color, map.get($--button, 'font-color'));
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
@@ -168,11 +167,24 @@
 
   @each $type in (primary, success, warning, danger, info) {
     @include m($type) {
-      @include button-variant(
-        map.get($--button-font-color, $type),
-        map.get($--button-background-color, $type),
-        map.get($--button-border-color, $type)
-      );
+      --el-button-font-color: #{map.get($--button-font-color, $type)};
+      --el-button-background-color: #{map.get($--button-background-color, $type)};
+      --el-button-border-color: #{map.get($--button-border-color, $type)};
+      --el-button-hover-color: #{map.get($--colors, $type, 'light-2')};
+      --el-button-active-font-color: #{darken(
+          map.get($--button-font-color, $type),
+          $--button-active-shade-percent
+        )};
+      --el-button-active-background-color: #{darken(
+          map.get($--button-background-color, $type),
+          $--button-active-shade-percent
+        )};
+      --el-button-active-border-color: #{darken(
+          map.get($--button-border-color, $type),
+          $--button-active-shade-percent
+        )};
+
+      @include button-variant($type);
     }
   }
 
@@ -202,11 +214,7 @@
 
     &:hover,
     &:focus {
-      color: mix(
-        $--color-white,
-        $--color-primary,
-        $--button-hover-tint-percent
-      );
+      color: var(--el-color-primary-light-2);
       border-color: transparent;
       background-color: transparent;
     }
@@ -227,78 +235,3 @@
     }
   }
 }
-
-@include b(button-group) {
-  @include utils-clearfix;
-  display: inline-block;
-  vertical-align: middle;
-
-  & > .#{$namespace}-button {
-    float: left;
-    position: relative;
-    & + .#{$namespace}-button {
-      margin-left: 0;
-    }
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &:first-child:last-child {
-      border-top-right-radius: map.get($--button-border-radius, 'default');
-      border-bottom-right-radius: map.get($--button-border-radius, 'default');
-      border-top-left-radius: map.get($--button-border-radius, 'default');
-      border-bottom-left-radius: map.get($--button-border-radius, 'default');
-
-      &.is-round {
-        border-radius: var(--el-border-radius-round);
-      }
-
-      &.is-circle {
-        border-radius: 50%;
-      }
-    }
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-    &:not(:last-child) {
-      margin-right: -1px;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 1;
-    }
-
-    @include when(active) {
-      z-index: 1;
-    }
-  }
-
-  & > .#{$namespace}-dropdown {
-    & > .#{$namespace}-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left-color: var(--el-button-divide-border-color);
-    }
-  }
-
-  @each $type in (primary, success, warning, danger, info) {
-    .#{$namespace}-button--#{$type} {
-      &:first-child {
-        border-right-color: var(--el-button-divide-border-color);
-      }
-      &:last-child {
-        border-left-color: var(--el-button-divide-border-color);
-      }
-      &:not(:first-child):not(:last-child) {
-        border-left-color: var(--el-button-divide-border-color);
-        border-right-color: var(--el-button-divide-border-color);
-      }
-    }
-  }
-}

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

@@ -253,7 +253,7 @@
     padding: 15px;
     font-size: 12px;
     &:hover {
-      color: tint($--color-primary, $--button-hover-tint-percent);
+      color: var(--el-color-primary-light-2);
     }
   }
 }

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

@@ -9,7 +9,7 @@
 // skipAutoTranslation 1
 
 // types
-$--types: primary, success, warning, danger, info;
+$--types: primary, success, warning, danger, error, info;
 
 /* Color
 -------------------------- */
@@ -50,19 +50,24 @@ $--color-error: map.get($--colors, 'error', 'base');
 $--color-info: map.get($--colors, 'info', 'base');
 
 // https://sass-lang.com/documentation/values/maps#immutability
-@mixin set-color-primary-light($color, $number) {
+@mixin set-color-type-light($type, $number) {
   $--colors: map.deep-merge(
     (
-      'primary': (
+      $type: (
         'light-#{$number}':
-          mix($--color-white, $color, math.percentage(math.div($number, 10))),
+          mix(
+            $--color-white,
+            map.get($--colors, $type, 'base'),
+            math.percentage(math.div($number, 10))
+          ),
       ),
     ),
     $--colors
   ) !global;
 }
 
-// $--color-primary-light-i
+// $--colors.primary.light-i
+// --el-color-primary-light-i
 // 10% 53a8ff
 // 20% 66b1ff
 // 30% 79bbff
@@ -73,26 +78,9 @@ $--color-info: map.get($--colors, 'info', 'base');
 // 80% d9ecff
 // 90% ecf5ff
 @for $i from 1 through 9 {
-  @include set-color-primary-light(map.get($--colors, 'primary', 'base'), $i);
-}
-
-// generate
-// $--colors.success.light: mix($--color-white, $--color-success, 80%) !default;
-// $--colors.success.lighter: mix($--color-white, $--color-success, 90%) !default;
-@mixin set-color-type-light($type) {
-  $--colors: map.deep-merge(
-    (
-      $type: (
-        'light': mix($--color-white, map.get($--colors, $type, 'base'), 80%),
-        'lighter': mix($--color-white, map.get($--colors, $type, 'base'), 90%),
-      ),
-    ),
-    $--colors
-  ) !global;
-}
-
-@each $type in (success, warning, danger, error, info) {
-  @include set-color-type-light($type);
+  @each $type in $--types {
+    @include set-color-type-light($type, $i);
+  }
 }
 
 $--text-color: () !default;
@@ -546,9 +534,9 @@ $--button: () !default;
 $--button: map.merge(
   (
     'font-weight': var(--el-font-weight-primary),
-    'default-border-color': var(--el-border-color-base),
-    'default-background-color': var(--el-color-white),
-    'default-font-color': var(--el-text-color-regular),
+    'border-color': var(--el-border-color-base),
+    'background-color': var(--el-color-white),
+    'font-color': var(--el-text-color-regular),
     'disabled-font-color': var(--el-text-color-placeholder),
     'disabled-background-color': var(--el-color-white),
     'disabled-border-color': var(--el-border-color-light),
@@ -888,8 +876,8 @@ $--menu: map.merge(
   (
     'item-font-size': var(--el-font-size-base),
     'item-font-color': var(--el-text-color-primary),
-    'background-color': var(--el-color-white),
     'item-hover-fill': var(--el-color-primary-light-9),
+    'background-color': var(--el-color-white),
     'border-color': #e6e6e6,
   ),
   $--menu

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

@@ -1,4 +1,3 @@
-@import './date-picker/var.scss';
 @import './date-picker/date-table.scss';
 @import './date-picker/month-table.scss';
 @import './date-picker/year-table.scss';

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

@@ -1,7 +1,12 @@
 @import '../common/var';
 @import '../mixins/mixins';
+@import '../mixins/var';
 @import './picker-panel.scss';
 
+@include b(date-picker) {
+  @include set-component-css-var('datepicker', $--datepicker);
+}
+
 @include b(date-picker) {
   width: 322px;
 

packages/theme-chalk/src/date-picker/date-range-picker.scss

@@ -1,4 +1,9 @@
 @import '../common/var';
+@import '../mixins/var';
+
+@include b(date-range-picker) {
+  @include set-component-css-var('datepicker', $--datepicker);
+}
 
 @include b(date-range-picker) {
   width: 646px;

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

@@ -1,7 +1,6 @@
 @import '../common/var';
 
 @include b(picker-panel) {
-  position: relative;
   color: var(--el-text-color-regular);
   background: $--color-white;
   border-radius: var(--el-border-radius-base);

packages/theme-chalk/src/date-picker/var.scss

@@ -1,6 +0,0 @@
-@import '../mixins/var';
-@import '../common/var.scss';
-
-:root {
-  @include set-component-css-var('datepicker', $--datepicker);
-}

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

@@ -22,7 +22,7 @@
     }
 
     &.disabled .cell {
-      background-color: $--background-color-base;
+      background-color: var(--el-background-color-base);
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 

packages/theme-chalk/src/message.scss

@@ -54,8 +54,8 @@
 
   @each $type in (success, info, warning, error) {
     @include m($type) {
-      background-color: map.get($--colors, $type, 'lighter');
-      border-color: map.get($--colors, $type, 'light');
+      background-color: map.get($--colors, $type, 'light-9');
+      border-color: map.get($--colors, $type, 'light-8');
 
       .#{$namespace}-message__content {
         color: var(--el-message-#{$type}-font-color);

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

@@ -1,20 +1,21 @@
 @import '../common/var';
-@mixin button-plain($color) {
+
+@mixin button-plain($color, $type) {
   color: $color;
-  background: mix($--color-white, $color, 90%);
-  border-color: mix($--color-white, $color, 60%);
+  background-color: map.get($--colors, $type, 'light-9');
+  border-color: map.get($--colors, $type, 'light-6');
 
   &:hover,
   &:focus {
     background: $color;
     border-color: $color;
-    color: $--color-white;
+    color: var(--el-color-white);
   }
 
   &:active {
-    background: mix($--color-black, $color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $color, $--button-active-shade-percent);
-    color: $--color-white;
+    background: var(--el-button-active-background-color);
+    border-color: var(--el-button-active-border-color);
+    color: var(--el-color-white);
     outline: none;
   }
 
@@ -23,60 +24,32 @@
     &:hover,
     &:focus,
     &:active {
-      color: mix($--color-white, $color, 40%);
-      background-color: mix($--color-white, $color, 90%);
-      border-color: mix($--color-white, $color, 80%);
+      color: map.get($--colors, $type, 'light-4');
+      background-color: map.get($--colors, $type, 'light-9');
+      border-color: map.get($--colors, $type, 'light-8');
     }
   }
 }
 
-@mixin button-variant($color, $background-color, $border-color) {
-  color: $color;
-  background-color: $background-color;
-  border-color: $border-color;
-
+@mixin button-variant($type) {
   &:hover,
   &:focus {
-    background: mix(
-      $--color-white,
-      $background-color,
-      $--button-hover-tint-percent
-    );
-    border-color: mix(
-      $--color-white,
-      $border-color,
-      $--button-hover-tint-percent
-    );
-    color: $color;
+    background: var(--el-button-hover-color);
+    border-color: var(--el-button-hover-color);
+    color: var(--el-button-font-color);
   }
 
   &:active {
-    background: mix(
-      $--color-black,
-      $background-color,
-      $--button-active-shade-percent
-    );
-    border-color: mix(
-      $--color-black,
-      $border-color,
-      $--button-active-shade-percent
-    );
-    color: $color;
+    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: mix(
-      $--color-black,
-      $background-color,
-      $--button-active-shade-percent
-    );
-    border-color: mix(
-      $--color-black,
-      $border-color,
-      $--button-active-shade-percent
-    );
-    color: $color;
+    background: var(--el-button-active-background-color);
+    border-color: var(--el-button-active-border-color);
+    color: var(--el-button-active-font-color);
   }
 
   &.is-disabled {
@@ -85,13 +58,13 @@
     &:focus,
     &:active {
       color: $--color-white;
-      background-color: mix($background-color, $--color-white);
-      border-color: mix($border-color, $--color-white);
+      background-color: map.get($--colors, $type, 'light-5');
+      border-color: map.get($--colors, $type, 'light-5');
     }
   }
 
   &.is-plain {
-    @include button-plain($background-color);
+    @include button-plain(var(--el-button-background-color), $type);
   }
 }
 

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

@@ -1,13 +1,19 @@
 @use "sass:map";
 
-@mixin set-css-color-primary($i) {
-  --el-color-primary-light-#{$i}: #{map.get($--colors, 'primary', 'light-#{$i}')};
+@mixin set-css-color-type-light($type, $i) {
+  --el-color-#{$type}-light-#{$i}: #{map.get($--colors, $type, 'light-#{$i}')};
 }
 
 @mixin set-css-color-type($type) {
   --el-color-#{$type}: #{map.get($--colors, $type, 'base')};
-  --el-color-#{$type}-light: #{map.get($--colors, $type, 'light')};
-  --el-color-#{$type}-lighter: #{map.get($--colors, $type, 'lighter')};
+  --el-color-#{$type}-light: #{map.get($--colors, $type, 'light-8')};
+  --el-color-#{$type}-lighter: #{map.get($--colors, $type, 'light-9')};
+
+  // need to be considered
+  // may be we do not need add it to css var
+  // @each $i in (2, 4, 5, 6, 8, 9) {
+  //   @include set-css-color-type-light($type, $i);
+  // }
 }
 
 @mixin set-css-var-type($name, $type, $--variables) {

packages/theme-chalk/src/pagination.scss

@@ -215,7 +215,7 @@
     .btn-next,
     .#{$namespace}-pager li {
       margin: 0 5px;
-      background-color: map.get($--colors, 'info', 'lighter');
+      background-color: map.get($--colors, 'info', 'light-9');
       color: var(--el-text-color-regular);
       min-width: 30px;
       border-radius: 2px;

packages/theme-chalk/src/reset.scss

@@ -15,7 +15,7 @@ a {
 
   &:hover,
   &:focus {
-    color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
+    color: var(--el-color-primary-light-2);
   }
 
   &:active {

packages/theme-chalk/src/var.scss

@@ -9,18 +9,17 @@
 // https://lisilinhart.info/posts/css-variables-performance/
 
 :root {
-  --el-color-primary: #{$--color-primary};
   --el-color-white: #{$--color-white};
   --el-color-black: #{$--color-black};
 
-  // --el-color-primary-light-#{$i}
+  --el-color-primary: #{$--color-primary};
+
   @for $i from 1 through 9 {
-    @include set-css-color-primary($i);
+    @include set-css-color-type-light('primary', $i);
   }
 
   // --el-color-#{$type}
-  // --el-color-#{$type}-light
-  // --el-color-#{$type}-lighter
+  // --el-color-#{$type}-light-{$i}
   @each $type in (success, warning, danger, error, info) {
     @include set-css-color-type($type);
   }

yarn.lock

@@ -4120,22 +4120,22 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001154:
-  version "1.0.30001157"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz#2d11aaeb239b340bc1aa730eca18a37fdb07a9ab"
-  integrity sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==
+  version "1.0.30001249"
+  resolved "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001249.tgz"
+  integrity undefined
 
 caniuse-lite@^1.0.30001125:
-  version "1.0.30001125"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001125.tgz#2a1a51ee045a0a2207474b086f628c34725e997b"
+  version "1.0.30001249"
+  resolved "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001249.tgz"
 
 caniuse-lite@^1.0.30001135:
   version "1.0.30001135"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001135.tgz#995b1eb94404a3c9a0d7600c113c9bb27f2cd8aa"
 
 caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001243:
-  version "1.0.30001248"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001248.tgz#26ab45e340f155ea5da2920dadb76a533cb8ebce"
-  integrity sha512-NwlQbJkxUFJ8nMErnGtT0QTM2TJ33xgz4KXJSMIrjXIbDVdaYueGyjOrLKRtJC+rTiWfi6j5cnZN1NBiSBJGNw==
+  version "1.0.30001249"
+  resolved "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001249.tgz"
+  integrity undefined
 
 capture-exit@^2.0.0:
   version "2.0.0"