docs: Button page show related token (#41176)

* docs: btn token

* docs: btn all tokens

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

@@ -0,0 +1,95 @@
+/* eslint import/no-unresolved: 0 */
+import { ConfigProvider, Table } from 'antd';
+import { getDesignToken } from 'antd-token-previewer';
+import tokenMeta from 'antd/es/version/token-meta.json';
+import tokenData from 'antd/es/version/token.json';
+import React from 'react';
+import useLocale from '../../../hooks/useLocale';
+import useSiteToken from '../../../hooks/useSiteToken';
+import { useColumns } from '../TokenTable';
+
+const defaultToken = getDesignToken();
+
+const locales = {
+  cn: {
+    token: 'Token 名称',
+    description: '描述',
+    type: '类型',
+    value: '默认值',
+  },
+  en: {
+    token: 'Token Name',
+    description: 'Description',
+    type: 'Type',
+    value: 'Default Value',
+  },
+};
+
+interface SubTokenTableProps {
+  defaultOpen?: boolean;
+  title: string;
+  tokens: string[];
+}
+
+function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) {
+  const [, lang] = useLocale(locales);
+  const { token } = useSiteToken();
+  const columns = useColumns();
+
+  if (!tokens.length) {
+    return null;
+  }
+
+  const data = tokens.map((name) => {
+    const meta = tokenMeta[name];
+
+    return {
+      name,
+      desc: lang === 'cn' ? meta.desc : meta.descEn,
+      type: meta.type,
+      value: (defaultToken as any)[name],
+    };
+  });
+
+  return (
+    // Reuse `.markdown` style
+    <details className="markdown" open={defaultOpen}>
+      <summary>
+        <h3 style={{ display: 'inline' }}>{title}</h3>
+      </summary>
+      <ConfigProvider
+        theme={{
+          token: {
+            borderRadius: 0,
+          },
+        }}
+      >
+        <Table
+          size="middle"
+          columns={columns}
+          bordered
+          dataSource={data}
+          style={{ marginBottom: token.margin }}
+          pagination={false}
+        />
+      </ConfigProvider>
+    </details>
+  );
+}
+
+export interface ComponentTokenTableProps {
+  component: string;
+}
+
+function ComponentTokenTable({ component }: ComponentTokenTableProps) {
+  const { global: globalTokens = [], component: componentTokens = [] } = tokenData[component] || {};
+
+  return (
+    <>
+      <SubTokenTable title="Component Token" tokens={componentTokens} defaultOpen />
+      <SubTokenTable title="Global Token" tokens={globalTokens} />
+    </>
+  );
+}
+
+export default React.memo(ComponentTokenTable);

.dumi/theme/builtins/TokenTable/index.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
-import React, { useMemo } from 'react';
+import * as React from 'react';
 /* eslint import/no-unresolved: 0 */
-import tokenMeta from 'antd/es/version/token-meta.json';
-import { getDesignToken } from 'antd-token-previewer';
-import { Table } from 'antd';
-import type { TableProps } from 'antd';
 import { css } from '@emotion/react';
+import type { TableProps } from 'antd';
+import { Table } from 'antd';
+import { getDesignToken } from 'antd-token-previewer';
+import tokenMeta from 'antd/es/version/token-meta.json';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import ColorChunk from '../ColorChunk';
@@ -55,10 +55,11 @@ const useStyle = () => {
   };
 };
 
-const TokenTable: FC<TokenTableProps> = ({ type }) => {
+export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefined> {
+  const [locale] = useLocale(locales);
   const styles = useStyle();
-  const [locale, lang] = useLocale(locales);
+
-  const columns: Exclude<TableProps<TokenData>['columns'], undefined> = [
+  return [
     {
       title: locale.token,
       key: 'name',
@@ -89,8 +90,13 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
       },
     },
   ];
+}
 
-  const data = useMemo<TokenData[]>(
+const TokenTable: FC<TokenTableProps> = ({ type }) => {
+  const [, lang] = useLocale(locales);
+  const columns = useColumns();
+
+  const data = React.useMemo<TokenData[]>(
     () =>
       Object.entries(tokenMeta)
         .filter(([, meta]) => meta.source === type)

components/button/index.en-US.md

@@ -70,6 +70,10 @@ Different button styles can be generated by setting Button properties. The recom
 
 It accepts all props which native buttons support.
 
+## Design Token
+
+<ComponentTokenTable component="Button"></ComponentTokenTable>
+
 ## FAQ
 
 ### How to remove space between 2 chinese characters?

components/button/index.zh-CN.md

@@ -75,6 +75,10 @@ group:
 
 支持原生 button 的其他所有属性。
 
+## Design Token
+
+<ComponentTokenTable component="Button"></ComponentTokenTable>
+
 ## FAQ
 
 ### 如何移除两个汉字之间的空格？

components/theme/interface/alias.ts

@@ -12,8 +12,20 @@ export interface AliasToken extends MapToken {
   colorFillAlter: string;
   colorFillContent: string;
 
+  /**
+   * @desc 容器禁用态下的背景色
+   * @descEN Disabled container background color.
+   */
   colorBgContainerDisabled: string;
+  /**
+   * @desc 文本态悬浮态背景色
+   * @descEN Hover text background color.
+   */
   colorBgTextHover: string;
+  /**
+   * @desc 文本态激活态背景色
+   * @descEN Active text background color.
+   */
   colorBgTextActive: string;
 
   // Border
@@ -26,10 +38,18 @@ export interface AliasToken extends MapToken {
 
   // Text
   colorTextPlaceholder: string;
+  /**
+   * @desc 禁用字体颜色
+   * @descEN Disabled text color
+   */
   colorTextDisabled: string;
   colorTextHeading: string;
   colorTextLabel: string;
   colorTextDescription: string;
+  /**
+   * @desc 固定文本高亮颜色，用于带背景色的文本如 Primary Button 组件
+   * @descEN Fixed text highlight color, used for text with background color such as Primary Button components
+   */
   colorTextLightSolid: string;
 
   /** Weak action. Such as `allowClear` or Alert close button */
@@ -37,14 +57,34 @@ export interface AliasToken extends MapToken {
   /** Weak action hover color. Such as `allowClear` or Alert close button */
   colorIconHover: string;
 
+  /**
+   * @desc 超链接颜色
+   * @descEN hyperlink color
+   */
   colorLink: string;
+  /**
+   * @desc 超链接悬浮颜色
+   * @descEN hyperlink hover color
+   */
   colorLinkHover: string;
+  /**
+   * @desc 超链接激活颜色
+   * @descEN hyperlink active color
+   */
   colorLinkActive: string;
 
   colorHighlight: string;
 
+  /**
+   * @desc 输入组件的 Outline 颜色
+   * @descEN Input component outline color
+   */
   controlOutline: string;
   colorWarningOutline: string;
+  /**
+   * @desc 输入组件错误状态下的 Outline 颜色
+   * @descEN Input component error outline color
+   */
   colorErrorOutline: string;
 
   // Font
@@ -55,6 +95,10 @@ export interface AliasToken extends MapToken {
   fontWeightStrong: number;
 
   // Control
+  /**
+   * @desc 输入组件的 Outline 尺寸
+   * @descEN Input component outline size
+   */
   controlOutlineWidth: number;
   controlItemBgHover: string; // Note. It also is a color
   controlItemBgActive: string; // Note. It also is a color
@@ -63,36 +107,140 @@ export interface AliasToken extends MapToken {
   controlItemBgActiveDisabled: string; // Note. It also is a color
 
   // Line
+  /**
+   * @desc 聚焦时 Outline 尺寸
+   * @descEN Outline size when focused
+   */
   lineWidthFocus: number;
 
   // Padding
+  /**
+   * @desc 内间距尺寸
+   * @descEN Padding size
+   */
   paddingXXS: number;
+  /**
+   * @desc 内间距尺寸
+   * @descEN Padding size
+   */
   paddingXS: number;
+  /**
+   * @desc 内间距尺寸
+   * @descEN Padding size
+   */
   paddingSM: number;
+  /**
+   * @desc 内间距尺寸
+   * @descEN Padding size
+   */
   padding: number;
+  /**
+   * @desc 内间距尺寸
+   * @descEN Padding size
+   */
   paddingMD: number;
+  /**
+   * @desc 内间距尺寸
+   * @descEN Padding size
+   */
   paddingLG: number;
+  /**
+   * @desc 内间距尺寸
+   * @descEN Padding size
+   */
   paddingXL: number;
 
   // Padding Content
+  /**
+   * @nameZH 内容水平内间距
+   * @nameEN Content horizontal padding
+   * @desc 控制内容元素水平内间距
+   * @descEN Control the horizontal padding of content element.
+   */
   paddingContentHorizontalLG: number;
+  /**
+   * @nameZH 内容水平内间距
+   * @nameEN Content horizontal padding
+   * @desc 控制内容元素水平内间距
+   * @descEN Control the horizontal padding of content element.
+   */
   paddingContentHorizontal: number;
+  /**
+   * @nameZH 内容水平内间距
+   * @nameEN Content horizontal padding
+   * @desc 控制内容元素水平内间距
+   * @descEN Control the horizontal padding of content element.
+   */
   paddingContentHorizontalSM: number;
+  /**
+   * @nameZH 内容垂直内间距
+   * @nameEN Content vertical padding
+   * @desc 控制内容元素垂直内间距。
+   * @descEN Control the vertical padding of content element.
+   */
   paddingContentVerticalLG: number;
+  /**
+   * @nameZH 内容垂直内间距
+   * @nameEN Content vertical padding
+   * @desc 控制内容元素垂直内间距。
+   * @descEN Control the vertical padding of content element.
+   */
   paddingContentVertical: number;
+  /**
+   * @nameZH 内容垂直内间距
+   * @nameEN Content vertical padding
+   * @desc 控制内容元素垂直内间距。
+   * @descEN Control the vertical padding of content element.
+   */
   paddingContentVerticalSM: number;
 
   // Margin
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   marginXXS: number;
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   marginXS: number;
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   marginSM: number;
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   margin: number;
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   marginMD: number;
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   marginLG: number;
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   marginXL: number;
+  /**
+   * @desc 外间距
+   * @descEN Margin size.
+   */
   marginXXL: number;
 
   // =============== Legacy: should be remove ===============
+  /**
+   * @desc 加载状态透明度
+   * @descEN Loading opacity
+   */
   opacityLoading: number;
 
   boxShadow: string;
@@ -125,7 +273,11 @@ export interface AliasToken extends MapToken {
   screenXXL: number;
   screenXXLMin: number;
 
-  /** Used for DefaultButton, Switch which has default outline */
+  /**
+   * Used for DefaultButton, Switch which has default outline
+   * @desc 默认样式的 Outline 颜色
+   * @descEN Default style outline color.
+   */
   controlTmpOutline: string;
 
   // FIXME: component box-shadow, should be removed

components/theme/interface/maps/colors.ts

@@ -14,6 +14,7 @@ export interface ColorNeutralMapToken {
   /**
    * @nameZH 一级文本色
    * @desc 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。
+   * @descEN Default text color which comply with W3C standards, and this color is also the darkest neutral color.
    */
   colorText: string;
 
@@ -90,6 +91,7 @@ export interface ColorNeutralMapToken {
   /**
    * @nameZH 组件容器背景色
    * @desc 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。
+   * @descEN Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.
    */
   colorBgContainer: string;
 
@@ -131,25 +133,29 @@ interface ColorPrimaryMapToken {
 
   /**
    * @nameZH 主色描边色
-   * @desc 主色梯度下的描边用色，用在 Slider 组件的描边上
+   * @desc 主色梯度下的描边用色，用在 Slider 等组件的描边上
+   * @descEN The stroke color under the main color gradient, used on the stroke of components such as Slider
    */
   colorPrimaryBorder: string; // 3
 
   /**
    * @nameZH 主色描边色悬浮态
    * @desc 主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用
+   * @descEN The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button
    */
   colorPrimaryBorderHover: string; // 4
 
   /**
    * @nameZH 主色悬浮态
-   * @desc 主色梯度下的悬浮态，使用频率很高
+   * @desc 主色梯度下的悬浮态
+   * @descEN Suspended state under the main color gradient
    */
   colorPrimaryHover: string; // 5
 
   /**
    * @nameZH 主色激活态
    * @desc 主色梯度下的深色激活态
+   * @descEN Dark active states under dominant color gradient
    */
   colorPrimaryActive: string; // 7
 
@@ -356,6 +362,8 @@ interface ColorInfoMapToken {
 interface ColorErrorMapToken {
   /**
    * @nameZH 错误色的浅色背景颜色
+   * @desc 错误色的浅色背景颜色
+   * @descEN Error background color
    */
   colorErrorBg: string; // 1
 
@@ -371,11 +379,15 @@ interface ColorErrorMapToken {
 
   /**
    * @nameZH 错误色的描边色悬浮态
+   * @desc 错误色的描边色悬浮态
+   * @descEN The stroke color of the wrong color is suspended
    */
   colorErrorBorderHover: string; // 4
 
   /**
    * @nameZH 错误色的深色悬浮态
+   * @desc 错误色的深色悬浮态
+   * @descEN Error hover color
    */
   colorErrorHover: string; // 5
 
@@ -386,6 +398,8 @@ interface ColorErrorMapToken {
 
   /**
    * @nameZH 错误色的深色激活态
+   * @desc 错误色的深色激活态
+   * @descEN Error active color
    */
   colorErrorActive: string; // 7
 

components/theme/interface/maps/font.ts

@@ -1,8 +1,24 @@
 export interface FontMapToken {
   // Font Size
+  /**
+   * @desc 小号字体大小
+   * @descEN Small font size
+   */
   fontSizeSM: number;
+  /**
+   * @desc 标准字体大小
+   * @descEN Standard font size
+   */
   fontSize: number;
+  /**
+   * @desc 大号字体大小
+   * @descEN Large font size
+   */
   fontSizeLG: number;
+  /**
+   * @desc 超大号字体大小
+   * @descEN Super large font size
+   */
   fontSizeXL: number;
 
   /**
@@ -37,8 +53,20 @@ export interface FontMapToken {
   fontSizeHeading5: number;
 
   // LineHeight
+  /**
+   * @desc 文本行高
+   * @descEN Line height of text.
+   */
   lineHeight: number;
+  /**
+   * @desc 大型文本行高
+   * @descEN Line height of large text.
+   */
   lineHeightLG: number;
+  /**
+   * @desc 小型文本行高
+   * @descEN Line height of small text.
+   */
   lineHeightSM: number;
 
   lineHeightHeading1: number;

components/theme/interface/maps/index.ts

@@ -1,19 +1,31 @@
 import type { ColorPalettes, LegacyColorPalettes } from '../presetColors';
 import type { SeedToken } from '../seeds';
-import type { SizeMapToken, HeightMapToken } from './size';
 import type { ColorMapToken } from './colors';
-import type { StyleMapToken } from './style';
 import type { FontMapToken } from './font';
+import type { HeightMapToken, SizeMapToken } from './size';
+import type { StyleMapToken } from './style';
 
 export * from './colors';
-export * from './style';
-export * from './size';
 export * from './font';
+export * from './size';
+export * from './style';
 
 export interface CommonMapToken extends StyleMapToken {
   // Motion
+  /**
+   * @desc 动效播放速度，快速。用于小型元素动画交互
+   * @descEN Motion speed, fast speed. Used for small element animation interaction.
+   */
   motionDurationFast: string;
+  /**
+   * @desc 动效播放速度，中速。用于中型元素动画交互
+   * @descEN Motion speed, medium speed. Used for medium element animation interaction.
+   */
   motionDurationMid: string;
+  /**
+   * @desc 动效播放速度，慢速。用于大型元素如面板动画交互
+   * @descEN Motion speed, slow speed. Used for large element animation interaction.
+   */
   motionDurationSlow: string;
 }
 

components/theme/interface/maps/size.ts

@@ -51,18 +51,24 @@ export interface HeightMapToken {
   /**
    * @nameZH 更小的组件高度
    * @nameEN XS component height
+   * @desc 更小的组件高度
+   * @descEN XS component height
    */
   controlHeightXS: number;
 
   /**
    * @nameZH 较小的组件高度
    * @nameEN SM component height
+   * @desc 较小的组件高度
+   * @descEN SM component height
    */
   controlHeightSM: number;
 
   /**
    * @nameZH 较高的组件高度
    * @nameEN LG component height
+   * @desc 较高的组件高度
+   * @descEN LG component height
    */
   controlHeightLG: number;
 }

components/theme/interface/seeds.ts

@@ -83,6 +83,7 @@ export interface SeedToken extends PresetColorType {
    * @nameZH 默认字号
    * @nameEN Default Font Size
    * @desc 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。
+   * @descEN The most widely used font size in the design system, from which the text gradient will be derived.
    * @default 14
    */
   fontSize: number;
@@ -191,24 +192,57 @@ export interface SeedToken extends PresetColorType {
   motionUnit: number;
 
   /**
-   * @nameZH 动画基础时长
+   * @nameZH 动画基础时长。
+   * @nameEN Animation Base Duration.
    */
   motionBase: number;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseOutCirc: string;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseInOutCirc: string;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseInOut: string;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseOutBack: string;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseInBack: string;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseInQuint: string;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseOutQuint: string;
 
+  /**
+   * @desc 预设动效曲率
+   * @descEN Preset motion curve.
+   */
   motionEaseOut: string;
 
   //  ----------   Style   ---------- //