docs: add help text for token customization

.dumi/theme/builtins/ComponentTokenTable/index.tsx

@@ -1,5 +1,6 @@
 import { RightOutlined } from '@ant-design/icons';
 import { createStyles, css, useTheme } from 'antd-style';
+import Link from '../../common/Link';
 import { getDesignToken } from 'antd-token-previewer';
 import React, { useMemo, useState } from 'react';
 import tokenMeta from 'antd/es/version/token-meta.json';
@@ -18,6 +19,9 @@ const locales = {
     value: '默认值',
     componentToken: '组件 Token',
     globalToken: '全局 Token',
+    help: '如何定制？',
+    customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量',
+    customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改主题变量',
   },
   en: {
     token: 'Token Name',
@@ -26,6 +30,9 @@ const locales = {
     value: 'Default Value',
     componentToken: 'Component Token',
     globalToken: 'Global Token',
+    help: 'How to customize?',
+    customizeTokenLink: '/docs/react/customize-theme#customize-design-token',
+    customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token',
   },
 };
 
@@ -45,16 +52,32 @@ const useStyle = createStyles(() => ({
       transition: all 0.3s;
     }
   `,
+  help: css`
+    margin-left: 6px;
+    font-size: 13px;
+    font-weight: normal;
+    color: #999;
+    a {
+      color: #999;
+    }
+  `,
 }));
 
 interface SubTokenTableProps {
   defaultOpen?: boolean;
   title: string;
+  help: React.ReactNode;
   tokens: string[];
   component?: string;
 }
 
-const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title, component }) => {
+const SubTokenTable: React.FC<SubTokenTableProps> = ({
+  defaultOpen,
+  help,
+  tokens,
+  title,
+  component,
+}) => {
   const [, lang] = useLocale(locales);
   const token = useTheme();
   const columns = useColumns();
@@ -105,10 +128,13 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
     .filter(Boolean);
 
   return (
-    <div>
+    <>
       <div className={styles.tableTitle} onClick={() => setOpen(!open)}>
         <RightOutlined className={styles.arrowIcon} rotate={open ? 90 : 0} />
-        <h3>{title}</h3>
+        <h3>
+          {title}
+          <span className={styles.help}>({help})</span>
+        </h3>
       </div>
       {open && (
         <ConfigProvider theme={{ token: { borderRadius: 0 } }}>
@@ -123,7 +149,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
           />
         </ConfigProvider>
       )}
-    </div>
+    </>
   );
 };
 
@@ -152,11 +178,17 @@ const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component })
       {tokenMeta.components[component] && (
         <SubTokenTable
           title={locale.componentToken}
+          help={<Link to={locale.customizeTokenLink}>{locale.help}</Link>}
           tokens={tokenMeta.components[component].map((item) => item.token)}
           component={component}
+          defaultOpen
         />
       )}
-      <SubTokenTable title={locale.globalToken} tokens={mergedGlobalTokens} />
+      <SubTokenTable
+        title={locale.globalToken}
+        help={<Link to={locale.customizeComponentTokenLink}>{locale.help}</Link>}
+        tokens={mergedGlobalTokens}
+      />
     </>
   );
 };

components/anchor/index.zh-CN.md

@@ -76,6 +76,6 @@ group:
 | target | 该属性指定在何处显示链接的资源 | string    | -      |      |
 | title  | 文字内容                       | ReactNode | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Anchor"></ComponentTokenTable>

components/app/index.zh-CN.md

@@ -30,8 +30,8 @@ tag: New
 App 组件通过 `Context` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。
 
 ```tsx
-import { App } from 'antd';
 import React from 'react';
+import { App } from 'antd';
 
 const MyPage: React.FC = () => {
   const { message, notification, modal } = App.useApp();
@@ -103,8 +103,9 @@ export { message, notification, modal };
 
 ```tsx
 // sub page
-import { Button, Space } from 'antd';
 import React from 'react';
+import { Button, Space } from 'antd';
+
 import { message } from './store';
 
 export default () => {
@@ -133,6 +134,6 @@ export default () => {
 | message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
 | notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="App"></ComponentTokenTable>

components/auto-complete/index.zh-CN.md

@@ -79,7 +79,7 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Select"></ComponentTokenTable>
 

components/avatar/index.zh-CN.md

@@ -62,6 +62,6 @@ group:
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
 | shape | 设置头像的形状 | `circle` \| `square` | `circle` | 5.8.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Avatar"></ComponentTokenTable>

components/badge/index.zh-CN.md

@@ -70,6 +70,6 @@ group: 数据展示
 | root      | 设置根元素   | 5.7.0 |
 | indicator | 设置徽标元素 | 5.7.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Badge"></ComponentTokenTable>

components/breadcrumb/index.zh-CN.md

@@ -131,6 +131,6 @@ function itemRender(item, params, items, paths) {
 return <Breadcrumb itemRender={itemRender} items={items} />;
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Breadcrumb"></ComponentTokenTable>

components/button/index.zh-CN.md

@@ -85,7 +85,7 @@ group:
 | ---- | ------------ | ----- |
 | icon | 设置图标元素 | 5.5.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Button"></ComponentTokenTable>
 

components/calendar/index.zh-CN.md

@@ -66,7 +66,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - |  |
 | onSelect | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | `info`: 5.6.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Calendar"></ComponentTokenTable>
 

components/card/index.zh-CN.md

@@ -76,6 +76,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA
 | style       | 定义容器类名的样式 | CSSProperties | -      |      |
 | title       | 标题内容           | ReactNode     | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Card"></ComponentTokenTable>

components/carousel/index.zh-CN.md

@@ -51,7 +51,7 @@ demo:
 
 更多 API 可参考：<https://react-slick.neostack.com/docs/api>
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Carousel"></ComponentTokenTable>
 

components/cascader/index.zh-CN.md

@@ -123,6 +123,6 @@ interface Option {
 
 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Cascader"></ComponentTokenTable>

components/checkbox/index.zh-CN.md

@@ -73,6 +73,6 @@ interface Option {
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Checkbox"></ComponentTokenTable>

components/collapse/index.zh-CN.md

@@ -105,6 +105,6 @@ const items: CollapseProps['items'] = [
 | key | 对应 activeKey | string \| number | - |  |
 | showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Collapse"></ComponentTokenTable>

components/date-picker/index.zh-CN.md

@@ -58,6 +58,7 @@ demo:
 
 ```jsx
 import 'dayjs/locale/zh-cn';
+
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
 <DatePicker locale={locale} />;
@@ -66,7 +67,9 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
 ```jsx
 // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
 import dayjs from 'dayjs';
+
 import 'dayjs/locale/zh-cn';
+
 import locale from 'antd/locale/zh_CN';
 
 <ConfigProvider locale={locale}>
@@ -216,7 +219,7 @@ type GenericFn = (value: Dayjs) => string;
 export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="DatePicker"></ComponentTokenTable>
 
@@ -244,6 +247,7 @@ export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 
 ```js
 import dayjs from 'dayjs';
+
 import 'dayjs/locale/zh-cn';
 
 import updateLocale from 'dayjs/plugin/updateLocale';

components/descriptions/index.zh-CN.md

@@ -103,6 +103,6 @@ const items: DescriptionsProps['items'] = [
 
 > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Descriptions"></ComponentTokenTable>

components/divider/index.zh-CN.md

@@ -42,6 +42,6 @@ group:
 | style | 分割线样式对象 | CSSProperties | - |  |
 | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Divider"></ComponentTokenTable>

components/drawer/index.zh-CN.md

@@ -72,6 +72,6 @@ demo:
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
 | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Drawer"></ComponentTokenTable>

components/dropdown/index.zh-CN.md

@@ -80,7 +80,7 @@ demo:
 
 请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Dropdown"></ComponentTokenTable>
 

components/empty/index.zh-CN.md

@@ -66,6 +66,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA
   }
 </style>
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Empty"></ComponentTokenTable>

components/float-button/index.zh-CN.md

@@ -71,6 +71,6 @@ tag: New
 | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number            | 400          |      |
 | onClick          | 点击按钮的回调函数                 | () => void        | -            |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="FloatButton"></ComponentTokenTable>

components/form/index.zh-CN.md

@@ -524,7 +524,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | form     | 指定 Form 实例                        | FormInstance | 当前 context 中的 Form | 5.4.0 |
 | preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean      | false                  | 5.4.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Form"></ComponentTokenTable>
 

components/grid/index.zh-CN.md

@@ -87,6 +87,6 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 
 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Grid"></ComponentTokenTable>

components/icon/index.zh-CN.md

@@ -103,8 +103,8 @@ getTwoToneColor(); // #eb2f96
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import { createFromIconfontCN } from '@ant-design/icons';
+import ReactDOM from 'react-dom/client';
 
 const MyIcon = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
@@ -152,9 +152,10 @@ module.exports = {
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import Icon from '@ant-design/icons';
 import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径
+import ReactDOM from 'react-dom/client';
+
 // in create-react-app:
 // import { ReactComponent as MessageSvg } from 'path/to/message.svg';
 
@@ -171,6 +172,6 @@ ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
 | style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |      |
 | width     | `svg` 元素宽度          | string \| number | `1em`          |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Icon"></ComponentTokenTable>

components/image/index.zh-CN.md

@@ -162,6 +162,6 @@ type TransformAction =
 }
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Image"></ComponentTokenTable>

components/input-number/index.zh-CN.md

@@ -71,7 +71,7 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="InputNumber"></ComponentTokenTable>
 

components/input/index.zh-CN.md

@@ -141,7 +141,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
 | textarea | `textarea` 元素 | 5.4.0 |
 | count    | 文字计数元素    | 5.4.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Input"></ComponentTokenTable>
 

components/layout/index.zh-CN.md

@@ -131,6 +131,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
 }
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Layout"></ComponentTokenTable>

components/list/index.zh-CN.md

@@ -92,6 +92,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
 | description | 列表元素的描述内容 | ReactNode | -      |      |
 | title       | 列表元素的标题     | ReactNode | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="List"></ComponentTokenTable>

components/mentions/index.zh-CN.md

@@ -92,6 +92,6 @@ return (
 | className | css 类名       | string              | -      |
 | style     | 选项样式       | React.CSSProperties | -      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Mentions"></ComponentTokenTable>

components/menu/index.zh-CN.md

@@ -146,6 +146,6 @@ Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于
 </div>
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Menu"></ComponentTokenTable>

components/message/index.zh-CN.md

@@ -112,7 +112,7 @@ message.config({
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息距离顶部的位置 | number | 8 |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Message"></ComponentTokenTable>
 

components/modal/index.zh-CN.md

@@ -181,7 +181,7 @@ return <div>{contextHolder}</div>;
 const confirmed = await modal.confirm({ ... });
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Modal"></ComponentTokenTable>
 

components/notification/index.zh-CN.md

@@ -110,7 +110,7 @@ notification.config({
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Notification"></ComponentTokenTable>
 

components/pagination/index.zh-CN.md

@@ -60,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
 | onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - |  |
 | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Pagination"></ComponentTokenTable>

components/popconfirm/index.zh-CN.md

@@ -52,7 +52,7 @@ demo:
 
 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
 

components/popover/index.zh-CN.md

@@ -45,7 +45,7 @@ demo:
 
 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Popover"></ComponentTokenTable>
 

components/progress/index.zh-CN.md

@@ -77,6 +77,6 @@ demo:
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
 | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Progress"></ComponentTokenTable>

components/qr-code/index.zh-CN.md

@@ -53,7 +53,7 @@ tag: New
 | status | 二维码状态 | `active \| expired \| loading ` | `active` |
 | onRefresh | 点击"点击刷新"的回调 | `() => void` | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="QRCode"></ComponentTokenTable>
 

components/radio/index.zh-CN.md

@@ -74,6 +74,6 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Radio"></ComponentTokenTable>

components/rate/index.zh-CN.md

@@ -58,6 +58,6 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Rate"></ComponentTokenTable>

components/result/index.zh-CN.md

@@ -38,6 +38,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA
 | subTitle | subTitle 文字 | ReactNode | - |
 | title | title 文字 | ReactNode | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Result"></ComponentTokenTable>

components/segmented/index.zh-CN.md

@@ -50,6 +50,6 @@ demo:
 | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` |  |
 | value | 当前选中的值 | string \| number |  |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Segmented"></ComponentTokenTable>

components/select/index.zh-CN.md

@@ -136,7 +136,7 @@ demo:
 | key   | Key  | string                  | -      |      |
 | label | 组名 | string \| React.Element | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Select"></ComponentTokenTable>
 

components/skeleton/index.zh-CN.md

@@ -79,6 +79,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
 | active | 是否展示动画效果 | boolean                         | false  |
 | size   | 设置输入框的大小 | `large` \| `small` \| `default` | -      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Skeleton"></ComponentTokenTable>

components/slider/index.zh-CN.md

@@ -80,6 +80,6 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Slider"></ComponentTokenTable>

components/space/index.zh-CN.md

@@ -81,6 +81,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 | ---- | --------------------- | ----- |
 | item | 设置 `Space` 包裹的子组件 | 5.6.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Space"></ComponentTokenTable>

components/spin/index.zh-CN.md

@@ -45,6 +45,6 @@ demo:
 
   你可以自定义全局默认 Spin 的元素。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Spin"></ComponentTokenTable>

components/statistic/index.zh-CN.md

@@ -58,6 +58,6 @@ demo:
 | onFinish | 倒计时完成时触发 | () => void | - |  |
 | onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Statistic"></ComponentTokenTable>

components/steps/index.zh-CN.md

@@ -84,6 +84,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | subTitle | 子标题 | ReactNode | - |  |
 | title | 标题 | ReactNode | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Steps"></ComponentTokenTable>

components/switch/index.zh-CN.md

@@ -50,6 +50,6 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Switch"></ComponentTokenTable>

components/table/index.zh-CN.md

@@ -290,9 +290,9 @@ const columns = [
 ## 在 TypeScript 中使用
 
 ```tsx
+import React from 'react';
 import { Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import React from 'react';
 
 interface User {
   key: number;
@@ -329,7 +329,7 @@ export default Demo;
 
 TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Table"></ComponentTokenTable>
 

components/tabs/index.zh-CN.md

@@ -83,6 +83,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | label | 选项卡头显示文字 | ReactNode | - |
 | children | 选项卡头显示内容 | ReactNode | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tabs"></ComponentTokenTable>

components/tag/index.zh-CN.md

@@ -54,6 +54,6 @@ demo:
 | checked  | 设置标签的选中状态   | boolean           | false  |
 | onChange | 点击标签时触发的回调 | (checked) => void | -      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tag"></ComponentTokenTable>

components/time-picker/index.zh-CN.md

@@ -121,7 +121,7 @@ type RangeDisabledTime = (
 };
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="DatePicker"></ComponentTokenTable>
 

components/timeline/index.zh-CN.md

@@ -70,6 +70,6 @@ return (
 | children | 设置内容 | ReactNode | - |
 | position | 自定义节点位置 | `left` \| `right` | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Timeline"></ComponentTokenTable>

components/tooltip/index.zh-CN.md

@@ -63,7 +63,7 @@ demo:
 | zIndex | 设置 Tooltip 的 `z-index` | number | - |  |
 | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tooltip"></ComponentTokenTable>
 

components/tour/index.zh-CN.md

@@ -64,6 +64,6 @@ tag: New
 | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
 | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tour"></ComponentTokenTable>

components/transfer/index.zh-CN.md

@@ -97,7 +97,7 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数
 return <Transfer rowKey={(record) => record.uid} />;
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Transfer"></ComponentTokenTable>
 

components/tree-select/index.zh-CN.md

@@ -110,7 +110,7 @@ demo:
 | title           | 树节点显示的内容                                   | ReactNode | `---`  |      |
 | value           | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string    | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="TreeSelect"></ComponentTokenTable>
 

components/tree/index.zh-CN.md

@@ -126,7 +126,7 @@ demo:
 | --- | --- |
 | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Transfer"></ComponentTokenTable>
 

components/typography/index.zh-CN.md

@@ -156,7 +156,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
 | onExpand | 点击展开时的回调 | function(event) | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Typography"></ComponentTokenTable>
 

components/upload/index.zh-CN.md

@@ -123,7 +123,7 @@ demo:
 
 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Upload"></ComponentTokenTable>
 

components/watermark/index.zh-CN.md

@@ -54,7 +54,7 @@ tag: New
 | fontFamily | 字体类型 | string | sans-serif |  |
 | fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Watermark"></ComponentTokenTable>