更新配色

src/form/button.js

@@ -52,14 +52,14 @@ class Button extends Component {
           height: inherit;
           padding: var(--wc-button-padding, 0 4px);
           line-height: 1;
-          border: 1px solid var(--wc-button-border-color, var(--color-dark-1));
+          border: 1px solid var(--wc-button-border-color, var(--color-grey-2));
           border-radius: inherit;
           white-space: nowrap;
           background: var(--wc-button-background, #fff);
           font-size: inherit;
           font-family: inherit;
           outline: none;
-          color: var(--wc-button-color, var(--color-dark-2));
+          color: var(--wc-button-color, var(--color-dark-1));
           cursor: inherit;
           transition: background 0.15s linear, color 0.15s linear;
 
@@ -68,10 +68,10 @@ class Button extends Component {
           }
 
           &:hover {
-            color: var(--wc-button-color-hover, var(--color-dark-1));
+            color: var(--wc-button-color-hover, var(--color-grey-3));
             border-color: var(
               --wc-button-border-color-hover,
-              var(--color-dark-2)
+              var(--color-grey-3)
             );
             background: var(
               --wc-button-background-hover,
@@ -79,14 +79,14 @@ class Button extends Component {
             );
           }
           &:active {
-            color: var(--wc-button-color-active, var(--color-dark-3));
+            color: var(--wc-button-color-active, var(--color-dark-2));
             background: var(
               --wc-button-background-active,
               var(--wc-button-background, #fff)
             );
           }
           &:disabled {
-            color: var(--wc-button-color-disabled, var(--color-dark-2));
+            color: var(--wc-button-color-disabled, var(--color-dark-1));
             background: var(
               --wc-button-background-disabled,
               var(--wc-button-background, #fff)
@@ -103,17 +103,17 @@ class Button extends Component {
       :host([solid]) button {
         border: 0;
         color: #fff;
-        background: var(--color-dark-2);
+        background: var(--color-dark-1);
 
         &:hover {
-          background: var(--color-dark-1);
+          background: var(--color-grey-3);
         }
         &:active {
-          background: var(--color-dark-3);
+          background: var(--color-dark-2);
         }
 
         &:disabled {
-          background: var(--color-dark-2);
+          background: var(--color-dark-1);
         }
       }
 
@@ -201,9 +201,7 @@ class Button extends Component {
         info: 'blue',
         success: 'green',
         warning: 'orange',
-        danger: 'red',
+        danger: 'red'
-        // secondary: 'dark', default
-        help: 'grey'
       );
 
       @loop $t, $c in $colors {

src/form/input.js

@@ -55,7 +55,7 @@ class Input extends Component {
         align-items: center;
         height: 100%;
         font-size: 14px;
-        border: 1px solid var(--wc-input-border-color, var(--color-dark-1));
+        border: 1px solid var(--wc-input-border-color, var(--color-grey-2));
         border-radius: inherit;
         background: var(--bg-color, #fff);
         color: inherit;

src/form/passwd.js

@@ -37,7 +37,7 @@ class Passwd extends Component {
         align-items: center;
         height: 32px;
         font-size: 14px;
-        border: 1px solid var(--wc-passwd-border-color, var(--color-dark-1));
+        border: 1px solid var(--wc-passwd-border-color, var(--color-grey-2));
         border-radius: inherit;
         background: var(--wc-passwd-background, #fff);
         color: inherit;

src/form/star.js

@@ -22,7 +22,6 @@ class Star extends Component {
       :host {
         display: flex;
         font-size: 14px;
-        --wc-icon-size: 32px;
         cursor: pointer;
         user-select: none;
       }
@@ -33,6 +32,7 @@ class Star extends Component {
         cursor: inherit;
 
         wc-icon {
+          --wc-icon-size: var(--wc-star-size, 32px);
           margin: 0 3px;
           transition: transform 0.15s linear, color 0.15s linear;
 
@@ -73,11 +73,6 @@ class Star extends Component {
           w: 72px,
           h: 24px,
           f: 12px
-        ),
-        l: (
-          w: 108px,
-          h: 32px,
-          f: 14px
         )
       );
 

src/form/switch.js

@@ -8,7 +8,6 @@ import { nextTick, css, html, Component, classMap } from 'wkit'
 
 class Switch extends Component {
   static props = {
-    size: 'l',
     value: {
       type: Boolean,
       default: false
@@ -96,12 +95,13 @@ class Switch extends Component {
           h: 24px,
           f: 12px
         ),
-        l: (
+        // l: (
-          w: 108px,
+        //   w: 108px,
-          h: 32px,
+        //   h: 32px,
-          f: 14px
+        //   f: 14px
-        ),
+        // ),
-        xl: (
+        xl:
+          (
             w: 132px,
             h: 36px,
             f: 14px
@@ -147,9 +147,7 @@ class Switch extends Component {
         info: 'blue',
         success: 'green',
         warning: 'orange',
-        danger: 'red',
+        danger: 'red'
-        secondary: 'dark',
-        help: 'grey'
       );
 
       @loop $t, $c in $colors {

开发规范.md

@@ -5,12 +5,10 @@
 
 2. 组件几种配色样式, 暂时同大多数组件一致
   - `type=primary`  青色
-  - `type=secondary`  暗色 (默认值, 不用配置)
   - `type=info`  蓝色
   - `type=success`  绿色
   - `type=warning`  橙色
   - `type=danger`  红色
-  - `type=help`  灰色
 
 3. 尺寸, 主要指 高度
   > 需要注意的是, 这里的高度, 仅为组件本身应该占的高度, 而非"可视内容"的真实高度, 比如 开关按钮, 实际上就可以不需要那么大。