From 34af3ec55016a70dd3b33ffb71500898d20549b1 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 9 May 2023 19:24:50 +0800
Subject: [PATCH] feat: component token rename (#42184)

* feat: component token naming rules

* dcos: update

* feat: modal token rename

* feat: rename result token

* feat: statsitic token rename

* feat: steps token remane

* chore: update snapshot

* chore: fix lint

* feat: semantic part component

* revert: button & notification

* revert: files

* chore: code clean
---
 components/button/style/index.ts              |  72 +-
 .../__snapshots__/demo-extend.test.tsx.snap   |  64 ++
 .../__tests__/__snapshots__/demo.test.ts.snap |  64 ++
 components/drawer/demo/component-token.md     |   7 +
 components/drawer/demo/component-token.tsx    |  17 +
 components/drawer/index.en-US.md              |   1 +
 components/drawer/index.zh-CN.md              |   1 +
 components/drawer/style/index.ts              |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  37 +
 .../__tests__/__snapshots__/demo.test.ts.snap |  37 +
 components/message/demo/component-token.md    |   7 +
 components/message/demo/component-token.tsx   |  20 +
 components/message/index.en-US.md             |   3 +-
 components/message/index.zh-CN.md             |   1 +
 components/message/style/index.tsx            |  28 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 326 ++++++++
 .../__snapshots__/demo.test.tsx.snap          | 326 ++++++++
 components/modal/demo/component-token.md      |   7 +
 components/modal/demo/component-token.tsx     |  39 +
 components/modal/index.en-US.md               |   1 +
 components/modal/index.zh-CN.md               |   1 +
 components/modal/style/index.tsx              |  60 +-
 components/notification/style/index.tsx       |  30 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  60 ++
 .../__tests__/__snapshots__/demo.test.ts.snap |  60 ++
 components/result/demo/component-token.md     |   7 +
 components/result/demo/component-token.tsx    |  31 +
 components/result/index.en-US.md              |   1 +
 components/result/index.zh-CN.md              |   1 +
 components/result/style/index.tsx             |  55 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 101 +++
 .../__tests__/__snapshots__/demo.test.ts.snap | 101 +++
 components/statistic/demo/component-token.md  |   7 +
 components/statistic/demo/component-token.tsx |  32 +
 components/statistic/index.en-US.md           |   1 +
 components/statistic/index.zh-CN.md           |   1 +
 components/statistic/style/index.tsx          |  24 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 711 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 711 ++++++++++++++++++
 components/steps/demo/component-token.md      |   7 +
 components/steps/demo/component-token.tsx     | 134 ++++
 components/steps/index.en-US.md               |   1 +
 components/steps/index.zh-CN.md               |   1 +
 components/steps/style/custom-icon.ts         |  12 +-
 components/steps/style/index.tsx              |  77 +-
 components/steps/style/label-placement.ts     |   8 +-
 components/steps/style/nav.ts                 |  10 +-
 components/steps/style/progress-dot.ts        |  50 +-
 components/steps/style/progress.ts            |  10 +-
 components/steps/style/small.ts               |  20 +-
 components/steps/style/vertical.ts            |  14 +-
 docs/react/migrate-less-variables.en-US.md    | 127 ++--
 docs/react/migrate-less-variables.zh-CN.md    | 121 ++-
 53 files changed, 3266 insertions(+), 393 deletions(-)
 create mode 100644 components/drawer/demo/component-token.md
 create mode 100644 components/drawer/demo/component-token.tsx
 create mode 100644 components/message/demo/component-token.md
 create mode 100644 components/message/demo/component-token.tsx
 create mode 100644 components/modal/demo/component-token.md
 create mode 100644 components/modal/demo/component-token.tsx
 create mode 100644 components/result/demo/component-token.md
 create mode 100644 components/result/demo/component-token.tsx
 create mode 100644 components/statistic/demo/component-token.md
 create mode 100644 components/statistic/demo/component-token.tsx
 create mode 100644 components/steps/demo/component-token.md
 create mode 100644 components/steps/demo/component-token.tsx

diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 7f001cd9d6..bdce1c754f 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -7,14 +7,13 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genGroupStyle from './group';
 
 /** Component only token. Which will handle additional calculation of alias token */
-export interface ComponentToken {
-  buttonFontWeight: number;
-}
+export interface ComponentToken {}
 
 export interface ButtonToken extends FullToken<'Button'> {
   colorOutlineDefault: string;
   buttonPaddingHorizontal: number;
   buttonIconOnlyFontSize: number;
+  buttonFontWeight: number;
 }
 
 // ============================== Shared ==============================
@@ -504,41 +503,36 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
-  'Button',
-  (token) => {
-    const { controlTmpOutline, paddingContentHorizontal } = token;
+export default genComponentStyleHook('Button', (token) => {
+  const { controlTmpOutline, paddingContentHorizontal } = token;
 
-    const buttonToken = mergeToken<ButtonToken>(token, {
-      colorOutlineDefault: controlTmpOutline,
-      buttonPaddingHorizontal: paddingContentHorizontal,
-      buttonIconOnlyFontSize: token.fontSizeLG,
-    });
-
-    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),
-    ];
-  },
-  {
+  const buttonToken = mergeToken<ButtonToken>(token, {
+    colorOutlineDefault: controlTmpOutline,
+    buttonPaddingHorizontal: paddingContentHorizontal,
+    buttonIconOnlyFontSize: token.fontSizeLG,
     buttonFontWeight: 400,
-  },
-);
+  });
+
+  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),
+  ];
+});
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index e52d4ad36f..a1a8cc55e6 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -99,6 +99,70 @@ Array [
 ]
 `;
 
+exports[`renders components/drawer/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  style="padding: 32px; background: rgb(230, 230, 230);"
+>
+  <div
+    class="ant-drawer ant-drawer-pure ant-drawer-right"
+    style="height: 300px;"
+  >
+    <div
+      class="ant-drawer-wrapper-body"
+    >
+      <div
+        class="ant-drawer-header"
+      >
+        <div
+          class="ant-drawer-header-title"
+        >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+            type="button"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </button>
+          <div
+            class="ant-drawer-title"
+          >
+            Hello Title
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-drawer-body"
+      >
+        Hello Content
+      </div>
+      <div
+        class="ant-drawer-footer"
+      >
+        Footer!
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/drawer/demo/config-provider.tsx extend context correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
index b71498e555..f23ac245d6 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -11,6 +11,70 @@ exports[`renders components/drawer/demo/basic-right.tsx correctly 1`] = `
 </button>
 `;
 
+exports[`renders components/drawer/demo/component-token.tsx correctly 1`] = `
+<div
+  style="padding:32px;background:#e6e6e6"
+>
+  <div
+    class="ant-drawer ant-drawer-pure ant-drawer-right"
+    style="height:300px"
+  >
+    <div
+      class="ant-drawer-wrapper-body"
+    >
+      <div
+        class="ant-drawer-header"
+      >
+        <div
+          class="ant-drawer-header-title"
+        >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+            type="button"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </button>
+          <div
+            class="ant-drawer-title"
+          >
+            Hello Title
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-drawer-body"
+      >
+        Hello Content
+      </div>
+      <div
+        class="ant-drawer-footer"
+      >
+        Footer!
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/drawer/demo/config-provider.tsx correctly 1`] = `
 <div
   class="site-drawer-render-in-current-wrapper"
diff --git a/components/drawer/demo/component-token.md b/components/drawer/demo/component-token.md
new file mode 100644
index 0000000000..de91480d0a
--- /dev/null
+++ b/components/drawer/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/components/drawer/demo/component-token.tsx b/components/drawer/demo/component-token.tsx
new file mode 100644
index 0000000000..86fcab9df1
--- /dev/null
+++ b/components/drawer/demo/component-token.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ConfigProvider, Drawer } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;
+
+export default () => (
+  <ConfigProvider
+    theme={{ components: { Drawer: { footerPaddingBlock: 0, footerPaddingInline: 0 } } }}
+  >
+    <div style={{ padding: 32, background: '#e6e6e6' }}>
+      <InternalDrawer title="Hello Title" style={{ height: 300 }} footer="Footer!">
+        Hello Content
+      </InternalDrawer>
+    </div>
+  </ConfigProvider>
+);
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index 5244fc234c..e54cca9d93 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -34,6 +34,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 <code src="./demo/no-mask.tsx" debug>No mask</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/scroll-debug.tsx" debug>Scroll Debug</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index 664984968f..6f6f9ec7cc 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -33,6 +33,7 @@ demo:
 <code src="./demo/no-mask.tsx" debug>无遮罩</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/scroll-debug.tsx" debug>滚动锁定调试</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts
index 3fe3db3d5c..2630def032 100644
--- a/components/drawer/style/index.ts
+++ b/components/drawer/style/index.ts
@@ -4,8 +4,8 @@ import genMotionStyle from './motion';
 
 export interface ComponentToken {
   zIndexPopup: number;
-  drawerFooterPaddingVertical: number;
-  drawerFooterPaddingHorizontal: number;
+  footerPaddingBlock: number;
+  footerPaddingInline: number;
 }
 
 export interface DrawerToken extends FullToken<'Drawer'> {}
@@ -31,8 +31,8 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
     colorIconHover,
     colorText,
     fontWeightStrong,
-    drawerFooterPaddingVertical,
-    drawerFooterPaddingHorizontal,
+    footerPaddingBlock,
+    footerPaddingInline,
   } = token;
 
   const wrapperCls = `${componentCls}-content-wrapper`;
@@ -200,7 +200,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
       // Footer
       [`${componentCls}-footer`]: {
         flexShrink: 0,
-        padding: `${drawerFooterPaddingVertical}px ${drawerFooterPaddingHorizontal}px`,
+        padding: `${footerPaddingBlock}px ${footerPaddingInline}px`,
         borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
       },
 
@@ -222,7 +222,7 @@ export default genComponentStyleHook(
   },
   (token) => ({
     zIndexPopup: token.zIndexPopupBase,
-    drawerFooterPaddingVertical: token.paddingXS,
-    drawerFooterPaddingHorizontal: token.padding,
+    footerPaddingBlock: token.paddingXS,
+    footerPaddingInline: token.padding,
   }),
 );
diff --git a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
index 241e18a520..9531a5c88f 100644
--- a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-message-notice ant-message-notice-pure-panel"
+>
+  <div
+    class="ant-message-notice-content"
+  >
+    <div
+      class="ant-message-custom-content ant-message-error"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          />
+        </svg>
+      </span>
+      <span>
+        Hello World!
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
diff --git a/components/message/__tests__/__snapshots__/demo.test.ts.snap b/components/message/__tests__/__snapshots__/demo.test.ts.snap
index 302b08d2cc..af0b392f4f 100644
--- a/components/message/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/message/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders components/message/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-message-notice ant-message-notice-pure-panel"
+>
+  <div
+    class="ant-message-notice-content"
+  >
+    <div
+      class="ant-message-custom-content ant-message-error"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          />
+        </svg>
+      </span>
+      <span>
+        Hello World!
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/message/demo/custom-style.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default"
diff --git a/components/message/demo/component-token.md b/components/message/demo/component-token.md
new file mode 100644
index 0000000000..584563ddd2
--- /dev/null
+++ b/components/message/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug
diff --git a/components/message/demo/component-token.tsx b/components/message/demo/component-token.tsx
new file mode 100644
index 0000000000..708539dfb2
--- /dev/null
+++ b/components/message/demo/component-token.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ConfigProvider, message } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;
+
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Message: {
+          contentPadding: 40,
+          contentBg: '#e6f4ff',
+        },
+      },
+    }}
+  >
+    <InternalPanel content="Hello World!" type="error" />
+  </ConfigProvider>
+);
diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md
index 1da63806d2..c62beea676 100644
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@@ -28,10 +28,11 @@ Display global messages as feedback in response to user operations.
 <code src="./demo/update.tsx">Update Message Content</code>
 <code src="./demo/info.tsx">Normal prompt</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
-This components provides some static methods, with usage and arguments as following:
+This component provides some static methods, with usage and arguments as following:
 
 - `message.success(content, [duration], onClose)`
 - `message.error(content, [duration], onClose)`
diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md
index 5ec819e2ab..824b1fd0f4 100644
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@@ -29,6 +29,7 @@ demo:
 <code src="./demo/update.tsx">更新消息内容</code>
 <code src="./demo/info.tsx">普通提示</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
index 49b4e7ad60..90e4691ca9 100644
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@@ -1,6 +1,7 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+import type { CSSProperties } from 'react';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -8,14 +9,14 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
   // Component token here
-  height: number;
   zIndexPopup: number;
-  messageNoticeContentBg: string;
-  messageNoticeContentPadding: string;
+  contentBg: string;
+  contentPadding: CSSProperties['padding'];
 }
 
 interface MessageToken extends FullToken<'Message'> {
   // Custom token here
+  height: number;
 }
 
 const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
@@ -24,7 +25,6 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
     iconCls,
     boxShadow,
     colorText,
-    colorBgElevated,
     colorSuccess,
     colorError,
     colorWarning,
@@ -37,7 +37,8 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
     borderRadiusLG,
     zIndexPopup,
     // Custom token
-    messageNoticeContentPadding,
+    contentPadding,
+    contentBg,
   } = token;
 
   const noticeCls = `${componentCls}-notice`;
@@ -81,8 +82,8 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
 
     [`${noticeCls}-content`]: {
       display: 'inline-block',
-      padding: messageNoticeContentPadding,
-      background: colorBgElevated,
+      padding: contentPadding,
+      background: contentBg,
       borderRadius: borderRadiusLG,
       boxShadow,
       pointerEvents: 'all',
@@ -176,15 +177,16 @@ export default genComponentStyleHook(
   'Message',
   (token) => {
     // Gen-style functions here
-    const combinedToken = mergeToken<MessageToken>(token, {});
+    const combinedToken = mergeToken<MessageToken>(token, {
+      height: 150,
+    });
     return [genMessageStyle(combinedToken)];
   },
   (token) => ({
-    height: 150,
     zIndexPopup: token.zIndexPopupBase + 10,
-    messageNoticeContentBg: token.colorBgElevated,
-    messageNoticeContentPadding: `${
-      (token.controlHeightLG - token.fontSize * token.lineHeight) / 2
-    }px ${token.paddingSM}px`,
+    contentBg: token.colorBgElevated,
+    contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
+      token.paddingSM
+    }px`,
   }),
 );
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index d716874e84..f1791cd39e 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -33,6 +33,332 @@ exports[`renders components/modal/demo/button-props.tsx extend context correctly
 </button>
 `;
 
+exports[`renders components/modal/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  style="display: flex; flex-direction: column; row-gap: 16px;"
+>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width: 100%; height: 200px;"
+  >
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Hello World!
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        Hello World?!
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            Cancel
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width: 100%; height: 200px;"
+  >
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Hello World!
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        Hello World?!
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            Cancel
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
+    role="dialog"
+    style="width: 200px; height: 150px;"
+  >
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="check-circle"
+              class="anticon anticon-check-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              A good news!
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
+    role="dialog"
+    style="width: 300px; height: 200px;"
+  >
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <span
+              class="ant-modal-confirm-title"
+            >
+              Confirm This?
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              Some descriptions.
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders components/modal/demo/confirm.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
index f624e13fc9..b4277b5b33 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
@@ -33,6 +33,332 @@ exports[`renders components/modal/demo/button-props.tsx correctly 1`] = `
 </button>
 `;
 
+exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
+<div
+  style="display:flex;flex-direction:column;row-gap:16px"
+>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width:100%;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Hello World!
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        Hello World?!
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            Cancel
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width:100%;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Hello World!
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        Hello World?!
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            Cancel
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
+    role="dialog"
+    style="width:200px;height:150px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="check-circle"
+              class="anticon anticon-check-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              A good news!
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
+    role="dialog"
+    style="width:300px;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <span
+              class="ant-modal-confirm-title"
+            >
+              Confirm This?
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              Some descriptions.
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders components/modal/demo/confirm.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
diff --git a/components/modal/demo/component-token.md b/components/modal/demo/component-token.md
new file mode 100644
index 0000000000..de91480d0a
--- /dev/null
+++ b/components/modal/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/components/modal/demo/component-token.tsx b/components/modal/demo/component-token.tsx
new file mode 100644
index 0000000000..d3f16ee5d0
--- /dev/null
+++ b/components/modal/demo/component-token.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { ConfigProvider, Modal } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
+
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Modal: {
+          footerBg: '#f6ffed',
+          contentBg: '#e6fffb',
+          headerBg: '#f9f0ff',
+          titleLineHeight: 3,
+          titleFontSize: 12,
+          titleColor: '#1d39c4',
+        },
+      },
+    }}
+  >
+    <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
+      <InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
+        Hello World?!
+      </InternalPanel>
+      <ConfigProvider theme={{ token: { wireframe: true } }}>
+        <InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
+          Hello World?!
+        </InternalPanel>
+      </ConfigProvider>
+      <InternalPanel type="success" style={{ width: 200, height: 150 }}>
+        A good news!
+      </InternalPanel>
+      <InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
+        Some descriptions.
+      </InternalPanel>
+    </div>
+  </ConfigProvider>
+);
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index f6cef122fc..14ee81c922 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -36,6 +36,7 @@ Additionally, if you need show a simple confirmation dialog, you can use [`App.u
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/custom-mouse-position.tsx" debug>Control modal's animation origin position</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index 7e9aaaec0b..1c0b468d7f 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -37,6 +37,7 @@ demo:
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/custom-mouse-position.tsx" debug>控制弹框动画原点</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
index 14afd906ab..d2efd10671 100644
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -8,15 +8,12 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
   // Component token here
-  modalHeaderBg: string;
-  modalHeaderTitleLineHeight: number;
-  modalHeaderTitleFontSize: number;
-  modalHeadingColor: string;
-  modalCloseIconColor: string;
-  modalContentBg: string;
-  modalFooterBg: string;
-  modalCloseBtnSize: number;
-  modalConfirmIconSize: number;
+  headerBg: string;
+  titleLineHeight: number;
+  titleFontSize: number;
+  titleColor: string;
+  contentBg: string;
+  footerBg: string;
 }
 
 export interface ModalToken extends FullToken<'Modal'> {
@@ -33,6 +30,9 @@ export interface ModalToken extends FullToken<'Modal'> {
   modalFooterPaddingHorizontal: number;
   modalFooterBorderWidth: number;
   modalIconHoverColor: string;
+  modalCloseIconColor: string;
+  modalCloseBtnSize: number;
+  modalConfirmIconSize: number;
 }
 
 function box(position: React.CSSProperties['position']): React.CSSProperties {
@@ -155,16 +155,16 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
 
         [`${componentCls}-title`]: {
           margin: 0,
-          color: token.modalHeadingColor,
+          color: token.titleColor,
           fontWeight: token.fontWeightStrong,
-          fontSize: token.modalHeaderTitleFontSize,
-          lineHeight: token.modalHeaderTitleLineHeight,
+          fontSize: token.titleFontSize,
+          lineHeight: token.titleLineHeight,
           wordWrap: 'break-word',
         },
 
         [`${componentCls}-content`]: {
           position: 'relative',
-          backgroundColor: token.modalContentBg,
+          backgroundColor: token.contentBg,
           backgroundClip: 'padding-box',
           border: 0,
           borderRadius: token.borderRadiusLG,
@@ -185,19 +185,19 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
           textDecoration: 'none',
           background: 'transparent',
           borderRadius: token.borderRadiusSM,
-          width: token.modalConfirmIconSize,
-          height: token.modalConfirmIconSize,
+          width: token.modalCloseBtnSize,
+          height: token.modalCloseBtnSize,
           border: 0,
           outline: 0,
           cursor: 'pointer',
           transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
 
           '&-x': {
-            display: 'block',
+            display: 'flex',
             fontSize: token.fontSizeLG,
             fontStyle: 'normal',
             lineHeight: `${token.modalCloseBtnSize}px`,
-            textAlign: 'center',
+            justifyContent: 'center',
             textTransform: 'none',
             textRendering: 'auto',
           },
@@ -217,7 +217,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
 
         [`${componentCls}-header`]: {
           color: token.colorText,
-          background: token.modalHeaderBg,
+          background: token.headerBg,
           borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
           marginBottom: token.marginXS,
         },
@@ -230,7 +230,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
 
         [`${componentCls}-footer`]: {
           textAlign: 'end',
-          background: token.modalFooterBg,
+          background: token.footerBg,
           marginTop: token.marginSM,
 
           [`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: {
@@ -297,8 +297,8 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
           overflow: 'hidden',
           color: token.colorTextHeading,
           fontWeight: token.fontWeightStrong,
-          fontSize: token.modalHeaderTitleFontSize,
-          lineHeight: token.modalHeaderTitleLineHeight,
+          fontSize: token.titleFontSize,
+          lineHeight: token.titleLineHeight,
 
           [`+ ${confirmComponentCls}-content`]: {
             marginBlockStart: token.marginXS,
@@ -442,6 +442,9 @@ export default genComponentStyleHook(
       modalFooterPaddingHorizontal: token.padding,
       modalFooterBorderWidth: token.lineWidth,
       modalIconHoverColor: token.colorIconHover,
+      modalCloseIconColor: token.colorIcon,
+      modalCloseBtnSize: token.fontSize * token.lineHeight,
+      modalConfirmIconSize: token.fontSize * token.lineHeight,
     });
     return [
       genModalStyle(modalToken),
@@ -453,14 +456,11 @@ export default genComponentStyleHook(
     ];
   },
   (token) => ({
-    modalFooterBg: 'transparent',
-    modalHeaderBg: token.colorBgElevated,
-    modalHeaderTitleLineHeight: token.lineHeightHeading5,
-    modalHeaderTitleFontSize: token.fontSizeHeading5,
-    modalContentBg: token.colorBgElevated,
-    modalHeadingColor: token.colorTextHeading,
-    modalCloseIconColor: token.colorTextDescription,
-    modalConfirmIconSize: token.fontSize * token.lineHeight,
-    modalCloseBtnSize: token.fontSize * token.lineHeight,
+    footerBg: 'transparent',
+    headerBg: token.colorBgElevated,
+    titleLineHeight: token.lineHeightHeading5,
+    titleFontSize: token.fontSizeHeading5,
+    contentBg: token.colorBgElevated,
+    titleColor: token.colorTextHeading,
   }),
 );
diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx
index 60e24bf01f..84b07dd6b0 100644
--- a/components/notification/style/index.tsx
+++ b/components/notification/style/index.tsx
@@ -9,6 +9,10 @@ import genNotificationPlacementStyle from './placement';
 export interface ComponentToken {
   zIndexPopup: number;
   width: number;
+}
+
+export interface NotificationToken extends FullToken<'Notification'> {
+  animationMaxHeight: number;
   notificationBg: string;
   notificationPadding: string;
   notificationPaddingVertical: number;
@@ -19,10 +23,6 @@ export interface ComponentToken {
   notificationMarginEdge: number;
 }
 
-export interface NotificationToken extends FullToken<'Notification'> {
-  animationMaxHeight: number;
-}
-
 const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
   const {
     iconCls,
@@ -268,20 +268,11 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Notification',
-  (token) => {
-    const notificationToken = mergeToken<NotificationToken>(token, {
-      // index.less variables
-      animationMaxHeight: 150,
-    });
-
-    return [genNotificationStyle(notificationToken)];
-  },
   (token) => {
     const notificationPaddingVertical = token.paddingMD;
     const notificationPaddingHorizontal = token.paddingLG;
-    return {
-      zIndexPopup: token.zIndexPopupBase + 50,
-      width: 384,
+    const notificationToken = mergeToken<NotificationToken>(token, {
+      // index.less variables
       notificationBg: token.colorBgElevated,
       notificationPaddingVertical,
       notificationPaddingHorizontal,
@@ -290,6 +281,13 @@ export default genComponentStyleHook(
       notificationMarginBottom: token.margin,
       notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
       notificationMarginEdge: token.marginLG,
-    };
+      animationMaxHeight: 150,
+    });
+
+    return [genNotificationStyle(notificationToken)];
   },
+  (token) => ({
+    zIndexPopup: token.zIndexPopupBase + 50,
+    width: 384,
+  }),
 );
diff --git a/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
index f74933cee0..f99cee9f26 100644
--- a/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1022,6 +1022,66 @@ exports[`renders components/result/demo/500.tsx extend context correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/result/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-result ant-result-success"
+>
+  <div
+    class="ant-result-icon"
+  >
+    <span
+      aria-label="check-circle"
+      class="anticon anticon-check-circle"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="check-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="ant-result-title"
+  >
+    Successfully Purchased Cloud Server ECS!
+  </div>
+  <div
+    class="ant-result-subtitle"
+  >
+    Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
+  </div>
+  <div
+    class="ant-result-extra"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Go Console
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Buy Again
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders components/result/demo/customIcon.tsx extend context correctly 1`] = `
 <div
   class="ant-result ant-result-info"
diff --git a/components/result/__tests__/__snapshots__/demo.test.ts.snap b/components/result/__tests__/__snapshots__/demo.test.ts.snap
index 05e0b1ff1a..22397746ee 100644
--- a/components/result/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/result/__tests__/__snapshots__/demo.test.ts.snap
@@ -1022,6 +1022,66 @@ exports[`renders components/result/demo/500.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/result/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-result ant-result-success"
+>
+  <div
+    class="ant-result-icon"
+  >
+    <span
+      aria-label="check-circle"
+      class="anticon anticon-check-circle"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="check-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="ant-result-title"
+  >
+    Successfully Purchased Cloud Server ECS!
+  </div>
+  <div
+    class="ant-result-subtitle"
+  >
+    Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
+  </div>
+  <div
+    class="ant-result-extra"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Go Console
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Buy Again
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders components/result/demo/customIcon.tsx correctly 1`] = `
 <div
   class="ant-result ant-result-info"
diff --git a/components/result/demo/component-token.md b/components/result/demo/component-token.md
new file mode 100644
index 0000000000..de91480d0a
--- /dev/null
+++ b/components/result/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/components/result/demo/component-token.tsx b/components/result/demo/component-token.tsx
new file mode 100644
index 0000000000..d5c708a96a
--- /dev/null
+++ b/components/result/demo/component-token.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, ConfigProvider, Result } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Result: {
+          titleFontSize: 18,
+          subtitleFontSize: 14,
+          iconFontSize: 48,
+          extraMargin: `12px 0 0 0`,
+        },
+      },
+    }}
+  >
+    <Result
+      status="success"
+      title="Successfully Purchased Cloud Server ECS!"
+      subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+      extra={[
+        <Button type="primary" key="console">
+          Go Console
+        </Button>,
+        <Button key="buy">Buy Again</Button>,
+      ]}
+    />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/result/index.en-US.md b/components/result/index.en-US.md
index 034f7d1bca..e2c97077ca 100644
--- a/components/result/index.en-US.md
+++ b/components/result/index.en-US.md
@@ -23,6 +23,7 @@ Use when important operations need to inform the user to process the results and
 <code src="./demo/500.tsx">500</code>
 <code src="./demo/error.tsx">Error</code>
 <code src="./demo/customIcon.tsx">Custom icon</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md
index f86ea7bee2..77ea604cfa 100644
--- a/components/result/index.zh-CN.md
+++ b/components/result/index.zh-CN.md
@@ -24,6 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA
 <code src="./demo/500.tsx">500</code>
 <code src="./demo/error.tsx">Error</code>
 <code src="./demo/customIcon.tsx">自定义 icon</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx
index d2cccc11b8..156bdb3d76 100644
--- a/components/result/style/index.tsx
+++ b/components/result/style/index.tsx
@@ -1,25 +1,24 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSProperties } from 'react';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  titleFontSize: number;
+  subtitleFontSize: number;
+  iconFontSize: number;
+  extraMargin: CSSProperties['margin'];
+}
+
+interface ResultToken extends FullToken<'Result'> {
   imageWidth: number;
   imageHeight: number;
-
-  resultTitleFontSize: number;
-  resultSubtitleFontSize: number;
-  resultIconFontSize: number;
-
-  resultExtraMargin: string;
-
   resultInfoIconColor: string;
   resultSuccessIconColor: string;
   resultWarningIconColor: string;
   resultErrorIconColor: string;
 }
 
-interface ResultToken extends FullToken<'Result'> {}
-
 // ============================== Styles ==============================
 const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
   const {
@@ -57,13 +56,13 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
       textAlign: 'center',
 
       [`& > ${iconCls}`]: {
-        fontSize: token.resultIconFontSize,
+        fontSize: token.iconFontSize,
       },
     },
 
     [`${componentCls} ${componentCls}-title`]: {
       color: token.colorTextHeading,
-      fontSize: token.resultTitleFontSize,
+      fontSize: token.titleFontSize,
       lineHeight: lineHeightHeading3,
       marginBlock: marginXS,
       textAlign: 'center',
@@ -71,7 +70,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
 
     [`${componentCls} ${componentCls}-subtitle`]: {
       color: token.colorTextDescription,
-      fontSize: token.resultSubtitleFontSize,
+      fontSize: token.subtitleFontSize,
       lineHeight,
       textAlign: 'center',
     },
@@ -83,7 +82,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
     },
 
     [`${componentCls} ${componentCls}-extra`]: {
-      margin: token.resultExtraMargin,
+      margin: token.extraMargin,
       textAlign: 'center',
 
       '& > *': {
@@ -127,32 +126,26 @@ const getStyle: GenerateStyle<ResultToken> = (token) => genResultStyle(token);
 export default genComponentStyleHook(
   'Result',
   (token) => {
-    const resultToken = mergeToken<ResultToken>(token, {});
-
-    return [getStyle(resultToken)];
-  },
-  (token) => {
-    const { paddingLG, fontSizeHeading3 } = token;
-
-    const resultSubtitleFontSize = token.fontSize;
-    const resultExtraMargin = `${paddingLG}px 0 0 0`;
-
     const resultInfoIconColor = token.colorInfo;
     const resultErrorIconColor = token.colorError;
     const resultSuccessIconColor = token.colorSuccess;
     const resultWarningIconColor = token.colorWarning;
-    return {
-      imageWidth: 250,
-      imageHeight: 295,
 
-      resultTitleFontSize: fontSizeHeading3,
-      resultSubtitleFontSize,
-      resultIconFontSize: fontSizeHeading3 * 3,
-      resultExtraMargin,
+    const resultToken = mergeToken<ResultToken>(token, {
       resultInfoIconColor,
       resultErrorIconColor,
       resultSuccessIconColor,
       resultWarningIconColor,
-    };
+      imageWidth: 250,
+      imageHeight: 295,
+    });
+
+    return [getStyle(resultToken)];
   },
+  (token) => ({
+    titleFontSize: token.fontSizeHeading3,
+    subtitleFontSize: token.fontSize,
+    iconFontSize: token.fontSizeHeading3 * 3,
+    extraMargin: `${token.paddingLG}px 0 0 0`,
+  }),
 );
diff --git a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap
index df0fa969b5..1616141cd1 100644
--- a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -305,6 +305,107 @@ exports[`renders components/statistic/demo/card.tsx extend context correctly 1`]
 </div>
 `;
 
+exports[`renders components/statistic/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-row"
+  style="margin-left: -8px; margin-right: -8px;"
+>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left: 8px; padding-right: 8px;"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Active Users
+      </div>
+      <div
+        class="ant-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span
+            class="ant-statistic-content-value-int"
+          >
+            112,893
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left: 8px; padding-right: 8px;"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Account Balance (CNY)
+      </div>
+      <div
+        class="ant-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span
+            class="ant-statistic-content-value-int"
+          >
+            112,893
+          </span>
+          <span
+            class="ant-statistic-content-value-decimal"
+          >
+            .00
+          </span>
+        </span>
+      </div>
+    </div>
+    <button
+      class="ant-btn ant-btn-primary"
+      style="margin-top: 16px;"
+      type="button"
+    >
+      <span>
+        Recharge
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left: 8px; padding-right: 8px;"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Active Users
+      </div>
+      <div
+        class="ant-skeleton ant-statistic-skeleton"
+      >
+        <div
+          class="ant-skeleton-content"
+        >
+          <h3
+            class="ant-skeleton-title"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/statistic/demo/countdown.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
diff --git a/components/statistic/__tests__/__snapshots__/demo.test.ts.snap b/components/statistic/__tests__/__snapshots__/demo.test.ts.snap
index 36454c8cd5..442cfabe95 100644
--- a/components/statistic/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/statistic/__tests__/__snapshots__/demo.test.ts.snap
@@ -301,6 +301,107 @@ exports[`renders components/statistic/demo/card.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/statistic/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-row"
+  style="margin-left:-8px;margin-right:-8px"
+>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Active Users
+      </div>
+      <div
+        class="ant-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span
+            class="ant-statistic-content-value-int"
+          >
+            112,893
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Account Balance (CNY)
+      </div>
+      <div
+        class="ant-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span
+            class="ant-statistic-content-value-int"
+          >
+            112,893
+          </span>
+          <span
+            class="ant-statistic-content-value-decimal"
+          >
+            .00
+          </span>
+        </span>
+      </div>
+    </div>
+    <button
+      class="ant-btn ant-btn-primary"
+      style="margin-top:16px"
+      type="button"
+    >
+      <span>
+        Recharge
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Active Users
+      </div>
+      <div
+        class="ant-skeleton ant-statistic-skeleton"
+      >
+        <div
+          class="ant-skeleton-content"
+        >
+          <h3
+            class="ant-skeleton-title"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/statistic/demo/countdown.tsx correctly 1`] = `
 <div
   class="ant-row"
diff --git a/components/statistic/demo/component-token.md b/components/statistic/demo/component-token.md
new file mode 100644
index 0000000000..de91480d0a
--- /dev/null
+++ b/components/statistic/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/components/statistic/demo/component-token.tsx b/components/statistic/demo/component-token.tsx
new file mode 100644
index 0000000000..ecb8ff8031
--- /dev/null
+++ b/components/statistic/demo/component-token.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button, Col, ConfigProvider, Row, Statistic } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Statistic: {
+          titleFontSize: 20,
+          contentFontSize: 20,
+        },
+      },
+    }}
+  >
+    <Row gutter={16}>
+      <Col span={12}>
+        <Statistic title="Active Users" value={112893} />
+      </Col>
+      <Col span={12}>
+        <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
+        <Button style={{ marginTop: 16 }} type="primary">
+          Recharge
+        </Button>
+      </Col>
+      <Col span={12}>
+        <Statistic title="Active Users" value={112893} loading />
+      </Col>
+    </Row>
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md
index 48cbb2526c..6b169e4545 100644
--- a/components/statistic/index.en-US.md
+++ b/components/statistic/index.en-US.md
@@ -23,6 +23,7 @@ Display statistic number.
 <code src="./demo/animated.tsx">Animated number</code>
 <code src="./demo/card.tsx" background="grey">In Card</code>
 <code src="./demo/countdown.tsx">Countdown</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md
index 30b0b14fa6..7ef40c58c3 100644
--- a/components/statistic/index.zh-CN.md
+++ b/components/statistic/index.zh-CN.md
@@ -24,6 +24,7 @@ demo:
 <code src="./demo/animated.tsx">动画效果</code>
 <code src="./demo/card.tsx" background="grey">在卡片中使用</code>
 <code src="./demo/countdown.tsx">倒计时</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx
index e5e16363af..b24438f20f 100644
--- a/components/statistic/style/index.tsx
+++ b/components/statistic/style/index.tsx
@@ -4,9 +4,8 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
-  statisticTitleFontSize: number;
-  statisticContentFontSize: number;
-  statisticFontFamily: string;
+  titleFontSize: number;
+  contentFontSize: number;
 }
 
 interface StatisticToken extends FullToken<'Statistic'> {}
@@ -17,10 +16,10 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
     marginXXS,
     padding,
     colorTextDescription,
-    statisticTitleFontSize,
+    titleFontSize,
     colorTextHeading,
-    statisticContentFontSize,
-    statisticFontFamily,
+    contentFontSize,
+    fontFamily,
   } = token;
 
   return {
@@ -29,7 +28,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
       [`${componentCls}-title`]: {
         marginBottom: marginXXS,
         color: colorTextDescription,
-        fontSize: statisticTitleFontSize,
+        fontSize: titleFontSize,
       },
 
       [`${componentCls}-skeleton`]: {
@@ -38,8 +37,8 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
 
       [`${componentCls}-content`]: {
         color: colorTextHeading,
-        fontSize: statisticContentFontSize,
-        fontFamily: statisticFontFamily,
+        fontSize: contentFontSize,
+        fontFamily,
         [`${componentCls}-content-value`]: {
           display: 'inline-block',
           direction: 'ltr',
@@ -66,11 +65,10 @@ export default genComponentStyleHook(
     return [genStatisticStyle(statisticToken)];
   },
   (token) => {
-    const { fontSizeHeading3, fontSize, fontFamily } = token;
+    const { fontSizeHeading3, fontSize } = token;
     return {
-      statisticTitleFontSize: fontSize,
-      statisticContentFontSize: fontSizeHeading3,
-      statisticFontFamily: fontFamily,
+      titleFontSize: fontSize,
+      contentFontSize: fontSizeHeading3,
     };
   },
 );
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index a354d6075e..73b58579ad 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -233,6 +233,717 @@ Array [
 ]
 `;
 
+exports[`renders components/steps/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-steps ant-steps-vertical"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check ant-steps-finish-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+            <div
+              class="ant-steps-item-subtitle"
+              title="Left 00:00:08"
+            >
+              Left 00:00:08
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-vertical ant-steps-small"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check ant-steps-finish-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+            <div
+              class="ant-steps-item-subtitle"
+              title="Left 00:00:08"
+            >
+              Left 00:00:08
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-vertical"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish ant-steps-item-custom ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="user"
+              class="anticon anticon-user"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="user"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Login
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-finish ant-steps-item-custom"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="solution"
+              class="anticon anticon-solution"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="solution"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M688 264c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48zm-8 136H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM480 544H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm-48 308H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm356.8-74.4c29-26.3 47.2-64.3 47.2-106.6 0-79.5-64.5-144-144-144s-144 64.5-144 144c0 42.3 18.2 80.3 47.2 106.6-57 32.5-96.2 92.7-99.2 162.1-.2 4.5 3.5 8.3 8 8.3h48.1c4.2 0 7.7-3.3 8-7.6C564 871.2 621.7 816 692 816s128 55.2 131.9 124.4c.2 4.2 3.7 7.6 8 7.6H880c4.6 0 8.2-3.8 8-8.3-2.9-69.5-42.2-129.6-99.2-162.1zM692 591c44.2 0 80 35.8 80 80s-35.8 80-80 80-80-35.8-80-80 35.8-80 80-80z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Verification
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-custom"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="loading"
+              class="anticon anticon-loading anticon-spin"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="loading"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Pay
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait ant-steps-item-custom"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="smile"
+              class="anticon anticon-smile"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="smile"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Done
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-vertical ant-steps-dot"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-vertical ant-steps-navigation"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check ant-steps-finish-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Step 1
+            <div
+              class="ant-steps-item-subtitle"
+              title="00:00:05"
+            >
+              00:00:05
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Step 2
+            <div
+              class="ant-steps-item-subtitle"
+              title="00:01:02"
+            >
+              00:01:02
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Step 3
+            <div
+              class="ant-steps-item-subtitle"
+              title="waiting for longlong time"
+            >
+              waiting for longlong time
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/steps/demo/customized-progress-dot.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical ant-steps-dot"
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index bdf5074caf..dff7c26a48 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -233,6 +233,717 @@ Array [
 ]
 `;
 
+exports[`renders components/steps/demo/component-token.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check ant-steps-finish-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+            <div
+              class="ant-steps-item-subtitle"
+              title="Left 00:00:08"
+            >
+              Left 00:00:08
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check ant-steps-finish-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+            <div
+              class="ant-steps-item-subtitle"
+              title="Left 00:00:08"
+            >
+              Left 00:00:08
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish ant-steps-item-custom ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="user"
+              class="anticon anticon-user"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="user"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Login
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-finish ant-steps-item-custom"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="solution"
+              class="anticon anticon-solution"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="solution"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M688 264c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48zm-8 136H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM480 544H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm-48 308H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm356.8-74.4c29-26.3 47.2-64.3 47.2-106.6 0-79.5-64.5-144-144-144s-144 64.5-144 144c0 42.3 18.2 80.3 47.2 106.6-57 32.5-96.2 92.7-99.2 162.1-.2 4.5 3.5 8.3 8 8.3h48.1c4.2 0 7.7-3.3 8-7.6C564 871.2 621.7 816 692 816s128 55.2 131.9 124.4c.2 4.2 3.7 7.6 8 7.6H880c4.6 0 8.2-3.8 8-8.3-2.9-69.5-42.2-129.6-99.2-162.1zM692 591c44.2 0 80 35.8 80 80s-35.8 80-80 80-80-35.8-80-80 35.8-80 80-80z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Verification
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-custom"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="loading"
+              class="anticon anticon-loading anticon-spin"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="loading"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Pay
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait ant-steps-item-custom"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="smile"
+              class="anticon anticon-smile"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="smile"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Done
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check ant-steps-finish-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Step 1
+            <div
+              class="ant-steps-item-subtitle"
+              title="00:00:05"
+            >
+              00:00:05
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Step 2
+            <div
+              class="ant-steps-item-subtitle"
+              title="00:01:02"
+            >
+              00:01:02
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Step 3
+            <div
+              class="ant-steps-item-subtitle"
+              title="waiting for longlong time"
+            >
+              waiting for longlong time
+            </div>
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/steps/demo/customized-progress-dot.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
diff --git a/components/steps/demo/component-token.md b/components/steps/demo/component-token.md
new file mode 100644
index 0000000000..de91480d0a
--- /dev/null
+++ b/components/steps/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/components/steps/demo/component-token.tsx b/components/steps/demo/component-token.tsx
new file mode 100644
index 0000000000..21132ccd06
--- /dev/null
+++ b/components/steps/demo/component-token.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { ConfigProvider, Steps } from 'antd';
+import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
+
+const description = 'This is a description.';
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Steps: {
+          titleLineHeight: 20,
+          customIconSize: 40,
+          customIconTop: 0,
+          customIconFontSize: 32,
+          iconSize: 20,
+          iconTop: 0, // magic for ui experience
+          iconFontSize: 12,
+          iconSizeSM: 16,
+          dotSize: 20,
+          dotCurrentSize: 24,
+          navArrowColor: '#163CFF',
+          navContentMaxWidth: 100,
+          descriptionMaxWidth: 100,
+        },
+      },
+    }}
+  >
+    <Steps
+      current={1}
+      items={[
+        {
+          title: 'Finished',
+          description,
+        },
+        {
+          title: 'In Progress',
+          description,
+          subTitle: 'Left 00:00:08',
+        },
+        {
+          title: 'Waiting',
+          description,
+        },
+      ]}
+    />
+    <Steps
+      size="small"
+      current={1}
+      items={[
+        {
+          title: 'Finished',
+          description,
+        },
+        {
+          title: 'In Progress',
+          description,
+          subTitle: 'Left 00:00:08',
+        },
+        {
+          title: 'Waiting',
+          description,
+        },
+      ]}
+    />
+    <Steps
+      items={[
+        {
+          title: 'Login',
+          status: 'finish',
+          icon: <UserOutlined />,
+        },
+        {
+          title: 'Verification',
+          status: 'finish',
+          icon: <SolutionOutlined />,
+        },
+        {
+          title: 'Pay',
+          status: 'process',
+          icon: <LoadingOutlined />,
+        },
+        {
+          title: 'Done',
+          status: 'wait',
+          icon: <SmileOutlined />,
+        },
+      ]}
+    />
+    <Steps
+      progressDot
+      current={1}
+      items={[
+        {
+          title: 'Finished',
+          description: 'This is a description.',
+        },
+        {
+          title: 'In Progress',
+          description: 'This is a description.',
+        },
+        {
+          title: 'Waiting',
+          description: 'This is a description.',
+        },
+      ]}
+    />
+    <Steps
+      type="navigation"
+      current={1}
+      items={[
+        {
+          title: 'Step 1',
+          subTitle: '00:00:05',
+          status: 'finish',
+          description: 'This is a description.',
+        },
+        {
+          title: 'Step 2',
+          subTitle: '00:01:02',
+          status: 'process',
+          description: 'This is a description.',
+        },
+        {
+          title: 'Step 3',
+          subTitle: 'waiting for longlong time',
+          status: 'wait',
+          description: 'This is a description.',
+        },
+      ]}
+    />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
index 2672dc9d56..936d11679e 100644
--- a/components/steps/index.en-US.md
+++ b/components/steps/index.en-US.md
@@ -33,6 +33,7 @@ When a given task is complicated or has a certain sequence in the series of subt
 <code src="./demo/steps-in-steps.tsx" debug>Steps inside Steps</code>
 <code src="./demo/inline.tsx">Inline Steps</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index 48b9c223f1..153329e57d 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -34,6 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 <code src="./demo/steps-in-steps.tsx" debug>Steps 嵌套 Steps</code>
 <code src="./demo/inline.tsx">内联步骤</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
diff --git a/components/steps/style/custom-icon.ts b/components/steps/style/custom-icon.ts
index 199f2e108a..6b03bfe998 100644
--- a/components/steps/style/custom-icon.ts
+++ b/components/steps/style/custom-icon.ts
@@ -3,7 +3,7 @@ import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
-  const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token;
+  const { componentCls, customIconTop, customIconSize, customIconFontSize } = token;
 
   return {
     [`${componentCls}-item-custom`]: {
@@ -12,11 +12,11 @@ const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) =>
         background: 'none',
         border: 0,
         [`> ${componentCls}-icon`]: {
-          top: stepsIconCustomTop,
-          width: stepsIconCustomSize,
-          height: stepsIconCustomSize,
-          fontSize: stepsIconCustomFontSize,
-          lineHeight: `${stepsIconCustomSize}px`,
+          top: customIconTop,
+          width: customIconSize,
+          height: customIconSize,
+          fontSize: customIconFontSize,
+          lineHeight: `${customIconFontSize}px`,
         },
       },
     },
diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx
index 48c8c271ac..2dfad71726 100644
--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSProperties } from 'react';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -13,25 +14,24 @@ import genStepsSmallStyle from './small';
 import genStepsVerticalStyle from './vertical';
 
 export interface ComponentToken {
-  descriptionWidth: number;
-  processTailColor: string;
-  stepsNavArrowColor: string;
-  stepsIconSize: number;
-  stepsIconCustomSize: number;
-  stepsIconCustomTop: number;
-  stepsIconCustomFontSize: number;
-  stepsIconTop: number;
-  stepsIconFontSize: number;
-  stepsDotSize: number;
-  stepsCurrentDotSize: number;
-  stepsNavContentMaxWidth: string;
-  stepsSmallIconSize: number;
+  descriptionMaxWidth: number;
+  customIconSize: number;
+  customIconTop: number;
+  customIconFontSize: number;
+  iconSize: number;
+  iconTop: number;
+  iconFontSize: number;
+  dotSize: number;
+  dotCurrentSize: number;
+  navArrowColor: string;
+  navContentMaxWidth: CSSProperties['maxWidth'];
+  iconSizeSM: number;
+  titleLineHeight: number;
 }
 
 export interface StepsToken extends FullToken<'Steps'> {
   // Steps variable default.less
   processTailColor: string;
-  stepsTitleLineHeight: number;
   // Steps component less variable
   processIconColor: string;
   processTitleColor: string;
@@ -143,29 +143,29 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       verticalAlign: 'top',
     },
     [`${stepsItemCls}-icon`]: {
-      width: token.stepsIconSize,
-      height: token.stepsIconSize,
+      width: token.iconSize,
+      height: token.iconSize,
       marginTop: 0,
       marginBottom: 0,
       marginInlineStart: 0,
       marginInlineEnd: token.marginXS,
-      fontSize: token.stepsIconFontSize,
+      fontSize: token.iconFontSize,
       fontFamily: token.fontFamily,
-      lineHeight: `${token.stepsIconSize}px`,
+      lineHeight: `${token.iconSize}px`,
       textAlign: 'center',
-      borderRadius: token.stepsIconSize,
+      borderRadius: token.iconSize,
       border: `${token.lineWidth}px ${token.lineType} transparent`,
       transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
       [`${componentCls}-icon`]: {
         position: 'relative',
-        top: token.stepsIconTop,
+        top: token.iconTop,
         color: token.colorPrimary,
         lineHeight: 1,
       },
     },
     [`${stepsItemCls}-tail`]: {
       position: 'absolute',
-      top: token.stepsIconSize / 2 - token.paddingXXS,
+      top: token.iconSize / 2 - token.paddingXXS,
       insetInlineStart: 0,
       width: '100%',
 
@@ -185,11 +185,11 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       paddingInlineEnd: token.padding,
       color: token.colorText,
       fontSize: token.fontSizeLG,
-      lineHeight: `${token.stepsTitleLineHeight}px`,
+      lineHeight: `${token.titleLineHeight}px`,
 
       '&::after': {
         position: 'absolute',
-        top: token.stepsTitleLineHeight / 2,
+        top: token.titleLineHeight / 2,
         insetInlineStart: '100%',
         display: 'block',
         width: 9999,
@@ -279,7 +279,7 @@ const genStepsClickableStyle: GenerateStyle<StepsToken, CSSObject> = (token) =>
           display: 'none',
         },
         '&-description': {
-          maxWidth: token.descriptionWidth,
+          maxWidth: token.descriptionMaxWidth,
           whiteSpace: 'normal',
         },
       },
@@ -353,6 +353,7 @@ export default genComponentStyleHook(
       processIconBgColor: colorPrimary,
       processIconBorderColor: colorPrimary,
       processDotColor: colorPrimary,
+      processTailColor: colorSplit,
       waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
       waitTitleColor: colorTextDescription,
       waitDescriptionColor: colorTextDescription,
@@ -392,23 +393,21 @@ export default genComponentStyleHook(
       controlHeight,
       controlHeightLG,
       fontSizeHeading3,
-      colorSplit,
     } = token;
     return {
-      processTailColor: colorSplit,
-      stepsNavArrowColor: colorTextDisabled,
-      stepsIconSize: controlHeight,
-      stepsTitleLineHeight: controlHeight,
-      stepsIconCustomSize: controlHeight,
-      stepsIconCustomTop: 0,
-      stepsIconCustomFontSize: controlHeightSM,
-      stepsIconTop: -0.5, // magic for ui experience
-      stepsIconFontSize: fontSize,
-      stepsDotSize: controlHeight / 4,
-      descriptionWidth: 140,
-      stepsCurrentDotSize: controlHeightLG / 4,
-      stepsNavContentMaxWidth: 'auto',
-      stepsSmallIconSize: fontSizeHeading3,
+      titleLineHeight: controlHeight,
+      customIconSize: controlHeight,
+      customIconTop: 0,
+      customIconFontSize: controlHeightSM,
+      iconSize: controlHeight,
+      iconTop: -0.5, // magic for ui experience
+      iconFontSize: fontSize,
+      iconSizeSM: fontSizeHeading3,
+      dotSize: controlHeight / 4,
+      dotCurrentSize: controlHeightLG / 4,
+      navArrowColor: colorTextDisabled,
+      navContentMaxWidth: 'auto',
+      descriptionMaxWidth: 140,
     };
   },
 );
diff --git a/components/steps/style/label-placement.ts b/components/steps/style/label-placement.ts
index 36c5e529cf..783159dcba 100644
--- a/components/steps/style/label-placement.ts
+++ b/components/steps/style/label-placement.ts
@@ -3,7 +3,7 @@ import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
-  const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token;
+  const { componentCls, iconSize, lineHeight, iconSizeSM } = token;
 
   return {
     [`&${componentCls}-label-vertical`]: {
@@ -11,13 +11,13 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
         overflow: 'visible',
 
         '&-tail': {
-          marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
+          marginInlineStart: iconSize / 2 + token.controlHeightLG,
           padding: `${token.paddingXXS}px ${token.paddingLG}px`,
         },
 
         '&-content': {
           display: 'block',
-          width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
+          width: (iconSize / 2 + token.controlHeightLG) * 2,
           marginTop: token.marginSM,
           textAlign: 'center',
         },
@@ -46,7 +46,7 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
       [`&${componentCls}-small:not(${componentCls}-dot)`]: {
         [`${componentCls}-item`]: {
           '&-icon': {
-            marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2,
+            marginInlineStart: token.controlHeightLG + (iconSize - iconSizeSM) / 2,
           },
         },
       },
diff --git a/components/steps/style/nav.ts b/components/steps/style/nav.ts
index b47292a7c5..27f3b1defc 100644
--- a/components/steps/style/nav.ts
+++ b/components/steps/style/nav.ts
@@ -6,8 +6,8 @@ import type { GenerateStyle } from '../../theme/internal';
 const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const {
     componentCls,
-    stepsNavContentMaxWidth,
-    stepsNavArrowColor,
+    navContentMaxWidth,
+    navArrowColor,
     stepsNavActiveColor,
     motionDurationSlow,
   } = token;
@@ -37,7 +37,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           transition: `opacity ${motionDurationSlow}`,
 
           [`${componentCls}-item-content`]: {
-            maxWidth: stepsNavContentMaxWidth,
+            maxWidth: navContentMaxWidth,
           },
 
           [`${componentCls}-item-title`]: {
@@ -76,10 +76,10 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           display: 'inline-block',
           width: token.fontSizeIcon,
           height: token.fontSizeIcon,
-          borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
+          borderTop: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`,
           borderBottom: 'none',
           borderInlineStart: 'none',
-          borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
+          borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`,
           transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
           content: '""',
         },
diff --git a/components/steps/style/progress-dot.ts b/components/steps/style/progress-dot.ts
index eef5c01068..a84b80dfb0 100644
--- a/components/steps/style/progress-dot.ts
+++ b/components/steps/style/progress-dot.ts
@@ -5,10 +5,10 @@ import type { GenerateStyle } from '../../theme/internal';
 const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const {
     componentCls,
-    descriptionWidth,
+    descriptionMaxWidth,
     lineHeight,
-    stepsCurrentDotSize,
-    stepsDotSize,
+    dotCurrentSize,
+    dotSize,
     motionDurationSlow,
   } = token;
 
@@ -20,11 +20,11 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
         },
 
         '&-tail': {
-          top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2),
+          top: Math.floor((token.dotSize - token.lineWidth * 3) / 2),
           width: '100%',
           marginTop: 0,
           marginBottom: 0,
-          marginInline: `${descriptionWidth / 2}px 0`,
+          marginInline: `${descriptionMaxWidth / 2}px 0`,
           padding: 0,
 
           '&::after': {
@@ -34,11 +34,11 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
           },
         },
         '&-icon': {
-          width: stepsDotSize,
-          height: stepsDotSize,
-          marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
+          width: dotSize,
+          height: dotSize,
+          marginInlineStart: (token.descriptionMaxWidth - dotSize) / 2,
           paddingInlineEnd: 0,
-          lineHeight: `${stepsDotSize}px`,
+          lineHeight: `${dotSize}px`,
           background: 'transparent',
           border: 0,
 
@@ -54,7 +54,7 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
             '&::after': {
               position: 'absolute',
               top: -token.marginSM,
-              insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
+              insetInlineStart: (dotSize - token.controlHeightLG * 1.5) / 2,
               width: token.controlHeightLG * 1.5,
               height: token.controlHeight,
               background: 'transparent',
@@ -64,16 +64,16 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
         },
 
         '&-content': {
-          width: descriptionWidth,
+          width: descriptionMaxWidth,
         },
         [`&-process ${componentCls}-item-icon`]: {
           position: 'relative',
-          top: (stepsDotSize - stepsCurrentDotSize) / 2,
-          width: stepsCurrentDotSize,
-          height: stepsCurrentDotSize,
-          lineHeight: `${stepsCurrentDotSize}px`,
+          top: (dotSize - dotCurrentSize) / 2,
+          width: dotCurrentSize,
+          height: dotCurrentSize,
+          lineHeight: `${dotCurrentSize}px`,
           background: 'none',
-          marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2,
+          marginInlineStart: (token.descriptionMaxWidth - dotCurrentSize) / 2,
         },
         [`&-process ${componentCls}-icon`]: {
           [`&:first-child ${componentCls}-icon-dot`]: {
@@ -84,39 +84,39 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
     },
     [`&${componentCls}-vertical${componentCls}-dot`]: {
       [`${componentCls}-item-icon`]: {
-        marginTop: (token.controlHeight - stepsDotSize) / 2,
+        marginTop: (token.controlHeight - dotSize) / 2,
         marginInlineStart: 0,
         background: 'none',
       },
       [`${componentCls}-item-process ${componentCls}-item-icon`]: {
-        marginTop: (token.controlHeight - stepsCurrentDotSize) / 2,
+        marginTop: (token.controlHeight - dotCurrentSize) / 2,
         top: 0,
-        insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2,
+        insetInlineStart: (dotSize - dotCurrentSize) / 2,
         marginInlineStart: 0,
       },
 
       // https://github.com/ant-design/ant-design/issues/18354
       [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-        top: (token.controlHeight - stepsDotSize) / 2,
+        top: (token.controlHeight - dotSize) / 2,
         insetInlineStart: 0,
         margin: 0,
-        padding: `${stepsDotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
+        padding: `${dotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
 
         '&::after': {
-          marginInlineStart: (stepsDotSize - token.lineWidth) / 2,
+          marginInlineStart: (dotSize - token.lineWidth) / 2,
         },
       },
 
       [`&${componentCls}-small`]: {
         [`${componentCls}-item-icon`]: {
-          marginTop: (token.controlHeightSM - stepsDotSize) / 2,
+          marginTop: (token.controlHeightSM - dotSize) / 2,
         },
         [`${componentCls}-item-process ${componentCls}-item-icon`]: {
-          marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2,
+          marginTop: (token.controlHeightSM - dotCurrentSize) / 2,
         },
 
         [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-          top: (token.controlHeightSM - stepsDotSize) / 2,
+          top: (token.controlHeightSM - dotSize) / 2,
         },
       },
 
diff --git a/components/steps/style/progress.ts b/components/steps/style/progress.ts
index 829b924a2d..ba7e4b8d25 100644
--- a/components/steps/style/progress.ts
+++ b/components/steps/style/progress.ts
@@ -20,7 +20,7 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         paddingInlineStart: token.paddingXXS,
         [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
           top: token.marginXXS,
-          insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS,
+          insetInlineStart: token.iconSize / 2 - token.lineWidth + token.paddingXXS,
         },
       },
 
@@ -33,7 +33,7 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
 
       [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
         {
-          insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS,
+          insetInlineStart: token.iconSizeSM / 2 - token.lineWidth + token.paddingXXS,
         },
 
       [`&${componentCls}-label-vertical`]: {
@@ -47,10 +47,8 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
 
         [`${antCls}-progress`]: {
           position: 'absolute',
-          insetBlockStart:
-            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
-          insetInlineStart:
-            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
+          insetBlockStart: (token.iconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
+          insetInlineStart: (token.iconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
         },
       },
     },
diff --git a/components/steps/style/small.ts b/components/steps/style/small.ts
index 7f1ef24d98..e7e3b84afb 100644
--- a/components/steps/style/small.ts
+++ b/components/steps/style/small.ts
@@ -5,7 +5,7 @@ import type { GenerateStyle } from '../../theme/internal';
 const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const {
     componentCls,
-    stepsSmallIconSize,
+    iconSizeSM,
     // stepsSmallIconMargin,
     fontSizeSM,
     fontSize,
@@ -22,24 +22,24 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       },
 
       [`${componentCls}-item-icon`]: {
-        width: stepsSmallIconSize,
-        height: stepsSmallIconSize,
+        width: iconSizeSM,
+        height: iconSizeSM,
         // margin: stepsSmallIconMargin,
         marginTop: 0,
         marginBottom: 0,
         marginInline: `0 ${token.marginXS}px`,
         fontSize: fontSizeSM,
-        lineHeight: `${stepsSmallIconSize}px`,
+        lineHeight: `${iconSizeSM}px`,
         textAlign: 'center',
-        borderRadius: stepsSmallIconSize,
+        borderRadius: iconSizeSM,
       },
       [`${componentCls}-item-title`]: {
         paddingInlineEnd: token.paddingSM,
         fontSize,
-        lineHeight: `${stepsSmallIconSize}px`,
+        lineHeight: `${iconSizeSM}px`,
 
         '&::after': {
-          top: stepsSmallIconSize / 2,
+          top: iconSizeSM / 2,
         },
       },
       [`${componentCls}-item-description`]: {
@@ -47,7 +47,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         fontSize,
       },
       [`${componentCls}-item-tail`]: {
-        top: stepsSmallIconSize / 2 - token.paddingXXS,
+        top: iconSizeSM / 2 - token.paddingXXS,
       },
       [`${componentCls}-item-custom ${componentCls}-item-icon`]: {
         width: 'inherit',
@@ -57,8 +57,8 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         border: 0,
         borderRadius: 0,
         [`> ${componentCls}-icon`]: {
-          fontSize: stepsSmallIconSize,
-          lineHeight: `${stepsSmallIconSize}px`,
+          fontSize: iconSizeSM,
+          lineHeight: `${iconSizeSM}px`,
           transform: 'none',
         },
       },
diff --git a/components/steps/style/vertical.ts b/components/steps/style/vertical.ts
index d6a178c70a..79d810fb00 100644
--- a/components/steps/style/vertical.ts
+++ b/components/steps/style/vertical.ts
@@ -3,7 +3,7 @@ import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
-  const { componentCls, stepsSmallIconSize, stepsIconSize } = token;
+  const { componentCls, iconSizeSM, iconSize } = token;
 
   return {
     [`&${componentCls}-vertical`]: {
@@ -26,7 +26,7 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           overflow: 'hidden',
         },
         [`${componentCls}-item-title`]: {
-          lineHeight: `${stepsIconSize}px`,
+          lineHeight: `${iconSize}px`,
         },
         [`${componentCls}-item-description`]: {
           paddingBottom: token.paddingSM,
@@ -35,10 +35,10 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
         position: 'absolute',
         top: 0,
-        insetInlineStart: token.stepsIconSize / 2 - token.lineWidth,
+        insetInlineStart: iconSize / 2 - token.lineWidth,
         width: token.lineWidth,
         height: '100%',
-        padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
+        padding: `${iconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
 
         '&::after': {
           width: token.lineWidth,
@@ -59,11 +59,11 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         [`${componentCls}-item-tail`]: {
           position: 'absolute',
           top: 0,
-          insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth,
-          padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
+          insetInlineStart: iconSizeSM / 2 - token.lineWidth,
+          padding: `${iconSizeSM + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
         },
         [`${componentCls}-item-title`]: {
-          lineHeight: `${stepsSmallIconSize}px`,
+          lineHeight: `${iconSizeSM}px`,
         },
       },
     },
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index 991168f4f5..108234de07 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -9,7 +9,7 @@ This document contains the correspondence between all the less variables related
 
 <!-- ## 全局变量 -->
 
-## 组件变量
+## Component Token
 
 <!-- ### Alert -->
 
@@ -39,20 +39,18 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Divider -->
 
-
-## Drawer
+### Drawer
 
 <!-- prettier-ignore -->
 | Less variables | Component Token | Note |
 | --- | --- | --- |
-| `@drawer-bg` | `colorBgElevated` | - |
-| `@drawer-header-padding` | `padding`、`paddingLG` | `${padding}px ${paddingLG}px` |
-| `@drawer-title-font-size` | `fontSizeLG` | - |
-| `@drawer-title-line-height` | `lineHeightLG` | - |
-| `@drawer-body-padding` | `paddingLG` | - |
-| `@drawer-footer-padding-vertical` | `drawerFooterPaddingVertical` | `drawerFooterPaddingVertical`  is a number without units, `@drawer-footer-padding-vertical` with units |
-| `@drawer-footer-padding-horizontal` | `drawerFooterPaddingHorizontal` | `drawerFooterPaddingHorizontal`  is a number without units, `@drawer-footer-padding-horizontal` with units |
-
+| `@drawer-bg` | `colorBgElevated` | GlobalToken |
+| `@drawer-header-padding` | `padding`、`paddingLG` | GlobalToken, used as `${padding}px ${paddingLG}px` |
+| `@drawer-title-font-size` | `fontSizeLG` | GlobalToken |
+| `@drawer-title-line-height` | `lineHeightLG` | GlobalToken |
+| `@drawer-body-padding` | `paddingLG` | GlobalToken |
+| `@drawer-footer-padding-vertical` | `footerPaddingBlock` | `footerPaddingBlock`  is a number without units, `@drawer-footer-padding-vertical` with units |
+| `@drawer-footer-padding-horizontal` | `footerPaddingInline` | `footerPaddingInline`  is a number without units, `@drawer-footer-padding-horizontal` with units |
 
 <!-- ### Dropdown -->
 
@@ -72,16 +70,16 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Menu -->
 
-## Message
+### Message
 
 <!-- prettier-ignore -->
 | Less variables | Component Token | Note |
 | --- | --- | --- |
 | `@zindex-message` | `zIndexPopup` | - |
-| `@message-notice-content-padding` | `messageNoticeContentPadding` | - |
-| `@message-notice-content-bg` | `messageNoticeContentBg` | - |
+| `@message-notice-content-padding` | `contentPadding` | - |
+| `@message-notice-content-bg` | `contentBg` | - |
 
-## Modal
+### Modal
 
 <!-- prettier-ignore -->
 | Less variables | Component Token | Note |
@@ -89,40 +87,29 @@ This document contains the correspondence between all the less variables related
 | `@modal-header-padding-vertical` | - | Deprecated for style change |
 | `@modal-header-padding-horizontal` | - | Deprecated for style change |
 | `@modal-body-padding` | - | Deprecated for style change |
-| `@modal-header-bg` | `modalHeaderBg` | - |
+| `@modal-header-bg` | `headerBg` | - |
 | `@modal-header-padding` | - | Deprecated for style change |
 | `@modal-header-border-width` | - | Deprecated for style change |
 | `@modal-header-border-style` | - | Deprecated for style change |
-| `@modal-header-title-line-height` | `modalHeaderTitleLineHeight` | - |
-| `@modal-header-title-font-size` | `modalHeaderTitleFontSize` | - |
+| `@modal-header-title-line-height` | `titleLineHeight` | - |
+| `@modal-header-title-font-size` | `titleFontSize` | - |
 | `@modal-header-border-color-split` | - | Deprecated for style change |
 | `@modal-header-close-size` | - | Deprecated for style change |
-| `@modal-content-bg` | `modalContentBg` | - |
-| `@modal-heading-color` | `modalHeadingColor` | - |
-| `@modal-close-color` | `modalCloseIconColor` | - |
-| `@modal-footer-bg` | `modalFooterBg` | - |
+| `@modal-content-bg` | `contentBg` | - |
+| `@modal-heading-color` | `titleColor` | - |
+| `@modal-close-color` | `colorIcon` | GlobalToken |
+| `@modal-footer-bg` | `footerBg` | - |
 | `@modal-footer-border-color-split` | - | Deprecated for style change |
 | `@modal-footer-border-style` | - | Deprecated for style change |
 | `@modal-footer-padding-vertical` | - | Deprecated for style change |
 | `@modal-footer-padding-horizontal` | - | Deprecated for style change |
 | `@modal-footer-border-width` | - | Deprecated for style change |
-| `@modal-mask-bg` | `colorBgMask` | - |
+| `@modal-mask-bg` | `colorBgMask` | GlobalToken |
 | `@modal-confirm-body-padding` | - | Deprecated for style change |
-| `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - |
-| `@modal-border-radius` | `borderRadiusLG` | - |
+| `@modal-confirm-title-font-size` | `titleFontSize` | - |
+| `@modal-border-radius` | `borderRadiusLG` | GlobalToken |
 
-## Notification
-
-<!-- prettier-ignore -->
-| Less variables | Component Token | Note |
-| --- | --- | --- |
-| `@notification-width` | `width` | - |
-| `@notification-padding` | `notificationPadding` | - |
-| `@notification-padding-vertical` | `notificationPaddingVertical` | - |
-| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - |
-| `@notification-margin-bottom` | `notificationMarginBottom` | - |
-| `@notification-margin-edge` | `notificationMarginEdge` | - |
-| `@notification-bg` | `notificationBg` | - |
+<!-- ### Notification -->
 
 <!-- ### Pagination -->
 
@@ -134,17 +121,15 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Rate -->
 
-
-## Result
+### Result
 
 <!-- prettier-ignore -->
 | Less variables | Component Token | Note |
 | --- | --- | --- |
-| `@result-icon-font-size` | `resultIconFontSize` | - |
-| `@result-title-font-size` | `resultTitleFontSize` | - |
-| `@result-subtitle-font-size` | `resultSubtitleFontSize` | - |
-| `@result-extra-margin` | `resultExtraMargin` | - |
-
+| `@result-icon-font-size` | `iconFontSize` | - |
+| `@result-title-font-size` | `titleFontSize` | - |
+| `@result-subtitle-font-size` | `subtitleFontSize` | - |
+| `@result-extra-margin` | `extraMargin` | - |
 
 <!-- ### Segment -->
 
@@ -154,43 +139,41 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Slider -->
 
-
-## Statistic
+### Statistic
 
 <!-- prettier-ignore -->
 | Less variables | Component Token | Note |
 | --- | --- | --- |
-| `@statistic-title-font-size` | `statisticTitleFontSize` | - |
-| `@statistic-content-font-size` | `statisticContentFontSize` | - |
-| `@statistic-font-family` | `statisticFontFamily` | - |
+| `@statistic-title-font-size` | `titleFontSize` | - |
+| `@statistic-content-font-size` | `contentFontSize` | - |
+| `@statistic-font-family` | `fontFamily` | GlobalToken |
 
-
-## Step
+### Step
 
 <!-- prettier-ignore -->
 | Less variables | Component Token | Note |
 | --- | --- | --- |
-| `@process-tail-color` | `processTailColor` | - |
-| `@steps-nav-arrow-color` | `stepsNavArrowColor` | - |
-| `@steps-background` | - | Deprecated for style change |
-| `@steps-icon-size` | `stepsIconSize` | - |
-| `@steps-icon-custom-size` | `stepsIconCustomSize` | - |
-| `@steps-icon-custom-top` | `stepsIconCustomTop` | - |
-| `@steps-icon-custom-font-size` | `stepsIconCustomFontSize` | - |
-| `@steps-icon-top` | `stepsIconTop` | - |
-| `@steps-icon-font-size` | `stepsIconFontSize` | - |
-| `@steps-icon-margin` | - | Deprecated for style change |
-| `@steps-title-line-height` | `stepsTitleLineHeight` | - |
-| `@steps-small-icon-size` | `stepsSmallIconSize` | - |
-| `@steps-small-icon-margin` | - | Deprecated for style change |
-| `@steps-dot-size` | `stepsDotSize` | - |
-| `@steps-dot-top` | - | Deprecated for style change |
-| `@steps-current-dot-size` | `stepsCurrentDotSize` | - |
-| `@steps-description-max-width` | `stepsNavContentMaxWidth` | - |
-| `@steps-nav-content-max-width` | - | Deprecated for style change |
-| `@steps-vertical-icon-width` | - | Deprecated for style change |
-| `@steps-vertical-tail-width` | - | Deprecated for style change |
-| `@steps-vertical-tail-width-sm` | - | Deprecated for style change |
+| `@process-tail-color` | `colorSplit` | GlobalToken |
+| `@steps-nav-arrow-color` | `navArrowColor` | - |
+| `@steps-background` | `colorBgContainer` | - |
+| `@steps-icon-size` | `iconSize` | - |
+| `@steps-icon-custom-size` | `customIconSize` | - |
+| `@steps-icon-custom-top` | `customIconTop` | - |
+| `@steps-icon-custom-font-size` | `customIconFontSize` | - |
+| `@steps-icon-top` | `iconTop` | - |
+| `@steps-icon-font-size` | `iconFontSize` | - |
+| `@steps-icon-margin` | - | Deprecated |
+| `@steps-title-line-height` | `titleLineHeight` | - |
+| `@steps-small-icon-size` | `iconSizeSM` | - |
+| `@steps-small-icon-margin` | - | Deprecated |
+| `@steps-dot-size` | `dotSize` | - |
+| `@steps-dot-top` | - | Deprecated |
+| `@steps-current-dot-size` | `dotCurrentSize` | - |
+| `@steps-description-max-width` | `descriptionMaxWidth` | - |
+| `@steps-nav-content-max-width` | `stepsNavContentMaxWidth` | - |
+| `@steps-vertical-icon-width` | `iconSize` | - |
+| `@steps-vertical-tail-width` | - | Deprecated |
+| `@steps-vertical-tail-width-sm` | - | Deprecated |
 
 <!-- ### Switch -->
 
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index 8ebc762169..098b33f419 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -39,20 +39,18 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Divider 分割线 -->
 
-
-## Drawer 抽屉
+### Drawer 抽屉
 
 <!-- prettier-ignore -->
 | Less 变量 | Component Token | 备注 |
 | --- | --- | --- |
-| `@drawer-bg` | `colorBgElevated` | - |
-| `@drawer-header-padding` | `padding`、`paddingLG` | `${padding}px ${paddingLG}px` |
-| `@drawer-title-font-size` | `fontSizeLG` | - |
-| `@drawer-title-line-height` | `lineHeightLG` | - |
-| `@drawer-body-padding` | `paddingLG` | - |
-| `@drawer-footer-padding-vertical` | `drawerFooterPaddingVertical` | `drawerFooterPaddingVertical` 为数字，不带单位，`@drawer-footer-padding-vertical` 带单位 |
-| `@drawer-footer-padding-horizontal` | `drawerFooterPaddingHorizontal` | `drawerFooterPaddingHorizontal` 为数字，不带单位，`@drawer-footer-padding-horizontal` 带单位 |
-
+| `@drawer-bg` | `colorBgElevated` | 全局 Token |
+| `@drawer-header-padding` | `padding`、`paddingLG` | 全局 Token，对应值为 `${padding}px ${paddingLG}px` |
+| `@drawer-title-font-size` | `fontSizeLG` | 全局 Token |
+| `@drawer-title-line-height` | `lineHeightLG` | 全局 Token |
+| `@drawer-body-padding` | `paddingLG` | 全局 Token |
+| `@drawer-footer-padding-vertical` | `footerPaddingBlock` | `footerPaddingBlock` 为数字，不带单位，`@drawer-footer-padding-vertical` 带单位 |
+| `@drawer-footer-padding-horizontal` | `footerPaddingInline` | `footerPaddingInline` 为数字，不带单位，`@drawer-footer-padding-horizontal` 带单位 |
 
 <!-- ### Dropdown 下拉菜单 -->
 
@@ -72,14 +70,14 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Menu 导航菜单 -->
 
-## Message 全局提示
+### Message 全局提示
 
 <!-- prettier-ignore -->
 | Less 变量 | Component Token | 备注 |
 | --- | --- | --- |
 | `@zindex-message` | `zIndexPopup` | - |
-| `@message-notice-content-padding` | `messageNoticeContentPadding` | - |
-| `@message-notice-content-bg` | `messageNoticeContentBg` | - |
+| `@message-notice-content-padding` | `contentPadding` | - |
+| `@message-notice-content-bg` | `contentBg` | - |
 
 ### Modal 对话框
 
@@ -89,40 +87,29 @@ title: Less 变量迁移 Design Token
 | `@modal-header-padding-vertical` | - | 由于样式变化已废弃 |
 | `@modal-header-padding-horizontal` | - | 由于样式变化已废弃 |
 | `@modal-body-padding` | - | 由于样式变化已废弃 |
-| `@modal-header-bg` | `modalHeaderBg` | - |
+| `@modal-header-bg` | `headerBg` | - |
 | `@modal-header-padding` | - | 由于样式变化已废弃 |
 | `@modal-header-border-width` | - | 由于样式变化已废弃 |
 | `@modal-header-border-style` | - | 由于样式变化已废弃 |
-| `@modal-header-title-line-height` | `modalHeaderTitleLineHeight` | - |
-| `@modal-header-title-font-size` | `modalHeaderTitleFontSize` | - |
+| `@modal-header-title-line-height` | `titleLineHeight` | - |
+| `@modal-header-title-font-size` | `titleFontSize` | - |
 | `@modal-header-border-color-split` | - | 由于样式变化已废弃 |
 | `@modal-header-close-size` | - | 由于样式变化已废弃 |
-| `@modal-content-bg` | `modalContentBg` | - |
-| `@modal-heading-color` | `modalHeadingColor` | - |
-| `@modal-close-color` | `modalCloseIconColor` | - |
-| `@modal-footer-bg` | `modalFooterBg` | - |
+| `@modal-content-bg` | `contentBg` | - |
+| `@modal-heading-color` | `titleColor` | - |
+| `@modal-close-color` | `colorIcon` | 全局 Token |
+| `@modal-footer-bg` | `footerBg` | - |
 | `@modal-footer-border-color-split` | - | 由于样式变化已废弃 |
 | `@modal-footer-border-style` | - | 由于样式变化已废弃 |
 | `@modal-footer-padding-vertical` | - | 由于样式变化已废弃 |
 | `@modal-footer-padding-horizontal` | - | 由于样式变化已废弃 |
 | `@modal-footer-border-width` | - | 由于样式变化已废弃 |
-| `@modal-mask-bg` | `colorBgMask` | - |
+| `@modal-mask-bg` | `colorBgMask` | 全局 Token |
 | `@modal-confirm-body-padding` | - | 由于样式变化已废弃 |
-| `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - |
-| `@modal-border-radius` | `borderRadiusLG` | - |
+| `@modal-confirm-title-font-size` | `titleFontSize` | - |
+| `@modal-border-radius` | `borderRadiusLG` | 全局 Token |
 
-## Notification 通知提醒框
-
-<!-- prettier-ignore -->
-| Less 变量 | Component Token | 备注 |
-| --- | --- | --- |
-| `@notification-width` | `width` | - |
-| `@notification-padding` | `notificationPadding` | - |
-| `@notification-padding-vertical` | `notificationPaddingVertical` | - |
-| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - |
-| `@notification-margin-bottom` | `notificationMarginBottom` | - |
-| `@notification-margin-edge` | `notificationMarginEdge` | - |
-| `@notification-bg` | `notificationBg` | - |
+<!-- ### Notification 通知提醒框 -->
 
 <!-- ### Pagination 分页 -->
 
@@ -134,17 +121,15 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Rate 评分 -->
 
-
-## Result 结果
+### Result 结果
 
 <!-- prettier-ignore -->
 | Less 变量 | Component Token | 备注 |
 | --- | --- | --- |
-| `@result-icon-font-size` | `resultIconFontSize` | - |
-| `@result-title-font-size` | `resultTitleFontSize` | - |
-| `@result-subtitle-font-size` | `resultSubtitleFontSize` | - |
-| `@result-extra-margin` | `resultExtraMargin` | - |
-
+| `@result-icon-font-size` | `iconFontSize` | - |
+| `@result-title-font-size` | `titleFontSize` | - |
+| `@result-subtitle-font-size` | `subtitleFontSize` | - |
+| `@result-extra-margin` | `extraMargin` | - |
 
 <!-- ### Segment 分段器 -->
 
@@ -154,43 +139,41 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Slider 滑动输入条 -->
 
-
-## Statistic 统计数值
+### Statistic 统计数值
 
 <!-- prettier-ignore -->
 | Less 变量 | Component Token | 备注 |
 | --- | --- | --- |
-| `@statistic-title-font-size` | `statisticTitleFontSize` | - |
-| `@statistic-content-font-size` | `statisticContentFontSize` | - |
-| `@statistic-font-family` | `statisticFontFamily` | - |
-
+| `@statistic-title-font-size` | `titleFontSize` | - |
+| `@statistic-content-font-size` | `contentFontSize` | - |
+| `@statistic-font-family` | `fontFamily` | 全局 Token |
 
 ### Step 步骤条
 
 <!-- prettier-ignore -->
 | Less 变量 | Component Token | 备注 |
 | --- | --- | --- |
-| `@process-tail-color` | `processTailColor` | - |
-| `@steps-nav-arrow-color` | `stepsNavArrowColor` | - |
-| `@steps-background` | - | 由于样式变化已废弃 |
-| `@steps-icon-size` | `stepsIconSize` | - |
-| `@steps-icon-custom-size` | `stepsIconCustomSize` | - |
-| `@steps-icon-custom-top` | `stepsIconCustomTop` | - |
-| `@steps-icon-custom-font-size` | `stepsIconCustomFontSize` | - |
-| `@steps-icon-top` | `stepsIconTop` | - |
-| `@steps-icon-font-size` | `stepsIconFontSize` | - |
-| `@steps-icon-margin` | - | 由于样式变化已废弃 |
-| `@steps-title-line-height` | `stepsTitleLineHeight` | - |
-| `@steps-small-icon-size` | `stepsSmallIconSize` | - |
-| `@steps-small-icon-margin` | - | 由于样式变化已废弃 |
-| `@steps-dot-size` | `stepsDotSize` | - |
-| `@steps-dot-top` | - | 由于样式变化已废弃 |
-| `@steps-current-dot-size` | `stepsCurrentDotSize` | - |
-| `@steps-description-max-width` | `stepsNavContentMaxWidth` | - |
-| `@steps-nav-content-max-width` | - | 由于样式变化已废弃 |
-| `@steps-vertical-icon-width` | - | 由于样式变化已废弃 |
-| `@steps-vertical-tail-width` | - | 由于样式变化已废弃 |
-| `@steps-vertical-tail-width-sm` | - | 由于样式变化已废弃 |
+| `@process-tail-color` | `colorSplit` | 全局 Token |
+| `@steps-nav-arrow-color` | `navArrowColor` | - |
+| `@steps-background` | `colorBgContainer` | - |
+| `@steps-icon-size` | `iconSize` | - |
+| `@steps-icon-custom-size` | `customIconSize` | - |
+| `@steps-icon-custom-top` | `customIconTop` | - |
+| `@steps-icon-custom-font-size` | `customIconFontSize` | - |
+| `@steps-icon-top` | `iconTop` | - |
+| `@steps-icon-font-size` | `iconFontSize` | - |
+| `@steps-icon-margin` | - | 已废弃 |
+| `@steps-title-line-height` | `titleLineHeight` | - |
+| `@steps-small-icon-size` | `iconSizeSM` | - |
+| `@steps-small-icon-margin` | - | 已废弃 |
+| `@steps-dot-size` | `dotSize` | - |
+| `@steps-dot-top` | - | 已废弃 |
+| `@steps-current-dot-size` | `dotCurrentSize` | - |
+| `@steps-description-max-width` | `descriptionMaxWidth` | - |
+| `@steps-nav-content-max-width` | `stepsNavContentMaxWidth` | - |
+| `@steps-vertical-icon-width` | `iconSize` | - |
+| `@steps-vertical-tail-width` | - | 已废弃 |
+| `@steps-vertical-tail-width-sm` | - | 已废弃 |
 
 <!-- ### Switch 开关 -->