From 06688e5099e6b2d37c79e5c707cb2981bb8e6db7 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 4 Jan 2021 18:36:35 +0800
Subject: [PATCH] wip(input): new theme

---
 .../components/input/enUS/disabled.demo.md    |  13 +-
 .../components/input/zhCN/disabled.demo.md    |  13 +-
 src/_base/clear-button/src/ClearButton.vue    |  50 +-
 .../clear-button/src/styles/index.cssr.js     |  46 +
 src/_base/clear-button/src/styles/index.js    |   9 -
 .../src/styles/themed-base.cssr.js            |  55 --
 src/_base/clear-button/styles/dark.js         |  14 +-
 src/_base/clear-button/styles/light.js        |  14 +-
 src/_mixins/index.js                          |   4 +-
 src/_mixins/use-locale.js                     |  19 +
 src/icon/src/Icon.js                          |   2 +-
 src/input/src/Input.vue                       | 793 ++++++++++--------
 src/input/src/InputGroup.vue                  |  16 +-
 src/input/src/InputGroupLabel.vue             |  53 +-
 .../src/styles/input-group-label.cssr.js      |  37 +
 .../src/styles/input-group-label/index.js     |   9 -
 .../input-group-label/themed-base.cssr.js     |  58 --
 src/input/src/styles/input-group.cssr.js      | 155 ++++
 src/input/src/styles/input-group/base.cssr.js | 219 -----
 src/input/src/styles/input-group/index.js     |   9 -
 src/input/src/styles/input.cssr.js            | 284 +++++++
 src/input/src/styles/input/index.js           |  15 -
 .../src/styles/input/themed-base.cssr.js      | 309 -------
 .../src/styles/input/themed-size.cssr.js      | 108 ---
 src/input/styles/dark.js                      |  15 +-
 src/input/styles/light.js                     |  15 +-
 26 files changed, 1133 insertions(+), 1201 deletions(-)
 create mode 100644 src/_base/clear-button/src/styles/index.cssr.js
 delete mode 100644 src/_base/clear-button/src/styles/index.js
 delete mode 100644 src/_base/clear-button/src/styles/themed-base.cssr.js
 create mode 100644 src/_mixins/use-locale.js
 create mode 100644 src/input/src/styles/input-group-label.cssr.js
 delete mode 100644 src/input/src/styles/input-group-label/index.js
 delete mode 100644 src/input/src/styles/input-group-label/themed-base.cssr.js
 create mode 100644 src/input/src/styles/input-group.cssr.js
 delete mode 100644 src/input/src/styles/input-group/base.cssr.js
 delete mode 100644 src/input/src/styles/input-group/index.js
 create mode 100644 src/input/src/styles/input.cssr.js
 delete mode 100644 src/input/src/styles/input/index.js
 delete mode 100644 src/input/src/styles/input/themed-base.cssr.js
 delete mode 100644 src/input/src/styles/input/themed-size.cssr.js

diff --git a/demo/documentation/components/input/enUS/disabled.demo.md b/demo/documentation/components/input/enUS/disabled.demo.md
index de6160ea9..2ba76f2b9 100644
--- a/demo/documentation/components/input/enUS/disabled.demo.md
+++ b/demo/documentation/components/input/enUS/disabled.demo.md
@@ -5,7 +5,6 @@ Input can be disabled.
 ```html
 <n-space vertical>
   <n-input
-    v-model:value="value"
     type="input"
     size="small"
     placeholder="Oops! It is disabled."
@@ -13,20 +12,13 @@ Input can be disabled.
     round
   />
   <n-input
-    v-model:value="value"
     type="textarea"
     size="small"
     placeholder="Oops! It is disabled."
     :disabled="!active"
     round
   />
-  <n-input
-    pair
-    separator="to"
-    v-model:value="value"
-    clearable
-    :disabled="!active"
-  >
+  <n-input pair separator="to" clearable :disabled="!active">
     <template #affix>
       <n-icon><cash-icon /></n-icon>
     </template>
@@ -44,8 +36,7 @@ export default {
   },
   data () {
     return {
-      active: false,
-      value: null
+      active: false
     }
   }
 }
diff --git a/demo/documentation/components/input/zhCN/disabled.demo.md b/demo/documentation/components/input/zhCN/disabled.demo.md
index 08a83ae0d..63998d1a7 100644
--- a/demo/documentation/components/input/zhCN/disabled.demo.md
+++ b/demo/documentation/components/input/zhCN/disabled.demo.md
@@ -5,7 +5,6 @@
 ```html
 <n-space vertical>
   <n-input
-    v-model:value="value"
     type="input"
     size="small"
     placeholder="噢！它被禁用了。"
@@ -13,20 +12,13 @@
     round
   />
   <n-input
-    v-model:value="value"
     type="textarea"
     size="small"
     placeholder="噢！它被禁用了。"
     :disabled="!active"
     round
   />
-  <n-input
-    pair
-    separator="to"
-    v-model:value="value"
-    clearable
-    :disabled="!active"
-  >
+  <n-input pair separator="to" clearable :disabled="!active">
     <template #affix>
       <n-icon><cash-icon /></n-icon>
     </template>
@@ -44,8 +36,7 @@ export default {
   },
   data () {
     return {
-      active: false,
-      value: null
+      active: false
     }
   }
 }
diff --git a/src/_base/clear-button/src/ClearButton.vue b/src/_base/clear-button/src/ClearButton.vue
index bc2bcdd66..0b01cbc06 100644
--- a/src/_base/clear-button/src/ClearButton.vue
+++ b/src/_base/clear-button/src/ClearButton.vue
@@ -1,17 +1,9 @@
 <template>
-  <div
-    :class="[
-      'n-base-clear-button',
-      {
-        [`n-${theme}-theme`]: theme
-      }
-    ]"
-  >
+  <div class="n-base-clear-button" :style="cssVars">
     <n-icon-switch-transition>
       <n-icon
         v-if="show"
         key="dismiss"
-        :theme="null"
         :depth="null"
         class="n-base-clear-button__clear"
         @click="onClear"
@@ -27,25 +19,23 @@
 </template>
 
 <script>
+import { computed, defineComponent } from 'vue'
 import { DismissCircleIcon } from '../../icons'
 import { NIcon } from '../../../icon'
 import { NIconSwitchTransition } from '../../../_base'
-import { withCssr } from '../../../_mixins'
-import styles from './styles'
+import { useTheme } from '../../../_mixins'
+import { baseClearButtonLight } from '../styles'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'BaseClearButton',
   components: {
     NIcon,
     DismissCircleIcon,
     NIconSwitchTransition
   },
-  mixins: [withCssr(styles)],
   props: {
-    theme: {
-      type: String,
-      default: undefined
-    },
+    ...useTheme.props,
     show: {
       type: Boolean,
       default: false
@@ -54,6 +44,30 @@ export default {
       type: Function,
       default: undefined
     }
+  },
+  setup (props) {
+    const themeRef = useTheme(
+      'BaseClearButton',
+      'BaseClearButton',
+      style,
+      baseClearButtonLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { size, color, colorHover, colorPressed }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--color': color,
+          '--size': size,
+          '--color-hover': colorHover,
+          '--color-pressed': colorPressed
+        }
+      })
+    }
   }
-}
+})
 </script>
diff --git a/src/_base/clear-button/src/styles/index.cssr.js b/src/_base/clear-button/src/styles/index.cssr.js
new file mode 100644
index 000000000..72b7451fa
--- /dev/null
+++ b/src/_base/clear-button/src/styles/index.cssr.js
@@ -0,0 +1,46 @@
+import { cB, c, cE } from '../../../../_utils/cssr'
+import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
+
+// vars:
+// --cb-bezier
+// --cb-color
+// --cb-size
+// --cb-color-hover
+// --cb-color-pressed
+export default cB('base-clear-button', {
+  flexShrink: 0,
+  height: '1em',
+  width: '1em',
+  position: 'relative'
+}, [
+  c('>', [
+    cE('clear', {
+      fontSize: 'var(--cb-size)!important',
+      cursor: 'pointer',
+      color: 'var(--cb-color)!important',
+      transition: 'color .3s var(--cb-bezier)!important'
+    }, [
+      c('&:hover', {
+        color: 'var(--cb-color-hover)!important'
+      }),
+      c('&:active', {
+        color: 'var(--cb-color-pressed)!important'
+      })
+    ]),
+    cE('placeholder', {
+      display: 'flex'
+    }),
+    cE('clear, placeholder', {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      transform: 'translateX(-50%) translateY(-50%)'
+    }, [
+      createIconSwitchTransition({
+        originalTransform: 'translateX(-50%) translateY(-50%)',
+        left: '50%',
+        top: '50%'
+      })
+    ])
+  ])
+])
diff --git a/src/_base/clear-button/src/styles/index.js b/src/_base/clear-button/src/styles/index.js
deleted file mode 100644
index d502e3f3f..000000000
--- a/src/_base/clear-button/src/styles/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr'
-
-export default [
-  {
-    key: 'theme',
-    watch: ['theme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/_base/clear-button/src/styles/themed-base.cssr.js b/src/_base/clear-button/src/styles/themed-base.cssr.js
deleted file mode 100644
index 55bae345c..000000000
--- a/src/_base/clear-button/src/styles/themed-base.cssr.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { cTB, c, cE } from '../../../../_utils/cssr'
-import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: {
-        cubicBezierEaseInOut
-      },
-      $local: {
-        size,
-        color,
-        colorHover,
-        colorPressed
-      }
-    } = props
-    return cTB('base-clear-button', {
-      flexShrink: 0,
-      height: '1em',
-      width: '1em',
-      position: 'relative'
-    }, [
-      c('>', [
-        cE('clear', {
-          fontSize: `${size} !important`,
-          cursor: 'pointer',
-          color,
-          transition: `color .3s ${cubicBezierEaseInOut}`
-        }, [
-          c('&:hover', {
-            color: colorHover
-          }),
-          c('&:active', {
-            color: colorPressed
-          })
-        ]),
-        cE('placeholder', {
-          display: 'flex'
-        }),
-        cE('clear, placeholder', {
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          transform: 'translateX(-50%) translateY(-50%)'
-        }, [
-          createIconSwitchTransition({
-            originalTransform: 'translateX(-50%) translateY(-50%)',
-            left: '50%',
-            top: '50%'
-          })
-        ])
-      ])
-    ])
-  }
-])
diff --git a/src/_base/clear-button/styles/dark.js b/src/_base/clear-button/styles/dark.js
index e1016abb5..061e30867 100644
--- a/src/_base/clear-button/styles/dark.js
+++ b/src/_base/clear-button/styles/dark.js
@@ -1,11 +1,15 @@
-import create from '../../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import { scaleColor } from 'seemly'
+import { commonDark } from '../../../_styles/new-common'
+import { iconDark } from '../../../icon/styles'
 
-export default create({
+export default {
   name: 'BaseClearButton',
-  theme: 'dark',
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Icon: iconDark
+  },
+  self (vars) {
     const { textColor4Overlay } = vars
     return {
       ...commonVariables,
@@ -14,4 +18,4 @@ export default create({
       colorPressed: scaleColor(textColor4Overlay, { alpha: 0.75 })
     }
   }
-})
+}
diff --git a/src/_base/clear-button/styles/light.js b/src/_base/clear-button/styles/light.js
index 4f464e2b3..caa59d74f 100644
--- a/src/_base/clear-button/styles/light.js
+++ b/src/_base/clear-button/styles/light.js
@@ -1,11 +1,15 @@
-import create from '../../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import { scaleColor } from 'seemly'
+import { commonLight } from '../../../_styles/new-common'
+import { iconLight } from '../../../icon/styles'
 
-export default create({
+export default {
   name: 'BaseClearButton',
-  theme: 'light',
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Icon: iconLight
+  },
+  self (vars) {
     const { textColor4Overlay } = vars
     return {
       ...commonVariables,
@@ -14,4 +18,4 @@ export default create({
       colorPressed: scaleColor(textColor4Overlay, { alpha: 1.25 })
     }
   }
-})
+}
diff --git a/src/_mixins/index.js b/src/_mixins/index.js
index 06e1b200f..bc4c9affd 100644
--- a/src/_mixins/index.js
+++ b/src/_mixins/index.js
@@ -1,8 +1,10 @@
-export { default as useFormItem } from './use-as-form-item'
 export { default as locale } from './locale'
 export { default as themeable } from './themeable'
 export { default as configurable } from './configurable'
 export { default as withCssr } from './with-cssr'
 export { default as registerable } from './registerable'
+
+export { default as useFormItem } from './use-as-form-item'
 export { default as useTheme } from './use-theme'
 export { default as useConfig } from './use-config'
+export { default as useLocale } from './use-locale'
diff --git a/src/_mixins/use-locale.js b/src/_mixins/use-locale.js
new file mode 100644
index 000000000..ac361a852
--- /dev/null
+++ b/src/_mixins/use-locale.js
@@ -0,0 +1,19 @@
+import { inject, computed, getCurrentInstance } from 'vue'
+
+export default function createLocaleMixin (componentLocaleNamespace) {
+  const vm = getCurrentInstance().proxy
+  const NConfigProvider = inject('NConfigProvider', {})
+  const globalLocaleRef = computed(() => {
+    const { locale } = NConfigProvider
+    if (locale) return locale
+    const { mergedLanguage } = NConfigProvider
+    const {
+      $naive: { locales, fallbackLocale }
+    } = vm
+    return locales[mergedLanguage ?? fallbackLocale]
+  })
+  return {
+    dateLocale: computed(() => globalLocaleRef.value._dateFns),
+    locale: computed(() => globalLocaleRef.value[componentLocaleNamespace])
+  }
+}
diff --git a/src/icon/src/Icon.js b/src/icon/src/Icon.js
index 31c2b5d11..deb81eac7 100644
--- a/src/icon/src/Icon.js
+++ b/src/icon/src/Icon.js
@@ -53,7 +53,7 @@ export default defineComponent({
           common: { cubicBezierEaseInOut },
           self
         } = themeRef.value
-        if (depth !== undefined) {
+        if (depth !== undefined && depth !== null) {
           const { color, [`opacity${depth}Depth`]: opacity } = self
           return {
             '--bezier': cubicBezierEaseInOut,
diff --git a/src/input/src/Input.vue b/src/input/src/Input.vue
index c122bcfd6..34760a033 100644
--- a/src/input/src/Input.vue
+++ b/src/input/src/Input.vue
@@ -1,21 +1,20 @@
 <template>
   <div
-    ref="wrapper"
+    ref="wrapperRef"
     class="n-input"
     :class="{
       'n-input--disabled': disabled,
       [`n-input--${mergedSize}-size`]: true,
-      'n-input--textarea': isTextarea,
-      'n-input--round': round && !isTextarea,
+      'n-input--textarea': type === 'textarea',
+      'n-input--round': round && !(type === 'textarea'),
       'n-input--clearable': clearable,
       'n-input--split': pair,
       'n-input--focus': mergedFocus,
       'n-input--suffix': $slots.suffix,
       'n-input--prefix': $slots.prefix || $slots.affix,
-      'n-input--stateful': stateful,
-      'n-input--bordered': mergedBordered,
-      [`n-${mergedTheme}-theme`]: mergedTheme
+      'n-input--stateful': stateful
     }"
+    :style="cssVars"
     :tabindex="!disabled && passivelyActivated && !inputFocused ? 0 : false"
     @focus="handleWrapperFocus"
     @blur="handleWrapperBlur"
@@ -28,13 +27,13 @@
     @compositionend="handleCompositionEnd"
   >
     <pre
-      v-if="isTextarea && autosize"
-      ref="textareaMirrow"
+      v-if="type === 'textarea' && autosize"
+      ref="textareaMirrorRef"
       class="n-input__textarea-mirror"
     >{{ mergedValue }}<br></pre>
     <textarea
       v-if="type === 'textarea'"
-      ref="textarea"
+      ref="textareaRef"
       class="n-input__textarea"
       :class="{
         'n-input__textarea--autosize': autosize
@@ -71,17 +70,10 @@
         @blur="handleInputBlur"
         @focus="handleInputFocus"
         @input="handleInput($event, 0)"
-        @change="handleChange"
+        @change="handleChange($event, 0)"
         @keyup="handleKeyUp"
       >
-      <div
-        v-if="
-          !isComposing &&
-            (!mergedValue || (Array.isArray(mergedValue) && !mergedValue[0])) &&
-            mergedPlaceholder[0]
-        "
-        class="n-input__placeholder"
-      >
+      <div v-if="showPlaceholder1" class="n-input__placeholder">
         {{ mergedPlaceholder[0] }}
       </div>
     </div>
@@ -90,7 +82,7 @@
     </span>
     <div v-if="pair" class="n-input-second-input">
       <input
-        ref="secondInput"
+        ref="input2"
         :type="type"
         class="n-input__input n-input__input--second"
         :tabindex="passivelyActivated && !inputFocused ? -1 : false"
@@ -103,17 +95,10 @@
         @blur="handleInputBlur"
         @focus="handleInputFocus"
         @input="handleInput($event, 1)"
-        @change="handleChange"
+        @change="handleChange($event, 1)"
         @keyup="handleKeyUp"
       >
-      <div
-        v-if="
-          !isComposing &&
-            (!mergedValue || (Array.isArray(mergedValue) && !mergedValue[1])) &&
-            mergedPlaceholder[1]
-        "
-        class="n-input__placeholder"
-      >
+      <div v-if="showPlaceholder2" class="n-input__placeholder">
         {{ mergedPlaceholder[1] }}
       </div>
     </div>
@@ -129,47 +114,285 @@
     <n-icon-config-provider class="n-input__suffix" :depth="disabled ? 5 : 4">
       <slot name="suffix" />
       <n-base-clear-button
-        :theme="mergedTheme"
+        :theme="'light'"
         :show="showClearButton"
         @clear="handleClear"
       >
         <slot name="clear" />
       </n-base-clear-button>
     </n-icon-config-provider>
-    <div
-      v-if="isTextarea && !isComposing && placeholder && !pair && !mergedValue"
-      class="n-input__placeholder"
-    >
+    <div v-if="showTextareaPlaceholder" class="n-input__placeholder">
       {{ placeholder }}
     </div>
-    <div class="n-input__border" />
-    <div class="n-input__state-border" />
-    <div class="n-input__box-shadow" />
+    <div v-if="mergedBordered" class="n-input__border" />
+    <div v-if="mergedBordered" class="n-input__state-border" />
   </div>
 </template>
 
 <script>
-import { ref, toRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  ref,
+  toRef,
+  watch,
+  onMounted
+} from 'vue'
 import { useMergedState } from 'vooks'
 import { NBaseClearButton } from '../../_base'
-import {
-  configurable,
-  themeable,
-  locale,
-  withCssr,
-  useFormItem
-} from '../../_mixins'
-import { call } from '../../_utils'
-import styles from './styles/input'
+import { useTheme, useLocale, useFormItem, useConfig } from '../../_mixins'
+import { call, createKey } from '../../_utils'
 import NIconConfigProvider from '../../icon/src/IconConfigProvider.vue'
+import style from './styles/input.cssr.js'
+import { inputLight } from '../styles'
 
-export default {
+function createMethods (
+  props,
+  formItem,
+  {
+    mergedValueRef,
+    uncontrolledValueRef,
+    isComposingRef,
+    focusedRef,
+    hoverRef,
+    inputFocusedRef,
+    wrapperRef,
+    inputRef,
+    input2Ref,
+    textareaRef,
+    textareaMirrorRef
+  }
+) {
+  const doInput = (value) => {
+    const { 'onUpdate:value': onUpdateValue, onInput } = props
+    const { nTriggerFormInput } = formItem
+    if (onUpdateValue) call(onUpdateValue, value)
+    if (onInput) call(onInput, value)
+    uncontrolledValueRef.value = value
+    nTriggerFormInput()
+  }
+  const doChange = (value) => {
+    const { onChange } = props
+    const { nTriggerFormChange } = formItem
+    if (onChange) call(onChange, value)
+    uncontrolledValueRef.value = value
+    nTriggerFormChange()
+  }
+  const doBlur = (e) => {
+    const { onBlur } = props
+    const { nTriggerFormBlur } = formItem
+    if (onBlur) call(onBlur, e)
+    nTriggerFormBlur()
+  }
+  const doFocus = (e) => {
+    const { onFocus } = props
+    const { nTriggerFormFocus } = formItem
+    if (onFocus) call(onFocus, e)
+    nTriggerFormFocus()
+  }
+  const doClear = (...args) => {
+    const { onClear } = props
+    if (onClear) call(onClear, ...args)
+  }
+  const doInputBlur = (e) => {
+    const { onInputBlur } = props
+    if (onInputBlur) call(onInputBlur, e)
+  }
+  const doInputFocus = (e) => {
+    const { onInputFocus } = props
+    if (onInputFocus) call(onInputFocus, e)
+  }
+  const doDeactivate = () => {
+    const { onDeactivate } = props
+    if (onDeactivate) call(onDeactivate)
+  }
+  const doActivate = () => {
+    const { onActivate } = props
+    if (onActivate) call(onActivate)
+  }
+  const doKeyUp = (e) => {
+    const { onKeyUp } = props
+    if (onKeyUp) call(onKeyUp, e)
+  }
+  const doClick = (e) => {
+    const { onClick } = props
+    if (onClick) call(onClick, e)
+  }
+  const doWrapperFocus = (e) => {
+    const { onWrapperFocus } = props
+    if (onWrapperFocus) call(onWrapperFocus, e)
+  }
+  const doWrapperBlur = (e) => {
+    const { onWrapperBlur } = props
+    if (onWrapperBlur) call(onWrapperBlur, e)
+  }
+  // methods
+  const handleCompositionStart = () => {
+    isComposingRef.value = true
+  }
+  const handleCompositionEnd = (e) => {
+    isComposingRef.value = false
+    if (e.target === input2Ref.value) {
+      handleInput(e, 1)
+    } else {
+      handleInput(e, 0)
+    }
+  }
+  const handleInput = (e, index, event = 'input') => {
+    if (isComposingRef.value) return
+    const changedValue = e.target.value
+    if (!props.pair) {
+      event === 'input' ? doInput(changedValue) : doChange(changedValue)
+    } else {
+      let { value } = mergedValueRef
+      if (!Array.isArray(value)) {
+        value = [null, null]
+      } else {
+        value = [...value]
+      }
+      value[index] = changedValue
+      event === 'input' ? doInput(value) : doChange(value)
+    }
+    /** force update to sync input's view with value */
+    // ? this.$forceUpdate()
+  }
+  const handleInputBlur = (e) => {
+    doInputBlur(e)
+    if (e.relatedTarget === wrapperRef.value) {
+      doDeactivate()
+    }
+    if (
+      !(
+        e.relatedTarget === inputRef.value ||
+        e.relatedTarget === input2Ref.value ||
+        e.relatedTarget === textareaRef.value
+      )
+    ) {
+      inputFocusedRef.value = false
+    }
+    dealWithEvent(e, 'blur')
+  }
+  const handleInputFocus = (e) => {
+    doInputFocus(e)
+    focusedRef.value = true
+    inputFocusedRef.value = true
+    doActivate()
+    dealWithEvent(e, 'focus')
+  }
+  const handleWrapperBlur = (e) => {
+    if (props.passivelyActivated) {
+      doWrapperBlur(e)
+      dealWithEvent(e, 'blur')
+    }
+  }
+  const handleWrapperFocus = (e) => {
+    if (props.passivelyActivated) {
+      focusedRef.value = true
+      doWrapperFocus(e)
+      dealWithEvent(e, 'focus')
+    }
+  }
+  const dealWithEvent = (e, type) => {
+    if (
+      e.relatedTarget === inputRef.value ||
+      e.relatedTarget === input2Ref.value ||
+      e.relatedTarget === textareaRef.value ||
+      e.relatedTarget === wrapperRef.value
+    ) {
+      /**
+       * activeElement transfer inside the input, do nothing
+       */
+    } else {
+      if (type === 'focus') {
+        doFocus(e)
+        focusedRef.value = true
+      } else if (type === 'blur') {
+        doBlur(e)
+        focusedRef.value = false
+      }
+    }
+  }
+  const handleKeyUp = (e) => {
+    doKeyUp(e)
+  }
+  const handleChange = (e, index) => handleInput(e, index, 'change')
+  const handleClick = (e) => {
+    doClick(e)
+  }
+  const handleClear = (e) => {
+    doClear(e)
+    if (props.pair) {
+      doInput([])
+    } else {
+      doInput('')
+    }
+  }
+  const handleMouseEnter = () => {
+    hoverRef.value = true
+  }
+  const handleMouseLeave = () => {
+    hoverRef.value = false
+  }
+  const handleWrapperKeyDownEnter = (e) => {
+    if (props.passivelyActivated) {
+      if (inputFocusedRef.value && props.deactivateOnEnter) {
+        handleWrapperKeyDownEsc()
+        return
+      }
+      e.preventDefault()
+      if (props.type === 'textarea') {
+        textareaRef.value.focus()
+      } else {
+        inputRef.value.focus()
+      }
+    }
+  }
+  const handleWrapperKeyDownEsc = () => {
+    if (props.passivelyActivated) {
+      inputFocusedRef.value = false
+      nextTick(() => {
+        wrapperRef.value.focus()
+      })
+    }
+  }
+  return {
+    doInput,
+    doChange,
+    doFocus,
+    doBlur,
+    doClear,
+    doWrapperFocus,
+    doWrapperBlur,
+    doInputFocus,
+    doInputBlur,
+    doActivate,
+    doDeactivate,
+    doClick,
+    doKeyUp,
+    handleCompositionStart,
+    handleCompositionEnd,
+    handleInput,
+    handleInputBlur,
+    handleInputFocus,
+    handleWrapperBlur,
+    handleWrapperFocus,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleKeyUp,
+    handleChange,
+    handleClick,
+    handleClear,
+    handleWrapperKeyDownEnter
+  }
+}
+
+export default defineComponent({
   name: 'Input',
   components: {
     NIconConfigProvider,
     NBaseClearButton
   },
-  mixins: [configurable, themeable, locale('Input'), withCssr(styles)],
   props: {
     bordered: {
       type: Boolean,
@@ -325,317 +548,231 @@ export default {
     }
   },
   setup (props) {
+    const themeRef = useTheme('Input', 'Input', style, inputLight, props)
+    // dom refs
+    const wrapperRef = ref(null)
+    const textareaRef = ref(null)
+    const textareaMirrorRef = ref(null)
+    const inputRef = ref(null)
+    const input2Ref = ref(null)
+    // local
+    const { locale } = useLocale('Input')
+    // value
     const uncontrolledValueRef = ref(props.defaultValue)
     const controlledValueRef = toRef(props, 'value')
     const mergedValueRef = useMergedState(
       controlledValueRef,
       uncontrolledValueRef
     )
-    return {
-      uncontrolledValue: uncontrolledValueRef,
-      mergedValue: mergedValueRef,
-      focused: ref(false),
-      hover: ref(false),
-      isComposing: ref(false),
-      inputFocused: ref(false),
-      ...useFormItem(props)
-    }
-  },
-  computed: {
-    mergedPlaceholder () {
-      const { placeholder } = this
-      if (this.pair) {
+    // form-item
+    const formItem = useFormItem(props)
+    const { mergedSize: mergedSizeRef } = formItem
+    // states
+    const focusedRef = ref(false)
+    const hoverRef = ref(false)
+    const isComposingRef = ref(false)
+    const inputFocusedRef = ref(false)
+    // placeholder
+    const mergedPlaceholderRef = computed(() => {
+      const { placeholder, pair } = props
+      if (pair) {
         if (Array.isArray(placeholder)) {
           return placeholder
         } else {
           return [placeholder, placeholder]
         }
       } else if (placeholder === undefined) {
-        return [this.locale.placeholder]
+        return [locale.value.placeholder]
       } else {
         return [placeholder]
       }
-    },
-    mergedFocus () {
-      return this.forceFocus || this.focused
-    },
-    showClearButton () {
+    })
+    const showPlaceholder1Ref = computed(() => {
+      const { value: isComposing } = isComposingRef
+      const { value: mergedValue } = mergedValueRef
+      const { value: mergedPlaceholder } = mergedPlaceholderRef
+      return (
+        !isComposing &&
+        (!mergedValue || (Array.isArray(mergedValue) && !mergedValue[0])) &&
+        mergedPlaceholder[0]
+      )
+    })
+    const showPlaceholder2Ref = computed(() => {
+      const { value: isComposing } = isComposingRef
+      const { value: mergedValue } = mergedValueRef
+      const { value: mergedPlaceholder } = mergedPlaceholderRef
+      return (
+        !isComposing &&
+        mergedPlaceholder[1] &&
+        (!mergedValue || (Array.isArray(mergedValue) && !mergedValue[1]))
+      )
+    })
+    const showTextareaPlaceholderRef = computed(() => {
+      return (
+        props.type === 'textarea' &&
+        !isComposingRef.value &&
+        !mergedValueRef.value &&
+        mergedPlaceholderRef.value
+      )
+    })
+    // clear
+    const showClearButton = computed(() => {
       if (
-        this.disabled ||
-        !this.clearable ||
-        (!this.mergedFocus && !this.hover)
+        props.disabled ||
+        !props.clearable ||
+        (!mergedFocusRef.value && !hoverRef.value)
       ) {
         return false
       }
-      const { mergedValue } = this
-      if (this.pair) {
+      const { value: mergedValue } = mergedValueRef
+      const { value: mergedFocus } = mergedFocusRef
+      if (props.pair) {
         return (
           !!(
             Array.isArray(mergedValue) &&
             (mergedValue[0] || mergedValue[1])
           ) &&
-          (this.hover || this.mergedFocus)
+          (hoverRef.value || mergedFocus)
         )
       } else {
-        return !!mergedValue && (this.hover || this.mergedFocus)
+        return !!mergedValue && (hoverRef.value || mergedFocus)
       }
-    },
-    isTextarea () {
-      return this.type === 'textarea'
-    },
-    isInput () {
-      return !this.isTextarea
-    }
-  },
-  watch: {
-    mergedValue () {
-      if (this.isTextarea && this.autosize) {
-        this.$nextTick(this.updateTextAreaStyle)
-      }
-    },
-    mergedSize () {
-      if (this.isTextarea && this.autosize) {
-        this.$nextTick(this.updateTextAreaStyle)
+    })
+    // focus
+    const mergedFocusRef = computed(() => {
+      return props.forceFocus || focusedRef.value
+    })
+    // textarea autosize
+    const updateTextAreaStyle = () => {
+      if (props.type === 'textarea') {
+        const { autosize } = props
+        if (!autosize) return
+        const {
+          paddingTop: stylePaddingTop,
+          paddingBottom: stylePaddingBottom,
+          lineHeight: styleLineHeight
+        } = window.getComputedStyle(textareaRef.value)
+        const paddingTop = Number(stylePaddingTop.slice(0, -2))
+        const paddingBottom = Number(stylePaddingBottom.slice(0, -2))
+        const lineHeight = Number(styleLineHeight.slice(0, -2))
+        if (autosize.minRows) {
+          const minRows = Math.max(autosize.minRows, 1)
+          const styleMinHeight =
+            paddingTop + paddingBottom + lineHeight * minRows + 'px'
+          textareaMirrorRef.value.style.minHeight = styleMinHeight
+        }
+        if (autosize.maxRows) {
+          const maxRows = Math.max(autosize.maxRows, autosize.minRows, 1)
+          const styleMaxHeight =
+            paddingTop + paddingBottom + lineHeight * maxRows + 'px'
+          textareaMirrorRef.value.style.maxHeight = styleMaxHeight
+        }
       }
     }
-  },
-  mounted () {
-    if (this.isTextarea && this.autosize) {
-      this.$nextTick(this.updateTextAreaStyle)
+    watch([mergedValueRef, mergedSizeRef], () => {
+      nextTick(updateTextAreaStyle)
+    })
+    onMounted(updateTextAreaStyle)
+    // other methods
+    const methods = createMethods(props, formItem, {
+      mergedValueRef,
+      uncontrolledValueRef,
+      isComposingRef,
+      focusedRef,
+      hoverRef,
+      inputFocusedRef,
+      wrapperRef,
+      inputRef,
+      input2Ref,
+      textareaRef,
+      textareaMirrorRef
+    })
+    const focus = () => {
+      if (props.disabled) return
+      if (props.passivelyActivated) {
+        wrapperRef.value.focus()
+      } else {
+        if (textareaRef.value) textareaRef.value.focus()
+        else if (inputRef.value) inputRef.value.focus()
+      }
     }
-  },
-  methods: {
-    doInput (value) {
-      const {
-        'onUpdate:value': onUpdateValue,
-        onInput,
-        nTriggerFormInput
-      } = this
-      if (onUpdateValue) call(onUpdateValue, value)
-      if (onInput) call(onInput, value)
-      this.uncontrolledValue = value
-      nTriggerFormInput()
-    },
-    doChange (value) {
-      const { onChange, nTriggerFormChange } = this
-      if (onChange) call(onChange, value)
-      this.uncontrolledValue = value
-      nTriggerFormChange()
-    },
-    doBlur (e) {
-      const { onBlur, nTriggerFormBlur } = this
-      if (onBlur) call(onBlur, e)
-      nTriggerFormBlur()
-    },
-    doFocus (e) {
-      const { onFocus, nTriggerFormFocus } = this
-      if (onFocus) call(onFocus, e)
-      nTriggerFormFocus()
-    },
-    doClear (...args) {
-      const { onClear } = this
-      if (onClear) call(onClear, ...args)
-    },
-    doInputBlur (e) {
-      const { onInputBlur } = this
-      if (onInputBlur) call(onInputBlur, e)
-    },
-    doInputFocus (e) {
-      const { onInputFocus } = this
-      if (onInputFocus) call(onInputFocus, e)
-    },
-    doDeactivate () {
-      const { onDeactivate } = this
-      if (onDeactivate) call(onDeactivate)
-    },
-    doActivate () {
-      const { onActivate } = this
-      if (onActivate) call(onActivate)
-    },
-    doKeyUp (e) {
-      const { onKeyUp } = this
-      if (onKeyUp) call(onKeyUp, e)
-    },
-    doClick (e) {
-      const { onClick } = this
-      if (onClick) call(onClick, e)
-    },
-    doWrapperFocus (e) {
-      const { onWrapperFocus } = this
-      if (onWrapperFocus) call(onWrapperFocus, e)
-    },
-    doWrapperBlur (e) {
-      const { onWrapperBlur } = this
-      if (onWrapperBlur) call(onWrapperBlur, e)
-    },
-    updateTextAreaStyle () {
-      const textarea = this.$refs.textarea
-      const {
-        paddingTop: stylePaddingTop,
-        paddingBottom: stylePaddingBottom,
-        lineHeight: styleLineHeight
-      } = window.getComputedStyle(textarea)
-      const paddingTop = Number(stylePaddingTop.slice(0, -2))
-      const paddingBottom = Number(stylePaddingBottom.slice(0, -2))
-      const lineHeight = Number(styleLineHeight.slice(0, -2))
-      if (this.autosize.minRows) {
-        const minRows = Math.max(this.autosize.minRows, 1)
-        const styleMinHeight =
-          paddingTop + paddingBottom + lineHeight * minRows + 'px'
-        this.$refs.textareaMirrow.style.minHeight = styleMinHeight
-      }
-      if (this.autosize.maxRows) {
-        const maxRows = Math.max(
-          this.autosize.maxRows,
-          this.autosize.minRows,
-          1
-        )
-        const styleMaxHeight =
-          paddingTop + paddingBottom + lineHeight * maxRows + 'px'
-        this.$refs.textareaMirrow.style.maxHeight = styleMaxHeight
-      }
-    },
-    handleCompositionStart () {
-      this.isComposing = true
-    },
-    handleCompositionEnd (e) {
-      this.isComposing = false
-      if (e.target === this.$refs.secondInput) {
-        this.handleInput(e, 1)
-      } else {
-        this.handleInput(e, 0)
-      }
-    },
-    handleInput (e, index) {
-      if (this.isComposing) return
-      const changedValue = e.target.value
-      if (!this.pair) {
-        this.doInput(changedValue)
-      } else {
-        let { mergedValue: value } = this
-        if (!Array.isArray(value)) {
-          value = [null, null]
-        } else {
-          value = [...value]
+    return {
+      // DOM ref
+      wrapperRef,
+      inputRef,
+      input2Ref,
+      textareaRef,
+      textareaMirrorRef,
+      // value
+      uncontrolledValue: uncontrolledValueRef,
+      mergedValue: mergedValueRef,
+      mergedPlaceholder: mergedPlaceholderRef,
+      showPlaceholder1: showPlaceholder1Ref,
+      showPlaceholder2: showPlaceholder2Ref,
+      showTextareaPlaceholder: showTextareaPlaceholderRef,
+      mergedFocus: mergedFocusRef,
+      isComposing: isComposingRef,
+      inputFocused: inputFocusedRef,
+      showClearButton,
+      mergedSize: mergedSizeRef,
+      // methods
+      focus,
+      ...methods,
+      ...useConfig(props),
+      cssVars: computed(() => {
+        const { value: size } = mergedSizeRef
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            color,
+            borderRadius,
+            paddingLeft,
+            paddingRight,
+            textColor,
+            caretColor,
+            textDecorationColor,
+            border,
+            borderDisabled,
+            borderHover,
+            borderFocus,
+            placeholderColor,
+            placeholderColorDisabled,
+            lineHeightTextarea,
+            colorDisabled,
+            colorFocus,
+            textColorDisabled,
+            boxShadowFocus,
+            iconSize,
+            [createKey('fontSize', size)]: fontSize,
+            [createKey('height', size)]: height
+          }
+        } = themeRef.value
+        return {
+          '--ip-bezier': cubicBezierEaseInOut,
+          '--ip-color': color,
+          '--ip-font-size': fontSize,
+          '--ip-border-radius': borderRadius,
+          '--ip-height': height,
+          '--ip-padding-left': paddingLeft,
+          '--ip-padding-right': paddingRight,
+          '--ip-text-color': textColor,
+          '--ip-caret-color': caretColor,
+          '--ip-text-decoration-color': textDecorationColor,
+          '--ip-border': border,
+          '--ip-border-disabled': borderDisabled,
+          '--ip-border-hover': borderHover,
+          '--ip-border-focus': borderFocus,
+          '--ip-placeholder-color': placeholderColor,
+          '--ip-placeholder-color-disabled': placeholderColorDisabled,
+          '--ip-icon-size': iconSize,
+          '--ip-line-height-textarea': lineHeightTextarea,
+          '--ip-color-disabled': colorDisabled,
+          '--ip-color-focus': colorFocus,
+          '--ip-text-color-disabled': textColorDisabled,
+          '--ip-box-shadow-focus': boxShadowFocus
         }
-        value[index] = changedValue
-        this.doInput(value)
-      }
-      /** force update to sync input's view with value */
-      this.$forceUpdate()
-    },
-    handleInputBlur (e) {
-      this.doInputBlur(e)
-      const { input, secondInput, textarea, wrapper } = this.$refs
-      if (e.relatedTarget === wrapper) {
-        this.doDeactivate()
-      }
-      if (
-        !(
-          e.relatedTarget === input ||
-          e.relatedTarget === secondInput ||
-          e.relatedTarget === textarea
-        )
-      ) {
-        this.inputFocused = false
-      }
-      this.dealWithEvent(e, 'blur')
-    },
-    handleInputFocus (e) {
-      this.doInputFocus(e)
-      this.focused = true
-      this.inputFocused = true
-      this.doActivate()
-      this.dealWithEvent(e, 'focus')
-    },
-    handleWrapperBlur (e) {
-      if (this.passivelyActivated) {
-        this.doWrapperBlur(e)
-        this.dealWithEvent(e, 'blur')
-      }
-    },
-    handleWrapperFocus (e) {
-      if (this.passivelyActivated) {
-        this.focused = true
-        this.doWrapperFocus(e)
-        this.dealWithEvent(e, 'focus')
-      }
-    },
-    dealWithEvent (e, type) {
-      const { input, secondInput, textarea, wrapper } = this.$refs
-      if (
-        e.relatedTarget === input ||
-        e.relatedTarget === secondInput ||
-        e.relatedTarget === textarea ||
-        e.relatedTarget === wrapper
-      ) {
-        /**
-         * activeElement transfer inside the input, do nothing
-         */
-      } else {
-        if (type === 'focus') {
-          this.doFocus(e)
-          this.focused = true
-        } else if (type === 'blur') {
-          this.doBlur(e)
-          this.focused = false
-        }
-      }
-    },
-    handleKeyUp (e) {
-      this.doKeyUp(e)
-    },
-    handleChange (e) {
-      this.doChange(e.target.value)
-    },
-    handleClick (e) {
-      this.doClick(e)
-    },
-    handleClear (e) {
-      this.doClear(e)
-      if (this.pair) {
-        this.doInput([])
-      } else {
-        this.doInput('')
-      }
-    },
-    handleMouseEnter () {
-      this.hover = true
-    },
-    handleMouseLeave () {
-      this.hover = false
-    },
-    handleWrapperKeyDownEnter (e) {
-      if (this.passivelyActivated) {
-        if (this.inputFocused && this.deactivateOnEnter) {
-          this.handleWrapperKeyDownEsc()
-          return
-        }
-        e.preventDefault()
-        if (this.type === 'textarea') {
-          this.$refs.textarea.focus()
-        } else {
-          this.$refs.input.focus()
-        }
-      }
-    },
-    handleWrapperKeyDownEsc () {
-      if (this.passivelyActivated) {
-        this.inputFocused = false
-        this.$nextTick(() => {
-          this.$refs.wrapper.focus()
-        })
-      }
-    },
-    focus () {
-      const refs = this.$refs
-      if (this.passivelyActivated) {
-        refs.wrapper.focus()
-      } else {
-        if (refs.textarea) refs.textarea.focus()
-        else if (refs.input) refs.input.focus()
-      }
+      })
     }
   }
-}
+})
 </script>
diff --git a/src/input/src/InputGroup.vue b/src/input/src/InputGroup.vue
index 4c81a3541..7a1583a03 100644
--- a/src/input/src/InputGroup.vue
+++ b/src/input/src/InputGroup.vue
@@ -5,12 +5,16 @@
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles/input-group'
+import { defineComponent } from 'vue'
+import { useTheme } from '../../_mixins'
+import { inputLight } from '../styles'
+import style from './styles/input-group.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'InputGroup',
-  cssrName: 'Input',
-  mixins: [configurable, themeable, withCssr(styles)]
-}
+  props: useTheme.props,
+  setup (props) {
+    useTheme('Input', 'InputGroup', style, inputLight, props)
+  }
+})
 </script>
diff --git a/src/input/src/InputGroupLabel.vue b/src/input/src/InputGroupLabel.vue
index 8a8e95aa4..2bc73bccf 100644
--- a/src/input/src/InputGroupLabel.vue
+++ b/src/input/src/InputGroupLabel.vue
@@ -1,10 +1,8 @@
 <template>
   <div
     class="n-input-group-label"
-    :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme,
-      [`n-input-group-label--${size}-size`]: true
-    }"
+    :class="`n-input-group-label--${size}-size`"
+    :style="cssVars"
   >
     <slot />
     <div class="n-input-group-label__border" />
@@ -12,18 +10,53 @@
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles/input-group-label'
+import { computed, defineComponent } from 'vue'
+import { useTheme } from '../../_mixins'
+import { createKey } from '../../_utils'
+import { inputLight } from '../styles'
+import style from './styles/input-group-label.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'InputGroupLabel',
-  cssrName: 'Input',
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
     size: {
       type: String,
       default: 'medium'
     }
+  },
+  setup (props) {
+    const themeRef = useTheme(
+      'Input',
+      'InputGroupLabel',
+      style,
+      inputLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const { size } = props
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            groupLabelColor,
+            borderRadius,
+            textColor,
+            lineHeight,
+            fontSize,
+            [createKey('height', size)]: height
+          }
+        } = themeRef.value
+        return {
+          '--ip-bezier': cubicBezierEaseInOut,
+          '--ip-group-label-color': groupLabelColor,
+          '--ip-border-radius': borderRadius,
+          '--ip-text-color': textColor,
+          '--ip-font-size': fontSize,
+          '--ip-line-height': lineHeight,
+          '--ip-height': height
+        }
+      })
+    }
   }
-}
+})
 </script>
diff --git a/src/input/src/styles/input-group-label.cssr.js b/src/input/src/styles/input-group-label.cssr.js
new file mode 100644
index 000000000..71da1704a
--- /dev/null
+++ b/src/input/src/styles/input-group-label.cssr.js
@@ -0,0 +1,37 @@
+import { cB, cE } from '../../../_utils/cssr'
+
+// vars:
+// --ip-bezier
+// --ip-group-label-color
+// --ip-border-radius
+// --ip-text-color
+// --ip-font-size
+// --ip-height
+export default cB('input-group-label', `
+  position: relative;
+  user-select: none;
+  box-sizing: border-box;
+  padding: 0 12px;
+  display: inline-block;
+  border-radius: var(--ip-border-radius);
+  background-color: var(--ip-group-label-color);
+  color: var(--ip-text-color);
+  font-size: var(--ip-font-size);
+  line-height: var(--ip-height);
+  height: var(--ip-height);
+  transition: 
+    color .3s var(--ip-bezier),
+    background-color .3s var(--ip-bezier),
+    box-shadow .3s var(--ip-bezier);
+`, [
+  cE('border', `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: inherit;
+    border: var(--ip-border);
+    transition: 'border-color .3s var(--ip-bezier);
+  `)
+])
diff --git a/src/input/src/styles/input-group-label/index.js b/src/input/src/styles/input-group-label/index.js
deleted file mode 100644
index fd9338f5d..000000000
--- a/src/input/src/styles/input-group-label/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/input/src/styles/input-group-label/themed-base.cssr.js b/src/input/src/styles/input-group-label/themed-base.cssr.js
deleted file mode 100644
index 98c65cbd6..000000000
--- a/src/input/src/styles/input-group-label/themed-base.cssr.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { cTB, c, cM, cE, createKey } from '../../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: {
-        cubicBezierEaseInOut
-      },
-      $local: {
-        borderRadius,
-        groupLabelColor,
-        textColor,
-        boxShadow,
-        border
-      }
-    } = props
-    return cTB('input-group-label', {
-      position: 'relative',
-      userSelect: 'none',
-      boxSizing: 'border-box',
-      padding: '0 12px',
-      display: 'inline-block',
-      borderRadius,
-      backgroundColor: groupLabelColor,
-      color: textColor,
-      boxShadow,
-      transition: `
-        color .3s ${cubicBezierEaseInOut},
-        background-color .3s ${cubicBezierEaseInOut},
-        box-shadow .3s ${cubicBezierEaseInOut}
-      `
-    }, [
-      ['small', 'medium', 'large'].map(size => {
-        const {
-          $local: {
-            [createKey('fontSize', size)]: fontSize,
-            [createKey('height', size)]: height
-          }
-        } = props
-        return cM(size + '-size', {
-          fontSize,
-          lineHeight: height,
-          height
-        })
-      }),
-      cE('border', {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        borderRadius: 'inherit',
-        border,
-        transition: `border-color .3s ${cubicBezierEaseInOut}`
-      })
-    ])
-  }
-])
diff --git a/src/input/src/styles/input-group.cssr.js b/src/input/src/styles/input-group.cssr.js
new file mode 100644
index 000000000..a9466124a
--- /dev/null
+++ b/src/input/src/styles/input-group.cssr.js
@@ -0,0 +1,155 @@
+import { c, cB, cE } from '../../../_utils/cssr'
+
+export default cB('input-group', `
+  display: inline-flex;
+  width: 100%;
+  flex-wrap: nowrap;
+  vertical-align: bottom;
+`, [
+  c('>', [
+    cB('input', [
+      c('&:not(:last-child)', `
+        border-top-right-radius: 0!important;
+        border-bottom-right-radius: 0!important;
+      `, [
+        cE('box-shadow, state-border, border', `
+          border-top-right-radius: 0!important;
+          border-bottom-right-radius: 0!important;
+        `)
+      ]),
+      c('&:not(:first-child)', `
+        border-top-left-radius: 0!important;
+        border-bottom-left-radius: 0!important;
+        margin-left: -1px!important;
+      `, [
+        cE('box-shadow, state-border, border', `
+          border-top-left-radius: 0!important;
+          border-bottom-left-radius: 0!important;
+        `)
+      ])
+    ]),
+    cB('input-number', [
+      c('&:not(:last-child)', `
+        border-top-right-radius: 0!important;
+        border-bottom-right-radius: 0!important;
+      `, [
+        cE('input, add-button, border-mask, border', `
+          border-top-right-radius: 0!important;
+          border-bottom-right-radius: 0!important;
+        `, [
+          cB('input-number-button-border-mask', `
+            border-top-right-radius: 0!important;
+            border-bottom-right-radius: 0!important;
+          `),
+          cB('input-number-button-border', `
+            border-top-right-radius: 0!important;
+            border-bottom-right-radius: 0!important;
+          `),
+          cB('input-number-button-boundary', `  
+            background-color: transparent !important;
+          `)
+        ])
+      ]),
+      c('&:not(:first-child)', `
+        border-top-left-radius: 0!important;
+        border-bottom-left-radius: 0!important;
+      `, [
+        cE('input, minus-button, border-mask, border', `
+          border-top-left-radius: 0!important;
+          border-bottom-left-radius: 0!important;
+        `, [
+          cB('input-number-button-border-mask', `
+            border-top-left-radius: 0!important;
+            border-bottom-left-radius: 0!important;
+          `),
+          cB('input-number-button-boundary', `
+            background-color: transparent !important;
+          `)
+        ])
+      ])
+    ]),
+    cB('button', [
+      c('&:not(:last-child)', `
+        border-top-right-radius: 0!important;
+        border-bottom-right-radius: 0!important;
+      `, [
+        cE('border-mask, border', `
+          border-top-right-radius: 0!important;
+          border-bottom-right-radius: 0!important;
+        `)
+      ]),
+      c('&:not(:first-child)', `
+        border-top-left-radius: 0!important;
+        border-bottom-left-radius: 0!important;
+      `, [
+        cE('border-mask, border', `
+          border-top-left-radius: 0!important;
+          border-bottom-left-radius: 0!important;
+        `)
+      ])
+    ]),
+    c('*', [
+      c('&:not(:last-child)', `
+        border-top-right-radius: 0!important;
+        border-bottom-right-radius: 0!important;
+      `, [
+        c('>', [
+          cB('input', `
+            border-top-right-radius: 0!important;
+            border-bottom-right-radius: 0!important;
+          `, [
+            cE('box-shadow, state-border, border', `
+              border-top-right-radius: 0!important;
+              border-bottom-right-radius: 0!important;
+            `)
+          ]),
+          cB('base-selection', [
+            cB('base-selection-label', `
+              border-top-right-radius: 0!important;
+              border-bottom-right-radius: 0!important;
+            `),
+            cB('base-selection-tags', `
+              border-top-right-radius: 0!important;
+              border-bottom-right-radius: 0!important;
+            `),
+            cE('box-shadow, border, state-border', `
+              border-top-right-radius: 0!important;
+              border-bottom-right-radius: 0!important;
+            `)
+          ])
+        ])
+      ]),
+      c('&:not(:first-child)', `
+        margin-left: -1px!important;
+        border-top-left-radius: 0!important;
+        border-bottom-left-radius: 0!important;
+      `, [
+        c('>', [
+          cB('input', `
+            border-top-left-radius: 0!important;
+            border-bottom-left-radius: 0!important;
+          `, [
+            cE('box-shadow, border, state-border', `
+              border-top-left-radius: 0!important;
+              border-bottom-left-radius: 0!important;
+            `)
+          ]),
+          cB('base-selection', [
+            cB('base-selection-label', `
+              border-top-left-radius: 0!important;
+              border-bottom-left-radius: 0!important;
+            `),
+            cB('base-selection-tags', `
+              border-top-left-radius: 0!important;
+              border-bottom-left-radius: 0!important;
+            `),
+            cE('box-shadow, border, state-border', `
+              border-top-left-radius: 0!important;
+              border-bottom-left-radius: 0!important;
+            `)
+          ])
+        ])
+      ])
+    ])
+  ])
+])
diff --git a/src/input/src/styles/input-group/base.cssr.js b/src/input/src/styles/input-group/base.cssr.js
deleted file mode 100644
index cd6eda567..000000000
--- a/src/input/src/styles/input-group/base.cssr.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import { c, cB, cE } from '../../../../_utils/cssr'
-
-export default c([
-  () => {
-    return cB('input-group', {
-      raw: `
-        display: inline-flex;
-        width: 100%;
-        flex-wrap: nowrap;
-        vertical-align: bottom;
-      `
-    }, [
-      c('>', [
-        cB('input', [
-          c('&:not(:last-child)', {
-            raw: `
-              border-top-right-radius: 0!important;
-              border-bottom-right-radius: 0!important;
-            `
-          }, [
-            cE('box-shadow, state-border, border', {
-              raw: `
-                border-top-right-radius: 0!important;
-                border-bottom-right-radius: 0!important;
-              `
-            })
-          ]),
-          c('&:not(:first-child)', {
-            raw: `
-              border-top-left-radius: 0!important;
-              border-bottom-left-radius: 0!important;
-              margin-left: -1px!important;
-            `
-          }, [
-            cE('box-shadow, state-border, border', {
-              raw: `
-                border-top-left-radius: 0!important;
-                border-bottom-left-radius: 0!important;
-              `
-            })
-          ])
-        ]),
-        cB('input-number', [
-          c('&:not(:last-child)', {
-            raw: `
-              border-top-right-radius: 0!important;
-              border-bottom-right-radius: 0!important;
-            `
-          }, [
-            cE('input, add-button, border-mask, border', {
-              raw: `
-                border-top-right-radius: 0!important;
-                border-bottom-right-radius: 0!important;
-              `
-            }, [
-              cB('input-number-button-border-mask', {
-                raw: `
-                  border-top-right-radius: 0!important;
-                  border-bottom-right-radius: 0!important;
-                `
-              }),
-              cB('input-number-button-border', {
-                raw: `
-                  border-top-right-radius: 0!important;
-                  border-bottom-right-radius: 0!important;
-                `
-              }),
-              cB('input-number-button-boundary', {
-                raw: `  
-                  background-color: transparent !important;
-                `
-              })
-            ])
-          ]),
-          c('&:not(:first-child)', {
-            raw: `
-              border-top-left-radius: 0!important;
-              border-bottom-left-radius: 0!important;
-            `
-          }, [
-            cE('input, minus-button, border-mask, border', {
-              raw: `
-                border-top-left-radius: 0!important;
-                border-bottom-left-radius: 0!important;
-              `
-            }, [
-              cB('input-number-button-border-mask', {
-                raw: `
-                  border-top-left-radius: 0!important;
-                  border-bottom-left-radius: 0!important;
-                `
-              }),
-              cB('input-number-button-boundary', {
-                raw: `
-                  background-color: transparent !important;
-                `
-              })
-            ])
-          ])
-        ]),
-        cB('button', [
-          c('&:not(:last-child)', {
-            raw: `
-              border-top-right-radius: 0!important;
-              border-bottom-right-radius: 0!important;
-            `
-          }, [
-            cE('border-mask, border', {
-              raw: `
-                border-top-right-radius: 0!important;
-                border-bottom-right-radius: 0!important;
-              `
-            })
-          ]),
-          c('&:not(:first-child)', {
-            raw: `
-              border-top-left-radius: 0!important;
-              border-bottom-left-radius: 0!important;
-            `
-          }, [
-            cE('border-mask, border', {
-              raw: `
-                border-top-left-radius: 0!important;
-                border-bottom-left-radius: 0!important;
-              `
-            })
-          ])
-        ]),
-        c('*', [
-          c('&:not(:last-child)', {
-            raw: `
-              border-top-right-radius: 0!important;
-              border-bottom-right-radius: 0!important;
-            `
-          }, [
-            c('>', [
-              cB('input', {
-                raw: `
-                  border-top-right-radius: 0!important;
-                  border-bottom-right-radius: 0!important;
-                `
-              }, [
-                cE('box-shadow, state-border, border', {
-                  raw: `
-                    border-top-right-radius: 0!important;
-                    border-bottom-right-radius: 0!important;
-                  `
-                })
-              ]),
-              cB('base-selection', [
-                cB('base-selection-label', {
-                  raw: `
-                    border-top-right-radius: 0!important;
-                    border-bottom-right-radius: 0!important;
-                  `
-                }),
-                cB('base-selection-tags', {
-                  raw: `
-                    border-top-right-radius: 0!important;
-                    border-bottom-right-radius: 0!important;
-                  `
-                }),
-                cE('box-shadow, border, state-border', {
-                  raw: `
-                    border-top-right-radius: 0!important;
-                    border-bottom-right-radius: 0!important;
-                  `
-                })
-              ])
-            ])
-          ]),
-          c('&:not(:first-child)', {
-            raw: `
-              margin-left: -1px!important;
-              border-top-left-radius: 0!important;
-              border-bottom-left-radius: 0!important;
-            `
-          }, [
-            c('>', [
-              cB('input', {
-                raw: `
-                  border-top-left-radius: 0!important;
-                  border-bottom-left-radius: 0!important;
-                `
-              }, [
-                cE('box-shadow, border, state-border', {
-                  raw: `
-                    border-top-left-radius: 0!important;
-                    border-bottom-left-radius: 0!important;
-                  `
-                })
-              ]),
-              cB('base-selection', [
-                cB('base-selection-label', {
-                  raw: `
-                    border-top-left-radius: 0!important;
-                    border-bottom-left-radius: 0!important;
-                  `
-                }),
-                cB('base-selection-tags', {
-                  raw: `
-                    border-top-left-radius: 0!important;
-                    border-bottom-left-radius: 0!important;
-                  `
-                }),
-                cE('box-shadow, border, state-border', {
-                  raw: `
-                    border-top-left-radius: 0!important;
-                    border-bottom-left-radius: 0!important;
-                  `
-                })
-              ])
-            ])
-          ])
-        ])
-      ])
-    ])
-  }
-])
diff --git a/src/input/src/styles/input-group/index.js b/src/input/src/styles/input-group/index.js
deleted file mode 100644
index 72ffee344..000000000
--- a/src/input/src/styles/input-group/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/input/src/styles/input.cssr.js b/src/input/src/styles/input.cssr.js
new file mode 100644
index 000000000..8119e243b
--- /dev/null
+++ b/src/input/src/styles/input.cssr.js
@@ -0,0 +1,284 @@
+import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr'
+import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
+
+// vars:
+// --ip-bezier
+// --ip-color
+// --ip-font-size
+// --ip-border-radius
+// --ip-height
+// --ip-padding-left
+// --ip-padding-right
+// --ip-text-color
+// --ip-text-color-disabled
+// --ip-caret-color
+// --ip-text-decoration-color
+// --ip-border
+// --ip-border-disabled
+// --ip-border-hover
+// --ip-border-focus
+// --ip-placeholder-color
+// --ip-placeholder-color-disabled
+// --ip-line-height-textarea
+// --ip-color-disabled
+// --ip-color-focus
+// --ip-box-shadow-focus
+// --ip-icon-size
+export default c([
+  cB('input', `
+    line-height: 1.5;
+    z-index: auto;
+    outline: none;
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    border-radius: var(--ip-border-radius);
+    background-color: var(--ip-color);
+    transition: background-color .3s var(--ip-bezier);
+    --ip-padding-vertical: calc((var(--ip-height) - 1.5 * var(--ip-font-size)) / 2);
+  `, [
+    cE('input', {
+      height: 'var(--ip-height)'
+    }),
+    cE('input, textarea, textarea-mirror, splitor, placeholder', `
+      padding-left: var(--ip-padding-left);
+      padding-right: var(--ip-padding-right);
+      padding-top: var(--ip-padding-vertical);
+      padding-bottom: var(--ip-padding-vertical);
+      font-size: var(--ip-font-size);
+      line-height: 1.5;
+    `),
+    // cM('suffix, clearable', [
+    //   cM('split', [
+    //     cE('input', [
+    //       cM('second', {
+    //         // paddingRight: `${paddingIcon} !important`
+    //       }, [
+    //         c('& +', [
+    //           cE('placeholder', {
+    //             // right: `${paddingIcon} !important`
+    //           })
+    //         ])
+    //       ])
+    //     ])
+    //   ]),
+    //   cNotM('split', [
+    //     cE('input', [
+    //       cM('first', {
+    //         // paddingRight: `${paddingIcon} !important`
+    //       })
+    //     ]),
+    //     cE('placeholder', {
+    //       //right: `${paddingIcon} !important`
+    //     })
+    //   ])
+    // ]),
+    // cM('prefix', [
+    //   cNotM('split', [
+    //     cE('placeholder', {
+    //       left: `${paddingIcon} !important`
+    //     })
+    //   ]),
+    //   cM('split', [
+    //     cE('input', [
+    //       cM('first', [
+    //         c('& +', [
+    //           cE('placeholder', {
+    //             left: `${paddingIcon} !important`
+    //           })
+    //         ])
+    //       ])
+    //     ])
+    //   ]),
+    //   cE('input', [
+    //     cM('first', {
+    //       paddingLeft: `${paddingIcon} !important`
+    //     })
+    //   ])
+    // ]),
+    cM('round', [
+      cNotM('textarea', {
+        borderRadius: 'calc(var(--ip-height) / 2)'
+      })
+    ]),
+    cM('split', {
+      display: 'inline-flex'
+    }, [
+      cE('input, placeholder', {
+        textAlign: 'center'
+      })
+    ]),
+    cNotM('textarea', [
+      cE('placeholder', {
+        whiteSpace: 'nowrap'
+      })
+    ]),
+    cM('textarea', [
+      cE('placeholder', {
+        whiteSpace: 'unset'
+      })
+    ]),
+    cM('disabled', {
+      cursor: 'not-allowed',
+      backgroundColor: 'var(--ip-color-disabled)'
+    }, [
+      cE('border', {
+        border: 'var(--ip-border-disabled)'
+      }),
+      cE('input, textarea', {
+        cursor: 'not-allowed',
+        color: 'var(--ip-text-color-disabled)'
+      }),
+      cE('placeholder', {
+        color: 'var(--ip-placeholder-color-disabled)'
+      }),
+      cE('splitor', {
+        color: 'var(--ip-text-color-disabled)'
+      })
+    ]),
+    cNotM('disabled', [
+      cM('focus', {
+        backgroundColor: 'var(--ip-color-focus)'
+      }, [
+        cE('state-border', {
+          border: 'var(--ip-border-focus)',
+          boxShadow: 'var(--ip-box-shadow-focus)'
+        })
+      ]),
+      c('&:hover', [
+        cE('state-border', {
+          border: 'var(--ip-border-focus)'
+        })
+      ])
+    ]),
+    cE('border, state-border', `
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      border-radius: inherit;
+      border: var(--ip-border);
+      transition:
+        box-shadow .3s var(--ip-bezier),
+        border-color .3s var(--ip-bezier);
+    `),
+    cE('state-border', {
+      borderColor: 'transparent',
+      zIndex: 1
+    }),
+    cE('placeholder', `
+      box-sizing: border-box;
+      pointer-events: none;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      transition: color .3s var(--ip-bezier);
+      color: var(--ip-placeholder-color);
+    `),
+    cE('suffix, prefix', `
+      position: absolute;
+      line-height: 1;
+      height: 0;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      top: 50%;
+      width: var(--ip-icon-size);
+    `, [
+      cB('base-clear-button', {
+        fontSize: 'var(--ip-icon-size)'
+      }),
+      cB('icon', {
+        justifySelf: 'center',
+        fontSize: 'var(--ip-icon-color)',
+        color: 'var(--ip-icon-color)',
+        transition: 'color .3s var(--ip-bezier)'
+      })
+    ]),
+    cE('suffix', {
+      justifyContent: 'flex-end',
+      right: '12px'
+    }, [
+      fadeInScaleUpTransition() // button suffix
+    ]),
+    cE('prefix', {
+      justifyContent: 'flex-start',
+      left: '12px'
+    }),
+    cE('textarea, textarea-mirror', `
+      display: inline-block;
+      vertical-align: bottom;
+      box-sizing: border-box;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: var(--ip-line-height-textarea);
+      margin: 0;
+      resize: vertical;
+      padding-left: 14px;
+      padding-right: 14px;
+    `),
+    cE('textarea', [
+      cM('autosize', `
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        resize: none;
+      `)
+    ]),
+    cE('textarea-mirror', `
+      overflow: hidden;
+      visibility: hidden;
+      position: static;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+    `),
+    cE('input, textarea', `
+      -webkit-appearance: none;
+      box-sizing: border-box;
+      border: none;
+      font-size: inherit;
+      outline: none;
+      font-family: inherit;
+      width: 100%;
+      background-color: transparent;
+      min-width: 0;
+      text-decoration-color: var(--ip-text-decoration-color);
+      color: var(--ip-text-color);
+      caret-color: var(--ip-caret-color);
+      transition:
+        caret-color .3s var(--ip-bezier),
+        color .3s var(--ip-bezier),
+        text-decoration-color .3s var(--ip-bezier);
+    `, [
+      c('&::placeholder', {
+        color: 'transparent'
+      })
+    ]),
+    cE('splitor', {
+      transition: 'color .3s var(--ip-bezier)',
+      color: 'var(--ip-text-color)',
+      paddingLeft: '0 !important',
+      paddingRight: '0 !important'
+    }),
+    cB('input-clear', {
+      display: 'flex',
+      marginRight: '4px'
+    }),
+    cB('input-first-input', {
+      flexGrow: 1,
+      position: 'relative'
+    }),
+    cB('input-second-input', {
+      flexGrow: 1,
+      position: 'relative'
+    })
+  ])
+])
diff --git a/src/input/src/styles/input/index.js b/src/input/src/styles/input/index.js
deleted file mode 100644
index 1ca4ff723..000000000
--- a/src/input/src/styles/input/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-import sizeStyle from './themed-size.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  },
-  {
-    key: 'mergedSize',
-    watch: ['mergedSize', 'mergedTheme'],
-    CNode: sizeStyle
-  }
-]
diff --git a/src/input/src/styles/input/themed-base.cssr.js b/src/input/src/styles/input/themed-base.cssr.js
deleted file mode 100644
index 9e374e133..000000000
--- a/src/input/src/styles/input/themed-base.cssr.js
+++ /dev/null
@@ -1,309 +0,0 @@
-import { cTB, c, cB, cE, cM, cNotM, insideFormItem, createKey } from '../../../../_utils/cssr'
-import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up'
-
-export default c([
-  ({ props }) => {
-    const {
-      $local: {
-        placeholderColor,
-        color,
-        border,
-        borderHover,
-        colorFocus,
-        borderFocus,
-        boxShadowFocus,
-        iconColor,
-        iconOpacity,
-        textColor,
-        caretColor,
-        borderDisabled,
-        colorDisabled,
-        textColorDisabled,
-        placeholderColorDisabled,
-        textDecorationColor,
-        lineHeightTextarea,
-        borderRadius,
-        iconSize
-      },
-      $global: {
-        cubicBezierEaseInOut
-      }
-    } = props
-    return cTB('input', {
-      raw: `
-        z-index: auto;
-        outline: none;
-        box-sizing: border-box;
-        position: relative;
-        width: 100%;
-        display: inline-block;
-      `,
-      borderRadius,
-      backgroundColor: color,
-      transition: `
-        box-shadow .3s ${cubicBezierEaseInOut},
-        background-color .3s ${cubicBezierEaseInOut}
-      `
-    }, [
-      cM('split', {
-        display: 'inline-flex'
-      }, [
-        cE('input, placeholder', {
-          textAlign: 'center'
-        })
-      ]),
-      cM('textarea', {
-        raw: `
-          padding-left: 0;
-          padding-right: 0;
-        `
-      }, [
-        cE('placeholder', {
-          whiteSpace: 'unset'
-        })
-      ]),
-      cM('disabled', {
-        cursor: 'not-allowed',
-        backgroundColor: colorDisabled
-      }, [
-        cE('border', {
-          border: borderDisabled
-        }),
-        cE('input, textarea', {
-          cursor: 'not-allowed',
-          color: textColorDisabled
-        }),
-        cE('placeholder', {
-          color: placeholderColorDisabled
-        }),
-        cE('splitor', {
-          color: textColorDisabled
-        })
-      ]),
-      cM('bordered', [
-        cE('border', {
-          border
-        })
-      ]),
-      cNotM('disabled', [
-        cM('focus', {
-          backgroundColor: colorFocus
-        }, [
-          cE('state-border', {
-            border: borderFocus
-          }),
-          cE('box-shadow', {
-            boxShadow: boxShadowFocus
-          })
-        ]),
-        c('&:hover', [
-          cE('state-border', {
-            border: borderHover
-          })
-        ])
-      ]),
-      cE('border, state-border', {
-        raw: `
-          box-sizing: border-box;
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          pointer-events: none;
-          transition: border-color .3s ${cubicBezierEaseInOut};
-        `,
-        border,
-        borderColor: 'transparent',
-        borderRadius
-      }),
-      cE('state-border', {
-        zIndex: 1
-      }),
-      cE('box-shadow', {
-        raw: `
-          z-index: 1;
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          pointer-events: none;
-        `,
-        border,
-        borderColor: 'transparent',
-        borderRadius,
-        transition: `
-          border-color .3s ${cubicBezierEaseInOut},
-          box-shadow .3s ${cubicBezierEaseInOut}
-        `
-      }),
-      cE('placeholder', {
-        raw: `
-          white-space: nowrap;
-          pointer-events: none;
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          overflow: hidden;
-          padding-left: 0 !important;
-          padding-right: 0 !important;
-        `,
-        color: placeholderColor,
-        transition: `color .3s ${cubicBezierEaseInOut}`
-      }),
-      cE('suffix, prefix', {
-        raw: `
-          position: absolute;
-          line-height: 1;
-          height: 0;
-          white-space: nowrap;
-          display: flex;
-          align-items: center;
-          top: 50%;
-        `,
-        width: iconSize
-      }, [
-        cB('base-clear-button', {
-          fontSize: iconSize
-        }),
-        cB('icon', {
-          justifySelf: 'center',
-          fontSize: iconSize,
-          color: iconColor,
-          transition: `color .3s ${cubicBezierEaseInOut}`
-        }, [
-          c('svg', {
-            opacity: iconOpacity
-          })
-        ])
-      ]),
-      cE('suffix', {
-        justifyContent: 'flex-end',
-        right: '12px'
-      }, [
-        fadeInScaleUpTransition() // button suffix
-      ]),
-      cE('prefix', {
-        justifyContent: 'flex-start',
-        left: '12px'
-      }),
-      cE('textarea, textarea-mirror', {
-        raw: `
-          display: inline-block;
-          vertical-align: bottom;
-          box-sizing: border-box;
-          font-family: inherit;
-          font-size: inherit;
-          line-height: ${lineHeightTextarea};
-          margin: 0;
-          resize: vertical;
-          padding-left: 14px;
-          padding-right: 14px;
-        `
-      }),
-      cE('textarea', [
-        cM('autosize', {
-          raw: `
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            resize: none;
-          `
-        })
-      ]),
-      cE('textarea-mirror', {
-        raw: `
-          overflow: hidden;
-          visibility: hidden;
-          position: static;
-          white-space: pre-wrap;
-          overflow-wrap: break-word;
-        `
-      }),
-      cE('input, textarea', {
-        raw: `
-          -webkit-appearance: none;
-          box-sizing: border-box;
-          border: none;
-          font-size: inherit;
-          outline: none;
-          font-family: inherit;
-          width: 100%;
-          background-color: transparent;
-          min-width: 0;
-          text-decoration-color: ${textDecorationColor};
-          color: ${textColor};
-          caret-color: ${caretColor};
-          transition:
-            caret-color .3s ${cubicBezierEaseInOut},
-            color .3s ${cubicBezierEaseInOut},
-            text-decoration-color .3s ${cubicBezierEaseInOut};
-        `
-      }, [
-        c('&::placeholder', {
-          color: 'transparent'
-        })
-      ]),
-      cE('splitor', {
-        transition: `color .3s ${cubicBezierEaseInOut}`,
-        color: textColor,
-        paddingLeft: '0 !important',
-        paddingRight: '0 !important'
-      }),
-      cB('input-clear', {
-        display: 'flex',
-        marginRight: '4px'
-      }),
-      cB('input-first-input', {
-        flexGrow: 1,
-        position: 'relative'
-      }),
-      cB('input-second-input', {
-        flexGrow: 1,
-        position: 'relative'
-      })
-    ])
-  },
-  ({ props }) => {
-    return [
-      'warning',
-      'error'
-    ].map(status => {
-      const palette = props.$local
-      return insideFormItem(
-        status,
-        cTB('input', [
-          cM('stateful', [
-            cE('state-border', {
-              border: palette[createKey('border', status)]
-            }),
-            cNotM('disabled', [
-              c('&:hover', [
-                cE('state-border', {
-                  border: palette[createKey('borderHover', status)]
-                })
-              ]),
-              cM('focus', {
-                backgroundColor: palette[createKey('colorFocus', status)]
-              }, [
-                cE('state-border', {
-                  border: palette[createKey('borderFocus', status)]
-                }),
-                cE('box-shadow', {
-                  boxShadow: palette[createKey('boxShadowFocus', status)]
-                })
-              ])
-            ]),
-            cE('input, textarea', {
-              caretColor: palette[createKey('caretColor', status)]
-            })
-          ])
-        ])
-      )
-    })
-  }
-])
diff --git a/src/input/src/styles/input/themed-size.cssr.js b/src/input/src/styles/input/themed-size.cssr.js
deleted file mode 100644
index 986813546..000000000
--- a/src/input/src/styles/input/themed-size.cssr.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { cTB, c, cE, cM, cNotM, createKey } from '../../../../_utils/cssr'
-import { depx, pxfy } from 'seemly'
-
-export default c([
-  ({ props }) => {
-    const size = props.$vm.mergedSize
-    const height = props.$local[createKey('height', size)]
-    const fontSize = props.$local[createKey('fontSize', size)]
-    const lineHeight = pxfy(Math.round(depx(fontSize) * 1.5))
-    const paddingTop = pxfy((depx(height) - depx(lineHeight)) / 2)
-    const borderRadiusRound = pxfy(depx(height) / 2)
-    const {
-      paddingLeft,
-      paddingRight,
-      paddingIcon
-    } = props.$local
-    return cTB('input', [
-      cM(size + '-size', {
-        lineHeight,
-        fontSize
-      }, [
-        cE('input', {
-          height
-        }),
-        cE('input, textarea, textarea-mirror, splitor, placeholder', {
-          paddingLeft,
-          paddingRight,
-          lineHeight,
-          fontSize,
-          paddingTop: paddingTop,
-          paddingBottom: paddingTop
-        }),
-        cE('placeholder', {
-          left: paddingLeft,
-          right: paddingRight
-        }),
-        cM('suffix, clearable', [
-          cM('split', [
-            cE('input', [
-              cM('second', {
-                paddingRight: `${paddingIcon} !important`
-              }, [
-                c('& +', [
-                  cE('placeholder', {
-                    right: `${paddingIcon} !important`
-                  })
-                ])
-              ])
-            ])
-          ]),
-          cNotM('split', [
-            cE('input', [
-              cM('first', {
-                paddingRight: `${paddingIcon} !important`
-              })
-            ]),
-            cE('placeholder', {
-              right: `${paddingIcon} !important`
-            })
-          ])
-        ]),
-        cM('prefix', [
-          cNotM('split', [
-            cE('placeholder', {
-              left: `${paddingIcon} !important`
-            })
-          ]),
-          cM('split', [
-            cE('input', [
-              cM('first', [
-                c('& +', [
-                  cE('placeholder', {
-                    left: `${paddingIcon} !important`
-                  })
-                ])
-              ])
-            ])
-          ]),
-          cE('input', [
-            cM('first', {
-              paddingLeft: `${paddingIcon} !important`
-            })
-          ])
-        ]),
-        cNotM('textarea', {
-          height
-        }),
-        cM('round', [
-          cNotM('textarea', {
-            borderRadius: borderRadiusRound
-          }, [
-            cE('input', {
-              paddingLeft: paddingLeft,
-              paddingRight: paddingRight
-            }),
-            cE('placeholder', {
-              left: paddingLeft,
-              right: paddingRight
-            }),
-            cE('box-shadow, border, state-border', {
-              borderRadius: borderRadiusRound
-            })
-          ])
-        ])
-      ])
-    ])
-  }
-])
diff --git a/src/input/styles/dark.js b/src/input/styles/dark.js
index 328475e54..d2c3d3a95 100644
--- a/src/input/styles/dark.js
+++ b/src/input/styles/dark.js
@@ -1,14 +1,15 @@
-import create from '../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { baseDark } from '../../_styles/base'
 import { baseClearButtonDark } from '../../_base/clear-button/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Input',
-  theme: 'dark',
-  peer: [baseDark, baseClearButtonDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    BaseClearButton: baseClearButtonDark
+  },
+  self (vars) {
     const {
       textColor2Overlay,
       textColor4Overlay,
@@ -80,4 +81,4 @@ export default create({
       caretColorError: errorColor
     }
   }
-})
+}
diff --git a/src/input/styles/light.js b/src/input/styles/light.js
index 8e988d064..086193742 100644
--- a/src/input/styles/light.js
+++ b/src/input/styles/light.js
@@ -1,14 +1,15 @@
-import create from '../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { baseLight } from '../../_styles/base'
 import { baseClearButtonLight } from '../../_base/clear-button/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Input',
-  theme: 'light',
-  peer: [baseLight, baseClearButtonLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    BaseClearButton: baseClearButtonLight
+  },
+  self (vars) {
     const {
       textColor2,
       textColor4,
@@ -82,4 +83,4 @@ export default create({
       caretColorError: errorColor
     }
   }
-})
+}