调整button组件以适配最新的规范

src/form/button.js

@@ -9,13 +9,10 @@ import '../icon/index.js'
 
 class Button extends Component {
   static props = {
-    type: 'primary',
     icon: '',
-    size: 'l',
     autofocus: false,
     loading: {
       type: Boolean,
-      default: false,
       observer(val) {
         if (val) {
           this.cacheIcon = this.icon
@@ -26,7 +23,7 @@ class Button extends Component {
       }
     },
     disabled: false,
-    lazy: 0 // 并发拦截时间, 单位毫秒
+    lazy: 'num!0' // 并发拦截时间, 单位毫秒
   }
 
   static styles = [
@@ -35,6 +32,8 @@ class Button extends Component {
       :host {
         overflow: hidden;
         display: inline-flex;
+        min-width: 108px;
+        height: 32px;
         border: 0;
         border-radius: 3px;
         user-select: none;
@@ -53,20 +52,46 @@ class Button extends Component {
           height: inherit;
           padding: var(--wc-button-padding, 0 4px);
           line-height: 1;
-          border: 1px solid transparent;
+          border: 1px solid var(--wc-button-border-color, var(--color-dark-1));
           border-radius: inherit;
           white-space: nowrap;
           background: var(--wc-button-background, #fff);
           font-size: inherit;
           font-family: inherit;
           outline: none;
-          color: inherit;
+          color: var(--wc-button-color, var(--color-dark-2));
           cursor: inherit;
           transition: background 0.15s linear, color 0.15s linear;
 
           &::-moz-focus-inner {
             border: none;
           }
+
+          &:hover {
+            color: var(--wc-button-color-hover, var(--color-dark-1));
+            border-color: var(
+              --wc-button-border-color-hover,
+              var(--color-dark-2)
+            );
+            background: var(
+              --wc-button-background-hover,
+              var(--wc-button-background, #fff)
+            );
+          }
+          &:active {
+            color: var(--wc-button-color-active, var(--color-dark-3));
+            background: var(
+              --wc-button-background-active,
+              var(--wc-button-background, #fff)
+            );
+          }
+          &:disabled {
+            color: var(--wc-button-color-disabled, var(--color-dark-2));
+            background: var(
+              --wc-button-background-disabled,
+              var(--wc-button-background, #fff)
+            );
+          }
         }
 
         .icon {
@@ -74,8 +99,26 @@ class Button extends Component {
           --wc-icon-size: var(--wc-button-icon-size, 14px);
         }
       }
+
+      :host([solid]) button {
+        border: 0;
+        color: #fff;
+        background: var(--color-dark-2);
+
+        &:hover {
+          background: var(--color-dark-1);
+        }
+        &:active {
+          background: var(--color-dark-3);
+        }
+
+        &:disabled {
+          background: var(--color-dark-2);
+        }
+      }
+
       :host(:focus-within) {
-        box-shadow: 0 0 0 2px var(--color-plain-a);
+        box-shadow: 0 0 0 2px var(--color-dark-a);
       }
       :host(:empty) {
         button .icon {
@@ -97,16 +140,13 @@ class Button extends Component {
           h: 24px,
           f: 12px
         ),
-        l: (
+        // l 为默认
-          w: 108px,
+        xl:
-          h: 32px,
+          (
-          f: 14px
+            w: 132px,
-        ),
+            h: 36px,
-        xl: (
+            f: 14px
-          w: 132px,
+          ),
-          h: 36px,
-          f: 14px
-        ),
         xxl: (
           w: 160px,
           h: 44px,
@@ -139,6 +179,8 @@ class Button extends Component {
       }
       :host([circle]) {
         min-width: 0;
+        width: 32px;
+        height: 32px;
         border-radius: 50%;
         button {
           padding: 0;
@@ -160,51 +202,35 @@ class Button extends Component {
         success: 'green',
         warning: 'orange',
         danger: 'red',
-        secondary: 'dark',
+        // secondary: 'dark', default
-        help: 'grey',
+        help: 'grey'
-        plain: 'plain'
       );
 
       @loop $t, $c in $colors {
         :host([type='#{$t}']) {
           button {
-            color: var(--wc-button-color, var(--color-#{$c}-2));
+            color: var(--color-#{$c}-2);
-            border-color: var(--wc-button-border-color, var(--color-#{$c}-1));
+            border-color: var(--color-#{$c}-1);
 
             &:hover {
-              color: var(--wc-button-color-hover, var(--color-#{$c}-1));
+              color: var(--color-#{$c}-1);
-              border-color: var(
+              border-color: var(--color-#{$c}-2);
-                --wc-button-border-color-hover,
+              background: var(--wc-button-background, #fff);
-                var(--color-#{$c}-2)
-              );
-              background: var(
-                --wc-button-background-hover,
-                var(--wc-button-background, #fff)
-              );
             }
             &:active {
-              color: var(--wc-button-color-active, var(--color-#{$c}-3));
+              color: var(--color-#{$c}-3);
-              background: var(
+              background: var(--wc-button-background, #fff);
-                --wc-button-background-active,
-                var(--wc-button-background, #fff)
-              );
             }
             &:disabled {
-              color: var(--wc-button-color-disabled, var(--color-#{$c}-2));
+              color: var(--color-#{$c}-2);
-              background: var(
+              background: var(--wc-button-background, #fff);
-                --wc-button-background-disabled,
-                var(--wc-button-background, #fff)
-              );
             }
           }
 
           &:host([solid]) button {
             border: 0;
-            @if $t == 'plain' {
+            color: #fff;
-              color: var(--color-dark-1);
+
-            } @else {
-              color: #fff;
-            }
             background: var(--color-#{$c}-2);
 
             &:hover {

开发规范.md

@@ -4,8 +4,8 @@
   > 主题功能, 暂时由根样式定义来实现, 所以, 组件内的样式, 尽可能避免过多的私有配色。
 
 2. 组件几种配色样式, 暂时同大多数组件一致
-  - `type=primary`  青色 (默认值)
+  - `type=primary`  青色
-  - `type=secondary`  暗色
+  - `type=secondary`  暗色 (默认值, 不用配置)
   - `type=info`  蓝色
   - `type=success`  绿色
   - `type=warning`  橙色
@@ -17,7 +17,7 @@
 
   - `size=s`  小号, 20px
   - `size=m`  中号, 24px
-  - `size=l`  大号,  32px (默认值)
+  - `size=l`  大号,  32px (默认值, 不用配置)
   - `size=xl`  加大号, 36px
   - `size=xxl`  加加大号, 44px