feat(ThemeProvider): move to designTokens for most components

close #201

Author: ZxBing0066

src/components/Badge/__tests__/__snapshots__/demo.test.js.snap

@@ -93,22 +93,27 @@ exports[`Badge demo -- badge 1`] = `
 }
 
 .c30 {
-  color: #6b798e;
+  color: #526075;
   font-size: 12px;
   position: relative;
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
   height: 28px;
   line-height: 28px;
+  color: #0a1633;
 }
 
 .c30 .c31 {
-  color: #3555f6;
+  color: #c3cad9;
+}
+
+.c30 .c31 {
+  color: #3860f4;
 }
 
 .c33 {
-  color: #6b798e;
+  color: #526075;
   font-size: 12px;
   position: relative;
   cursor: pointer;
@@ -118,19 +123,31 @@ exports[`Badge demo -- badge 1`] = `
   line-height: 28px;
 }
 
+.c33 .c31 {
+  color: #c3cad9;
+}
+
+.c33:hover {
+  color: #0a1633;
+}
+
+.c33:hover .c31 {
+  color: #3357df;
+}
+
 .c28 {
   position: relative;
   margin-bottom: -8px;
 }
 
 .c28 .c29,
-.c28 .style__RadioTagWrap-sc-25j3mq-3 {
+.c28 .sc-bxivhb {
   margin-right: 8px;
   margin-bottom: 8px;
 }
 
 .c28 .c29:last-child,
-.c28 .style__RadioTagWrap-sc-25j3mq-3:last-child {
+.c28 .sc-bxivhb:last-child {
   margin-right: 0;
 }
 
@@ -171,12 +188,12 @@ exports[`Badge demo -- badge 1`] = `
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
-  color: #526075;
-  border: 1px solid #d2d6ea;
-  background: #fafafc;
   border-radius: 2px;
   height: 28px;
+  color: #526075;
+  border: 1px solid #d2d6ea;
   box-shadow: inset 0 1px 3px 0 #d2d6ea;
+  background: #fafafc;
   -webkit-transition: .18s cubic-bezier(.4,0,.2,1);
   transition: .18s cubic-bezier(.4,0,.2,1);
 }
@@ -203,7 +220,7 @@ exports[`Badge demo -- badge 1`] = `
 .c7:hover {
   color: #0a1633;
   border-color: #c3cad9;
-  background-color: #f6f6fb;
+  background: #fafafc;
 }
 
 .c7 input {
@@ -247,16 +264,16 @@ exports[`Badge demo -- badge 1`] = `
   border-style: solid;
   cursor: pointer;
   color: #0a1633;
-  background: #ffffff;
-  box-shadow: 0 1px 1px -1px #c3cad9,0 1px 3px -1px #7a8baa,inset 0 1px 0 0 #efeff8;
   border-color: #d2d6ea;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.08),0 1px 1px -1px rgba(0,0,0,0.30),0 1px 3px -1px rgba(0,0,0,0.12),inset 0 1px 0 0 rgba(0,0,0,0.05);
+  background: #ffffff;
   display: inline-block;
   vertical-align: middle;
 }
 
 .c11:hover {
   color: #3860f4;
-  box-shadow: 0 0 1px 0 #c3cad9,0 8px 12px -4px #d2d6ea,0 4px 4px -2px #c3cad9;
+  box-shadow: 0 0 1px 0 rgba(0,0,0,0.12),0 8px 12px -4px rgba(0,0,0,0.12),0 2px 1px -1px rgba(0,0,0,0.05);
 }
 
 .c9 {
@@ -332,12 +349,13 @@ exports[`Badge demo -- badge 1`] = `
 }
 
 .c9 .c10 {
+  border-width: 0 0 0 1px;
   top: -1px;
   padding-top: 1px;
 }
 
 .c9 .c13 {
-  border-top-width: 1px;
+  border-width: 1px 0 0 1px;
   bottom: 0;
   border-top-color: #c3cad9;
 }
@@ -385,14 +403,13 @@ exports[`Badge demo -- badge 1`] = `
 .c18 {
   position: relative;
   border-radius: 2px;
-  overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   display: inline-block;
   vertical-align: middle;
-  background: #fff;
+  background: #ffffff;
   height: 28px;
   width: 80px;
   padding: 4px;
@@ -402,27 +419,31 @@ exports[`Badge demo -- badge 1`] = `
 }
 
 .c18:hover {
-  border-color: #3555f6;
+  border-color: #3357df;
+}
+
+.c18:hover .c24 {
+  box-shadow: 0 0 1px 0 rgba(0,0,0,0.12),0 8px 12px -4px rgba(0,0,0,0.12),0 2px 1px -1px rgba(0,0,0,0.05);
 }
 
 .c18 .c24 {
-  background-color: #fff;
-  box-shadow: 0 0.5px 0.5px #c3cad9;
-  border: 1px solid #c3cad9;
+  background: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.08),0 1px 1px -1px rgba(0,0,0,0.30),0 1px 3px -1px rgba(0,0,0,0.12),inset 0 1px 0 0 rgba(0,0,0,0.05);
   width: 20px;
   height: 20px;
 }
 
 .c18 .c26 {
-  background-color: #e69b9b;
+  background: #f44336;
   left: 13px;
   height: 10px;
 }
 
 .c18 .c19 {
-  border: 1px solid #c3cad9;
-  background-color: #ebedf0;
-  color: #6b798e;
+  color: #526075;
+  border: 1px solid #d2d6ea;
+  box-shadow: inset 0 1px 3px 0 #d2d6ea;
+  background: #f6f6fb;
 }
 
 .c18 .c21,

src/components/Breadcrumb/__tests__/__snapshots__/demo.test.js.snap

@@ -33,7 +33,7 @@ exports[`Breadcrumb demo -- backbutton 1`] = `
 .c2:hover {
   color: #3860f4;
   border-color: #3357df;
-  background: transparent;
+  background: #ffffff;
 }
 
 .c1 {
@@ -226,7 +226,7 @@ exports[`Breadcrumb demo -- breadcrumb 1`] = `
 .c18:hover {
   color: #3860f4;
   border-color: #3357df;
-  background: transparent;
+  background: #ffffff;
 }
 
 .c17 {
@@ -399,22 +399,27 @@ exports[`Breadcrumb demo -- breadcrumb 1`] = `
 }
 
 .c11 {
-  color: #6b798e;
+  color: #526075;
   font-size: 12px;
   position: relative;
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
   height: 28px;
   line-height: 28px;
+  color: #0a1633;
 }
 
 .c11 .c12 {
-  color: #3555f6;
+  color: #c3cad9;
+}
+
+.c11 .c12 {
+  color: #3860f4;
 }
 
 .c15 {
-  color: #6b798e;
+  color: #526075;
   font-size: 12px;
   position: relative;
   cursor: pointer;
@@ -424,19 +429,31 @@ exports[`Breadcrumb demo -- breadcrumb 1`] = `
   line-height: 28px;
 }
 
+.c15 .c12 {
+  color: #c3cad9;
+}
+
+.c15:hover {
+  color: #0a1633;
+}
+
+.c15:hover .c12 {
+  color: #3357df;
+}
+
 .c9 {
   position: relative;
   margin-bottom: -8px;
 }
 
 .c9 .c10,
-.c9 .style__RadioTagWrap-sc-25j3mq-3 {
+.c9 .sc-bxivhb {
   margin-right: 8px;
   margin-bottom: 8px;
 }
 
 .c9 .c10:last-child,
-.c9 .style__RadioTagWrap-sc-25j3mq-3:last-child {
+.c9 .sc-bxivhb:last-child {
   margin-right: 0;
 }
 
@@ -477,12 +494,12 @@ exports[`Breadcrumb demo -- breadcrumb 1`] = `
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
-  color: #526075;
-  border: 1px solid #d2d6ea;
-  background: #fafafc;
   border-radius: 2px;
   height: 28px;
+  color: #526075;
+  border: 1px solid #d2d6ea;
   box-shadow: inset 0 1px 3px 0 #d2d6ea;
+  background: #fafafc;
   -webkit-transition: .18s cubic-bezier(.4,0,.2,1);
   transition: .18s cubic-bezier(.4,0,.2,1);
 }
@@ -509,7 +526,7 @@ exports[`Breadcrumb demo -- breadcrumb 1`] = `
 .c7:hover {
   color: #0a1633;
   border-color: #c3cad9;
-  background-color: #f6f6fb;
+  background: #fafafc;
 }
 
 .c7 input {
@@ -711,7 +728,7 @@ exports[`Breadcrumb demo -- breadcrumb-separator 1`] = `
 .c2:hover {
   color: #3860f4;
   border-color: #3357df;
-  background: transparent;
+  background: #ffffff;
 }
 
 .c1 {
@@ -1172,7 +1189,7 @@ exports[`Breadcrumb demo -- breadcrumb-styleType 1`] = `
 .c2:hover {
   color: #3860f4;
   border-color: #3357df;
-  background: transparent;
+  background: #ffffff;
 }
 
 .c1 {
@@ -1528,7 +1545,7 @@ exports[`Breadcrumb demo -- item 1`] = `
 .c19:hover {
   color: #3860f4;
   border-color: #3357df;
-  background: transparent;
+  background: #ffffff;
 }
 
 .c18 {
@@ -1699,14 +1716,13 @@ exports[`Breadcrumb demo -- item 1`] = `
 .c7 {
   position: relative;
   border-radius: 2px;
-  overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   display: inline-block;
   vertical-align: middle;
-  background: #fff;
+  background: #ffffff;
   height: 28px;
   width: 80px;
   padding: 4px;
@@ -1716,27 +1732,31 @@ exports[`Breadcrumb demo -- item 1`] = `
 }
 
 .c7:hover {
-  border-color: #3555f6;
+  border-color: #3357df;
+}
+
+.c7:hover .c13 {
+  box-shadow: 0 0 1px 0 rgba(0,0,0,0.12),0 8px 12px -4px rgba(0,0,0,0.12),0 2px 1px -1px rgba(0,0,0,0.05);
 }
 
 .c7 .c13 {
-  background-color: #fff;
-  box-shadow: 0 0.5px 0.5px #c3cad9;
-  border: 1px solid #c3cad9;
+  background: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.08),0 1px 1px -1px rgba(0,0,0,0.30),0 1px 3px -1px rgba(0,0,0,0.12),inset 0 1px 0 0 rgba(0,0,0,0.05);
   width: 20px;
   height: 20px;
 }
 
 .c7 .c15 {
-  background-color: #e69b9b;
+  background: #f44336;
   left: 13px;
   height: 10px;
 }
 
 .c7 .c8 {
-  border: 1px solid #c3cad9;
-  background-color: #ebedf0;
-  color: #6b798e;
+  color: #526075;
+  border: 1px solid #d2d6ea;
+  box-shadow: inset 0 1px 3px 0 #d2d6ea;
+  background: #f6f6fb;
 }
 
 .c7 .c10,

src/components/Button/Button.jsx

@@ -30,6 +30,11 @@ export default class Button extends PureComponent {
         icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         /** 设置原生的button上type属性 */
         type: PropTypes.string,
+        /**
+         * @ignore
+         * 是否可选中，样式会有区别
+         */
+        checkAble: PropTypes.bool,
         /**
          * @ignore
          * 选中状态