From b64a57d5d075123660c697b86493d210dd0ada42 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 5 Jul 2023 17:49:59 +0800 Subject: [PATCH] docs: component token meta (#43337) * docs: component token meta * docs: more * docs: complete --- .dumi/theme/builtins/ColorChunk/index.tsx | 4 +- .../builtins/ComponentTokenTable/index.tsx | 62 ++++++---- .dumi/theme/builtins/TokenTable/index.tsx | 2 +- components/anchor/style/index.ts | 8 ++ components/avatar/style/index.ts | 36 ++++++ components/breadcrumb/style/index.ts | 28 +++++ components/calendar/style/index.ts | 24 ++++ components/card/style/index.ts | 36 ++++++ components/carousel/style/index.ts | 12 ++ components/cascader/style/index.ts | 16 ++- components/date-picker/style/index.ts | 12 ++ components/descriptions/style/index.ts | 24 ++++ components/drawer/style/index.ts | 12 ++ components/dropdown/style/index.ts | 4 + components/image/style/index.ts | 16 +++ components/input-number/style/index.ts | 18 ++- components/list/style/index.ts | 44 +++++++ components/mentions/style/index.ts | 14 ++- components/menu/style/index.tsx | 111 +++++++++++++++++ components/message/style/index.tsx | 12 ++ components/modal/style/index.tsx | 24 ++++ components/notification/style/index.tsx | 8 ++ components/pagination/style/index.ts | 36 ++++++ components/popconfirm/style/index.tsx | 4 + components/popover/style/index.tsx | 12 ++ components/radio/style/index.tsx | 44 +++++++ components/rate/style/index.tsx | 16 +++ components/result/style/index.tsx | 16 +++ components/segmented/style/index.tsx | 20 +++ components/select/style/index.tsx | 4 + components/skeleton/style/index.tsx | 24 ++++ components/slider/style/index.tsx | 28 +++++ components/spin/style/index.tsx | 6 +- components/statistic/style/index.tsx | 8 ++ components/steps/style/index.tsx | 52 ++++++++ components/tabs/style/index.ts | 92 ++++++++++++++ components/tag/style/index.ts | 8 ++ components/timeline/style/index.ts | 20 +++ components/tooltip/style/index.ts | 5 + components/transfer/style/index.ts | 24 ++++ components/typography/style/index.ts | 12 +- components/upload/style/index.ts | 4 + scripts/generate-token-meta.ts | 117 ++++++++++++------ 43 files changed, 1003 insertions(+), 76 deletions(-) diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx index 5ec1bdd2e3..e93ec840cc 100644 --- a/.dumi/theme/builtins/ColorChunk/index.tsx +++ b/.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}; `, diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index cb184fd1f2..2fad6b974b 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.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 = ({ defaultOpen, tokens, title }) => { +const SubTokenTable: React.FC = ({ defaultOpen, tokens, title, component }) => { const [, lang] = useLocale(locales); const { token } = useSiteToken(); const columns = useColumns(); @@ -64,22 +69,28 @@ const SubTokenTable: React.FC = ({ 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 = ({ 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 = ({ component }) => { + const [locale] = useLocale(locales); const [mergedGlobalTokens] = useMemo(() => { const globalTokenSet = new Set(); - let componentTokens: Record = {}; 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 ; + return ( + <> + item.token)} + component={component} + /> + + + ); }; export default React.memo(ComponentTokenTable); diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx index 3c2b17d685..e242f2f618 100644 --- a/.dumi/theme/builtins/TokenTable/index.tsx +++ b/.dumi/theme/builtins/TokenTable/index.tsx @@ -98,7 +98,7 @@ const TokenTable: FC = ({ type }) => { const data = React.useMemo( () => - Object.entries(tokenMeta) + Object.entries(tokenMeta.global) .filter(([, meta]) => meta.source === type) .map(([token, meta]) => ({ name: token, diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts index cbaa7934a2..023f2c567c 100644 --- a/components/anchor/style/index.ts +++ b/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; } diff --git a/components/avatar/style/index.ts b/components/avatar/style/index.ts index e096bf5ab0..66f4a95473 100644 --- a/components/avatar/style/index.ts +++ b/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; } diff --git a/components/breadcrumb/style/index.ts b/components/breadcrumb/style/index.ts index 1b1a32a41a..ad46f3710a 100644 --- a/components/breadcrumb/style/index.ts +++ b/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; } diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index dca20ff1d4..bacf33270c 100644 --- a/components/calendar/style/index.ts +++ b/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; } diff --git a/components/card/style/index.ts b/components/card/style/index.ts index 405206fe0f..07ddc30b35 100644 --- a/components/card/style/index.ts +++ b/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; } diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts index aa1526f4ad..eb2ae4c92e 100644 --- a/components/carousel/style/index.ts +++ b/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; } diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts index 8649e70f55..319f2e6b1a 100644 --- a/components/cascader/style/index.ts +++ b/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; } diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 1fe1f228eb..9f100a61ee 100644 --- a/components/date-picker/style/index.ts +++ b/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; } diff --git a/components/descriptions/style/index.ts b/components/descriptions/style/index.ts index a13651bff2..5d6bbc35de 100644 --- a/components/descriptions/style/index.ts +++ b/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; } diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts index 88f9a3ce94..0b5d7c60c0 100644 --- a/components/drawer/style/index.ts +++ b/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; } diff --git a/components/dropdown/style/index.ts b/components/dropdown/style/index.ts index 950e6f5d97..daf1a57ae3 100644 --- a/components/dropdown/style/index.ts +++ b/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; } diff --git a/components/image/style/index.ts b/components/image/style/index.ts index c5c2eff4e2..0397b62ce8 100644 --- a/components/image/style/index.ts +++ b/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; } diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 32b3c884e4..6ff1daf988 100644 --- a/components/input-number/style/index.ts +++ b/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; } diff --git a/components/list/style/index.ts b/components/list/style/index.ts index e04db94f3a..693c7154f4 100644 --- a/components/list/style/index.ts +++ b/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; } diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts index 3eb06a9246..b7e8adfeb1 100644 --- a/components/mentions/style/index.ts +++ b/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; } diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index eb07308344..c95cd21644 100644 --- a/components/menu/style/index.tsx +++ b/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; } diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx index 90e4691ca9..80cee4cbc5 100644 --- a/components/message/style/index.tsx +++ b/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']; } diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index d2efd10671..77e007673b 100644 --- a/components/modal/style/index.tsx +++ b/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; } diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index c34335f8c6..c14d08a802 100644 --- a/components/notification/style/index.tsx +++ b/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; } diff --git a/components/pagination/style/index.ts b/components/pagination/style/index.ts index de77900139..310a30b045 100644 --- a/components/pagination/style/index.ts +++ b/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; } diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx index 11a5c3ae5a..374f661180 100644 --- a/components/popconfirm/style/index.tsx +++ b/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; } diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 54debb4737..8502f5af14 100644 --- a/components/popover/style/index.tsx +++ b/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; } diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 1261032d96..57f82ce44e 100644 --- a/components/radio/style/index.tsx +++ b/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; } diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index 7fd439ed24..fb143a0581 100644 --- a/components/rate/style/index.tsx +++ b/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; }; diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index 156bdb3d76..abe6bd564f 100644 --- a/components/result/style/index.tsx +++ b/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']; } diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx index 210aeaf5cf..513646984d 100644 --- a/components/segmented/style/index.tsx +++ b/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; } diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 45bb9c94ba..1c7b683fa0 100644 --- a/components/select/style/index.tsx +++ b/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; } diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx index 0cca735dd2..b7d50877f3 100644 --- a/components/skeleton/style/index.tsx +++ b/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; }; diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index 93a1317b02..d166ff3673 100644 --- a/components/slider/style/index.tsx +++ b/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; } diff --git a/components/spin/style/index.tsx b/components/spin/style/index.tsx index 20848a8703..28b73f9f64 100644 --- a/components/spin/style/index.tsx +++ b/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; } diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx index b24438f20f..348601cd62 100644 --- a/components/statistic/style/index.tsx +++ b/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; } diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index 2dfad71726..ccd1658c71 100644 --- a/components/steps/style/index.tsx +++ b/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; } diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index c41a6e4635..c010b20f45 100644 --- a/components/tabs/style/index.ts +++ b/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; } diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts index c6b4674c3d..9a0e55b768 100644 --- a/components/tag/style/index.ts +++ b/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; } diff --git a/components/timeline/style/index.ts b/components/timeline/style/index.ts index a0f3d25cb6..e4f73e6922 100644 --- a/components/timeline/style/index.ts +++ b/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; } diff --git a/components/tooltip/style/index.ts b/components/tooltip/style/index.ts index 86a554ed49..466b1b5030 100644 --- a/components/tooltip/style/index.ts +++ b/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; } diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts index 96f18573ad..54e01e3e01 100644 --- a/components/transfer/style/index.ts +++ b/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; } diff --git a/components/typography/style/index.ts b/components/typography/style/index.ts index 56d7c18f50..d159ae9fcf 100644 --- a/components/typography/style/index.ts +++ b/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 = (token) => { export default genComponentStyleHook( 'Typography', (token) => [genTypographyStyle(token)], - (token) => ({ + () => ({ titleMarginTop: '1.2em', titleMarginBottom: '0.5em', - fontWeightStrong: token.fontWeightStrong, }), ); diff --git a/components/upload/style/index.ts b/components/upload/style/index.ts index 9dcfb42954..e10bf12334 100644 --- a/components/upload/style/index.ts +++ b/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; } diff --git a/scripts/generate-token-meta.ts b/scripts/generate-token-meta.ts index 37950d8e2c..39dca5c685 100644 --- a/scripts/generate-token-meta.ts +++ b/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; + map: ReturnType; + alias: ReturnType; + components: Record>; +}; + 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> = {}; - 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);