From 646da06db1fe937f3b138673d47d4316780e2113 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Wed, 27 Jan 2021 20:52:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0UI=E9=A3=8E=E6=A0=BC=E4=B8=BA?=
 =?UTF-8?q?=E5=9C=86=E8=A7=92=E5=AE=9E=E5=BF=83=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build.dev.js              |   4 +-
 src/avatar/index.wc       |  10 +-
 src/badge/index.wc        |   8 +-
 src/css/reset-basic.css   |  17 +-
 src/form/button.wc        | 316 +++++++++++++-------------------------
 src/form/checkbox-item.wc |  12 +-
 src/form/input.wc         |   2 +-
 src/form/number.wc        |   2 +-
 src/form/progress.wc      |   8 +-
 src/form/radio-item.wc    |  10 +-
 src/form/select.wc        |   2 +-
 src/form/star.wc          |  12 +-
 src/form/switch.wc        |  12 +-
 src/icon/index.wc         |  35 ++---
 src/pager/index.wc        |  51 +++---
 src/slider/index.wc       |  10 +-
 16 files changed, 206 insertions(+), 305 deletions(-)

diff --git a/build.dev.js b/build.dev.js
index 7a75a03..d1e2866 100644
--- a/build.dev.js
+++ b/build.dev.js
@@ -16,11 +16,11 @@ const BUILD_DATE = new Date().format()
 
 const BASE_SCSS = `
 @mixin focus1(){
-  box-shadow: 0 0 2px #88f7df;
+  box-shadow: 0 0 3px var(--color-blue-1);
 }
 
 @mixin focus2(){
-  box-shadow: 0 0 2px #f3be4d;
+  box-shadow: 0 0 3px var(--color-orange-1);
 }
 
 * {
diff --git a/src/avatar/index.wc b/src/avatar/index.wc
index 8553d0c..0256549 100644
--- a/src/avatar/index.wc
+++ b/src/avatar/index.wc
@@ -39,25 +39,25 @@
   }
 }
 
-:host([color='red']) {
+:host([type='danger']) {
   background: #ff5061;
 }
-:host([color='teal']) {
+:host([type='primary']) {
   background: #3fc2a7;
 }
 :host([color='purple']) {
   background: #ac61ce;
 }
-:host([color='green']) {
+:host([type='success']) {
   background: #58d68d;
 }
 :host([color='orange']) {
   background: #ffb618;
 }
-:host([color='dark']) {
+:host([type='inverse']) {
   background: #62778d;
 }
-:host([color='blue']) {
+:host([type='info']) {
   background: #66b1ff;
 }
 
diff --git a/src/badge/index.wc b/src/badge/index.wc
index f48793c..57db8aa 100644
--- a/src/badge/index.wc
+++ b/src/badge/index.wc
@@ -33,13 +33,13 @@
     padding: 2px 4px;
   }
 }
-:host([color='dark']) .dot {
+:host([type='inverse']) .dot {
   background: var(--color-dark-1);
 }
-:host([color='green']) .dot {
+:host([type='success']) .dot {
   background: var(--color-green-1);
 }
-:host([color='blue']) .dot {
+:host([type='info']) .dot {
   background: var(--color-blue-1);
 }
 :host([color='orange']) .dot {
@@ -48,7 +48,7 @@
 :host([color='purple']) .dot {
   background: var(--color-purple-1);
 }
-:host([color='teal']) .dot {
+:host([type='primary']) .dot {
   background: var(--color-teal-1);
 }
 </style>
diff --git a/src/css/reset-basic.css b/src/css/reset-basic.css
index 01d793b..13f8844 100644
--- a/src/css/reset-basic.css
+++ b/src/css/reset-basic.css
@@ -44,30 +44,35 @@ code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
 
 
 :root {
+  /* primary */
   --color-teal-1: #4db6ac;
   --color-teal-2: #26a69a;
   --color-teal-3: #009688;
+  /* sucess */
   --color-green-1: #81c784;
   --color-green-2: #66bb6a;
   --color-green-3: #4caf50;
-  --color-purple-1: #9575cd;
-  --color-purple-2: #9575cd;
-  --color-purple-3: #673ab7;
+  /* info */
   --color-blue-1: #64b5f6;
   --color-blue-2: #42a5f5;
   --color-blue-3: #2196f3;
+  /* danger */
   --color-red-1: #ff5061;
   --color-red-2: #eb3b48;
   --color-red-3: #ce3742;
+  /* warning */
   --color-orange-1: #ffb618;
   --color-orange-2: #f39c12;
   --color-orange-3: #e67e22;
+  /* default1 */
   --color-plain-1: #f2f5fc;
   --color-plain-2: #e8ebf4;
   --color-plain-3: #dae1e9;
-  --color-grey-1: #bdbdbd;
-  --color-grey-2: #9e9e9e;
-  --color-grey-3: #757575;
+  /* default2 */
+  --color-grey-1: #cacfd2;
+  --color-grey-2: #bdc3c7;
+  --color-grey-3: #a1a6a9;
+  /* inverse */
   --color-dark-1: #62778d;
   --color-dark-2: #526273;
   --color-dark-3: #425064;
diff --git a/src/form/button.wc b/src/form/button.wc
index a8d89ca..a054318 100644
--- a/src/form/button.wc
+++ b/src/form/button.wc
@@ -8,14 +8,15 @@
 <style lang="scss">
 :host {
   overflow: hidden;
-  display: inline-block;
+  display: inline-flex;
   min-width: 64px;
   height: 32px;
-  border-radius: 2px;
+  border-radius: 6px;
   user-select: none;
   -moz-user-select: none;
-  color: var(--color-dark-2);
+  color: var(--color-dark-1);
   font-size: 14px;
+  vertical-align: middle;
   cursor: pointer;
 
   button {
@@ -24,26 +25,19 @@
     align-items: center;
     width: 100%;
     height: inherit;
-    padding: 0 10px;
+    padding: var(--padding, 0 14px);
     margin: auto;
-    line-height: 0;
-    border: 1px solid var(--color-plain-3);
+    line-height: 1;
+    border: 0;
     border-radius: inherit;
     white-space: nowrap;
-    background: #fff;
+    background: var(--color-plain-2);
     font-size: inherit;
     font-family: inherit;
     outline: none;
     color: inherit;
     cursor: inherit;
-
-    &:hover {
-      background: var(--color-plain-1);
-    }
-
-    &:active {
-      border-color: var(--color-grey-1);
-    }
+    transition: background 0.2s linear;
 
     &::-moz-focus-inner {
       border: none;
@@ -51,30 +45,30 @@
   }
 
   .icon {
-    --size: 18px;
+    --size: var(--icon-size, 18px);
     margin-right: 3px;
   }
 }
 
 :host([size='large']) {
-  min-width: 120px;
-  height: 42px;
-  font-size: 16px;
+  min-width: 212px;
+  height: 52px;
+  font-size: 18px;
 
   .icon {
-    --size: 20px;
+    --size: 26px;
   }
 }
 :host([size='large'][circle]) {
-  min-width: 62px;
-  height: 62px;
+  min-width: 52px;
+  height: 52px;
 
   button {
-    padding: 0 20px;
+    padding: 0;
   }
 }
 :host([size='medium']) {
-  min-width: 90px;
+  min-width: 128px;
   height: 36px;
 
   button {
@@ -84,10 +78,9 @@
 :host([size='medium'][circle]) {
   min-width: 36px;
 }
-:host([size='mini']),
-:host([text]) {
-  min-width: 24px;
-  height: 24px;
+:host([size='mini']) {
+  min-width: 26px;
+  height: 26px;
   font-size: 12px;
 
   button {
@@ -99,25 +92,11 @@
   }
 }
 :host([size='mini'][circle]) {
-  min-width: 24px;
-}
-
-:host([text]) {
-  height: 18px;
-
-  button {
-    padding: 0;
-    border: 0;
-
-    &:hover {
-      background: none;
-      text-decoration: underline;
-    }
-  }
+  min-width: 26px;
 }
 
 :host([round]) {
-  border-radius: 21px;
+  border-radius: 26px;
 }
 :host([circle]) {
   min-width: 32px;
@@ -128,35 +107,48 @@
   .icon {
     margin-right: 0;
   }
-}
 
-:host([loading]),
-:host([disabled]) {
-  cursor: not-allowed;
-  color: var(--color-grey-1);
-  opacity: 0.6;
-
-  .icon {
-    color: var(--color-grey-1);
-  }
-  button {
-    background: #fff;
-    border-color: var(--color-plain-3);
+  slot {
+    display: none;
   }
 }
 
-:host([color]) {
+:host([type]) {
   color: #fff;
+}
+:host([link]) {
+  min-width: auto;
+  height: auto;
+  font-size: 14px;
+  color: var(--color-plain-3);
+
   button {
-    border-color: transparent;
-  }
-  .icon {
-    color: #fff;
+    padding: 0;
+    background: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
-:host([color='red']) button {
+:host(:not([disabled]):not([loading]):not([link])) button {
+  &:hover {
+    background: var(--color-plain-1);
+  }
+  &:active {
+    background: var(--color-plain-3);
+  }
+}
+
+// -------------
+:host([type='danger']:not([link])) button {
   background: var(--color-red-2);
+}
+:host([type='danger'][link]) button {
+  color: var(--color-red-1);
+}
+:host([type='danger']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-red-1);
   }
@@ -165,24 +157,14 @@
   }
 }
 
-:host([color='red'][text]) button {
-  background: transparent;
-  color: var(--color-red-2);
-  &:hover {
-    color: var(--color-red-1);
-  }
-  &:active {
-    color: var(--color-red-3);
-  }
-}
-
-:host([color='red'][loading]) button,
-:host([color='red'][disabled]) button {
-  background: var(--color-red-1);
-}
-
-:host([color='blue']) button {
+// -------------
+:host([type='info']:not([link])) button {
   background: var(--color-blue-2);
+}
+:host([type='info'][link]) button {
+  color: var(--color-blue-2);
+}
+:host([type='info']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-blue-1);
   }
@@ -191,23 +173,14 @@
   }
 }
 
-:host([color='blue'][text]) button {
-  background: transparent;
-  color: var(--color-blue-2);
-  &:hover {
-    color: var(--color-blue-1);
-  }
-  &:active {
-    color: var(--color-blue-3);
-  }
-}
-:host([color='blue'][loading]) button,
-:host([color='blue'][disabled]) button {
-  background: var(--color-blue-1);
-}
-
-:host([color='green']) button {
+// --------
+:host([type='sucess']:not([link])) button {
   background: var(--color-green-2);
+}
+:host([type='success'][link]) button {
+  color: var(--color-green-2);
+}
+:host([type='sucess']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-green-1);
   }
@@ -215,23 +188,15 @@
     background: var(--color-green-3);
   }
 }
-:host([color='green'][text]) button {
-  background: transparent;
-  color: var(--color-green-2);
-  &:hover {
-    color: var(--color-green-1);
-  }
-  &:active {
-    color: var(--color-green-3);
-  }
-}
-:host([color='green'][loading]) button,
-:host([color='green'][disabled]) button {
-  background: var(--color-green-1);
-}
 
-:host([color='teal']) button {
+// ---------
+:host([type='primary']:not([link])) button {
   background: var(--color-teal-2);
+}
+:host([type='primary'][link]) button {
+  color: var(--color-teal-2);
+}
+:host([type='primary']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-teal-1);
   }
@@ -239,23 +204,15 @@
     background: var(--color-teal-3);
   }
 }
-:host([color='teal'][text]) button {
-  background: transparent;
-  color: var(--color-teal-2);
-  &:hover {
-    color: var(--color-teal-1);
-  }
-  &:active {
-    color: var(--color-teal-3);
-  }
-}
-:host([color='teal'][loading]) button,
-:host([color='teal'][disabled]) button {
-  background: var(--color-teal-1);
-}
 
-:host([color='orange']) button {
+// ----------
+:host([type='warning']:not([link])) button {
   background: var(--color-orange-2);
+}
+:host([type='warning'][link]) button {
+  color: var(--color-orange-2);
+}
+:host([type='warning']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-orange-1);
   }
@@ -263,23 +220,15 @@
     background: var(--color-orange-3);
   }
 }
-:host([color='orange'][text]) button {
-  background: transparent;
-  color: var(--color-orange-2);
-  &:hover {
-    color: var(--color-orange-1);
-  }
-  &:active {
-    color: var(--color-orange-3);
-  }
-}
-:host([color='orange'][loading]) button,
-:host([color='orange'][disabled]) button {
-  background: var(--color-orange-1);
-}
 
-:host([color='dark']) button {
+// -------
+:host([type='inverse']:not([link])) button {
   background: var(--color-dark-2);
+}
+:host([type='inverse'][link]) button {
+  color: var(--color-dark-2);
+}
+:host([type='inverse']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-dark-1);
   }
@@ -287,47 +236,15 @@
     background: var(--color-dark-3);
   }
 }
-:host([color='dark'][text]) button {
-  background: transparent;
-  color: var(--color-dark-2);
-  &:hover {
-    color: var(--color-dark-1);
-  }
-  &:active {
-    color: var(--color-dark-3);
-  }
-}
-:host([color='dark'][loading]) button,
-:host([color='dark'][disabled]) button {
-  background: var(--color-dark-1);
-}
 
-:host([color='purple']) button {
-  background: var(--color-purple-2);
-  &:hover {
-    background: var(--color-purple-1);
-  }
-  &:active {
-    background: var(--color-purple-3);
-  }
-}
-:host([color='purple'][text]) button {
-  background: transparent;
-  color: var(--color-purple-2);
-  &:hover {
-    color: var(--color-purple-1);
-  }
-  &:active {
-    color: var(--color-purple-3);
-  }
-}
-:host([color='purple'][loading]) button,
-:host([color='purple'][disabled]) button {
-  background: var(--color-purple-1);
-}
-
-:host([color='grey']) button {
+// -------
+:host([type='default']:not([link])) button {
   background: var(--color-grey-2);
+}
+:host([type='default'][link]) button {
+  color: var(--color-grey-2);
+}
+:host([type='default']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-grey-1);
   }
@@ -335,47 +252,26 @@
     background: var(--color-grey-3);
   }
 }
-:host([color='grey'][text]) button {
-  background: transparent;
-  color: var(--color-grey-2);
-  &:hover {
-    color: var(--color-grey-1);
-  }
-  &:active {
-    color: var(--color-grey-3);
-  }
-}
-:host([color='grey'][loading]) button,
-:host([color='grey'][disabled]) button {
-  background: var(--color-grey-1);
+
+:host([loading]),
+:host([disabled]) {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-:host([no-border]) {
+:host([link][loading]),
+:host([link][disabled]) {
   button {
-    border-color: transparent;
-    background: inherit;
-  }
-}
-
-:host([text][loading]),
-:host([text][disabled]) {
-  button {
-    &,
     &:hover,
     &:active {
       text-decoration: none;
-      background: transparent;
     }
   }
 }
 
-:host(:focus-within) {
+:host(:focus-within:not([link]):not([disabled]):not([loading])) {
   @include focus1;
 }
-:host(:focus-within[disabled]),
-:host(:focus-within[loading]) {
-  box-shadow: none;
-}
 </style>
 
 <script>
@@ -398,7 +294,7 @@ export default class Button {
 
     // 圆形按钮不允许文字
     if (this.hasAttribute('circle')) {
-      this.textContent = ''
+      // this.textContent = ''
     }
 
     this.__BTN__ = this.root.children[1]
diff --git a/src/form/checkbox-item.wc b/src/form/checkbox-item.wc
index 6b1c425..a22e3b9 100644
--- a/src/form/checkbox-item.wc
+++ b/src/form/checkbox-item.wc
@@ -18,7 +18,7 @@
     min-width: 32px;
     height: 32px;
     padding: 0 5px;
-    line-height: 0;
+    line-height: 1;
     -moz-user-select: none;
     user-select: none;
     white-space: nowrap;
@@ -69,7 +69,7 @@
   }
 }
 
-:host([color='red']) label.checked {
+:host([type='danger']) label.checked {
   color: var(--color-red-1);
   .dot {
     border-color: var(--color-red-1);
@@ -79,7 +79,7 @@
   }
 }
 
-:host([color='blue']) label.checked {
+:host([type='info']) label.checked {
   color: var(--color-blue-1);
   .dot {
     border-color: var(--color-blue-1);
@@ -89,7 +89,7 @@
   }
 }
 
-:host([color='green']) label.checked {
+:host([type='success']) label.checked {
   color: var(--color-green-1);
   .dot {
     border-color: var(--color-green-1);
@@ -99,7 +99,7 @@
   }
 }
 
-:host([color='teal']) label.checked {
+:host([type='primary']) label.checked {
   color: var(--color-teal-1);
   .dot {
     border-color: var(--color-teal-1);
@@ -119,7 +119,7 @@
   }
 }
 
-:host([color='dark']) label.checked {
+:host([type='inverse']) label.checked {
   color: var(--color-dark-1);
   .dot {
     border-color: var(--color-dark-1);
diff --git a/src/form/input.wc b/src/form/input.wc
index c591112..31311a5 100644
--- a/src/form/input.wc
+++ b/src/form/input.wc
@@ -74,7 +74,7 @@ li {
     width: auto;
     height: 30px;
     padding: 0 10px;
-    line-height: 0;
+    line-height: 1;
     background: var(--bg-color, --color-plain-1);
     white-space: nowrap;
   }
diff --git a/src/form/number.wc b/src/form/number.wc
index 8c84e51..06d99cd 100644
--- a/src/form/number.wc
+++ b/src/form/number.wc
@@ -25,7 +25,7 @@
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  line-height: 0;
+  line-height: 1;
   font-size: 14px;
   border: 1px solid var(--color-plain-3);
   border-radius: inherit;
diff --git a/src/form/progress.wc b/src/form/progress.wc
index d3be7ff..64b473f 100644
--- a/src/form/progress.wc
+++ b/src/form/progress.wc
@@ -35,15 +35,15 @@
   height: 6px;
 }
 
-:host([color='red']) label span {
+:host([type='danger']) label span {
   background: var(--color-red-1);
 }
 
-:host([color='blue']) label span {
+:host([type='info']) label span {
   background: var(--color-blue-1);
 }
 
-:host([color='green']) label span {
+:host([type='success']) label span {
   background: var(--color-green-1);
 }
 
@@ -51,7 +51,7 @@
   background: var(--color-orange-1);
 }
 
-:host([color='dark']) label span {
+:host([type='inverse']) label span {
   background: var(--color-dark-1);
 }
 
diff --git a/src/form/radio-item.wc b/src/form/radio-item.wc
index b225cc8..c070426 100644
--- a/src/form/radio-item.wc
+++ b/src/form/radio-item.wc
@@ -107,7 +107,7 @@
   }
 }
 
-:host([color='red']) label.checked {
+:host([type='danger']) label.checked {
   color: var(--color-red-1);
   .dot {
     border-color: var(--color-red-1);
@@ -117,7 +117,7 @@
   }
 }
 
-:host([color='blue']) label.checked {
+:host([type='info']) label.checked {
   color: var(--color-blue-1);
   .dot {
     border-color: var(--color-blue-1);
@@ -127,7 +127,7 @@
   }
 }
 
-:host([color='green']) label.checked {
+:host([type='success']) label.checked {
   color: var(--color-green-1);
   .dot {
     border-color: var(--color-green-1);
@@ -137,7 +137,7 @@
   }
 }
 
-:host([color='teal']) label.checked {
+:host([type='primary']) label.checked {
   color: var(--color-teal-1);
   .dot {
     border-color: var(--color-teal-1);
@@ -157,7 +157,7 @@
   }
 }
 
-:host([color='dark']) label.checked {
+:host([type='inverse']) label.checked {
   color: var(--color-dark-1);
   .dot {
     border-color: var(--color-dark-1);
diff --git a/src/form/select.wc b/src/form/select.wc
index 48e6f0c..9754253 100644
--- a/src/form/select.wc
+++ b/src/form/select.wc
@@ -28,7 +28,7 @@
   min-width: 64px;
   width: 100%;
   height: 32px;
-  line-height: 0;
+  line-height: 1;
   font-size: 14px;
   border: 1px solid var(--color-plain-3);
   border-radius: inherit;
diff --git a/src/form/star.wc b/src/form/star.wc
index 6d88a5b..0d186d4 100644
--- a/src/form/star.wc
+++ b/src/form/star.wc
@@ -24,7 +24,7 @@
 label {
   display: flex;
   align-items: center;
-  line-height: 0;
+  line-height: 1;
   cursor: inherit;
 
   wc-icon {
@@ -54,19 +54,19 @@ label {
   --size: 20px;
 }
 
-:host([color='red']) label span {
+:host([type='danger']) label span {
   color: var(--color-red-1);
 }
-:host([color='teal']) label span {
+:host([type='primary']) label span {
   color: var(--color-teal-1);
 }
-:host([color='green']) label span {
+:host([type='success']) label span {
   color: var(--color-green-1);
 }
-:host([color='grey']) label span {
+:host([type='default']) label span {
   color: var(--color-grey-1);
 }
-:host([color='blue']) label span {
+:host([type='info']) label span {
   color: var(--color-blue-1);
 }
 :host([color='purple']) label span {
diff --git a/src/form/switch.wc b/src/form/switch.wc
index 731878b..a1273ac 100644
--- a/src/form/switch.wc
+++ b/src/form/switch.wc
@@ -16,7 +16,7 @@
     justify-content: center;
     align-items: center;
     // vertical-align: middle;
-    line-height: 0;
+    line-height: 1;
     white-space: nowrap;
   }
   label {
@@ -82,19 +82,19 @@
   }
 }
 
-:host([color='red']) label.checked {
+:host([type='danger']) label.checked {
   background: var(--color-red-1);
 }
 
-:host([color='blue']) label.checked {
+:host([type='info']) label.checked {
   background: var(--color-blue-1);
 }
 
-:host([color='green']) label.checked {
+:host([type='success']) label.checked {
   background: var(--color-green-1);
 }
 
-:host([color='teal']) label.checked {
+:host([type='primary']) label.checked {
   background: var(--color-teal-1);
 }
 
@@ -102,7 +102,7 @@
   background: var(--color-orange-1);
 }
 
-:host([color='dark']) label.checked {
+:host([type='inverse']) label.checked {
   background: var(--color-dark-1);
 }
 
diff --git a/src/icon/index.wc b/src/icon/index.wc
index 465ef6f..0b97f69 100644
--- a/src/icon/index.wc
+++ b/src/icon/index.wc
@@ -4,7 +4,9 @@
 
 <style lang="scss">
 :host {
-  display: inline-block;
+  display: inline-flex;
+  width: var(--size, 32px);
+  height: var(--size, 32px);
   color: inherit;
 }
 :host(:not([is])) {
@@ -12,9 +14,6 @@
 }
 .icon {
   display: block;
-  width: var(--size, 32px);
-  height: var(--size, 32px);
-  margin: var(--pad, auto);
   fill: currentColor;
 
   &.load {
@@ -28,30 +27,30 @@
 }
 
 :host([size='large']) .icon {
-  width: 42px;
-  height: 42px;
+  width: 52px;
+  height: 52px;
 }
 :host([size='medium']) .icon {
-  width: 38px;
-  height: 38px;
+  width: 36px;
+  height: 36px;
 }
 :host([size='mini']) .icon {
-  width: 20px;
-  height: 20px;
+  width: 26px;
+  height: 26px;
 }
-:host([color='red']) {
+:host([type='danger']) {
   color: var(--color-red-1);
 }
 
-:host([color='blue']) {
+:host([type='info']) {
   color: var(--color-blue-1);
 }
 
-:host([color='green']) {
+:host([type='success']) {
   color: var(--color-green-1);
 }
 
-:host([color='teal']) {
+:host([type='primary']) {
   color: var(--color-teal-1);
 }
 
@@ -59,15 +58,11 @@
   color: var(--color-orange-1);
 }
 
-:host([color='dark']) {
+:host([type='inverse']) {
   color: var(--color-dark-1);
 }
 
-:host([color='purple']) {
-  color: var(--color-purple-1);
-}
-
-:host([color='grey']) {
+:host([type='default']) {
   color: var(--color-grey-1);
 }
 
diff --git a/src/pager/index.wc b/src/pager/index.wc
index 82bc519..62ff71f 100644
--- a/src/pager/index.wc
+++ b/src/pager/index.wc
@@ -1,10 +1,15 @@
 <template>
   <div class="layout">
-    <button data-page="1" class="home">|<</button>
-    <button data-page="prev" class="prev"><</button>
+    <wc-button
+      color="plain"
+      data-page="1"
+      class="home"
+      icon="dbl-left"
+    ></wc-button>
+    <wc-button data-page="prev" class="prev" icon="left"></wc-button>
     <div class="pager"></div>
-    <button data-page="next" class="next">></button>
-    <button data-page="end" class="end">>|</button>
+    <wc-button data-page="next" class="next" icon="right"></wc-button>
+    <wc-button data-page="end" class="end" icon="dbl-right"></wc-button>
   </div>
 </template>
 
@@ -17,24 +22,22 @@
   user-select: none;
   -moz-user-select: none;
 
-  .layout {
+  .layout,
+  .pager {
     display: flex;
     justify-content: center;
     align-items: center;
+  }
+  .layout {
     margin: 10px auto;
   }
 
-  button {
+  wc-button {
     min-width: 32px;
-    height: 32px;
-    padding: 0 8px;
+    // height: 32px;
+    --padding: 0;
     margin: 0 3px;
-    background: var(--color-plain-1);
-    border: 0;
-    border-radius: 2px;
-    outline: none;
-    font-size: inherit;
-    color: inherit;
+    --icon-size: 14px;
 
     &:hover {
       background: var(--color-plain-2);
@@ -58,19 +61,19 @@
   border-radius: 50%;
 }
 
-:host([color='red']) button[curr] {
+:host([type='danger']) button[curr] {
   background: var(--color-red-1);
 }
 
-:host([color='blue']) button[curr] {
+:host([type='info']) button[curr] {
   background: var(--color-blue-1);
 }
 
-:host([color='green']) button[curr] {
+:host([type='success']) button[curr] {
   background: var(--color-green-1);
 }
 
-:host([color='teal']) button[curr] {
+:host([type='primary']) button[curr] {
   background: var(--color-teal-1);
 }
 
@@ -78,7 +81,7 @@
   background: var(--color-orange-1);
 }
 
-:host([color='dark']) button[curr] {
+:host([type='inverse']) button[curr] {
   background: var(--color-dark-1);
 }
 
@@ -89,6 +92,7 @@
 
 <script>
 import $ from '../utils'
+import '../form/button'
 
 // 计算页码
 function calculate(curr, total, simple) {
@@ -129,6 +133,7 @@ function calculate(curr, total, simple) {
 
   return arr
 }
+//
 export default class Pager {
   props = {
     layout: 'home, prev, next, end',
@@ -156,9 +161,9 @@ export default class Pager {
     this.__PAGE__.innerHTML = list
       .map(
         it =>
-          `<button ${curr === it.to ? 'curr' : ''} data-page="${it.to}">${
-            it.txt
-          }</button>`
+          `<wc-button ${curr === it.to ? 'color="teal"' : ''} data-page="${
+            it.to
+          }">${it.txt}</wc-button>`
       )
       .join('')
   }
@@ -170,7 +175,7 @@ export default class Pager {
     this.update()
 
     $.bind(this.__LAYOUT__, 'click', ev => {
-      if (ev.target.tagName === 'BUTTON') {
+      if (ev.target.tagName === 'WC-BUTTON') {
         var { curr, totalpage } = this.props
         var page = ev.target.dataset.page
         var num = +page
diff --git a/src/slider/index.wc b/src/slider/index.wc
index c5c8b8a..b526bda 100644
--- a/src/slider/index.wc
+++ b/src/slider/index.wc
@@ -60,7 +60,7 @@
   }
 }
 
-:host([color='red']) {
+:host([type='danger']) {
   .slider-box .slider {
     background: var(--color-red-1);
   }
@@ -70,12 +70,12 @@
     background: var(--color-orange-1);
   }
 }
-:host([color='green']) {
+:host([type='success']) {
   .slider-box .slider {
     background: var(--color-green-1);
   }
 }
-:host([color='blue']) {
+:host([type='info']) {
   .slider-box .slider {
     background: var(--color-blue-1);
   }
@@ -85,12 +85,12 @@
     background: var(--color-purple-1);
   }
 }
-:host([color='grey']) {
+:host([type='default']) {
   .slider-box .slider {
     background: var(--color-grey-1);
   }
 }
-:host([color='dark']) {
+:host([type='inverse']) {
   .slider-box .slider {
     background: var(--color-dark-1);
   }