feat(create-theme): create global theme from component themes

build/terse-cssr.js

@@ -1,17 +1,10 @@
 const fs = require('fs').promises
 const path = require('path')
 const terseCssr = require('./utils/terse-cssr.js')
+const { walk } = require('../scripts/utils')
 
 const dirs = ['es', 'lib'].map((d) => path.resolve(__dirname, '..', d))
 
-async function * walk (dir) {
-  for await (const d of await fs.opendir(dir)) {
-    const entry = path.join(dir, d.name)
-    if (d.isDirectory()) yield * walk(entry)
-    else if (d.isFile()) yield entry
-  }
-}
-
 ;(async () => {
   for (const dir of dirs) {
     for await (const p of walk(dir)) {

package.json

@@ -22,7 +22,6 @@
     "format:md": "prettier --write --parser markdown --prose-wrap never \"demo/**/*.md\"",
     "release:package": "npm run build:package && npm publish",
     "test": "cross-env NODE_ENV=test jest",
-    "init-cssr": "node scripts/create-cssr-scaffold.js",
     "gen-version": "node scripts/generate-version",
     "tusimple:dev": "npm run generate && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.tusimple-dev.js",
     "tusimple:build:doc": "npm run generate && npm run build && rm -rf build-doc/dist && cross-env NODE_ENV=production webpack --config build/webpack.tusimple-doc.js",

scripts/create-cssr-scaffold.js

@@ -1,62 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-const componentName = process.argv[2]
-
-const componentPath = path.resolve(__dirname, '..', 'src', componentName)
-
-if (!fs.existsSync(componentPath)) {
-  console.log(componentPath + ' doesn\'t exists')
-  process.exit(1)
-}
-
-const themeStylesPath = path.resolve(componentPath, 'styles')
-if (!fs.existsSync(themeStylesPath)) {
-  fs.mkdirSync(themeStylesPath)
-}
-fs.writeFileSync(path.resolve(themeStylesPath, 'light.js'), `import create from '../../styles/_utils/create-component-base'
-
-export default create({
-  theme: 'light',
-  name: '',
-  getLocalVars (vars) {
-    return {}
-  }
-})
-`)
-fs.writeFileSync(path.resolve(themeStylesPath, 'dark.js'), `import create from '../../styles/_utils/create-component-base'
-
-export default create({
-  theme: 'dark',
-  name: '',
-  getLocalVars (vars) {
-    return {}
-  }
-})
-`)
-
-const cssrPath = path.resolve(componentPath, 'src', 'styles')
-if (!fs.existsSync(cssrPath)) {
-  fs.mkdirSync(cssrPath)
-}
-
-fs.writeFileSync(path.resolve(cssrPath, 'themed-base.cssr.js'), `import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-  }
-])
-`)
-
-fs.writeFileSync(path.resolve(cssrPath, 'index.js'), `import themedBaseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: [
-      'mergedTheme'
-    ],
-    CNode: themedBaseStyle
-  }
-]
-`)

scripts/generate-style-imports.js

@@ -1,25 +0,0 @@
-const fs = require('fs').promises
-const path = require('path')
-const { camelCase } = require('lodash')
-
-;(async () => {
-  const srcPath = path.resolve(__dirname, '..', 'src')
-  const files = await fs.opendir(
-    srcPath
-  )
-  const code = []
-  for await (const file of files) {
-    if (file.isDirectory() && !file.name.startsWith('_')) {
-      if (await fs.stat(path.resolve(srcPath, file.name, 'styles')).then(() => false).catch(() => {
-        return true
-      })) continue
-      code.push(`export {
-  ${camelCase(file.name)}Dark,
-  ${camelCase(file.name)}Light
-} from './${file.name}/styles'\n`)
-      // await fs.writeFile(path.resolve(srcPath, file.name, 'styles', 'index.js'), code)
-    }
-  }
-  code.sort()
-  console.log(code.join(''))
-})()

scripts/generate-style-index.js

@@ -1,23 +0,0 @@
-const fs = require('fs').promises
-const path = require('path')
-const { camelCase } = require('lodash')
-
-;(async () => {
-  const srcPath = path.resolve(__dirname, '..', 'src')
-  const files = await fs.opendir(
-    srcPath
-  )
-  for await (const file of files) {
-    if (file.isDirectory() && !file.name.startsWith('_')) {
-      console.log(file.name)
-      if (await fs.stat(path.resolve(srcPath, file.name, 'styles')).then(() => false).catch(() => {
-        return true
-      })) continue
-      const code =
-        `export { default as ${camelCase(file.name)}Dark } from './dark.js'\n` +
-        `export { default as ${camelCase(file.name)}Light } from './light.js'\n`
-      console.log(file.name)
-      await fs.writeFile(path.resolve(srcPath, file.name, 'styles', 'index.js'), code)
-    }
-  }
-})()

scripts/read-components.js

@@ -1,55 +0,0 @@
-const fs = require('fs').promises
-const path = require('path')
-const _ = require('lodash')
-
-;(async () => {
-  const files = await fs.readdir(
-    path.resolve(__dirname, '..', 'src')
-  )
-  for (const file of files) {
-    if ([
-      'locales'
-    ].includes(file)) continue
-    if (!file.startsWith('_') && !file.endsWith('.js')) {
-      console.log(`- [ ] ${file}`)
-      await generateImportOnDemandTest(file)
-    }
-  }
-})()
-
-async function generateImportOnDemandTest (name) {
-  const styleVarName = `${_.camelCase(name)}Light`
-  const testFileName = `${_.upperFirst(_.camelCase(name))}.spec.js`
-  const compVarName = `N${_.upperFirst(_.camelCase(name))}`
-  const script = `import { mount } from '@vue/test-utils'
-import create from '../../create'
-import { enUS } from '../../locales'
-import { ${styleVarName} } from '../styles'
-import { ${compVarName} } from '../index'
-
-describe('n-${name}', () => {
-  const naive = create({
-    locales: [
-      enUS
-    ],
-    styles: [
-      ${styleVarName}
-    ]
-  })
-  it('should work with import on demand', () => {
-    mount(${compVarName}, {
-      global: {
-        plugins: [naive]
-      }
-    })
-  })
-})
-`
-  if (
-    await fs.stat(path.resolve(__dirname, '../src/', name, 'tests')).then(() => true).catch(() => false)
-  ) {
-  } else {
-    await fs.mkdir(path.resolve(__dirname, '../src/', name, 'tests'))
-  }
-  await fs.writeFile(path.resolve(__dirname, '../src/', name, 'tests', testFileName), script)
-}

scripts/rename.js

@@ -1,26 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-async function * walk (dir) {
-  for await (const d of await fs.promises.opendir(dir)) {
-    const entry = path.join(dir, d.name)
-    if (d.isDirectory()) yield * walk(entry)
-    else if (d.isFile()) yield entry
-  }
-}
-
-// Then, use it with a simple async for loop
-async function main () {
-  for await (const p of walk('./demo/documentation')) {
-    // console.log(p)
-    // if (/index\.md$/.test(p)) {
-    //   // console.log(p.replace(/index\.md$/, 'index.demo-entry.md'))
-    //   fs.renameSync(p, p.replace(/index\.md$/, 'index.demo-entry.md'))
-    // }
-    if (/\.md$/.test(p) && !/demo-entry\.md$/.test(p)) {
-      fs.renameSync(p, p.replace(/\.md$/, '.demo.md'))
-    }
-  }
-}
-
-main()

scripts/utils.js

@@ -0,0 +1,10 @@
+const fs = require('fs')
+const path = require('path')
+
+exports.walk = async function * walk (dir) {
+  for await (const d of await fs.opendir(dir)) {
+    const entry = path.join(dir, d.name)
+    if (d.isDirectory()) yield * walk(entry)
+    else if (d.isFile()) yield entry
+  }
+}

src/_mixins/use-theme.ts

@@ -10,8 +10,8 @@ globalStyle.mount({
   id: 'naive-ui-global'
 })
 
-export interface Theme<T = {}, R = any> {
-  name: string
+export interface Theme<N, T = {}, R = any> {
+  name: N
   common?: ThemeCommonVars
   peers?: R
   self?: (vars: ThemeCommonVars) => T
@@ -29,13 +29,13 @@ export interface ThemePropsReactive<T> {
   builtinThemeOverrides?: ExtractThemeOverrides<T>
 }
 
-export type ExtractThemeVars<T> = T extends Theme<infer U, unknown>
+export type ExtractThemeVars<T> = T extends Theme<unknown, infer U, unknown>
   ? unknown extends U // self is undefined, ThemeVars is unknown
     ? {}
     : U
   : {}
 
-export type ExtractPeerOverrides<T> = T extends Theme<unknown, infer V>
+export type ExtractPeerOverrides<T> = T extends Theme<unknown, unknown, infer V>
   ? {
     peers?: {
       [k in keyof V]?: ExtractThemeOverrides<V[k]>
@@ -44,7 +44,11 @@ export type ExtractPeerOverrides<T> = T extends Theme<unknown, infer V>
   : T
 
 // V is peers theme
-export type ExtractMergedPeerOverrides<T> = T extends Theme<unknown, infer V>
+export type ExtractMergedPeerOverrides<T> = T extends Theme<
+unknown,
+unknown,
+infer V
+>
   ? {
     [k in keyof V]?: ExtractPeerOverrides<T>
   }
@@ -53,7 +57,9 @@ export type ExtractMergedPeerOverrides<T> = T extends Theme<unknown, infer V>
 export type ExtractThemeOverrides<T> = Partial<ExtractThemeVars<T>> &
 ExtractPeerOverrides<T> & { common?: ThemeCommonVars }
 
-export function createTheme<T, R> (theme: Theme<T, R>): Theme<T, R> {
+export function createTheme<N extends string, T, R> (
+  theme: Theme<N, T, R>
+): Theme<N, T, R> {
   return theme
 }
 
@@ -63,7 +69,7 @@ type UseThemeProps<T> = Readonly<{
   builtinThemeOverrides?: ExtractThemeOverrides<T>
 }>
 
-export type MergedTheme<T> = T extends Theme<infer V, infer W>
+export type MergedTheme<T> = T extends Theme<unknown, infer V, infer W>
   ? {
     common: ThemeCommonVars
     self: V
@@ -72,13 +78,13 @@ export type MergedTheme<T> = T extends Theme<infer V, infer W>
   }
   : T
 
-function useTheme<T, R> (
+function useTheme<N, T, R> (
   resolveId: Exclude<keyof GlobalTheme, 'common'>,
   mountId: string,
   style: CNode | undefined,
-  defaultTheme: Theme<T, R>,
-  props: UseThemeProps<Theme<T, R>>
-): ComputedRef<MergedTheme<Theme<T, R>>> {
+  defaultTheme: Theme<N, T, R>,
+  props: UseThemeProps<Theme<N, T, R>>
+): ComputedRef<MergedTheme<Theme<N, T, R>>> {
   if (style) {
     onBeforeMount(() => {
       style.mount({
@@ -94,9 +100,11 @@ function useTheme<T, R> (
     // keep props to make theme overrideable
     const {
       theme: { common: selfCommon, self, peers = {} } = {},
-      themeOverrides: selfOverrides = {} as ExtractThemeOverrides<Theme<T, R>>,
+      themeOverrides: selfOverrides = {} as ExtractThemeOverrides<
+      Theme<N, T, R>
+      >,
       builtinThemeOverrides: builtinOverrides = {} as ExtractThemeOverrides<
-      Theme<T, R>
+      Theme<N, T, R>
       >
     } = props
     const { common: selfCommonOverrides, peers: peersOverrides } = selfOverrides
@@ -126,15 +134,15 @@ function useTheme<T, R> (
       selfCommonOverrides
     )
     const mergedSelf = merge(
-      // executed every time, no need for empty obj
-      (self || globalSelf || defaultTheme.self)?.(mergedCommon) || {},
+      // {}, executed every time, no need for empty obj
+      (self || globalSelf || defaultTheme.self)?.(mergedCommon) as T,
       builtinOverrides,
       globalSelfOverrides,
       selfOverrides
     )
     return {
       common: mergedCommon,
-      self: mergedSelf as any,
+      self: mergedSelf,
       peers: merge({}, defaultTheme.peers, globalPeers, peers),
       peerOverrides: merge({}, globalPeersOverrides, peersOverrides)
     }

src/_styles/common/dark.ts

@@ -85,6 +85,8 @@ function neutral (alpha: number | string): string {
   )
 }
 const derived: ThemeCommonVars = {
+  name: 'common' as const,
+
   ...commonVariables,
 
   baseColor: base.neutralBase,

src/_styles/common/light.ts

@@ -86,6 +86,8 @@ function neutral (alpha: string | number) {
   )
 }
 const derived = {
+  name: 'common' as const,
+
   ...commonVariables,
 
   baseColor: base.neutralBase,

src/alert/styles/light.ts

@@ -90,7 +90,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type AlertThemeVars = ReturnType<typeof self>
 
-const alertLight: Theme<AlertThemeVars> = {
+const alertLight: Theme<'Alert', AlertThemeVars> = {
   name: 'Alert',
   common: commonLight,
   self

src/anchor/styles/light.ts

@@ -28,7 +28,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type AnchorThemeVars = ReturnType<typeof self>
 
-const anchorLight: Theme<AnchorThemeVars> = {
+const anchorLight: Theme<'Anchor', AnchorThemeVars> = {
   name: 'Anchor',
   common: commonLight,
   self

src/avatar/styles/light.ts

@@ -27,7 +27,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type AvatarThemeVars = ReturnType<typeof self>
 
-const avatarLight: Theme<AvatarThemeVars> = {
+const avatarLight: Theme<'Avatar', AvatarThemeVars> = {
   name: 'Avatar',
   common: commonLight,
   self

src/back-top/styles/light.ts

@@ -25,7 +25,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type BackTopThemeVars = ReturnType<typeof self>
 
-const backTopLight: Theme<BackTopThemeVars> = {
+const backTopLight: Theme<'BackTop', BackTopThemeVars> = {
   name: 'BackTop',
   common: commonLight,
   self

src/badge/styles/light.ts

@@ -15,7 +15,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type BadgeThemeVars = ReturnType<typeof self>
 
-const badgeLight: Theme<BadgeThemeVars> = {
+const badgeLight: Theme<'Badge', BadgeThemeVars> = {
   name: 'Badge',
   common: commonLight,
   self

src/breadcrumb/styles/light.ts

@@ -24,7 +24,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type BreadcrumbThemeVars = ReturnType<typeof self>
 
-const breadcrumbLight: Theme<BreadcrumbThemeVars> = {
+const breadcrumbLight: Theme<'Breadcrumb', BreadcrumbThemeVars> = {
   name: 'Breadcrumb',
   common: commonLight,
   self

src/button/styles/light.ts

@@ -216,7 +216,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type ButtonThemeVars = ReturnType<typeof self>
 
-const buttonLight: Theme<ButtonThemeVars> = {
+const buttonLight: Theme<'Button', ButtonThemeVars> = {
   name: 'Button',
   common: commonLight,
   self

src/card/styles/light.ts

@@ -40,7 +40,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type CardThemeVars = ReturnType<typeof self>
 
-const cardLight: Theme<CardThemeVars> = {
+const cardLight: Theme<'Card', CardThemeVars> = {
   name: 'Card',
   common: commonLight,
   self

src/checkbox/styles/light.ts

@@ -44,7 +44,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type CheckboxThemeVars = ReturnType<typeof self>
 
-const checkboxLight: Theme<CheckboxThemeVars> = {
+const checkboxLight: Theme<'Checkbox', CheckboxThemeVars> = {
   name: 'Checkbox',
   common: commonLight,
   self

src/code/styles/light.ts

@@ -23,7 +23,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type CodeThemeVars = ReturnType<typeof self>
 
-const codeLight: Theme<CodeThemeVars> = {
+const codeLight: Theme<'Code', CodeThemeVars> = {
   name: 'Code',
   common: commonLight,
   self

src/collapse/styles/light.ts

@@ -23,7 +23,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type CollapseThemeVars = ReturnType<typeof self>
 
-const collapseLight: Theme<CollapseThemeVars> = {
+const collapseLight: Theme<'Collapse', CollapseThemeVars> = {
   name: 'Collapse',
   common: commonLight,
   self

src/descriptions/styles/light.ts

@@ -37,7 +37,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type DescriptionsThemeVars = ReturnType<typeof self>
 
-const descriptionsLight: Theme<DescriptionsThemeVars> = {
+const descriptionsLight: Theme<'Descriptions', DescriptionsThemeVars> = {
   name: 'Descriptions',
   common: commonLight,
   self

src/divider/styles/light.ts

@@ -13,7 +13,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type DividerThemeVars = ReturnType<typeof self>
 
-const dividerLight: Theme<DividerThemeVars> = {
+const dividerLight: Theme<'Divider', DividerThemeVars> = {
   name: 'Divider',
   common: commonLight,
   self

src/element/styles/light.ts

@@ -1,7 +1,7 @@
 import { Theme } from '../../_mixins'
 import { commonLight } from '../../_styles/common'
 
-const elementLight: Theme = {
+const elementLight: Theme<'Element'> = {
   name: 'Element',
   common: commonLight
 }

src/empty/styles/light.ts

@@ -27,7 +27,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type EmptyThemeVars = ReturnType<typeof self>
 
-const emptyLight: Theme<EmptyThemeVars> = {
+const emptyLight: Theme<'Empty', EmptyThemeVars> = {
   name: 'Empty',
   common: commonLight,
   self

src/form/styles/light.ts

@@ -18,7 +18,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type FormThemeVars = ReturnType<typeof self>
 
-const formLight: Theme<FormThemeVars> = {
+const formLight: Theme<'Form', FormThemeVars> = {
   name: 'Form',
   common: commonLight,
   self

src/gradient-text/styles/light.ts

@@ -30,7 +30,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type GradientTextThemeVars = ReturnType<typeof self>
 
-const gradientTextLight: Theme<GradientTextThemeVars> = {
+const gradientTextLight: Theme<'GradientText', GradientTextThemeVars> = {
   name: 'GradientText',
   common: commonLight,
   self

src/icon/styles/light.ts

@@ -23,7 +23,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type IconThemeVars = ReturnType<typeof self>
 
-const iconLight: Theme<IconThemeVars> = {
+const iconLight: Theme<'Icon', IconThemeVars> = {
   name: 'Icon',
   common: commonLight,
   self

src/index.ts

@@ -6,6 +6,8 @@ export { default as create } from './create'
 
 export * from './locales'
 export * from './components'
-export * from './styles'
 
-export { darkTheme } from './themes'
+// component themes
+export * from './styles'
+// composed global theme, createTheme from component themes util
+export { darkTheme, createTheme } from './themes'

src/input/styles/light.ts

@@ -85,7 +85,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type InputThemeVars = ReturnType<typeof self>
 
-const inputLight: Theme<InputThemeVars> = {
+const inputLight: Theme<'Input', InputThemeVars> = {
   name: 'Input',
   common: commonLight,
   self

src/list/styles/light.ts

@@ -23,7 +23,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type ListThemeVars = ReturnType<typeof self>
 
-const listLight: Theme<ListThemeVars> = {
+const listLight: Theme<'List', ListThemeVars> = {
   name: 'List',
   common: commonLight,
   self

src/loading-bar/styles/light.ts

@@ -13,7 +13,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type LoadingBarThemeVars = ReturnType<typeof self>
 
-const loadingBarLight: Theme<LoadingBarThemeVars> = {
+const loadingBarLight: Theme<'LoadingBar', LoadingBarThemeVars> = {
   name: 'LoadingBar',
   common: commonLight,
   self

src/message/styles/light.ts

@@ -64,7 +64,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type MessageThemeVars = ReturnType<typeof self>
 
-const messageLight: Theme<MessageThemeVars> = {
+const messageLight: Theme<'Message', MessageThemeVars> = {
   name: 'Message',
   common: commonLight,
   self

src/popover/styles/light.ts

@@ -17,7 +17,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type PopoverThemeVars = ReturnType<typeof self>
 
-const popoverLight: Theme<PopoverThemeVars> = {
+const popoverLight: Theme<'Popover', PopoverThemeVars> = {
   name: 'Popover',
   common: commonLight,
   self

src/progress/styles/light.ts

@@ -39,7 +39,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type ProgressThemeVars = ReturnType<typeof self>
 
-const progressLight: Theme<ProgressThemeVars> = {
+const progressLight: Theme<'Progress', ProgressThemeVars> = {
   name: 'Progress',
   common: commonLight,
   self

src/radio/styles/light.ts

@@ -64,7 +64,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type RadioThemeVars = ReturnType<typeof self>
 
-const radioLight: Theme<RadioThemeVars> = {
+const radioLight: Theme<'Radio', RadioThemeVars> = {
   name: 'Radio',
   common: commonLight,
   self

src/rate/styles/light.ts

@@ -13,7 +13,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type RateThemeVars = ReturnType<typeof self>
 
-const themeLight: Theme<RateThemeVars> = {
+const themeLight: Theme<'Rate', RateThemeVars> = {
   name: 'Rate',
   common: commonLight,
   self

src/result/styles/light.ts

@@ -29,7 +29,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type ResultThemeVars = ReturnType<typeof self>
 
-const resultLight: Theme<ResultThemeVars> = {
+const resultLight: Theme<'Result', ResultThemeVars> = {
   name: 'Result',
   common: commonLight,
   self

src/scrollbar/styles/light.ts

@@ -12,7 +12,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type ScrollbarThemeVars = ReturnType<typeof self>
 
-const scrollbarLight: Theme<ScrollbarThemeVars> = {
+const scrollbarLight: Theme<'Scrollbar', ScrollbarThemeVars> = {
   name: 'Scrollbar',
   common: commonLight,
   self

src/slider/styles/light.ts

@@ -44,7 +44,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type SliderThemeVars = ReturnType<typeof self>
 
-const sliderLight: Theme<SliderThemeVars> = {
+const sliderLight: Theme<'Slider', SliderThemeVars> = {
   name: 'Slider',
   common: commonLight,
   self

src/space/styles/light.ts

@@ -7,7 +7,7 @@ const self = () => {
 
 export type SpaceThemeVars = ReturnType<typeof self>
 
-const spaceLight: Theme<SpaceThemeVars> = {
+const spaceLight: Theme<'Space', SpaceThemeVars> = {
   name: 'Space',
   self
 }

src/spin/styles/light.ts

@@ -25,7 +25,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type SpinThemeVars = ReturnType<typeof self>
 
-const spinLight: Theme<SpinThemeVars> = {
+const spinLight: Theme<'Spin', SpinThemeVars> = {
   name: 'Spin',
   common: commonLight,
   self

src/statistic/styles/light.ts

@@ -17,7 +17,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type StatisticThemeVars = ReturnType<typeof self>
 
-const statisticLight: Theme<StatisticThemeVars> = {
+const statisticLight: Theme<'Statistic', StatisticThemeVars> = {
   name: 'Statistic',
   common: commonLight,
   self

src/steps/styles/light.ts

@@ -45,7 +45,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type StepsThemeVars = ReturnType<typeof self>
 
-const stepsLight: Theme<StepsThemeVars> = {
+const stepsLight: Theme<'Steps', StepsThemeVars> = {
   name: 'Steps',
   common: commonLight,
   self

src/switch/styles/light.ts

@@ -25,7 +25,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type SwitchThemeVars = ReturnType<typeof self>
 
-const switchLight: Theme<SwitchThemeVars> = {
+const switchLight: Theme<'Switch', SwitchThemeVars> = {
   name: 'Switch',
   common: commonLight,
   self

src/table/styles/light.ts

@@ -37,7 +37,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type TableThemeVars = ReturnType<typeof self>
 
-const tableLight: Theme<TableThemeVars> = {
+const tableLight: Theme<'Table', TableThemeVars> = {
   name: 'Table',
   common: commonLight,
   self

src/tabs/styles/light.ts

@@ -43,7 +43,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type TabsThemeVars = ReturnType<typeof self>
 
-const tabsLight: Theme<TabsThemeVars> = {
+const tabsLight: Theme<'Tabs', TabsThemeVars> = {
   name: 'Tabs',
   common: commonLight,
   self

src/tag/styles/light.ts

@@ -92,7 +92,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type TagThemeVars = ReturnType<typeof self>
 
-const tagLight: Theme<TagThemeVars> = {
+const tagLight: Theme<'Tag', TagThemeVars> = {
   name: 'Tag',
   common: commonLight,
   self

src/themes/index.ts

@@ -1 +1,2 @@
 export { darkTheme } from './dark'
+export { createTheme } from './utils'

src/themes/utils.ts

@@ -0,0 +1,12 @@
+import { GlobalTheme } from '../config-provider'
+
+type ComponentKey = keyof GlobalTheme
+type ComponentThemes = Array<Exclude<GlobalTheme[ComponentKey], undefined>>
+
+export function createTheme (componentThemes: ComponentThemes): GlobalTheme {
+  const theme: GlobalTheme = {}
+  for (const cTheme of componentThemes) {
+    theme[cTheme.name] = cTheme as any
+  }
+  return theme
+}

src/thing/styles/light.ts

@@ -14,7 +14,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type ThingThemeVars = ReturnType<typeof self>
 
-const thingLight: Theme<ThingThemeVars> = {
+const thingLight: Theme<'Thing', ThingThemeVars> = {
   name: 'Thing',
   common: commonLight,
   self

src/timeline/styles/light.ts

@@ -34,7 +34,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type TimelineThemeVars = ReturnType<typeof self>
 
-const timelineLight: Theme<TimelineThemeVars> = {
+const timelineLight: Theme<'Timeline', TimelineThemeVars> = {
   name: 'Timeline',
   common: commonLight,
   self

src/tooltip/styles/light.ts

@@ -1,8 +1,8 @@
 import { commonLight } from '../../_styles/common'
 import type { ThemeCommonVars } from '../../_styles/common'
-import { popoverLight, PopoverTheme } from '../../popover/styles'
+import { popoverLight } from '../../popover/styles'
 import commonVars from './_common'
-import type { Theme } from '../../_mixins/use-theme'
+import { createTheme } from '../../_mixins/use-theme'
 
 const self = (vars: ThemeCommonVars) => {
   const { borderRadius, boxShadow2, baseColor } = vars
@@ -17,19 +17,14 @@ const self = (vars: ThemeCommonVars) => {
 
 export type TooltipThemeVars = ReturnType<typeof self>
 
-const tooltipLight: Theme<
-TooltipThemeVars,
-{
-  Popover?: PopoverTheme
-}
-> = {
+const tooltipLight = createTheme({
   name: 'Tooltip',
   common: commonLight,
   peers: {
     Popover: popoverLight
   },
   self
-}
+})
 
 export default tooltipLight
 export type TooltipTheme = typeof tooltipLight

src/typography/styles/light.ts

@@ -64,7 +64,7 @@ const self = (vars: ThemeCommonVars) => {
 
 export type TypographyThemeVars = ReturnType<typeof self>
 
-const typographyLight: Theme<TypographyThemeVars> = {
+const typographyLight: Theme<'Typography', TypographyThemeVars> = {
   name: 'Typography',
   common: commonLight,
   self

vue3.md

@@ -429,7 +429,7 @@
   - [x] fix table sorter
   - [x] tree 多选节点第二个 demo
   - [ ] table treemate!!!
-  - [ ] createTheme
+  - [x] createTheme
   - [ ] build site
 
 ## Build