refactor(alert, dropdown, menu, popover, tree, code, collapse): better theme typing

scripts/generate-version.js

@@ -1,6 +1,6 @@
 const version = require('../package.json').version
 
 require('fs').writeFileSync(
-  require('path').resolve(__dirname, '..', 'src', 'version.js'),
+  require('path').resolve(__dirname, '..', 'src', 'version.ts'),
   `export default '${version}'\n`
 )

src/_mixins/index.ts

@@ -1,5 +1,6 @@
 export { default as useFormItem } from './use-form-item'
 export { default as useTheme } from './use-theme'
+export type { ThemeProps, MergedTheme } from './use-theme'
 export { default as useConfig } from './use-config'
 export { default as useLocale } from './use-locale'
 export { default as useStyle } from './use-style'

src/_mixins/use-theme.ts

@@ -12,10 +12,10 @@ globalStyle.mount({
   id: 'naive-ui-global'
 })
 
-interface Theme<T> {
+export interface Theme<T, R = any> {
   name: string
-  common?: any
-  peers?: any
+  common?: ThemeCommonVars
+  peers?: R
   self(vars: ThemeCommonVars): T
 }
 
@@ -119,22 +119,20 @@ useTheme.props = {
     type: Object,
     default: undefined
   }
-}
+} as const
 
-useTheme.createProps = function <T> () {
-  return {
-    unstableTheme: {
-      type: Object as PropType<Theme<T>>,
-      default: undefined
-    },
-    unstableThemeOverrides: {
-      type: Object,
-      default: undefined
-    },
-    builtinThemeOverrides: {
-      type: Object,
-      default: undefined
-    }
+export type ThemeProps<T> = {
+  unstableTheme: {
+    type: PropType<T>
+    default: undefined
+  }
+  unstableThemeOverrides: {
+    type: ObjectConstructor
+    default: undefined
+  }
+  builtinThemeOverrides: {
+    type: ObjectConstructor
+    default: undefined
   }
 }
 

src/alert/src/Alert.vue

@@ -47,9 +47,10 @@ import {
 } from '../../_base/icons'
 import { NFadeInExpandTransition, NBaseClose, NBaseIcon } from '../../_base'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { warn, createKey } from '../../_utils'
-import { alertLight } from '../styles/index'
-import type { AlertThemeVars } from '../styles/index'
+import { alertLight } from '../styles'
+import type { AlertTheme } from '../styles'
 import style from './styles/index.cssr'
 
 export default defineComponent({
@@ -65,7 +66,7 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
-    ...useTheme.createProps<AlertThemeVars>(),
+    ...(useTheme.props as ThemeProps<AlertTheme>),
     title: {
       type: String,
       default: undefined

src/alert/styles/dark.ts

@@ -1,12 +1,11 @@
 import { changeColor } from 'seemly'
 import { commonDark } from '../../_styles/new-common'
-import type { ThemeCommonVars } from '../../_styles/new-common'
-import type { AlertThemeVars } from './light'
+import type { AlertTheme } from './light'
 
-export default {
+const alertDark: AlertTheme = {
   name: 'Alert',
   common: commonDark,
-  self (vars: ThemeCommonVars): AlertThemeVars {
+  self (vars) {
     const {
       lineHeight,
       borderRadius,
@@ -76,3 +75,5 @@ export default {
     }
   }
 }
+
+export default alertDark

src/alert/styles/index.ts

@@ -1,3 +1,3 @@
 export { default as alertDark } from './dark'
 export { default as alertLight } from './light'
-export type { AlertThemeVars } from './light'
+export type { AlertThemeVars, AlertTheme } from './light'

src/alert/styles/light.ts

@@ -1,98 +1,100 @@
 import { changeColor, composite } from 'seemly'
 import { commonLight } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
+import type { Theme } from '../../_mixins/use-theme'
 
-const alertLight = {
-  name: 'Alert',
-  common: commonLight,
-  self (vars: ThemeCommonVars) {
-    const {
-      lineHeight,
-      borderRadius,
-      fontWeightStrong,
+const self = (vars: ThemeCommonVars) => {
+  const {
+    lineHeight,
+    borderRadius,
+    fontWeightStrong,
+    baseColor,
+    dividerColorOverlay,
+    actionColor,
+    textColor1Overlay,
+    textColor2Overlay,
+    closeColor,
+    closeColorHover,
+    closeColorPressed,
+    infoColor,
+    successColor,
+    warningColor,
+    errorColor,
+    fontSize
+  } = vars
+  return {
+    fontSize,
+    lineHeight,
+    titleFontWeight: fontWeightStrong,
+    borderRadius,
+    border: `1px solid ${dividerColorOverlay}`,
+    color: actionColor,
+    titleTextColor: textColor1Overlay,
+    iconColor: textColor2Overlay,
+    contentTextColor: textColor2Overlay,
+    closeColor,
+    closeColorHover,
+    closeColorPressed,
+    borderInfo: `1px solid ${composite(
       baseColor,
-      dividerColorOverlay,
-      actionColor,
-      textColor1Overlay,
-      textColor2Overlay,
-      closeColor,
-      closeColorHover,
-      closeColorPressed,
-      infoColor,
-      successColor,
-      warningColor,
-      errorColor,
-      fontSize
-    } = vars
-    return {
-      fontSize,
-      lineHeight,
-      titleFontWeight: fontWeightStrong,
-      borderRadius,
-      border: `1px solid ${dividerColorOverlay}`,
-      color: actionColor,
-      titleTextColor: textColor1Overlay,
-      iconColor: textColor2Overlay,
-      contentTextColor: textColor2Overlay,
-      closeColor,
-      closeColorHover,
-      closeColorPressed,
-      borderInfo: `1px solid ${composite(
-        baseColor,
-        changeColor(infoColor, { alpha: 0.25 })
-      )}`,
-      colorInfo: composite(baseColor, changeColor(infoColor, { alpha: 0.08 })),
-      titleTextColorInfo: textColor1Overlay,
-      iconColorInfo: infoColor,
-      contentTextColorInfo: textColor2Overlay,
-      closeColorInfo: closeColor,
-      closeColorHoverInfo: closeColorHover,
-      closeColorPressedInfo: closeColorPressed,
-      borderSuccess: `1px solid ${composite(
-        baseColor,
-        changeColor(successColor, { alpha: 0.25 })
-      )}`,
-      colorSuccess: composite(
-        baseColor,
-        changeColor(successColor, { alpha: 0.08 })
-      ),
-      titleTextColorSuccess: textColor1Overlay,
-      iconColorSuccess: successColor,
-      contentTextColorSuccess: textColor2Overlay,
-      closeColorSuccess: closeColor,
-      closeColorHoverSuccess: closeColorHover,
-      closeColorPressedSuccess: closeColorPressed,
-      borderWarning: `1px solid ${composite(
-        baseColor,
-        changeColor(warningColor, { alpha: 0.33 })
-      )}`,
-      colorWarning: composite(
-        baseColor,
-        changeColor(warningColor, { alpha: 0.08 })
-      ),
-      titleTextColorWarning: textColor1Overlay,
-      iconColorWarning: warningColor,
-      contentTextColorWarning: textColor2Overlay,
-      closeColorWarning: closeColor,
-      closeColorHoverWarning: closeColorHover,
-      closeColorPressedWarning: closeColorPressed,
-      borderError: `1px solid ${composite(
-        baseColor,
-        changeColor(errorColor, { alpha: 0.25 })
-      )}`,
-      colorError: composite(
-        baseColor,
-        changeColor(errorColor, { alpha: 0.08 })
-      ),
-      titleTextColorError: textColor1Overlay,
-      iconColorError: errorColor,
-      contentTextColorError: textColor2Overlay,
-      closeColorError: closeColor,
-      closeColorHoverError: closeColorHover,
-      closeColorPressedError: closeColorPressed
-    }
+      changeColor(infoColor, { alpha: 0.25 })
+    )}`,
+    colorInfo: composite(baseColor, changeColor(infoColor, { alpha: 0.08 })),
+    titleTextColorInfo: textColor1Overlay,
+    iconColorInfo: infoColor,
+    contentTextColorInfo: textColor2Overlay,
+    closeColorInfo: closeColor,
+    closeColorHoverInfo: closeColorHover,
+    closeColorPressedInfo: closeColorPressed,
+    borderSuccess: `1px solid ${composite(
+      baseColor,
+      changeColor(successColor, { alpha: 0.25 })
+    )}`,
+    colorSuccess: composite(
+      baseColor,
+      changeColor(successColor, { alpha: 0.08 })
+    ),
+    titleTextColorSuccess: textColor1Overlay,
+    iconColorSuccess: successColor,
+    contentTextColorSuccess: textColor2Overlay,
+    closeColorSuccess: closeColor,
+    closeColorHoverSuccess: closeColorHover,
+    closeColorPressedSuccess: closeColorPressed,
+    borderWarning: `1px solid ${composite(
+      baseColor,
+      changeColor(warningColor, { alpha: 0.33 })
+    )}`,
+    colorWarning: composite(
+      baseColor,
+      changeColor(warningColor, { alpha: 0.08 })
+    ),
+    titleTextColorWarning: textColor1Overlay,
+    iconColorWarning: warningColor,
+    contentTextColorWarning: textColor2Overlay,
+    closeColorWarning: closeColor,
+    closeColorHoverWarning: closeColorHover,
+    closeColorPressedWarning: closeColorPressed,
+    borderError: `1px solid ${composite(
+      baseColor,
+      changeColor(errorColor, { alpha: 0.25 })
+    )}`,
+    colorError: composite(baseColor, changeColor(errorColor, { alpha: 0.08 })),
+    titleTextColorError: textColor1Overlay,
+    iconColorError: errorColor,
+    contentTextColorError: textColor2Overlay,
+    closeColorError: closeColor,
+    closeColorHoverError: closeColorHover,
+    closeColorPressedError: closeColorPressed
   }
 }
 
+export type AlertThemeVars = ReturnType<typeof self>
+
+const alertLight: Theme<AlertThemeVars> = {
+  name: 'Alert',
+  common: commonLight,
+  self
+}
+
 export default alertLight
-export type AlertThemeVars = ReturnType<typeof alertLight.self>
+export type AlertTheme = typeof alertLight

src/code/src/Code.ts

@@ -1,13 +1,14 @@
 import { defineComponent, h, toRef, watch, onMounted, ref, computed } from 'vue'
 import { useTheme, useHljs } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { codeLight } from '../styles'
-import type { CodeThemeVars } from '../styles'
+import type { CodeTheme } from '../styles'
 import style from './styles/index.cssr'
 
 export default defineComponent({
   name: 'Code',
   props: {
-    ...useTheme.createProps<CodeThemeVars>(),
+    ...(useTheme.props as ThemeProps<CodeTheme>),
     language: {
       type: String,
       default: undefined

src/code/styles/dark.ts

@@ -1,11 +1,11 @@
 import { commonDark } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
-import type { CodeThemeVars } from './light'
+import type { CodeTheme } from './light'
 
-export default {
+const codeDark: CodeTheme = {
   name: 'Code',
   common: commonDark,
-  self (vars: ThemeCommonVars): CodeThemeVars {
+  self (vars) {
     const { textColor2, fontSize, fontWeightStrong } = vars
     return {
       textColor: textColor2,
@@ -24,3 +24,5 @@ export default {
     }
   }
 }
+
+export default codeDark

src/code/styles/index.ts

@@ -1,3 +1,3 @@
 export { default as codeDark } from './dark'
 export { default as codeLight } from './light'
-export type { CodeThemeVars } from './light'
+export type { CodeThemeVars, CodeTheme } from './light'

src/code/styles/light.ts

@@ -1,28 +1,33 @@
 import { commonLight } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
+import { Theme } from '../../_mixins/use-theme'
 
-const codeLight = {
-  name: 'Code',
-  common: commonLight,
-  self (vars: ThemeCommonVars) {
-    const { textColor2, fontSize, fontWeightStrong } = vars
-    return {
-      textColor: textColor2,
-      fontSize,
-      fontWeightStrong,
-      // extracted from hljs atom-one-light.scss
-      'mono-3': '#a0a1a7',
-      'hue-1': '#0184bb',
-      'hue-2': '#4078f2',
-      'hue-3': '#a626a4',
-      'hue-4': '#50a14f',
-      'hue-5': '#e45649',
-      'hue-5-2': '#c91243',
-      'hue-6': '#986801',
-      'hue-6-2': '#c18401'
-    }
+const self = (vars: ThemeCommonVars) => {
+  const { textColor2, fontSize, fontWeightStrong } = vars
+  return {
+    textColor: textColor2,
+    fontSize,
+    fontWeightStrong,
+    // extracted from hljs atom-one-light.scss
+    'mono-3': '#a0a1a7',
+    'hue-1': '#0184bb',
+    'hue-2': '#4078f2',
+    'hue-3': '#a626a4',
+    'hue-4': '#50a14f',
+    'hue-5': '#e45649',
+    'hue-5-2': '#c91243',
+    'hue-6': '#986801',
+    'hue-6-2': '#c18401'
   }
 }
 
+export type CodeThemeVars = ReturnType<typeof self>
+
+const codeLight: Theme<CodeThemeVars> = {
+  name: 'Code',
+  common: commonLight,
+  self
+}
+
 export default codeLight
-export type CodeThemeVars = ReturnType<typeof codeLight.self>
+export type CodeTheme = typeof codeLight

src/collapse/src/Collapse.ts

@@ -9,8 +9,9 @@ import {
 } from 'vue'
 import { intersection } from 'lodash-es'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { call, warn } from '../../_utils'
-import { collapseLight } from '../styles'
+import { collapseLight, CollapseTheme } from '../styles'
 import type { CollapseThemeVars } from '../styles'
 import style from './styles/index.cssr'
 
@@ -25,7 +26,7 @@ export interface NCollapseInjection {
 export default defineComponent({
   name: 'Collapse',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<CollapseTheme>),
     expandedNames: {
       type: [Array, String] as PropType<string | string[]>,
       default: undefined

src/collapse/styles/dark.ts

@@ -1,11 +1,10 @@
 import { commonDark } from '../../_styles/new-common'
-import type { ThemeCommonVars } from '../../_styles/new-common'
-import type { CollapseThemeVars } from './light'
+import type { CollapseTheme } from './light'
 
-export default {
+const collapseDark: CollapseTheme = {
   name: 'Collapse',
   common: commonDark,
-  self (vars: ThemeCommonVars): CollapseThemeVars {
+  self (vars) {
     const {
       fontWeight,
       textColor1,
@@ -24,3 +23,5 @@ export default {
     }
   }
 }
+
+export default collapseDark

src/collapse/styles/index.ts

@@ -1,3 +1,3 @@
 export { default as collapseDark } from './dark'
 export { default as collapseLight } from './light'
-export type { CollapseThemeVars } from './light'
+export type { CollapseThemeVars, CollapseTheme } from './light'

src/collapse/styles/light.ts

@@ -1,28 +1,33 @@
 import { commonLight } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
+import { Theme } from '../../_mixins/use-theme'
 
-const collapseLight = {
-  name: 'Collapse',
-  common: commonLight,
-  self (vars: ThemeCommonVars) {
-    const {
-      fontWeight,
-      textColor1,
-      textColor2,
-      dividerColorOverlay,
-      fontSize
-    } = vars
-    return {
-      titleFontSize: fontSize,
-      titleFontWeight: fontWeight,
-      dividerColor: dividerColorOverlay,
-      titleTextColor: textColor1,
-      fontSize: fontSize,
-      textColor: textColor2,
-      arrowColor: textColor2
-    }
+const self = (vars: ThemeCommonVars) => {
+  const {
+    fontWeight,
+    textColor1,
+    textColor2,
+    dividerColorOverlay,
+    fontSize
+  } = vars
+  return {
+    titleFontSize: fontSize,
+    titleFontWeight: fontWeight,
+    dividerColor: dividerColorOverlay,
+    titleTextColor: textColor1,
+    fontSize: fontSize,
+    textColor: textColor2,
+    arrowColor: textColor2
   }
 }
 
+export type CollapseThemeVars = ReturnType<typeof self>
+
+const collapseLight: Theme<CollapseThemeVars> = {
+  name: 'Collapse',
+  common: commonLight,
+  self
+}
+
 export default collapseLight
-export type CollapseThemeVars = ReturnType<typeof collapseLight.self>
+export type CollapseTheme = typeof collapseLight

src/dropdown/src/Dropdown.ts

@@ -12,10 +12,11 @@ import {
 import { RawNode, TreeMate, Key } from 'treemate'
 import { useMergedState, useKeyboard, useMemo } from 'vooks'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { NPopover, popoverProps } from '../../popover'
 import { keep, call, createKey } from '../../_utils'
 import { dropdownLight } from '../styles'
-import type { DropdownThemeVars } from '../styles'
+import type { DropdownTheme } from '../styles'
 import NDropdownMenu from './DropdownMenu'
 import style from './styles/index.cssr'
 
@@ -92,7 +93,7 @@ export default defineComponent({
   props: {
     ...popoverProps,
     ...dropdownProps,
-    ...useTheme.createProps<DropdownThemeVars>()
+    ...(useTheme.props as ThemeProps<DropdownTheme>)
   },
   setup (props) {
     const uncontrolledShowRef = ref(false)

src/dropdown/styles/dark.ts

@@ -1,12 +1,15 @@
 import { commonDark } from '../../_styles/new-common'
-import type { ThemeCommonVars } from '../../_styles/new-common'
-import type { DropdownThemeVars } from './light'
+import { popoverDark } from '../../popover/styles'
+import type { DropdownTheme } from './light'
 import commonVariables from './_common'
 
-export default {
+const dropdownDark: DropdownTheme = {
   name: 'Dropdown',
   common: commonDark,
-  self (vars: ThemeCommonVars): DropdownThemeVars {
+  peers: {
+    NPopover: popoverDark
+  },
+  self (vars) {
     const {
       primaryColor,
       textColor2,
@@ -48,3 +51,5 @@ export default {
     }
   }
 }
+
+export default dropdownDark

src/dropdown/styles/index.ts

@@ -1,3 +1,3 @@
 export { default as dropdownDark } from './dark'
 export { default as dropdownLight } from './light'
-export type { DropdownThemeVars } from './light'
+export type { DropdownThemeVars, DropdownTheme } from './light'

src/dropdown/styles/light.ts

@@ -1,52 +1,67 @@
 import { commonLight } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
+import type { Theme } from '../../_mixins/use-theme'
 import commonVariables from './_common'
+import { popoverLight } from '../../popover/styles'
+import type { PopoverTheme } from '../../popover/styles'
 
-const dropdownLight = {
-  name: 'Dropdown',
-  common: commonLight,
-  self (vars: ThemeCommonVars) {
-    const {
-      primaryColor,
-      textColor2,
-      boxShadow2,
-      dividerColor,
-      hoverColorOverlay,
-      popoverColor,
-      borderRadius,
-      fontSizeSmall,
-      fontSizeMedium,
-      fontSizeLarge,
-      fontSizeHuge,
-      heightSmall,
-      heightMedium,
-      heightLarge,
-      heightHuge,
-      textColor3
-    } = vars
-    return {
-      ...commonVariables,
-      optionHeightSmall: heightSmall,
-      optionHeightMedium: heightMedium,
-      optionHeightLarge: heightLarge,
-      optionHeightHuge: heightHuge,
-      optionTextColor: textColor2,
-      optionTextColorActive: primaryColor,
-      color: popoverColor,
-      dividerColor,
-      borderRadius,
-      boxShadow: boxShadow2,
-      suffixColor: textColor2,
-      prefixColor: textColor2,
-      optionColorHover: hoverColorOverlay,
-      groupHeaderTextColor: textColor3,
-      fontSizeSmall,
-      fontSizeMedium,
-      fontSizeLarge,
-      fontSizeHuge
-    }
+const self = (vars: ThemeCommonVars) => {
+  const {
+    primaryColor,
+    textColor2,
+    boxShadow2,
+    dividerColor,
+    hoverColorOverlay,
+    popoverColor,
+    borderRadius,
+    fontSizeSmall,
+    fontSizeMedium,
+    fontSizeLarge,
+    fontSizeHuge,
+    heightSmall,
+    heightMedium,
+    heightLarge,
+    heightHuge,
+    textColor3
+  } = vars
+  return {
+    ...commonVariables,
+    optionHeightSmall: heightSmall,
+    optionHeightMedium: heightMedium,
+    optionHeightLarge: heightLarge,
+    optionHeightHuge: heightHuge,
+    optionTextColor: textColor2,
+    optionTextColorActive: primaryColor,
+    color: popoverColor,
+    dividerColor,
+    borderRadius,
+    boxShadow: boxShadow2,
+    suffixColor: textColor2,
+    prefixColor: textColor2,
+    optionColorHover: hoverColorOverlay,
+    groupHeaderTextColor: textColor3,
+    fontSizeSmall,
+    fontSizeMedium,
+    fontSizeLarge,
+    fontSizeHuge
   }
 }
 
+export type DropdownThemeVars = ReturnType<typeof self>
+
+const dropdownLight: Theme<
+  DropdownThemeVars,
+  {
+    NPopover: PopoverTheme
+  }
+> = {
+  name: 'Dropdown',
+  common: commonLight,
+  peers: {
+    NPopover: popoverLight
+  },
+  self
+}
+
+export type DropdownTheme = typeof dropdownLight
 export default dropdownLight
-export type DropdownThemeVars = ReturnType<typeof dropdownLight.self>

src/menu/src/Menu.ts

@@ -11,17 +11,18 @@ import {
 import { createTreeMate, Key, RawNode } from 'treemate'
 import { useCompitable, useMergedState } from 'vooks'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { call, warn } from '../../_utils'
 import { itemRenderer } from './utils'
 import { menuLight } from '../styles'
-import type { MenuThemeVars } from '../styles'
+import type { MenuTheme } from '../styles'
 import { MenuInjection } from './use-menu-child'
 import style from './styles/index.cssr'
 
 export default defineComponent({
   name: 'Menu',
   props: {
-    ...useTheme.createProps<MenuThemeVars>(),
+    ...(useTheme.props as ThemeProps<MenuTheme>),
     items: {
       type: Array as PropType<RawNode[]>,
       required: true

src/menu/styles/dark.ts

@@ -1,16 +1,15 @@
 import { changeColor } from 'seemly'
 import { tooltipDark } from '../../tooltip/styles'
 import { commonDark } from '../../_styles/new-common'
-import type { ThemeCommonVars } from '../../_styles/new-common'
-import type { MenuThemeVars } from './light'
+import type { MenuTheme } from './light'
 
-export default {
+const menuDark: MenuTheme = {
   name: 'Menu',
   common: commonDark,
   peers: {
     Tooltip: tooltipDark
   },
-  self (vars: ThemeCommonVars): MenuThemeVars {
+  self (vars) {
     const {
       borderRadius,
       textColor3Overlay,
@@ -39,3 +38,5 @@ export default {
     }
   }
 }
+
+export default menuDark

src/menu/styles/index.ts

@@ -1,3 +1,3 @@
 export { default as menuDark } from './dark'
 export { default as menuLight } from './light'
-export type { MenuThemeVars } from './light'
+export type { MenuThemeVars, MenuTheme } from './light'

src/menu/styles/light.ts

@@ -2,43 +2,47 @@ import { changeColor } from 'seemly'
 import { tooltipLight } from '../../tooltip/styles'
 import { commonLight } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
+import { Theme } from '../../_mixins/use-theme'
 
-const menuLight = {
+const self = (vars: ThemeCommonVars) => {
+  const {
+    borderRadius,
+    textColor3,
+    primaryColor,
+    textColor2,
+    primaryColorHover,
+    textColor1,
+    fontSize
+  } = vars
+  return {
+    borderRadius: borderRadius,
+    groupTextColor: textColor3,
+    itemColorActive: changeColor(primaryColor, { alpha: 0.1 }),
+    itemTextColor: textColor2,
+    itemTextColorHover: primaryColorHover,
+    itemTextColorChildActive: primaryColor,
+    itemTextColorActive: primaryColor,
+    itemIconColor: textColor1,
+    itemIconColorHover: primaryColorHover,
+    itemIconColorActive: primaryColor,
+    itemIconColorChildActive: primaryColor,
+    itemIconColorCollapsed: textColor1,
+    borderColorHorizontal: 'transparent',
+    arrowColor: primaryColor,
+    fontSize
+  }
+}
+
+export type MenuThemeVars = ReturnType<typeof self>
+
+const menuLight: Theme<MenuThemeVars> = {
   name: 'Menu',
   common: commonLight,
   peers: {
     Tooltip: tooltipLight
   },
-  self (vars: ThemeCommonVars) {
-    const {
-      borderRadius,
-      textColor3,
-      primaryColor,
-      textColor2,
-      primaryColorHover,
-      textColor1,
-      fontSize
-    } = vars
-    return {
-      borderRadius: borderRadius,
-      groupTextColor: textColor3,
-      itemColorActive: changeColor(primaryColor, { alpha: 0.1 }),
-      itemTextColor: textColor2,
-      itemTextColorHover: primaryColorHover,
-      itemTextColorChildActive: primaryColor,
-      itemTextColorActive: primaryColor,
-      itemIconColor: textColor1,
-      itemIconColorHover: primaryColorHover,
-      itemIconColorActive: primaryColor,
-      itemIconColorChildActive: primaryColor,
-      itemIconColorCollapsed: textColor1,
-      borderColorHorizontal: 'transparent',
-      arrowColor: primaryColor,
-      fontSize
-    }
-  }
+  self
 }
 
 export default menuLight
-
-export type MenuThemeVars = ReturnType<typeof menuLight.self>
+export type MenuTheme = typeof menuLight

src/popover/src/Popover.ts

@@ -14,8 +14,9 @@ import { VBinder, VTarget, FollowerPlacement } from 'vueuc'
 import { useMergedState, useCompitable, useIsMounted, useMemo } from 'vooks'
 import { call, keep, warn } from '../../_utils'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import NPopoverBody, { popoverBodyProps } from './PopoverBody'
-import type { PopoverThemeVars } from '../styles'
+import type { PopoverTheme } from '../styles'
 
 const bodyPropKeys = Object.keys(
   popoverBodyProps
@@ -74,7 +75,7 @@ export interface PopoverInjection {
 }
 
 export const popoverProps = {
-  ...useTheme.createProps<PopoverThemeVars>(),
+  ...(useTheme.props as ThemeProps<PopoverTheme>),
   show: {
     type: Boolean,
     default: undefined

src/popover/src/PopoverBody.ts

@@ -17,14 +17,15 @@ import {
 import { VFollower, FollowerPlacement, FollowerRef } from 'vueuc'
 import { clickoutside, mousemoveoutside } from 'vdirs'
 import { useTheme, useConfig } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { formatLength, useAdjustedTo, getSlot } from '../../_utils'
 import { popoverLight } from '../styles'
+import type { PopoverTheme } from '../styles'
 import style from './styles/index.cssr'
-import { PopoverThemeVars } from '../styles/light'
-import { PopoverInjection } from './Popover'
+import type { PopoverInjection } from './Popover'
 
 export const popoverBodyProps = {
-  ...useTheme.createProps<PopoverThemeVars>(),
+  ...(useTheme.props as ThemeProps<PopoverTheme>),
   show: {
     type: Boolean,
     default: undefined

src/popover/styles/dark.ts

@@ -1,12 +1,11 @@
 import { commonDark } from '../../_styles/new-common'
-import type { ThemeCommonVars } from '../../_styles/new-common'
 import commonVariables from './_common'
-import { PopoverThemeVars } from './light'
+import type { PopoverTheme } from './light'
 
-export default {
+const popoverDark: PopoverTheme = {
   name: 'Popover',
   common: commonDark,
-  self (vars: ThemeCommonVars): PopoverThemeVars {
+  self (vars) {
     const {
       popoverColor,
       textColor2Overlay,
@@ -24,3 +23,5 @@ export default {
     }
   }
 }
+
+export default popoverDark

src/popover/styles/index.ts

@@ -1,3 +1,3 @@
 export { default as popoverDark } from './dark'
 export { default as popoverLight } from './light'
-export type { PopoverThemeVars } from './light'
+export type { PopoverThemeVars, PopoverTheme } from './light'

src/popover/styles/light.ts

@@ -1,29 +1,27 @@
 import { commonLight } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
+import type { Theme } from '../../_mixins/use-theme'
 import commonVariables from './_common'
 
-const popoverLight = {
-  name: 'Popover',
-  common: commonLight,
-  self (vars: ThemeCommonVars) {
-    const {
-      boxShadow2,
-      popoverColor,
-      textColor2,
-      borderRadius,
-      fontSize
-    } = vars
-    return {
-      ...commonVariables,
-      fontSize,
-      borderRadius,
-      color: popoverColor,
-      textColor: textColor2,
-      boxShadow: boxShadow2
-    }
+const self = (vars: ThemeCommonVars) => {
+  const { boxShadow2, popoverColor, textColor2, borderRadius, fontSize } = vars
+  return {
+    ...commonVariables,
+    fontSize,
+    borderRadius,
+    color: popoverColor,
+    textColor: textColor2,
+    boxShadow: boxShadow2
   }
 }
 
-export default popoverLight
+export type PopoverThemeVars = ReturnType<typeof self>
 
-export type PopoverThemeVars = ReturnType<typeof popoverLight.self>
+const popoverLight: Theme<PopoverThemeVars> = {
+  name: 'Popover',
+  common: commonLight,
+  self
+}
+
+export type PopoverTheme = typeof popoverLight
+export default popoverLight

src/tree/src/Tree.ts

@@ -12,10 +12,10 @@ import {
 import { createTreeMate, Key, KeyedRawNode, TreeNode } from 'treemate'
 import { useMergedState } from 'vooks'
 import { useTheme } from '../../_mixins'
-import type { MergedTheme } from '../../_mixins/use-theme'
+import type { ThemeProps, MergedTheme } from '../../_mixins'
 import { call, warn } from '../../_utils'
 import { treeLight } from '../styles'
-import type { TreeThemeVars } from '../styles'
+import type { TreeThemeVars, TreeTheme } from '../styles'
 import NTreeNode from './TreeNode'
 import { keysWithFilter } from './utils'
 import style from './styles/index.cssr'
@@ -56,7 +56,7 @@ export interface TreeInjection {
 export default defineComponent({
   name: 'Tree',
   props: {
-    ...useTheme.createProps<TreeThemeVars>(),
+    ...(useTheme.props as ThemeProps<TreeTheme>),
     data: {
       type: Array as PropType<KeyedRawNode[]>,
       required: true

src/tree/styles/dark.ts

@@ -1,16 +1,15 @@
 import { changeColor } from 'seemly'
 import { checkboxDark } from '../../checkbox/styles'
 import { commonDark } from '../../_styles/new-common'
-import type { ThemeCommonVars } from '../../_styles/new-common'
-import type { TreeThemeVars } from './light'
+import type { TreeTheme } from './light'
 
-export default {
+const treeDark: TreeTheme = {
   name: 'Tree',
   common: commonDark,
   peers: {
     Checkbox: checkboxDark
   },
-  self (vars: ThemeCommonVars): TreeThemeVars {
+  self (vars) {
     const {
       borderRadiusSmall,
       hoverColorOverlay,
@@ -34,3 +33,5 @@ export default {
     }
   }
 }
+
+export default treeDark

src/tree/styles/index.ts

@@ -1,3 +1,3 @@
 export { default as treeDark } from './dark'
 export { default as treeLight } from './light'
-export type { TreeThemeVars } from './light'
+export type { TreeThemeVars, TreeTheme } from './light'

src/tree/styles/light.ts

@@ -2,37 +2,42 @@ import { changeColor } from 'seemly'
 import { checkboxLight } from '../../checkbox/styles'
 import { commonLight } from '../../_styles/new-common'
 import type { ThemeCommonVars } from '../../_styles/new-common'
+import { Theme } from '../../_mixins/use-theme'
 
-const treeLight = {
+const self = (vars: ThemeCommonVars) => {
+  const {
+    borderRadiusSmall,
+    hoverColorOverlay,
+    activeColorOverlay,
+    primaryColor,
+    textColor3,
+    textColor2,
+    textColorDisabled,
+    fontSize
+  } = vars
+  return {
+    fontSize,
+    nodeBorderRadius: borderRadiusSmall,
+    nodeColorHover: hoverColorOverlay,
+    nodeColorPressed: activeColorOverlay,
+    nodeColorActive: changeColor(primaryColor, { alpha: 0.1 }),
+    arrowColor: textColor3,
+    nodeTextColor: textColor2,
+    nodeTextColorDisabled: textColorDisabled,
+    loadingColor: primaryColor
+  }
+}
+
+export type TreeThemeVars = ReturnType<typeof self>
+
+const treeLight: Theme<TreeThemeVars> = {
   name: 'Tree',
   common: commonLight,
   peers: {
     Checkbox: checkboxLight
   },
-  self (vars: ThemeCommonVars) {
-    const {
-      borderRadiusSmall,
-      hoverColorOverlay,
-      activeColorOverlay,
-      primaryColor,
-      textColor3,
-      textColor2,
-      textColorDisabled,
-      fontSize
-    } = vars
-    return {
-      fontSize,
-      nodeBorderRadius: borderRadiusSmall,
-      nodeColorHover: hoverColorOverlay,
-      nodeColorPressed: activeColorOverlay,
-      nodeColorActive: changeColor(primaryColor, { alpha: 0.1 }),
-      arrowColor: textColor3,
-      nodeTextColor: textColor2,
-      nodeTextColorDisabled: textColorDisabled,
-      loadingColor: primaryColor
-    }
-  }
+  self
 }
 
 export default treeLight
-export type TreeThemeVars = ReturnType<typeof treeLight.self>
+export type TreeTheme = typeof treeLight

src/version.js

@@ -1 +0,0 @@
-export default '2.0.0-beta.1'