fix: fix provide inject error

components/_util/wave/index.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue'
+
+const Wave = defineComponent({
+  name: 'Wave',
+  inheritAttrs: false,
+  setup() {
+    return () => {}
+  }
+})
+
+export default Wave

components/_util/wave/style.ts

@@ -0,0 +1,34 @@
+import { genComponentStyleHook } from '../../theme/internal'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+
+export interface ComponentToken {}
+
+export interface WaveToken extends FullToken<'Wave'> {}
+
+const genWaveStyle: GenerateStyle<WaveToken> = token => {
+  const { componentCls, colorPrimary } = token
+  return {
+    [componentCls]: {
+      position: 'absolute',
+      background: 'transparent',
+      pointerEvents: 'none',
+      boxSizing: 'border-box',
+      color: `var(--wave-color, ${colorPrimary})`,
+
+      boxShadow: `0 0 0 0 currentcolor`,
+      opacity: 0.2,
+
+      // =================== Motion ===================
+      '&.wave-motion-appear': {
+        transition: [`box-shadow 0.4s ${token.motionEaseOutCirc}`, `opacity 2s ${token.motionEaseOutCirc}`].join(','),
+
+        '&-active': {
+          boxShadow: `0 0 0 6px currentcolor`,
+          opacity: 0
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyleHook('Wave', token => [genWaveStyle(token)])

components/_util/wave/util.ts

@@ -0,0 +1,35 @@
+export function isNotGrey(color: string) {
+  // eslint-disable-next-line no-useless-escape
+  const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/)
+  if (match && match[1] && match[2] && match[3]) {
+    return !(match[1] === match[2] && match[2] === match[3])
+  }
+  return true
+}
+
+export function isValidWaveColor(color: string) {
+  return (
+    color &&
+    color !== '#fff' &&
+    color !== '#ffffff' &&
+    color !== 'rgb(255, 255, 255)' &&
+    color !== 'rgba(255, 255, 255, 1)' &&
+    isNotGrey(color) &&
+    !/rgba\((?:\d*, ){3}0\)/.test(color) && // any transparent rgba color
+    color !== 'transparent'
+  )
+}
+
+export function getTargetWaveColor(node: HTMLElement) {
+  const { borderTopColor, borderColor, backgroundColor } = getComputedStyle(node)
+  if (isValidWaveColor(borderTopColor)) {
+    return borderTopColor
+  }
+  if (isValidWaveColor(borderColor)) {
+    return borderColor
+  }
+  if (isValidWaveColor(backgroundColor)) {
+    return backgroundColor
+  }
+  return null
+}

components/button/button.tsx

@@ -1,9 +1,31 @@
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
-export default defineComponent({
+import { useProviderConfigState } from '../config-provider/context'
+import useStyle from './style'
+const Button = defineComponent({
   name: 'AButton',
-  setup(props, { slots }) {
+  inheritAttrs: false,
+  props: {
+    prefixCls: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default'
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const { getPrefixCls } = useProviderConfigState()
+    const prefixCls = computed(() => getPrefixCls('btn', props.prefixCls))
+    const [wrapSSR, hashId] = useStyle(prefixCls)
     return () => {
-      return <button>{slots.default?.()}</button>
+      const cls = {
+        [prefixCls.value]: true,
+        [`${prefixCls.value}-${props.type}`]: !!props.type,
+        [hashId.value]: true
+      }
+      return wrapSSR(<button class={[cls, attrs.class]}>{slots.default?.()}</button>)
     }
   }
 })
+
+export default Button

components/button/style/group.ts

@@ -0,0 +1,80 @@
+import type { GenerateStyle } from '../../theme/internal'
+import type { ButtonToken } from '.'
+
+const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
+  // Border
+  [`> span, > ${buttonTypeCls}`]: {
+    '&:not(:last-child)': {
+      [`&, & > ${buttonTypeCls}`]: {
+        '&:not(:disabled)': {
+          borderInlineEndColor: borderColor
+        }
+      }
+    },
+
+    '&:not(:first-child)': {
+      [`&, & > ${buttonTypeCls}`]: {
+        '&:not(:disabled)': {
+          borderInlineStartColor: borderColor
+        }
+      }
+    }
+  }
+})
+
+const genGroupStyle: GenerateStyle<ButtonToken> = token => {
+  const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token
+
+  return {
+    [`${componentCls}-group`]: [
+      {
+        position: 'relative',
+        display: 'inline-flex',
+
+        // Border
+        [`> span, > ${componentCls}`]: {
+          '&:not(:last-child)': {
+            [`&, & > ${componentCls}`]: {
+              borderStartEndRadius: 0,
+              borderEndEndRadius: 0
+            }
+          },
+
+          '&:not(:first-child)': {
+            marginInlineStart: -lineWidth,
+
+            [`&, & > ${componentCls}`]: {
+              borderStartStartRadius: 0,
+              borderEndStartRadius: 0
+            }
+          }
+        },
+
+        [componentCls]: {
+          position: 'relative',
+          zIndex: 1,
+
+          [`&:hover,
+          &:focus,
+          &:active`]: {
+            zIndex: 2
+          },
+
+          '&[disabled]': {
+            zIndex: 0
+          }
+        },
+
+        [`${componentCls}-icon-only`]: {
+          fontSize
+        }
+      },
+
+      // Border Color
+      genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover),
+      genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover)
+    ]
+  }
+}
+
+export default genGroupStyle

components/button/style/index.ts

@@ -0,0 +1,503 @@
+import type { CSSInterpolation, CSSObject } from '@antd-tiny-vue/cssinjs'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+import { genFocusStyle } from '../../style'
+import { genCompactItemStyle } from '../../style/compact-item'
+import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'
+import genGroupStyle from './group'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {}
+
+export interface ButtonToken extends FullToken<'Button'> {
+  // FIXME: should be removed
+  colorOutlineDefault: string
+  buttonPaddingHorizontal: number
+}
+
+// ============================== Shared ==============================
+const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
+  const { componentCls, iconCls } = token
+
+  return {
+    [componentCls]: {
+      outline: 'none',
+      position: 'relative',
+      display: 'inline-block',
+      fontWeight: 400,
+      whiteSpace: 'nowrap',
+      textAlign: 'center',
+      backgroundImage: 'none',
+      backgroundColor: 'transparent',
+      border: `${token.lineWidth}px ${token.lineType} transparent`,
+      cursor: 'pointer',
+      transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
+      userSelect: 'none',
+      touchAction: 'manipulation',
+      lineHeight: token.lineHeight,
+      color: token.colorText,
+
+      '> span': {
+        display: 'inline-block'
+      },
+
+      // Leave a space between icon and text.
+      [`> ${iconCls} + span, > span + ${iconCls}`]: {
+        marginInlineStart: token.marginXS
+      },
+
+      '> a': {
+        color: 'currentColor'
+      },
+
+      '&:not(:disabled)': {
+        ...genFocusStyle(token)
+      },
+
+      // make `btn-icon-only` not too narrow
+      [`&-icon-only${componentCls}-compact-item`]: {
+        flex: 'none'
+      },
+      // Special styles for Primary Button
+      [`&-compact-item${componentCls}-primary`]: {
+        [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]: {
+          position: 'relative',
+
+          '&:before': {
+            position: 'absolute',
+            top: -token.lineWidth,
+            insetInlineStart: -token.lineWidth,
+            display: 'inline-block',
+            width: token.lineWidth,
+            height: `calc(100% + ${token.lineWidth * 2}px)`,
+            backgroundColor: token.colorPrimaryHover,
+            content: '""'
+          }
+        }
+      },
+      // Special styles for Primary Button
+      '&-compact-vertical-item': {
+        [`&${componentCls}-primary`]: {
+          [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]: {
+            position: 'relative',
+
+            '&:before': {
+              position: 'absolute',
+              top: -token.lineWidth,
+              insetInlineStart: -token.lineWidth,
+              display: 'inline-block',
+              width: `calc(100% + ${token.lineWidth * 2}px)`,
+              height: token.lineWidth,
+              backgroundColor: token.colorPrimaryHover,
+              content: '""'
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
+  '&:not(:disabled)': {
+    '&:hover': hoverStyle,
+    '&:active': activeStyle
+  }
+})
+
+// ============================== Shape ===============================
+const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  minWidth: token.controlHeight,
+  paddingInlineStart: 0,
+  paddingInlineEnd: 0,
+  borderRadius: '50%'
+})
+
+const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  borderRadius: token.controlHeight,
+  paddingInlineStart: token.controlHeight / 2,
+  paddingInlineEnd: token.controlHeight / 2
+})
+
+// =============================== Type ===============================
+const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  cursor: 'not-allowed',
+  borderColor: token.colorBorder,
+  color: token.colorTextDisabled,
+  backgroundColor: token.colorBgContainerDisabled,
+  boxShadow: 'none'
+})
+
+const genGhostButtonStyle = (
+  btnCls: string,
+  textColor: string | false,
+  borderColor: string | false,
+  textColorDisabled: string | false,
+  borderColorDisabled: string | false,
+  hoverStyle?: CSSObject,
+  activeStyle?: CSSObject
+): CSSObject => ({
+  [`&${btnCls}-background-ghost`]: {
+    color: textColor || undefined,
+    backgroundColor: 'transparent',
+    borderColor: borderColor || undefined,
+    boxShadow: 'none',
+
+    ...genHoverActiveButtonStyle(
+      {
+        backgroundColor: 'transparent',
+        ...hoverStyle
+      },
+      {
+        backgroundColor: 'transparent',
+        ...activeStyle
+      }
+    ),
+
+    '&:disabled': {
+      cursor: 'not-allowed',
+      color: textColorDisabled || undefined,
+      borderColor: borderColorDisabled || undefined
+    }
+  }
+})
+
+const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  '&:disabled': {
+    ...genDisabledStyle(token)
+  }
+})
+
+const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genSolidDisabledButtonStyle(token)
+})
+
+const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  '&:disabled': {
+    cursor: 'not-allowed',
+    color: token.colorTextDisabled
+  }
+})
+
+// Type: Default
+const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genSolidButtonStyle(token),
+
+  backgroundColor: token.colorBgContainer,
+  borderColor: token.colorBorder,
+
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorPrimaryHover,
+      borderColor: token.colorPrimaryHover
+    },
+    {
+      color: token.colorPrimaryActive,
+      borderColor: token.colorPrimaryActive
+    }
+  ),
+
+  ...genGhostButtonStyle(token.componentCls, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, token.colorBorder),
+
+  [`&${token.componentCls}-dangerous`]: {
+    color: token.colorError,
+    borderColor: token.colorError,
+
+    ...genHoverActiveButtonStyle(
+      {
+        color: token.colorErrorHover,
+        borderColor: token.colorErrorBorderHover
+      },
+      {
+        color: token.colorErrorActive,
+        borderColor: token.colorErrorActive
+      }
+    ),
+
+    ...genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder),
+    ...genSolidDisabledButtonStyle(token)
+  }
+})
+
+// Type: Primary
+const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genSolidButtonStyle(token),
+
+  color: token.colorTextLightSolid,
+  backgroundColor: token.colorPrimary,
+
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorTextLightSolid,
+      backgroundColor: token.colorPrimaryHover
+    },
+    {
+      color: token.colorTextLightSolid,
+      backgroundColor: token.colorPrimaryActive
+    }
+  ),
+
+  ...genGhostButtonStyle(
+    token.componentCls,
+    token.colorPrimary,
+    token.colorPrimary,
+    token.colorTextDisabled,
+    token.colorBorder,
+    {
+      color: token.colorPrimaryHover,
+      borderColor: token.colorPrimaryHover
+    },
+    {
+      color: token.colorPrimaryActive,
+      borderColor: token.colorPrimaryActive
+    }
+  ),
+
+  [`&${token.componentCls}-dangerous`]: {
+    backgroundColor: token.colorError,
+    boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+
+    ...genHoverActiveButtonStyle(
+      {
+        backgroundColor: token.colorErrorHover
+      },
+      {
+        backgroundColor: token.colorErrorActive
+      }
+    ),
+
+    ...genGhostButtonStyle(
+      token.componentCls,
+      token.colorError,
+      token.colorError,
+      token.colorTextDisabled,
+      token.colorBorder,
+      {
+        color: token.colorErrorHover,
+        borderColor: token.colorErrorHover
+      },
+      {
+        color: token.colorErrorActive,
+        borderColor: token.colorErrorActive
+      }
+    ),
+    ...genSolidDisabledButtonStyle(token)
+  }
+})
+
+// Type: Dashed
+const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genDefaultButtonStyle(token),
+  borderStyle: 'dashed'
+})
+
+// Type: Link
+const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  color: token.colorLink,
+
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorLinkHover
+    },
+    {
+      color: token.colorLinkActive
+    }
+  ),
+
+  ...genPureDisabledButtonStyle(token),
+
+  [`&${token.componentCls}-dangerous`]: {
+    color: token.colorError,
+
+    ...genHoverActiveButtonStyle(
+      {
+        color: token.colorErrorHover
+      },
+      {
+        color: token.colorErrorActive
+      }
+    ),
+
+    ...genPureDisabledButtonStyle(token)
+  }
+})
+
+// Type: Text
+const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorText,
+      backgroundColor: token.colorBgTextHover
+    },
+    {
+      color: token.colorText,
+      backgroundColor: token.colorBgTextActive
+    }
+  ),
+
+  ...genPureDisabledButtonStyle(token),
+
+  [`&${token.componentCls}-dangerous`]: {
+    color: token.colorError,
+
+    ...genPureDisabledButtonStyle(token),
+    ...genHoverActiveButtonStyle(
+      {
+        color: token.colorErrorHover,
+        backgroundColor: token.colorErrorBg
+      },
+      {
+        color: token.colorErrorHover,
+        backgroundColor: token.colorErrorBg
+      }
+    )
+  }
+})
+
+// Href and Disabled
+const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genDisabledStyle(token),
+  [`&${token.componentCls}:hover`]: {
+    ...genDisabledStyle(token)
+  }
+})
+
+const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const { componentCls } = token
+
+  return {
+    [`${componentCls}-default`]: genDefaultButtonStyle(token),
+    [`${componentCls}-primary`]: genPrimaryButtonStyle(token),
+    [`${componentCls}-dashed`]: genDashedButtonStyle(token),
+    [`${componentCls}-link`]: genLinkButtonStyle(token),
+    [`${componentCls}-text`]: genTextButtonStyle(token),
+    [`${componentCls}-disabled`]: genDisabledButtonStyle(token)
+  }
+}
+
+// =============================== Size ===============================
+const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpolation => {
+  const { componentCls, iconCls, controlHeight, fontSize, lineHeight, lineWidth, borderRadius, buttonPaddingHorizontal } = token
+
+  const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth)
+  const paddingHorizontal = buttonPaddingHorizontal - lineWidth
+
+  const iconOnlyCls = `${componentCls}-icon-only`
+
+  return [
+    // Size
+    {
+      [`${componentCls}${sizePrefixCls}`]: {
+        fontSize,
+        height: controlHeight,
+        padding: `${paddingVertical}px ${paddingHorizontal}px`,
+        borderRadius,
+
+        [`&${iconOnlyCls}`]: {
+          width: controlHeight,
+          paddingInlineStart: 0,
+          paddingInlineEnd: 0,
+          [`&${componentCls}-round`]: {
+            width: 'auto'
+          },
+          '> span': {
+            transform: 'scale(1.143)' // 14px -> 16px
+          }
+        },
+
+        // Loading
+        [`&${componentCls}-loading`]: {
+          opacity: token.opacityLoading,
+          cursor: 'default'
+        },
+
+        [`${componentCls}-loading-icon`]: {
+          transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`
+        },
+
+        [`&:not(${iconOnlyCls}) ${componentCls}-loading-icon > ${iconCls}`]: {
+          marginInlineEnd: token.marginXS
+        }
+      }
+    },
+
+    // Shape - patch prefixCls again to override solid border radius style
+    {
+      [`${componentCls}${componentCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token)
+    },
+    {
+      [`${componentCls}${componentCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token)
+    }
+  ]
+}
+
+const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token)
+
+const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const smallToken = mergeToken<ButtonToken>(token, {
+    controlHeight: token.controlHeightSM,
+    padding: token.paddingXS,
+    buttonPaddingHorizontal: 8, // Fixed padding
+    borderRadius: token.borderRadiusSM
+  })
+
+  return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`)
+}
+
+const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const largeToken = mergeToken<ButtonToken>(token, {
+    controlHeight: token.controlHeightLG,
+    fontSize: token.fontSizeLG,
+    borderRadius: token.borderRadiusLG
+  })
+
+  return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`)
+}
+
+const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const { componentCls } = token
+  return {
+    [componentCls]: {
+      [`&${componentCls}-block`]: {
+        width: '100%'
+      }
+    }
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Button', token => {
+  const { controlTmpOutline, paddingContentHorizontal } = token
+
+  const buttonToken = mergeToken<ButtonToken>(token, {
+    colorOutlineDefault: controlTmpOutline,
+    buttonPaddingHorizontal: paddingContentHorizontal
+  })
+
+  return [
+    // Shared
+    genSharedButtonStyle(buttonToken),
+
+    // Size
+    genSizeSmallButtonStyle(buttonToken),
+    genSizeBaseButtonStyle(buttonToken),
+    genSizeLargeButtonStyle(buttonToken),
+
+    // Block
+    genBlockButtonStyle(buttonToken),
+
+    // Group (type, ghost, danger, disabled, loading)
+    genTypeButtonStyle(buttonToken),
+
+    // Button Group
+    genGroupStyle(buttonToken),
+
+    // Space Compact
+    genCompactItemStyle(token),
+    genCompactItemVerticalStyle(token)
+  ]
+})

components/config-provider/context.ts

@@ -1,5 +1,4 @@
-import { createInjectionState } from '@vueuse/core'
+import { computed, inject, provide } from 'vue'
-import { computed } from 'vue'
 
 export const defaultIconPrefixCls = 'anticon'
 
@@ -8,21 +7,27 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
 
   return suffixCls ? `ant-${suffixCls}` : 'ant'
 }
-const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(() => {
+
+export const ConfigProviderContext = Symbol('ConfigProviderContext')
+
+export const defaultConfigProviderState = () => {
   const getPrefixCls = defaultGetPrefixCls
   const iconPrefixCls = computed(() => defaultIconPrefixCls)
   return {
     getPrefixCls,
     iconPrefixCls
   }
-})
+}
+
+const useProviderConfigProvide = () => {
+  const defaultState = defaultConfigProviderState()
+  provide(ConfigProviderContext, defaultState)
+  return {
+    ...defaultState
+  }
+}
 
 export { useProviderConfigProvide }
 export const useProviderConfigState = () => {
-  return (
+  return inject(ConfigProviderContext, defaultConfigProviderState())
-    useProviderConfigInject() ?? {
-      getPrefixCls: defaultGetPrefixCls,
-      iconPrefixCls: computed(() => defaultIconPrefixCls)
-    }
-  )
 }

components/theme/interface/components.ts

@@ -2,7 +2,7 @@
 // import type { ComponentToken as AnchorComponentToken } from '../../anchor/style'
 // import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'
 // import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'
-// import type { ComponentToken as ButtonComponentToken } from '../../button/style'
+import type { ComponentToken as ButtonComponentToken } from '../../button/style'
 // import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'
 // import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'
 // import type { ComponentToken as CardComponentToken } from '../../card/style'
@@ -48,7 +48,7 @@
 // import type { ComponentToken as TourComponentToken } from '../../tour/style'
 // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'
 // import type { ComponentToken as AppComponentToken } from '../../app/style'
-// import type { ComponentToken as WaveToken } from '../../_util/wave/style'
+import type { ComponentToken as WaveToken } from '../../_util/wave/style'
 
 export interface ComponentTokenMap {
   Affix?: {}
@@ -57,7 +57,7 @@ export interface ComponentTokenMap {
   // Avatar?: AvatarComponentToken
   // BackTop?: BackTopComponentToken
   // Badge?: {}
-  // Button?: ButtonComponentToken
+  Button?: ButtonComponentToken
   // Breadcrumb?: {}
   // Card?: CardComponentToken
   // Carousel?: CarouselComponentToken
@@ -115,5 +115,5 @@ export interface ComponentTokenMap {
   // App?: AppComponentToken
   //
   // /** @private Internal TS definition. Do not use. */
-  // Wave?: WaveToken
+  Wave?: WaveToken
 }

components/theme/internal.ts

@@ -1,8 +1,7 @@
 import type { CSSInterpolation, Theme } from '@antd-tiny-vue/cssinjs'
 import { createTheme, useCacheToken, useStyleRegister } from '@antd-tiny-vue/cssinjs'
-import { createInjectionState } from '@vueuse/core'
 import type { ComputedRef, VNodeChild } from 'vue'
-import { computed } from 'vue'
+import { computed, inject, provide } from 'vue'
 import version from '../version'
 import type { AliasToken, GlobalToken, MapToken, OverrideToken, PresetColorKey, PresetColorType, SeedToken } from './interface'
 import { PresetColors } from './interface'
@@ -50,12 +49,14 @@ export interface DesignTokenConfig {
   hashed?: string | boolean
 }
 
-const [useDesignTokenProvider, useDesignTokenInject] = createInjectionState((token: DesignTokenConfig) => {
+export const DesignTokenContext = Symbol('DesignTokenContext')
-  return token
+
-})
+const useDesignTokenProvider = (token: DesignTokenConfig) => {
+  provide(DesignTokenContext, token)
+}
 
 export { useDesignTokenProvider }
-export const useDesignTokenState = () => useDesignTokenInject() ?? defaultConfig
+export const useDesignTokenState = () => inject(DesignTokenContext, defaultConfig)
 
 // ================================== Hook ==================================
 export function useToken(): [ComputedRef<Theme<SeedToken, MapToken>>, ComputedRef<GlobalToken>, ComputedRef<string>] {
@@ -77,6 +78,6 @@ export function useToken(): [ComputedRef<Theme<SeedToken, MapToken>>, ComputedRe
   return [mergedTheme, computed(() => cacheToken.value?.[0]), computed(() => (designTokenContext.hashed ? cacheToken.value?.[1] : ''))]
 }
 
-export type UseComponentStyleResult = [(node: VNodeChild) => VNodeChild, string]
+export type UseComponentStyleResult = [(node: VNodeChild) => VNodeChild, ComputedRef<string>]
 
 export type GenerateStyle<ComponentToken extends object = AliasToken, ReturnType = CSSInterpolation> = (token: ComponentToken) => ReturnType

components/theme/util/genComponentStyleHook.ts

@@ -92,7 +92,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
         flush(component, mergedComponentToken)
         return [genCommonStyle(token.value, prefixCls.value), styleInterpolation]
       }),
-      hashId.value
+      hashId
     ]
   }
 }

site/.vitepress/theme/index.ts

@@ -2,11 +2,13 @@ import type { Theme } from 'vitepress'
 // eslint-disable-next-line import/no-named-as-default
 import DefaultTheme from 'vitepress/theme'
 import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
+import Antd from '../../../components'
 
 export default {
   ...DefaultTheme,
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp?.(ctx)
     ctx.app.component('Demo', AntdTheme)
+    ctx.app.use(Antd)
   }
 } as Theme

site/demos/button/basic.vue

@@ -10,7 +10,9 @@ title: 基础按钮
 <script lang="ts" setup></script>
 
 <template>
-  <div></div>
+  <div>
+    <a-button>这是按钮</a-button>
+  </div>
 </template>
 
 <style scoped></style>

site/vite.config.ts

@@ -8,5 +8,8 @@ export default defineConfig({
     VitePluginVitepressDemo({
       glob: ['**/demos/**/*.vue']
     })
-  ]
+  ],
+  server: {
+    port: 9527
+  }
 })