docs: more token info (#41421)

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

@@ -40,20 +40,35 @@ function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) {
     return null;
   }
 
-  const data = tokens.map((name) => {
-    const meta = tokenMeta[name];
+  const data = tokens
+    .sort((token1, token2) => {
+      const hasColor1 = token1.toLowerCase().includes('color');
+      const hasColor2 = token2.toLowerCase().includes('color');
 
-    return {
-      name,
-      desc: lang === 'cn' ? meta.desc : meta.descEn,
-      type: meta.type,
-      value: (defaultToken as any)[name],
-    };
-  });
+      if (hasColor1 && !hasColor2) {
+        return -1;
+      }
+
+      if (!hasColor1 && hasColor2) {
+        return 1;
+      }
+
+      return token1 < token2 ? -1 : 1;
+    })
+    .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}>
+    <details className="markdown" open={defaultOpen || process.env.NODE_ENV !== 'production'}>
       <summary>
         <h3 style={{ display: 'inline' }}>{title}</h3>
       </summary>

components/input/index.en-US.md

@@ -116,6 +116,10 @@ Supports all props of `Input`.
 | blur | Remove focus | - |  |
 | focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
 
+## Design Token
+
+<ComponentTokenTable component="Input"></ComponentTokenTable>
+
 ## FAQ
 
 ### Why Input lose focus when change `prefix/suffix/showCount`

components/input/index.zh-CN.md

@@ -117,6 +117,10 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
 | blur | 取消焦点 | - |  |
 | focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
 
+## Design Token
+
+<ComponentTokenTable component="Input"></ComponentTokenTable>
+
 ## FAQ
 
 ### 为什么我动态改变 `prefix/suffix/showCount` 时，Input 会失去焦点？

components/select/index.en-US.md

@@ -137,6 +137,10 @@ Select component to select value from options.
 | key      | Group key   | string                  | -       |         |
 | label    | Group label | string \| React.Element | -       |         |
 
+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ
 
 ### Why sometime search will show 2 same option when in `tags` mode?

components/select/index.zh-CN.md

@@ -138,6 +138,10 @@ demo:
 | key   | Key  | string                  | -      |      |
 | label | 组名 | string \| React.Element | -      |      |
 
+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ
 
 ### `mode="tags"` 模式下为何搜索有时会出现两个相同选项？

components/theme/interface/maps/colors.ts

@@ -21,18 +21,21 @@ export interface ColorNeutralMapToken {
   /**
    * @nameZH 二级文本色
    * @desc 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。
+   * @descEN The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.
    */
   colorTextSecondary: string;
 
   /**
    * @nameZH 三级文本色
    * @desc 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。
+   * @descEN The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc.
    */
   colorTextTertiary: string;
 
   /**
    * @nameZH 四级文本色
    * @desc 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。
+   * @descEN The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.
    */
   colorTextQuaternary: string;
 
@@ -59,24 +62,28 @@ export interface ColorNeutralMapToken {
   /**
    * @nameZH 一级填充色
    * @desc 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。
+   * @descEN The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider.
    */
   colorFill: string;
 
   /**
    * @nameZH 二级填充色
    * @desc 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。
+   * @descEN The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.
    */
   colorFillSecondary: string;
 
   /**
    * @nameZH 三级填充色
    * @desc 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。
+   * @descEN The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.
    */
   colorFillTertiary: string;
 
   /**
    * @nameZH 四级填充色
    * @desc 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。
+   * @descEN The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.
    */
   colorFillQuaternary: string;
 
@@ -85,6 +92,7 @@ export interface ColorNeutralMapToken {
   /**
    * @nameZH 布局背景色
    * @desc 该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的
+   * @descEN This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong.
    */
   colorBgLayout: string;
 
@@ -98,12 +106,14 @@ export interface ColorNeutralMapToken {
   /**
    * @nameZH 浮层容器背景色
    * @desc 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。
+   * @descEN Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.
    */
   colorBgElevated: string;
 
   /**
    * @nameZH 引起注意的背景色
    * @desc 该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。
+   * @descEN This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip.
    */
   colorBgSpotlight: string;
 }

components/theme/interface/seeds.ts

@@ -69,6 +69,7 @@ export interface SeedToken extends PresetColorType {
    * @nameZH 字体
    * @nameEN Font family for default text
    * @desc Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。
+   * @descEN The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.
    */
   fontFamily: string;
 
@@ -76,6 +77,7 @@ export interface SeedToken extends PresetColorType {
    * @nameZH 代码字体
    * @nameEN Font family for code text
    * @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素
+   * @descEN Code font, used for code, pre and kbd elements in Typography
    */
   fontFamilyCode: string;