docs: component token meta (#43337)

* docs: component token meta

* docs: more

* docs: complete

.dumi/theme/builtins/ColorChunk/index.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
 import { css } from '@emotion/react';
+import * as React from 'react';
 import useSiteToken from '../../../hooks/useSiteToken';
 
 interface ColorChunkProps {
@@ -23,7 +23,7 @@ const useStyle = () => {
       display: inline-block;
       width: 6px;
       height: 6px;
-      border-radius: ${token.borderRadiusSM}px;
+      border-radius: 50%;
       margin-inline-end: 4px;
       border: 1px solid ${token.colorSplit};
     `,

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

@@ -17,12 +17,16 @@ const locales = {
     description: '描述',
     type: '类型',
     value: '默认值',
+    componentToken: '组件 Token',
+    globalToken: '全局 Token',
   },
   en: {
     token: 'Token Name',
     description: 'Description',
     type: 'Type',
     value: 'Default Value',
+    componentToken: 'Component Token',
+    globalToken: 'Global Token',
   },
 };
 
@@ -48,9 +52,10 @@ interface SubTokenTableProps {
   defaultOpen?: boolean;
   title: string;
   tokens: string[];
+  component?: string;
 }
 
-const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title }) => {
+const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title, component }) => {
   const [, lang] = useLocale(locales);
   const { token } = useSiteToken();
   const columns = useColumns();
@@ -64,22 +69,28 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
   }
 
   const data = tokens
-    .sort((token1, token2) => {
-      const hasColor1 = token1.toLowerCase().includes('color');
-      const hasColor2 = token2.toLowerCase().includes('color');
+    .sort(
+      component
+        ? undefined
+        : (token1, token2) => {
+            const hasColor1 = token1.toLowerCase().includes('color');
+            const hasColor2 = token2.toLowerCase().includes('color');
 
-      if (hasColor1 && !hasColor2) {
-        return -1;
-      }
+            if (hasColor1 && !hasColor2) {
+              return -1;
+            }
 
-      if (!hasColor1 && hasColor2) {
-        return 1;
-      }
+            if (!hasColor1 && hasColor2) {
+              return 1;
+            }
 
-      return token1 < token2 ? -1 : 1;
-    })
+            return token1 < token2 ? -1 : 1;
+          },
+    )
     .map((name) => {
-      const meta = tokenMeta[name];
+      const meta = component
+        ? tokenMeta.components[component].find((item) => item.token === name)
+        : tokenMeta.global[name];
 
       if (!meta) {
         return null;
@@ -89,7 +100,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
         name,
         desc: lang === 'cn' ? meta.desc : meta.descEn,
         type: meta.type,
-        value: defaultToken[name],
+        value: component ? tokenData[component].component[name] : defaultToken[name],
       };
     })
     .filter(Boolean);
@@ -122,28 +133,31 @@ export interface ComponentTokenTableProps {
 }
 
 const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component }) => {
+  const [locale] = useLocale(locales);
   const [mergedGlobalTokens] = useMemo(() => {
     const globalTokenSet = new Set<string>();
-    let componentTokens: Record<string, string> = {};
 
     component.split(',').forEach((comp) => {
-      const { global: globalTokens = [], component: singleComponentTokens = [] } =
-        tokenData[comp] || {};
+      const { global: globalTokens = [] } = tokenData[comp] || {};
 
       globalTokens.forEach((token: string) => {
         globalTokenSet.add(token);
       });
-
-      componentTokens = {
-        ...componentTokens,
-        ...singleComponentTokens,
-      };
     });
 
-    return [Array.from(globalTokenSet), componentTokens] as const;
+    return [Array.from(globalTokenSet)] as const;
   }, [component]);
 
-  return <SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />;
+  return (
+    <>
+      <SubTokenTable
+        title={locale.componentToken}
+        tokens={tokenMeta.components[component].map((item) => item.token)}
+        component={component}
+      />
+      <SubTokenTable title={locale.globalToken} tokens={mergedGlobalTokens} />
+    </>
+  );
 };
 
 export default React.memo(ComponentTokenTable);

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

@@ -98,7 +98,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
 
   const data = React.useMemo<TokenData[]>(
     () =>
-      Object.entries(tokenMeta)
+      Object.entries(tokenMeta.global)
         .filter(([, meta]) => meta.source === type)
         .map(([token, meta]) => ({
           name: token,

components/anchor/style/index.ts

@@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 链接横向内间距
+   * @descEN Link horizontal padding
+   */
   linkPaddingBlock: number;
+  /**
+   * @desc 链接纵向内间距
+   * @descEN Link vertical padding
+   */
   linkPaddingInlineStart: number;
 }
 

components/avatar/style/index.ts

@@ -4,14 +4,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 头像背景色
+   * @descEN Background color of Avatar
+   */
   containerSize: number;
+  /**
+   * @desc 大号头像尺寸
+   * @descEN Size of large Avatar
+   */
   containerSizeLG: number;
+  /**
+   * @desc 小号头像尺寸
+   * @descEN Size of small Avatar
+   */
   containerSizeSM: number;
+  /**
+   * @desc 头像文字大小
+   * @descEN Font size of Avatar
+   */
   textFontSize: number;
+  /**
+   * @desc 大号头像文字大小
+   * @descEN Font size of large Avatar
+   */
   textFontSizeLG: number;
+  /**
+   * @desc 小号头像文字大小
+   * @descEN Font size of small Avatar
+   */
   textFontSizeSM: number;
+  /**
+   * @desc 头像组间距
+   * @descEN Spacing between avatars in a group
+   */
   groupSpace: number;
+  /**
+   * @desc 头像组重叠宽度
+   * @descEN Overlapping of avatars in a group
+   */
   groupOverlapping: number;
+  /**
+   * @desc 头像组边框颜色
+   * @descEN Border color of avatars in a group
+   */
   groupBorderColor: string;
 }
 

components/breadcrumb/style/index.ts

@@ -4,12 +4,40 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 面包屑项文字颜色
+   * @descEN Text color of Breadcrumb item
+   */
   itemColor: string;
+  /**
+   * @desc 图标大小
+   * @descEN Icon size
+   */
   iconFontSize: number;
+  /**
+   * @desc 链接文字颜色
+   * @descEN Text color of link
+   */
   linkColor: string;
+  /**
+   * @desc 链接文字悬浮颜色
+   * @descEN Color of hovered link
+   */
   linkHoverColor: string;
+  /**
+   * @desc 最后一项文字颜色
+   * @descEN Text color of the last item
+   */
   lastItemColor: string;
+  /**
+   * @desc 分隔符外间距
+   * @descEN Margin of separator
+   */
   separatorMargin: number;
+  /**
+   * @desc 分隔符颜色
+   * @descEN Color of separator
+   */
   separatorColor: string;
 }
 

components/calendar/style/index.ts

@@ -8,11 +8,35 @@ import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 年选择器宽度
+   * @descEN Width of year select
+   */
   yearControlWidth: number;
+  /**
+   * @desc 月选择器宽度
+   * @descEN Width of month select
+   */
   monthControlWidth: number;
+  /**
+   * @desc 迷你日历内容高度
+   * @descEN Height of mini calendar content
+   */
   miniContentHeight: number;
+  /**
+   * @desc 完整日历背景色
+   * @descEN Background color of full calendar
+   */
   fullBg: string;
+  /**
+   * @desc 完整日历面板背景色
+   * @descEN Background color of full calendar panel
+   */
   fullPanelBg: string;
+  /**
+   * @desc 日期项选中背景色
+   * @descEN Background color of selected date item
+   */
   itemActiveBg: string;
 }
 

components/card/style/index.ts

@@ -5,14 +5,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 卡片头部背景色
+   * @descEN Background color of card header
+   */
   headerBg: string;
+  /**
+   * @desc 卡片头部文字大小
+   * @descEN Font size of card header
+   */
   headerFontSize: number;
+  /**
+   * @desc 小号卡片头部文字大小
+   * @descEN Font size of small card header
+   */
   headerFontSizeSM: number;
+  /**
+   * @desc 卡片头部高度
+   * @descEN Height of card header
+   */
   headerHeight: number;
+  /**
+   * @desc 小号卡片头部高度
+   * @descEN Height of small card header
+   */
   headerHeightSM: number;
+  /**
+   * @desc 操作区背景色
+   * @descEN Background color of card actions
+   */
   actionsBg: string;
+  /**
+   * @desc 操作区每一项的外间距
+   * @descEN Margin of each item in card actions
+   */
   actionsLiMargin: string;
+  /**
+   * @desc 内置标签页组件下间距
+   * @descEN Margin bottom of tabs component
+   */
   tabsMarginBottom: number;
+  /**
+   * @desc 额外区文字颜色
+   * @descEN Text color of extra area
+   */
   extraColor: string;
 }
 

components/carousel/style/index.ts

@@ -3,10 +3,22 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 指示点宽度
+   * @descEN Width of indicator
+   */
   dotWidth: number;
+  /**
+   * @desc 指示点高度
+   * @descEN Height of indicator
+   */
   dotHeight: number;
   /** @deprecated Use `dotActiveWidth` instead. */
   dotWidthActive: number;
+  /**
+   * @desc 激活态指示点宽度
+   * @descEN Width of active indicator
+   */
   dotActiveWidth: number;
 }
 

components/cascader/style/index.ts

@@ -1,12 +1,24 @@
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
 import { textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 选择器宽度
+   * @descEN Width of Cascader
+   */
   controlWidth: number;
+  /**
+   * @desc 选项宽度
+   * @descEN Width of item
+   */
   controlItemWidth: number;
+  /**
+   * @desc 下拉菜单高度
+   * @descEN Height of dropdown
+   */
   dropdownHeight: number;
 }
 

components/date-picker/style/index.ts

@@ -23,8 +23,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 
 export interface ComponentToken {
+  /**
+   * @desc 预设区域宽度
+   * @descEN Width of preset area
+   */
   presetsWidth: number;
+  /**
+   * @desc 预设区域最大宽度
+   * @descEN Max width of preset area
+   */
   presetsMaxWidth: number;
+  /**
+   * @desc 弹窗 z-index
+   * @descEN z-index of popup
+   */
   zIndexPopup: number;
 }
 

components/descriptions/style/index.ts

@@ -6,11 +6,35 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
   // Component token here
+  /**
+   * @desc 标签背景色
+   * @descEN Background color of label
+   */
   labelBg: string;
+  /**
+   * @desc 标题下间距
+   * @descEN Bottom margin of title
+   */
   titleMarginBottom: number;
+  /**
+   * @desc 子项下间距
+   * @descEN Bottom padding of item
+   */
   itemPaddingBottom: number;
+  /**
+   * @desc 分号右间距
+   * @descEN Right margin of colon
+   */
   colonMarginRight: number;
+  /**
+   * @desc 分号左间距
+   * @descEN Left margin of colon
+   */
   colonMarginLeft: number;
+  /**
+   * @desc 额外区域文字颜色
+   * @descEN Text color of extra area
+   */
   extraColor: string;
 }
 

components/drawer/style/index.ts

@@ -3,8 +3,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
 
 export interface ComponentToken {
+  /**
+   * @desc 弹窗 z-index
+   * @descEN z-index of drawer
+   */
   zIndexPopup: number;
+  /**
+   * @desc 底部区域横向内间距
+   * @descEN Horizontal padding of footer
+   */
   footerPaddingBlock: number;
+  /**
+   * @desc 底部区域纵向内间距
+   * @descEN Vertical padding of footer
+   */
   footerPaddingInline: number;
 }
 

components/dropdown/style/index.ts

@@ -14,6 +14,10 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genStatusStyle from './status';
 
 export interface ComponentToken {
+  /**
+   * @desc 下拉菜单 z-index
+   * @descEN z-index of dropdown
+   */
   zIndexPopup: number;
 }
 

components/image/style/index.ts

@@ -7,9 +7,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 预览浮层 z-index
+   * @descEN z-index of preview popup
+   */
   zIndexPopup: number;
+  /**
+   * @desc 预览操作图标大小
+   * @descEN Size of preview operation icon
+   */
   previewOperationSize: number;
+  /**
+   * @desc 预览操作图标颜色
+   * @descEN Color of preview operation icon
+   */
   previewOperationColor: string;
+  /**
+   * @desc 预览操作图标禁用颜色
+   * @descEN Disabled color of preview operation icon
+   */
   previewOperationColorDisabled: string;
 }
 

components/input-number/style/index.ts

@@ -15,10 +15,26 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 输入框宽度
+   * @descEN Width of input
+   */
   controlWidth: number;
+  /**
+   * @desc 操作按钮宽度
+   * @descEN Width of control button
+   */
   handleWidth: number;
+  /**
+   * @desc 操作按钮图标大小
+   * @descEN Icon size of control button
+   */
   handleFontSize: number;
-  /** Default `auto`. Set `true` will always show the handle */
+  /**
+   * Default `auto`. Set `true` will always show the handle
+   * @desc 操作按钮可见性
+   * @descEN Handle visible
+   */
   handleVisible: 'auto' | true;
 }
 

components/list/style/index.ts

@@ -5,16 +5,60 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 内容宽度
+   * @descEN Width of content
+   */
   contentWidth: number;
+  /**
+   * @desc 大号列表项内间距
+   * @descEN Padding of large item
+   */
   itemPaddingLG: string;
+  /**
+   * @desc 小号列表项内间距
+   * @descEN Padding of small item
+   */
   itemPaddingSM: string;
+  /**
+   * @desc 列表项内间距
+   * @descEN Padding of item
+   */
   itemPadding: string;
+  /**
+   * @desc 头部区域背景色
+   * @descEN Background color of header
+   */
   headerBg: string;
+  /**
+   * @desc 底部区域背景色
+   * @descEN Background color of footer
+   */
   footerBg: string;
+  /**
+   * @desc 空文本内边距
+   * @descEN Padding of empty text
+   */
   emptyTextPadding: CSSProperties['padding'];
+  /**
+   * @desc Meta 下间距
+   * @descEN Margin bottom of meta
+   */
   metaMarginBottom: CSSProperties['marginBottom'];
+  /**
+   * @desc 头像右间距
+   * @descEN Right margin of avatar
+   */
   avatarMarginRight: CSSProperties['marginRight'];
+  /**
+   * @desc 标题下间距
+   * @descEN Margin bottom of title
+   */
   titleMarginBottom: CSSProperties['marginBottom'];
+  /**
+   * @desc 描述文字大小
+   * @descEN Font size of description
+   */
   descriptionFontSize: number;
 }
 

components/mentions/style/index.ts

@@ -7,13 +7,25 @@ import {
   genStatusStyle,
   initInputToken,
 } from '../../input/style';
+import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook } from '../../theme/internal';
-import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {
+  /**
+   * @desc 弹层 z-index
+   * @descEN z-index of popup
+   */
   zIndexPopup: number;
+  /**
+   * @desc 弹层高度
+   * @descEN Height of popup
+   */
   dropdownHeight: number;
+  /**
+   * @desc 菜单项高度
+   * @descEN Height of menu item
+   */
   controlItemWidth: number;
 }
 

components/menu/style/index.tsx

@@ -11,112 +11,223 @@ import getVerticalStyle from './vertical';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
+  /**
+   * @desc 弹出菜单的宽度
+   * @descEN Width of popup menu
+   */
   dropdownWidth: number;
+  /**
+   * @desc 弹出菜单的 z-index
+   * @descEN z-index of popup menu
+   */
   zIndexPopup: number;
 
   // Group
   /** @deprecated Use `groupTitleColor` instead */
   colorGroupTitle: string;
+  /**
+   * @desc 分组标题文字颜色
+   * @descEN Color of group title text
+   */
   groupTitleColor: string;
 
   // radius
   /** @deprecated Use `itemBorderRadius` instead */
   radiusItem: number;
+  /**
+   * @desc 菜单项的圆角
+   * @descEN Radius of menu item
+   */
   itemBorderRadius: number;
 
   /** @deprecated Use `subMenuItemBorderRadius` instead */
   radiusSubMenuItem: number;
+  /**
+   * @desc 子菜单项的圆角
+   * @descEN Radius of sub-menu item
+   */
   subMenuItemBorderRadius: number;
 
   // Item Text
   // > Default
   /** @deprecated Use `itemColor` instead */
   colorItemText: string;
+  /**
+   * @desc 菜单项文字颜色
+   * @descEN Color of menu item text
+   */
   itemColor: string;
 
   /** @deprecated Use `itemHoverColor` instead */
   colorItemTextHover: string;
+  /**
+   * @desc 菜单项文字悬浮颜色
+   * @descEN Hover color of menu item text
+   */
   itemHoverColor: string;
 
   /** @deprecated Use `horizontalItemHoverColor` instead */
   colorItemTextHoverHorizontal: string;
+  /**
+   * @desc 水平菜单项文字悬浮颜色
+   * @descEN Hover color of horizontal menu item text
+   */
   horizontalItemHoverColor: string;
 
   /** @deprecated Use `itemSelectedColor` instead */
   colorItemTextSelected: string;
+  /**
+   * @desc 菜单项文字选中颜色
+   * @descEN Color of selected menu item text
+   */
   itemSelectedColor: string;
 
   /** @deprecated Use `horizontalItemSelectedColor` instead */
   colorItemTextSelectedHorizontal: string;
+  /**
+   * @desc 水平菜单项文字选中颜色
+   * @descEN Color of selected horizontal menu item text
+   */
   horizontalItemSelectedColor: string;
 
   // > Disabled
   /** @deprecated Use `itemDisabledColor` instead */
   colorItemTextDisabled: string;
+  /**
+   * @desc 菜单项文字禁用颜色
+   * @descEN Color of disabled menu item text
+   */
   itemDisabledColor: string;
 
   // > Danger
   /** @deprecated Use `dangerItemColor` instead */
   colorDangerItemText: string;
+  /**
+   * @desc 危险菜单项文字颜色
+   * @descEN Color of danger menu item text
+   */
   dangerItemColor: string;
 
   /** @deprecated Use `dangerItemHoverColor` instead */
   colorDangerItemTextHover: string;
+  /**
+   * @desc 危险菜单项文字悬浮颜色
+   * @descEN Hover color of danger menu item text
+   */
   dangerItemHoverColor: string;
 
   /** @deprecated Use `dangerItemSelectedColor` instead */
   colorDangerItemTextSelected: string;
+  /**
+   * @desc 危险菜单项文字选中颜色
+   * @descEN Color of selected danger menu item text
+   */
   dangerItemSelectedColor: string;
 
   /** @deprecated Use `dangerItemActiveBg` instead */
   colorDangerItemBgActive: string;
+  /**
+   * @desc 危险菜单项文字激活颜色
+   * @descEN Color of active danger menu item text
+   */
   dangerItemActiveBg: string;
 
   /** @deprecated Use `dangerItemSelectedBg` instead */
   colorDangerItemBgSelected: string;
+  /**
+   * @desc 危险菜单项文字选中颜色
+   * @descEN Color of selected danger menu item text
+   */
   dangerItemSelectedBg: string;
 
   // Item Bg
   /** @deprecated Use `itemBg` instead */
   colorItemBg: string;
+  /**
+   * @desc 菜单项背景色
+   */
   itemBg: string;
 
   /** @deprecated Use `itemHoverBg` instead */
   colorItemBgHover: string;
+  /**
+   * @desc 菜单项悬浮态背景色
+   * @descEN Background color of menu item when hover
+   */
   itemHoverBg: string;
 
   /** @deprecated Use `subMenuItemBg` instead */
   colorSubItemBg: string;
+  /**
+   * @desc 子菜单项背景色
+   * @descEN Background color of sub-menu item
+   */
   subMenuItemBg: string;
 
   // > Default
   /** @deprecated Use `itemActiveBg` instead */
   colorItemBgActive: string;
+  /**
+   * @desc 菜单项激活态背景色
+   * @descEN Background color of menu item when active
+   */
   itemActiveBg: string;
 
   /** @deprecated Use `itemSelectedBg` instead */
   colorItemBgSelected: string;
+  /**
+   * @desc 菜单项选中态背景色
+   * @descEN Background color of menu item when selected
+   */
   itemSelectedBg: string;
 
   /** @deprecated Use `horizontalItemSelectedBg` instead */
   colorItemBgSelectedHorizontal: string;
+  /**
+   * @desc 水平菜单项选中态背景色
+   * @descEN Background color of horizontal menu item when selected
+   */
   horizontalItemSelectedBg: string;
 
   // Ink Bar
   /** @deprecated Use `activeBarWidth` instead */
   colorActiveBarWidth: number;
+  /**
+   * @desc 菜单项指示条宽度
+   * @descEN Width of menu item active bar
+   */
   activeBarWidth: number;
 
   /** @deprecated Use `activeBarHeight` instead */
   colorActiveBarHeight: number;
+  /**
+   * @desc 菜单项指示条高度
+   * @descEN Height of menu item active bar
+   */
   activeBarHeight: number;
 
   /** @deprecated Use `activeBarBorderWidth` instead */
   colorActiveBarBorderSize: number;
+  /**
+   * @desc 菜单项指示条边框宽度
+   * @descEN Border width of menu item active bar
+   */
   activeBarBorderWidth: number;
 
+  /**
+   * @desc 菜单项横向外间距
+   * @descEN Horizontal margin of menu item
+   */
   itemMarginInline: number;
+  /**
+   * @desc 横向菜单项横悬浮态背景色
+   * @descEN Background color of horizontal menu item when hover
+   */
   horizontalItemHoverBg: string;
+  /**
+   * @desc 横向菜单项圆角
+   * @descEN Border radius of horizontal menu item
+   */
   horizontalItemBorderRadius: number;
 }
 

components/message/style/index.tsx

@@ -9,8 +9,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
   // Component token here
+  /**
+   * @desc 提示框 z-index
+   * @descEN z-index of Message
+   */
   zIndexPopup: number;
+  /**
+   * @desc 提示框背景色
+   * @descEN Background color of Message
+   */
   contentBg: string;
+  /**
+   * @desc 提示框内边距
+   * @descEN Padding of Message
+   */
   contentPadding: CSSProperties['padding'];
 }
 

components/modal/style/index.tsx

@@ -8,11 +8,35 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
   // Component token here
+  /**
+   * @desc 顶部背景色
+   * @descEN Background color of header
+   */
   headerBg: string;
+  /**
+   * @desc 标题行高
+   * @descEN Line height of title
+   */
   titleLineHeight: number;
+  /**
+   * @desc 标题字体大小
+   * @descEN Font size of title
+   */
   titleFontSize: number;
+  /**
+   * @desc 标题字体颜色
+   * @descEN Font color of title
+   */
   titleColor: string;
+  /**
+   * @desc 内容区域背景色
+   * @descEN Background color of content
+   */
   contentBg: string;
+  /**
+   * @desc 底部区域背景色
+   * @descEN Background color of footer
+   */
   footerBg: string;
 }
 

components/notification/style/index.tsx

@@ -7,7 +7,15 @@ import genNotificationPlacementStyle from './placement';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
+  /**
+   * @desc 提醒框 z-index
+   * @descEN z-index of Notification
+   */
   zIndexPopup: number;
+  /**
+   * @desc 提醒框宽度
+   * @descEN Width of Notification
+   */
   width: number;
 }
 

components/pagination/style/index.ts

@@ -10,14 +10,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 页码选项背景色
+   * @descEN Background color of Pagination item
+   */
   itemBg: string;
+  /**
+   * @desc 页码尺寸
+   * @descEN Size of Pagination item
+   */
   itemSize: number;
+  /**
+   * @desc 页码激活态背景色
+   * @descEN Background color of active Pagination item
+   */
   itemActiveBg: string;
+  /**
+   * @desc 小号页码尺寸
+   * @descEN Size of small Pagination item
+   */
   itemSizeSM: number;
+  /**
+   * @desc 页码链接背景色
+   * @descEN Background color of Pagination item link
+   */
   itemLinkBg: string;
+  /**
+   * @desc 页码激活态禁用状态背景色
+   * @descEN Background color of disabled active Pagination item
+   */
   itemActiveBgDisabled: string;
+  /**
+   * @desc 页码激活态禁用状态文字颜色
+   * @descEN Text color of disabled active Pagination item
+   */
   itemActiveColorDisabled: string;
+  /**
+   * @desc 输入框背景色
+   * @descEN Background color of input
+   */
   itemInputBg: string;
+  /**
+   * @desc 每页展示数量选择器 top
+   * @descEN Top of Pagination size changer
+   */
   miniOptionsSizeChangerTop: number;
 }
 

components/popconfirm/style/index.tsx

@@ -2,6 +2,10 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 确认框 z-index
+   * @descEN z-index of Popconfirm
+   */
   zIndexPopup: number;
 }
 

components/popover/style/index.tsx

@@ -5,8 +5,20 @@ import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/inte
 import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 气泡卡片宽度
+   * @descEN Width of Popover
+   */
   width: number;
+  /**
+   * @desc 气泡卡片最小宽度
+   * @descEN Min width of Popover
+   */
   minWidth: number;
+  /**
+   * @desc 气泡卡片 z-index
+   * @descEN z-index of Popover
+   */
   zIndexPopup: number;
 }
 

components/radio/style/index.tsx

@@ -6,18 +6,62 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 // ============================== Tokens ==============================
 export interface ComponentToken {
   // Radio
+  /**
+   * @desc 单选框大小
+   * @descEN Radio size
+   */
   radioSize: number;
+  /**
+   * @desc 单选框圆点大小
+   * @descEN Size of Radio dot
+   */
   dotSize: number;
+  /**
+   * @desc 单选框圆点禁用颜色
+   * @descEN Color of disabled Radio dot
+   */
   dotColorDisabled: string;
 
   // Radio buttons
+  /**
+   * @desc 单选框按钮背景色
+   * @descEN Background color of Radio button
+   */
   buttonBg: string;
+  /**
+   * @desc 单选框按钮选中背景色
+   * @descEN Background color of checked Radio button
+   */
   buttonCheckedBg: string;
+  /**
+   * @desc 单选框按钮文本颜色
+   * @descEN Color of Radio button text
+   */
   buttonColor: string;
+  /**
+   * @desc 单选框按钮横向内间距
+   * @descEN Horizontal padding of Radio button
+   */
   buttonPaddingInline: number;
+  /**
+   * @desc 单选框按钮选中并禁用时的背景色
+   * @descEN Background color of checked and disabled Radio button
+   */
   buttonCheckedBgDisabled: string;
+  /**
+   * @desc 单选框按钮选中并禁用时的文本颜色
+   * @descEN Color of checked and disabled Radio button text
+   */
   buttonCheckedColorDisabled: string;
+  /**
+   * @desc 单选框实色按钮选中时的文本颜色
+   * @descEN Color of checked solid Radio button text
+   */
   buttonSolidCheckedColor: string;
+  /**
+   * @desc 单选框右间距
+   * @descEN Margin right of Radio button
+   */
   wrapperMarginInlineEnd: number;
 }
 

components/rate/style/index.tsx

@@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export type ComponentToken = {
+  /**
+   * @desc 星星颜色
+   * @descEN Star color
+   */
   starColor: string;
+  /**
+   * @desc 星星大小
+   * @descEN Star size
+   */
   starSize: number;
+  /**
+   * @desc 星星悬浮时的缩放
+   * @descEN Scale of star when hover
+   */
   starHoverScale: CSSObject['transform'];
+  /**
+   * @desc 星星背景色
+   * @descEN Star background color
+   */
   starBg: string;
 };
 

components/result/style/index.tsx

@@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 标题字体大小
+   * @descEN Title font size
+   */
   titleFontSize: number;
+  /**
+   * @desc 副标题字体大小
+   * @descEN Subtitle font size
+   */
   subtitleFontSize: number;
+  /**
+   * @desc 图标大小
+   * @descEN Icon size
+   */
   iconFontSize: number;
+  /**
+   * @desc 额外区域外间距
+   * @descEN Margin of extra area
+   */
   extraMargin: CSSProperties['margin'];
 }
 

components/segmented/style/index.tsx

@@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 选项文本颜色
+   * @descEN Text color of item
+   */
   itemColor: string;
+  /**
+   * @desc 选项悬浮态文本颜色
+   * @descEN Text color of item when hover
+   */
   itemHoverColor: string;
+  /**
+   * @desc 选项悬浮态背景颜色
+   * @descEN Background color of item when hover
+   */
   itemHoverBg: string;
+  /**
+   * @desc 选项激活态背景颜色
+   * @descEN Background color of item when active
+   */
   itemActiveBg: string;
+  /**
+   * @desc 选项选中时背景颜色
+   * @descEN Background color of item when selected
+   */
   itemSelectedBg: string;
 }
 

components/select/style/index.tsx

@@ -8,6 +8,10 @@ import genMultipleStyle from './multiple';
 import genSingleStyle from './single';
 
 export interface ComponentToken {
+  /**
+   * @desc 下拉菜单 z-index
+   * @descEN z-index of dropdown
+   */
   zIndexPopup: number;
 }
 

components/skeleton/style/index.tsx

@@ -8,11 +8,35 @@ export type ComponentToken = {
   color: string;
   /** @deprecated use gradientToColor instead. */
   colorGradientEnd: string;
+  /**
+   * @desc 渐变色起点颜色
+   * @descEN Start color of gradient
+   */
   gradientFromColor: string;
+  /**
+   * @desc 渐变色终点颜色
+   * @descEN End color of gradient
+   */
   gradientToColor: string;
+  /**
+   * @desc 标题骨架屏高度
+   * @descEN Height of title skeleton
+   */
   titleHeight: number;
+  /**
+   * @desc 骨架屏圆角
+   * @descEN Border radius of skeleton
+   */
   blockRadius: number;
+  /**
+   * @desc 段落骨架屏上间距
+   * @descEN Margin top of paragraph skeleton
+   */
   paragraphMarginTop: number;
+  /**
+   * @desc 段落骨架屏单行高度
+   * @descEN Line height of paragraph skeleton
+   */
   paragraphLiHeight: number;
 };
 

components/slider/style/index.tsx

@@ -12,12 +12,40 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 // horizontal: full (水平时，水平方向命名为 full)
 
 export interface ComponentToken {
+  /**
+   * @desc 滑动输入高度
+   * @descEN Height of slider
+   */
   controlSize: number;
+  /**
+   * @desc 轨道高度
+   * @descEN Height of rail
+   */
   railSize: number;
+  /**
+   * @desc 滑块尺寸
+   * @descEN Size of handle
+   */
   handleSize: number;
+  /**
+   * @desc 滑块尺寸（悬浮态）
+   * @descEN Size of handle when hover
+   */
   handleSizeHover: number;
+  /**
+   * @desc 滑块边框宽度
+   * @descEN Border width of handle
+   */
   handleLineWidth: number;
+  /**
+   * @desc 滑块边框宽度（悬浮态）
+   * @descEN Border width of handle when hover
+   */
   handleLineWidthHover: number;
+  /**
+   * @desc 滑块圆点尺寸
+   * @descEN Size of dot
+   */
   dotSize: number;
 }
 

components/spin/style/index.tsx

@@ -1,10 +1,14 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
 
 export interface ComponentToken {
+  /**
+   * @desc 内容区域高度
+   * @descEN Height of content area
+   */
   contentHeight: number;
 }
 

components/statistic/style/index.tsx

@@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 标题字体大小
+   * @descEN Title font size
+   */
   titleFontSize: number;
+  /**
+   * @desc 内容字体大小
+   * @descEN Content font size
+   */
   contentFontSize: number;
 }
 

components/steps/style/index.tsx

@@ -14,18 +14,70 @@ import genStepsSmallStyle from './small';
 import genStepsVerticalStyle from './vertical';
 
 export interface ComponentToken {
+  /**
+   * @desc 描述区域最大宽度
+   * @descEN Max width of description area
+   */
   descriptionMaxWidth: number;
+  /**
+   * @desc 自定义图标容器尺寸
+   * @descEN Size of custom icon container
+   */
   customIconSize: number;
+  /**
+   * @desc 自定义图标 top
+   * @descEN Top of custom icon
+   */
   customIconTop: number;
+  /**
+   * @desc 自定义图标大小
+   * @descEN Font size of custom icon
+   */
   customIconFontSize: number;
+  /**
+   * @desc 图标容器尺寸
+   * @descEN Size of icon container
+   */
   iconSize: number;
+  /**
+   * @desc 图标 top
+   * @descEN Top of icon
+   */
   iconTop: number;
+  /**
+   * @desc 图标大小
+   * @descEN Size of icon
+   */
   iconFontSize: number;
+  /**
+   * @desc 点状步骤点大小
+   * @descEN Size of dot
+   */
   dotSize: number;
+  /**
+   * @desc 点状步骤点当前大小
+   * @descEN Current size of dot
+   */
   dotCurrentSize: number;
+  /**
+   * @desc 可跳转步骤条箭头颜色
+   * @descEN Color of arrow in nav
+   */
   navArrowColor: string;
+  /**
+   * @desc 可跳转步骤条内容最大宽度
+   * @descEN Max width of nav content
+   */
   navContentMaxWidth: CSSProperties['maxWidth'];
+  /**
+   * @desc 小号步骤条图标大小
+   * @descEN Size of small steps icon
+   */
   iconSizeSM: number;
+  /**
+   * @desc 标题行高
+   * @descEN Line height of title
+   */
   titleLineHeight: number;
 }
 

components/tabs/style/index.ts

@@ -5,28 +5,120 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
 
 export interface ComponentToken {
+  /**
+   * @desc 下拉菜单 z-index
+   * @descEN z-index of dropdown menu
+   */
   zIndexPopup: number;
+  /**
+   * @desc 卡片标签页背景色
+   * @descEN Background color of card tab
+   */
   cardBg: string;
+  /**
+   * @desc 卡片标签页高度
+   * @descEN Height of card tab
+   */
   cardHeight: number;
+  /**
+   * @desc 卡片标签页内间距
+   * @descEN Padding of card tab
+   */
   cardPadding: string;
+  /**
+   * @desc 小号卡片标签页内间距
+   * @descEN Padding of small card tab
+   */
   cardPaddingSM: string;
+  /**
+   * @desc 大号卡片标签页内间距
+   * @descEN Padding of large card tab
+   */
   cardPaddingLG: string;
+  /**
+   * @desc 标齐页标题文本大小
+   * @descEN Font size of title
+   */
   titleFontSize: number;
+  /**
+   * @desc 大号标签页标题文本大小
+   * @descEN Font size of large title
+   */
   titleFontSizeLG: number;
+  /**
+   * @desc 小号标签页标题文本大小
+   * @descEN Font size of small title
+   */
   titleFontSizeSM: number;
+  /**
+   * @desc 指示条颜色
+   * @descEN Color of indicator
+   */
   inkBarColor: string;
+  /**
+   * @desc 横向标签页外间距
+   * @descEN Horizontal margin of horizontal tab
+   */
   horizontalMargin: string;
+  /**
+   * @desc 横向标签页标签间距
+   * @descEN Horizontal gutter of horizontal tab
+   */
   horizontalItemGutter: number;
+  /**
+   * @desc 横向标签页标签外间距
+   * @descEN Horizontal margin of horizontal tab item
+   */
   horizontalItemMargin: string;
+  /**
+   * @desc 横向标签页标签外间距（RTL）
+   * @descEN Horizontal margin of horizontal tab item (RTL)
+   */
   horizontalItemMarginRTL: string;
+  /**
+   * @desc 横向标签页标签内间距
+   * @descEN Horizontal padding of horizontal tab item
+   */
   horizontalItemPadding: string;
+  /**
+   * @desc 大号横向标签页标签内间距
+   * @descEN Horizontal padding of large horizontal tab item
+   */
   horizontalItemPaddingLG: string;
+  /**
+   * @desc 小号横向标签页标签内间距
+   * @descEN Horizontal padding of small horizontal tab item
+   */
   horizontalItemPaddingSM: string;
+  /**
+   * @desc 纵向标签页标签内间距
+   * @descEN Vertical padding of vertical tab item
+   */
   verticalItemPadding: string;
+  /**
+   * @desc 纵向标签页标签外间距
+   * @descEN Vertical margin of vertical tab item
+   */
   verticalItemMargin: string;
+  /**
+   * @desc 标签激活态文本颜色
+   * @descEN Text color of active tab
+   */
   itemActiveColor: string;
+  /**
+   * @desc 标签悬浮态文本颜色
+   * @descEN Text color of hover tab
+   */
   itemHoverColor: string;
+  /**
+   * @desc 标签选中态文本颜色
+   * @descEN Text color of selected tab
+   */
   itemSelectedColor: string;
+  /**
+   * @desc 卡片标签间距
+   * @descEN Gutter of card tab
+   */
   cardGutter: number;
 }
 

components/tag/style/index.ts

@@ -6,7 +6,15 @@ import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 默认背景色
+   * @descEN Default background color
+   */
   defaultBg: string;
+  /**
+   * @desc 默认文字颜色
+   * @descEN Default text color
+   */
   defaultColor: string;
 }
 

components/timeline/style/index.ts

@@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 轨迹颜色
+   * @descEN Line color
+   */
   tailColor: string;
+  /**
+   * @desc 轨迹宽度
+   * @descEN Line width
+   */
   tailWidth: number;
+  /**
+   * @desc 节点边框宽度
+   * @descEN Border width of node
+   */
   dotBorderWidth: number;
+  /**
+   * @desc 节点背景色
+   * @descEN Background color of node
+   */
   dotBg: string;
+  /**
+   * @desc 时间项下间距
+   * @descEN Bottom padding of item
+   */
   itemPaddingBottom: number;
 }
 

components/tooltip/style/index.ts

@@ -5,7 +5,12 @@ import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../th
 import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 文字提示 z-index
+   * @descEN z-index of tooltip
+   */
   zIndexPopup: number;
+  /** @deprecated */
   colorBgDefault: string;
 }
 

components/transfer/style/index.ts

@@ -4,11 +4,35 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
+  /**
+   * @desc 列表宽度
+   * @descEN Width of list
+   */
   listWidth: number;
+  /**
+   * @desc 大号列表宽度
+   * @descEN Width of large list
+   */
   listWidthLG: number;
+  /**
+   * @desc 列表高度
+   * @descEN Height of list
+   */
   listHeight: number;
+  /**
+   * @desc 列表项高度
+   * @descEN Height of list item
+   */
   itemHeight: number;
+  /**
+   * @desc 列表项纵向内边距
+   * @descEN Vertical padding of list item
+   */
   itemPaddingBlock: number;
+  /**
+   * @desc 顶部高度
+   * @descEN Height of header
+   */
   headerHeight: number;
 }
 

components/typography/style/index.ts

@@ -12,9 +12,16 @@ import {
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
+  /**
+   * @desc 标题上间距
+   * @descEN Margin top of title
+   */
   titleMarginTop: number | string;
+  /**
+   * @desc 标题下间距
+   * @descEN Margin bottom of title
+   */
   titleMarginBottom: number | string;
-  fontWeightStrong: number;
 }
 
 export type TypographyToken = FullToken<'Typography'>;
@@ -126,9 +133,8 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
 export default genComponentStyleHook(
   'Typography',
   (token) => [genTypographyStyle(token)],
-  (token) => ({
+  () => ({
     titleMarginTop: '1.2em',
     titleMarginBottom: '0.5em',
-    fontWeightStrong: token.fontWeightStrong,
   }),
 );

components/upload/style/index.ts

@@ -9,6 +9,10 @@ import { genPictureCardStyle, genPictureStyle } from './picture';
 import genRtlStyle from './rtl';
 
 export interface ComponentToken {
+  /**
+   * @desc 操作按扭颜色
+   * @descEN Action button color
+   */
   actionsColor: string;
 }
 

scripts/generate-token-meta.ts

@@ -2,11 +2,20 @@ import fs from 'fs-extra';
 import type { DeclarationReflection } from 'typedoc';
 import { Application, TSConfigReader, TypeDocReader } from 'typedoc';
 
+type TokenMeta = {
+  seed: ReturnType<typeof getTokenList>;
+  map: ReturnType<typeof getTokenList>;
+  alias: ReturnType<typeof getTokenList>;
+  components: Record<string, ReturnType<typeof getTokenList>>;
+};
+
 function getTokenList(list?: DeclarationReflection[], source?: string) {
   return (list || [])
     .filter(
       (item) =>
-        !item.comment?.blockTags.some((tag) => tag.tag === '@internal' || tag.tag === '@private'),
+        !item.comment?.blockTags.some(
+          (tag) => tag.tag === '@internal' || tag.tag === '@private' || tag.tag === '@deprecated',
+        ),
     )
     .map((item) => ({
       source,
@@ -40,7 +49,8 @@ const main = () => {
 
   app.bootstrap({
     // typedoc options here
-    entryPoints: ['components/theme/interface/index.ts'],
+    entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'],
+    skipErrorChecking: true,
   });
 
   const project = app.convert();
@@ -48,49 +58,74 @@ const main = () => {
   if (project) {
     // Project may not have converted correctly
     const output = 'components/version/token-meta.json';
-    const tokenMeta: Record<PropertyKey, ReturnType<typeof getTokenList>> = {};
-    let presetColors: string[] = [];
-    project.children?.forEach((type) => {
-      if (type.name === 'SeedToken') {
-        tokenMeta.seed = getTokenList(type.children, 'seed');
-      } else if (type.name === 'MapToken') {
-        tokenMeta.map = getTokenList(type.children, 'map');
-      } else if (type.name === 'AliasToken') {
-        tokenMeta.alias = getTokenList(type.children, 'alias');
-      } else if (type.name === 'PresetColors') {
-        presetColors = (type?.type as any)?.target?.elements?.map((item: any) => item.value);
+    const tokenMeta: TokenMeta = {
+      seed: [],
+      map: [],
+      alias: [],
+      components: {},
+    };
+
+    // eslint-disable-next-line no-restricted-syntax
+    project?.children?.forEach((file) => {
+      // Global Token
+      if (file.name === 'theme/interface') {
+        let presetColors: string[] = [];
+        file.children?.forEach((type) => {
+          if (type.name === 'SeedToken') {
+            tokenMeta.seed = getTokenList(type.children, 'seed');
+          } else if (type.name === 'MapToken') {
+            tokenMeta.map = getTokenList(type.children, 'map');
+          } else if (type.name === 'AliasToken') {
+            tokenMeta.alias = getTokenList(type.children, 'alias');
+          } else if (type.name === 'PresetColors') {
+            presetColors = (type?.type as any)?.target?.elements?.map((item: any) => item.value);
+          }
+        });
+
+        // Exclude preset colors
+        tokenMeta.seed = tokenMeta.seed.filter(
+          (item) => !presetColors.some((color) => item.token.startsWith(color)),
+        );
+        tokenMeta.map = tokenMeta.map.filter(
+          (item) => !presetColors.some((color) => item.token.startsWith(color)),
+        );
+        tokenMeta.alias = tokenMeta.alias.filter(
+          (item) => !presetColors.some((color) => item.token.startsWith(color)),
+        );
+
+        tokenMeta.alias = tokenMeta.alias.filter(
+          (item) => !tokenMeta.map.some((mapItem) => mapItem.token === item.token),
+        );
+        tokenMeta.map = tokenMeta.map.filter(
+          (item) => !tokenMeta.seed.some((seedItem) => seedItem.token === item.token),
+        );
+      } else {
+        const component = file.name
+          .slice(0, file.name.indexOf('/'))
+          .replace(/(^(.)|-(.))/g, (match) => match.replace('-', '').toUpperCase());
+        const componentToken = file.children?.find((item) => item.name === `ComponentToken`);
+        if (componentToken) {
+          tokenMeta.components[component] = getTokenList(componentToken.children, component);
+        }
       }
     });
 
-    // Exclude preset colors
-    tokenMeta.seed = tokenMeta.seed.filter(
-      (item) => !presetColors.some((color) => item.token.startsWith(color)),
-    );
-    tokenMeta.map = tokenMeta.map.filter(
-      (item) => !presetColors.some((color) => item.token.startsWith(color)),
-    );
-    tokenMeta.alias = tokenMeta.alias.filter(
-      (item) => !presetColors.some((color) => item.token.startsWith(color)),
-    );
-
-    tokenMeta.alias = tokenMeta.alias.filter(
-      (item) => !tokenMeta.map.some((mapItem) => mapItem.token === item.token),
-    );
-    tokenMeta.map = tokenMeta.map.filter(
-      (item) => !tokenMeta.seed.some((seedItem) => seedItem.token === item.token),
-    );
-
     const finalMeta = Object.entries(tokenMeta).reduce((acc, [key, value]) => {
-      value.forEach((item) => {
-        acc[item.token] = {
-          name: item.name,
-          nameEn: item.nameEn,
-          desc: item.desc,
-          descEn: item.descEn,
-          type: item.type,
-          source: key,
-        };
-      });
+      if (key !== 'components') {
+        (value as any[]).forEach((item) => {
+          acc.global = acc.global || {};
+          acc.global[item.token] = {
+            name: item.name,
+            nameEn: item.nameEn,
+            desc: item.desc,
+            descEn: item.descEn,
+            type: item.type,
+            source: key,
+          };
+        });
+      } else {
+        acc.components = value;
+      }
       return acc;
     }, {} as any);