📝doc: add design token table (#41717)

* ✨feat: add token * 📝doc: update lint * 📝doc: update doc
2 years ago · cef58664e8
102 changed files with 408 additions and 0 deletions
--- a/components/app/index.en-US.md
+++ b/components/app/index.en-US.md
@ -126,3 +126,7 @@ export default () => {
 | --- | --- | --- | --- | --- |
 | message | Global config for Message | [MessageConfig](/components/message/#messageconfig) | - | 5.3.0 |
 | notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | - | 5.3.0 |
+
+## Design Token
+
+<ComponentTokenTable component="App"></ComponentTokenTable>
--- a/components/app/index.zh-CN.md
+++ b/components/app/index.zh-CN.md
@ -128,3 +128,7 @@ 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
+
+<ComponentTokenTable component="App"></ComponentTokenTable>
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -72,6 +72,10 @@ The differences with Select are:
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |

+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ

 ### Why doesn't the text composition system work well with onSearch in controlled mode?
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -74,6 +74,10 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |

+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ

 ### 为何受控状态下使用 onSearch 无法输入中文？
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -52,3 +52,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
 | maxStyle | The style of excess avatar style | CSSProperties | - |  |
 | size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Avatar"></ComponentTokenTable>
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -57,3 +57,7 @@ group:
 | maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
 | maxStyle | 多余头像样式 | CSSProperties | - |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Avatar"></ComponentTokenTable>
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@ -57,3 +57,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 | color | Customize Ribbon color | string | - |  |
 | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` |  |
 | text | Content inside the Ribbon | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Badge"></ComponentTokenTable>
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -58,3 +58,7 @@ group: 数据展示
 | color | 自定义缎带的颜色 | string | - |  |
 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` |  |
 | text | 缎带中填入的内容 | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Badge"></ComponentTokenTable>
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -57,6 +57,10 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 | onPanelChange | Callback for when panel changes | function(date: Dayjs, mode: string) | - |  |
 | onSelect | Callback for when a date is selected | function(date: Dayjs） | - |  |

+## Design Token
+
+<ComponentTokenTable component="Calendar"></ComponentTokenTable>
+
 ## FAQ

 ### How to use Calendar with customize date library?
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@ -62,6 +62,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - |  |
 | onSelect | 点击选择日期回调 | function(date: Dayjs） | - |  |

+## Design Token
+
+<ComponentTokenTable component="Calendar"></ComponentTokenTable>
+
 ## FAQ

 ### 如何在 Calendar 中使用自定义日期库
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -71,3 +71,7 @@ A card can be used to display content related to a single subject. The content c
 | description | Description content           | ReactNode     | -       |         |
 | style       | The style object of container | CSSProperties | -       |         |
 | title       | Title content                 | ReactNode     | -       |         |
+
+## Design Token
+
+<ComponentTokenTable component="Card"></ComponentTokenTable>
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -72,3 +72,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA
 | description | 描述内容           | ReactNode     | -      |      |
 | style       | 定义容器类名的样式 | CSSProperties | -      |      |
 | title       | 标题内容           | ReactNode     | -      |      |
+
+## Design Token
+
+<ComponentTokenTable component="Card"></ComponentTokenTable>
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@ -46,6 +46,10 @@ A carousel component. Scales with its container.

 Find more APIs in react-slick [documentation](https://react-slick.neostack.com/docs/api).

+## Design Token
+
+<ComponentTokenTable component="Carousel"></ComponentTokenTable>
+
 ## FAQ

 ### How to add custom arrows?
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@ -47,6 +47,10 @@ demo:

 更多 API 可参考：<https://react-slick.neostack.com/docs/api>

+## Design Token
+
+<ComponentTokenTable component="Carousel"></ComponentTokenTable>
+
 ## FAQ

 ### 如何自定义箭头？
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -117,3 +117,7 @@ interface Option {
 | ------- | ------------ | ------- |
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |
+
+## Design Token
+
+<ComponentTokenTable component="Cascader"></ComponentTokenTable>
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -120,3 +120,7 @@ interface Option {
 | focus() | 获取焦点 |      |

 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。
+
+## Design Token
+
+<ComponentTokenTable component="Cascader"></ComponentTokenTable>
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@ -69,3 +69,7 @@ interface Option {
 | ------- | ------------ | ------- |
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |
+
+## Design Token
+
+<ComponentTokenTable component="Checkbox"></ComponentTokenTable>
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@ -70,3 +70,7 @@ interface Option {
 | ------- | -------- | ---- |
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
+
+## Design Token
+
+<ComponentTokenTable component="Checkbox"></ComponentTokenTable>
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -55,3 +55,7 @@ A content area which can be collapsed and expanded.
 | header | Title of the panel | ReactNode | - |  |
 | key | Unique key identifying the panel from among its siblings | string \| number | - |  |
 | showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true |  |
+
+## Design Token
+
+<ComponentTokenTable component="Collapse"></ComponentTokenTable>
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -56,3 +56,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAA
 | header | 面板头内容 | ReactNode | - |  |
 | key | 对应 activeKey | string \| number | - |  |
 | showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true |  |
+
+## Design Token
+
+<ComponentTokenTable component="Collapse"></ComponentTokenTable>
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -212,6 +212,10 @@ type GenericFn = (value: Dayjs) => string;
 export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```

+## Design Token
+
+<ComponentTokenTable component="DatePicker"></ComponentTokenTable>
+
 ## FAQ

 ### When set mode to DatePicker/RangePicker, cannot select year or month anymore?
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -213,6 +213,10 @@ type GenericFn = (value: Dayjs) => string;
 export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```

+## Design Token
+
+<ComponentTokenTable component="DatePicker"></ComponentTokenTable>
+
 ## FAQ

 ### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@ -50,3 +50,7 @@ Commonly displayed on the details page.
 | span         | The number of columns included | number        | 1       |         |

 > The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict.
+
+## Design Token
+
+<ComponentTokenTable component="Descriptions"></ComponentTokenTable>
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@ -51,3 +51,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAA
 | span         | 包含列的数量   | number        | 1      |       |

 > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
+
+## Design Token
+
+<ComponentTokenTable component="Descriptions"></ComponentTokenTable>
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -71,3 +71,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | width | Width of the Drawer dialog | string \| number | 378 |  |
 | zIndex | The `z-index` of the Drawer | number | 1000 |  |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Drawer"></ComponentTokenTable>
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -70,3 +70,7 @@ demo:
 | width | 宽度 | string \| number | 378 |  |
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
 | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Drawer"></ComponentTokenTable>
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@ -62,3 +62,7 @@ Empty state placeholder.
    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
  }
 </style>
+
+## Design Token
+
+<ComponentTokenTable component="Empty"></ComponentTokenTable>
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@ -63,3 +63,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA
    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
  }
 </style>
+
+## Design Token
+
+<ComponentTokenTable component="Empty"></ComponentTokenTable>
--- a/components/float-button/index.en-US.md
+++ b/components/float-button/index.en-US.md
@ -65,3 +65,7 @@ FloatButton. Available since `5.0.0`.
 | target | Specifies the scrollable area dom node | () => HTMLElement | () => window |  |
 | visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 |  |
 | onClick | A callback function, which can be executed when you click the button | () => void | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="FloatButton"></ComponentTokenTable>
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@ -66,3 +66,7 @@ demo:
 | target           | 设置需要监听其滚动事件的元素       | () => HTMLElement | () => window |      |
 | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number            | 400          |      |
 | onClick          | 点击按钮的回调函数                 | () => void        | -            |      |
+
+## Design Token
+
+<ComponentTokenTable component="FloatButton"></ComponentTokenTable>
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -481,6 +481,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | form | Form instance | FormInstance | Current form in context | 5.4.0 |
 | preserve | Whether to watch the field which has no matched `Form.Item` | boolean | false | 5.4.0 |

+## Design Token
+
+<ComponentTokenTable component="Form"></ComponentTokenTable>
+
 ## FAQ

 ### Custom validator not working
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -480,6 +480,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | form     | 指定 Form 实例                        | FormInstance | 当前 context 中的 Form | 5.4.0 |
 | preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean      | false                  | 5.4.0 |

+## Design Token
+
+<ComponentTokenTable component="Form"></ComponentTokenTable>
+
 ## FAQ

 ### 自定义 validator 没有效果
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@ -85,3 +85,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)).

 The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).
+
+## Design Token
+
+<ComponentTokenTable component="Grid"></ComponentTokenTable>
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -84,3 +84,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。

 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
+
+## Design Token
+
+<ComponentTokenTable component="Grid"></ComponentTokenTable>
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -177,3 +177,7 @@ The following properties are available for the component:
 | height | The height of the `svg` element | string \| number | `1em` |  |
 | style | The computed style of the `svg` element | CSSProperties | - |  |
 | width | The width of the `svg` element | string \| number | `1em` |  |
+
+## Design Token
+
+<ComponentTokenTable component="Icon"></ComponentTokenTable>
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -172,3 +172,7 @@ ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
 | height    | `svg` 元素高度          | string \| number | `1em`          |      |
 | style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |      |
 | width     | `svg` 元素宽度          | string \| number | `1em`          |      |
+
+## Design Token
+
+<ComponentTokenTable component="Icon"></ComponentTokenTable>
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@ -60,3 +60,7 @@ Previewable image.
 ```

 Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+
+## Design Token
+
+<ComponentTokenTable component="Image"></ComponentTokenTable>
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@ -62,3 +62,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 ```

 其他属性见 [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+
+## Design Token
+
+<ComponentTokenTable component="Image"></ComponentTokenTable>
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@ -68,6 +68,10 @@ When a numeric value needs to be provided.
 | blur()  | Remove focus |
 | focus() | Get focus    |

+## Design Token
+
+<ComponentTokenTable component="InputNumber"></ComponentTokenTable>
+
 ## Notes

 Per issues [#21158](https://github.com/ant-design/ant-design/issues/21158), [#17344](https://github.com/ant-design/ant-design/issues/17344), [#9421](https://github.com/ant-design/ant-design/issues/9421), and [documentation about inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs), it appears this community does not support native inclusion of the `type="number"` in the `<Input />` attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@ -71,6 +71,10 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |

+## Design Token
+
+<ComponentTokenTable component="InputNumber"></ComponentTokenTable>
+
 ## FAQ

 ### 为何受控模式下，`value` 可以超出 `min` 和 `max` 范围？
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@ -85,3 +85,7 @@ More about pagination, please check [`Pagination`](/components/pagination/).
 | avatar      | The avatar of list item      | ReactNode | -       |         |
 | description | The description of list item | ReactNode | -       |         |
 | title       | The title of list item       | ReactNode | -       |         |
+
+## Design Token
+
+<ComponentTokenTable component="List"></ComponentTokenTable>
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@ -88,3 +88,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
 | avatar      | 列表元素的图标     | ReactNode | -      |      |
 | description | 列表元素的描述内容 | ReactNode | -      |      |
 | title       | 列表元素的标题     | ReactNode | -      |      |
+
+## Design Token
+
+<ComponentTokenTable component="List"></ComponentTokenTable>
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@ -87,3 +87,7 @@ return (
 | disabled | Optional | boolean | - |
 | className | className | string | - |
 | style | The style of the option | React.CSSProperties | - |
+
+## Design Token
+
+<ComponentTokenTable component="Mentions"></ComponentTokenTable>
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@ -88,3 +88,7 @@ return (
 | disabled  | 是否可选       | boolean             | -      |
 | className | css 类名       | string              | -      |
 | style     | 选项样式       | React.CSSProperties | -      |
+
+## Design Token
+
+<ComponentTokenTable component="Mentions"></ComponentTokenTable>
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@ -108,6 +108,10 @@ message.config({
 | rtl | Whether to enable RTL mode | boolean | false |  |
 | top | Distance from top | number | 8 |  |

+## Design Token
+
+<ComponentTokenTable component="Message"></ComponentTokenTable>
+
 ## FAQ

 ### Why I can not access context, redux, ConfigProvider `locale/prefixCls/theme` in message?
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@ -109,6 +109,10 @@ message.config({
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息距离顶部的位置 | number | 8 |  |

+## Design Token
+
+<ComponentTokenTable component="Message"></ComponentTokenTable>
+
 ## FAQ

 ### 为什么 message 不能获取 context、redux 的内容和 ConfigProvider 的 `locale/prefixCls/theme` 等配置？
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@ -168,6 +168,10 @@ React.useEffect(() => {
 return <div>{contextHolder}</div>;
 ```

+## Design Token
+
+<ComponentTokenTable component="Modal"></ComponentTokenTable>
+
 ## FAQ

 ### Why content not update when Modal closed?
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -169,6 +169,10 @@ React.useEffect(() => {
 return <div>{contextHolder}</div>;
 ```

+## Design Token
+
+<ComponentTokenTable component="Modal"></ComponentTokenTable>
+
 ## FAQ

 ### 为什么 Modal 关闭时，内容不会更新？
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@ -95,6 +95,10 @@ notification.config({
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |  |
 | maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |

+## Design Token
+
+<ComponentTokenTable component="Notification"></ComponentTokenTable>
+
 ## FAQ

 ### Why I can not access context, redux, ConfigProvider `locale/prefixCls/theme` in notification?
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@ -96,6 +96,10 @@ notification.config({
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |

+## Design Token
+
+<ComponentTokenTable component="Notification"></ComponentTokenTable>
+
 ## FAQ

 ### 为什么 notification 不能获取 context、redux 的内容和 ConfigProvider 的 `locale/prefixCls/theme` 等配置？
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@ -48,6 +48,10 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha

 Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.

+## Design Token
+
+<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
+
 ## Note

 Please ensure that the child node of `Popconfirm` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@ -49,6 +49,10 @@ demo:

 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。

+## Design Token
+
+<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
+
 ## 注意

 请确保 `Popconfirm` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@ -40,3 +40,7 @@ Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
 ## Note

 Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
+
+## Design Token
+
+<ComponentTokenTable component="Popover"></ComponentTokenTable>
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@ -41,3 +41,7 @@ demo:
 ## 注意

 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
+
+## Design Token
+
+<ComponentTokenTable component="Popover"></ComponentTokenTable>
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@ -73,3 +73,7 @@ Properties that shared by all types.
 | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
 | gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` |
 | strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
+
+## Design Token
+
+<ComponentTokenTable component="Progress"></ComponentTokenTable>
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@ -74,3 +74,7 @@ demo:
 | gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
 | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
+
+## Design Token
+
+<ComponentTokenTable component="Progress"></ComponentTokenTable>
--- a/components/qrcode/index.en-US.md
+++ b/components/qrcode/index.en-US.md
@ -46,6 +46,10 @@ Used when the text needs to be converted into a QR Code.
 | status | QRCode status | `active \| expired \| loading ` | `active` |
 | onRefresh | callback | `() => void` | - |

+## Design Token
+
+<ComponentTokenTable component="QRCode"></ComponentTokenTable>
+
 ## FAQ

 ### About QRCode ErrorLevel
--- a/components/qrcode/index.zh-CN.md
+++ b/components/qrcode/index.zh-CN.md
@ -47,6 +47,10 @@ group:
 | status | 二维码状态 | `active \| expired \| loading ` | `active` |
 | onRefresh | 点击"点击刷新"的回调 | `() => void` | - |

+## Design Token
+
+<ComponentTokenTable component="QRCode"></ComponentTokenTable>
+
 ## FAQ

 ### 关于二维码纠错等级
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@ -67,3 +67,7 @@ Radio group can wrap a group of `Radio`。
 | ------- | ------------ |
 | blur()  | Remove focus |
 | focus() | Get focus    |
+
+## Design Token
+
+<ComponentTokenTable component="Radio"></ComponentTokenTable>
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@ -70,3 +70,7 @@ demo:
 | ------- | -------- |
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
+
+## Design Token
+
+<ComponentTokenTable component="Radio"></ComponentTokenTable>
--- a/components/rate/index.en-US.md
+++ b/components/rate/index.en-US.md
@ -53,3 +53,7 @@ Rate component.
 | ------- | ------------ |
 | blur()  | Remove focus |
 | focus() | Get focus    |
+
+## Design Token
+
+<ComponentTokenTable component="Rate"></ComponentTokenTable>
--- a/components/rate/index.zh-CN.md
+++ b/components/rate/index.zh-CN.md
@ -54,3 +54,7 @@ demo:
 | ------- | -------- |
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
+
+## Design Token
+
+<ComponentTokenTable component="Rate"></ComponentTokenTable>
--- a/components/result/index.en-US.md
+++ b/components/result/index.en-US.md
@ -33,3 +33,7 @@ Use when important operations need to inform the user to process the results and
 | status | Result status, decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
 | subTitle | The subTitle | ReactNode | - |
 | title | The title | ReactNode | - |
+
+## Design Token
+
+<ComponentTokenTable component="Result"></ComponentTokenTable>
--- a/components/result/index.zh-CN.md
+++ b/components/result/index.zh-CN.md
@ -34,3 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA
 | status | 结果的状态，决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
 | subTitle | subTitle 文字 | ReactNode | - |
 | title | title 文字 | ReactNode | - |
+
+## Design Token
+
+<ComponentTokenTable component="Result"></ComponentTokenTable>
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@ -43,3 +43,7 @@ Segmented Controls. This component is available since `antd@4.20.0`.
 | options | Set children optional | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] |  |
 | size | The size of the Segmented. | `large` \| `middle` \| `small` | `middle` |  |
 | value | Currently selected value | string \| number |  |  |
+
+## Design Token
+
+<ComponentTokenTable component="Segmented"></ComponentTokenTable>
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@ -46,3 +46,7 @@ demo:
 | options | 数据化配置选项内容 | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] |  |
 | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` |  |
 | value | 当前选中的值 | string \| number |  |  |
+
+## Design Token
+
+<ComponentTokenTable component="Segmented"></ComponentTokenTable>
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@ -74,3 +74,7 @@ Provide a placeholder while you wait for content to load, or to visualize conten
 | -------- | --------------------- | ------------------------------- | ------- |
 | active   | Show animation effect | boolean                         | false   |
 | size     | Set the size of input | `large` \| `small` \| `default` | -       |
+
+## Design Token
+
+<ComponentTokenTable component="Skeleton"></ComponentTokenTable>
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@ -75,3 +75,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
 | ------ | ---------------- | ------------------------------- | ------ |
 | active | 是否展示动画效果 | boolean                         | false  |
 | size   | 设置输入框的大小 | `large` \| `small` \| `default` | -      |
+
+## Design Token
+
+<ComponentTokenTable component="Skeleton"></ComponentTokenTable>
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@ -74,3 +74,7 @@ To input a value in a range.
 | ------- | ------------ | ------- |
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |
+
+## Design Token
+
+<ComponentTokenTable component="Slider"></ComponentTokenTable>
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@ -72,3 +72,7 @@ demo:
 | ------- | -------- | ---- |
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
+
+## Design Token
+
+<ComponentTokenTable component="Slider"></ComponentTokenTable>
--- a/components/space/index.en-US.md
+++ b/components/space/index.en-US.md
@ -63,3 +63,7 @@ Use Space.Compact when child form components are compactly connected and the bor
 | block | Option to fit width to its parent\'s width | boolean | false | 4.24.0 |
 | direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
 | size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Space"></ComponentTokenTable>
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@ -71,3 +71,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 | block | 将宽度调整为父元素宽度的选项 | boolean | false | 4.24.0 |
 | direction | 指定排列方向 | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
 | size | 子组件大小 | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Space"></ComponentTokenTable>
--- a/components/spin/index.en-US.md
+++ b/components/spin/index.en-US.md
@ -41,3 +41,7 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 - `Spin.setDefaultIndicator(indicator: ReactNode)`

  You can define default spin element globally.
+
+## Design Token
+
+<ComponentTokenTable component="Spin"></ComponentTokenTable>
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@ -42,3 +42,7 @@ demo:
 - `Spin.setDefaultIndicator(indicator: ReactNode)`

  你可以自定义全局默认 Spin 的元素。
+
+## Design Token
+
+<ComponentTokenTable component="Spin"></ComponentTokenTable>
--- a/components/statistic/index.en-US.md
+++ b/components/statistic/index.en-US.md
@ -53,3 +53,7 @@ Display statistic number.
 | valueStyle | Set value section style | CSSProperties | - |  |
 | onFinish | Trigger when time's up | () => void | - |  |
 | onChange | Trigger when time's changing | (value: number) => void | - | 4.16.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Statistic"></ComponentTokenTable>
--- a/components/statistic/index.zh-CN.md
+++ b/components/statistic/index.zh-CN.md
@ -54,3 +54,7 @@ demo:
 | valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
 | onFinish | 倒计时完成时触发 | () => void | - |  |
 | onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Statistic"></ComponentTokenTable>
--- a/components/switch/index.en-US.md
+++ b/components/switch/index.en-US.md
@ -46,3 +46,7 @@ Switching Selector.
 | ------- | ------------ |
 | blur()  | Remove focus |
 | focus() | Get focus    |
+
+## Design Token
+
+<ComponentTokenTable component="Switch"></ComponentTokenTable>
--- a/components/switch/index.zh-CN.md
+++ b/components/switch/index.zh-CN.md
@ -47,3 +47,7 @@ demo:
 | ------- | -------- |
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
+
+## Design Token
+
+<ComponentTokenTable component="Switch"></ComponentTokenTable>
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -322,6 +322,10 @@ export default Demo;

 Here is the [CodeSandbox for TypeScript](https://codesandbox.io/s/serene-platform-0jo5t).

+## Design Token
+
+<ComponentTokenTable component="Table"></ComponentTokenTable>
+
 ## Note

 According to the [React documentation](https://facebook.github.io/react/docs/lists-and-keys.html#keys), every child in an array should be assigned a unique key. The values inside the Table's `dataSource` and `columns` should follow this rule. By default, `dataSource[i].key` will be treated as the key value for `dataSource`.
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -325,6 +325,10 @@ export default Demo;

 TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。

+## Design Token
+
+<ComponentTokenTable component="Table"></ComponentTokenTable>
+
 ## 注意

 按照 [React 的规范](https://zh-hans.reactjs.org/docs/lists-and-keys.html#keys)，所有的数组组件必须绑定 `key`。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -77,3 +77,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
 | key | TabPane's key | string | - |
 | label | TabPane's head display text | ReactNode | - |
 | children | TabPane's head display content | ReactNode | - |
+
+## Design Token
+
+<ComponentTokenTable component="Tabs"></ComponentTokenTable>
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -79,3 +79,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | key         | 对应 activeKey                                  | string    | -      |
 | label       | 选项卡头显示文字                                | ReactNode | -      |
 | children    | 选项卡头显示内容                                | ReactNode | -      |
+
+## Design Token
+
+<ComponentTokenTable component="Tabs"></ComponentTokenTable>
--- a/components/tag/index.en-US.md
+++ b/components/tag/index.en-US.md
@ -50,3 +50,7 @@ Tag for categorizing or markup.
 | -------- | ----------------------------------------------- | ----------------- | ------- |
 | checked  | Checked status of Tag                           | boolean           | false   |
 | onChange | Callback executed when Tag is checked/unchecked | (checked) => void | -       |
+
+## Design Token
+
+<ComponentTokenTable component="Tag"></ComponentTokenTable>
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@ -50,3 +50,7 @@ demo:
 | -------- | -------------------- | ----------------- | ------ |
 | checked  | 设置标签的选中状态   | boolean           | false  |
 | onChange | 点击标签时触发的回调 | (checked) => void | -      |
+
+## Design Token
+
+<ComponentTokenTable component="Tag"></ComponentTokenTable>
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@ -118,6 +118,10 @@ type RangeDisabledTime = (
 };
 ```

+## Design Token
+
+<ComponentTokenTable component="DatePicker"></ComponentTokenTable>
+
 ## FAQ

 - [How to use TimePicker with customize date library like dayjs](/docs/react/use-custom-date-library#timepicker)
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@ -117,6 +117,10 @@ type RangeDisabledTime = (
 };
 ```

+## Design Token
+
+<ComponentTokenTable component="DatePicker"></ComponentTokenTable>
+
 ## FAQ

 - [如何在 TimePicker 中使用自定义日期库（如 Moment.js ）](/docs/react/use-custom-date-library#timepicker)
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@ -65,3 +65,7 @@ Node of timeline.
 | label | Set the label | ReactNode | - |
 | children | Set the content | ReactNode | - |
 | position | Customize node position | `left` \| `right` | - |
+
+## Design Token
+
+<ComponentTokenTable component="Timeline"></ComponentTokenTable>
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@ -66,3 +66,7 @@ return (
 | label | 设置标签 | ReactNode | - |
 | children | 设置内容 | ReactNode | - |
 | position | 自定义节点位置 | `left` \| `right` | - |
+
+## Design Token
+
+<ComponentTokenTable component="Timeline"></ComponentTokenTable>
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@ -58,6 +58,10 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 | zIndex | Config `z-index` of Tooltip | number | - |  |
 | onOpenChange | Callback executed when visibility of the tooltip card is changed | (open: boolean) => void | - | 4.23.0 |

+## Design Token
+
+<ComponentTokenTable component="Tooltip"></ComponentTokenTable>
+
 ## Note

 Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@ -60,6 +60,10 @@ demo:
 | zIndex | 设置 Tooltip 的 `z-index` | number | - |  |
 | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |

+## Design Token
+
+<ComponentTokenTable component="Tooltip"></ComponentTokenTable>
+
 ## 注意

 请确保 `Tooltip` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
--- a/components/tour/index.en-US.md
+++ b/components/tour/index.en-US.md
@ -58,3 +58,7 @@ Use when you want to guide users through a product.
 | nextButtonProps | Properties of the Next button | `{ children: ReactNode; onClick: Function }` | - |  |
 | prevButtonProps | Properties of the previous button | `{ children: ReactNode; onClick: Function }` | - |  |
 | scrollIntoViewOptions | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Tour"></ComponentTokenTable>
--- a/components/tour/index.zh-CN.md
+++ b/components/tour/index.zh-CN.md
@ -60,3 +60,7 @@ demo:
 | nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
 | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
 | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Tour"></ComponentTokenTable>
--- a/components/transfer/index.en-US.md
+++ b/components/transfer/index.en-US.md
@ -90,6 +90,10 @@ If there's no `key` in your data, you should use `rowKey` to specify the key tha
 return <Transfer rowKey={(record) => record.uid} />;
 ```

+## Design Token
+
+<ComponentTokenTable component="Transfer"></ComponentTokenTable>
+
 ## FAQ

 ### How to support fetch and present data from a remote server in Transfer column.
--- a/components/transfer/index.zh-CN.md
+++ b/components/transfer/index.zh-CN.md
@ -93,6 +93,10 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数
 return <Transfer rowKey={(record) => record.uid} />;
 ```

+## Design Token
+
+<ComponentTokenTable component="Transfer"></ComponentTokenTable>
+
 ## FAQ

 ### 怎样让 Transfer 穿梭框列表支持异步数据加载
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@ -108,6 +108,10 @@ Tree selection control.
 | title | Content showed on the treeNodes | ReactNode | `---` |  |
 | value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - |  |

+## Design Token
+
+<ComponentTokenTable component="TreeSelect"></ComponentTokenTable>
+
 ## FAQ

 ### How to get parent node in onChange?
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@ -109,6 +109,10 @@ demo:
 | title           | 树节点显示的内容                                   | ReactNode | `---`  |      |
 | value           | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string    | -      |      |

+## Design Token
+
+<ComponentTokenTable component="TreeSelect"></ComponentTokenTable>
+
 ## FAQ

 ### onChange 时如何获得父节点信息？
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@ -123,6 +123,10 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t
 | --- | --- |
 | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | Scroll to key item in virtual scroll |

+## Design Token
+
+<ComponentTokenTable component="Transfer"></ComponentTokenTable>
+
 ## FAQ

 ### How to hide file icon when use showLine?
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@ -125,6 +125,10 @@ demo:
 | --- | --- |
 | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 |

+## Design Token
+
+<ComponentTokenTable component="Transfer"></ComponentTokenTable>
+
 ## FAQ

 ### 在 showLine 时，如何隐藏子节点图标？
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@ -120,6 +120,10 @@ When uploading state change, it returns:

 3. `event` response from server, including uploading progress, supported by advanced browsers.

+## Design Token
+
+<ComponentTokenTable component="Upload"></ComponentTokenTable>
+
 ## FAQ

 ### How do I implement upload server side?
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@ -120,6 +120,10 @@ demo:

 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

+## Design Token
+
+<ComponentTokenTable component="Upload"></ComponentTokenTable>
+
 ## FAQ

 ### 服务端如何实现？