diff --git a/packages/components/_private/mask/style/index.less b/packages/components/_private/mask/style/index.less
index 2fde7d8fd..41a16decf 100644
--- a/packages/components/_private/mask/style/index.less
+++ b/packages/components/_private/mask/style/index.less
@@ -1,5 +1,6 @@
 @import '../../../style/variable/index.less';
 @import '../../../style/mixins/box.less';
+@import '../../../style/motion/fade.less';
 
 .@{mask-prefix} {
   .box(fixed);
diff --git a/packages/components/badge/demo/Basic.vue b/packages/components/badge/demo/Basic.vue
index 779c97833..ff92cf663 100644
--- a/packages/components/badge/demo/Basic.vue
+++ b/packages/components/badge/demo/Basic.vue
@@ -20,7 +20,7 @@ a {
   display: inline-block;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--ix-border-color);
+  border: 1px solid var(--ix-color-border);
   border-radius: var(--ix-border-radius-sm);
 }
 </style>
diff --git a/packages/components/badge/demo/Count.vue b/packages/components/badge/demo/Count.vue
index 45da9e35f..a6896522d 100644
--- a/packages/components/badge/demo/Count.vue
+++ b/packages/components/badge/demo/Count.vue
@@ -24,7 +24,7 @@ a {
   display: inline-block;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--ix-border-color);
+  border: 1px solid var(--ix-color-border);
   border-radius: var(--ix-border-radius-sm);
 }
 </style>
diff --git a/packages/components/badge/demo/OverflowCount.vue b/packages/components/badge/demo/OverflowCount.vue
index 4e07ea76d..91ce873f2 100644
--- a/packages/components/badge/demo/OverflowCount.vue
+++ b/packages/components/badge/demo/OverflowCount.vue
@@ -20,7 +20,7 @@ a {
   display: inline-block;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--ix-border-color);
+  border: 1px solid var(--ix-color-border);
   border-radius: var(--ix-border-radius-sm);
 }
 </style>
diff --git a/packages/components/badge/demo/Processing.vue b/packages/components/badge/demo/Processing.vue
index 93b4d536a..57895b1e4 100644
--- a/packages/components/badge/demo/Processing.vue
+++ b/packages/components/badge/demo/Processing.vue
@@ -22,7 +22,7 @@ a {
   display: inline-block;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--ix-border-color);
+  border: 1px solid var(--ix-color-border);
   border-radius: var(--ix-border-radius-sm);
 }
 </style>
diff --git a/packages/components/badge/demo/Status.vue b/packages/components/badge/demo/Status.vue
index aebdd385f..317eb1c33 100644
--- a/packages/components/badge/demo/Status.vue
+++ b/packages/components/badge/demo/Status.vue
@@ -23,7 +23,7 @@ a {
   display: inline-block;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--ix-border-color);
+  border: 1px solid var(--ix-color-border);
   border-radius: var(--ix-border-radius-sm);
 }
 </style>
diff --git a/packages/components/badge/demo/Title.vue b/packages/components/badge/demo/Title.vue
index f3eac616a..b86f7e3cf 100644
--- a/packages/components/badge/demo/Title.vue
+++ b/packages/components/badge/demo/Title.vue
@@ -14,7 +14,7 @@ a {
   display: inline-block;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--ix-border-color);
+  border: 1px solid var(--ix-color-border);
   border-radius: var(--ix-border-radius-sm);
 }
 </style>
diff --git a/packages/components/date-picker/style/index.ts b/packages/components/date-picker/style/index.ts
index b05e65818..bb71579bf 100644
--- a/packages/components/date-picker/style/index.ts
+++ b/packages/components/date-picker/style/index.ts
@@ -4,5 +4,6 @@ import '@idux/components/_private/overlay/style'
 import '@idux/components/_private/trigger/style'
 import '@idux/components/icon/style'
 import '@idux/components/input/style'
+import '@idux/components/time-picker/style'
 
 import './index.less'
diff --git a/packages/components/drawer/style/index.less b/packages/components/drawer/style/index.less
index cac211a0d..6e02549bf 100644
--- a/packages/components/drawer/style/index.less
+++ b/packages/components/drawer/style/index.less
@@ -1,6 +1,7 @@
 @import '../../style/variable/index.less';
 @import '../../style/mixins/box.less';
 @import '../../style/mixins/reset.less';
+@import '../../style//motion/move.less';
 
 .@{drawer-prefix} {
   .reset-component-new();
diff --git a/packages/components/drawer/style/index.ts b/packages/components/drawer/style/index.ts
index e6dbbe36c..a0ac6270b 100644
--- a/packages/components/drawer/style/index.ts
+++ b/packages/components/drawer/style/index.ts
@@ -1,5 +1,5 @@
 // style dependencies
-
+import '@idux/components/_private/mask/style'
 import '@idux/components/button/style'
 import '@idux/components/header/style'
 import '@idux/components/icon/style'
diff --git a/packages/components/image/src/Image.tsx b/packages/components/image/src/Image.tsx
index 3481bd874..0a2eb8f04 100644
--- a/packages/components/image/src/Image.tsx
+++ b/packages/components/image/src/Image.tsx
@@ -14,9 +14,11 @@ import { computed, defineComponent, normalizeClass, ref, watch } from 'vue'
 import { callEmit } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { IxIcon } from '@idux/components/icon'
+import { useThemeToken } from '@idux/components/theme'
 
 import ImageViewer from './ImageViewer'
 import { imageProps } from './types'
+import { getThemeTokens } from '../theme'
 
 export default defineComponent({
   name: 'IxImage',
@@ -25,6 +27,9 @@ export default defineComponent({
   setup(props, { attrs, slots }) {
     const { class: className, style, ...rest } = attrs
     const common = useGlobalConfig('common')
+    const { globalHashId, hashId, registerToken } = useThemeToken('image')
+    registerToken(getThemeTokens)
+
     const mergedPrefixCls = computed(() => `${common.prefixCls}-image`)
     const config = useGlobalConfig('image')
     const preview = usePreview(props, config)
@@ -32,6 +37,8 @@ export default defineComponent({
     const [viewerVisible, setVisible] = useViewerVisible()
     const { outerClasses, overLayerClasses, imageClasses } = useClasses(
       mergedPrefixCls,
+      globalHashId,
+      hashId,
       className as string,
       status,
       preview,
@@ -102,6 +109,8 @@ function useViewerVisible(): [Ref<boolean>, (visible: boolean) => void] {
 
 function useClasses(
   mergedPrefixCls: ComputedRef<string>,
+  globalHashId: ComputedRef<string>,
+  hashId: ComputedRef<string>,
   className: string,
   status: Ref<ImageStatus>,
   preview: ComputedRef<boolean>,
@@ -109,6 +118,8 @@ function useClasses(
   const outerClasses = computed(() =>
     normalizeClass([
       mergedPrefixCls.value,
+      globalHashId.value,
+      hashId.value,
       className,
       `${mergedPrefixCls.value}-${status.value}`,
       { [`${mergedPrefixCls.value}-preview`]: preview.value },
diff --git a/packages/components/image/src/ImageViewer.tsx b/packages/components/image/src/ImageViewer.tsx
index 216ce24bb..5306f7f43 100644
--- a/packages/components/image/src/ImageViewer.tsx
+++ b/packages/components/image/src/ImageViewer.tsx
@@ -11,11 +11,13 @@ import { isFirefox } from '@idux/cdk/platform'
 import { CdkPortal } from '@idux/cdk/portal'
 import { useControlledProp } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
+import { useThemeToken } from '@idux/components/theme'
 import { usePortalTarget, useZIndex } from '@idux/components/utils'
 
 import { useImgStyleOpr, useImgSwitch, useOprList } from './composables/useOpr'
 import OprIcon from './contents/OprIcon'
 import { imageViewerProps } from './types'
+import { getThemeTokens } from '../theme'
 
 const mousewheelEventName = isFirefox ? 'DOMMouseScroll' : 'mousewheel'
 
@@ -27,6 +29,8 @@ export default defineComponent({
   props: imageViewerProps,
   setup(props) {
     const common = useGlobalConfig('common')
+    const { globalHashId, hashId, registerToken } = useThemeToken('image')
+    registerToken(getThemeTokens)
     const config = useGlobalConfig('imageViewer')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-image-viewer`)
     const mergedPortalTarget = usePortalTarget(props, config, common, mergedPrefixCls)
@@ -79,7 +83,7 @@ export default defineComponent({
         <CdkPortal target={mergedPortalTarget.value} load={visible.value}>
           <Transition name={`${common.prefixCls}-zoom`} appear>
             {visible.value && (
-              <div class={prefixCls} style={style.value}>
+              <div class={[prefixCls, globalHashId.value, hashId.value]} style={style.value}>
                 <div class={`${prefixCls}-opr`}>
                   {oprList.value
                     .filter(item => item.visible)
diff --git a/packages/components/image/style/index.less b/packages/components/image/style/index.less
index b5270b455..6ce26ffda 100644
--- a/packages/components/image/style/index.less
+++ b/packages/components/image/style/index.less
@@ -1,6 +1,8 @@
 @import '../../style/variable/index.less';
 @import '../../style/mixins/reset.less';
 
+@import './viewer.less';
+
 .@{image-prefix} {
   .reset-component();
 
diff --git a/packages/components/image/style/index.ts b/packages/components/image/style/index.ts
index 64e699152..6d8a76564 100644
--- a/packages/components/image/style/index.ts
+++ b/packages/components/image/style/index.ts
@@ -1,3 +1,4 @@
 // style dependencies
+import '@idux/components/icon/style'
 
 import './index.less'
diff --git a/packages/components/notification/src/NotificationProvider.tsx b/packages/components/notification/src/NotificationProvider.tsx
index 5da6e2ad5..157a1dccf 100644
--- a/packages/components/notification/src/NotificationProvider.tsx
+++ b/packages/components/notification/src/NotificationProvider.tsx
@@ -21,11 +21,13 @@ import { isArray, isUndefined, pickBy } from 'lodash-es'
 import { CdkPortal } from '@idux/cdk/portal'
 import { VKey, callEmit, convertArray, convertCssPixel, uniqueId } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
+import { useThemeToken } from '@idux/components/theme'
 import { usePortalTarget } from '@idux/components/utils'
 
 import Notification from './Notification'
 import { NOTIFICATION_PROVIDER_TOKEN } from './token'
 import { notificationPlacement, notificationProviderProps, notificationType } from './types'
+import { getThemeTokens, transforms } from '../theme'
 
 const groupPositions = {
   topStart: ['top', 'left'],
@@ -40,6 +42,9 @@ export default defineComponent({
   props: notificationProviderProps,
   setup(props, { slots, expose }) {
     const commonCfg = useGlobalConfig('common')
+    const { globalHashId, hashId, registerToken } = useThemeToken('notification')
+    registerToken(getThemeTokens, transforms)
+
     const config = useGlobalConfig('notification')
     const mergedPrefixCls = computed(() => `${commonCfg.prefixCls}-notification`)
     const mergedPortalTarget = usePortalTarget(props, config, commonCfg, mergedPrefixCls)
@@ -79,7 +84,12 @@ export default defineComponent({
             tag="div"
             appear
             name={moveName}
-            class={[`${mergedPrefixCls.value}-wrapper`, `${mergedPrefixCls.value}-wrapper-${placement}`]}
+            class={[
+              `${mergedPrefixCls.value}-wrapper`,
+              `${mergedPrefixCls.value}-wrapper-${placement}`,
+              globalHashId.value,
+              hashId.value,
+            ]}
             style={position}
           >
             {child}
diff --git a/packages/components/popover/style/index.ts b/packages/components/popover/style/index.ts
index 2d54cd322..4451b438c 100644
--- a/packages/components/popover/style/index.ts
+++ b/packages/components/popover/style/index.ts
@@ -1,5 +1,7 @@
 // style dependencies
 
 import '@idux/components/_private/overlay/style'
+import '@idux/components/header/style'
+import '@idux/components/icon/style'
 
 import './index.less'
diff --git a/packages/components/radio/src/Radio.tsx b/packages/components/radio/src/Radio.tsx
index db8188534..786047315 100644
--- a/packages/components/radio/src/Radio.tsx
+++ b/packages/components/radio/src/Radio.tsx
@@ -14,6 +14,7 @@ import { isNil } from 'lodash-es'
 import { useAccessorAndControl } from '@idux/cdk/forms'
 import { callEmit, useKey } from '@idux/cdk/utils'
 import { ɵWave, type ɵWaveInstance } from '@idux/components/_private/wave'
+import { getButtonThemeTokens } from '@idux/components/button'
 import { useGlobalConfig } from '@idux/components/config'
 import { FORM_TOKEN, useFormElement, useFormItemRegister } from '@idux/components/form'
 import { useThemeToken } from '@idux/components/theme'
@@ -37,8 +38,9 @@ export default defineComponent({
     const key = useKey()
     const common = useGlobalConfig('common')
     const { globalHashId, hashId, registerToken } = useThemeToken('radio')
-    const { hashId: buttonHashId } = useThemeToken('button')
+    const { hashId: buttonHashId, registerToken: registerButtonTokens } = useThemeToken('button')
     registerToken(getThemeTokens)
+    registerButtonTokens(getButtonThemeTokens)
 
     const mergedPrefixCls = computed(() => `${common.prefixCls}-radio`)
     const config = useGlobalConfig('radio')
diff --git a/packages/components/select/style/index.ts b/packages/components/select/style/index.ts
index 3e9a8f9db..0351c2457 100644
--- a/packages/components/select/style/index.ts
+++ b/packages/components/select/style/index.ts
@@ -1,6 +1,8 @@
 // style dependencies
 
 import '@idux/components/_private/selector/style'
+import '@idux/components/_private/overflow/style'
+import '@idux/components/_private/overlay/style'
 import '@idux/components/checkbox/style'
 import '@idux/components/empty/style'
 import '@idux/components/icon/style'
diff --git a/packages/components/slider/style/index.ts b/packages/components/slider/style/index.ts
index 64e699152..0278dd5eb 100644
--- a/packages/components/slider/style/index.ts
+++ b/packages/components/slider/style/index.ts
@@ -1,3 +1,4 @@
 // style dependencies
+import '@idux/components/tooltip/style'
 
 import './index.less'
diff --git a/packages/components/tabs/style/index.ts b/packages/components/tabs/style/index.ts
index 7e35aaf38..c55a13979 100644
--- a/packages/components/tabs/style/index.ts
+++ b/packages/components/tabs/style/index.ts
@@ -1,5 +1,7 @@
 // style dependencies
 
 import '@idux/components/icon/style'
+import '@idux/components/popover/style'
+import '@idux/components/select/style'
 
 import './index.less'
diff --git a/packages/components/tour/src/Mask.tsx b/packages/components/tour/src/Mask.tsx
index 80679ea5a..79a704626 100644
--- a/packages/components/tour/src/Mask.tsx
+++ b/packages/components/tour/src/Mask.tsx
@@ -7,17 +7,26 @@
 
 import { computed, defineComponent, inject, normalizeClass } from 'vue'
 
+import { useThemeToken } from '@idux/components/theme'
+
 import { tourToken } from './token'
 
 export default defineComponent({
   setup() {
+    const { globalHashId, hashId } = useThemeToken('tour')
     const { mergedPrefixCls, mergedProps, maskPath, maskAttrs, maskClass, maskStyle } = inject(tourToken)!
 
     const classes = computed(() => {
       const prefixCls = `${mergedPrefixCls.value}-mask`
       const { animatable } = mergedProps.value
 
-      return normalizeClass([prefixCls, maskClass.value, animatable ? `${prefixCls}-animatable` : undefined])
+      return normalizeClass([
+        prefixCls,
+        globalHashId.value,
+        hashId.value,
+        maskClass.value,
+        animatable ? `${prefixCls}-animatable` : undefined,
+      ])
     })
 
     return () => {
diff --git a/packages/components/tour/style/index.less b/packages/components/tour/style/index.less
index 2e6630c7b..f7f8cf82c 100644
--- a/packages/components/tour/style/index.less
+++ b/packages/components/tour/style/index.less
@@ -1,5 +1,6 @@
 @import '../../style/variable/index.less';
 @import '../../style/mixins/reset.less';
+@import '../../style/motion/fade.less';
 
 .@{tour-prefix} {
   &-mask {
diff --git a/packages/components/tour/style/index.ts b/packages/components/tour/style/index.ts
index 2d54cd322..28888020a 100644
--- a/packages/components/tour/style/index.ts
+++ b/packages/components/tour/style/index.ts
@@ -1,5 +1,7 @@
 // style dependencies
 
 import '@idux/components/_private/overlay/style'
+import '@idux/components/header/style'
+import '@idux/components/button/style'
 
 import './index.less'
diff --git a/packages/components/tree-select/style/index.ts b/packages/components/tree-select/style/index.ts
index eb8cf3a40..1dd5cfc74 100644
--- a/packages/components/tree-select/style/index.ts
+++ b/packages/components/tree-select/style/index.ts
@@ -1,6 +1,7 @@
 // style dependencies
 
 import '@idux/components/_private/selector/style'
+import '@idux/components/_private/overflow/style'
 import '@idux/components/tree/style'
 import '@idux/components/input/style'
 
diff --git a/packages/pro/search/style/index.ts b/packages/pro/search/style/index.ts
index 46c042514..0f71e3ec9 100644
--- a/packages/pro/search/style/index.ts
+++ b/packages/pro/search/style/index.ts
@@ -1,4 +1,6 @@
 // style dependencies
+import '@idux/components/_private/overflow/style'
+import '@idux/components/_private/overlay/style'
 import '@idux/components/icon/style'
 import '@idux/components/select/style'
 import '@idux/components/tree/style'
diff --git a/packages/pro/textarea/style/index.ts b/packages/pro/textarea/style/index.ts
index 0278dd5eb..56935d581 100644
--- a/packages/pro/textarea/style/index.ts
+++ b/packages/pro/textarea/style/index.ts
@@ -1,4 +1,5 @@
 // style dependencies
 import '@idux/components/tooltip/style'
+import '@idux/components/icon/style'
 
 import './index.less'
diff --git a/packages/pro/transfer/style/index.ts b/packages/pro/transfer/style/index.ts
index 52219bc12..05b33fb19 100644
--- a/packages/pro/transfer/style/index.ts
+++ b/packages/pro/transfer/style/index.ts
@@ -1,6 +1,7 @@
 // style dependencies
 
-import '@idux/components/table/style'
+import '@idux/pro/table/style'
 import '@idux/components/tree/style'
+import '@idux/components/transfer/style'
 
 import './index.less'
diff --git a/packages/pro/tree/style/index.ts b/packages/pro/tree/style/index.ts
index bea3fafc7..c75acb108 100644
--- a/packages/pro/tree/style/index.ts
+++ b/packages/pro/tree/style/index.ts
@@ -3,5 +3,8 @@
 import '@idux/components/icon/style'
 import '@idux/components/button/style'
 import '@idux/components/divider/style'
+import '@idux/components/header/style'
+import '@idux/components/input/style'
+import '@idux/components/tree/style'
 
 import './index.less'