调整passwd组件

src/form/button.js

@@ -118,7 +118,7 @@ class Button extends Component {
       }
 
       :host(:focus-within) {
-        box-shadow: 0 0 0 2px var(--color-dark-a);
+        box-shadow: 0 0 0 2px var(--color-plain-a);
       }
       :host(:empty) {
         button .icon {

src/form/passwd.js

@@ -8,18 +8,12 @@ import '../icon/index.js'
 
 class Passwd extends Component {
   static props = {
-    type: 'primary',
+    value: 'str!',
-    icon: '',
-    size: 'l',
-    value: {
-      type: String,
-      default: '',
-      attribute: false
-    },
     autofocus: false,
     readonly: false,
     disabled: false,
-    lazy: 0 // 并发拦截时间, 单位毫秒
+    placeholder: 'str!',
+    lazy: 'num!0' // 并发拦截时间, 单位毫秒
   }
 
   static styles = [
@@ -43,9 +37,9 @@ class Passwd extends Component {
         align-items: center;
         height: 32px;
         font-size: 14px;
-        border: 1px solid var(--color-grey-2);
+        border: 1px solid var(--wc-passwd-border-color, var(--color-dark-2));
         border-radius: inherit;
-        background: var(--input-bg-color, #fff);
+        background: var(--wc-passwd-background, #fff);
         color: inherit;
         cursor: inherit;
 
@@ -65,17 +59,23 @@ class Passwd extends Component {
           cursor: inherit;
 
           &::placeholder {
-            color: var(--color-grey-1);
+            color: var(--color-grey-2);
           }
         }
       }
+      :host([round]) .label input {
+        padding: 0 6px 0 20px;
+      }
+      :host(:focus-within) {
+        box-shadow: 0 0 0 2px var(--color-plain-a);
+      }
     `,
     css`
       .label {
         .icon {
           --wc-icon-size: 16px;
           margin: 0 8px 0 4px;
-          color: var(--color-grey-2);
+          color: var(--color-grey-3);
           cursor: pointer;
         }
       }
@@ -89,16 +89,13 @@ class Passwd extends Component {
           h: 24px,
           f: 12px
         ),
-        l: (
+        // l default
-          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,
@@ -118,45 +115,9 @@ class Passwd extends Component {
               --wc-icon-size: 18px;
             }
           }
-
-          @if $s == 'xxxl' {
-            .label input {
-              padding: 0 6px 0 10px;
-            }
-            .icon {
-              --wc-icon-size: 22px;
-              margin: 0 12px 0 4px;
-            }
-          }
-        }
-        :host([round][size='#{$s}']) .label input {
-          padding: 0 6px 0 20px;
         }
       }
     `,
-    // 配色
-    css`
-      $colors: (
-        primary: 'teal',
-        info: 'blue',
-        success: 'green',
-        warning: 'orange',
-        danger: 'red',
-        secondary: 'dark',
-        help: 'grey'
-      );
-
-      @loop $t, $c in $colors {
-        :host([type='#{$t}']:focus-within) {
-          box-shadow: 0 0 0 2px var(--color-#{$c}-a);
-        }
-
-        :host([type='#{$t}']) .label {
-          border-color: var(--color-#{$c}-2);
-        }
-      }
-    `,
-
     css`
       :host([disabled]),
       :host([readonly]) {
@@ -174,13 +135,6 @@ class Passwd extends Component {
           opacity: 0.6;
         }
       }
-
-      :host([no-border]),
-      :host(:focus-within[no-border]) {
-        .label {
-          border: 0;
-        }
-      }
     `
   ]
 
@@ -215,6 +169,7 @@ class Passwd extends Component {
         <input
           spellcheck="false"
           ref="input"
+          placeholder=${this.placeholder}
           @input=${this.handleInput}
           @change=${this.handleChange}
           :readOnly=${this.readOnly}