refactor(button): use sass map & add outline:none for focus (element-…

…plus#2774)
zlx-1127 · Jul 31, 2021 · e6013c1 · e6013c1
1 parent a2e1491
commit e6013c1
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 66 deletions.
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
@@ -1,36 +1,17 @@
-@charset "UTF-8";
 @use "sass:map";
 
 @import 'common/var';
 @import 'mixins/button';
 @import 'mixins/mixins';
 @import 'mixins/utils';
-
-$--button: () !default;
-
-@each $type in (primary, success, warning, danger, info) {
-  $--button: map.deep-merge(
-    $--button,
-    (
-      'border-color': (
-        $type: map.get($--colors, $type, 'base'),
-      ),
-      'font-color': (
-        $type: map.get($--colors, 'white'),
-      ),
-      'background-color': (
-        $type: map.get($--colors, $type, 'base'),
-      ),
-    )
-  ) !global;
-}
+@import 'mixins/var';
 
 :root {
   @each $type in (primary, success, warning, danger, info) {
     --el-button-#{$type}-border-color: var(--el-color-#{$type});
   }
 
-  --el-button-divide-border-color: #{rgba($--color-white, 0.5)};
+  @include set-component-css-var('button', $--button);
 }
 
 @include b(button) {
@@ -42,7 +23,10 @@ $--button: () !default;
   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);
+  color: var(
+    --el-button-default-font-color,
+    map.get($--button, 'default-font-color')
+  );
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
@@ -65,8 +49,9 @@ $--button: () !default;
   &:hover,
   &:focus {
     color: var(--el-color-primary);
-    border-color: map.get($--colors, 'primary', 'light-7');
-    background-color: map.get($--colors, 'primary', 'light-9');
+    border-color: var(--el-color-primary-light-7);
+    background-color: var(--el-color-primary-light-9);
+    outline: none;
   }
 
   &:active {
@@ -184,9 +169,9 @@ $--button: () !default;
   @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)
+        map.get($--button-font-color, $type),
+        map.get($--button-background-color, $type),
+        map.get($--button-border-color, $type)
       );
     }
   }

diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
@@ -310,10 +310,16 @@ $--checkbox-line-height: map.merge(
     white-space: nowrap;
     vertical-align: middle;
     cursor: pointer;
-    background: var(--el-button-default-background-color);
+    background: var(
+      --el-button-default-background-color,
+      map.get($--button, 'default-background-color')
+    );
     border: $--border-base;
     border-left: 0;
-    color: var(--el-button-default-font-color);
+    color: var(
+      --el-button-default-font-color,
+      map.get($--button, 'default-font-color')
+    );
     -webkit-appearance: none;
     text-align: center;
     box-sizing: border-box;
@@ -365,15 +371,27 @@ $--checkbox-line-height: map.merge(
 
   &.is-disabled {
     & .#{$namespace}-checkbox-button__inner {
-      color: var(--el-button-disabled-font-color);
+      color: var(
+        --el-button-disabled-font-color,
+        map.get($--button, 'disabled-font-color')
+      );
       cursor: not-allowed;
       background-image: none;
-      background-color: var(--el-button-disabled-background-color);
-      border-color: var(--el-button-disabled-border-color);
+      background-color: var(
+        --el-button-disabled-background-color,
+        map.get($--button, 'disabled-background-color')
+      );
+      border-color: var(
+        --el-button-disabled-border-color,
+        map.get($--button, 'disabled-border-color')
+      );
       box-shadow: none;
     }
     &:first-child .#{$namespace}-checkbox-button__inner {
-      border-left-color: var(--el-button-disabled-border-color);
+      border-left-color: var(
+        --el-button-disabled-border-color,
+        map.get($--button, 'disabled-border-color')
+      );
     }
   }
 

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
@@ -8,6 +8,9 @@
 // type|skipAutoTranslation|Category|Order
 // skipAutoTranslation 1
 
+// types
+$--types: primary, success, warning, danger, info;
+
 /* Color
 -------------------------- */
 $--colors: () !default;
@@ -49,13 +52,13 @@ $--color-info: map.get($--colors, 'info', 'base');
 // https://sass-lang.com/documentation/values/maps#immutability
 @mixin set-color-primary-light($color, $number) {
   $--colors: map.deep-merge(
-    $--colors,
     (
       'primary': (
         'light-#{$number}':
           mix($--color-white, $color, math.percentage(math.div($number, 10))),
       ),
-    )
+    ),
+    $--colors
   ) !global;
 }
 
@@ -78,13 +81,13 @@ $--color-info: map.get($--colors, 'info', 'base');
 // $--colors.success.lighter: mix($--color-white, $--color-success, 90%) !default;
 @mixin set-color-type-light($type) {
   $--colors: map.deep-merge(
-    $--colors,
     (
       $type: (
         'light': mix($--color-white, map.get($--colors, $type, 'base'), 80%),
         'lighter': mix($--color-white, map.get($--colors, $type, 'base'), 90%),
       ),
-    )
+    ),
+    $--colors
   ) !global;
 }
 
@@ -410,6 +413,53 @@ $--input-number-width: map.merge(
 
 /* Button
 -------------------------- */
+// css3 var in packages/theme-chalk/src/cascader.scss
+$--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),
+    'disabled-font-color': var(--el-text-color-placeholder),
+    'disabled-background-color': var(--el-color-white),
+    'disabled-border-color': var(--el-border-color-light),
+    'divide-border-color': rgba($--color-white, 0.5),
+  ),
+  $--button
+);
+
+// need mix, so do not use css var
+$--button-hover-tint-percent: 20%;
+$--button-active-shade-percent: 10%;
+
+$--button-border-color: () !default;
+$--button-background-color: () !default;
+$--button-font-color: () !default;
+
+@each $type in $--types {
+  $--button-border-color: map.merge(
+    (
+      $type: map.get($--colors, $type, 'base'),
+    ),
+    $--button-border-color
+  ) !global;
+
+  $--button-background-color: map.merge(
+    (
+      $type: map.get($--colors, $type, 'base'),
+    ),
+    $--button-background-color
+  ) !global;
+
+  $--button-font-color: map.merge(
+    (
+      $type: map.get($--colors, 'white'),
+    ),
+    $--button-font-color
+  ) !global;
+}
+
 $--button-font-size: () !default;
 $--button-font-size: map.merge(
   (
@@ -454,12 +504,6 @@ $--button-padding-horizontal: map.merge(
   $--button-padding-horizontal
 );
 
-// need mix
-$--button-default-border-color: map.get($--border-color, 'base') !default;
-
-$--button-hover-tint-percent: 20% !default;
-$--button-active-shade-percent: 10% !default;
-
 /* Switch
 -------------------------- */
 // refactor with css3 var

diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @import 'mixins/mixins';
 @import 'mixins/var';
 @import 'common/var';
@@ -72,7 +74,8 @@
     }
 
     &.#{$namespace}-button--default::before {
-      background: mix($--button-default-border-color, transparent, 50%);
+      background: var(--el-default-border-color);
+      opacity: 0.5;
     }
 
     &:hover {

diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
@@ -14,11 +14,20 @@
     line-height: 1;
     white-space: nowrap;
     vertical-align: middle;
-    background: var(--el-button-default-background-color);
+    background: var(
+      --el-button-default-background-color,
+      map.get($--button, 'default-background-color')
+    );
     border: $--border-base;
-    font-weight: var(--el-button-font-weight);
+    font-weight: var(
+      --el-button-font-weight,
+      map.get($--button, 'font-weight')
+    );
     border-left: 0;
-    color: var(--el-button-default-font-color);
+    color: var(
+      --el-button-default-font-color,
+      map.get($--button, 'default-font-color')
+    );
     -webkit-appearance: none;
     text-align: center;
     box-sizing: border-box;
@@ -74,11 +83,20 @@
 
     &:disabled {
       & + .#{$namespace}-radio-button__inner {
-        color: var(--el-button-disabled-font-color);
+        color: var(
+          --el-button-disabled-font-color,
+          map.get($--button, 'disabled-font-color')
+        );
         cursor: not-allowed;
         background-image: none;
-        background-color: var(--el-button-disabled-background-color);
-        border-color: var(--el-button-disabled-border-color);
+        background-color: var(
+          --el-button-disabled-background-color,
+          map.get($--button, 'disabled-background-color')
+        );
+        border-color: var(
+          --el-button-disabled-border-color,
+          map.get($--button, 'disabled-border-color')
+        );
         box-shadow: none;
       }
       &:checked + .#{$namespace}-radio-button__inner {

diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
@@ -81,23 +81,10 @@
   --el-disabled-color-base: var(--el-text-color-placeholder);
   --el-disabled-border-base: var(--el-border-color-light);
 
-  // some var for component, but because they are used in many places, need to be global
-  // button
-  --el-button-font-weight: var(--el-font-weight-primary);
-
-  --el-button-default-font-color: var(--el-text-color-regular);
-  --el-button-default-background-color: var(--el-color-white);
-  --el-button-default-border-color: var(--el-border-color-base);
-  --el-button-disabled-font-color: var(--el-text-color-placeholder);
-  --el-button-disabled-background-color: var(--el-color-white);
-  --el-button-disabled-border-color: var(--el-border-color-light);
-}
-
-/* Transition
+  /* 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)
-:root {
+  // 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)
   --el-transition-duration: 0.3s;
   --el-transition-duration-fast: 0.2s;
   --el-ease-in-out-bezier-function: cubic-bezier(0.645, 0.045, 0.355, 1);