diff --git a/packages/cdk/resize/style/index.less b/packages/cdk/resize/style/index.less
index 4651ef7b9..90b5ca1cd 100644
--- a/packages/cdk/resize/style/index.less
+++ b/packages/cdk/resize/style/index.less
@@ -1,6 +1,6 @@
 .cdk-resizable {
   position: relative;
-  
+
   &-handle {
     position: absolute;
     user-select: none;
@@ -22,14 +22,14 @@
 
     &-start {
       width: 10px;
-      height: 100%;
+      height: inherit;
       top: 0;
       left: -5px;
     }
 
     &-end {
       width: 10px;
-      height: 100%;
+      height: inherit;
       top: 0;
       right: -5px;
     }
diff --git a/packages/components/_private/overlay/style/index.less b/packages/components/_private/overlay/style/index.less
index d7160c9b9..495509d4e 100644
--- a/packages/components/_private/overlay/style/index.less
+++ b/packages/components/_private/overlay/style/index.less
@@ -1,4 +1,4 @@
-@import "../../../style/mixins/reset.less";
+@import '../../../style/mixins/reset.less';
 
 .@{overlay-prefix} {
   .reset-component-new();
diff --git a/packages/components/_private/selector/style/index.less b/packages/components/_private/selector/style/index.less
index 579c94e39..d9abead81 100644
--- a/packages/components/_private/selector/style/index.less
+++ b/packages/components/_private/selector/style/index.less
@@ -52,11 +52,24 @@
     overflow: hidden;
     color: @select-placeholder-color;
     position: absolute;
-    right: @select-padding-horizontal-md;
-    left: @select-padding-horizontal-md;
     .ellipsis();
   }
 
+  &-sm &-placeholder {
+    right: @form-new-padding-horizontal-sm;
+    left: @form-new-padding-horizontal-sm;
+  }
+
+  &-md &-placeholder {
+    right: @form-new-padding-horizontal-md;
+    left: @form-new-padding-horizontal-md;
+  }
+
+  &-lg &-placeholder {
+    right: @form-new-padding-horizontal-lg;
+    left: @form-new-padding-horizontal-lg;
+  }
+
   &-sm &-suffix,
   &-sm &-clear {
     .selector-icon(@select-height-sm);
@@ -145,4 +158,4 @@
   font-size: @select-icon-font-size;
   color: @select-icon-color;
   transition: color @transition-duration-base @ease-in-out;
-}
\ No newline at end of file
+}
diff --git a/packages/components/_private/selector/style/single.less b/packages/components/_private/selector/style/single.less
index 17bad692f..626adc633 100644
--- a/packages/components/_private/selector/style/single.less
+++ b/packages/components/_private/selector/style/single.less
@@ -44,14 +44,14 @@
   }
 
   &.@{selector-prefix}-sm {
-    .select-size(@select-height-sm, @select-padding-horizontal-sm, @select-font-size-sm);
+    .select-size(@select-height-sm, @form-new-padding-horizontal-sm, @select-font-size-sm);
   }
 
   &.@{selector-prefix}-md {
-    .select-size(@select-height-md, @select-padding-horizontal-md, @select-font-size-md);
+    .select-size(@select-height-md, @form-new-padding-horizontal-md, @select-font-size-md);
   }
 
   &.@{selector-prefix}-lg {
-    .select-size(@select-height-lg, @select-padding-horizontal-lg, @select-font-size-lg);
+    .select-size(@select-height-lg, @form-new-padding-horizontal-lg, @select-font-size-lg);
   }
 }
diff --git a/packages/components/_private/trigger/style/index.less b/packages/components/_private/trigger/style/index.less
index a5c446bfc..e72455510 100644
--- a/packages/components/_private/trigger/style/index.less
+++ b/packages/components/_private/trigger/style/index.less
@@ -26,15 +26,15 @@
   @icon-padding: @trigger-icon-margin-left + @trigger-icon-margin-right;
 
   &-sm {
-    .trigger-size(@trigger-height-sm, @trigger-padding-vertical-sm, @trigger-padding-horizontal-sm, @trigger-font-size-sm);
+    .trigger-size(@trigger-height-sm, @trigger-padding-vertical-sm, @form-new-padding-horizontal-sm, @trigger-font-size-sm);
   }
 
   &-md {
-    .trigger-size(@trigger-height-md, @trigger-padding-vertical-md, @trigger-padding-horizontal-md, @trigger-font-size-md);
+    .trigger-size(@trigger-height-md, @trigger-padding-vertical-md, @form-new-padding-horizontal-md, @trigger-font-size-md);
   }
 
   &-lg {
-    .trigger-size(@trigger-height-lg, @trigger-padding-vertical-lg, @trigger-padding-horizontal-lg, @trigger-font-size-lg);
+    .trigger-size(@trigger-height-lg, @trigger-padding-vertical-lg, @form-new-padding-horizontal-lg, @trigger-font-size-lg);
   }
 
   &:hover:not(&-disabled):not(&-borderless) {
diff --git a/packages/components/_private/trigger/style/themes/default.ts b/packages/components/_private/trigger/style/themes/default.ts
index 47fe656f7..290ba717c 100644
--- a/packages/components/_private/trigger/style/themes/default.ts
+++ b/packages/components/_private/trigger/style/themes/default.ts
@@ -1,3 +1,4 @@
 // style dependencies
+import '@idux/components/icon/style/themes/default'
 
 import './default.less'
diff --git a/packages/components/_private/trigger/style/themes/default.variable.less b/packages/components/_private/trigger/style/themes/default.variable.less
index 722b03e7a..16d7cedca 100644
--- a/packages/components/_private/trigger/style/themes/default.variable.less
+++ b/packages/components/_private/trigger/style/themes/default.variable.less
@@ -5,9 +5,6 @@
 @trigger-height-sm: @form-height-sm;
 @trigger-height-md: @form-height-md;
 @trigger-height-lg: @form-height-lg;
-@trigger-padding-horizontal-sm: @form-padding-horizontal-sm;
-@trigger-padding-horizontal-md: @form-padding-horizontal-md;
-@trigger-padding-horizontal-lg: @form-padding-horizontal-lg;
 @trigger-padding-vertical-sm: @form-padding-vertical-sm;
 @trigger-padding-vertical-md: @form-padding-vertical-md;
 @trigger-padding-vertical-lg: @form-padding-vertical-lg;
diff --git a/packages/components/_private/trigger/style/themes/seer.ts b/packages/components/_private/trigger/style/themes/seer.ts
index 8f61ab076..4f3afb4c4 100644
--- a/packages/components/_private/trigger/style/themes/seer.ts
+++ b/packages/components/_private/trigger/style/themes/seer.ts
@@ -1,3 +1,4 @@
 // style dependencies
+import '@idux/components/icon/style/themes/seer'
 
 import './seer.less'
diff --git a/packages/components/_private/trigger/style/themes/seer.variable.less b/packages/components/_private/trigger/style/themes/seer.variable.less
index 498793af1..2dbf39c14 100644
--- a/packages/components/_private/trigger/style/themes/seer.variable.less
+++ b/packages/components/_private/trigger/style/themes/seer.variable.less
@@ -1 +1,6 @@
 @import './default.variable.less';
+
+@trigger-icon-margin-right: @spacing-sm;
+@trigger-icon-font-size: @font-size-lg;
+@trigger-icon-color: @color-graphite-l10;
+@trigger-clear-icon-color: @color-graphite-d20;
diff --git a/packages/components/breadcrumb/style/index.less b/packages/components/breadcrumb/style/index.less
index f37151937..957b474ba 100644
--- a/packages/components/breadcrumb/style/index.less
+++ b/packages/components/breadcrumb/style/index.less
@@ -24,7 +24,7 @@
   }
 
   &-item {
-    display: inline-block;
+    display: inline-flex;
 
     &-separator {
       margin: @breadcrumb-separator-margin;
diff --git a/packages/components/card/style/themes/default.ts b/packages/components/card/style/themes/default.ts
index a38f13af8..883bf4d44 100644
--- a/packages/components/card/style/themes/default.ts
+++ b/packages/components/card/style/themes/default.ts
@@ -3,5 +3,6 @@
 import '@idux/components/button/style/themes/default'
 import '@idux/components/grid/style/themes/default'
 import '@idux/components/header/style/themes/default'
+import '@idux/components/icon/style/themes/default'
 
 import './default.less'
diff --git a/packages/components/card/style/themes/seer.ts b/packages/components/card/style/themes/seer.ts
index 9b8119388..1ea7b62ff 100644
--- a/packages/components/card/style/themes/seer.ts
+++ b/packages/components/card/style/themes/seer.ts
@@ -3,5 +3,6 @@
 import '@idux/components/button/style/themes/seer'
 import '@idux/components/grid/style/themes/seer'
 import '@idux/components/header/style/themes/seer'
+import '@idux/components/icon/style/themes/seer'
 
 import './seer.less'
diff --git a/packages/components/date-picker/style/themes/default.ts b/packages/components/date-picker/style/themes/default.ts
index 5597435d5..cb6538304 100644
--- a/packages/components/date-picker/style/themes/default.ts
+++ b/packages/components/date-picker/style/themes/default.ts
@@ -1,6 +1,7 @@
 // style dependencies
 
 import '@idux/components/_private/overlay/style/themes/default'
+import '@idux/components/_private/trigger/style/themes/default'
 import '@idux/components/icon/style/themes/default'
 import '@idux/components/input/style/themes/default'
 
diff --git a/packages/components/date-picker/style/themes/seer.ts b/packages/components/date-picker/style/themes/seer.ts
index 1d6addce8..af77436ca 100644
--- a/packages/components/date-picker/style/themes/seer.ts
+++ b/packages/components/date-picker/style/themes/seer.ts
@@ -1,6 +1,8 @@
 // style dependencies
 
 import '@idux/components/_private/overlay/style/themes/seer'
+import '@idux/components/_private/trigger/style/themes/seer'
 import '@idux/components/icon/style/themes/seer'
+import '@idux/components/input/style/themes/seer'
 
 import './seer.less'
diff --git a/packages/components/form/docs/Theme.zh.md b/packages/components/form/docs/Theme.zh.md
index f7c7d4094..8002ab269 100644
--- a/packages/components/form/docs/Theme.zh.md
+++ b/packages/components/form/docs/Theme.zh.md
@@ -9,9 +9,9 @@
 | `@form-height-sm` | `@height-sm` | - | - |
 | `@form-height-md` | `@height-md` | - | - |
 | `@form-height-lg` | `@height-lg` | - | - |
-| `@form-padding-horizontal-sm` | `@spacing-sm - 2px` | - | - |
-| `@form-padding-horizontal-md` | `@spacing-md` | - | - |
-| `@form-padding-horizontal-lg` | `@spacing-sm + 2px` | - | - |
+| `@form-padding-horizontal-sm` | `7px` | `11px` | - |
+| `@form-padding-horizontal-md` | `11px` | - | - |
+| `@form-padding-horizontal-lg` | `11px` | - | - |
 | `@form-padding-vertical-sm` | `max(  (round(((@form-height-sm - @form-font-size-sm * @form-line-height) / 2) * 10) / 10) - @form-border-width,  0)` | - | - |
 | `@form-padding-vertical-md` | `max(  (round(((@form-height-md - @form-font-size-md * @form-line-height) / 2) * 10) / 10) - @form-border-width,  2px)` | - | - |
 | `@form-padding-vertical-lg` | `(ceil(((@form-height-lg - @form-font-size-lg * @form-line-height) / 2) * 10) / 10) -  @form-border-width` | - | - |
@@ -36,6 +36,31 @@
 | `@form-disabled-background-color` | `var(--ix-background-color-deep)` | - | - |
 | `@form-icon-color` | `@color-graphite-d20` | - | - |
 | `@form-icon-hover-color` | `@color-graphite-d20` | `@color-primary` | - |
+| `@form-new-height-sm` | `var(--ix-height-sm)` | - | - |
+| `@form-new-height-md` | `var(--ix-height-md)` | - | - |
+| `@form-new-height-lg` | `var(--ix-height-lg)` | - | - |
+| `@form-new-padding-horizontal-sm` | `7px` | - | - |
+| `@form-new-padding-horizontal-md` | `11px` | - | - |
+| `@form-new-padding-horizontal-lg` | `11px` | - | - |
+| `@form-new-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
+| `@form-new-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@form-new-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
+| `@form-new-border-radius-sm` | `var(--ix-border-radius-sm)` | - | - |
+| `@form-new-border-radius-md` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
+| `@form-new-border-radius-lg` | `var(--ix-border-radius-lg)` | `var(--ix-border-radius-sm)` | - |
+| `@form-new-placeholder-color` | `var(--ix-text-color-disabled)` | - | - |
+| `@form-new-color` | `var(--ix-text-color)` | - | - |
+| `@form-new-color-invalid` | `var(--ix-color-red)` | - | - |
+| `@form-new-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
+| `@form-new-background-color` | `var(--ix-background-color)` | - | - |
+| `@form-new-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
+| `@form-new-border-color` | `var(--ix-border-color)` | - | - |
+| `@form-new-border-color-focus` | `var(--ix-color-primary)` | - | - |
+| `@form-new-box-shadow-focus` | `0 0 0 2px fade(@color-primary, 20%)` | - | - |
+| `@form-new-box-shadow-invalid` | `0 0 0 2px fade(@color-red, 20%)` | - | - |
+| `@form-new-icon-color` | `var(--ix-text-color-title-secondary)` | - | - |
+| `@form-new-icon-color-hover` | `var(--ix-color-primary)` | - | - |
+| `@form-new-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
 | `@form-item-valid-color` | `@color-success` | `@color-success-d10` | - |
 | `@form-item-validating-color` | `@color-pending` | `@color-pending-d10` | - |
 | `@form-item-invalid-color` | `@color-error` | `@color-error-d10` | - |
diff --git a/packages/components/form/style/themes/default.variable.less b/packages/components/form/style/themes/default.variable.less
index 120a999e0..4b85807f9 100644
--- a/packages/components/form/style/themes/default.variable.less
+++ b/packages/components/form/style/themes/default.variable.less
@@ -7,9 +7,9 @@
 @form-height-sm: @height-sm;
 @form-height-md: @height-md;
 @form-height-lg: @height-lg;
-@form-padding-horizontal-sm: @spacing-sm - 2px;
-@form-padding-horizontal-md: @spacing-md;
-@form-padding-horizontal-lg: @spacing-sm + 2px;
+@form-padding-horizontal-sm: 7px;
+@form-padding-horizontal-md: 11px;
+@form-padding-horizontal-lg: 11px;
 @form-padding-vertical-sm: max(
   (round(((@form-height-sm - @form-font-size-sm * @form-line-height) / 2) * 10) / 10) - @form-border-width,
   0
@@ -43,6 +43,42 @@
 @form-disabled-background-color: var(--ix-background-color-deep);
 @form-icon-color: @color-graphite-d20;
 @form-icon-hover-color: @color-graphite-d20;
+
+@form-new-height-sm: var(--ix-height-sm);
+@form-new-height-md: var(--ix-height-md);
+@form-new-height-lg: var(--ix-height-lg);
+
+@form-new-padding-horizontal-sm: 7px;
+@form-new-padding-horizontal-md: 11px;
+@form-new-padding-horizontal-lg: 11px;
+
+@form-new-font-size-sm: var(--ix-font-size-sm);
+@form-new-font-size-md: var(--ix-font-size-md);
+@form-new-font-size-lg: var(--ix-font-size-lg);
+
+@form-new-border-radius-sm: var(--ix-border-radius-sm);
+@form-new-border-radius-md: var(--ix-border-radius-md);
+@form-new-border-radius-lg: var(--ix-border-radius-lg);
+
+@form-new-placeholder-color: var(--ix-text-color-disabled);
+
+@form-new-color: var(--ix-text-color);
+@form-new-color-invalid: var(--ix-color-red);
+@form-new-color-disabled: var(--ix-text-color-disabled);
+
+@form-new-background-color: var(--ix-background-color);
+@form-new-background-color-disabled: var(--ix-background-color-deep);
+
+@form-new-border-color: var(--ix-border-color);
+@form-new-border-color-focus: var(--ix-color-primary);
+
+@form-new-box-shadow-focus: 0 0 0 2px fade(@color-primary, 20%);
+@form-new-box-shadow-invalid: 0 0 0 2px fade(@color-red, 20%);
+
+@form-new-icon-color: var(--ix-text-color-title-secondary);
+@form-new-icon-color-hover: var(--ix-color-primary);
+@form-new-icon-font-size: var(--ix-font-size-lg);
+
 // input common end
 
 @form-item-valid-color: @color-success;
diff --git a/packages/components/form/style/themes/seer.variable.less b/packages/components/form/style/themes/seer.variable.less
index 0694c9c36..2e1c139a8 100644
--- a/packages/components/form/style/themes/seer.variable.less
+++ b/packages/components/form/style/themes/seer.variable.less
@@ -5,6 +5,17 @@
 @form-font-size-md: @font-size-sm;
 @form-font-size-lg: @font-size-md;
 
+@form-padding-horizontal-sm: 11px;
+
+@form-new-padding-horizontal-sm: 11px;
+
+@form-new-font-size-sm: var(--ix-font-size-sm);
+@form-new-font-size-md: var(--ix-font-size-sm);
+@form-new-font-size-lg: var(--ix-font-size-md);
+
+@form-new-border-radius-md: var(--ix-border-radius-sm);
+@form-new-border-radius-lg: var(--ix-border-radius-sm);
+
 @form-item-valid-color: @color-success-d10;
 @form-item-validating-color: @color-pending-d10;
 @form-item-invalid-color: @color-error-d10;
diff --git a/packages/components/input-number/docs/Theme.zh.md b/packages/components/input-number/docs/Theme.zh.md
index 695e77784..f74ff3132 100644
--- a/packages/components/input-number/docs/Theme.zh.md
+++ b/packages/components/input-number/docs/Theme.zh.md
@@ -1,5 +1,2 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@input-number-color-disabled` | `@input-color-disabled` | - | - |
-| `@input-number-icon-color-hover` | `@input-icon-color-hover` | - | - |
-| `@input-number-invalid-color` | `@form-invalid-color` | - | - |
diff --git a/packages/components/input-number/style/index.less b/packages/components/input-number/style/index.less
index c794d3a84..3d58b2f04 100644
--- a/packages/components/input-number/style/index.less
+++ b/packages/components/input-number/style/index.less
@@ -18,12 +18,12 @@
     transition: color var(--ix-transition-duration-fast);
 
     &:hover {
-      color: @input-number-icon-color-hover;
+      color: @form-new-icon-color-hover;
     }
 
     &&-disabled {
       cursor: not-allowed;
-      color: @input-number-color-disabled;
+      color: @form-new-color-disabled;
     }
   }
 
@@ -33,7 +33,7 @@
 
   &-illegal {
     .@{input-prefix}-inner {
-      color: @input-number-invalid-color;
+      color: @form-new-color-invalid;
     }
   }
 
diff --git a/packages/components/input-number/style/themes/default.variable.less b/packages/components/input-number/style/themes/default.variable.less
index db4e47b51..e69de29bb 100644
--- a/packages/components/input-number/style/themes/default.variable.less
+++ b/packages/components/input-number/style/themes/default.variable.less
@@ -1,3 +0,0 @@
-@input-number-color-disabled: @input-color-disabled;
-@input-number-icon-color-hover: @input-icon-color-hover;
-@input-number-invalid-color: @form-invalid-color;
diff --git a/packages/components/input/demo/Addon.vue b/packages/components/input/demo/Addon.vue
index 30ef68887..ce7383033 100644
--- a/packages/components/input/demo/Addon.vue
+++ b/packages/components/input/demo/Addon.vue
@@ -3,13 +3,13 @@
     <IxInput v-model:value="value" :addonBefore="addonBefore" :addonAfter="addonAfter" />
     <IxInput v-model:value="value">
       <template #addonBefore>
-        <IxSelect v-model:value="addonBefore" style="width: 88px">
+        <IxSelect v-model:value="addonBefore" style="width: 80px">
           <IxSelectOption key="https" label="https://"></IxSelectOption>
           <IxSelectOption key="http" label="http://"></IxSelectOption>
         </IxSelect>
       </template>
       <template #addonAfter>
-        <IxSelect v-model:value="addonAfter" style="width: 72px">
+        <IxSelect v-model:value="addonAfter" style="width: 64px">
           <IxSelectOption key="com" label=".com"></IxSelectOption>
           <IxSelectOption key="cn" label=".cn"></IxSelectOption>
         </IxSelect>
diff --git a/packages/components/input/demo/PrefixSuffix.vue b/packages/components/input/demo/PrefixSuffix.vue
index 69e03a313..304c42b2a 100644
--- a/packages/components/input/demo/PrefixSuffix.vue
+++ b/packages/components/input/demo/PrefixSuffix.vue
@@ -1,6 +1,6 @@
 <template>
   <IxSpace vertical>
-    <IxInput prefix="user" suffix="info-circle" placeholder="Prefix and suffix" />
+    <IxInput prefix="user" size="sm" clearable suffix="info-circle" placeholder="Prefix and suffix" />
     <IxInput placeholder="Prefix and suffix">
       <template #prefix><span>￥</span></template>
       <template #suffix><span>RMB</span></template>
diff --git a/packages/components/input/docs/Theme.zh.md b/packages/components/input/docs/Theme.zh.md
index fe32f30da..219efece6 100644
--- a/packages/components/input/docs/Theme.zh.md
+++ b/packages/components/input/docs/Theme.zh.md
@@ -1,23 +1,3 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@input-height-sm` | `var(--ix-height-sm)` | - | - |
-| `@input-height-md` | `var(--ix-height-md)` | - | - |
-| `@input-height-lg` | `var(--ix-height-lg)` | - | - |
-| `@input-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
-| `@input-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
-| `@input-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
-| `@input-border-radius-sm` | `var(--ix-border-radius-sm)` | - | - |
-| `@input-border-radius-md` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
-| `@input-border-radius-lg` | `var(--ix-border-radius-lg)` | `var(--ix-border-radius-sm)` | - |
-| `@input-color` | `var(--ix-text-color)` | - | - |
-| `@input-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
-| `@input-placeholder-color` | `@form-placeholder-color` | - | - |
-| `@input-background-color` | `var(--ix-background-color)` | - | - |
-| `@input-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
-| `@input-border-color` | `var(--ix-border-color)` | - | - |
-| `@input-border-color-focus` | `var(--ix-color-primary)` | - | - |
-| `@input-box-shadow-focus` | `0 0 0 2px fade(@color-primary, 20%)` | - | - |
-| `@input-icon-color` | `var(--ix-text-color-title-secondary)` | - | - |
-| `@input-icon-color-hover` | `var(--ix-color-primary)` | - | - |
-| `@input-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
 | `@input-addon-background-color` | `var(--ix-background-color-light)` | - | - |
diff --git a/packages/components/input/src/Input.tsx b/packages/components/input/src/Input.tsx
index 113813335..80c2ce732 100644
--- a/packages/components/input/src/Input.tsx
+++ b/packages/components/input/src/Input.tsx
@@ -65,11 +65,12 @@ export default defineComponent({
           disabled={accessor.disabled}
           focused={isFocused.value}
           prefix={prefix}
+          readonly={props.readonly}
           size={mergedSize.value}
           status={mergedStatus.value}
           suffix={suffix}
+          value={accessor.value}
           onClear={handleClear}
-          readonly={props.readonly}
           onInput={handleInput}
           onCompositionstart={handleCompositionStart}
           onCompositionend={handleCompositionEnd}
diff --git a/packages/components/input/style/index.less b/packages/components/input/style/index.less
index 57219d4a8..fd71df570 100644
--- a/packages/components/input/style/index.less
+++ b/packages/components/input/style/index.less
@@ -4,18 +4,18 @@
 
 .@{input-prefix} {
   .reset-component-new();
-  .reset-color(@input-color, @input-background-color);
+  .reset-color(@form-new-color, @form-new-background-color);
 
   &-sm {
-    .input-size(@input-height-sm, @input-font-size-sm, @input-border-radius-sm);
+    .input-size(@form-new-height-sm, @form-new-font-size-sm, @form-new-padding-horizontal-sm, @form-new-border-radius-sm);
   }
 
   &-md {
-    .input-size(@input-height-md, @input-font-size-md, @input-border-radius-md);
+    .input-size(@form-new-height-md, @form-new-font-size-md, @form-new-padding-horizontal-md, @form-new-border-radius-md);
   }
 
   &-lg {
-    .input-size(@input-height-lg, @input-font-size-lg, @input-border-radius-lg);
+    .input-size(@form-new-height-lg, @form-new-font-size-lg, @form-new-padding-horizontal-lg, @form-new-border-radius-lg);
   }
 
   &,
@@ -26,18 +26,18 @@
   &:hover,
   &-inner:hover,
   &-wrapper:hover {
-    border-color: @input-border-color-focus;
+    border-color: @form-new-border-color-focus;
   }
 
   &:focus,
   &-focused {
-    border-color: @input-border-color-focus;
-    box-shadow: @input-box-shadow-focus;
+    border-color: @form-new-border-color-focus;
+    box-shadow: @form-new-box-shadow-focus;
 
     .@{input-prefix}-inner,
     .@{input-prefix}-wrapper {
-      border-color: @input-border-color-focus;
-      box-shadow: @input-box-shadow-focus;
+      border-color: @form-new-border-color-focus;
+      box-shadow: @form-new-box-shadow-focus;
     }
   }
 
@@ -87,30 +87,6 @@
     transition: all var(--ix-transition-duration-fast) var(--ix-ease-in-out);
   }
 
-  &,
-  &-wrapper,
-  &-inner {
-    // border-width: 1px
-    padding: 0 7px 0 11px;
-  }
-
-  &-addon {
-    padding: 0 11px;
-
-    .@{selector-prefix} {
-      margin: 0 -11px;
-    }
-  }
-
-  &-clear {
-    right: 7px;
-  }
-
-  &-clearable:not(&-with-suffix) &-inner {
-    // icon-font-size + 4px
-    padding-right: 20px;
-  }
-
   &-with-addon-after,
   &-with-addon-before {
     display: inline-flex;
@@ -123,11 +99,21 @@
     }
   }
 
+  &-with-addon-before &-inner {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-with-addon-after &-inner {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   &-addon {
     display: inline-block;
     text-align: center;
     background-color: @input-addon-background-color;
-    border: 1px solid @input-border-color;
+    border: 1px solid @form-new-border-color;
     white-space: nowrap;
 
     &:first-child {
@@ -163,6 +149,12 @@
         box-shadow: none;
       }
 
+      // TODO: select 那边要去掉这两个样式
+      &-item {
+        left: unset !important;
+        width: unset !important;
+      }
+
       &-item-label {
         width: 100%;
       }
@@ -189,8 +181,8 @@
   &-prefix {
     display: inline-flex;
     align-items: center;
-    color: @input-icon-color;
-    font-size: @input-icon-font-size;
+    color: @form-new-icon-color;
+    font-size: @form-new-icon-font-size;
   }
 
   &-prefix {
@@ -202,18 +194,23 @@
     cursor: pointer;
   }
 
+  &-clearable:not(&-with-suffix) &-inner {
+    padding-right: @form-new-icon-font-size;
+  }
+
   &-clear {
     position: absolute;
     z-index: 1;
-    color: @input-icon-color;
-    font-size: @input-icon-font-size;
+    right: 7px;
+    color: @form-new-icon-color;
+    font-size: @form-new-icon-font-size;
     cursor: pointer;
     opacity: 0;
-    background: @input-background-color;
+    background: @form-new-background-color;
     transition: all var(--ix-transition-duration-fast) var(--ix-ease-in-out);
 
     &:hover {
-      color: @input-icon-color-hover;
+      color: @form-new-icon-color-hover;
     }
 
     &.visible {
@@ -226,7 +223,7 @@
     display: inline-flex;
     align-items: center;
     width: 100%;
-    border: 1px solid @input-border-color;
+    border: 1px solid @form-new-border-color;
 
     .@{input-prefix}-inner {
       padding: 0;
@@ -237,25 +234,25 @@
 
   // form status
   &&-invalid {
-    border-color: @form-invalid-color;
+    border-color: @form-new-color-invalid;
 
     &:hover {
-      border-color: @form-invalid-color;
+      border-color: @form-new-color-invalid;
     }
 
     .@{input-prefix}-wrapper,
     .@{input-prefix}-inner {
-      border-color: @form-invalid-color;
+      border-color: @form-new-color-invalid;
 
       &:hover {
-        border-color: @form-invalid-color;
+        border-color: @form-new-color-invalid;
       }
     }
 
     &:focus,
     &.@{input-prefix}-focused {
-      border-color: @form-invalid-color;
-      box-shadow: @form-invalid-box-shadow;
+      border-color: @form-new-color-invalid;
+      box-shadow: @form-new-box-shadow-invalid;
 
       .@{input-prefix}-wrapper,
       .@{input-prefix}-inner {
@@ -264,8 +261,8 @@
     }
 
     .@{input-prefix}-addon {
-      color: @form-invalid-color;
-      border-color: @form-invalid-color;
+      color: @form-new-color-invalid;
+      border-color: @form-new-color-invalid;
 
       .@{selector-prefix} {
         &:hover &-content,
diff --git a/packages/components/input/style/mixin.less b/packages/components/input/style/mixin.less
index 7c8c3bb8b..d3665d4d9 100644
--- a/packages/components/input/style/mixin.less
+++ b/packages/components/input/style/mixin.less
@@ -4,22 +4,40 @@
   width: 100%;
   min-width: 0;
   outline: 0;
-  color: @input-color;
-  border: 1px solid @input-border-color;
+  color: @form-new-color;
+  border: 1px solid @form-new-border-color;
 
   &[disabled] {
     cursor: not-allowed;
   }
 
-  .placeholder(@input-placeholder-color);
+  .placeholder(@form-new-placeholder-color);
 }
 
-.input-size(@height, @font-size, @border-radius) {
+.input-size(@height, @font-size, @padding-horizontal, @border-radius) {
   .reset-font-size(@font-size);
 
   height: @height;
 
   &,
+  .@{input-prefix}-addon,
+  .@{input-prefix}-inner,
+  .@{input-prefix}-wrapper {
+    padding: 0 @padding-horizontal;
+  }
+
+  .@{input-prefix}-suffix {
+    margin-right: calc(7px - @padding-horizontal);
+  }
+
+  .@{input-prefix}-addon {
+    .@{selector-prefix} {
+      margin: -5px -@padding-horizontal;
+    }
+  }
+
+  &,
+  .@{input-prefix}-inner,
   .@{input-prefix}-addon {
     border-radius: @border-radius;
   }
@@ -31,13 +49,13 @@
 }
 
 .input-disabled() {
-  color: @input-color-disabled;
-  background-color: @input-background-color-disabled;
-  border-color: @input-border-color;
+  color: @form-new-color-disabled;
+  background-color: @form-new-background-color-disabled;
+  border-color: @form-new-border-color;
   box-shadow: none;
   cursor: not-allowed;
 
   &:hover {
-    border-color: @input-border-color;
+    border-color: @form-new-border-color;
   }
 }
diff --git a/packages/components/input/style/themes/default.variable.less b/packages/components/input/style/themes/default.variable.less
index 19c0dac65..06ca978a6 100644
--- a/packages/components/input/style/themes/default.variable.less
+++ b/packages/components/input/style/themes/default.variable.less
@@ -1,29 +1 @@
-@input-height-sm: var(--ix-height-sm);
-@input-height-md: var(--ix-height-md);
-@input-height-lg: var(--ix-height-lg);
-
-@input-font-size-sm: var(--ix-font-size-sm);
-@input-font-size-md: var(--ix-font-size-md);
-@input-font-size-lg: var(--ix-font-size-lg);
-
-@input-border-radius-sm: var(--ix-border-radius-sm);
-@input-border-radius-md: var(--ix-border-radius-md);
-@input-border-radius-lg: var(--ix-border-radius-lg);
-
-@input-color: var(--ix-text-color);
-@input-color-disabled: var(--ix-text-color-disabled);
-@input-placeholder-color: @form-placeholder-color;
-
-@input-background-color: var(--ix-background-color);
-@input-background-color-disabled: var(--ix-background-color-deep);
-
-@input-border-color: var(--ix-border-color);
-@input-border-color-focus: var(--ix-color-primary);
-
-@input-box-shadow-focus: 0 0 0 2px fade(@color-primary, 20%);
-
-@input-icon-color: var(--ix-text-color-title-secondary);
-@input-icon-color-hover: var(--ix-color-primary);
-@input-icon-font-size: var(--ix-font-size-lg);
-
 @input-addon-background-color: var(--ix-background-color-light);
diff --git a/packages/components/input/style/themes/seer.variable.less b/packages/components/input/style/themes/seer.variable.less
index e51089fb7..498793af1 100644
--- a/packages/components/input/style/themes/seer.variable.less
+++ b/packages/components/input/style/themes/seer.variable.less
@@ -1,8 +1 @@
 @import './default.variable.less';
-
-@input-font-size-sm: var(--ix-font-size-sm);
-@input-font-size-md: var(--ix-font-size-sm);
-@input-font-size-lg: var(--ix-font-size-md);
-
-@input-border-radius-md: var(--ix-border-radius-sm);
-@input-border-radius-lg: var(--ix-border-radius-sm);
diff --git a/packages/components/locales/src/langs/en-US.ts b/packages/components/locales/src/langs/en-US.ts
index 6b2279ec0..a53eb43ef 100644
--- a/packages/components/locales/src/langs/en-US.ts
+++ b/packages/components/locales/src/langs/en-US.ts
@@ -67,8 +67,8 @@ const enUS: Locale = {
     totalSuffix: 'entries in total',
   },
   popconfirm: {
-    cancelText: 'No',
-    okText: 'Yes',
+    cancelText: 'Cancel',
+    okText: 'OK',
   },
   select: {
     limitMessage: 'Select ${0} or fewer items',
diff --git a/packages/components/menu/docs/Theme.zh.md b/packages/components/menu/docs/Theme.zh.md
index f9dea866a..db7503482 100644
--- a/packages/components/menu/docs/Theme.zh.md
+++ b/packages/components/menu/docs/Theme.zh.md
@@ -10,8 +10,8 @@
 | `@menu-background-color-disabled` | `var(--ix-background-color)` | - | - |
 | `@menu-horizontal-background-color-active` | `var(--ix-background-color-medium)` | - | - |
 | `@menu-border-color` | `var(--ix-border-color-secondary)` | - | - |
-| `@menu-height` | `var(--ix-height-md)` | `36px` | - |
-| `@menu-height-level-1` | `var(--ix-height-lg)` | `44px` | - |
+| `@menu-height` | `var(--ix-height-md)` | - | - |
+| `@menu-height-level-1` | `var(--ix-height-lg)` | `40px` | - |
 | `@menu-border-radius` | `var(--ix-border-radius-md)` | `0` | - |
 | `@menu-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
 | `@menu-font-size-level-1` | `var(--ix-font-size-md)` | - | - |
diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less
index 5578d6bbb..f0a9dc238 100644
--- a/packages/components/modal/style/index.less
+++ b/packages/components/modal/style/index.less
@@ -69,7 +69,7 @@
       &-only-title {
         align-items: center;
         flex-direction: row;
-        justify-content: start;
+        justify-content: flex-start;
 
         .@{modal-prefix}-body-title {
           margin-bottom: 0;
diff --git a/packages/components/popconfirm/style/index.less b/packages/components/popconfirm/style/index.less
index 652ff162e..3cd5ecd15 100644
--- a/packages/components/popconfirm/style/index.less
+++ b/packages/components/popconfirm/style/index.less
@@ -48,7 +48,7 @@
   &-footer {
     display: flex;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end;
     padding: 8px 16px;
 
     .@{button-prefix} + .@{button-prefix} {
diff --git a/packages/components/select/docs/Theme.zh.md b/packages/components/select/docs/Theme.zh.md
index 33daa009b..0bc12c072 100644
--- a/packages/components/select/docs/Theme.zh.md
+++ b/packages/components/select/docs/Theme.zh.md
@@ -7,9 +7,6 @@
 | `@select-height-sm` | `@form-height-sm` | - | - |
 | `@select-height-md` | `@form-height-md` | - | - |
 | `@select-height-lg` | `@form-height-lg` | - | - |
-| `@select-padding-horizontal-sm` | `@form-padding-horizontal-sm` | `12px` | - |
-| `@select-padding-horizontal-md` | `@form-padding-horizontal-md` | `12px` | - |
-| `@select-padding-horizontal-lg` | `@form-padding-horizontal-lg` | `12px` | - |
 | `@select-padding-vertical-sm` | `@form-padding-vertical-sm` | - | - |
 | `@select-padding-vertical-md` | `@form-padding-vertical-md` | - | - |
 | `@select-padding-vertical-lg` | `@form-padding-vertical-lg` | - | - |
diff --git a/packages/components/select/style/themes/default.variable.less b/packages/components/select/style/themes/default.variable.less
index 3dd5726f1..64a3c4f9e 100644
--- a/packages/components/select/style/themes/default.variable.less
+++ b/packages/components/select/style/themes/default.variable.less
@@ -5,9 +5,7 @@
 @select-height-sm: @form-height-sm;
 @select-height-md: @form-height-md;
 @select-height-lg: @form-height-lg;
-@select-padding-horizontal-sm: @form-padding-horizontal-sm;
-@select-padding-horizontal-md: @form-padding-horizontal-md;
-@select-padding-horizontal-lg: @form-padding-horizontal-lg;
+
 @select-padding-vertical-sm: @form-padding-vertical-sm;
 @select-padding-vertical-md: @form-padding-vertical-md;
 @select-padding-vertical-lg: @form-padding-vertical-lg;
diff --git a/packages/components/select/style/themes/seer.variable.less b/packages/components/select/style/themes/seer.variable.less
index 716bcc8ef..d8d3a28c1 100644
--- a/packages/components/select/style/themes/seer.variable.less
+++ b/packages/components/select/style/themes/seer.variable.less
@@ -1,12 +1,8 @@
-@import './default.variable.less'; 
+@import './default.variable.less';
 
 @select-font-size-lg: @form-font-size-md;
 @select-font-size-md: @form-font-size-sm;
 
-@select-padding-horizontal-sm: 12px;
-@select-padding-horizontal-md: 12px;
-@select-padding-horizontal-lg: 12px;
-
 @select-icon-color: @color-graphite-l10;
 @select-icon-hover-color: @color-primary;
 @select-icon-font-size: @font-size-lg;
diff --git a/packages/components/style/motion/fade.less b/packages/components/style/motion/fade.less
index e5107a2e1..b8a39818b 100644
--- a/packages/components/style/motion/fade.less
+++ b/packages/components/style/motion/fade.less
@@ -8,7 +8,9 @@
     transition-timing-function: linear;
   }
 
+  .@{idux-prefix}-@{className}-enter,
   .@{idux-prefix}-@{className}-enter-from,
+  .@{idux-prefix}-@{className}-leave,
   .@{idux-prefix}-@{className}-leave-to {
     opacity: 0;
   }
@@ -18,7 +20,7 @@
 .fade-motion(fade-fast, @transition-duration-fast);
 
 .@{idux-prefix}-fade-down {
-  &-enter-active{
+  &-enter-active {
     transition: opacity @transition-duration-fast @ease-in-out, transform @transition-duration-fast @ease-in-out;
   }
 
diff --git a/packages/components/style/motion/move.less b/packages/components/style/motion/move.less
index 43f89dc59..66d247cd0 100644
--- a/packages/components/style/motion/move.less
+++ b/packages/components/style/motion/move.less
@@ -15,7 +15,9 @@
     transition-timing-function: @ease-in-circ;
   }
 
+  .@{idux-prefix}-@{className}-enter,
   .@{idux-prefix}-@{className}-enter-from,
+  .@{idux-prefix}-@{className}-leave,
   .@{idux-prefix}-@{className}-leave-to {
     transform: @translate;
     opacity: 0;
diff --git a/packages/components/style/motion/zoom.less b/packages/components/style/motion/zoom.less
index 94620f184..a1a682e5d 100644
--- a/packages/components/style/motion/zoom.less
+++ b/packages/components/style/motion/zoom.less
@@ -17,6 +17,7 @@
     transition-timing-function: var(--ix-ease-in-circ);
   }
 
+  .@{idux-prefix}-@{className}-enter,
   .@{idux-prefix}-@{className}-enter-from,
   .@{idux-prefix}-@{className}-leave-to {
     opacity: 0;
diff --git a/packages/components/switch/docs/Theme.zh.md b/packages/components/switch/docs/Theme.zh.md
index 63f8f57e0..13f22b44d 100644
--- a/packages/components/switch/docs/Theme.zh.md
+++ b/packages/components/switch/docs/Theme.zh.md
@@ -5,9 +5,6 @@
 | `@switch-height-sm` | `@form-height-xs` | - | - |
 | `@switch-height-md` | `@form-height-sm` | - | - |
 | `@switch-height-lg` | `@form-height-md` | - | - |
-| `@switch-padding-horizontal-sm` | `@form-padding-horizontal-sm` | - | - |
-| `@switch-padding-horizontal-md` | `@form-padding-horizontal-md` | - | - |
-| `@switch-padding-horizontal-lg` | `@form-padding-horizontal-lg` | - | - |
 | `@switch-border-radius` | `@border-radius-full` | - | - |
 | `@switch-color` | `@form-background-color` | - | - |
 | `@switch-background-color` | `@form-placeholder-color` | `@color-graphite-l10` | - |
diff --git a/packages/components/switch/style/index.less b/packages/components/switch/style/index.less
index 1939758ff..f3c8bea51 100644
--- a/packages/components/switch/style/index.less
+++ b/packages/components/switch/style/index.less
@@ -58,14 +58,14 @@
   }
 
   &-sm {
-    .switch-size(@switch-height-sm, @switch-icon-font-size-sm, @switch-box-size-sm, @switch-box-size-padding, 0px, @switch-padding-horizontal-sm);
+    .switch-size(@switch-height-sm, @switch-icon-font-size-sm, @switch-box-size-sm, @switch-box-size-padding, 0px, @form-new-padding-horizontal-sm);
   }
 
   &-md {
-    .switch-size(@switch-height-md, @switch-icon-font-size-md, @switch-box-size-md, @switch-box-size-padding, 1px, @switch-padding-horizontal-md);
+    .switch-size(@switch-height-md, @switch-icon-font-size-md, @switch-box-size-md, @switch-box-size-padding, 1px, @form-new-padding-horizontal-md);
   }
 
   &-lg {
-    .switch-size(@switch-height-lg, @switch-icon-font-size-lg, @switch-box-size-lg, @switch-box-size-padding, 1px, @switch-padding-horizontal-lg);
+    .switch-size(@switch-height-lg, @switch-icon-font-size-lg, @switch-box-size-lg, @switch-box-size-padding, 1px, @form-new-padding-horizontal-lg);
   }
 }
diff --git a/packages/components/switch/style/themes/default.variable.less b/packages/components/switch/style/themes/default.variable.less
index 6df7f8e79..94c2dee1d 100644
--- a/packages/components/switch/style/themes/default.variable.less
+++ b/packages/components/switch/style/themes/default.variable.less
@@ -3,9 +3,7 @@
 @switch-height-sm: @form-height-xs;
 @switch-height-md: @form-height-sm;
 @switch-height-lg: @form-height-md;
-@switch-padding-horizontal-sm: @form-padding-horizontal-sm;
-@switch-padding-horizontal-md: @form-padding-horizontal-md;
-@switch-padding-horizontal-lg: @form-padding-horizontal-lg;
+
 @switch-border-radius: @border-radius-full;
 
 @switch-color: @form-background-color;
diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
index 172285c8f..b46e14eef 100644
--- a/packages/components/table/style/index.less
+++ b/packages/components/table/style/index.less
@@ -110,7 +110,7 @@
       text-align: end;
 
       .@{table-prefix}-cell-triggers {
-        justify-content: end;
+        justify-content: flex-end;
       }
     }
   }
diff --git a/packages/components/textarea/docs/Theme.zh.md b/packages/components/textarea/docs/Theme.zh.md
index ef2a1968e..5c561447f 100644
--- a/packages/components/textarea/docs/Theme.zh.md
+++ b/packages/components/textarea/docs/Theme.zh.md
@@ -4,9 +4,6 @@
 | `@textarea-font-size-md` | `@form-font-size-md` | - | - |
 | `@textarea-font-size-lg` | `@form-font-size-lg` | - | - |
 | `@textarea-line-height` | `@form-line-height` | - | - |
-| `@textarea-padding-horizontal-sm` | `@form-padding-horizontal-sm` | - | - |
-| `@textarea-padding-horizontal-md` | `@form-padding-horizontal-md` | - | - |
-| `@textarea-padding-horizontal-lg` | `@form-padding-horizontal-lg` | - | - |
 | `@textarea-padding-vertical-sm` | `@form-padding-vertical-sm` | - | - |
 | `@textarea-padding-vertical-md` | `@form-padding-vertical-md` | - | - |
 | `@textarea-padding-vertical-lg` | `@form-padding-vertical-lg` | - | - |
diff --git a/packages/components/textarea/style/index.less b/packages/components/textarea/style/index.less
index 850899905..baaeae88c 100644
--- a/packages/components/textarea/style/index.less
+++ b/packages/components/textarea/style/index.less
@@ -32,15 +32,15 @@
   }
 
   &-sm {
-    .textarea-size(@textarea-font-size-sm, @textarea-padding-vertical-sm, @textarea-padding-horizontal-sm);
+    .textarea-size(@textarea-font-size-sm, @textarea-padding-vertical-sm, @form-new-padding-horizontal-sm);
   }
 
   &-md {
-    .textarea-size(@textarea-font-size-md, @textarea-padding-vertical-md, @textarea-padding-horizontal-md);
+    .textarea-size(@textarea-font-size-md, @textarea-padding-vertical-md, @form-new-padding-horizontal-md);
   }
 
   &-lg {
-    .textarea-size(@textarea-font-size-lg, @textarea-padding-vertical-lg, @textarea-padding-horizontal-lg);
+    .textarea-size(@textarea-font-size-lg, @textarea-padding-vertical-lg, @form-new-padding-horizontal-lg);
   }
 
   &-focused {
diff --git a/packages/components/textarea/style/themes/default.variable.less b/packages/components/textarea/style/themes/default.variable.less
index b20bc7acf..0ca07df95 100644
--- a/packages/components/textarea/style/themes/default.variable.less
+++ b/packages/components/textarea/style/themes/default.variable.less
@@ -2,9 +2,7 @@
 @textarea-font-size-md: @form-font-size-md;
 @textarea-font-size-lg: @form-font-size-lg;
 @textarea-line-height: @form-line-height;
-@textarea-padding-horizontal-sm: @form-padding-horizontal-sm;
-@textarea-padding-horizontal-md: @form-padding-horizontal-md;
-@textarea-padding-horizontal-lg: @form-padding-horizontal-lg;
+
 @textarea-padding-vertical-sm: @form-padding-vertical-sm;
 @textarea-padding-vertical-md: @form-padding-vertical-md;
 @textarea-padding-vertical-lg: @form-padding-vertical-lg;
diff --git a/packages/components/tree/style/mixin.less b/packages/components/tree/style/mixin.less
index d34e2d176..3d26784b1 100644
--- a/packages/components/tree/style/mixin.less
+++ b/packages/components/tree/style/mixin.less
@@ -1,13 +1,24 @@
 // https://www.zhangxinxu.com/study/201710/css3-linear-gradient-dashed-generate.html
 .horizontal-line() {
-    height: @tree-node-line-size;
-    background: linear-gradient(to right, @tree-node-line-color, @tree-node-line-color 2.25px, transparent 2.25px, transparent);
-    background-size: 3px 100%;
-  }
-  
-  .vertical-line() {
-    width: @tree-node-line-size;
-    background: linear-gradient(to bottom, @tree-node-line-color, @tree-node-line-color 2.25px, transparent 2.25px, transparent);
-    background-size: 100% 3px;
-  }
-  
\ No newline at end of file
+  height: @tree-node-line-size;
+  background: linear-gradient(
+    to right,
+    @tree-node-line-color,
+    @tree-node-line-color 2.25px,
+    transparent 2.25px,
+    transparent
+  );
+  background-size: 3px 100%;
+}
+
+.vertical-line() {
+  width: @tree-node-line-size;
+  background: linear-gradient(
+    to bottom,
+    @tree-node-line-color,
+    @tree-node-line-color 2.25px,
+    transparent 2.25px,
+    transparent
+  );
+  background-size: 100% 3px;
+}
diff --git a/packages/pro/textarea/docs/Theme.zh.md b/packages/pro/textarea/docs/Theme.zh.md
index baabe84f3..2ebe5552e 100644
--- a/packages/pro/textarea/docs/Theme.zh.md
+++ b/packages/pro/textarea/docs/Theme.zh.md
@@ -6,9 +6,6 @@
 | `@pro-textarea-font-size-sm` | `@form-font-size-sm` | - | - |
 | `@pro-textarea-font-size-md` | `@form-font-size-md` | - | - |
 | `@pro-textarea-font-size-lg` | `@form-font-size-lg` | - | - |
-| `@pro-textarea-padding-horizontal-sm` | `@form-padding-horizontal-sm` | - | - |
-| `@pro-textarea-padding-horizontal-md` | `@form-padding-horizontal-md` | - | - |
-| `@pro-textarea-padding-horizontal-lg` | `@form-padding-horizontal-lg` | - | - |
 | `@pro-textarea-padding-vertical-sm` | `@form-padding-vertical-sm` | - | - |
 | `@pro-textarea-padding-vertical-md` | `@form-padding-vertical-md` | - | - |
 | `@pro-textarea-padding-vertical-lg` | `@form-padding-vertical-lg` | - | - |
diff --git a/packages/pro/textarea/style/index.less b/packages/pro/textarea/style/index.less
index 10477b846..1dcbd2d68 100644
--- a/packages/pro/textarea/style/index.less
+++ b/packages/pro/textarea/style/index.less
@@ -16,15 +16,15 @@
   overflow: hidden;
 
   &-sm {
-    .textarea-size(@pro-textarea-font-size-sm, @pro-textarea-padding-vertical-sm, @pro-textarea-padding-horizontal-sm);
+    .textarea-size(@pro-textarea-font-size-sm, @pro-textarea-padding-vertical-sm, @form-new-padding-horizontal-sm);
   }
 
   &-md {
-    .textarea-size(@pro-textarea-font-size-md, @pro-textarea-padding-vertical-md, @pro-textarea-padding-horizontal-md);
+    .textarea-size(@pro-textarea-font-size-md, @pro-textarea-padding-vertical-md, @form-new-padding-horizontal-md);
   }
 
   &-lg {
-    .textarea-size(@pro-textarea-font-size-lg, @pro-textarea-padding-vertical-lg, @pro-textarea-padding-horizontal-lg);
+    .textarea-size(@pro-textarea-font-size-lg, @pro-textarea-padding-vertical-lg, @form-new-padding-horizontal-lg);
   }
 
   &-scroll-holder {
diff --git a/packages/pro/textarea/style/themes/default.variable.less b/packages/pro/textarea/style/themes/default.variable.less
index 343405dc0..b797a32a3 100644
--- a/packages/pro/textarea/style/themes/default.variable.less
+++ b/packages/pro/textarea/style/themes/default.variable.less
@@ -6,9 +6,7 @@
 @pro-textarea-font-size-md: @form-font-size-md;
 @pro-textarea-font-size-lg: @form-font-size-lg;
 @pro-textarea-line-height: @form-line-height;
-@pro-textarea-padding-horizontal-sm: @form-padding-horizontal-sm;
-@pro-textarea-padding-horizontal-md: @form-padding-horizontal-md;
-@pro-textarea-padding-horizontal-lg: @form-padding-horizontal-lg;
+
 @pro-textarea-padding-vertical-sm: @form-padding-vertical-sm;
 @pro-textarea-padding-vertical-md: @form-padding-vertical-md;
 @pro-textarea-padding-vertical-lg: @form-padding-vertical-lg;
@@ -39,4 +37,4 @@
 @pro-textarea-count-bottom: 1px;
 @pro-textarea-count-right: 8px;
 @pro-textarea-count-opacity: 0.9;
-@pro-textarea-count-color: @pro-textarea-placeholder-color;
\ No newline at end of file
+@pro-textarea-count-color: @pro-textarea-placeholder-color;
diff --git a/packages/pro/textarea/style/themes/seer.variable.less b/packages/pro/textarea/style/themes/seer.variable.less
index 498793af1..bc81c357c 100644
--- a/packages/pro/textarea/style/themes/seer.variable.less
+++ b/packages/pro/textarea/style/themes/seer.variable.less
@@ -1 +1,9 @@
 @import './default.variable.less';
+
+@pro-textarea-padding-horizontal-sm: 4px;
+@pro-textarea-padding-horizontal-md: 6px;
+@pro-textarea-padding-horizontal-lg: 8px;
+@pro-textarea-padding-vertical-sm: 4px;
+@pro-textarea-padding-vertical-md: 6px;
+@pro-textarea-padding-vertical-lg: 8px;
+@pro-textarea-line-height: 20px;