refactor: affix -> collapse, theme peers & overrides

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
 >
 ```

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
 >
 ```

src/_base/README.md

@@ -3,3 +3,4 @@ Themeable components:
 - selection
 - select-menu
 - clear-button
+- close

src/_base/icon/index.js

@@ -0,0 +1 @@
+export { default } from './src/Icon.vue'

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>

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'
+  })
+])

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'

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>

src/_base/selection/src/Selection.vue

@@ -178,6 +178,7 @@ export default defineComponent({
     NTag
   },
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: undefined

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 {

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

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

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>

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'
+    })
+  ])
+])

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>

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'

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,

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,

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>

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: {

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]
+  }
 }

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,

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>

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
+  }
 }

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
+  }
 }

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>

src/avatar/styles/dark.js

@@ -1,6 +1,7 @@
 import { commonDark } from '../../_styles/new-common'
 
 export default {
+  name: 'Avatar',
   common: commonDark,
   self (vars) {
     const {

src/avatar/styles/light.js

@@ -1,6 +1,7 @@
 import { commonLight } from '../../_styles/new-common'
 
 export default {
+  name: 'Avatar',
   common: commonLight,
   self (vars) {
     const {

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>

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)'
     })
   ])

src/back-top/src/styles/index.js

@@ -1,9 +0,0 @@
-import themedBaseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: themedBaseStyle
-  }
-]

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,

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,

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"

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,

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 {

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>

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>

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 {

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 {

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'

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 {

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);

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,

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,

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 })
           }
         })
       }

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>

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>

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>

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>

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%'

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,

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,

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 }

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 {

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 {

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;

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

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

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
     )
   }
-}
+})

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>

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
     })
   }
-}
+})

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);
+    `)
+  ])
+])

src/collapse/src/styles/index.js

@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]

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,

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,

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"

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'

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
 }