diff --git a/components/button/style/index.less b/components/button/style/index.less
index e9b930802..2627c4ecb 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -12,6 +12,7 @@
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
+  line-height: @line-height-base;
   .btn;
   .btn-default;
 
@@ -127,7 +128,7 @@
   // To ensure that a space will be placed between character and `Icon`.
   > .@{iconfont-css-prefix} + span,
   > span + .@{iconfont-css-prefix} {
-    margin-left: 0.5em;
+    margin-left: 8px;
   }
 
   &-clicked:after {
@@ -161,6 +162,15 @@
   &-background-ghost&-danger {
     .button-variant-ghost(@btn-danger-color);
   }
+
+  &-two-chinese-chars:first-letter {
+    letter-spacing: .34em;
+  }
+
+  &-two-chinese-chars > * {
+    letter-spacing: .34em;
+    margin-right: -.34em;
+  }
 }
 
 @keyframes buttonEffect {
@@ -173,3 +183,13 @@
     border-width: 6px;
   }
 }
+
+a.@{btn-prefix-cls} {
+  line-height: @btn-height-base - 2px;
+  &-lg {
+    line-height: @btn-height-lg - 2px;
+  }
+  &-sm {
+    line-height: @btn-height-sm - 2px;
+  }
+}
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index c8cfb0910..d4995fe32 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -40,7 +40,7 @@
 
   &:hover,
   &:focus {
-    .button-color(@primary-color; @background; @primary-color);
+    .button-color(@primary-5; @background; @primary-5);
   }
 
   &:active,
@@ -56,12 +56,12 @@
 
   &:hover,
   &:focus {
-    .button-color(@btn-primary-color; @color; @color;);
+    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
   }
 
   &:active,
   &.active {
-    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`;);
+    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
   }
 
   .button-disabled();
@@ -109,7 +109,7 @@
   > .@{btnClassName} {
     position: relative;
     z-index: 1;
-    float: left;
+
     &:hover,
     &:focus,
     &:active,
@@ -139,7 +139,6 @@
 // --------------------------------------------------
 .btn() {
   display: inline-block;
-  margin-bottom: 0;
   font-weight: @btn-font-weight;
   text-align: center;
   touch-action: manipulation;
@@ -147,7 +146,6 @@
   background-image: none;
   border: @border-width-base @border-style-base transparent;
   white-space: nowrap;
-  line-height: 1.15; // https://github.com/ant-design/ant-design/issues/7070
   .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
   user-select: none;
   transition: all .3s @ease-in-out;
@@ -185,7 +183,7 @@
   }
 
   &-sm {
-    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm);
+    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
   }
 }
 
@@ -251,8 +249,6 @@
 
   .@{btnClassName}:not(:first-child):not(:last-child) {
     border-radius: 0;
-    padding-left: 8px;
-    padding-right: 8px;
   }
 
   > .@{btnClassName}:first-child {
@@ -260,14 +256,12 @@
     &:not(:last-child) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      padding-right: 8px;
     }
   }
 
   > .@{btnClassName}:last-child:not(:first-child) {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    padding-left: 8px;
   }
 
   & > & {
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
index 7a940f36e..2851d2b68 100644
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -4,13 +4,15 @@
   @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
   // 一般状态
   .@{checkbox-prefix-cls} {
+    .reset-component;
     white-space: nowrap;
     cursor: pointer;
     outline: none;
     display: inline-block;
     line-height: 1;
     position: relative;
-    vertical-align: text-bottom;
+    vertical-align: middle;
+    top: -0.09em;
 
     .@{checkbox-prefix-cls}-wrapper:hover &-inner,
     &:hover &-inner,
@@ -72,7 +74,7 @@
       left: 0;
       z-index: 1;
       cursor: pointer;
-      .opacity(0);
+      opacity: 0;
       top: 0;
       bottom: 0;
       right: 0;
@@ -148,8 +150,9 @@
   }
 
   .@{checkbox-prefix-cls}-wrapper {
+    .reset-component;
+    line-height: unset;
     cursor: pointer;
-    font-size: @font-size-base;
     display: inline-block;
     & + & {
       margin-left: 8px;
@@ -163,7 +166,8 @@
   }
 
   .@{checkbox-prefix-cls}-group {
-    font-size: @font-size-base;
+    .reset-component;
+    display: inline-block;
     &-item {
       display: inline-block;
       margin-right: 8px;
@@ -175,23 +179,6 @@
       margin-left: 0;
     }
   }
-
-  @ie8: \0screen;
-
-  // IE8 hack for https://github.com/ant-design/ant-design/issues/2148
-  @media @ie8 {
-    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
-    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
-      .iconfont-font("\e632");
-      font-weight: bold;
-      font-size: 8px;
-      border: 0;
-      color: #fff;
-      left: 2px;
-      top: 3px;
-      position: absolute;
-    }
-  }
 }
 
 @keyframes antCheckboxEffect {
diff --git a/components/grid/style/index.less b/components/grid/style/index.less
index 9671dc96d..ad23d6d96 100644
--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@@ -6,6 +6,7 @@
 .@{ant-prefix}-row {
   .make-row();
   display: block;
+  box-sizing: border-box;
 }
 
 .@{ant-prefix}-row-flex {
@@ -105,3 +106,11 @@
 @media (min-width: @screen-xl-min) {
   .make-grid(-xl);
 }
+
+// Extra Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xxl-min) {
+  .make-grid(-xxl);
+}
diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less
index ad6ed9623..fd95df193 100644
--- a/components/grid/style/mixin.less
+++ b/components/grid/style/mixin.less
@@ -53,6 +53,7 @@
 .loop-grid-columns(@index, @class) when (@index > 0) {
   .@{ant-prefix}-col@{class}-@{index} {
     display: block;
+    box-sizing: border-box;
     width: percentage((@index / @grid-columns));
   }
   .@{ant-prefix}-col@{class}-push-@{index} {
diff --git a/components/input/demo/index.vue b/components/input/demo/index.vue
new file mode 100644
index 000000000..e8deb705c
--- /dev/null
+++ b/components/input/demo/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>AutosizeTextarea</h1>
+    <AutosizeTextarea />
+    <h1>Presuffix</h1>
+    <Presuffix />
+    <h1>SearchInput</h1>
+    <SearchInput />
+    <h1>Size</h1>
+    <Size />
+    <h1>TextArea</h1>
+    <TextArea />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import AutosizeTextarea from './autosize-textarea'
+import Presuffix from './presuffix'
+import SearchInput from './search-input'
+import Size from './size'
+import TextArea from './textarea'
+export default {
+  components: {
+    Basic,
+    AutosizeTextarea,
+    Presuffix,
+    SearchInput,
+    Size,
+    TextArea,
+  },
+}
+</script>
diff --git a/components/input/style/index.less b/components/input/style/index.less
index 6271e4e96..0d93f4343 100644
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@@ -1,15 +1,16 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 @import "./mixin";
-@import "./search-input";
 
 // Input styles
 .@{ant-prefix}-input {
+  .reset-component;
   .input;
 }
 
 //== Style for input-group: input with label, with button or dropdown...
 .@{ant-prefix}-input-group {
+  .reset-component;
   .input-group(~"@{ant-prefix}-input");
   &-wrapper {
     display: inline-block;
@@ -20,6 +21,7 @@
 
 // Input with affix: prefix or suffix
 .@{ant-prefix}-input-affix-wrapper {
+  .reset-component;
   .input-affix-wrapper(~"@{ant-prefix}-input");
 
   // https://github.com/ant-design/ant-design/issues/6144
@@ -27,3 +29,5 @@
     min-height: 100%;  // use min-height, assume that no smaller height to override
   }
 }
+
+@import "./search-input";
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index d465800d5..14a73557f 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -1,12 +1,13 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@input-affix-width: 17px;
+@input-affix-width: 19px;
 
 // size mixins for input
 .input-lg() {
   padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
   height: @input-height-lg;
+  font-size: @font-size-lg;
 }
 
 .input-sm() {
@@ -72,6 +73,7 @@
     height: auto;
     vertical-align: bottom;
     transition: all .3s, height 0s;
+    min-height: @input-height-base;
   }
 
   // Size
@@ -137,7 +139,7 @@
   }
 
   &-addon {
-    padding: @input-padding-vertical-base @input-padding-horizontal-base;
+    padding: 0 @input-padding-horizontal-base;
     font-size: @font-size-base;
     font-weight: normal;
     line-height: 1;
@@ -257,7 +259,7 @@
     & > * {
       border-radius: 0;
       border-right-width: 0;
-      vertical-align: middle;
+      vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
       float: none;
       display: inline-block;
     }
@@ -328,11 +330,11 @@
   }
 
   .@{inputClass}-prefix {
-    left: @input-padding-horizontal-base;
+    left: @input-padding-horizontal-base + 1px;
   }
 
   .@{inputClass}-suffix {
-    right: @input-padding-horizontal-base;
+    right: @input-padding-horizontal-base + 1px;
   }
 
   .@{inputClass}:not(:first-child) {
diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less
index 6a7ecddb5..2e5a400af 100644
--- a/components/input/style/search-input.less
+++ b/components/input/style/search-input.less
@@ -3,56 +3,31 @@
 @import "../../button/style/mixin";
 @import "./mixin";
 
-.@{ant-prefix}-input-search-icon {
-  cursor: pointer;
-  transition: all .3s;
-  font-size: 14px;
-  &:hover {
-    color: @input-hover-border-color;
-  }
-}
+@search-prefix: ~"@{ant-prefix}-input-search";
 
-// code blow is keeped for compatibility
-// for this demo: http://1x.ant.design/components/select/#components-select-demo-search-box
-// do not delete until 3.x
-.@{ant-prefix}-search-input-wrapper {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.@{ant-prefix}-search-input {
-  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
-  &.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
-    border-radius: @border-radius-base;
-    position: absolute;
-    top: -1px;
-    width: 100%;
+.@{search-prefix} {
+  &-icon {
+    pointer-events: none;
+    color: @text-color-secondary;
   }
 
-  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child {
-    padding-right: 36px;
+  &:not(&-small) > .@{ant-prefix}-input-suffix {
+    right: @control-padding-horizontal;
   }
 
-  .@{ant-prefix}-search-btn {
-    .btn-default;
-    border-radius: 0 @border-radius-base - 1px @border-radius-base - 1px 0;
-    left: -1px;
-    position: relative;
-    border-width: 0 0 0 1px;
-    z-index: 2;
-    padding-left: 8px;
-    padding-right: 8px;
-    &:hover {
-      border-color: @border-color-base;
+  > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    > .@{iconfont-css-prefix}-search {
+      font-size: @font-size-lg;
     }
   }
-  &&-focus .@{ant-prefix}-search-btn-noempty,
-  &:hover .@{ant-prefix}-search-btn-noempty {
-    .btn-primary;
+
+  &.@{search-prefix}-enter-button > .@{ant-prefix}-input {
+    padding-right: 46px;
   }
-  .@{ant-prefix}-select-combobox {
-    .@{ant-prefix}-select-selection__rendered {
-      margin-right: 29px;
-    }
+
+  &.@{search-prefix}-enter-button > .@{ant-prefix}-input-suffix {
+    right: 0;
   }
 }
diff --git a/components/popover/index.vue b/components/popover/index.vue
index 8fa4515e2..68d46d4b7 100644
--- a/components/popover/index.vue
+++ b/components/popover/index.vue
@@ -4,10 +4,11 @@ import abstractTooltipProps from '../tooltip/abstractTooltipProps'
 import PropTypes from '../_util/vue-types'
 import { getOptionProps, getComponentFromProp } from '../_util/props-util'
 
+const props = abstractTooltipProps()
 export default {
   name: 'popover',
   props: {
-    ...abstractTooltipProps,
+    ...props,
     prefixCls: PropTypes.string.def('ant-popover'),
     transitionName: PropTypes.string.def('zoom-big'),
     content: PropTypes.any,
diff --git a/components/popover/style/index.less b/components/popover/style/index.less
index 227d2bc5a..87065a721 100644
--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@@ -4,6 +4,7 @@
 @popover-prefix-cls: ~"@{ant-prefix}-popover";
 
 .@{popover-prefix-cls} {
+  .reset-component;
   position: absolute;
   top: 0;
   left: 0;
@@ -11,8 +12,6 @@
   cursor: auto;
   user-select: text;
   white-space: normal;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
   font-weight: normal;
   text-align: left;
 
@@ -61,35 +60,35 @@
   &-title {
     min-width: @popover-min-width;
     margin: 0; // reset heading margin
-    padding: 8px 16px;
+    padding: 5px @padding-md 4px;
     min-height: 32px;
     border-bottom: 1px solid @border-color-split;
-    color: @popover-color;
+    color: @heading-color;
     font-weight: 500;
   }
 
   &-inner-content {
-    padding: 8px 16px;
+    padding: 12px @padding-md;
     color: @popover-color;
   }
 
   &-message {
-    padding: 8px 0 16px;
+    padding: 4px 0 12px;
     font-size: @font-size-base;
     color: @popover-color;
     > .@{iconfont-css-prefix} {
       color: @warning-color;
-      line-height: 17px;
+      line-height: @line-height-base + 0.1;
       position: absolute;
     }
     &-title {
-      padding-left: 20px;
+      padding-left: @font-size-base + 8px;
     }
   }
 
   &-buttons {
     text-align: right;
-    margin-bottom: 8px;
+    margin-bottom: 4px;
     button {
       margin-left: 8px;
     }
@@ -99,43 +98,25 @@
   // .popover-arrow is outer, .popover-arrow:after is inner
 
   &-arrow {
-    &,
-    &:after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-
-  &-arrow {
-    border-width: @popover-arrow-outer-width;
-  }
-
-  &-arrow:after {
-    border-width: @popover-arrow-width;
-    content: "";
+    background: @popover-bg;
+    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+    transform: rotate(45deg);
+    position: absolute;
+    display: block;
+    border-color: transparent;
+    border-style: solid;
   }
 
   &-placement-top > &-content > &-arrow,
   &-placement-topLeft > &-content >  &-arrow,
   &-placement-topRight > &-content >  &-arrow {
-    border-bottom-width: 0;
-    border-top-color: @popover-arrow-outer-color;
-    bottom: @popover-distance - @popover-arrow-outer-width;
-    &:after {
-      content: " ";
-      bottom: 1px;
-      margin-left: -@popover-arrow-width;
-      border-bottom-width: 0;
-      border-top-color: @popover-arrow-color;
-    }
+    bottom: @popover-distance - @popover-arrow-width + 2px;
+    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
   }
   &-placement-top > &-content >  &-arrow {
     left: 50%;
-    margin-left: -@popover-arrow-outer-width;
+    transform: translateX(-50%) rotate(45deg);
   }
   &-placement-topLeft > &-content >  &-arrow {
     left: 16px;
@@ -147,20 +128,12 @@
   &-placement-right > &-content >  &-arrow,
   &-placement-rightTop > &-content >  &-arrow,
   &-placement-rightBottom > &-content >  &-arrow {
-    left: @popover-distance - @popover-arrow-outer-width;
-    border-left-width: 0;
-    border-right-color: @popover-arrow-outer-color;
-    &:after {
-      content: " ";
-      left: 1px;
-      bottom: -@popover-arrow-width;
-      border-left-width: 0;
-      border-right-color: @popover-arrow-color;
-    }
+    left: @popover-distance - @popover-arrow-width + 2px;
+    box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
   }
   &-placement-right > &-content >  &-arrow {
     top: 50%;
-    margin-top: -@popover-arrow-outer-width;
+    transform: translateY(-50%) rotate(45deg);
   }
   &-placement-rightTop > &-content >  &-arrow {
     top: 12px;
@@ -172,20 +145,12 @@
   &-placement-bottom > &-content >  &-arrow,
   &-placement-bottomLeft > &-content >  &-arrow,
   &-placement-bottomRight > &-content >  &-arrow {
-    border-top-width: 0;
-    border-bottom-color: @popover-arrow-outer-color;
-    top: @popover-distance - @popover-arrow-outer-width;
-    &:after {
-      content: " ";
-      top: 1px;
-      margin-left: -@popover-arrow-width;
-      border-top-width: 0;
-      border-bottom-color: @popover-arrow-color;
-    }
+    top: @popover-distance - @popover-arrow-width + 2px;
+    box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.06);
   }
   &-placement-bottom > &-content >  &-arrow {
     left: 50%;
-    margin-left: -@popover-arrow-outer-width;
+    transform: translateX(-50%) rotate(45deg);
   }
   &-placement-bottomLeft > &-content >  &-arrow {
     left: 16px;
@@ -197,20 +162,12 @@
   &-placement-left > &-content >  &-arrow,
   &-placement-leftTop > &-content >  &-arrow,
   &-placement-leftBottom > &-content >  &-arrow {
-    right: @popover-distance - @popover-arrow-outer-width;
-    border-right-width: 0;
-    border-left-color: @popover-arrow-outer-color;
-    &:after {
-      content: " ";
-      right: 1px;
-      border-right-width: 0;
-      border-left-color: @popover-arrow-color;
-      bottom: -@popover-arrow-width;
-    }
+    right: @popover-distance - @popover-arrow-width + 2px;
+    box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
   }
   &-placement-left > &-content >  &-arrow {
     top: 50%;
-    margin-top: -@popover-arrow-outer-width;
+    transform: translateY(-50%) rotate(45deg);
   }
   &-placement-leftTop > &-content >  &-arrow {
     top: 12px;
diff --git a/components/radio/Group.vue b/components/radio/Group.vue
index 85c1a7f70..6fcf00b6d 100644
--- a/components/radio/Group.vue
+++ b/components/radio/Group.vue
@@ -1,10 +1,3 @@
-<template>
-  <div :class="classes">
-    <Radio v-for="item in radioOptions" :key="item.value"
-      :value="item.value" :disabled="item.disabled" :name="name">{{item.label}}</Radio>
-    <slot v-if="radioOptions.length === 0"></slot>
-  </div>
-</template>
 <script>
 import Radio from './Radio.vue'
 export default {
@@ -82,8 +75,15 @@ export default {
       this.stateValue = val
     },
   },
-  components: {
-    Radio,
+  render () {
+    const { radioOptions, classes, $slots, name } = this
+    return (
+      <div class={classes}>
+        {radioOptions.map(({ value, disabled, label }) =>
+          <Radio key={value} value={value} disabled={disabled} name={name}>{label}</Radio>)}
+        { radioOptions.length === 0 && ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')}
+      </div>
+    )
   },
 }
 </script>
diff --git a/components/radio/demo/radioButton.vue b/components/radio/demo/radioButton.vue
index 3ee413418..6b54f15a3 100644
--- a/components/radio/demo/radioButton.vue
+++ b/components/radio/demo/radioButton.vue
@@ -8,7 +8,7 @@
         <RadioButton value="d">Chengdu</RadioButton>
       </RadioGroup>
     </div>
-    <div :style="{ marginTop: 16 }">
+    <div :style="{ marginTop: '16px' }">
       <RadioGroup @change="onChange" defaultValue="a">
         <RadioButton value="a">Hangzhou</RadioButton>
         <RadioButton value="b" disabled>Shanghai</RadioButton>
@@ -16,7 +16,7 @@
         <RadioButton value="d">Chengdu</RadioButton>
       </RadioGroup>
     </div>
-    <div :style="{ marginTop: 16 }">
+    <div :style="{ marginTop: '16px' }">
       <RadioGroup disabled @change="onChange" defaultValue="a">
         <RadioButton value="a">Hangzhou</RadioButton>
         <RadioButton value="b">Shanghai</RadioButton>
diff --git a/components/radio/demo/size.vue b/components/radio/demo/size.vue
index 2739cc763..d9c6b44c6 100644
--- a/components/radio/demo/size.vue
+++ b/components/radio/demo/size.vue
@@ -8,7 +8,7 @@
         <RadioButton value="d">Chengdu</RadioButton>
       </RadioGroup>
     </div>
-    <div :style="{ marginTop: 16 }">
+    <div :style="{ marginTop: '16px' }">
       <RadioGroup defaultValue="a">
         <RadioButton value="a">Hangzhou</RadioButton>
         <RadioButton value="b">Shanghai</RadioButton>
@@ -16,7 +16,7 @@
         <RadioButton value="d">Chengdu</RadioButton>
       </RadioGroup>
     </div>
-    <div :style="{ marginTop: 16 }">
+    <div :style="{ marginTop: '16px' }">
       <RadioGroup defaultValue="a" size="small">
         <RadioButton value="a">Hangzhou</RadioButton>
         <RadioButton value="b">Shanghai</RadioButton>
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
index d573a96d7..a71288263 100644
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -1,5 +1,6 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
+@import "../../style/mixins/index";
 
 @radio-prefix-cls: ~"@{ant-prefix}-radio";
 @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
@@ -7,13 +8,14 @@
 @radio-duration: .3s;
 
 .@{radio-group-prefix-cls} {
+  .reset-component;
   display: inline-block;
-  font-size: @font-size-base;
+  line-height: unset;
 }
 
 // 一般状态
 .@{radio-prefix-cls}-wrapper {
-  font-size: @font-size-base;
+  .reset-component;
   display: inline-block;
   position: relative;
   white-space: nowrap;
@@ -22,6 +24,7 @@
 }
 
 .@{radio-prefix-cls} {
+  .reset-component;
   white-space: nowrap;
   outline: none;
   display: inline-block;
@@ -55,11 +58,12 @@
   }
   &-inner {
     &:after {
+      @radio-dot-size: @radio-size - 8px;
       position: absolute;
-      width: 6px;
-      height: 6px;
-      left: 3px;
-      top: 3px;
+      width: @radio-dot-size;
+      height: @radio-dot-size;
+      left: (@radio-size - @radio-dot-size) / 2 - 1px;
+      top: (@radio-size - @radio-dot-size) / 2 - 1px;
       border-radius: @border-radius-base;
       display: table;
       border-top: 0;
@@ -75,11 +79,11 @@
     top: 0;
     left: 0;
     display: block;
-    width: 14px;
-    height: 14px;
+    width: @radio-size;
+    height: @radio-size;
     border-width: 1px;
     border-style: solid;
-    border-radius: 14px;
+    border-radius: 100px;
     border-color: @border-color-base;
     background-color: @radio-button-bg;
     transition: all @radio-duration;
@@ -102,7 +106,7 @@
   .@{radio-inner-prefix-cls} {
     border-color: @primary-color;
     &:after {
-      transform: scale(1);
+      transform: scale(.875);
       opacity: 1;
       transition: all @radio-duration @ease-in-out-circ;
     }
@@ -134,18 +138,20 @@ span.@{radio-prefix-cls} + * {
 }
 
 .@{radio-prefix-cls}-button-wrapper {
-  float: left;
   margin: 0;
-  height: @input-height-base;
-  line-height: @input-height-base - 2px;
+  height: @btn-height-base;
+  line-height: @btn-height-base - 2px;
   color: @radio-button-color;
   display: inline-block;
   transition: all 0.3s ease;
   cursor: pointer;
   border: @border-width-base @border-style-base @border-color-base;
   border-left: 0;
+  // strange align fix for chrome but works
+  // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
+  border-top-width: @border-width-base + 0.02px;
   background: @radio-button-bg;
-  padding: 0 16px;
+  padding: 0 @padding-md - 1px;
   position: relative;
 
   a {
@@ -162,18 +168,13 @@ span.@{radio-prefix-cls} + * {
   .@{radio-group-prefix-cls}-large & {
     height: @input-height-lg;
     line-height: @input-height-lg - 2px;
+    font-size: @font-size-lg;
   }
 
   .@{radio-group-prefix-cls}-small & {
     height: @input-height-sm;
     line-height: @input-height-sm - 2px;
-    padding: 0 12px;
-    &:first-child {
-      border-radius: @border-radius-sm 0 0 @border-radius-sm;
-    }
-    &:last-child {
-      border-radius: 0 @border-radius-sm @border-radius-sm 0;
-    }
+    padding: 0 @control-padding-horizontal-sm - 1px;
   }
 
   &:not(:first-child) {
@@ -210,7 +211,7 @@ span.@{radio-prefix-cls} + * {
   .@{radio-prefix-cls}-inner,
   input[type="checkbox"],
   input[type="radio"] {
-    .opacity(0);
+    opacity: 0;
     width: 0;
     height: 0;
   }
diff --git a/components/style/color/bezierEasing.less b/components/style/color/bezierEasing.less
index bcad6c1dc..78d94d550 100644
--- a/components/style/color/bezierEasing.less
+++ b/components/style/color/bezierEasing.less
@@ -1,4 +1,4 @@
-/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
 .bezierEasingMixin() {
 @functions: ~`(function() {
   var NEWTON_ITERATIONS = 4;
diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less
index 7c84cef7e..069991137 100644
--- a/components/style/color/colorPalette.less
+++ b/components/style/color/colorPalette.less
@@ -1,3 +1,4 @@
+/* stylelint-disable no-duplicate-selectors */
 @import "bezierEasing";
 @import "tinyColor";
 
@@ -7,36 +8,64 @@
 // We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
 .colorPaletteMixin() {
 @functions: ~`(function() {
-  var warmDark = 0.5;     // warm color darken radio
-  var warmRotate = -26;  // warm color rotate degree
-  var coldDark = 0.55;     // cold color darken radio
-  var coldRotate = 10;   // cold color rotate degree
-  var getShadeColor = function(c) {
-    var shadeColor = tinycolor(c);
-    // warm and cold color will darken in different radio, and rotate in different degree
-    // warmer color
-    if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
-      return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
+  var hueStep = 2;
+  var saturationStep = 16;
+  var saturationStep2 = 5;
+  var brightnessStep1 = 5;
+  var brightnessStep2 = 15;
+  var lightColorCount = 5;
+  var darkColorCount = 4;
+
+  var getHue = function(hsv, i, isLight) {
+    var hue;
+    if (hsv.h >= 60 && hsv.h <= 240) {
+      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    } else {
+      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
     }
-    // colder color
-    return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
-  }
-  var primaryEasing = colorEasing(0.6);
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  };
+  var getSaturation = function(hsv, i, isLight) {
+    var saturation;
+    if (isLight) {
+      saturation = Math.round(hsv.s * 100) - saturationStep * i;
+    } else if (i == darkColorCount) {
+      saturation = Math.round(hsv.s * 100) + saturationStep;
+    } else {
+      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
+    }
+    if (saturation > 100) {
+      saturation = 100;
+    }
+    if (isLight && i === lightColorCount && saturation > 10) {
+      saturation = 10;
+    }
+    if (saturation < 6) {
+      saturation = 6;
+    }
+    return Math.round(saturation);
+  };
+  var getValue = function(hsv, i, isLight) {
+    if (isLight) {
+      return Math.round(hsv.v * 100) + brightnessStep1 * i;
+    }
+    return Math.round(hsv.v * 100) - brightnessStep2 * i;
+  };
+
   this.colorPalette = function(color, index) {
-    var currentEasing = colorEasing(index * 0.1);
-    // return light colors after tint
-    if (index <= 6) {
-      return tinycolor.mix(
-        '#ffffff',
-        color,
-        currentEasing * 100 / primaryEasing
-      ).toHexString();
-    }
-    return tinycolor.mix(
-      getShadeColor(color),
-      color,
-      (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
-    ).toHexString();
+    var isLight = index <= 6;
+    var hsv = tinycolor(color).toHsv();
+    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+    return tinycolor({
+      h: getHue(hsv, i, isLight),
+      s: getSaturation(hsv, i, isLight),
+      v: getValue(hsv, i, isLight),
+    }).toHexString();
   };
 })()`;
 }
diff --git a/components/style/color/colors.less b/components/style/color/colors.less
index 53f16229e..9793a86d2 100644
--- a/components/style/color/colors.less
+++ b/components/style/color/colors.less
@@ -6,7 +6,7 @@
 @blue-3: color(~`colorPalette("@{blue-6}", 3)`);
 @blue-4: color(~`colorPalette("@{blue-6}", 4)`);
 @blue-5: color(~`colorPalette("@{blue-6}", 5)`);
-@blue-6: #108ee9;
+@blue-6: #1890ff;
 @blue-7: color(~`colorPalette("@{blue-6}", 7)`);
 @blue-8: color(~`colorPalette("@{blue-6}", 8)`);
 @blue-9: color(~`colorPalette("@{blue-6}", 9)`);
@@ -17,7 +17,7 @@
 @purple-3: color(~`colorPalette("@{purple-6}", 3)`);
 @purple-4: color(~`colorPalette("@{purple-6}", 4)`);
 @purple-5: color(~`colorPalette("@{purple-6}", 5)`);
-@purple-6: #7265e6;
+@purple-6: #722ed1;
 @purple-7: color(~`colorPalette("@{purple-6}", 7)`);
 @purple-8: color(~`colorPalette("@{purple-6}", 8)`);
 @purple-9: color(~`colorPalette("@{purple-6}", 9)`);
@@ -28,7 +28,7 @@
 @cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
 @cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
 @cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
-@cyan-6: #00a2ae;
+@cyan-6: #13c2c2;
 @cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
 @cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
 @cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
@@ -39,18 +39,30 @@
 @green-3: color(~`colorPalette("@{green-6}", 3)`);
 @green-4: color(~`colorPalette("@{green-6}", 4)`);
 @green-5: color(~`colorPalette("@{green-6}", 5)`);
-@green-6: #00a854;
+@green-6: #52c41a;
 @green-7: color(~`colorPalette("@{green-6}", 7)`);
 @green-8: color(~`colorPalette("@{green-6}", 8)`);
 @green-9: color(~`colorPalette("@{green-6}", 9)`);
 @green-10: color(~`colorPalette("@{green-6}", 10)`);
 
+@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
+@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
+@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
+@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
+@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
+@magenta-6: #eb2f96;
+@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
+@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
+@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
+@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
+
+// alias of magenta
 @pink-1: color(~`colorPalette("@{pink-6}", 1)`);
 @pink-2: color(~`colorPalette("@{pink-6}", 2)`);
 @pink-3: color(~`colorPalette("@{pink-6}", 3)`);
 @pink-4: color(~`colorPalette("@{pink-6}", 4)`);
 @pink-5: color(~`colorPalette("@{pink-6}", 5)`);
-@pink-6: #f5317f;
+@pink-6: #eb2f96;
 @pink-7: color(~`colorPalette("@{pink-6}", 7)`);
 @pink-8: color(~`colorPalette("@{pink-6}", 8)`);
 @pink-9: color(~`colorPalette("@{pink-6}", 9)`);
@@ -61,7 +73,7 @@
 @red-3: color(~`colorPalette("@{red-6}", 3)`);
 @red-4: color(~`colorPalette("@{red-6}", 4)`);
 @red-5: color(~`colorPalette("@{red-6}", 5)`);
-@red-6: #f04134;
+@red-6: #f5222d;
 @red-7: color(~`colorPalette("@{red-6}", 7)`);
 @red-8: color(~`colorPalette("@{red-6}", 8)`);
 @red-9: color(~`colorPalette("@{red-6}", 9)`);
@@ -72,7 +84,7 @@
 @orange-3: color(~`colorPalette("@{orange-6}", 3)`);
 @orange-4: color(~`colorPalette("@{orange-6}", 4)`);
 @orange-5: color(~`colorPalette("@{orange-6}", 5)`);
-@orange-6: #f56a00;
+@orange-6: #fa8c16;
 @orange-7: color(~`colorPalette("@{orange-6}", 7)`);
 @orange-8: color(~`colorPalette("@{orange-6}", 8)`);
 @orange-9: color(~`colorPalette("@{orange-6}", 9)`);
@@ -83,8 +95,52 @@
 @yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
 @yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
 @yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
-@yellow-6: #ffbf00;
+@yellow-6: #fadb14;
 @yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
 @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
 @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
 @yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
+
+@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
+@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
+@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
+@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
+@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
+@volcano-6: #fa541c;
+@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
+@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
+@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
+@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
+
+@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
+@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
+@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
+@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
+@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
+@geekblue-6: #2f54eb;
+@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
+@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
+@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
+@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
+
+@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
+@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
+@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
+@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
+@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
+@lime-6: #a0d911;
+@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
+@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
+@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
+@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
+
+@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
+@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
+@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
+@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
+@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
+@gold-6: #faad14;
+@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
+@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
+@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
+@gold-10: color(~`colorPalette("@{gold-6}", 10)`);
diff --git a/components/style/color/tinyColor.less b/components/style/color/tinyColor.less
index 00aad3931..570f0ce69 100644
--- a/components/style/color/tinyColor.less
+++ b/components/style/color/tinyColor.less
@@ -1,4 +1,4 @@
-/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
 .tinyColorMixin() {
 @functions: ~`(function() {
 // TinyColor v1.4.1
diff --git a/components/style/core/base.less b/components/style/core/base.less
index d3d2149f1..050480a97 100644
--- a/components/style/core/base.less
+++ b/components/style/core/base.less
@@ -1,4 +1,11 @@
-@import "./normalize.less";
+/* stylelint-disable at-rule-no-unknown */
+
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
 
 // http://stackoverflow.com/a/13611748/3040605
 @font-face {
@@ -7,14 +14,10 @@
   unicode-range: U+30-39;
 }
 
-* {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
-}
-
-*:before,
-*:after {
-  box-sizing: border-box;
+@font-face {
+  font-family: "Chinese Quote";
+  src: local("PingFang SC"), local("SimSun");
+  unicode-range: U+2018, U+2019, U+201c, U+201d;
 }
 
 // HTML & Body reset
@@ -22,58 +25,200 @@ html, body {
   .square(100%);
 }
 
-body {
-  font-family: @font-family;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  color: @text-color;
-  background-color: @body-background;
-}
-
-// unify the setting of elements's margin and padding for browsers
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
-  margin: 0;
-  padding: 0;
-}
-
-// Reset fonts for relevant elements
-button,input,select,textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-  -webkit-appearance: none;
-}
-
-ul,
-ol {
-  list-style: none;
-}
-
-// Remove the clear button of a text input control in IE10+
+// remove the clear button of a text input control in IE10+
 input::-ms-clear, input::-ms-reveal {
   display: none;
 }
 
-::selection {
-  background: @primary-color;
-  color: #fff;
+// Document
+//
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+// 6. Change the default tap highlight to be completely transparent in iOS.
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
 }
 
-// Headers
+html {
+  font-family: sans-serif; // 2
+  line-height: 1.15; // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
+  -ms-overflow-style: scrollbar; // 5
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
+}
+
+// IE10+ doesn't honor `<meta name="viewport">` in some cases.
+@at-root {
+  @-ms-viewport { width: device-width; }
+}
+
+// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+// Body
+//
+// 1. remove the margin in all browsers.
+// 2. As a best practice, apply a default `body-background`.
+
+body {
+  margin: 0; // 1
+  font-family: @font-family;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @text-color;
+  background-color: @body-background; // 2
+}
+
+// Suppress the focus outline on elements that cannot be accessed via keyboard.
+// This prevents an unwanted focus outline from appearing around elements that
+// might still respond to pointer events.
+//
+// Credit: https://github.com/suitcss/base
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+// Content grouping
+//
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
+}
+
+//
+// Typography
+//
+
+// remove top margins from headings
+//
+// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
 h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5em;
   color: @heading-color;
   font-weight: 500;
 }
 
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `<p>`s get reset. However, we also reset the
+// bottom margin to use `em` units instead of `em`.
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+// Abbreviations
+//
+// 1. remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
+
+abbr[title],
+abbr[data-original-title] { // 4
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  border-bottom: 0; // 1
+}
+
+address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="number"],
+textarea {
+  -webkit-appearance: none;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 500;
+}
+
+dd {
+  margin-bottom: .5em;
+  margin-left: 0; // Undo browser default
+}
+
+blockquote {
+  margin: 0 0 1em;
+}
+
+dfn {
+  font-style: italic; // Add the correct font style in Android 4.3-
+}
+
+b,
+strong {
+  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+  font-size: 80%; // Add the correct font size in all browsers
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+//
 // Links
+//
+
 a {
   color: @link-color;
-  background: transparent;
+  background-color: transparent; // remove the gray background on active links in IE 10.
   text-decoration: @link-decoration;
   outline: none;
   cursor: pointer;
-  transition: color .3s ease;
+  transition: color .3s;
+  -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
 
   &:focus {
     text-decoration: underline;
@@ -101,19 +246,256 @@ a {
   }
 }
 
-.@{ant-prefix}-divider {
-  margin: 0 6px;
-  display: inline-block;
-  height: 8px;
-  width: 1px;
-  background: #ccc;
-}
+//
+// Code
+//
 
+pre,
 code,
 kbd,
-pre,
 samp {
   font-family: @code-family;
+  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+}
+
+pre {
+  // remove browser default top margin
+  margin-top: 0;
+  // Reset browser default of `1em` to use `em`s
+  margin-bottom: 1em;
+  // Don't allow content to break outside
+  overflow: auto;
+}
+
+//
+// Figures
+//
+figure {
+  // Apply a consistent margin strategy (matches our type styles).
+  margin: 0 0 1em;
+}
+
+//
+// Images and content
+//
+
+img {
+  vertical-align: middle;
+  border-style: none; // remove the border on images inside links in IE 10-.
+}
+
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
+}
+
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support emoving the click delay via `touch-action: manipulation`.
+// See:
+// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input:not([type=range]),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+//
+// Tables
+//
+
+table {
+  border-collapse: collapse; // Prevent double borders
+}
+
+caption {
+  padding-top: .75em;
+  padding-bottom: .3em;
+  color: @text-color-secondary;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
+  // closest parent with a set `text-align`.
+  text-align: inherit;
+}
+
+//
+// Forms
+//
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0; // remove the margin in Firefox and Safari
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // remove the inheritance of text transform in Firefox
+}
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+button,
+html [type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. remove the padding in IE 10-
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  // remove the default appearance of temporal inputs to avoid a Mobile Safari
+  // bug where setting a custom line-height prevents text from being vertically
+  // centered within the input.
+  // See https://bugs.webkit.org/show_bug.cgi?id=139848
+  // and https://github.com/twbs/bootstrap/issues/11266
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto; // remove the default vertical scrollbar in IE.
+  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+  resize: vertical;
+}
+
+fieldset {
+  // Browsers set a default `min-width: min-content;` on fieldsets,
+  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  // So we reset that to ensure fieldsets behave more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359
+  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  min-width: 0;
+  // Reset the default outline behavior of fieldsets so they don't affect page layout.
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%; // 1
+  padding: 0;
+  margin-bottom: .5em;
+  font-size: 1.5em;
+  line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of incement and decement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  // This overrides the extra rounded corners on search inputs in iOS so that our
+  // `.form-control` class can properly style them. Note that this cannot simply
+  // be added to `.form-control` as it's not specific enough. For details, see
+  // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
+  -webkit-appearance: none;
+}
+
+//
+// remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+}
+
+template {
+  display: none; // Add the correct display in IE
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
+[hidden] {
+  display: none !important;
+}
+
+mark {
+  padding: .2em;
+  background-color: @yellow-1;
+}
+
+::selection {
+  background: @primary-color;
+  color: #fff;
 }
 
 // Utility classes
diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less
index a62853fcd..57e36acae 100644
--- a/components/style/core/iconfont.less
+++ b/components/style/core/iconfont.less
@@ -6,8 +6,6 @@
   font-family: 'anticon';
   src: url('@{icon-url}.eot'); /* IE9*/
   src:
-  /* IE6-IE8 */
-  url('@{icon-url}.eot?#iefix') format('embedded-opentype'),
   /* chrome、firefox */
   url('@{icon-url}.woff') format('woff'),
   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
@@ -97,7 +95,6 @@
 .@{iconfont-css-prefix}-credit-card:before { content: "\e635"; }
 .@{iconfont-css-prefix}-code-o:before { content: "\e636"; }
 .@{iconfont-css-prefix}-book:before { content: "\e637"; }
-.@{iconfont-css-prefix}-bar-chart:before { content: "\e638"; }
 .@{iconfont-css-prefix}-bars:before { content: "\e639"; }
 .@{iconfont-css-prefix}-question:before { content: "\e63a"; }
 .@{iconfont-css-prefix}-question-circle:before { content: "\e63b"; }
@@ -115,7 +112,7 @@
 .@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown
 .@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; }
 .@{iconfont-css-prefix}-copy:before { content: "\e648"; }
-.@{iconfont-css-prefix}-menu-fold:before { content: "\e658"; }
+.@{iconfont-css-prefix}-menu-fold:before { content: "\e9ac"; }
 .@{iconfont-css-prefix}-mail:before { content: "\e659"; }
 .@{iconfont-css-prefix}-logout:before { content: "\e65a"; }
 .@{iconfont-css-prefix}-link:before { content: "\e65b"; }
@@ -149,7 +146,7 @@
 .@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; }
 .@{iconfont-css-prefix}-notification:before { content: "\e677"; }
 .@{iconfont-css-prefix}-mobile:before { content: "\e678"; }
-.@{iconfont-css-prefix}-menu-unfold:before { content: "\e679"; }
+.@{iconfont-css-prefix}-menu-unfold:before { content: "\e9ad"; }
 .@{iconfont-css-prefix}-inbox:before { content: "\e67a"; }
 .@{iconfont-css-prefix}-lock:before { content: "\e67b"; }
 .@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; }
@@ -295,7 +292,38 @@
 .@{iconfont-css-prefix}-global:before { content: "\e6f1"; }
 .@{iconfont-css-prefix}-shake:before { content: "\e94f"; }
 .@{iconfont-css-prefix}-fork:before { content: "\e6f2"; }
+.@{iconfont-css-prefix}-dashboard:before { content: "\e99a"; }
+.@{iconfont-css-prefix}-profile:before { content: "\e999"; }
+.@{iconfont-css-prefix}-table:before { content: "\e998"; }
+.@{iconfont-css-prefix}-warning:before { content: "\e997"; }
+.@{iconfont-css-prefix}-form:before { content: "\e996"; }
 .@{iconfont-css-prefix}-spin:before {
   display: inline-block;
   animation: loadingCircle 1s infinite linear;
 }
+
+.@{iconfont-css-prefix}-weibo-square:before { content: "\e6f5"; }
+.@{iconfont-css-prefix}-weibo-circle:before { content: "\e6f4"; }
+.@{iconfont-css-prefix}-taobao-circle:before { content: "\e6f3"; }
+.@{iconfont-css-prefix}-html5:before { content: "\e9c7"; }
+.@{iconfont-css-prefix}-weibo:before { content: "\e9c6"; }
+.@{iconfont-css-prefix}-twitter:before { content: "\e9c5"; }
+.@{iconfont-css-prefix}-wechat:before { content: "\e9c4"; }
+.@{iconfont-css-prefix}-youtube:before { content: "\e9c3"; }
+.@{iconfont-css-prefix}-alipay-circle:before { content: "\e9c2"; }
+.@{iconfont-css-prefix}-taobao:before { content: "\e9c1"; }
+.@{iconfont-css-prefix}-skype:before { content: "\e9c0"; }
+.@{iconfont-css-prefix}-qq:before { content: "\e9bf"; }
+.@{iconfont-css-prefix}-medium-workmark:before { content: "\e9be"; }
+.@{iconfont-css-prefix}-gitlab:before { content: "\e9bd"; }
+.@{iconfont-css-prefix}-medium:before { content: "\e9bc"; }
+.@{iconfont-css-prefix}-linkedin:before { content: "\e9bb"; }
+.@{iconfont-css-prefix}-google-plus:before { content: "\e9ba"; }
+.@{iconfont-css-prefix}-dropbox:before { content: "\e9b9"; }
+.@{iconfont-css-prefix}-facebook:before { content: "\e9b8"; }
+.@{iconfont-css-prefix}-codepen:before { content: "\e9b7"; }
+.@{iconfont-css-prefix}-amazon:before { content: "\e9b6"; }
+.@{iconfont-css-prefix}-google:before { content: "\e9b5"; }
+.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; }
+.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; }
+.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; }
diff --git a/components/style/core/normalize.less b/components/style/core/normalize.less
deleted file mode 100644
index bfc3448ea..000000000
--- a/components/style/core/normalize.less
+++ /dev/null
@@ -1,447 +0,0 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-
-figcaption,
-figure,
-main { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- */
-
-details, /* 1 */
-menu {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Scripting
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-canvas {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
- */
-
-template {
-  display: none;
-}
-
-/* Hidden
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10-.
- */
-
-[hidden] {
-  display: none;
-}
diff --git a/components/style/index.js b/components/style/index.js
index 1526e4dff..d74e52ee9 100644
--- a/components/style/index.js
+++ b/components/style/index.js
@@ -1 +1 @@
-import './index.less'
+import './index.less';
diff --git a/components/style/mixins/compatibility.less b/components/style/mixins/compatibility.less
index 7e1202af4..89269ebfb 100644
--- a/components/style/mixins/compatibility.less
+++ b/components/style/mixins/compatibility.less
@@ -1,32 +1,5 @@
 // Compatibility for browsers.
 
-// rotate for ie8 and blow
-.ie-rotate(@rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
-}
-
-// rotate for ie8 and blow
-// degrees unit
-.ie-rotate-via-degrees(@degrees) {
-  /* IE6-IE8 */
-  @radians: ~`parseInt("@{degrees}") * Math.PI * 2 / 360`;
-  @costheta: ~`Math.cos("@{radians}")`;
-  @sintheta: ~`Math.sin("@{radians}")`;
-  @negsintheta: ~`"@{sintheta}" * -1`;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})";
-  zoom: 1;
-
-  :root & {
-    filter: none;
-  }
-}
-
-// support rotate for all browsers
-.cross-rotate(@degrees) {
-  .rotate(@degrees);
-  .ie-rotate-via-degrees(@degrees);
-}
-
 // Placeholder text
 .placeholder(@color: @input-placeholder-color) {
   // Firefox
diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less
index cb85ddb51..f7ed4f96b 100644
--- a/components/style/mixins/iconfont.less
+++ b/components/style/mixins/iconfont.less
@@ -27,12 +27,11 @@
 .iconfont-size-under-12px(@size, @rotate: 0deg) {
   display: inline-block;
   @font-scale: unit(@size / 12px);
-  font-size: @font-size-base;
-  // ie8-9
+  font-size: 12px;
+  // IE9
   font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
   transform: scale(@font-scale) rotate(@rotate);
-  .ie-rotate-via-degrees(@rotate);
   :root & {
-    font-size: @font-size-base; // reset ie9 and above
+    font-size: @font-size-sm; // reset IE9 and above
   }
 }
diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less
index 2c86242c6..ccf2212a6 100644
--- a/components/style/mixins/index.less
+++ b/components/style/mixins/index.less
@@ -1,6 +1,5 @@
 // Mixins
 // --------------------------------------------------
-@import "opacity";
 @import "size";
 @import "compatibility";
 @import "clearfix";
diff --git a/components/style/mixins/motion.less b/components/style/mixins/motion.less
index 411143c7f..84b2c82eb 100644
--- a/components/style/mixins/motion.less
+++ b/components/style/mixins/motion.less
@@ -20,22 +20,11 @@
     .motion-common-leave(@duration);
     animation-play-state: paused;
   }
-  .@{className}-enter-active,
-  .@{className}-appear-active {
-    animation-name: ~"@{keyframeName}In";
-    animation-play-state: running;
-    .motion-common(@duration);
-  }
   .@{className}-enter.@{className}-enter-active,
   .@{className}-appear.@{className}-appear-active {
     animation-name: ~"@{keyframeName}In";
     animation-play-state: running;
   }
-  .@{className}-leave-active {
-    animation-name: ~"@{keyframeName}Out";
-    animation-play-state: running;
-    .motion-common(@duration);
-  }
   .@{className}-leave.@{className}-leave-active {
     animation-name: ~"@{keyframeName}Out";
     animation-play-state: running;
diff --git a/components/style/mixins/opacity.less b/components/style/mixins/opacity.less
deleted file mode 100644
index 33ed25ce6..000000000
--- a/components/style/mixins/opacity.less
+++ /dev/null
@@ -1,8 +0,0 @@
-// Opacity
-
-.opacity(@opacity) {
-  opacity: @opacity;
-  // IE8 filter
-  @opacity-ie: (@opacity * 100);
-  filter: ~"alpha(opacity=@{opacity-ie})";
-}
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index e68c83ebd..7cccc45ce 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -8,9 +8,10 @@
 @primary-color          : @blue-6;
 @info-color             : @blue-6;
 @success-color          : @green-6;
+@processing-color       : @primary-color;
 @error-color            : @red-6;
 @highlight-color        : @red-6;
-@warning-color          : @yellow-6;
+@warning-color          : @gold-6;
 @normal-color           : #d9d9d9;
 
 // Color used by default to control hover and active backgrounds and for
@@ -33,16 +34,16 @@
 @body-background        : #fff;
 // Base background color for most components
 @component-background   : #fff;
-@font-family-no-number  : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-no-number  : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family            : "Helvetica Neue For Number", @font-family-no-number;
 @code-family            : Consolas, Menlo, Courier, monospace;
 @heading-color          : fade(#000, 85%);
 @text-color             : fade(#000, 65%);
-@text-color-secondary   : fade(#000, 43%);
-@heading-color-dark     : fade(#fff, 97%);
-@text-color-dark        : fade(#fff, 91%);
-@text-color-secondary-dark: fade(#fff, 67%);
-@font-size-base         : 12px;
+@text-color-secondary   : fade(#000, 45%);
+@heading-color-dark     : fade(#fff, 100%);
+@text-color-dark        : fade(#fff,85%);
+@text-color-secondary-dark: fade(#fff, 65%);
+@font-size-base         : 14px;
 @font-size-lg           : @font-size-base + 2px;
 @font-size-sm           : 12px;
 @line-height-base       : 1.5;
@@ -66,7 +67,7 @@
 
 // ICONFONT
 @iconfont-css-prefix    : anticon;
-@icon-url               : "https://at.alicdn.com/t/font_zck90zmlh7hf47vi";
+@icon-url               : "https://at.alicdn.com/t/font_148784_r2qo40wrmaolayvi";
 
 // LINK
 @link-color             : @primary-color;
@@ -90,8 +91,8 @@
 @ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);
 
 // Border color
-@border-color-base      : #d9d9d9;        // base border outline a component
-@border-color-split     : #e9e9e9;        // split border inside a component
+@border-color-base      : hsv(0, 0, 85%);  // base border outline a component
+@border-color-split     : hsv(0, 0, 91%);  // split border inside a component
 @border-width-base      : 1px;            // width of the border for a component
 @border-style-base      : solid;          // style of a components border
 
@@ -100,10 +101,8 @@
 @outline-width          : 2px;
 @outline-color          : @primary-color;
 
-// Default background color for disabled states, Collapse wrappers,
-// and several active and hover states.
-@background-color-base  : #f7f7f7;
-@background-color-active: #eee;
+@background-color-light : hsv(0, 0, 98%);  // background of header and selected item
+@background-color-base  : hsv(0, 0, 96%);  // Default grey background color
 
 // Disabled states
 @disabled-color         : fade(#000, 25%);
@@ -111,16 +110,16 @@
 @disabled-color-dark    : fade(#fff, 35%);
 
 // Shadow
-@shadow-color           : rgba(0, 0, 0, .2);
+@shadow-color           : rgba(0, 0, 0, .15);
 @box-shadow-base        : @shadow-1-down;
-@shadow-1-up            : 0 -1px 6px @shadow-color;
-@shadow-1-down          : 0 1px 6px @shadow-color;
-@shadow-1-left          : -1px 0 6px @shadow-color;
-@shadow-1-right         : 1px 0 6px @shadow-color;
-@shadow-2               : 0 2px 8px @shadow-color;
+@shadow-1-up            : 0 2px 8px @shadow-color;
+@shadow-1-down          : 0 2px 8px @shadow-color;
+@shadow-1-left          : -2px 0 8px @shadow-color;
+@shadow-1-right         : 2px 0 8px @shadow-color;
+@shadow-2               : 0 4px 12px @shadow-color;
 
 // Buttons
-@btn-font-weight        : 500;
+@btn-font-weight        : 400;
 @btn-border-radius-base : @border-radius-base;
 @btn-border-radius-sm   : @border-radius-base;
 
@@ -139,23 +138,27 @@
 @btn-disable-bg         : @disabled-bg;
 @btn-disable-border     : @border-color-base;
 
-@btn-padding-base       : 0 15px;
+@btn-padding-base       : 0 @padding-md - 1px;
 @btn-font-size-lg       : @font-size-lg;
+@btn-font-size-sm       : @font-size-base;
 @btn-padding-lg         : @btn-padding-base;
-@btn-padding-sm         : 0 7px;
+@btn-padding-sm         : 0 @padding-xs - 1px;
 
-@btn-height-base        : 28px;
-@btn-height-lg          : 32px;
-@btn-height-sm          : 22px;
+@btn-height-base        : 32px;
+@btn-height-lg          : 40px;
+@btn-height-sm          : 24px;
 
 @btn-circle-size        : @btn-height-base;
 @btn-circle-size-lg     : @btn-height-lg;
 @btn-circle-size-sm     : @btn-height-sm;
 
-@btn-group-border       : @primary-7;
+@btn-group-border       : @primary-5;
 
 // Checkbox
-@checkbox-size          : 14px;
+@checkbox-size          : 16px;
+
+// Radio
+@radio-size             : 16px;
 
 // Radio buttons
 @radio-button-bg        : @btn-default-bg;
@@ -167,41 +170,46 @@
 @screen-xs-min          : @screen-xs;
 
 // Small screen / tablet
-@screen-sm              : 768px;
+@screen-sm              : 576px;
 @screen-sm-min          : @screen-sm;
 
 // Medium screen / desktop
-@screen-md              : 992px;
+@screen-md              : 768px;
 @screen-md-min          : @screen-md;
 
 // Large screen / wide desktop
-@screen-lg              : 1200px;
+@screen-lg              : 992px;
 @screen-lg-min          : @screen-lg;
 
-// Extra Large screen / full hd
-@screen-xl              : 1600px;
+// Extra large screen / full hd
+@screen-xl              : 1200px;
 @screen-xl-min          : @screen-xl;
 
+// Extra extra large screen / large descktop
+@screen-xxl              : 1600px;
+@screen-xxl-min          : @screen-xxl;
+
 // provide a maximum
 @screen-xs-max          : (@screen-sm-min - 1px);
 @screen-sm-max          : (@screen-md-min - 1px);
 @screen-md-max          : (@screen-lg-min - 1px);
 @screen-lg-max          : (@screen-xl-min - 1px);
+@screen-xl-max          : (@screen-xxl-min - 1px);
 
 // Grid system
 @grid-columns           : 24;
 @grid-gutter-width      : 0;
 
 // Layout
-@layout-body-background      : #ececec;
-@layout-header-background    : #404040;
+@layout-body-background      : #f0f2f5;
+@layout-header-background    : #001529;
 @layout-footer-background    : @layout-body-background;
 @layout-header-height        : 64px;
 @layout-header-padding       : 0 50px;
 @layout-footer-padding       : 24px 50px;
 @layout-sider-background     : @layout-header-background;
 @layout-trigger-height       : 48px;
-@layout-trigger-background   : tint(@heading-color, 20%);
+@layout-trigger-background   : #002140;
 @layout-trigger-color        : #fff;
 @layout-zero-trigger-width   : 36px;
 @layout-zero-trigger-height  : 42px;
@@ -234,23 +242,23 @@
 
 // Input
 // ---
-@input-height-base               : 28px;
-@input-height-lg                 : 32px;
-@input-height-sm                 : 22px;
-@input-padding-horizontal        : 7px;
-@input-padding-horizontal-base   : @input-padding-horizontal;
-@input-padding-horizontal-sm     : @input-padding-horizontal;
-@input-padding-horizontal-lg     : @input-padding-horizontal;
-@input-padding-vertical-base     : 4px;
-@input-padding-vertical-sm       : 1px;
-@input-padding-vertical-lg       : 6px;
-@input-placeholder-color         : hsv(0, 0, 75%);
-@input-color                     : @text-color;
-@input-border-color              : @border-color-base;
-@input-bg                        : #fff;
-@input-addon-bg                  : #eee;
-@input-hover-border-color        : @primary-color;
-@input-disabled-bg               : @disabled-bg;
+@input-height-base           : 32px;
+@input-height-lg             : 40px;
+@input-height-sm             : 24px;
+@input-padding-horizontal    : @control-padding-horizontal - 1px;
+@input-padding-horizontal-base: @input-padding-horizontal;
+@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
+@input-padding-horizontal-lg : @input-padding-horizontal;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-sm   : 1px;
+@input-padding-vertical-lg   : 6px;
+@input-placeholder-color     : hsv(0, 0, 75%);
+@input-color                 : @text-color;
+@input-border-color          : @border-color-base;
+@input-bg                    : #fff;
+@input-addon-bg              : @background-color-light;
+@input-hover-border-color    : @primary-color;
+@input-disabled-bg           : @disabled-bg;
 
 // Tooltip
 // ---
@@ -276,30 +284,29 @@
 //** Popover maximum width
 @popover-min-width: 177px;
 //** Popover arrow width
-@popover-arrow-width: 4px;
+@popover-arrow-width: 5px;
 //** Popover arrow color
 @popover-arrow-color: @popover-bg;
 //** Popover outer arrow width
-@popover-arrow-outer-width: (@popover-arrow-width + 1px);
 //** Popover outer arrow color
-@popover-arrow-outer-color: fadeout(@border-color-base, 30%);
+@popover-arrow-outer-color: @popover-bg;
 //** Popover distance with trigger
 @popover-distance: @popover-arrow-width + 4px;
 
 // Modal
 // --
-@modal-mask-bg: rgba(55, 55, 55, 0.6);
+@modal-mask-bg: rgba(0, 0, 0, 0.65);
 
 // Progress
 // --
-@process-default-color: @primary-color;
+@progress-default-color: @processing-color;
 @progress-remaining-color: @background-color-base;
 
 // Menu
 // ---
 @menu-dark-bg: @layout-header-background;
-@menu-dark-submenu-bg: #333;
-@menu-collapsed-width: 64px;
+@menu-dark-submenu-bg: #000c17;
+@menu-collapsed-width: 80px;
 
 // Spin
 // ---
@@ -309,18 +316,18 @@
 
 // Table
 // --
-@table-header-bg: @background-color-base;
-@table-header-sort-bg: @background-color-active;
+@table-header-bg: @background-color-light;
+@table-header-sort-bg: @background-color-base;
 @table-row-hover-bg: @primary-1;
 @table-selected-row-bg: #fafafa;
 @table-padding-vertical: 16px;
-@table-padding-horizontal: 8px;
+@table-padding-horizontal: 16px;
 
 // Tag
 // --
-@tag-default-bg: #f3f3f3;
+@tag-default-bg: @background-color-light;
 @tag-default-color: @text-color;
-@tag-font-size: @font-size-base;
+@tag-font-size: @font-size-sm;
 
 // TimePicker
 // ---
@@ -337,31 +344,40 @@
 // Badge
 // ---
 @badge-height: 20px;
-@badge-dot-size: 8px;
-@badge-font-size: @font-size-base;
+@badge-dot-size: 6px;
+@badge-font-size: @font-size-sm;
+@badge-status-size: 6px;
 
 // Rate
 // ---
-@rate-star-color: #f5a623;
-@rate-star-bg: #e9e9e9;
+@rate-star-color: @yellow-6;
+@rate-star-bg: @border-color-split;
 
 // Card
 // ---
-@card-head-height: 48px;
 @card-head-color: @heading-color;
 @card-head-background: @component-background;
+@card-head-padding: 16px;
+@card-inner-head-padding: 12px;
+@card-padding-base: 24px;
+@card-padding-wider: 32px;
+@card-actions-background: @background-color-light;
+@card-shadow: 0 2px 8px rgba(0, 0, 0, .09);
 
 // Tabs
 // ---
-@tabs-card-head-background: #f9f9f9;
-@tabs-title-font-size: @font-size-lg;
+@tabs-card-head-background: @background-color-light;
+@tabs-card-height: 40px;
+@tabs-title-font-size: @font-size-base;
 
 // BackTop
+// ---
 @back-top-color: #fff;
-@back-top-bg: rgba(64, 64, 64, 0.4);
-@back-top-hover-bg: rgba(64, 64, 64, 0.6);
+@back-top-bg: @text-color-secondary;
+@back-top-hover-bg: @text-color;
 
 // Avatar
+// ---
 @avatar-size-base: 32px;
 @avatar-size-lg: 40px;
 @avatar-size-sm: 24px;
@@ -371,3 +387,15 @@
 @avatar-bg: #ccc;
 @avatar-color: #fff;
 @avatar-border-radius: @border-radius-base;
+
+// Switch
+// ---
+@switch-height: 22px;
+@switch-sm-height: 16px;
+@switch-disabled-opacity: 0.4;
+@switch-color: @primary-color;
+
+// Pagination
+// ---
+@pagination-item-size: 32px;
+@pagination-item-size-sm: 24px;
diff --git a/components/style/v2-compatible-reset.js b/components/style/v2-compatible-reset.js
new file mode 100644
index 000000000..8fed6241d
--- /dev/null
+++ b/components/style/v2-compatible-reset.js
@@ -0,0 +1 @@
+import './v2-compatible-reset.less';
diff --git a/components/style/v2-compatible-reset.less b/components/style/v2-compatible-reset.less
new file mode 100644
index 000000000..c60350ebb
--- /dev/null
+++ b/components/style/v2-compatible-reset.less
@@ -0,0 +1,14 @@
+// For 2.x reset compatibility
+//   import 'antd/style/v2-compatible-reset';
+//     or
+//   @import '~antd/style/v2-compatible-reset.css';
+// unify the setting of elements's margin and padding for browsers
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+  margin: 0;
+  padding: 0;
+}
+
+ul,
+ol {
+  list-style: none;
+}
diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less
index 7c3e25ca9..174fccc16 100644
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@@ -1,33 +1,32 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
+
 @tab-prefix-cls: ~"@{ant-prefix}-tabs";
 
 // card style
 .@{tab-prefix-cls} {
   &&-card > &-bar &-nav-container {
-    height: 32px;
+    height: @tabs-card-height;
   }
   &&-card > &-bar &-ink-bar {
     visibility: hidden;
   }
   &&-card > &-bar &-tab {
     margin: 0;
-    border: @border-width-base @border-style-base @border-color-base;
+    border: @border-width-base @border-style-base @border-color-split;
     border-bottom: 0;
     border-radius: @border-radius-base @border-radius-base 0 0;
-    transition: all 0.3s @ease-in-out;
     background: @tabs-card-head-background;
     margin-right: 2px;
-  }
-  &&-card > &-bar &-tab {
-    padding: 5px 16px 4px;
+    padding: 0 16px;
     transition: all 0.3s @ease-in-out;
+    line-height: @tabs-card-height - 2px;
   }
   &&-card > &-bar &-tab-active {
     background: @component-background;
-    border-color: @border-color-base;
+    border-color: @border-color-split;
     color: @primary-color;
-    padding-bottom: 5px;
+    padding-bottom: 1px;
   }
   &&-card > &-bar &-tab-inactive {
     padding: 0;
@@ -38,19 +37,14 @@
   &&-card > &-bar &-tab .@{iconfont-css-prefix}-close {
     color: @text-color-secondary;
     transition: all .3s;
-    .iconfont-size-under-12px(10px);
-    margin-right: 0;
-    opacity: 0;
-    position: absolute;
-    right: 2px;
-    top: 50%;
-    margin-top: -5px;
+    font-size: @font-size-sm;
+    margin-left: 3px;
+    margin-right: -5px;
     overflow: hidden;
-    text-align: center;
-    border-radius: 2px;
-    width: 14px;
-    height: 14px;
-    line-height: 1;
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    height: @font-size-base;
     &:hover {
       color: @heading-color;
     }
@@ -69,7 +63,7 @@
   }
 
   &-extra-content {
-    line-height: 32px;
+    line-height: @tabs-card-height;
 
     .@{tab-prefix-cls}-new-tab {
       width: 20px;
@@ -77,11 +71,10 @@
       line-height: 20px;
       text-align: center;
       cursor: pointer;
-      border-radius: @border-radius-base;
-      border: @border-width-base @border-style-base @border-color-base;
-      font-size: @font-size-base;
-      .iconfont-size-under-12px(10px);
-      color: @text-color-secondary;
+      border-radius: @border-radius-sm;
+      border: @border-width-base @border-style-base @border-color-split;
+      font-size: 12px;
+      color: @text-color;
       transition: all .3s;
       &:hover {
         color: @primary-color;
@@ -96,7 +89,7 @@
       height: auto;
     }
     .@{tab-prefix-cls}-tab {
-      border-bottom: @border-width-base @border-style-base @border-color-base;
+      border-bottom: @border-width-base @border-style-base @border-color-split;
       margin-bottom: 8px;
       &-active {
         padding-bottom: 4px;
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index a15b4bc16..160d2fcf7 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -5,11 +5,10 @@
 @import "./card-style";
 
 .@{tab-prefix-cls} {
-  box-sizing: border-box;
+  .reset-component;
   position: relative;
   overflow: hidden;
   .clearfix;
-  color: @text-color;
 
   &-ink-bar {
     z-index: 1;
@@ -23,7 +22,7 @@
   }
 
   &-bar {
-    border-bottom: @border-width-base @border-style-base @border-color-base;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
     margin-bottom: 16px;
     outline: none;
     transition: padding .3s @ease-in-out;
@@ -52,7 +51,6 @@
     z-index: 2;
     width: 0;
     height: 100%;
-    line-height: 32px;
     cursor: pointer;
     border: 0;
     background-color: transparent;
@@ -159,7 +157,7 @@
     .@{tab-prefix-cls}-tab {
       display: inline-block;
       height: 100%;
-      margin-right: 24px;
+      margin-right: 32px;
       box-sizing: border-box;
       position: relative;
 
@@ -167,7 +165,7 @@
         margin-right: 0;
       }
 
-      padding: 8px 20px;
+      padding: 12px 16px;
       transition: color 0.3s @ease-in-out;
       cursor: pointer;
       text-decoration: none;
@@ -179,24 +177,31 @@
       &:active {
         color: @primary-7;
       }
+
       .@{iconfont-css-prefix} {
-        width: 14px;
-        height: 14px;
         margin-right: 8px;
       }
     }
 
     .@{tab-prefix-cls}-tab-active {
       color: @primary-color;
+      font-weight: 500;
     }
   }
 
-  &-mini &-nav-container {
+  &-large &-nav-container {
+    font-size: @font-size-lg;
+  }
+
+  &-large &-tab {
+    padding: 16px;
+  }
+
+  &-small &-nav-container {
     font-size: @font-size-base;
   }
 
-  &-mini &-tab {
-    margin-right: 0;
+  &-small &-tab {
     padding: 8px 16px;
   }
 
@@ -288,15 +293,7 @@
         height: auto;
         top: 0;
       }
-    }
 
-    > .@{tab-prefix-cls}-content {
-      overflow: hidden;
-      width: auto;
-      margin-top: 0 !important;
-    }
-
-    > .@{tab-prefix-cls}-bar {
       .@{tab-prefix-cls}-tab-next {
         width: 100%;
         bottom: 0;
@@ -315,6 +312,12 @@
         }
       }
     }
+
+    > .@{tab-prefix-cls}-content {
+      overflow: hidden;
+      width: auto;
+      margin-top: 0 !important;
+    }
   }
 
   &-vertical&-left {
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index dae1ed5bb..39cc525a5 100644
--- a/components/tooltip/style/index.less
+++ b/components/tooltip/style/index.less
@@ -5,12 +5,11 @@
 
 // Base class
 .@{tooltip-prefix-cls} {
+  .reset-component;
   position: absolute;
   z-index: @zindex-tooltip;
   display: block;
   visibility: visible;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
 
   &-hidden {
     display: none;
@@ -36,31 +35,29 @@
   &-placement-leftBottom {
     padding-right: @tooltip-distance;
   }
-}
 
-// Wrapper for the tooltip content
-.@{tooltip-prefix-cls}-inner {
-  max-width: @tooltip-max-width;
-  padding: 8px 10px;
-  color: @tooltip-color;
-  text-align: left;
-  text-decoration: none;
-  background-color: @tooltip-bg;
-  border-radius: @border-radius-base;
-  box-shadow: @box-shadow-base;
-  min-height: 34px;
-}
+  // Wrapper for the tooltip content
+  &-inner {
+    max-width: @tooltip-max-width;
+    padding: 6px 8px;
+    color: @tooltip-color;
+    text-align: left;
+    text-decoration: none;
+    background-color: @tooltip-bg;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+    min-height: 32px;
+  }
 
-// Arrows
-.@{tooltip-prefix-cls}-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
+  // Arrows
+  &-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
 
-.@{tooltip-prefix-cls} {
   &-placement-top &-arrow,
   &-placement-topLeft &-arrow,
   &-placement-topRight &-arrow {
diff --git a/examples/routes.js b/examples/routes.js
index e34276ff7..03faeafb0 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const com = pathnameArr[1] || 'button'
   const demo = pathnameArr[2] || 'index'
   return {
-    component: import(`../components/${com}/demo/${demo}.vue`),
+    component: import(`../components/radio/demo/${demo}.vue`),
   }
 }
 export default [