diff --git a/src/form/button.js b/src/form/button.js index 70e34bb..7384729 100644 --- a/src/form/button.js +++ b/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', - // secondary: 'dark', default - help: 'grey' + danger: 'red' ); @loop $t, $c in $colors { diff --git a/src/form/input.js b/src/form/input.js index 5dbfe36..c0a4a2c 100644 --- a/src/form/input.js +++ b/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; diff --git a/src/form/passwd.js b/src/form/passwd.js index 3cb4919..d6e7052 100644 --- a/src/form/passwd.js +++ b/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; diff --git a/src/form/star.js b/src/form/star.js index 72e5eac..a950f54 100644 --- a/src/form/star.js +++ b/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 ) ); diff --git a/src/form/switch.js b/src/form/switch.js index 939f9d6..2916853 100644 --- a/src/form/switch.js +++ b/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,16 +95,17 @@ class Switch extends Component { h: 24px, f: 12px ), - l: ( - w: 108px, - h: 32px, - f: 14px - ), - xl: ( - w: 132px, - h: 36px, - f: 14px - ), + // l: ( + // w: 108px, + // h: 32px, + // f: 14px + // ), + xl: + ( + w: 132px, + h: 36px, + f: 14px + ), xxl: ( w: 160px, h: 44px, @@ -147,9 +147,7 @@ class Switch extends Component { info: 'blue', success: 'green', warning: 'orange', - danger: 'red', - secondary: 'dark', - help: 'grey' + danger: 'red' ); @loop $t, $c in $colors { diff --git a/开发规范.md b/开发规范.md index b570ad3..456e1b0 100644 --- a/开发规范.md +++ b/开发规范.md @@ -5,12 +5,10 @@ 2. 组件几种配色样式, 暂时同大多数组件一致 - `type=primary` 青色 - - `type=secondary` 暗色 (默认值, 不用配置) - `type=info` 蓝色 - `type=success` 绿色 - `type=warning` 橙色 - `type=danger` 红色 - - `type=help` 灰色 3. 尺寸, 主要指 高度 > 需要注意的是, 这里的高度, 仅为组件本身应该占的高度, 而非"可视内容"的真实高度, 比如 开关按钮, 实际上就可以不需要那么大。