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
2 years ago · 34af3ec550
53 changed files with 3267 additions and 394 deletions
--- 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;
-
-    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),
-    ];
-  },
-  {
+export default genComponentStyleHook('Button', (token) => {
+  const { controlTmpOutline, paddingContentHorizontal } = 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),
+  ];
+});
--- 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"
--- 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"
--- a/components/drawer/demo/component-token.md
+++ b/components/drawer/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/drawer/demo/component-token.tsx
+++ 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>
+);
--- 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

--- 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

--- 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,
  }),
 );
--- 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"
--- 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"
--- a/components/message/demo/component-token.md
+++ b/components/message/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug
--- a/components/message/demo/component-token.tsx
+++ 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>
+);
--- 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)`
--- 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

--- 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`,
  }),
 );
--- 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"
--- 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"
--- a/components/modal/demo/component-token.md
+++ b/components/modal/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/modal/demo/component-token.tsx
+++ 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>
+);
--- 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

--- 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

--- 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,
  }),
 );
--- 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,
+  }),
 );
--- 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"
--- 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"
--- a/components/result/demo/component-token.md
+++ b/components/result/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/result/demo/component-token.tsx
+++ 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;
--- 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

--- 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

--- 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`,
+  }),
 );
--- 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"
--- 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"
--- a/components/statistic/demo/component-token.md
+++ b/components/statistic/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/statistic/demo/component-token.tsx
+++ 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;
--- 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

--- 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

--- 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,
    };
  },
 );
--- 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"
--- 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"
--- a/components/steps/demo/component-token.md
+++ b/components/steps/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/steps/demo/component-token.tsx
+++ 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;
--- 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

--- 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

--- 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`,
        },
      },
    },
--- 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,
    };
  },
 );
--- 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,
          },
        },
      },
--- 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: '""',
        },
--- 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,
        },
      },

--- 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,
        },
      },
    },
--- 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',
        },
      },
--- 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`,
        },
      },
    },
--- 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` | - |
-
-## Notification
+| `@modal-confirm-title-font-size` | `titleFontSize` | - |
+| `@modal-border-radius` | `borderRadiusLG` | GlobalToken |

-<!-- 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 -->

--- 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` | - |
-
-## Notification 通知提醒框
+| `@modal-confirm-title-font-size` | `titleFontSize` | - |
+| `@modal-border-radius` | `borderRadiusLG` | 全局 Token |

-<!-- 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 开关 -->