From d599bbc73718375a2f64ff3b4d16e19251e2968a Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 9 Jan 2021 01:43:48 +0800
Subject: [PATCH] refactor: affix -> collapse, theme peers & overrides

---
 .../components/avatar/enUS/color.demo.md      |  12 +-
 .../components/avatar/zhCN/color.demo.md      |  12 +-
 src/_base/README.md                           |   1 +
 src/_base/icon/index.js                       |   1 +
 src/_base/icon/src/Icon.vue                   |  16 ++
 src/_base/icon/src/styles/index.cssr.js       |  16 ++
 src/_base/index.js                            |   1 +
 src/_base/select-menu/src/SelectMenu.vue      |   7 +-
 src/_base/selection/src/Selection.vue         |   1 +
 src/_base/slot-machine/src/SlotMachine.vue    |  16 +-
 src/_mixins/use-theme.js                      |   4 +-
 src/_mixins/with-cssr.js                      | 183 ++++++++++++++
 src/affix/src/Affix.vue                       |   6 +-
 src/affix/src/styles/index.cssr.js            |  21 +-
 src/alert/src/Alert.vue                       |  53 ++---
 src/alert/src/styles/index.cssr.js            |  38 +--
 src/alert/styles/dark.js                      |   5 +
 src/alert/styles/light.js                     |   5 +
 src/anchor/src/AnchorAdapter.vue              |  56 ++++-
 src/anchor/src/BaseAnchor.vue                 |  36 +--
 src/anchor/styles/dark.js                     |   7 +-
 src/anchor/styles/light.js                    |   4 +
 src/auto-complete/src/AutoComplete.vue        |  15 +-
 src/auto-complete/styles/dark.js              |   7 +-
 src/auto-complete/styles/light.js             |   7 +-
 src/avatar/src/Avatar.vue                     |  20 +-
 src/avatar/styles/dark.js                     |   1 +
 src/avatar/styles/light.js                    |   1 +
 src/back-top/src/BackTop.vue                  |  22 +-
 src/back-top/src/styles/index.cssr.js         |  42 ++--
 src/back-top/src/styles/index.js              |   9 -
 src/back-top/styles/dark.js                   |   4 +-
 src/back-top/styles/light.js                  |   4 +-
 src/badge/src/Badge.vue                       |  12 +-
 src/badge/styles/dark.js                      |   5 +-
 src/badge/styles/light.js                     |   5 +-
 src/breadcrumb/src/Breadcrumb.vue             |   6 +-
 src/breadcrumb/src/BreadcrumbItem.vue         |   6 +-
 src/breadcrumb/styles/dark.js                 |   1 +
 src/breadcrumb/styles/light.js                |   1 +
 src/button/src/Button.vue                     |  15 +-
 src/card/src/Card.vue                         |  14 +-
 src/card/src/styles/index.cssr.js             |   3 +-
 src/card/styles/dark.js                       |   5 +-
 src/card/styles/light.js                      |   5 +-
 src/cascader/src/Cascader.vue                 |  19 +-
 src/cascader/src/CascaderMenu.vue             |  12 +-
 src/cascader/src/CascaderOption.vue           |  10 +-
 src/cascader/src/CascaderSelectMenu.vue       |  10 +-
 src/cascader/src/CascaderSubmenu.vue          |  12 +-
 src/cascader/src/styles/index.cssr.js         | 225 +++++++++---------
 src/cascader/styles/dark.js                   |   3 +-
 src/cascader/styles/light.js                  |   3 +-
 src/checkbox/src/Checkbox.vue                 |   4 +-
 src/checkbox/styles/dark.js                   |   3 +-
 src/checkbox/styles/light.js                  |   3 +-
 src/code/src/styles/index.cssr.js             |   3 +-
 src/code/styles/dark.js                       |   1 +
 src/code/styles/light.js                      |   1 +
 src/collapse/src/Collapse.js                  |   8 +-
 src/collapse/src/CollapseItem.vue             |  16 +-
 src/collapse/src/CollapseItemContent.js       |   6 +-
 src/collapse/src/styles/index.cssr.js         | 157 ++++++------
 src/collapse/src/styles/index.js              |   9 -
 src/collapse/styles/dark.js                   |   5 +-
 src/collapse/styles/light.js                  |   5 +-
 src/select/src/Select.vue                     |   6 +-
 src/styles.js                                 |  30 +--
 src/styles.new.js                             |   5 +-
 69 files changed, 729 insertions(+), 538 deletions(-)
 create mode 100644 src/_base/icon/index.js
 create mode 100644 src/_base/icon/src/Icon.vue
 create mode 100644 src/_base/icon/src/styles/index.cssr.js
 create mode 100644 src/_mixins/with-cssr.js
 delete mode 100644 src/back-top/src/styles/index.js
 delete mode 100644 src/collapse/src/styles/index.js

diff --git a/demo/documentation/components/avatar/enUS/color.demo.md b/demo/documentation/components/avatar/enUS/color.demo.md
index 2b146ca65..e452fd061 100644
--- a/demo/documentation/components/avatar/enUS/color.demo.md
+++ b/demo/documentation/components/avatar/enUS/color.demo.md
@@ -1,19 +1,13 @@
 # Color
 
-Color is depend on you even in different theme. You can set it to something related to things you want to eat.
+You can set it to something related to things you want to eat.
 
 ```html
 <n-avatar
-  :themed-style="{
-  light: {
+  :style="{
     color: 'yellow',
     backgroundColor: 'red'
-  },
-  dark: {
-     color: 'red',
-    backgroundColor: 'yellow'
-  }
-}"
+  }"
   >M</n-avatar
 >
 ```
diff --git a/demo/documentation/components/avatar/zhCN/color.demo.md b/demo/documentation/components/avatar/zhCN/color.demo.md
index a1afc2421..cb0110eb0 100644
--- a/demo/documentation/components/avatar/zhCN/color.demo.md
+++ b/demo/documentation/components/avatar/zhCN/color.demo.md
@@ -1,19 +1,13 @@
 # 颜色
 
-颜色可以对不同主题分别设定的，你可以把它设成某种和你爱吃的东西有关的颜色。
+你可以把它设成某种和你爱吃的东西有关的颜色。
 
 ```html
 <n-avatar
-  :themed-style="{
-  light: {
+  :style="{
     color: 'yellow',
     backgroundColor: 'red'
-  },
-  dark: {
-     color: 'red',
-    backgroundColor: 'yellow'
-  }
-}"
+  }"
   >M</n-avatar
 >
 ```
diff --git a/src/_base/README.md b/src/_base/README.md
index 6209f6053..20595e9fc 100644
--- a/src/_base/README.md
+++ b/src/_base/README.md
@@ -3,3 +3,4 @@ Themeable components:
 - selection
 - select-menu
 - clear-button
+- close
diff --git a/src/_base/icon/index.js b/src/_base/icon/index.js
new file mode 100644
index 000000000..58128242a
--- /dev/null
+++ b/src/_base/icon/index.js
@@ -0,0 +1 @@
+export { default } from './src/Icon.vue'
diff --git a/src/_base/icon/src/Icon.vue b/src/_base/icon/src/Icon.vue
new file mode 100644
index 000000000..109d41dc6
--- /dev/null
+++ b/src/_base/icon/src/Icon.vue
@@ -0,0 +1,16 @@
+<template>
+  <i class="n-base-icon"><slot /></i>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { useStyle } from '../../../_mixins'
+import style from './styles/index.cssr.js'
+
+export default defineComponent({
+  name: 'BaseIcon',
+  setup () {
+    useStyle('BaseIcon', style)
+  }
+})
+</script>
diff --git a/src/_base/icon/src/styles/index.cssr.js b/src/_base/icon/src/styles/index.cssr.js
new file mode 100644
index 000000000..c7359c9c6
--- /dev/null
+++ b/src/_base/icon/src/styles/index.cssr.js
@@ -0,0 +1,16 @@
+import { c, cB } from '../../../../_utils/cssr'
+
+export default cB('base-icon', `
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  fill: currentColor;
+`, [
+  c('svg', {
+    height: '1em',
+    width: '1em'
+  })
+])
diff --git a/src/_base/index.js b/src/_base/index.js
index 23ba446e9..088e36c42 100644
--- a/src/_base/index.js
+++ b/src/_base/index.js
@@ -8,3 +8,4 @@ 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 NBaseIcon } from './icon'
diff --git a/src/_base/select-menu/src/SelectMenu.vue b/src/_base/select-menu/src/SelectMenu.vue
index 59ea335a8..39776f66d 100644
--- a/src/_base/select-menu/src/SelectMenu.vue
+++ b/src/_base/select-menu/src/SelectMenu.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, defineComponent } from 'vue'
 import { VirtualList } from 'vueuc'
 import { depx } from 'seemly'
 import { NEmpty } from '../../../empty'
@@ -82,7 +82,7 @@ import NSelectGroupHeader from './SelectGroupHeader.js'
 import style from './styles/index.cssr.js'
 import { baseSelectMenuLight } from '../styles'
 
-export default {
+export default defineComponent({
   name: 'BaseSelectMenu',
   components: {
     VirtualList,
@@ -97,6 +97,7 @@ export default {
     }
   },
   props: {
+    ...useTheme.props,
     scrollable: {
       type: Boolean,
       default: true
@@ -318,5 +319,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/_base/selection/src/Selection.vue b/src/_base/selection/src/Selection.vue
index 718f5b0d5..de8a242e4 100644
--- a/src/_base/selection/src/Selection.vue
+++ b/src/_base/selection/src/Selection.vue
@@ -178,6 +178,7 @@ export default defineComponent({
     NTag
   },
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: undefined
diff --git a/src/_base/slot-machine/src/SlotMachine.vue b/src/_base/slot-machine/src/SlotMachine.vue
index 1cdb84abb..7a50afd72 100644
--- a/src/_base/slot-machine/src/SlotMachine.vue
+++ b/src/_base/slot-machine/src/SlotMachine.vue
@@ -1,5 +1,5 @@
 <template>
-  <span v-if="valueIsNumber" class="n-base-slot-machine" :style="cssVars">
+  <span v-if="valueIsNumber" class="n-base-slot-machine">
     <transition-group name="n-fade-up-width-expand-transition" tag="span">
       <slot-machine-number
         v-for="(number, i) in numbers"
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue'
+import { defineComponent } from 'vue'
 import { NFadeInExpandTransition } from '../../../_base'
 import { useStyle } from '../../../_mixins'
 import SlotMachineNumber from './SlotMachineNumber.vue'
@@ -46,17 +46,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const themeRef = useStyle('BaseSlotMachine', style)
-    return {
-      cssVars: computed(() => {
-        const {
-          common: { cubicBezierEaseOut }
-        } = themeRef.value
-        return {
-          '--bezier-ease-out': cubicBezierEaseOut
-        }
-      })
-    }
+    useStyle('BaseSlotMachine', style)
   },
   data () {
     return {
diff --git a/src/_mixins/use-theme.js b/src/_mixins/use-theme.js
index 7fbeba455..a7e8481a2 100644
--- a/src/_mixins/use-theme.js
+++ b/src/_mixins/use-theme.js
@@ -58,8 +58,8 @@ function useTheme (resolveId, mountId, style, defaultTheme, props) {
     return {
       common: mergedCommon,
       self: mergedSelf,
-      peersTheme: merge(peers, injectedPeers),
-      peersOverride: merge(peersOverrides, injectedPeersOverrides)
+      peers: merge(peers, injectedPeers),
+      overrides: merge(peersOverrides, injectedPeersOverrides)
     }
   })
   return mergedThemeRef
diff --git a/src/_mixins/with-cssr.js b/src/_mixins/with-cssr.js
new file mode 100644
index 000000000..5cff3c874
--- /dev/null
+++ b/src/_mixins/with-cssr.js
@@ -0,0 +1,183 @@
+import { find } from '../_utils/cssr'
+import { warn } from '../_utils'
+import { fallbackTheme } from './themeable'
+
+if (__DEV__) {
+  if (!window.naive) window.naive = {}
+  window.naive.styleRenderingDuration = 0
+}
+
+function getRenderedTheme (vm) {
+  return vm.mergedTheme || vm.theme || fallbackTheme
+}
+
+function getGlobalVars (styles, theme) {
+  const {
+    [theme]: { base }
+  } = styles
+  return base.getGlobalVars() // style[theme].base, for example style.light.base
+}
+
+function getLocalStyle (styles, theme, resolveId) {
+  return styles[theme][resolveId]
+}
+
+function getLocalVars (localStyle, globalVars) {
+  return localStyle.getLocalVars(globalVars)
+}
+
+function createMutableStyleId (
+  componentCssrId,
+  renderedTheme,
+  depKey,
+  depValue
+) {
+  if (depKey === 'mergedTheme' || depKey === 'theme') {
+    return componentCssrId + '-' + renderedTheme
+  }
+  return (
+    componentCssrId +
+    '-' +
+    renderedTheme +
+    '-' +
+    depKey +
+    (depValue ? '-' + depValue : '')
+  )
+}
+
+function setupMutableStyle (vm, theme, depKey, CNode) {
+  const {
+    $options: options,
+    // deprecated
+    // finally, we shouldn't use any value comes from $naive
+    // NConfigProvider should do all the stuff
+    $naive: { styles }
+  } = vm
+  const resolvedStyles = vm.NConfigProvider?.mergedStyles ?? styles
+  const resolveId = options.cssrName || options.name
+  const mountPrefix = options.cssrId || options.name
+  const depValue =
+    depKey === 'mergedTheme' || depKey === 'theme' ? theme : vm[depKey]
+  if (depValue === null || depValue === undefined) {
+    if (__DEV__) {
+      warn(
+        'mixins/with-cssr',
+        `dependency key ${resolveId}.${depKey} should not be nullable`
+      )
+    }
+    return
+  }
+  // create mount id
+  const mountId = createMutableStyleId(mountPrefix, theme, depKey, depValue)
+  if (find(mountId)) return
+  // get global style
+  const globalVars = getGlobalVars(resolvedStyles, theme)
+  // get component sytle
+  const localStyle = getLocalStyle(resolvedStyles, theme, resolveId)
+  const localVars = getLocalVars(localStyle, globalVars)
+  // get cssr props
+  const cssrProps = createCssrProps(vm, theme, globalVars, localVars)
+  // mount the style
+  CNode.mount({
+    target: mountId,
+    props: cssrProps,
+    count: false
+  })
+}
+
+function createCssrProps (vm, theme, globalVars, localVars) {
+  return {
+    $vm: vm,
+    $theme: theme,
+    $global: globalVars,
+    $local: localVars
+  }
+}
+
+function getCssrProps (vm, theme) {
+  const {
+    $options: options,
+    // deprecated
+    // finally, we shouldn't use any value comes from $naive
+    // NConfigProvider should do all the stuff
+    $naive: { styles }
+  } = vm
+  const resolvedStyles = vm.NConfigProvider?.mergedStyles ?? styles
+  const resolveId = options.cssrName || options.name
+  const globalVars = getGlobalVars(resolvedStyles, theme)
+  const localStyle = getLocalStyle(resolvedStyles, theme, resolveId)
+  const localVars = getLocalVars(localStyle, globalVars)
+  return createCssrProps(vm, theme, globalVars, localVars)
+}
+
+const withCssr = function (styles = [], options = {}) {
+  let data
+  // collect watchers
+  const watchers = {}
+  const { themeKey, injectCssrProps } = options
+  if (themeKey && injectCssrProps) {
+    watchers[themeKey] = [
+      (vm) => {
+        vm.cssrProps = getCssrProps(vm, vm[themeKey])
+      }
+    ]
+    data = function () {
+      return {
+        cssrProps: getCssrProps(this, this[themeKey])
+      }
+    }
+  }
+  styles.forEach((style) => {
+    if (__DEV__ && !style.watch) {
+      warn('with-cssr', 'Style option has no `watch` field.')
+      return
+    }
+    style.watch.forEach((watchKey) => {
+      if (!watchers[watchKey]) watchers[watchKey] = []
+      watchers[watchKey].push(function (vm, mergedTheme) {
+        if (__DEV__) {
+          window.naive.styleRenderingDuration -= performance.now()
+        }
+        setupMutableStyle(vm, mergedTheme, style.key, style.CNode)
+        if (__DEV__) {
+          window.naive.styleRenderingDuration += performance.now()
+        }
+      })
+    })
+  })
+  // create component watch options
+  const watchOptions = {}
+  Object.keys(watchers).forEach((watchKey) => {
+    watchOptions[watchKey] = function () {
+      watchers[watchKey].forEach((watcher) => {
+        watcher(this, getRenderedTheme(this))
+      })
+    }
+  })
+  return {
+    data,
+    beforeMount () {
+      styles.forEach((style) => {
+        if (__DEV__) {
+          window.naive.styleRenderingDuration -= performance.now()
+        }
+        if (style.key) {
+          setupMutableStyle(
+            this,
+            getRenderedTheme(this),
+            style.key,
+            style.CNode
+          )
+        } else if (__DEV__) {
+          warn('mixins/with-cssr', 'style has no dependency key')
+        }
+        if (__DEV__) {
+          window.naive.styleRenderingDuration += performance.now()
+        }
+      })
+    },
+    watch: watchOptions
+  }
+}
+
+export default withCssr
diff --git a/src/affix/src/Affix.vue b/src/affix/src/Affix.vue
index aeb56f0a5..224f657c3 100644
--- a/src/affix/src/Affix.vue
+++ b/src/affix/src/Affix.vue
@@ -13,14 +13,14 @@
 </template>
 
 <script>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, defineComponent } from 'vue'
 import { getScrollParent, unwrapElement } from 'seemly'
 import { useConfig, useTheme } from '../../_mixins'
 import { warn } from '../../_utils'
 import { affixLight } from '../styles'
 import style from './styles/index.cssr'
 
-export default {
+export default defineComponent({
   name: 'Affix',
   props: {
     listenTo: {
@@ -176,5 +176,5 @@ export default {
       })
     }
   }
-}
+})
 </script>
diff --git a/src/affix/src/styles/index.cssr.js b/src/affix/src/styles/index.cssr.js
index 2e371b0fe..93c1089f7 100644
--- a/src/affix/src/styles/index.cssr.js
+++ b/src/affix/src/styles/index.cssr.js
@@ -1,14 +1,11 @@
 import { cB, cM } from '../../../_utils/cssr'
 
-export default cB(
-  'affix',
-  [
-    cM('affixed', {
-      position: 'fixed'
-    }, [
-      cM('absolute-positioned', {
-        position: 'absolute'
-      })
-    ])
-  ]
-)
+export default cB('affix', [
+  cM('affixed', {
+    position: 'fixed'
+  }, [
+    cM('absolute-positioned', {
+      position: 'absolute'
+    })
+  ])
+])
diff --git a/src/alert/src/Alert.vue b/src/alert/src/Alert.vue
index ac79616cf..b78359280 100644
--- a/src/alert/src/Alert.vue
+++ b/src/alert/src/Alert.vue
@@ -4,31 +4,30 @@
       v-if="visible"
       class="n-alert"
       :class="{
-        [`n-alert--${type}-type`]: true,
         'n-alert--no-icon': showIcon === false
       }"
       :style="cssVars"
+      v-bind="$attrs"
     >
       <div v-if="closable" class="n-alert__close" @click="handleCloseClick">
-        <n-icon>
+        <n-icon
+          :unstable-theme="theme.peers.Icon"
+          :unstable-theme-overrides="theme.overrides.Icon"
+        >
           <close-icon />
         </n-icon>
       </div>
       <div v-if="showIcon" class="n-alert__icon">
-        <n-icon v-if="$slots.icon">
-          <slot name="icon" />
-        </n-icon>
-        <n-icon v-else-if="type === 'success'">
-          <success-icon />
-        </n-icon>
-        <n-icon v-else-if="type === 'info'">
-          <info-icon />
-        </n-icon>
-        <n-icon v-else-if="type === 'warning'">
-          <warning-icon />
-        </n-icon>
-        <n-icon v-else-if="type === 'error'">
-          <error-icon />
+        <slot v-if="$slots.icon" name="icon" />
+        <n-icon
+          v-else
+          :unstable-theme="theme.peers.Icon"
+          :unstable-theme-overrides="theme.overrides.Icon"
+        >
+          <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>
       </div>
       <div class="n-alert-body">
@@ -46,15 +45,7 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue'
-import { NIcon } from '../../icon'
-import { NFadeInExpandTransition } from '../../_base'
-import { useTheme } from '../../_mixins'
-import { warn, createKey } from '../../_utils'
-import { alertLight } from '../styles'
-import style from './styles/index.cssr'
-
-// icons
+import { ref, computed, defineComponent } from 'vue'
 import {
   InfoIcon,
   SuccessIcon,
@@ -62,8 +53,14 @@ import {
   ErrorIcon,
   CloseIcon
 } from '../../_base/icons'
+import { NIcon } from '../../icon'
+import { NFadeInExpandTransition } from '../../_base'
+import { useTheme } from '../../_mixins'
+import { warn, createKey } from '../../_utils'
+import { alertLight } from '../styles'
+import style from './styles/index.cssr'
 
-export default {
+export default defineComponent({
   name: 'Alert',
   components: {
     NIcon,
@@ -74,6 +71,7 @@ export default {
     ErrorIcon,
     CloseIcon
   },
+  inheritAttrs: false,
   props: {
     ...useTheme.props,
     title: {
@@ -169,8 +167,9 @@ export default {
       visible: visibleRef,
       handleCloseClick,
       handleAfterLeave,
+      theme: themeRef,
       cssVars
     }
   }
-}
+})
 </script>
diff --git a/src/alert/src/styles/index.cssr.js b/src/alert/src/styles/index.cssr.js
index e35e5700b..841de13be 100644
--- a/src/alert/src/styles/index.cssr.js
+++ b/src/alert/src/styles/index.cssr.js
@@ -15,14 +15,14 @@ import fadeInHeightExpandTranstion from '../../../_styles/transitions/fade-in-he
 // --border-radius
 // --font-size
 // --title-font-weight
-export default cB('alert', {
-  lineHeight: 'var(--line-height)',
-  borderRadius: 'var(--border-radius)',
-  position: 'relative',
-  transition: 'background-color .3s var(--bezier)',
-  backgroundColor: 'var(--color)',
-  textAlign: 'start'
-}, [
+export default cB('alert', `
+  line-height: var(--line-height);
+  border-radius: var(--border-radius);
+  position: relative;
+  transition: background-color .3s var(--bezier);
+  background-color: var(--color);
+  text-align: start;
+`, [
   cE('close', {
     color: 'var(--close-color)'
   }, [
@@ -82,17 +82,17 @@ export default cB('alert', {
       cursor: 'pointer'
     })
   ]),
-  cB('alert-body', {
-    borderRadius: 'var(--border-radius)',
-    padding: '15px 15px 15px 47px',
-    transition: 'border-color .3s var(--bezier)'
-  }, [
-    cE('title', {
-      transition: 'color .3s var(--bezier)',
-      fontSize: '16px',
-      lineHeight: '19px',
-      fontWeight: 'var(--title-font-weight)'
-    }, [
+  cB('alert-body', `
+    border-radius: var(--border-radius);
+    padding: 15px 15px 15px 47px;
+    transition: border-color .3s var(--bezier);
+  `, [
+    cE('title', `
+      transition: color .3s var(--bezier);
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: var(--title-font-weight);
+    `, [
       c('& +', [
         cE('content', {
           marginTop: '9px'
diff --git a/src/alert/styles/dark.js b/src/alert/styles/dark.js
index 53dfeb580..21dc694ba 100644
--- a/src/alert/styles/dark.js
+++ b/src/alert/styles/dark.js
@@ -1,8 +1,13 @@
 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 5fdc61bb2..de62d2140 100644
--- a/src/alert/styles/light.js
+++ b/src/alert/styles/light.js
@@ -1,8 +1,13 @@
 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/anchor/src/AnchorAdapter.vue b/src/anchor/src/AnchorAdapter.vue
index 0e3d56422..904f249b0 100644
--- a/src/anchor/src/AnchorAdapter.vue
+++ b/src/anchor/src/AnchorAdapter.vue
@@ -1,7 +1,8 @@
 <template>
   <n-base-anchor
     v-if="!affix"
-    ref="anchor"
+    ref="anchorRef"
+    :style="cssVars"
     :listen-to="listenTo"
     :bound="bound"
     :target="target"
@@ -11,6 +12,8 @@
   </n-base-anchor>
   <n-affix
     v-else
+    :unstable-theme="theme.peers.Affix"
+    :unstable-theme-overrides="theme.overrides.Affix"
     :listen-to="listenTo"
     :top="top"
     :bottom="bottom"
@@ -20,8 +23,8 @@
     :target="target"
   >
     <n-base-anchor
-      ref="anchor"
-      :unstable-theme="unstableTheme"
+      ref="anchorRef"
+      :style="cssVars"
       :bound="bound"
       :listen-to="listenTo"
       :ignore-gap="ignoreGap"
@@ -33,11 +36,14 @@
 </template>
 
 <script>
-import { useTheme } from '../../_mixins'
+import { defineComponent, computed, ref } from 'vue'
 import { NAffix } from '../../affix'
+import { useTheme } from '../../_mixins'
+import { anchorLight } from '../styles'
+import style from './styles/index.cssr'
 import NBaseAnchor from './BaseAnchor.vue'
 
-export default {
+export default defineComponent({
   name: 'Anchor',
   components: {
     NBaseAnchor,
@@ -89,10 +95,42 @@ export default {
       default: undefined
     }
   },
-  methods: {
-    scrollTo (href) {
-      this.$refs.anchor.setActiveHref(href)
+  setup (props) {
+    const themeRef = useTheme('Anchor', 'Anchor', style, anchorLight, props)
+    const anchorRef = ref(null)
+    return {
+      anchorRef,
+      scrollTo (href) {
+        anchorRef.value.setActiveHref(href)
+      },
+      theme: themeRef,
+      cssVars: computed(() => {
+        const {
+          self: {
+            railColor,
+            linkColor,
+            railColorActive,
+            linkTextColor,
+            linkTextColorHover,
+            linkTextColorPressed,
+            linkTextColorActive,
+            linkFontSize
+          },
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--link-color': linkColor,
+          '--link-font-size': linkFontSize,
+          '--link-text-color': linkTextColor,
+          '--link-text-color-hover': linkTextColorHover,
+          '--link-text-color-active': linkTextColorActive,
+          '--link-text-color-pressed': linkTextColorPressed,
+          '--bezier': cubicBezierEaseInOut,
+          '--rail-color': railColor,
+          '--rail-color-active': railColorActive
+        }
+      })
     }
   }
-}
+})
 </script>
diff --git a/src/anchor/src/BaseAnchor.vue b/src/anchor/src/BaseAnchor.vue
index f5f910609..4f7fc5a01 100644
--- a/src/anchor/src/BaseAnchor.vue
+++ b/src/anchor/src/BaseAnchor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="n-anchor" :style="cssVars">
+  <div class="n-anchor">
     <div ref="slot" class="n-anchor-link-background" />
     <div class="n-anchor-rail">
       <div
@@ -15,13 +15,10 @@
 </template>
 
 <script>
-import { nextTick, ref, markRaw, getCurrentInstance, computed } from 'vue'
+import { nextTick, ref, markRaw, getCurrentInstance } from 'vue'
 import { getScrollParent, unwrapElement } from 'seemly'
 import { onFontsReady } from 'vooks'
-import { useTheme } from '../../_mixins'
 import { warn } from '../../_utils'
-import { anchorLight } from '../styles'
-import style from './styles/index.cssr'
 
 function getOffset (el, container) {
   const { top: elTop, height } = el.getBoundingClientRect()
@@ -73,38 +70,11 @@ export default {
       vm.setActiveHref(window.location)
       vm.handleScroll(false)
     })
-    const themeRef = useTheme('Anchor', 'Anchor', style, anchorLight, props)
     return {
       collectedLinkHrefs: markRaw([]),
       titleEls: markRaw([]),
       activeHref: ref(null),
-      scrollElement: ref(null),
-      cssVars: computed(() => {
-        const {
-          self: {
-            railColor,
-            linkColor,
-            railColorActive,
-            linkTextColor,
-            linkTextColorHover,
-            linkTextColorPressed,
-            linkTextColorActive,
-            linkFontSize
-          },
-          common: { cubicBezierEaseInOut }
-        } = themeRef.value
-        return {
-          '--link-color': linkColor,
-          '--link-font-size': linkFontSize,
-          '--link-text-color': linkTextColor,
-          '--link-text-color-hover': linkTextColorHover,
-          '--link-text-color-active': linkTextColorActive,
-          '--link-text-color-pressed': linkTextColorPressed,
-          '--bezier': cubicBezierEaseInOut,
-          '--rail-color': railColor,
-          '--rail-color-active': railColorActive
-        }
-      })
+      scrollElement: ref(null)
     }
   },
   watch: {
diff --git a/src/anchor/styles/dark.js b/src/anchor/styles/dark.js
index a8371cc37..4dc76103c 100644
--- a/src/anchor/styles/dark.js
+++ b/src/anchor/styles/dark.js
@@ -4,7 +4,11 @@ import { affixDark } from '../../affix/styles'
 import commonVars from './_common'
 
 export default {
+  name: 'Anchor',
   common: commonDark,
+  peers: {
+    Affix: affixDark
+  },
   self (vars) {
     const {
       borderRadius,
@@ -25,6 +29,5 @@ export default {
       linkTextColorPressed: primaryColorPressed,
       linkTextColorActive: primaryColor
     }
-  },
-  peers: [affixDark]
+  }
 }
diff --git a/src/anchor/styles/light.js b/src/anchor/styles/light.js
index c77e2621e..704347df9 100644
--- a/src/anchor/styles/light.js
+++ b/src/anchor/styles/light.js
@@ -4,7 +4,11 @@ import { affixLight } from '../../affix/styles'
 import commonVars from './_common'
 
 export default {
+  name: 'Anchor',
   common: commonLight,
+  peers: {
+    Affix: affixLight
+  },
   self (vars) {
     const {
       borderRadius,
diff --git a/src/auto-complete/src/AutoComplete.vue b/src/auto-complete/src/AutoComplete.vue
index 09dae695f..7e6ed7f5d 100644
--- a/src/auto-complete/src/AutoComplete.vue
+++ b/src/auto-complete/src/AutoComplete.vue
@@ -17,8 +17,9 @@
           :value="mergedValue"
         >
           <n-input
+            :unstable-theme="theme.peers.Input"
+            :unstable-theme-overrides="theme.overrides.Input"
             :bordered="mergedBordered"
-            :theme="'light'"
             :value="mergedValue"
             :placeholder="placeholder"
             :size="mergedSize"
@@ -45,10 +46,11 @@
           v-if="active"
           ref="menuRef"
           v-clickoutside="handleClickOutsideMenu"
+          :unstable-theme="theme.peers.BaseSelectMenu"
+          :unstable-theme-overrides="theme.overrides.BaseSelectMenu"
           auto-pending
           class="n-auto-complete-menu"
           :style="cssVars"
-          :theme="'light'"
           :pattern="value"
           :tree-mate="treeMate"
           :multiple="false"
@@ -61,7 +63,7 @@
 </template>
 
 <script>
-import { ref, toRef, computed } from 'vue'
+import { ref, toRef, computed, defineComponent } from 'vue'
 import { createTreeMate } from 'treemate'
 import { VBinder, VTarget, VFollower } from 'vueuc'
 import { clickoutside } from 'vdirs'
@@ -72,9 +74,9 @@ import { NBaseSelectMenu } from '../../_base'
 import { NInput } from '../../input'
 import { autoCompleteLight } from '../styles'
 import { mapAutoCompleteOptionsToSelectOptions } from './utils'
-import style from './styles/index.cssr'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'AutoComplete',
   components: {
     NInput,
@@ -181,6 +183,7 @@ export default {
       isComposing: ref(false),
       menuRef: ref(null),
       triggerRef: ref(null),
+      theme: themeRef,
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut }
@@ -315,5 +318,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/auto-complete/styles/dark.js b/src/auto-complete/styles/dark.js
index df364544b..dcde3c011 100644
--- a/src/auto-complete/styles/dark.js
+++ b/src/auto-complete/styles/dark.js
@@ -3,7 +3,10 @@ import { inputDark } from '../../input/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'AutoComplete',
   common: commonDark,
-  self () {},
-  peers: [baseSelectMenuDark, inputDark]
+  peers: {
+    BaseSelectMenu: baseSelectMenuDark,
+    Input: inputDark
+  }
 }
diff --git a/src/auto-complete/styles/light.js b/src/auto-complete/styles/light.js
index a82d386f2..9f3605282 100644
--- a/src/auto-complete/styles/light.js
+++ b/src/auto-complete/styles/light.js
@@ -3,7 +3,10 @@ import { inputLight } from '../../input/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'AutoComplete',
   common: commonLight,
-  self () {},
-  peers: [baseSelectMenuLight, inputLight]
+  peers: {
+    BaseSelectMenu: baseSelectMenuLight,
+    Input: inputLight
+  }
 }
diff --git a/src/avatar/src/Avatar.vue b/src/avatar/src/Avatar.vue
index 2c6859259..66686e3d2 100644
--- a/src/avatar/src/Avatar.vue
+++ b/src/avatar/src/Avatar.vue
@@ -1,13 +1,5 @@
 <template>
-  <span
-    ref="selfRef"
-    class="n-avatar"
-    :class="{
-      [`n-avatar--${size}-size`]: typeof size !== 'number',
-      [`n-avatar--circle-shaped`]: circle || round
-    }"
-    :style="cssVars"
-  >
+  <span ref="selfRef" class="n-avatar" :style="cssVars">
     <img v-if="!$slots.default && src" :src="src">
     <slot v-else-if="$slots.icon" name="icon" />
     <span
@@ -25,14 +17,14 @@
 </template>
 
 <script>
-import { ref, computed, onUpdated, onMounted } from 'vue'
+import { ref, computed, onUpdated, onMounted, defineComponent } from 'vue'
 import { useTheme } from '../../_mixins'
 import { avatarLight } from '../styles'
-import style from './styles/index.cssr.js'
-import { validSize } from './config'
 import { createKey } from '../../_utils'
+import { validSize } from './config'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Avatar',
   props: {
     ...useTheme.props,
@@ -132,5 +124,5 @@ export default {
       })
     }
   }
-}
+})
 </script>
diff --git a/src/avatar/styles/dark.js b/src/avatar/styles/dark.js
index 3f0deafa4..3f61f40dc 100644
--- a/src/avatar/styles/dark.js
+++ b/src/avatar/styles/dark.js
@@ -1,6 +1,7 @@
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'Avatar',
   common: commonDark,
   self (vars) {
     const {
diff --git a/src/avatar/styles/light.js b/src/avatar/styles/light.js
index dbebeb3fb..0ab7bbbf3 100644
--- a/src/avatar/styles/light.js
+++ b/src/avatar/styles/light.js
@@ -1,6 +1,7 @@
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'Avatar',
   common: commonLight,
   self (vars) {
     const {
diff --git a/src/back-top/src/BackTop.vue b/src/back-top/src/BackTop.vue
index 973af25c3..d9905399e 100644
--- a/src/back-top/src/BackTop.vue
+++ b/src/back-top/src/BackTop.vue
@@ -27,9 +27,9 @@
           @click="handleClick"
         >
           <slot>
-            <n-icon>
+            <n-base-icon>
               <back-top-icon />
-            </n-icon>
+            </n-base-icon>
           </slot>
         </div>
       </transition>
@@ -38,21 +38,23 @@
 </template>
 
 <script>
-import { ref, computed, toRef, watch, nextTick } from 'vue'
+import { ref, computed, toRef, watch, nextTick, defineComponent } from 'vue'
 import { VLazyTeleport } from 'vueuc'
 import { useIsMounted, useMergedState } from 'vooks'
 import { getScrollParent, unwrapElement } from 'seemly'
 import { useTheme } from '../../_mixins'
+import { NBaseIcon } from '../../_base'
 import { formatLength, warn } from '../../_utils'
 import { backTopLight } from '../styles'
-import style from './styles/index.cssr.js'
 import BackTopIcon from './BackTopIcon.vue'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'BackTop',
   components: {
     VLazyTeleport,
-    BackTopIcon
+    BackTopIcon,
+    NBaseIcon
   },
   inheritAttrs: false,
   props: {
@@ -149,7 +151,8 @@ export default {
             width,
             height,
             iconSize,
-            borderRadius
+            borderRadius,
+            textColor
           },
           common: { cubicBezierEaseInOut }
         } = themeRef.value
@@ -165,7 +168,8 @@ export default {
           '--icon-size': iconSize,
           '--icon-color': iconColor,
           '--icon-color-hover': iconColorHover,
-          '--icon-color-pressed': iconColorPressed
+          '--icon-color-pressed': iconColorPressed,
+          '--text-color': textColor
         }
       })
     }
@@ -243,5 +247,5 @@ export default {
       this.transitionDisabled = false
     }
   }
-}
+})
 </script>
diff --git a/src/back-top/src/styles/index.cssr.js b/src/back-top/src/styles/index.cssr.js
index 5b8ef3687..95ca45e0a 100644
--- a/src/back-top/src/styles/index.cssr.js
+++ b/src/back-top/src/styles/index.cssr.js
@@ -14,29 +14,31 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
 // --icon-color
 // --icon-color-hover
 // --icon-color-pressed
+// --text-color
 export default cB('back-top', `
-    position: fixed;
-    right: 40px;
-    bottom: 40px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition:
-      color .3s var(--bezier),
-      box-shadow .3s var(--bezier),
-      background-color .3s var(--bezier);
-    border-radius: var(--border-radius);
-    height: var(--height);
-    min-width: var(--width);
-    box-shadow: var(--box-shadow);
-    background-color: var(--color);
-  `, [
+  position: fixed;
+  right: 40px;
+  bottom: 40px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color);
+  transition:
+    color .3s var(--bezier),
+    box-shadow .3s var(--bezier),
+    background-color .3s var(--bezier);
+  border-radius: var(--border-radius);
+  height: var(--height);
+  min-width: var(--width);
+  box-shadow: var(--box-shadow);
+  background-color: var(--color);
+`, [
   fadeInScaleUpTransition(),
   cM('transition-disabled', {
     transition: 'none !important'
   }),
-  cB('icon', `
+  cB('base-icon', `
     font-size: var(--icon-size);
     color: var(--icon-color);
     transition: color .3s var(--bezier);
@@ -47,14 +49,14 @@ export default cB('back-top', `
   c('&:hover', {
     boxShadow: 'var(--box-shadow-hover)'
   }, [
-    cB('icon', {
+    cB('base-icon', {
       color: 'var(--icon-color-hover)'
     })
   ]),
   c('&:active', {
     boxShadow: 'var(--box-shadow-pressed)'
   }, [
-    cB('icon', {
+    cB('base-icon', {
       color: 'var(--icon-color-pressed)'
     })
   ])
diff --git a/src/back-top/src/styles/index.js b/src/back-top/src/styles/index.js
deleted file mode 100644
index 2c8885889..000000000
--- a/src/back-top/src/styles/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import themedBaseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: themedBaseStyle
-  }
-]
diff --git a/src/back-top/styles/dark.js b/src/back-top/styles/dark.js
index 4eb9ac027..b5d1bc1be 100644
--- a/src/back-top/styles/dark.js
+++ b/src/back-top/styles/dark.js
@@ -1,10 +1,9 @@
 import commonVariables from './_common.js'
-import { iconDark } from '../../icon/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'BackTop',
   common: commonDark,
-  peers: [iconDark],
   self (vars) {
     const {
       popoverColor,
@@ -15,6 +14,7 @@ export default {
     return {
       ...commonVariables,
       color: popoverColor,
+      textColor: textColor2Overlay,
       iconColor: textColor2Overlay,
       iconColorHover: primaryColorHover,
       iconColorPressed: primaryColorPressed,
diff --git a/src/back-top/styles/light.js b/src/back-top/styles/light.js
index f0e3d549d..0998314d5 100644
--- a/src/back-top/styles/light.js
+++ b/src/back-top/styles/light.js
@@ -1,10 +1,9 @@
 import commonVariables from './_common.js'
-import { iconLight } from '../../icon/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'BackTop',
   common: commonLight,
-  peer: [iconLight],
   self (vars) {
     const {
       popoverColor,
@@ -15,6 +14,7 @@ export default {
     return {
       ...commonVariables,
       color: popoverColor,
+      textColor: textColor2,
       iconColor: textColor2,
       iconColorHover: primaryColorHover,
       iconColorPressed: primaryColorPressed,
diff --git a/src/badge/src/Badge.vue b/src/badge/src/Badge.vue
index 3a9955f8c..2864f0981 100644
--- a/src/badge/src/Badge.vue
+++ b/src/badge/src/Badge.vue
@@ -1,13 +1,10 @@
 <template>
   <div
     class="n-badge"
-    :class="[
-      `n-badge--${type}-type`,
-      {
-        'n-badge--dot': dot,
-        [`n-badge--as-is`]: !$slots.default
-      }
-    ]"
+    :class="{
+      'n-badge--dot': dot,
+      [`n-badge--as-is`]: !$slots.default
+    }"
     :style="cssVars"
   >
     <slot />
@@ -19,7 +16,6 @@
       <sup v-if="showBadge" class="n-badge-sup">
         <n-base-slot-machine
           v-if="!dot"
-          :theme="'light'"
           :appeared="appeared"
           :max="max"
           :value="value"
diff --git a/src/badge/styles/dark.js b/src/badge/styles/dark.js
index d76c83417..872df3891 100644
--- a/src/badge/styles/dark.js
+++ b/src/badge/styles/dark.js
@@ -1,11 +1,8 @@
-import { baseSlotMachineDark } from '../../_base/slot-machine/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'Badge',
   common: commonDark,
-  peers: {
-    BaseSlotMachine: baseSlotMachineDark
-  },
   self (vars) {
     const {
       errorColorSuppl,
diff --git a/src/badge/styles/light.js b/src/badge/styles/light.js
index a0bb922cd..c3d5d4a62 100644
--- a/src/badge/styles/light.js
+++ b/src/badge/styles/light.js
@@ -1,11 +1,8 @@
-import { baseSlotMachineLight } from '../../_base/slot-machine/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'Badge',
   common: commonLight,
-  peers: {
-    BaseSlotMachine: baseSlotMachineLight
-  },
   self (vars) {
     const { errorColor, infoColor, successColor, warningColor } = vars
     return {
diff --git a/src/breadcrumb/src/Breadcrumb.vue b/src/breadcrumb/src/Breadcrumb.vue
index d61957b87..c7fb92044 100644
--- a/src/breadcrumb/src/Breadcrumb.vue
+++ b/src/breadcrumb/src/Breadcrumb.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useTheme } from '../../_mixins'
 import { breadcrumbLight } from '../styles'
 import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Breadcrumb',
   provide () {
     return {
@@ -59,5 +59,5 @@ export default {
       })
     }
   }
-}
+})
 </script>
diff --git a/src/breadcrumb/src/BreadcrumbItem.vue b/src/breadcrumb/src/BreadcrumbItem.vue
index 8fdcb81b8..d1b485b35 100644
--- a/src/breadcrumb/src/BreadcrumbItem.vue
+++ b/src/breadcrumb/src/BreadcrumbItem.vue
@@ -10,12 +10,14 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'BreadcrumbItem',
   inject: {
     NBreadcrumb: {
       default: null
     }
   }
-}
+})
 </script>
diff --git a/src/breadcrumb/styles/dark.js b/src/breadcrumb/styles/dark.js
index e97df7f20..792d29d64 100644
--- a/src/breadcrumb/styles/dark.js
+++ b/src/breadcrumb/styles/dark.js
@@ -2,6 +2,7 @@ import commonVariables from './_common'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'Breadcrumb',
   common: commonDark,
   self (vars) {
     const {
diff --git a/src/breadcrumb/styles/light.js b/src/breadcrumb/styles/light.js
index 72858bc02..650a2822e 100644
--- a/src/breadcrumb/styles/light.js
+++ b/src/breadcrumb/styles/light.js
@@ -2,6 +2,7 @@ import commonVariables from './_common'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'Breadcrumb',
   common: commonLight,
   self (vars) {
     const {
diff --git a/src/button/src/Button.vue b/src/button/src/Button.vue
index 1fa147d44..7b7057a6b 100644
--- a/src/button/src/Button.vue
+++ b/src/button/src/Button.vue
@@ -3,17 +3,12 @@
     ref="selfRef"
     class="n-button"
     :class="{
-      'n-button--round': round,
-      'n-button--circle': circle,
       'n-button--disabled': disabled,
       'n-button--block': block,
       'n-button--pressed': enterPressed,
-      'n-button--ghost': !text && (ghost || dashed),
-      'n-button--text': text,
       'n-button--dashed': !text && dashed,
       'n-button--color': color,
-      [`n-button--${type}-type`]: true,
-      [`n-button--${mergedSize}-size`]: true
+      [`n-button--${type}-type`]: true
     }"
     :tabindex="mergedFocusable ? 0 : -1"
     :type="attrType"
@@ -76,6 +71,10 @@
 <script>
 import { ref, computed, inject, nextTick } from 'vue'
 import { useMemo } from 'vooks'
+import {
+  createHoverColor,
+  createPressedColor
+} from '../../_utils/color/index.js'
 import { useTheme } from '../../_mixins'
 import {
   NFadeInExpandTransition,
@@ -83,10 +82,6 @@ import {
   NBaseLoading,
   NBaseWave
 } from '../../_base'
-import {
-  createHoverColor,
-  createPressedColor
-} from '../../_utils/color/index.js'
 import { createKey } from '../../_utils'
 import { buttonLight } from '../styles'
 import style from './styles/button.cssr.js'
diff --git a/src/card/src/Card.vue b/src/card/src/Card.vue
index e4fcdd2db..4f7aa718c 100644
--- a/src/card/src/Card.vue
+++ b/src/card/src/Card.vue
@@ -26,15 +26,14 @@
       <div v-if="$slots['header-extra']" class="n-card-header__extra">
         <slot name="header-extra" />
       </div>
-      <n-icon
+      <n-base-icon
         v-if="closable"
-        class="n-card-header__close-mark"
+        class="n-card-header__close"
         size="16"
-        color-transition
         @click="handleCloseClick"
       >
         <close-icon />
-      </n-icon>
+      </n-base-icon>
     </div>
     <div class="n-card__content" :style="contentStyle">
       <slot />
@@ -50,10 +49,10 @@
 
 <script>
 import { defineComponent, computed } from 'vue'
+import { CloseIcon } from '../../_base/icons'
 import { useTheme } from '../../_mixins'
 import { createKey } from '../../_utils'
-import { NIcon } from '../../icon'
-import { CloseIcon } from '../../_base/icons'
+import { NBaseIcon } from '../../_base'
 import { cardLight } from '../styles'
 import style from './styles/index.cssr.js'
 
@@ -61,7 +60,7 @@ export default defineComponent({
   name: 'Card',
   components: {
     CloseIcon,
-    NIcon
+    NBaseIcon
   },
   props: {
     ...useTheme.props,
@@ -106,6 +105,7 @@ export default defineComponent({
     const themeRef = useTheme('Card', 'Card', style, cardLight, props)
     return {
       handleCloseClick,
+      theme: themeRef,
       cssVars: computed(() => {
         const { size } = props
         const {
diff --git a/src/card/src/styles/index.cssr.js b/src/card/src/styles/index.cssr.js
index 0b8519b59..4d70fc790 100644
--- a/src/card/src/styles/index.cssr.js
+++ b/src/card/src/styles/index.cssr.js
@@ -88,7 +88,8 @@ export default cB(
           transition: color .3s var(--bezier);
           color: var(--text-color);
         `),
-        cE('close-mark', `
+        cE('close', `
+          font-size: 16px;
           cursor: pointer;
           transition: color .3s var(--bezier);
           color: var(--close-color);
diff --git a/src/card/styles/dark.js b/src/card/styles/dark.js
index 2da531c91..7fc49f011 100644
--- a/src/card/styles/dark.js
+++ b/src/card/styles/dark.js
@@ -1,10 +1,9 @@
-import { iconDark } from '../../icon/styles'
-import commonVariables from './_common'
 import { commonDark } from '../../_styles/new-common'
+import commonVariables from './_common'
 
 export default {
+  name: 'Card',
   common: commonDark,
-  peers: [iconDark],
   self (vars) {
     const {
       borderRadius,
diff --git a/src/card/styles/light.js b/src/card/styles/light.js
index c97c433a0..63435b47e 100644
--- a/src/card/styles/light.js
+++ b/src/card/styles/light.js
@@ -1,10 +1,9 @@
-import { iconLight } from '../../icon/styles'
-import commonVariables from './_common'
 import { commonLight } from '../../_styles/new-common'
+import commonVariables from './_common'
 
 export default {
+  name: 'Card',
   common: commonLight,
-  peers: [iconLight],
   self (vars) {
     const {
       borderRadius,
diff --git a/src/cascader/src/Cascader.vue b/src/cascader/src/Cascader.vue
index 02e3cffc6..9cb93a1e7 100644
--- a/src/cascader/src/Cascader.vue
+++ b/src/cascader/src/Cascader.vue
@@ -6,7 +6,8 @@
           ref="triggerRef"
           :bordered="mergedBordered"
           :size="mergedSize"
-          :theme="'light'"
+          :unstable-theme="theme.peers.BaseSelection"
+          :unstable-theme-overrides="theme.overrides.BaseSelection"
           :active="mergedShow"
           :pattern="pattern"
           :placeholder="localizedPlaceholder"
@@ -50,7 +51,6 @@
           }"
           :value="mergedValue"
           :show="mergedShow && !showSelectMenu"
-          :theme="'light'"
           :size="mergedSize"
           :menu-model="menuModel"
           :style="cssVars"
@@ -72,7 +72,6 @@
           }"
           :value="mergedValue"
           :show="mergedShow && showSelectMenu"
-          :theme="'light'"
           :pattern="pattern"
           :size="mergedSize"
           :multiple="multiple"
@@ -85,9 +84,9 @@
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, provide, getCurrentInstance } from 'vue'
 import { VBinder, VTarget, VFollower } from 'vueuc'
-import { depx } from 'seemly'
+import { depx, changeColor } from 'seemly'
 import { NBaseSelection } from '../../_base'
 import { useLocale, useTheme, useConfig } from '../../_mixins'
 import { warn, call } from '../../_utils'
@@ -108,11 +107,6 @@ export default defineComponent({
     VTarget,
     VFollower
   },
-  provide () {
-    return {
-      NCascader: this
-    }
-  },
   props: {
     ...useTheme.props,
     bordered: {
@@ -220,6 +214,7 @@ export default defineComponent({
       cascaderLight,
       props
     )
+    provide('NCascader', getCurrentInstance().proxy)
     return Object.assign(
       useCascader(props),
       useConfig(props),
@@ -228,6 +223,7 @@ export default defineComponent({
         optionHeight: computed(() => {
           return themeRef.value.self.optionHeight
         }),
+        theme: themeRef,
         cssVars: computed(() => {
           const {
             self: {
@@ -260,7 +256,8 @@ export default defineComponent({
             '--option-text-color-active': optionTextColorActive,
             '--option-color-hover': optionColorHover,
             '--option-check-mark-color': optionCheckMarkColor,
-            '--option-arrow-color': optionArrowColor
+            '--option-arrow-color': optionArrowColor,
+            '--menu-mask-color': changeColor(menuColor, { alpha: 0.75 })
           }
         })
       }
diff --git a/src/cascader/src/CascaderMenu.vue b/src/cascader/src/CascaderMenu.vue
index 9b2e2c9b7..0a95a4e50 100644
--- a/src/cascader/src/CascaderMenu.vue
+++ b/src/cascader/src/CascaderMenu.vue
@@ -7,10 +7,6 @@
       v-if="show"
       v-clickoutside="handleClickOutside"
       class="n-cascader-menu"
-      :class="{
-        [`n-${theme}-theme`]: theme,
-        [`n-cascader-menu--${size}-size`]: size
-      }"
       @mousedown.capture="handleMenuMouseDown"
     >
       <!-- TODO: refactor ref -->
@@ -26,17 +22,17 @@
         :tm-nodes="submenuOptions"
         :depth="index + 1"
       />
-      <n-base-menu-mask ref="maskRef" :theme="theme" />
+      <n-base-menu-mask ref="maskRef" />
     </div>
   </transition>
 </template>
 <script>
-import { ref } from 'vue'
+import { ref, defineComponent } from 'vue'
 import { clickoutside } from 'vdirs'
 import { NBaseMenuMask } from '../../_base'
 import NCascaderSubmenu from './CascaderSubmenu.vue'
 
-export default {
+export default defineComponent({
   name: 'NCascaderMenu',
   components: {
     NCascaderSubmenu,
@@ -121,5 +117,5 @@ export default {
       this.NCascader.handleCascaderMenuClickOutside(e)
     }
   }
-}
+})
 </script>
diff --git a/src/cascader/src/CascaderOption.vue b/src/cascader/src/CascaderOption.vue
index 5229df17d..17e43e00d 100644
--- a/src/cascader/src/CascaderOption.vue
+++ b/src/cascader/src/CascaderOption.vue
@@ -15,6 +15,8 @@
         :disabled="disabled"
         :checked="checked"
         :indeterminate="indeterminate"
+        :unstable-theme="NCascader.theme.peers.Checkbox"
+        :unstable-theme-overrides="NCascader.theme.overrides.Checkbox"
         @click.stop="handleCheck"
       />
     </div>
@@ -27,7 +29,6 @@
           :stroke-width="20"
           :show="isLoading"
           class="n-cascader-option-icon"
-          :theme="NCascader.mergedTheme"
         >
           <n-icon
             key="arrow"
@@ -53,13 +54,13 @@
 </template>
 
 <script>
-import { computed, inject, toRef } from 'vue'
+import { computed, inject, toRef, defineComponent } from 'vue'
 import { NCheckbox } from '../../checkbox'
 import { NBaseLoading } from '../../_base'
 import { ChevronRightIcon, CheckmarkIcon } from '../../_base/icons'
 import { useMemo } from 'vooks'
 
-export default {
+export default defineComponent({
   name: 'NCascaderOption',
   components: {
     NCheckbox,
@@ -67,6 +68,7 @@ export default {
     ChevronRightIcon,
     CheckmarkIcon
   },
+  inject: ['NCascader'],
   props: {
     tmNode: {
       type: Object,
@@ -199,5 +201,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/cascader/src/CascaderSelectMenu.vue b/src/cascader/src/CascaderSelectMenu.vue
index 63fc14a50..cf4248928 100644
--- a/src/cascader/src/CascaderSelectMenu.vue
+++ b/src/cascader/src/CascaderSelectMenu.vue
@@ -9,7 +9,8 @@
       v-clickoutside="handleClickOutside"
       class="n-cascader-menu"
       auto-pending
-      :theme="theme"
+      :unstable-theme-overrides="NCascader.theme.peers.BaseSelectMenu"
+      :unstable-theme="NCascader.theme.overrides.BaseSelectMenu"
       :pattern="pattern"
       :tree-mate="selectTreeMate"
       :multiple="multiple"
@@ -21,13 +22,13 @@
 </template>
 
 <script>
-import { ref, inject, toRef } from 'vue'
+import { ref, inject, toRef, defineComponent } from 'vue'
 import { clickoutside } from 'vdirs'
 import { createTreeMate } from 'treemate'
 import { NBaseSelectMenu } from '../../_base'
 import { createSelectOptions } from './utils'
 
-export default {
+export default defineComponent({
   name: 'NCascaderSelectMenu',
   components: {
     NBaseSelectMenu
@@ -35,6 +36,7 @@ export default {
   directives: {
     clickoutside
   },
+  inject: ['NCascader'],
   props: {
     value: {
       type: [String, Number, Array],
@@ -164,5 +166,5 @@ export default {
       this.NCascader.handleSelectMenuClickOutside(e)
     }
   }
-}
+})
 </script>
diff --git a/src/cascader/src/CascaderSubmenu.vue b/src/cascader/src/CascaderSubmenu.vue
index 3853b234e..ba16f2924 100644
--- a/src/cascader/src/CascaderSubmenu.vue
+++ b/src/cascader/src/CascaderSubmenu.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="n-cascader-submenu">
-    <n-scrollbar ref="scrollbarRef">
+    <n-scrollbar
+      ref="scrollbarRef"
+      :unstable-theme="NCascader.theme.peers.Scrollbar"
+      :unstable-theme-overrides="NCascader.theme.overrides.Scrollbar"
+    >
       <n-cascader-option
         v-for="tmNode in tmNodes"
         ref="options"
@@ -12,11 +16,11 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, defineComponent } from 'vue'
 import NCascaderOption from './CascaderOption.vue'
 import { NScrollbar } from '../../scrollbar'
 
-export default {
+export default defineComponent({
   name: 'NCascaderSubmenu',
   components: {
     NCascaderOption,
@@ -38,5 +42,5 @@ export default {
       scrollbarRef: ref(null)
     }
   }
-}
+})
 </script>
diff --git a/src/cascader/src/styles/index.cssr.js b/src/cascader/src/styles/index.cssr.js
index f10705a2e..43b652794 100644
--- a/src/cascader/src/styles/index.cssr.js
+++ b/src/cascader/src/styles/index.cssr.js
@@ -15,127 +15,128 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
 // --option-color-hover
 // --option-check-mark-color
 // --option-arrow-color
+// --menu-mask-color
 export default c([
-  cB(
-    'cascader-menu', `
+  cB('cascader-menu', `
+    position: relative;
+    margin: 4px 0;
+    display: flex;
+    flex-wrap: nowrap;
+    border-radius: var(--menu-border-radius);
+    overflow: hidden;
+    box-shadow: var(--menu-box-shadow);
+    color: var(--option-text-color);
+  `, [
+    fadeInScaleUpTransition({ transformOrigin: 'inherit', duration: '0.2s' }),
+    cB('scrollbar', {
+      // if width not set, cascader select menu's inner scroll area's width is
+      // not correct, which won't change after select menu width is set
+      width: '100%'
+    }),
+    cB('base-menu-mask', {
+      backgroundColor: 'var(--menu-mask-color)'
+    }),
+    cB('cascader-submenu', `
+      height: var(--menu-height);
       position: relative;
-      margin: 4px 0;
-      display: flex;
-      flex-wrap: nowrap;
-      border-radius: var(--menu-border-radius);
       overflow: hidden;
-      box-shadow: var(--menu-box-shadow);
-    `,
-    [
-      fadeInScaleUpTransition({ transformOrigin: 'inherit', duration: '0.2s' }),
-      cB('scrollbar', {
-        // if width not set, cascader select menu's inner scroll area's width is
-        // not correct, which won't change after select menu width is set
-        width: '100%'
+      min-width: 182px;
+      background-color: var(--menu-color);
+    `, [
+      cB('scrollbar-content', {
+        position: 'relative'
       }),
-      cB('cascader-submenu', `
-        height: var(--menu-height);
-        position: relative;
-        overflow: hidden;
-        min-width: 182px;
-        background-color: var(--menu-color);
-      `, [
-        cB('scrollbar-content', {
-          position: 'relative'
-        }),
-        c('&:first-child', `
-          border-top-left-radius: var(--menu-border-radius);
-          border-bottom-left-radius: var(--menu-border-radius);
-        `),
-        c('&:last-child', `
-          border-top-right-radius: var(--menu-border-radius);
-          border-bottom-right-radius: var(--menu-border-radius);
-        `),
-        c('&:not(:first-child)', `
-          border-left: 1px solid var(--menu-divider-color);
-        `)
+      c('&:first-child', `
+        border-top-left-radius: var(--menu-border-radius);
+        border-bottom-left-radius: var(--menu-border-radius);
+      `),
+      c('&:last-child', `
+        border-top-right-radius: var(--menu-border-radius);
+        border-bottom-right-radius: var(--menu-border-radius);
+      `),
+      c('&:not(:first-child)', `
+        border-left: 1px solid var(--menu-divider-color);
+      `)
+    ]),
+    cB('cascader-option', `
+      height: var(--option-height);
+      line-height: var(--option-height);
+      font-size: var(--option-font-size);
+      padding: 0 0 0 18px;
+      box-sizing: border-box;
+      min-width: 182px;
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      position: relative;
+      cursor: pointer;
+      transition:
+        background-color .2s var(--bezier),
+        color 0.2s var(--bezier);
+    `, [
+      cM('show-prefix', {
+        paddingLeft: 0
+      }),
+      cE('label', {
+        flex: 1
+      }),
+      cE('prefix', {
+        width: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }),
+      cE('suffix', {
+        width: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }),
+      cB('cascader-option-icon-placeholder', {
+        lineHeight: 0,
+        position: 'relative',
+        width: '16px',
+        height: '16px',
+        fontSize: '16px'
+      }, [
+        cB('cascader-option-icon', [
+          cM('checkmark', {
+            color: 'var(--option-check-mark-color)'
+          }, [
+            fadeInScaleUpTransition()
+          ]),
+          cM('arrow', {
+            color: 'var(--option-arrow-color)'
+          })
+        ])
       ]),
-      cB('cascader-option', `
-        height: var(--option-height);
-        line-height: var(--option-height);
-        font-size: var(--option-font-size);
-        padding: 0 0 0 18px;
-        box-sizing: border-box;
-        min-width: 182px;
+      cM('selected', {
+        color: 'var(--option-text-color-active)'
+      }),
+      cM('active', {
+        color: 'var(--option-text-color-active)',
+        backgroundColor: 'var(--option-color-hover)'
+      }),
+      cM('pending', {
+        backgroundColor: 'var(--option-color-hover)'
+      }),
+      c('&:hover', {
+        backgroundColor: 'var(--option-color-hover)'
+      }),
+      cM('disabled', `
+        color: var(--option-text-color-disabled);
         background-color: transparent;
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-        position: relative;
-        cursor: pointer;
-        color: var(--option-text-color);
-        transition:
-          background-color .2s var(--bezier),
-          color 0.2s var(--bezier);
+        cursor: not-allowed;
       `, [
-        cM('show-prefix', {
-          paddingLeft: 0
-        }),
-        cE('label', {
-          flex: 1
-        }),
-        cE('prefix', {
-          width: '32px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }),
-        cE('suffix', {
-          width: '32px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }),
-        cB('cascader-option-icon-placeholder', {
-          lineHeight: 0,
-          position: 'relative',
-          width: '16px',
-          height: '16px',
-          fontSize: '16px'
-        }, [
-          cB('cascader-option-icon', [
-            cM('checkmark', {
-              color: 'var(--option-check-mark-color)'
-            }, [
-              fadeInScaleUpTransition()
-            ]),
-            cM('arrow', {
-              color: 'var(--option-arrow-color)'
-            })
-          ])
-        ]),
-        cM('selected', {
-          color: 'var(--option-text-color-active)'
-        }),
-        cM('active', {
-          color: 'var(--option-text-color-active)',
-          backgroundColor: 'var(--option-color-hover)'
-        }),
-        cM('pending', {
-          backgroundColor: 'var(--option-color-hover)'
-        }),
-        c('&:hover', {
-          backgroundColor: 'var(--option-color-hover)'
-        }),
-        cM('disabled', `
-          color: var(--option-text-color-disabled);
-          background-color: transparent;
-          cursor: not-allowed;
-        `, [
-          cB('cascader-option-icon', [
-            cM('arrow', {
-              color: 'var(--option-text-color-disabled)'
-            })
-          ])
+        cB('cascader-option-icon', [
+          cM('arrow', {
+            color: 'var(--option-text-color-disabled)'
+          })
         ])
       ])
-    ]
-  ),
+    ])
+  ]),
   cB('cascader', {
     zIndex: 'auto',
     width: '100%'
diff --git a/src/cascader/styles/dark.js b/src/cascader/styles/dark.js
index b239f97d0..151e0403f 100644
--- a/src/cascader/styles/dark.js
+++ b/src/cascader/styles/dark.js
@@ -1,4 +1,3 @@
-import { baseMenuMaskDark } from '../../_base/menu-mask/styles'
 import { baseSelectionDark } from '../../_base/selection/styles'
 import { baseSelectMenuDark } from '../../_base/select-menu/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
@@ -6,9 +5,9 @@ import { checkboxDark } from '../../checkbox/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'Cascader',
   common: commonDark,
   peers: {
-    BaseMenuMask: baseMenuMaskDark,
     BaseSelectMenu: baseSelectMenuDark,
     BaseSelection: baseSelectionDark,
     Scrollbar: scrollbarDark,
diff --git a/src/cascader/styles/light.js b/src/cascader/styles/light.js
index 9a1598e03..51176ef6f 100644
--- a/src/cascader/styles/light.js
+++ b/src/cascader/styles/light.js
@@ -1,4 +1,3 @@
-import { baseMenuMaskLight } from '../../_base/menu-mask/styles'
 import { baseSelectionLight } from '../../_base/selection/styles'
 import { baseSelectMenuLight } from '../../_base/select-menu/styles'
 import { scrollbarLight } from '../../scrollbar/styles'
@@ -6,9 +5,9 @@ import { checkboxLight } from '../../checkbox/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'Cascader',
   common: commonLight,
   peers: {
-    BaseMenuMask: baseMenuMaskLight,
     BaseSelectMenu: baseSelectMenuLight,
     BaseSelection: baseSelectionLight,
     Scrollbar: scrollbarLight,
diff --git a/src/checkbox/src/Checkbox.vue b/src/checkbox/src/Checkbox.vue
index b2022bffb..bdba47981 100644
--- a/src/checkbox/src/Checkbox.vue
+++ b/src/checkbox/src/Checkbox.vue
@@ -5,8 +5,7 @@
       'n-checkbox--checked': renderedChecked,
       'n-checkbox--disabled': mergedDisabled,
       'n-checkbox--indeterminate': indeterminate,
-      'n-checkbox--table-header': tableHeader,
-      [`n-checkbox--${mergedSize}-size`]: true
+      'n-checkbox--table-header': tableHeader
     }"
     :tabindex="mergedDisabled ? false : 0"
     :style="cssVars"
@@ -157,6 +156,7 @@ export default defineComponent({
       NCheckboxGroup,
       mergedDisabled: mergedDisabledRef,
       renderedChecked: renderedCheckedRef,
+      theme: themeRef,
       cssVars: computed(() => {
         const {
           mergedSize: { value: mergedSize }
diff --git a/src/checkbox/styles/dark.js b/src/checkbox/styles/dark.js
index 5797d944a..f69ad14c9 100644
--- a/src/checkbox/styles/dark.js
+++ b/src/checkbox/styles/dark.js
@@ -1,8 +1,9 @@
-import commonVariables from './_common'
 import { changeColor } from 'seemly'
 import { commonDark } from '../../_styles/new-common'
+import commonVariables from './_common'
 
 export default {
+  name: 'Checkbox',
   common: commonDark,
   self (vars) {
     const {
diff --git a/src/checkbox/styles/light.js b/src/checkbox/styles/light.js
index 39524f3a2..2e65f5c8a 100644
--- a/src/checkbox/styles/light.js
+++ b/src/checkbox/styles/light.js
@@ -1,8 +1,9 @@
-import commonVariables from './_common'
 import { changeColor } from 'seemly'
 import { commonLight } from '../../_styles/new-common'
+import commonVariables from './_common'
 
 export default {
+  name: 'Checkbox',
   common: commonLight,
   self (vars) {
     const {
diff --git a/src/code/src/styles/index.cssr.js b/src/code/src/styles/index.cssr.js
index c9fabddc6..a3f25b207 100644
--- a/src/code/src/styles/index.cssr.js
+++ b/src/code/src/styles/index.cssr.js
@@ -22,8 +22,7 @@ export default c([
     display: block;
     font-size: var(--font-size);
     font-family: var(--font-family);
-  `,
-  [
+  `, [
     c('pre', `
       margin: 0;
       font-family: inherit;
diff --git a/src/code/styles/dark.js b/src/code/styles/dark.js
index 92c3fb3ad..38f5e0838 100644
--- a/src/code/styles/dark.js
+++ b/src/code/styles/dark.js
@@ -1,6 +1,7 @@
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'Code',
   common: commonDark,
   self (vars) {
     const { textColor2, fontSize, fontWeightStrong } = vars
diff --git a/src/code/styles/light.js b/src/code/styles/light.js
index e1563cc63..4e7ea5d06 100644
--- a/src/code/styles/light.js
+++ b/src/code/styles/light.js
@@ -1,6 +1,7 @@
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'Code',
   common: commonLight,
   self (vars) {
     const { textColor2, fontSize, fontWeightStrong } = vars
diff --git a/src/collapse/src/Collapse.js b/src/collapse/src/Collapse.js
index 7a9a78396..a23c13f44 100644
--- a/src/collapse/src/Collapse.js
+++ b/src/collapse/src/Collapse.js
@@ -1,11 +1,11 @@
-import { computed, h, markRaw } from 'vue'
+import { computed, h, markRaw, defineComponent } from 'vue'
 import { intersection } from 'lodash-es'
 import { useTheme } from '../../_mixins'
 import { call, warn } from '../../_utils'
 import { collapseLight } from '../styles'
 import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Collapse',
   provide () {
     return {
@@ -38,6 +38,7 @@ export default {
       type: Function,
       default: undefined
     },
+    // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:expandedNames': {
       type: Function,
       default: undefined
@@ -66,6 +67,7 @@ export default {
     )
     return {
       collectedItemNames: markRaw([]),
+      theme: themeRef,
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut },
@@ -149,4 +151,4 @@ export default {
       this.$slots
     )
   }
-}
+})
diff --git a/src/collapse/src/CollapseItem.vue b/src/collapse/src/CollapseItem.vue
index c98d4ac67..14cf4d3cb 100644
--- a/src/collapse/src/CollapseItem.vue
+++ b/src/collapse/src/CollapseItem.vue
@@ -18,9 +18,9 @@
       </slot>
       <div class="n-collapse-item-arrow">
         <slot name="arrow" :collapsed="collapsed">
-          <n-icon color-transition>
+          <n-base-icon>
             <arrow-icon />
-          </n-icon>
+          </n-base-icon>
         </slot>
       </div>
       <slot v-if="arrowPlacement === 'left'" name="header">
@@ -37,16 +37,16 @@
 </template>
 
 <script>
-import { toRef } from 'vue'
-import { NIcon } from '../../icon'
+import { toRef, defineComponent } from 'vue'
 import { ChevronRightIcon as ArrowIcon } from '../../_base/icons'
-import NCollapseItemContent from './CollapseItemContent.js'
+import { NBaseIcon } from '../../_base'
 import { useInjectionCollection } from '../../_utils/composable'
+import NCollapseItemContent from './CollapseItemContent.js'
 
-export default {
+export default defineComponent({
   name: 'CollapseItem',
   components: {
-    NIcon,
+    NBaseIcon,
     NCollapseItemContent,
     ArrowIcon
   },
@@ -107,5 +107,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/collapse/src/CollapseItemContent.js b/src/collapse/src/CollapseItemContent.js
index 328475ab3..25bccfc37 100644
--- a/src/collapse/src/CollapseItemContent.js
+++ b/src/collapse/src/CollapseItemContent.js
@@ -1,7 +1,7 @@
-import { h, withDirectives, vShow } from 'vue'
+import { h, withDirectives, vShow, defineComponent } from 'vue'
 import { NFadeInExpandTransition } from '../../_base'
 
-export default {
+export default defineComponent({
   name: 'NCollapseItemContent',
   props: {
     displayDirective: {
@@ -49,4 +49,4 @@ export default {
           : null
     })
   }
-}
+})
diff --git a/src/collapse/src/styles/index.cssr.js b/src/collapse/src/styles/index.cssr.js
index fc1c6260c..3b069227b 100644
--- a/src/collapse/src/styles/index.cssr.js
+++ b/src/collapse/src/styles/index.cssr.js
@@ -10,87 +10,82 @@ import fadeInHeightExpandTransition from '../../../_styles/transitions/fade-in-h
 // --title-text-color
 // --title-font-weight
 // --arrow-color
-export default cB('collapse',
-  {
-    width: '100%'
-  },
-  [
-    cB('collapse-item', `
-      overflow: hidden;
-      font-size: var(--font-size);
-      transition: border-color .3s var(--bezier);
-      margin-top: 16px;
-    `,
-    [
-      c('&:first-child', {
-        marginTop: 0
-      }),
-      c('&:first-child >', [
-        cE('header', {
-          paddingTop: 0
-        })
-      ]),
-      cM('left-arrow-placement', [
-        cE('header', [
-          cB('collapse-item-arrow', {
-            marginRight: '4px'
-          })
-        ])
-      ]),
-      cM('right-arrow-placement', [
-        cE('header', [
-          cB('collapse-item-arrow', {
-            marginLeft: '4px'
-          })
-        ])
-      ]),
-      cB('collapse-item', {
-        marginLeft: '32px'
-      }),
-      cE('content-wrapper', {
-        overflow: 'hidden'
-      }, [
-        fadeInHeightExpandTransition({ duration: '0.15s' })
-      ]),
-      cM('active', [
-        cE('header', [
-          cM('active', [
-            cB('collapse-item-arrow', {
-              transform: 'rotate(90deg)'
-            })
-          ])
-        ])
-      ]),
-      c('&:not(:first-child)', {
-        borderTop: '1px solid var(--divider-color)'
-      }),
-      cE('header', `
-        font-size: var(--title-font-size);
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        font-weight: var(--title-font-weight);
-        transition: color .3s var(--bezier);
-        position: relative;
-        cursor: pointer;
-        padding: 16px 0 0 0;
-        color: var(--title-text-color);
-      `, [
+export default cB('collapse', {
+  width: '100%'
+}, [
+  cB('collapse-item', `
+    overflow: hidden;
+    font-size: var(--font-size);
+    transition: border-color .3s var(--bezier);
+    margin-top: 16px;
+  `, [
+    c('&:first-child', {
+      marginTop: 0
+    }),
+    c('&:first-child >', [
+      cE('header', {
+        paddingTop: 0
+      })
+    ]),
+    cM('left-arrow-placement', [
+      cE('header', [
         cB('collapse-item-arrow', {
-          display: 'flex',
-          transition: 'transform .15s var(--bezier)'
-        }, [
-          cB('icon', `
-            font-size: 18px;
-            color: var(--arrow-color);
-          `)
+          marginRight: '4px'
+        })
+      ])
+    ]),
+    cM('right-arrow-placement', [
+      cE('header', [
+        cB('collapse-item-arrow', {
+          marginLeft: '4px'
+        })
+      ])
+    ]),
+    cB('collapse-item', {
+      marginLeft: '32px'
+    }),
+    cE('content-wrapper', {
+      overflow: 'hidden'
+    }, [
+      fadeInHeightExpandTransition({ duration: '0.15s' })
+    ]),
+    cM('active', [
+      cE('header', [
+        cM('active', [
+          cB('collapse-item-arrow', {
+            transform: 'rotate(90deg)'
+          })
         ])
-      ]),
-      cE('content-inner', `
-        transition: color .3s var(--bezier);
-        padding-top: 16px;
-        color: var(--text-color);
+      ])
+    ]),
+    c('&:not(:first-child)', {
+      borderTop: '1px solid var(--divider-color)'
+    }),
+    cE('header', `
+      font-size: var(--title-font-size);
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      font-weight: var(--title-font-weight);
+      transition: color .3s var(--bezier);
+      position: relative;
+      cursor: pointer;
+      padding: 16px 0 0 0;
+      color: var(--title-text-color);
+    `, [
+      cB('collapse-item-arrow', `
+        display: flex;
+        transition:
+          transform .15s var(--bezier),
+          color .3s var(--bezier);
+        font-size: 18px;
+        color: var(--arrow-color);
       `)
-    ])
-  ]
-)
+    ]),
+    cE('content-inner', `
+      transition: color .3s var(--bezier);
+      padding-top: 16px;
+      color: var(--text-color);
+    `)
+  ])
+])
diff --git a/src/collapse/src/styles/index.js b/src/collapse/src/styles/index.js
deleted file mode 100644
index fd9338f5d..000000000
--- a/src/collapse/src/styles/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/collapse/styles/dark.js b/src/collapse/styles/dark.js
index 56e1bf5b5..48bfbabbf 100644
--- a/src/collapse/styles/dark.js
+++ b/src/collapse/styles/dark.js
@@ -1,11 +1,8 @@
-import { iconDark } from '../../icon/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'Collapse',
   common: commonDark,
-  peers: {
-    Icon: iconDark
-  },
   self (vars) {
     const {
       fontWeight,
diff --git a/src/collapse/styles/light.js b/src/collapse/styles/light.js
index a9c96fb6d..1eca0ced9 100644
--- a/src/collapse/styles/light.js
+++ b/src/collapse/styles/light.js
@@ -1,11 +1,8 @@
-import { iconLight } from '../../icon/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'Collapse',
   common: commonLight,
-  peers: {
-    Icon: iconLight
-  },
   self (vars) {
     const {
       fontWeight,
diff --git a/src/select/src/Select.vue b/src/select/src/Select.vue
index 6c6307441..aac3ed478 100644
--- a/src/select/src/Select.vue
+++ b/src/select/src/Select.vue
@@ -16,7 +16,8 @@
           :clearable="clearable"
           :disabled="disabled"
           :size="mergedSize"
-          :theme="'light'"
+          :unstable-theme="theme.peers.BaseSelection"
+          :unstable-theme-overrides="theme.overrides.BaseSelection"
           :loading="loading"
           :autofocus="autofocus"
           @click="handleTriggerClick"
@@ -55,7 +56,8 @@
             v-clickoutside="handleMenuClickOutside"
             class="n-select-menu"
             auto-pending
-            :theme="'light'"
+            :unstable-theme="theme.peers.BaseSelectMenu"
+            :unstable-theme-overrides="theme.overrides.BaseSelectMenu"
             :pattern="pattern"
             :tree-mate="treeMate"
             :multiple="multiple"
diff --git a/src/styles.js b/src/styles.js
index 9d9f37c98..f0f11565e 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -1,22 +1,22 @@
 // unified entry for styles
-export {
-  baseClearButtonDark,
-  baseClearButtonLight
-} from './_base/clear-button/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 { 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 { baseDark, baseLight } from './_styles/base'
 // export { affixDark, affixLight } from './affix/styles'
 // export { alertDark, alertLight } from './alert/styles'
 // export { anchorDark, anchorLight } from './anchor/styles'
diff --git a/src/styles.new.js b/src/styles.new.js
index 0f9f4caf6..3b800bc53 100644
--- a/src/styles.new.js
+++ b/src/styles.new.js
@@ -65,7 +65,6 @@ import { transferDark } from './transfer/styles'
 import { typographyDark } from './typography/styles'
 import { treeDark } from './tree/styles'
 import { uploadDark } from './upload/styles'
-import { baseSelectionDark } from './_base/selection/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -134,7 +133,5 @@ export const darkTheme = {
   Transfer: transferDark,
   Tree: treeDark,
   Typography: typographyDark,
-  Upload: uploadDark,
-  // danger zone
-  BaseSelection: baseSelectionDark
+  Upload: uploadDark
 }