diff --git a/demo/SiteProvider.vue b/demo/SiteProvider.vue
index 33fae180c..ec643b9e3 100644
--- a/demo/SiteProvider.vue
+++ b/demo/SiteProvider.vue
@@ -4,6 +4,7 @@
     namespace="naive-ui-doc"
     :theme="theme"
     :unstable-theme="theme === 'dark' ? darkTheme : undefined"
+    :unstable-theme-overrides="overrides"
     :language="lang"
   >
     <n-loading-bar-provider ref="loadingBar">
@@ -22,7 +23,7 @@
 import { ref, computed } from 'vue'
 import Site from './Site.vue'
 import { useRoute, useRouter } from 'vue-router'
-import { darkTheme } from '../src/styles.new'
+import { darkTheme } from '../src'
 
 export default {
   name: 'SiteProvider',
@@ -81,7 +82,12 @@ export default {
       theme: themeRef,
       lang: langRef,
       // unstable
-      darkTheme
+      darkTheme,
+      overrides: {
+        // common: {
+        //   primaryColor: 'rgb(255, 0, 0)'
+        // }
+      }
     }
   }
 }
diff --git a/src/_base/README.md b/src/_base/README.md
index 20595e9fc..63e2ec607 100644
--- a/src/_base/README.md
+++ b/src/_base/README.md
@@ -2,5 +2,4 @@ Themeable components:
 
 - selection
 - select-menu
-- clear-button
-- close
+- clear
diff --git a/src/_base/clear-button/index.js b/src/_base/clear-button/index.js
deleted file mode 100644
index d502c67fa..000000000
--- a/src/_base/clear-button/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default } from './src/ClearButton.vue'
diff --git a/src/_base/clear-button/styles/index.js b/src/_base/clear-button/styles/index.js
deleted file mode 100644
index 69c2b104e..000000000
--- a/src/_base/clear-button/styles/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as baseClearButtonLight } from './light'
-export { default as baseClearButtonDark } from './dark'
diff --git a/src/_base/clear/index.js b/src/_base/clear/index.js
new file mode 100644
index 000000000..b9d4e2222
--- /dev/null
+++ b/src/_base/clear/index.js
@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export { default } from './src/Clear.vue'
diff --git a/src/_base/clear-button/src/ClearButton.vue b/src/_base/clear/src/Clear.vue
similarity index 81%
rename from src/_base/clear-button/src/ClearButton.vue
rename to src/_base/clear/src/Clear.vue
index 933175a90..dc3f586f2 100644
--- a/src/_base/clear-button/src/ClearButton.vue
+++ b/src/_base/clear/src/Clear.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="n-base-clear-button" :style="cssVars">
+  <div class="n-base-clear" :style="cssVars">
     <n-icon-switch-transition>
       <n-base-icon
         v-if="show"
         key="dismiss"
-        class="n-base-clear-button__clear"
+        class="n-base-clear__clear"
         @click="onClear"
         @mousedown.prevent
       >
         <dismiss-circle-icon />
       </n-base-icon>
-      <div v-else key="icon" class="n-base-clear-button__placeholder">
+      <div v-else key="icon" class="n-base-clear__placeholder">
         <slot />
       </div>
     </n-icon-switch-transition>
@@ -23,11 +23,11 @@ import NBaseIcon from '../../icon'
 import { NIconSwitchTransition } from '../../../_base'
 import { useTheme } from '../../../_mixins'
 import { DismissCircleIcon } from '../../icons'
-import { baseClearButtonLight } from '../styles'
+import { baseClearLight } from '../styles'
 import style from './styles/index.cssr.js'
 
 export default defineComponent({
-  name: 'BaseClearButton',
+  name: 'BaseClear',
   components: {
     NBaseIcon,
     DismissCircleIcon,
@@ -46,10 +46,10 @@ export default defineComponent({
   },
   setup (props) {
     const themeRef = useTheme(
-      'BaseClearButton',
-      'BaseClearButton',
+      'BaseClear',
+      'BaseClear',
       style,
-      baseClearButtonLight,
+      baseClearLight,
       props
     )
     return {
diff --git a/src/_base/clear-button/src/styles/index.cssr.js b/src/_base/clear/src/styles/index.cssr.js
similarity index 96%
rename from src/_base/clear-button/src/styles/index.cssr.js
rename to src/_base/clear/src/styles/index.cssr.js
index 26c5eb28c..ef5c14769 100644
--- a/src/_base/clear-button/src/styles/index.cssr.js
+++ b/src/_base/clear/src/styles/index.cssr.js
@@ -7,7 +7,7 @@ import createIconSwitchTransition from '../../../../_styles/transitions/icon-swi
 // --size
 // --color-hover
 // --color-pressed
-export default cB('base-clear-button', {
+export default cB('base-clear', {
   flexShrink: 0,
   height: '1em',
   width: '1em',
diff --git a/src/_base/clear-button/styles/_common.js b/src/_base/clear/styles/_common.js
similarity index 100%
rename from src/_base/clear-button/styles/_common.js
rename to src/_base/clear/styles/_common.js
diff --git a/src/_base/clear-button/styles/dark.js b/src/_base/clear/styles/dark.js
similarity index 94%
rename from src/_base/clear-button/styles/dark.js
rename to src/_base/clear/styles/dark.js
index a9897a6d0..d39038caa 100644
--- a/src/_base/clear-button/styles/dark.js
+++ b/src/_base/clear/styles/dark.js
@@ -3,7 +3,7 @@ import { scaleColor } from 'seemly'
 import { commonDark } from '../../../_styles/new-common'
 
 export default {
-  name: 'BaseClearButton',
+  name: 'BaseClear',
   common: commonDark,
   self (vars) {
     const { textColor4Overlay } = vars
diff --git a/src/_base/clear/styles/index.js b/src/_base/clear/styles/index.js
new file mode 100644
index 000000000..0e86cf179
--- /dev/null
+++ b/src/_base/clear/styles/index.js
@@ -0,0 +1,2 @@
+export { default as baseClearLight } from './light'
+export { default as baseClearDark } from './dark'
diff --git a/src/_base/clear-button/styles/light.js b/src/_base/clear/styles/light.js
similarity index 94%
rename from src/_base/clear-button/styles/light.js
rename to src/_base/clear/styles/light.js
index 428368c34..b5a8ad008 100644
--- a/src/_base/clear-button/styles/light.js
+++ b/src/_base/clear/styles/light.js
@@ -3,7 +3,7 @@ import { scaleColor } from 'seemly'
 import { commonLight } from '../../../_styles/new-common'
 
 export default {
-  name: 'BaseClearButton',
+  name: 'BaseClear',
   common: commonLight,
   self (vars) {
     const { textColor4Overlay } = vars
diff --git a/src/_base/close/index.js b/src/_base/close/index.js
new file mode 100644
index 000000000..a87129c6d
--- /dev/null
+++ b/src/_base/close/index.js
@@ -0,0 +1 @@
+export { default } from './src/Close.vue'
diff --git a/src/_base/close/src/Close.vue b/src/_base/close/src/Close.vue
new file mode 100644
index 000000000..e52429c07
--- /dev/null
+++ b/src/_base/close/src/Close.vue
@@ -0,0 +1,35 @@
+<template>
+  <n-base-icon
+    class="n-base-close"
+    :class="{
+      'n-base-close--disabled': disabled
+    }"
+  >
+    <close-icon />
+  </n-base-icon>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { useStyle } from '../../../_mixins'
+import NBaseIcon from '../../icon'
+import { CloseIcon } from '../../icons'
+import style from './styles/index.cssr.js'
+
+export default defineComponent({
+  name: 'BaseClose',
+  components: {
+    NBaseIcon,
+    CloseIcon
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props) {
+    useStyle('BaseClose', style)
+  }
+})
+</script>
diff --git a/src/_base/close/src/styles/index.cssr.js b/src/_base/close/src/styles/index.cssr.js
new file mode 100644
index 000000000..9abe75c3c
--- /dev/null
+++ b/src/_base/close/src/styles/index.cssr.js
@@ -0,0 +1,22 @@
+import { cB, cM, c } from '../../../../_utils/cssr'
+
+// vars:
+// --close-color
+// --close-color-hover
+// --close-color-pressed
+// --close-color-disabled
+export default cB('base-close', `
+  cursor: pointer;
+  color: var(--close-color);
+`, [
+  c('&:hover', {
+    color: 'var(--close-color-hover)'
+  }),
+  c('&:active', {
+    color: 'var(--close-color-pressed)'
+  }),
+  cM('disabled', {
+    cursor: 'not-allowed!important',
+    color: 'var(--close-color-disabled)'
+  })
+])
diff --git a/src/_base/index.js b/src/_base/index.js
index 02c2a929d..18cd08e88 100644
--- a/src/_base/index.js
+++ b/src/_base/index.js
@@ -1,5 +1,6 @@
 export { default as NIconSwitchTransition } from './icon-switch-transition'
 export { default as NFadeInExpandTransition } from './fade-in-expand-transition'
+export { default as NBaseClose } from './close'
 export { default as NBaseIcon } from './icon'
 export { default as NBaseFocusDetector } from './focus-detector'
 export { default as NBaseLoading } from './loading'
@@ -8,4 +9,4 @@ export { default as NBaseWave } from './wave'
 export { default as NBaseMenuMask } from './menu-mask'
 export { default as NBaseSelection } from './selection'
 export { default as NBaseSlotMachine } from './slot-machine'
-export { default as NBaseClearButton } from './clear-button'
+export { default as NBaseClear } from './clear'
diff --git a/src/_base/selection/src/Suffix.vue b/src/_base/selection/src/Suffix.vue
index fad0d874b..07d79fb0b 100644
--- a/src/_base/selection/src/Suffix.vue
+++ b/src/_base/selection/src/Suffix.vue
@@ -5,25 +5,23 @@
     :scale="0.8"
     :show="loading"
   >
-    <n-base-clear-button
+    <n-base-clear
       v-if="showArrow"
-      :unstable-theme="BaseSelection.mergedTheme.peers.BaseClearButton"
-      :unstable-theme-overrides="
-        BaseSelection.mergedTheme.overrides.BaseClearButton
-      "
+      :unstable-theme="BaseSelection.mergedTheme.peers.BaseClear"
+      :unstable-theme-overrides="BaseSelection.mergedTheme.overrides.BaseClear"
       :show="showClear"
       @clear="onClear"
     >
       <n-base-icon depth="4">
         <chevron-down-icon />
       </n-base-icon>
-    </n-base-clear-button>
+    </n-base-clear>
   </n-base-loading>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
-import NBaseClearButton from '../../clear-button'
+import NBaseClear from '../../clear'
 import NBaseLoading from '../../loading'
 import NBaseIcon from '../../icon'
 import { ChevronDownIcon } from '../../icons'
@@ -34,7 +32,7 @@ export default defineComponent({
     ChevronDownIcon,
     NBaseIcon,
     NBaseLoading,
-    NBaseClearButton
+    NBaseClear
   },
   inject: ['BaseSelection'],
   props: {
diff --git a/src/_base/selection/styles/dark.js b/src/_base/selection/styles/dark.js
index b1a1257ff..6afd69159 100644
--- a/src/_base/selection/styles/dark.js
+++ b/src/_base/selection/styles/dark.js
@@ -1,13 +1,13 @@
 import { changeColor } from 'seemly'
 import { commonDark } from '../../../_styles/new-common'
-import { baseClearButtonDark } from '../../clear-button/styles'
+import { baseClearDark } from '../../clear/styles'
 import commonVars from './_common'
 
 export default {
   name: 'BaseSelection',
   common: commonDark,
   peers: {
-    BaseClearButton: baseClearButtonDark
+    BaseClear: baseClearDark
   },
   self (vars) {
     const {
diff --git a/src/_base/selection/styles/light.js b/src/_base/selection/styles/light.js
index fb1b3d054..6a3b3dd8e 100644
--- a/src/_base/selection/styles/light.js
+++ b/src/_base/selection/styles/light.js
@@ -1,13 +1,13 @@
 import { changeColor } from 'seemly'
 import { commonLight } from '../../../_styles/new-common'
-import { baseClearButtonLight } from '../../clear-button/styles'
+import { baseClearLight } from '../../clear/styles'
 import commonVariables from './_common'
 
 export default {
   name: 'BaseSelection',
   common: commonLight,
   peers: {
-    BaseClearButton: baseClearButtonLight
+    BaseClear: baseClearLight
   },
   self (vars) {
     const {
diff --git a/src/alert/src/Alert.vue b/src/alert/src/Alert.vue
index 7281a574e..0be7d7c7a 100644
--- a/src/alert/src/Alert.vue
+++ b/src/alert/src/Alert.vue
@@ -9,26 +9,19 @@
       :style="cssVars"
       v-bind="$attrs"
     >
-      <div v-if="closable" class="n-alert__close" @click="handleCloseClick">
-        <n-icon
-          :unstable-theme="mergedTheme.peers.Icon"
-          :unstable-theme-overrides="mergedTheme.overrides.Icon"
-        >
-          <close-icon />
-        </n-icon>
-      </div>
+      <n-base-close
+        v-if="closable"
+        class="n-alert__close"
+        @click="handleCloseClick"
+      />
       <div v-if="showIcon" class="n-alert__icon">
         <slot v-if="$slots.icon" name="icon" />
-        <n-icon
-          v-else
-          :unstable-theme="mergedTheme.peers.Icon"
-          :unstable-theme-overrides="mergedTheme.overrides.Icon"
-        >
+        <n-base-icon v-else>
           <success-icon v-if="type === 'success'" />
           <info-icon v-else-if="type === 'info'" />
           <warning-icon v-else-if="type === 'warning'" />
           <error-icon v-else-if="type === 'error'" />
-        </n-icon>
+        </n-base-icon>
       </div>
       <div class="n-alert-body">
         <div v-if="title !== undefined" class="n-alert-body__title">
@@ -50,11 +43,9 @@ import {
   InfoIcon,
   SuccessIcon,
   WarningIcon,
-  ErrorIcon,
-  CloseIcon
+  ErrorIcon
 } from '../../_base/icons'
-import { NIcon } from '../../icon'
-import { NFadeInExpandTransition } from '../../_base'
+import { NFadeInExpandTransition, NBaseClose, NBaseIcon } from '../../_base'
 import { useTheme } from '../../_mixins'
 import { warn, createKey } from '../../_utils'
 import { alertLight } from '../styles'
@@ -63,13 +54,13 @@ import style from './styles/index.cssr'
 export default defineComponent({
   name: 'Alert',
   components: {
-    NIcon,
+    NBaseClose,
+    NBaseIcon,
     NFadeInExpandTransition,
     SuccessIcon,
     WarningIcon,
     InfoIcon,
-    ErrorIcon,
-    CloseIcon
+    ErrorIcon
   },
   inheritAttrs: false,
   props: {
diff --git a/src/alert/src/styles/index.cssr.js b/src/alert/src/styles/index.cssr.js
index 841de13be..c44e07d7b 100644
--- a/src/alert/src/styles/index.cssr.js
+++ b/src/alert/src/styles/index.cssr.js
@@ -23,16 +23,6 @@ export default cB('alert', `
   background-color: var(--color);
   text-align: start;
 `, [
-  cE('close', {
-    color: 'var(--close-color)'
-  }, [
-    c('&:hover', {
-      color: 'var(--close-color-hover)'
-    }),
-    c('&:active', {
-      color: 'var(--close-color-pressed)'
-    })
-  ]),
   cE('icon', {
     color: 'var(--icon-color)'
   }),
@@ -63,25 +53,15 @@ export default cB('alert', `
     justify-content: center;
     width: 26px;
     height: 26px;
-  `, [
-    cB('icon', {
-      fontSize: '26px'
-    })
-  ]),
+    font-size: 26px;
+  `),
   cE('close', `
+    transition: color .3s var(--bezier);
     position: absolute;
     right: 16px;
     font-size: 14px;
     top: 14px;
-    width: 1em;
-    height: 1em;
-    line-height: 0;
-    transition: color .3s var(--bezier);
-  `, [
-    cB('icon', {
-      cursor: 'pointer'
-    })
-  ]),
+  `),
   cB('alert-body', `
     border-radius: var(--border-radius);
     padding: 15px 15px 15px 47px;
diff --git a/src/alert/styles/dark.js b/src/alert/styles/dark.js
index 21dc694ba..c920c6bf6 100644
--- a/src/alert/styles/dark.js
+++ b/src/alert/styles/dark.js
@@ -1,13 +1,9 @@
 import { changeColor } from 'seemly'
 import { commonDark } from '../../_styles/new-common'
-import { iconDark } from '../../icon/styles'
 
 export default {
   name: 'Alert',
   common: commonDark,
-  peers: {
-    Icon: iconDark
-  },
   self (vars) {
     const {
       lineHeight,
diff --git a/src/alert/styles/light.js b/src/alert/styles/light.js
index de62d2140..b4f456c51 100644
--- a/src/alert/styles/light.js
+++ b/src/alert/styles/light.js
@@ -1,13 +1,9 @@
 import { changeColor, composite } from 'seemly'
-import { iconLight } from '../../icon/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
   name: 'Alert',
   common: commonLight,
-  peers: {
-    Icon: iconLight
-  },
   self (vars) {
     const {
       lineHeight,
diff --git a/src/card/src/Card.vue b/src/card/src/Card.vue
index 300aab70f..028595f2e 100644
--- a/src/card/src/Card.vue
+++ b/src/card/src/Card.vue
@@ -26,14 +26,11 @@
       <div v-if="$slots['header-extra']" class="n-card-header__extra">
         <slot name="header-extra" />
       </div>
-      <n-base-icon
+      <n-base-close
         v-if="closable"
         class="n-card-header__close"
-        size="16"
         @click="handleCloseClick"
-      >
-        <close-icon />
-      </n-base-icon>
+      />
     </div>
     <div class="n-card__content" :style="contentStyle">
       <slot />
@@ -49,18 +46,16 @@
 
 <script>
 import { defineComponent, computed } from 'vue'
-import { CloseIcon } from '../../_base/icons'
 import { useTheme } from '../../_mixins'
 import { createKey } from '../../_utils'
-import { NBaseIcon } from '../../_base'
+import { NBaseClose } from '../../_base'
 import { cardLight } from '../styles'
 import style from './styles/index.cssr.js'
 
 export default defineComponent({
   name: 'Card',
   components: {
-    CloseIcon,
-    NBaseIcon
+    NBaseClose
   },
   props: {
     ...useTheme.props,
diff --git a/src/card/src/styles/index.cssr.js b/src/card/src/styles/index.cssr.js
index 4d70fc790..0523b81f5 100644
--- a/src/card/src/styles/index.cssr.js
+++ b/src/card/src/styles/index.cssr.js
@@ -90,17 +90,8 @@ export default cB(
         `),
         cE('close', `
           font-size: 16px;
-          cursor: pointer;
           transition: color .3s var(--bezier);
-          color: var(--close-color);
-        `, [
-          c('&:hover', {
-            color: 'var(--close-color-hover)'
-          }),
-          c('&:active', {
-            color: 'var(--close-color-pressed)'
-          })
-        ])
+        `)
       ]),
       cE('action', `
         box-sizing: border-box;
diff --git a/src/dialog/src/Dialog.vue b/src/dialog/src/Dialog.vue
index 189df452e..19cfcbce0 100644
--- a/src/dialog/src/Dialog.vue
+++ b/src/dialog/src/Dialog.vue
@@ -7,13 +7,11 @@
     }"
     :style="cssVars"
   >
-    <n-base-icon
+    <n-base-close
       v-if="closable"
       class="n-dialog__close"
       @click="handleCloseClick"
-    >
-      <close-icon />
-    </n-base-icon>
+    />
     <div
       v-if="mergedShowIcon && mergedIconPlacement === 'top'"
       class="n-dialog-icon-container"
@@ -76,12 +74,11 @@
 import { defineComponent, computed } from 'vue'
 import { useTheme } from '../../_mixins'
 import { render, createKey } from '../../_utils'
-import { NBaseIcon } from '../../_base'
+import { NBaseIcon, NBaseClose } from '../../_base'
 import { NButton } from '../../button'
 import {
   InfoIcon,
   SuccessIcon,
-  CloseIcon,
   WarningIcon,
   ErrorIcon
 } from '../../_base/icons'
@@ -97,7 +94,7 @@ export default defineComponent({
   components: {
     NBaseIcon,
     NButton,
-    CloseIcon,
+    NBaseClose,
     WarningIcon,
     SuccessIcon,
     ErrorIcon,
diff --git a/src/dialog/src/styles/index.cssr.js b/src/dialog/src/styles/index.cssr.js
index 1892ece37..902bbddfd 100644
--- a/src/dialog/src/styles/index.cssr.js
+++ b/src/dialog/src/styles/index.cssr.js
@@ -68,22 +68,12 @@ export default c([
       ]),
       cE('close', `
         font-size: var(--close-size);
-        cursor: pointer;
         position: absolute;
         right: 0;
         top: 0;
-        color: var(--close-color);
         margin: var(--close-margin);
         transition: .3s color var(--bezier);
-      `,
-      [
-        c('&:hover', {
-          color: 'var(--close-color-hover)'
-        }),
-        c('&:active', {
-          color: 'var(--close-color-pressed)'
-        })
-      ]),
+      `),
       cE('content', `
         font-size: var(--font-size);
         margin: var(--content-margin);
diff --git a/src/index.js b/src/index.js
index 8fba2f21a..853635417 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,3 +7,5 @@ export { default as create } from './create'
 export * from './locales'
 export * from './components'
 export * from './styles'
+
+export { darkTheme } from './themes'
diff --git a/src/input/src/Input.vue b/src/input/src/Input.vue
index 9d3fc195b..7858b1636 100644
--- a/src/input/src/Input.vue
+++ b/src/input/src/Input.vue
@@ -91,15 +91,15 @@
         :depth="disabled ? 5 : 4"
       >
         <slot name="suffix" />
-        <n-base-clear-button
+        <n-base-clear
           v-if="clearable || $slots.clear"
-          :unstable-theme="mergedTheme.peers.BaseClearButton"
-          :unstable-theme-overrides="mergedTheme.overrides.BaseClearButton"
+          :unstable-theme="mergedTheme.peers.BaseClear"
+          :unstable-theme-overrides="mergedTheme.overrides.BaseClear"
           :show="showClearButton"
           @clear="handleClear"
         >
           <slot name="clear" />
-        </n-base-clear-button>
+        </n-base-clear>
       </n-icon-config-provider>
     </div>
     <span v-if="pair" class="n-input__separator">
@@ -131,15 +131,15 @@
       </div>
       <n-icon-config-provider class="n-input__suffix" :depth="disabled ? 5 : 4">
         <slot name="suffix" />
-        <n-base-clear-button
+        <n-base-clear
           v-if="clearable || $slots.clear"
-          :unstable-theme="mergedTheme.peers.BaseClearButton"
-          :unstable-theme-overrides="mergedTheme.overrides.BaseClearButton"
+          :unstable-theme="mergedTheme.peers.BaseClear"
+          :unstable-theme-overrides="mergedTheme.overrides.BaseClear"
           :show="showClearButton"
           @clear="handleClear"
         >
           <slot name="clear" />
-        </n-base-clear-button>
+        </n-base-clear>
       </n-icon-config-provider>
     </div>
     <div v-if="showTextareaPlaceholder" class="n-input__placeholder">
@@ -163,7 +163,7 @@ import {
 } from 'vue'
 import { useMergedState } from 'vooks'
 import NIconConfigProvider from '../../icon/src/IconConfigProvider.vue'
-import { NBaseClearButton } from '../../_base'
+import { NBaseClear } from '../../_base'
 import { useTheme, useLocale, useFormItem, useConfig } from '../../_mixins'
 import { call, createKey } from '../../_utils'
 import { inputLight } from '../styles'
@@ -421,7 +421,7 @@ export default defineComponent({
   name: 'Input',
   components: {
     NIconConfigProvider,
-    NBaseClearButton
+    NBaseClear
   },
   props: {
     ...useTheme.props,
diff --git a/src/input/src/styles/input.cssr.js b/src/input/src/styles/input.cssr.js
index ed8e7d82a..3915a74bf 100644
--- a/src/input/src/styles/input.cssr.js
+++ b/src/input/src/styles/input.cssr.js
@@ -223,7 +223,7 @@ export default c([
       justify-content: center;
       min-width: var(--icon-size);
     `, [
-      cB('base-clear-button', {
+      cB('base-clear', {
         fontSize: 'var(--icon-size)'
       }),
       cB('icon', {
diff --git a/src/input/styles/dark.js b/src/input/styles/dark.js
index d2c3d3a95..893508b52 100644
--- a/src/input/styles/dark.js
+++ b/src/input/styles/dark.js
@@ -1,13 +1,13 @@
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { baseClearButtonDark } from '../../_base/clear-button/styles'
+import { baseClearDark } from '../../_base/clear/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
   name: 'Input',
   common: commonDark,
   peers: {
-    BaseClearButton: baseClearButtonDark
+    BaseClear: baseClearDark
   },
   self (vars) {
     const {
diff --git a/src/input/styles/light.js b/src/input/styles/light.js
index 086193742..a6c6629a1 100644
--- a/src/input/styles/light.js
+++ b/src/input/styles/light.js
@@ -1,13 +1,13 @@
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { baseClearButtonLight } from '../../_base/clear-button/styles'
+import { baseClearLight } from '../../_base/clear/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
   name: 'Input',
   common: commonLight,
   peers: {
-    BaseClearButton: baseClearButtonLight
+    BaseClear: baseClearLight
   },
   self (vars) {
     const {
diff --git a/src/message/src/Message.js b/src/message/src/Message.js
index 0b7e1b4c5..d4997f91d 100644
--- a/src/message/src/Message.js
+++ b/src/message/src/Message.js
@@ -3,10 +3,14 @@ import {
   InfoIcon,
   SuccessIcon,
   WarningIcon,
-  ErrorIcon,
-  CloseIcon
+  ErrorIcon
 } from '../../_base/icons'
-import { NIconSwitchTransition, NBaseLoading, NBaseIcon } from '../../_base'
+import {
+  NIconSwitchTransition,
+  NBaseLoading,
+  NBaseIcon,
+  NBaseClose
+} from '../../_base'
 import { render, createKey } from '../../_utils'
 import { useTheme } from '../../_mixins'
 import { messageLight } from '../styles'
@@ -110,23 +114,10 @@ export default {
           ]
         ),
         closable
-          ? h(
-            'div',
-            {
-              class: 'n-message__close'
-            },
-            [
-              h(
-                NBaseIcon,
-                {
-                  onClick: handleClose
-                },
-                {
-                  default: () => [h(CloseIcon)]
-                }
-              )
-            ]
-          )
+          ? h(NBaseClose, {
+            class: 'n-message__close',
+            onClick: handleClose
+          })
           : null
       ]
     )
diff --git a/src/message/src/MessageEnvironment.js b/src/message/src/MessageEnvironment.js
index ffd058aef..8acd5f188 100644
--- a/src/message/src/MessageEnvironment.js
+++ b/src/message/src/MessageEnvironment.js
@@ -84,7 +84,6 @@ export default defineComponent({
         default: () => [
           this.show
             ? h(NMessage, {
-              theme: this.theme,
               content: this.content,
               type: this.type,
               icon: this.icon,
diff --git a/src/message/src/styles/index.cssr.js b/src/message/src/styles/index.cssr.js
index c7bf3111a..7fb2a27c8 100644
--- a/src/message/src/styles/index.cssr.js
+++ b/src/message/src/styles/index.cssr.js
@@ -73,35 +73,13 @@ export default c([
       ])
     ]),
     cE('close', `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: var(--close-size);
-      width: var(--close-size);
-      border-radius: 100px;
       font-size: var(--close-size);
       margin: var(--close-margin);
-    `, [
-      cB('icon', {
-        transition: 'color .3s var(--bezier)'
-      })
-    ]),
+      transition: color .3s var(--bezier);
+    `),
     cM('closable', {
       padding: 'var(--padding-closable)'
-    }),
-    cE('close', [
-      cB('icon', `
-        cursor: pointer;
-        color: var(--close-color);
-      `, [
-        c('&:hover', {
-          color: 'var(--close-color-hover)'
-        }),
-        c('&:active', {
-          color: 'var(--close-color-pressed)'
-        })
-      ])
-    ])
+    })
   ]),
   cB('message-container', `
     z-index: 6000;
diff --git a/src/notification/src/Notification.vue b/src/notification/src/Notification.vue
index 55ffa95c0..d035c9fc6 100644
--- a/src/notification/src/Notification.vue
+++ b/src/notification/src/Notification.vue
@@ -16,15 +16,11 @@
         <success-icon v-else-if="type === 'success'" />
       </n-base-icon>
     </div>
-    <div
+    <n-base-close
       v-if="closable"
       class="n-notification__close"
       @click="handleCloseClick"
-    >
-      <n-base-icon>
-        <close-icon />
-      </n-base-icon>
-    </div>
+    />
     <div ref="body" class="n-notification-main">
       <div v-if="title" class="n-notification-main__header">
         <render :render="title" />
@@ -51,9 +47,8 @@
 <script>
 import { defineComponent, computed, inject } from 'vue'
 import { createKey, render } from '../../_utils'
-import { NBaseIcon } from '../../_base'
+import { NBaseIcon, NBaseClose } from '../../_base'
 import {
-  CloseIcon,
   InfoIcon,
   SuccessIcon,
   WarningIcon,
@@ -65,7 +60,7 @@ export default defineComponent({
   components: {
     NBaseIcon,
     render,
-    CloseIcon,
+    NBaseClose,
     SuccessIcon,
     WarningIcon,
     InfoIcon,
diff --git a/src/notification/src/styles/index.cssr.js b/src/notification/src/styles/index.cssr.js
index 5c47fd00a..ae34a9178 100644
--- a/src/notification/src/styles/index.cssr.js
+++ b/src/notification/src/styles/index.cssr.js
@@ -130,17 +130,8 @@ export default c([
           top: 16px;
           right: 12px;
           font-size: 14px;
-          cursor: pointer;
           transition: color .3s var(--bezier);
-          color: var(--close-color);
-        `, [
-          c('&:hover', {
-            color: 'var(--close-color-hover)'
-          }),
-          c('&:active', {
-            color: 'var(--close-color-pressed)'
-          })
-        ])
+        `)
       ]),
       cE('avatar', `
         position: absolute;
diff --git a/src/notification/styles/dark.js b/src/notification/styles/dark.js
index c7671a425..d7759e3cf 100644
--- a/src/notification/styles/dark.js
+++ b/src/notification/styles/dark.js
@@ -1,4 +1,3 @@
-import { avatarDark } from '../../avatar/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
 import { commonDark } from '../../_styles/new-common'
 
@@ -6,7 +5,6 @@ export default {
   name: 'Notification',
   common: commonDark,
   peers: {
-    Avatar: avatarDark,
     Scrollbar: scrollbarDark
   },
   self (vars) {
diff --git a/src/notification/styles/light.js b/src/notification/styles/light.js
index 994d4b191..2e82173fa 100644
--- a/src/notification/styles/light.js
+++ b/src/notification/styles/light.js
@@ -1,4 +1,3 @@
-import { avatarLight } from '../../avatar/styles'
 import { scrollbarLight } from '../../scrollbar/styles'
 import { commonLight } from '../../_styles/new-common'
 
@@ -6,7 +5,6 @@ export default {
   name: 'Notification',
   common: commonLight,
   peers: {
-    Avatar: avatarLight,
     Scrollbar: scrollbarLight
   },
   self (vars) {
diff --git a/src/styles.js b/src/styles.js
index f0f11565e..8b1a1ab9d 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -1,86 +1,65 @@
-// unified entry for styles
-// export {
-//   baseClearButtonDark,
-//   baseClearButtonLight
-// } from './_base/clear-button/styles'
-// export { baseLoadingDark, baseLoadingLight } from './_base/loading/styles'
-// export { baseMenuMaskDark, baseMenuMaskLight } from './_base/menu-mask/styles'
-// export { baseSelectionDark, baseSelectionLight } from './_base/selection/styles'
-// export {
-//   baseSelectMenuDark,
-//   baseSelectMenuLight
-// } from './_base/select-menu/styles'
-// export {
-//   baseSlotMachineDark,
-//   baseSlotMachineLight
-// } from './_base/slot-machine/styles'
-// export { baseWaveDark, baseWaveLight } from './_base/wave/styles'
-// exposed style
-// export { baseDark, baseLight } from './_styles/base'
-// export { affixDark, affixLight } from './affix/styles'
-// export { alertDark, alertLight } from './alert/styles'
-// export { anchorDark, anchorLight } from './anchor/styles'
-// export { autoCompleteDark, autoCompleteLight } from './auto-complete/styles'
-// export { avatarDark, avatarLight } from './avatar/styles'
-// export { backTopDark, backTopLight } from './back-top/styles'
-// export { badgeDark, badgeLight } from './badge/styles'
-// export { breadcrumbDark, breadcrumbLight } from './breadcrumb/styles'
-// export { buttonDark, buttonLight } from './button/styles'
-// export { cardDark, cardLight } from './card/styles'
-// export { cascaderDark, cascaderLight } from './cascader/styles'
-// export { checkboxDark, checkboxLight } from './checkbox/styles'
-// export { codeDark, codeLight } from './code/styles'
-// export { collapseDark, collapseLight } from './collapse/styles'
-// export { dataTableDark, dataTableLight } from './data-table/styles'
-// export { datePickerDark, datePickerLight } from './date-picker/styles'
-// export { descriptionsDark, descriptionsLight } from './descriptions/styles'
-// export { dialogDark, dialogLight } from './dialog/styles'
-// export { dividerDark, dividerLight } from './divider/styles'
-// export { drawerDark, drawerLight } from './drawer/styles'
-// export { dropdownDark, dropdownLight } from './dropdown/styles'
-// export { dynamicInputDark, dynamicInputLight } from './dynamic-input/styles'
-// export { dynamicTagsDark, dynamicTagsLight } from './dynamic-tags/styles'
-// export { elementDark, elementLight } from './element/styles'
-// export { emptyDark, emptyLight } from './empty/styles'
-// export { formDark, formLight } from './form/styles'
-// export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
-// export { gridDark, gridLight } from './grid/styles'
-// export { iconDark, iconLight } from './icon/styles'
-// export { inputDark, inputLight } from './input/styles'
-// export { inputNumberDark, inputNumberLight } from './input-number/styles'
-// export { layoutDark, layoutLight } from './layout/styles'
-// export { listDark, listLight } from './list/styles'
-// export { loadingBarDark, loadingBarLight } from './loading-bar/styles'
-// export { logDark, logLight } from './log/styles'
-// export { menuDark, menuLight } from './menu/styles'
-// export { messageDark, messageLight } from './message/styles'
-// export { modalDark, modalLight } from './modal/styles'
-// export { notificationDark, notificationLight } from './notification/styles'
-// export { paginationDark, paginationLight } from './pagination/styles'
-// export { popconfirmDark, popconfirmLight } from './popconfirm/styles'
-// export { popoverDark, popoverLight } from './popover/styles'
-// export { popselectDark, popselectLight } from './popselect/styles'
-// export { progressDark, progressLight } from './progress/styles'
-// export { radioDark, radioLight } from './radio/styles'
-// export { rateDark, rateLight } from './rate/styles'
-// export { resultDark, resultLight } from './result/styles'
-// export { scrollbarDark, scrollbarLight } from './scrollbar/styles'
-// export { selectDark, selectLight } from './select/styles'
-// export { sliderDark, sliderLight } from './slider/styles'
-// export { spaceDark, spaceLight } from './space/styles'
-// export { spinDark, spinLight } from './spin/styles'
-// export { statisticDark, statisticLight } from './statistic/styles'
-// export { stepsDark, stepsLight } from './steps/styles'
-// export { switchDark, switchLight } from './switch/styles'
-// export { tableDark, tableLight } from './table/styles'
-// export { tabsDark, tabsLight } from './tabs/styles'
-// export { tagDark, tagLight } from './tag/styles'
-// export { thingDark, thingLight } from './thing/styles'
-// export { timeDark, timeLight } from './time/styles'
-// export { timePickerDark, timePickerLight } from './time-picker/styles'
-// export { timelineDark, timelineLight } from './timeline/styles'
-// export { tooltipDark, tooltipLight } from './tooltip/styles'
-// export { transferDark, transferLight } from './transfer/styles'
-// export { treeDark, treeLight } from './tree/styles'
-// export { typographyDark, typographyLight } from './typography/styles'
-// export { uploadDark, uploadLight } from './upload/styles'
+export { commonDark } from './_styles/new-common'
+export { alertDark } from './alert/styles'
+export { affixDark } from './affix/styles'
+export { anchorDark } from './anchor/styles'
+export { autoCompleteDark } from './auto-complete/styles'
+export { avatarDark } from './avatar/styles'
+export { backTopDark } from './back-top/styles'
+export { badgeDark } from './badge/styles'
+export { breadcrumbDark } from './breadcrumb/styles'
+export { buttonDark } from './button/styles'
+export { cardDark } from './card/styles'
+export { cascaderDark } from './cascader/styles'
+export { checkboxDark } from './checkbox/styles'
+export { codeDark } from './code/styles'
+export { collapseDark } from './collapse/styles'
+export { dataTableDark } from './data-table/styles'
+export { datePickerDark } from './date-picker/styles'
+export { descriptionsDark } from './descriptions/styles'
+export { dialogDark } from './dialog/styles'
+export { dividerDark } from './divider/styles'
+export { drawerDark } from './drawer/styles'
+export { dropdownDark } from './dropdown/styles'
+export { dynamicInputDark } from './dynamic-input/styles'
+export { dynamicTagsDark } from './dynamic-tags/styles'
+export { elementDark } from './element/styles'
+export { emptyDark } from './empty/styles'
+export { formDark } from './form/styles'
+export { gradientTextDark } from './gradient-text/styles'
+export { iconDark } from './icon/styles'
+export { inputDark } from './input/styles'
+export { inputNumberDark } from './input-number/styles'
+export { layoutDark } from './layout/styles'
+export { listDark } from './list/styles'
+export { loadingBarDark } from './loading-bar/styles'
+export { logDark } from './log/styles'
+export { menuDark } from './menu/styles'
+export { messageDark } from './message/styles'
+export { modalDark } from './modal/styles'
+export { notificationDark } from './notification/styles'
+export { paginationDark } from './pagination/styles'
+export { popconfirmDark } from './popconfirm/styles'
+export { popoverDark } from './popover/styles'
+export { popselectDark } from './popselect/styles'
+export { progressDark } from './progress/styles'
+export { radioDark } from './radio/styles'
+export { rateDark } from './rate/styles'
+export { resultDark } from './result/styles'
+export { scrollbarDark } from './scrollbar/styles'
+export { sliderDark } from './slider/styles'
+export { spaceDark } from './space/styles'
+export { spinDark } from './spin/styles'
+export { statisticDark } from './statistic/styles'
+export { stepsDark } from './steps/styles'
+export { switchDark } from './switch/styles'
+export { tableDark } from './table/styles'
+export { tabsDark } from './tabs/styles'
+export { tagDark } from './tag/styles'
+export { thingDark } from './thing/styles'
+export { timePickerDark } from './time-picker/styles'
+export { timelineDark } from './timeline/styles'
+export { tooltipDark } from './tooltip/styles'
+export { transferDark } from './transfer/styles'
+export { typographyDark } from './typography/styles'
+export { treeDark } from './tree/styles'
+export { uploadDark } from './upload/styles'
diff --git a/src/styles.new.js b/src/styles.new.js
deleted file mode 100644
index 3d18cc343..000000000
--- a/src/styles.new.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import { commonDark } from './_styles/new-common'
-import { alertDark } from './alert/styles'
-import { affixDark } from './affix/styles'
-import { anchorDark } from './anchor/styles'
-import { autoCompleteDark } from './auto-complete/styles'
-import { avatarDark } from './avatar/styles'
-import { backTopDark } from './back-top/styles'
-import { badgeDark } from './badge/styles'
-import { breadcrumbDark } from './breadcrumb/styles'
-import { buttonDark } from './button/styles'
-import { cardDark } from './card/styles'
-import { cascaderDark } from './cascader/styles'
-import { checkboxDark } from './checkbox/styles'
-import { codeDark } from './code/styles'
-import { collapseDark } from './collapse/styles'
-import { dataTableDark } from './data-table/styles'
-import { datePickerDark } from './date-picker/styles'
-import { descriptionsDark } from './descriptions/styles'
-import { dialogDark } from './dialog/styles'
-import { dividerDark } from './divider/styles'
-import { drawerDark } from './drawer/styles'
-import { dropdownDark } from './dropdown/styles'
-import { dynamicInputDark } from './dynamic-input/styles'
-import { dynamicTagsDark } from './dynamic-tags/styles'
-import { elementDark } from './element/styles'
-import { emptyDark } from './empty/styles'
-import { formDark } from './form/styles'
-import { gradientTextDark } from './gradient-text/styles'
-import { iconDark } from './icon/styles'
-import { inputDark } from './input/styles'
-import { inputNumberDark } from './input-number/styles'
-import { layoutDark } from './layout/styles'
-import { listDark } from './list/styles'
-import { loadingBarDark } from './loading-bar/styles'
-import { logDark } from './log/styles'
-import { menuDark } from './menu/styles'
-import { messageDark } from './message/styles'
-import { modalDark } from './modal/styles'
-import { notificationDark } from './notification/styles'
-import { paginationDark } from './pagination/styles'
-import { popconfirmDark } from './popconfirm/styles'
-import { popoverDark } from './popover/styles'
-import { popselectDark } from './popselect/styles'
-import { progressDark } from './progress/styles'
-import { radioDark } from './radio/styles'
-import { rateDark } from './rate/styles'
-import { resultDark } from './result/styles'
-import { scrollbarDark } from './scrollbar/styles'
-import { sliderDark } from './slider/styles'
-import { spaceDark } from './space/styles'
-import { spinDark } from './spin/styles'
-import { statisticDark } from './statistic/styles'
-import { stepsDark } from './steps/styles'
-import { switchDark } from './switch/styles'
-import { tableDark } from './table/styles'
-import { tabsDark } from './tabs/styles'
-import { tagDark } from './tag/styles'
-import { thingDark } from './thing/styles'
-import { timePickerDark } from './time-picker/styles'
-import { timelineDark } from './timeline/styles'
-import { tooltipDark } from './tooltip/styles'
-import { transferDark } from './transfer/styles'
-import { typographyDark } from './typography/styles'
-import { treeDark } from './tree/styles'
-import { uploadDark } from './upload/styles'
-
-export const darkTheme = {
-  common: commonDark,
-  Alert: alertDark,
-  Affix: affixDark,
-  Anchor: anchorDark,
-  AutoComplete: autoCompleteDark,
-  Avatar: avatarDark,
-  BackTop: backTopDark,
-  Badge: badgeDark,
-  Breadcrumb: breadcrumbDark,
-  Button: buttonDark,
-  Card: cardDark,
-  Cascader: cascaderDark,
-  Checkbox: checkboxDark,
-  Code: codeDark,
-  Collapse: collapseDark,
-  DataTable: dataTableDark,
-  DatePicker: datePickerDark,
-  Descriptions: descriptionsDark,
-  Dialog: dialogDark,
-  Divider: dividerDark,
-  Drawer: drawerDark,
-  Dropdown: dropdownDark,
-  DynamicInput: dynamicInputDark,
-  DynamicTags: dynamicTagsDark,
-  Element: elementDark,
-  Empty: emptyDark,
-  Form: formDark,
-  GradientText: gradientTextDark,
-  Icon: iconDark,
-  Input: inputDark,
-  InputNumber: inputNumberDark,
-  Layout: layoutDark,
-  List: listDark,
-  LoadingBar: loadingBarDark,
-  Log: logDark,
-  Menu: menuDark,
-  Message: messageDark,
-  Modal: modalDark,
-  Notification: notificationDark,
-  Pagination: paginationDark,
-  Popconfirm: popconfirmDark,
-  Popover: popoverDark,
-  Popselect: popselectDark,
-  Progress: progressDark,
-  Radio: radioDark,
-  Rate: rateDark,
-  Result: resultDark,
-  Scrollbar: scrollbarDark,
-  Slider: sliderDark,
-  Space: spaceDark,
-  Spin: spinDark,
-  Statistic: statisticDark,
-  Steps: stepsDark,
-  Switch: switchDark,
-  Table: tableDark,
-  Tabs: tabsDark,
-  Tag: tagDark,
-  Thing: thingDark,
-  TimePicker: timePickerDark,
-  Timeline: timelineDark,
-  Tooltip: tooltipDark,
-  Transfer: transferDark,
-  Tree: treeDark,
-  Typography: typographyDark,
-  Upload: uploadDark
-}
diff --git a/src/tabs/src/Tabs.vue b/src/tabs/src/Tabs.vue
index 8f06ab7e6..747bfa046 100644
--- a/src/tabs/src/Tabs.vue
+++ b/src/tabs/src/Tabs.vue
@@ -39,15 +39,11 @@
                   @click="handleTabClick($event, panel.name, panel.disabled)"
                 >
                   <span class="n-tabs-label__label">{{ panel.label }}</span>
-                  <div
+                  <n-base-close
                     v-if="closable && typeIsCard"
                     class="n-tabs-label__close"
                     @click.stop="handleCloseClick(panel)"
-                  >
-                    <n-base-icon>
-                      <close-icon />
-                    </n-base-icon>
-                  </div>
+                  />
                 </div>
               </div>
               <div
@@ -86,10 +82,9 @@ import { throttle } from 'lodash-es'
 import { useCompitable, onFontsReady } from 'vooks'
 import {
   ChevronLeftIcon as BackwardIcon,
-  ChevronRightIcon as ForwardIcon,
-  CloseIcon
+  ChevronRightIcon as ForwardIcon
 } from '../../_base/icons'
-import { NBaseIcon } from '../../_base'
+import { NBaseIcon, NBaseClose } from '../../_base'
 import { useTheme } from '../../_mixins'
 import { warn, createKey } from '../../_utils'
 import { tabsLight } from '../styles'
@@ -101,7 +96,7 @@ export default defineComponent({
     NBaseIcon,
     BackwardIcon,
     ForwardIcon,
-    CloseIcon,
+    NBaseClose,
     VResizeObserver
   },
   provide () {
@@ -210,7 +205,9 @@ export default defineComponent({
             labelBarColor,
             scrollButtonColor,
             scrollButtonColorDisabled,
-            tabCloseColor,
+            closeColor,
+            closeColorHover,
+            closeColorPressed,
             tabColor,
             tabBorderColorActive,
             tabTextColor,
@@ -239,7 +236,9 @@ export default defineComponent({
           '--tab-border-color': tabBorderColor,
           '--tab-border-color-active': tabBorderColorActive,
           '--tab-border-radius': tabBorderRadius,
-          '--tab-close-color': tabCloseColor,
+          '--close-color': closeColor,
+          '--close-color-hover': closeColorHover,
+          '--close-color-pressed': closeColorPressed,
           '--tab-color': tabColor,
           '--tab-font-weight': tabFontWeight,
           '--tab-text-color': tabTextColor,
diff --git a/src/tabs/src/styles/index.cssr.js b/src/tabs/src/styles/index.cssr.js
index eafefdc23..fcb9b78df 100644
--- a/src/tabs/src/styles/index.cssr.js
+++ b/src/tabs/src/styles/index.cssr.js
@@ -2,6 +2,9 @@ import { c, cM, cB, cE } from '../../../_utils/cssr'
 
 // vars:
 // --bezier
+// --close-color
+// --close-color-hover
+// --close-color-pressed
 // --label-bar-color
 // --label-font-size-card
 // --label-font-size-line
@@ -15,7 +18,6 @@ import { c, cM, cB, cE } from '../../../_utils/cssr'
 // --tab-border-color
 // --tab-border-color-active
 // --tab-border-radius
-// --tab-close-color
 // --tab-color
 // --tab-font-weight
 // --tab-text-color
@@ -108,10 +110,6 @@ export default cB('tabs', `
       cE('close', `
         margin-left: 8px;
         font-size: 16px;
-        line-height: 16px;
-        height: 16px;
-        cursor: pointer;
-        color: var(--tab-close-color);
         transition: color .3s var(--bezier);
       `),
       cE('label', `
diff --git a/src/tabs/styles/dark.js b/src/tabs/styles/dark.js
index 15487aafb..5b014984e 100644
--- a/src/tabs/styles/dark.js
+++ b/src/tabs/styles/dark.js
@@ -12,6 +12,8 @@ export default {
       iconColorOverlay,
       iconColorDisabledOverlay,
       closeColorOverlay,
+      closeColorHoverOverlay,
+      closeColorPressedOverlay,
       tabColorOverlay,
       textColor1Overlay,
       dividerColorOverlay,
@@ -29,7 +31,9 @@ export default {
       labelBarColor: primaryColor,
       scrollButtonColor: iconColorOverlay,
       scrollButtonColorDisabled: iconColorDisabledOverlay,
-      tabCloseColor: closeColorOverlay,
+      closeColor: closeColorOverlay,
+      closeColorHover: closeColorHoverOverlay,
+      closeColorPressed: closeColorPressedOverlay,
       tabColor: tabColorOverlay,
       tabBorderColorActive: 'transparent',
       tabTextColor: textColor2Overlay,
diff --git a/src/tabs/styles/light.js b/src/tabs/styles/light.js
index 4319ae7c0..89313a83e 100644
--- a/src/tabs/styles/light.js
+++ b/src/tabs/styles/light.js
@@ -12,6 +12,8 @@ export default {
       iconColorOverlay,
       iconColorDisabledOverlay,
       closeColor,
+      closeColorHover,
+      closeColorPressed,
       tabColorOverlay,
       borderColor,
       textColor1,
@@ -30,7 +32,9 @@ export default {
       labelBarColor: primaryColor,
       scrollButtonColor: iconColorOverlay,
       scrollButtonColorDisabled: iconColorDisabledOverlay,
-      tabCloseColor: closeColor,
+      closeColor: closeColor,
+      closeColorHover: closeColorHover,
+      closeColorPressed: closeColorPressed,
       tabColor: tabColorOverlay,
       tabBorderColorActive: borderColor,
       tabTextColor: textColor2,
diff --git a/src/tag/src/Tag.vue b/src/tag/src/Tag.vue
index 1a6db1581..a0640ce81 100644
--- a/src/tag/src/Tag.vue
+++ b/src/tag/src/Tag.vue
@@ -2,9 +2,6 @@
   <div
     class="n-tag"
     :class="{
-      [`n-tag--${size}-size`]: true,
-      [`n-tag--${type}-type`]: true,
-      'n-tag--closable': !checkable && closable,
       'n-tag--disabled': disabled,
       'n-tag--checkable': checkable,
       'n-tag--checked': checkable && checked,
@@ -14,22 +11,19 @@
     @click="handleClick"
   >
     <span class="n-tag__content"><slot /></span>
-    <n-icon
+    <n-base-close
       v-if="!checkable && closable"
       class="n-tag__close"
-      color-transition
+      :disabled="disabled"
       @click="handleCloseClick"
-    >
-      <close-icon />
-    </n-icon>
+    />
   </div>
 </template>
 
 <script>
 import { defineComponent, computed } from 'vue'
-import { CloseIcon } from '../../_base/icons'
 import { useTheme } from '../../_mixins'
-import { NIcon } from '../../icon'
+import { NBaseClose } from '../../_base'
 import { warn, createKey } from '../../_utils'
 import { tagLight } from '../styles'
 import commonProps from './common-props'
@@ -38,8 +32,7 @@ import style from './styles/index.cssr.js'
 export default defineComponent({
   name: 'Tag',
   components: {
-    CloseIcon,
-    NIcon
+    NBaseClose
   },
   props: {
     ...useTheme.props,
diff --git a/src/tag/src/styles/index.cssr.js b/src/tag/src/styles/index.cssr.js
index 7791714e6..455895b14 100644
--- a/src/tag/src/styles/index.cssr.js
+++ b/src/tag/src/styles/index.cssr.js
@@ -49,33 +49,19 @@ export default cB('tag', `
     font-size: var(--font-size);
 `, [
   cE('close', `
-    color: var(--close-color);
     font-size: var(--close-size);
     margin: var(--close-margin);
+    transition: color .3s var(--bezier);
     cursor: pointer;
   `),
   cM('round', `
     padding: 0 calc(var(--height) / 2);
     border-radius: calc(var(--height) / 2);
   `),
-  cNotM('disabled', [
-    cE('close', [
-      c('&:hover', {
-        color: 'var(--close-color-hover)'
-      }),
-      c('&:active', {
-        color: 'var(--close-color-pressed)'
-      })
-    ])
-  ]),
   cM('disabled', {
     cursor: 'not-allowed !important',
     opacity: 'var(--opacity-disabled)'
-  }, [
-    cE('close', {
-      cursor: 'not-allowed !important'
-    })
-  ]),
+  }),
   cM('checkable', `
     cursor: pointer;
     box-shadow: none;
diff --git a/src/tag/styles/dark.js b/src/tag/styles/dark.js
index 85b05339a..669fe6af7 100644
--- a/src/tag/styles/dark.js
+++ b/src/tag/styles/dark.js
@@ -1,14 +1,10 @@
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { iconDark } from '../../icon/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
   name: 'Tag',
   common: commonDark,
-  peers: {
-    Icon: iconDark
-  },
   self (vars) {
     const {
       textColor2Overlay,
diff --git a/src/tag/styles/light.js b/src/tag/styles/light.js
index b278c6eb7..27687260f 100644
--- a/src/tag/styles/light.js
+++ b/src/tag/styles/light.js
@@ -1,14 +1,10 @@
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { iconLight } from '../../icon/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
   name: 'Tag',
   common: commonLight,
-  peers: {
-    Icon: iconLight
-  },
   self (vars) {
     const {
       textColor2Overlay,
diff --git a/src/themes/dark.js b/src/themes/dark.js
new file mode 100644
index 000000000..0cfa7fb49
--- /dev/null
+++ b/src/themes/dark.js
@@ -0,0 +1,133 @@
+import { commonDark } from '../_styles/new-common'
+import { alertDark } from '../alert/styles'
+import { affixDark } from '../affix/styles'
+import { anchorDark } from '../anchor/styles'
+import { autoCompleteDark } from '../auto-complete/styles'
+import { avatarDark } from '../avatar/styles'
+import { backTopDark } from '../back-top/styles'
+import { badgeDark } from '../badge/styles'
+import { breadcrumbDark } from '../breadcrumb/styles'
+import { buttonDark } from '../button/styles'
+import { cardDark } from '../card/styles'
+import { cascaderDark } from '../cascader/styles'
+import { checkboxDark } from '../checkbox/styles'
+import { codeDark } from '../code/styles'
+import { collapseDark } from '../collapse/styles'
+import { dataTableDark } from '../data-table/styles'
+import { datePickerDark } from '../date-picker/styles'
+import { descriptionsDark } from '../descriptions/styles'
+import { dialogDark } from '../dialog/styles'
+import { dividerDark } from '../divider/styles'
+import { drawerDark } from '../drawer/styles'
+import { dropdownDark } from '../dropdown/styles'
+import { dynamicInputDark } from '../dynamic-input/styles'
+import { dynamicTagsDark } from '../dynamic-tags/styles'
+import { elementDark } from '../element/styles'
+import { emptyDark } from '../empty/styles'
+import { formDark } from '../form/styles'
+import { gradientTextDark } from '../gradient-text/styles'
+import { iconDark } from '../icon/styles'
+import { inputDark } from '../input/styles'
+import { inputNumberDark } from '../input-number/styles'
+import { layoutDark } from '../layout/styles'
+import { listDark } from '../list/styles'
+import { loadingBarDark } from '../loading-bar/styles'
+import { logDark } from '../log/styles'
+import { menuDark } from '../menu/styles'
+import { messageDark } from '../message/styles'
+import { modalDark } from '../modal/styles'
+import { notificationDark } from '../notification/styles'
+import { paginationDark } from '../pagination/styles'
+import { popconfirmDark } from '../popconfirm/styles'
+import { popoverDark } from '../popover/styles'
+import { popselectDark } from '../popselect/styles'
+import { progressDark } from '../progress/styles'
+import { radioDark } from '../radio/styles'
+import { rateDark } from '../rate/styles'
+import { resultDark } from '../result/styles'
+import { scrollbarDark } from '../scrollbar/styles'
+import { sliderDark } from '../slider/styles'
+import { spaceDark } from '../space/styles'
+import { spinDark } from '../spin/styles'
+import { statisticDark } from '../statistic/styles'
+import { stepsDark } from '../steps/styles'
+import { switchDark } from '../switch/styles'
+import { tableDark } from '../table/styles'
+import { tabsDark } from '../tabs/styles'
+import { tagDark } from '../tag/styles'
+import { thingDark } from '../thing/styles'
+import { timePickerDark } from '../time-picker/styles'
+import { timelineDark } from '../timeline/styles'
+import { tooltipDark } from '../tooltip/styles'
+import { transferDark } from '../transfer/styles'
+import { typographyDark } from '../typography/styles'
+import { treeDark } from '../tree/styles'
+import { uploadDark } from '../upload/styles'
+
+export const darkTheme = {
+  common: commonDark,
+  Alert: alertDark,
+  Affix: affixDark,
+  Anchor: anchorDark,
+  AutoComplete: autoCompleteDark,
+  Avatar: avatarDark,
+  BackTop: backTopDark,
+  Badge: badgeDark,
+  Breadcrumb: breadcrumbDark,
+  Button: buttonDark,
+  Card: cardDark,
+  Cascader: cascaderDark,
+  Checkbox: checkboxDark,
+  Code: codeDark,
+  Collapse: collapseDark,
+  DataTable: dataTableDark,
+  DatePicker: datePickerDark,
+  Descriptions: descriptionsDark,
+  Dialog: dialogDark,
+  Divider: dividerDark,
+  Drawer: drawerDark,
+  Dropdown: dropdownDark,
+  DynamicInput: dynamicInputDark,
+  DynamicTags: dynamicTagsDark,
+  Element: elementDark,
+  Empty: emptyDark,
+  Form: formDark,
+  GradientText: gradientTextDark,
+  Icon: iconDark,
+  Input: inputDark,
+  InputNumber: inputNumberDark,
+  Layout: layoutDark,
+  List: listDark,
+  LoadingBar: loadingBarDark,
+  Log: logDark,
+  Menu: menuDark,
+  Message: messageDark,
+  Modal: modalDark,
+  Notification: notificationDark,
+  Pagination: paginationDark,
+  Popconfirm: popconfirmDark,
+  Popover: popoverDark,
+  Popselect: popselectDark,
+  Progress: progressDark,
+  Radio: radioDark,
+  Rate: rateDark,
+  Result: resultDark,
+  Scrollbar: scrollbarDark,
+  Slider: sliderDark,
+  Space: spaceDark,
+  Spin: spinDark,
+  Statistic: statisticDark,
+  Steps: stepsDark,
+  Switch: switchDark,
+  Table: tableDark,
+  Tabs: tabsDark,
+  Tag: tagDark,
+  Thing: thingDark,
+  TimePicker: timePickerDark,
+  Timeline: timelineDark,
+  Tooltip: tooltipDark,
+  Transfer: transferDark,
+  Tree: treeDark,
+  Typography: typographyDark,
+  Upload: uploadDark
+}
diff --git a/src/themes/index.js b/src/themes/index.js
new file mode 100644
index 000000000..82c78242e
--- /dev/null
+++ b/src/themes/index.js
@@ -0,0 +1 @@
+export { darkTheme } from './dark'
diff --git a/vue3.md b/vue3.md
index 8d3c46d89..8330d7c43 100644
--- a/vue3.md
+++ b/vue3.md
@@ -381,7 +381,7 @@
   - [ ] dropdown group + menu use dropdown
   - [ ] 多行 message
   - [ ] progress height
-  - [ ] close 重构
+  - [x] close 重构
   - [ ] data-table, radio style 重构
   - [ ] message icon style
   - [ ] transfer icon style