mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

docs: collect token API from tsdoc (#38964)

Browse Source 
* chore: token doc

* docs: token meta

* chore: code clean

* chore: code clean

* chore: json

* chore: rename

* chore: style
This commit is contained in:
MadCcc 2022-11-25 14:23:11 +08:00 committed by GitHub
parent 963f95faba
commit e04c2d69ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 594 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
.dumi/theme/builtins/TokenTable/index.tsx Normal file
View File

@ -0,0 +1,114 @@
import React, { FC, useMemo } from 'react';
import tokenMeta from 'antd/es/version/token-meta.json';
import { getDesignToken } from 'antd-token-previewer';
import { Table, TableProps, Tag } from 'antd';
import useLocale from '../../../hooks/useLocale';
import useSiteToken from '../../../hooks/useSiteToken';
import { css } from '@emotion/react';
type TokenTableProps = {
type: 'seed' | 'map' | 'alias';
lang: 'zh' | 'en';
};
type TokenData = {
name: string;
desc: string;
type: string;
value: any;
};
const defaultToken = getDesignToken();
const locales = {
cn: {
token: 'Token 名称',
description: '描述',
type: '类型',
value: '默认值',
},
en: {
token: 'Token Name',
description: 'Description',
type: 'Type',
value: 'Default Value',
},
};
const useStyle = () => {
const { token } = useSiteToken();
return {
codeSpan: css`
margin: 0 1px;
padding: 0.2em 0.4em;
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border: 1px solid ${token.colorSplit};
border-radius: 3px;
font-family: monospace;
`,
};
};
const TokenTable: FC<TokenTableProps> = ({ type }) => {
const styles = useStyle();
const [locale, lang] = useLocale(locales);
const columns: Exclude<TableProps<TokenData>['columns'], undefined> = [
{
title: locale.token,
key: 'name',
dataIndex: 'name',
},
{
title: locale.description,
key: 'desc',
dataIndex: 'desc',
width: 300,
},
{
title: locale.type,
key: 'type',
dataIndex: 'type',
render: (_, record) => <span css={styles.codeSpan}>{record.type}</span>,
},
{
title: locale.value,
key: 'value',
render: (_, record) => (
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
{typeof record.value === 'string' &&
(record.value.startsWith('#') || record.value.startsWith('rgb')) && (
<span
style={{
background: record.value,
display: 'inline-block',
width: 6,
height: 6,
borderRadius: '50%',
boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.06)',
marginRight: 4,
}}
></span>
)}
{typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value}
</span>
),
},
];
const data = useMemo<TokenData[]>(() => {
return tokenMeta[type].map((token) => {
return {
name: token.name,
desc: lang === 'cn' ? token.desc : token.descEn,
type: token.type,
value: (defaultToken as any)[token.name],
};
});
}, [type, lang]);
return <Table dataSource={data} columns={columns} pagination={false} bordered />;
};
export default TokenTable;

3
.gitignore vendored
View File

@ -48,7 +48,8 @@ server/
# Docs templates # Docs templates
scripts/previewEditor/index.html scripts/previewEditor/index.html
components/version/version.tsx components/version/version.tsx
components/version/token.tsx components/version/token.json
components/version/token-meta.json
.dumi/tmp .dumi/tmp
.dumi/tmp-test .dumi/tmp-test
.dumi/tmp-production .dumi/tmp-production

1
components/menu/index.en-US.md
View File

@ -129,6 +129,7 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
#### SubMenuType #### SubMenuType
<!-- prettier-ignore -->
| Property | Description | Type | Default value | Version | | Property | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - | | | children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - | |

412
components/theme/interface.ts
View File

@ -149,151 +149,505 @@ export type GlobalToken = AliasToken & ComponentTokenMap;
// ====================================================================== // ======================================================================
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
export interface SeedToken extends PresetColorType { export interface SeedToken extends PresetColorType {
// Color /**
* @desc 品牌主色
*/
colorPrimary: string; colorPrimary: string;
/**
* @desc 成功色
*/
colorSuccess: string; colorSuccess: string;
/**
* @desc 警戒色
*/
colorWarning: string; colorWarning: string;
/**
* @desc 错误色
*/
colorError: string; colorError: string;
/**
* @desc 信息色
*/
colorInfo: string; colorInfo: string;
/**
* @desc 基础文本色
*/
colorTextBase: string; colorTextBase: string;
/** Base component background color. Will derivative container background color with this */
/**
* Base component background color. Will derivative container background color with this
* @desc 基础背景色
*/
colorBgBase: string; colorBgBase: string;
// Font // Font
/**
* @desc 字体
*/
fontFamily: string; fontFamily: string;
/**
* @desc 基础字号
*/
fontSize: number; fontSize: number;
// Line /**
/** Border width of base components */ * Border width of base components
* @desc 基础线宽
*/
lineWidth: number; lineWidth: number;
/**
* @desc 线条样式
*/
lineType: string; lineType: string;
// Motion /**
* @desc 动画时长变化单位
*/
motionUnit: number; motionUnit: number;
/**
* @desc 动画基础时长
*/
motionBase: number; motionBase: number;
/**
* @desc
*/
motionEaseOutCirc: string; motionEaseOutCirc: string;
/**
* @desc
*/
motionEaseInOutCirc: string; motionEaseInOutCirc: string;
/**
* @desc
*/
motionEaseInOut: string; motionEaseInOut: string;
/**
* @desc
*/
motionEaseOutBack: string; motionEaseOutBack: string;
/**
* @desc
*/
motionEaseInBack: string; motionEaseInBack: string;
/**
* @desc
*/
motionEaseInQuint: string; motionEaseInQuint: string;
/**
* @desc
*/
motionEaseOutQuint: string; motionEaseOutQuint: string;
/**
* @desc
*/
motionEaseOut: string; motionEaseOut: string;
// Radius // Radius
/**
* @desc 基础圆角
* @descEn Base border radius
*/
borderRadius: number; borderRadius: number;
// Size /**
* @desc 尺寸变化单位
*/
sizeUnit: number; sizeUnit: number;
/**
* @desc 尺寸基础大小
*/
sizeStep: number; sizeStep: number;
/**
* @desc 组件箭头尺寸
*/
sizePopupArrow: number; sizePopupArrow: number;
// Control Base // Control Base
/**
* @desc
*/
controlHeight: number; controlHeight: number;
// zIndex /**
/** Base zIndex of component like BackTop, Affix which can be cover by large popup */ * @desc 基础 zIndex
* @descEn Base popup component zIndex
*/
zIndexBase: number; zIndexBase: number;
/** Base popup component zIndex */ /** */
/**
* @desc 浮层基础 zIndex
* @descEn Base zIndex of component like FloatButton, Affix which can be cover by large popup
*/
zIndexPopupBase: number; zIndexPopupBase: number;
// Image /**
/** Define default Image opacity. Useful when in dark-like theme */ * @desc 成功色
* @descEn Define default Image opacity. Useful when in dark-like theme
*/
opacityImage: number; opacityImage: number;
// Wireframe /**
* @desc 线框化
*/
wireframe: boolean; wireframe: boolean;
} }
export interface NeutralColorMapToken { export interface NeutralColorMapToken {
// Base /**
* @internal
*/
colorTextBase: string; colorTextBase: string;
/**
* @internal
*/
colorBgBase: string; colorBgBase: string;
// Text /**
* @desc 一级文本色
*/
colorText: string; colorText: string;
/**
* @desc 二级文本色
*/
colorTextSecondary: string; colorTextSecondary: string;
/**
* @desc 三级文本色
*/
colorTextTertiary: string; colorTextTertiary: string;
/**
* @desc 四级文本色
*/
colorTextQuaternary: string; colorTextQuaternary: string;
// Fill /**
* @desc 一级填充色
*/
colorFill: string; colorFill: string;
/**
* @desc 二级填充色
*/
colorFillSecondary: string; colorFillSecondary: string;
/**
* @desc 三级填充色
*/
colorFillTertiary: string; colorFillTertiary: string;
/**
* @desc 四级填充色
*/
colorFillQuaternary: string; colorFillQuaternary: string;
// Background /**
* @desc 组件容器背景色
*/
colorBgContainer: string; colorBgContainer: string;
/**
* @desc 浮层容器背景色
*/
colorBgElevated: string; colorBgElevated: string;
/**
* @desc 布局背景色
*/
colorBgLayout: string; colorBgLayout: string;
/**
* @desc
*/
colorBgSpotlight: string; colorBgSpotlight: string;
// Border /**
* @desc 一级边框色
*/
colorBorder: string; colorBorder: string;
/**
* @desc 二级边框色
*/
colorBorderSecondary: string; colorBorderSecondary: string;
} }
export interface ColorMapToken extends NeutralColorMapToken { export interface ColorMapToken extends NeutralColorMapToken {
// Primary // Primary
/**
* @desc 主色的浅色背景颜色
*/
colorPrimaryBg: string; // 1 colorPrimaryBg: string; // 1
/**
* @desc 主色的浅色背景色悬浮态
*/
colorPrimaryBgHover: string; // 2 colorPrimaryBgHover: string; // 2
/**
* @desc 主色的描边色
*/
colorPrimaryBorder: string; // 3 colorPrimaryBorder: string; // 3
/**
* @desc 主色的描边色悬浮态
*/
colorPrimaryBorderHover: string; // 4 colorPrimaryBorderHover: string; // 4
/**
* @desc 主色的深色悬浮态
*/
colorPrimaryHover: string; // 5 colorPrimaryHover: string; // 5
/**
* @desc 品牌主色
*/
colorPrimary: string; // 6 colorPrimary: string; // 6
/**
* @desc 主色的深色激活态
*/
colorPrimaryActive: string; // 7 colorPrimaryActive: string; // 7
/**
* @desc 主色的文本悬浮态
*/
colorPrimaryTextHover: string; // 8 colorPrimaryTextHover: string; // 8
/**
* @desc 主色的文本默认态
*/
colorPrimaryText: string; // 9 colorPrimaryText: string; // 9
/**
* @desc 主色的文本激活态
*/
colorPrimaryTextActive: string; // 10 colorPrimaryTextActive: string; // 10
// Success /**
* @desc 成功色的浅色背景颜色
*/
colorSuccessBg: string; // 1 colorSuccessBg: string; // 1
/**
* @desc 成功色的浅色背景色悬浮态
*/
colorSuccessBgHover: string; // 2 colorSuccessBgHover: string; // 2
/**
* @desc 成功色的描边色
*/
colorSuccessBorder: string; // 3 colorSuccessBorder: string; // 3
/**
* @desc 成功色的描边色悬浮态
*/
colorSuccessBorderHover: string; // 4 colorSuccessBorderHover: string; // 4
/**
* @desc 成功色的深色悬浮态
*/
colorSuccessHover: string; // 5 colorSuccessHover: string; // 5
/**
* @desc 成功色
*/
colorSuccess: string; // 6 colorSuccess: string; // 6
/**
* @desc 成功色的深色激活态
*/
colorSuccessActive: string; // 7 colorSuccessActive: string; // 7
/**
* @desc 成功色的文本悬浮态
*/
colorSuccessTextHover: string; // 8 colorSuccessTextHover: string; // 8
/**
* @desc 成功色的文本默认态
*/
colorSuccessText: string; // 9 colorSuccessText: string; // 9
/**
* @desc 成功色的文本激活态
*/
colorSuccessTextActive: string; // 10 colorSuccessTextActive: string; // 10
// Warning /**
* @desc 警戒色的浅色背景颜色
*/
colorWarningBg: string; // 1 colorWarningBg: string; // 1
/**
* @desc 警戒色的浅色背景色悬浮态
*/
colorWarningBgHover: string; // 2 colorWarningBgHover: string; // 2
/**
* @desc 警戒色的描边色
*/
colorWarningBorder: string; // 3 colorWarningBorder: string; // 3
/**
* @desc 警戒色的描边色悬浮态
*/
colorWarningBorderHover: string; // 4 colorWarningBorderHover: string; // 4
/**
* @desc 警戒色的深色悬浮态
*/
colorWarningHover: string; // 5 colorWarningHover: string; // 5
/**
* @desc 警戒色
*/
colorWarning: string; // 6 colorWarning: string; // 6
/**
* @desc 警戒色的深色激活态
*/
colorWarningActive: string; // 7 colorWarningActive: string; // 7
/**
* @desc 警戒色的文本悬浮态
*/
colorWarningTextHover: string; // 8 colorWarningTextHover: string; // 8
/**
* @desc 警戒色的文本默认态
*/
colorWarningText: string; // 9 colorWarningText: string; // 9
/**
* @desc 警戒色的文本激活态
*/
colorWarningTextActive: string; // 10 colorWarningTextActive: string; // 10
// Error /**
* @desc 错误色的浅色背景颜色
*/
colorErrorBg: string; // 1 colorErrorBg: string; // 1
/**
* @desc 错误色的浅色背景色悬浮态
*/
colorErrorBgHover: string; // 2 colorErrorBgHover: string; // 2
/**
* @desc 错误色的描边色
*/
colorErrorBorder: string; // 3 colorErrorBorder: string; // 3
/**
* @desc 错误色的描边色悬浮态
*/
colorErrorBorderHover: string; // 4 colorErrorBorderHover: string; // 4
/**
* @desc 错误色的深色悬浮态
*/
colorErrorHover: string; // 5 colorErrorHover: string; // 5
/**
* @desc 错误色
*/
colorError: string; // 6 colorError: string; // 6
/**
* @desc 错误色的深色激活态
*/
colorErrorActive: string; // 7 colorErrorActive: string; // 7
/**
* @desc 错误色的文本悬浮态
*/
colorErrorTextHover: string; // 8 colorErrorTextHover: string; // 8
/**
* @desc 错误色的文本默认态
*/
colorErrorText: string; // 9 colorErrorText: string; // 9
/**
* @desc 错误色的文本激活态
*/
colorErrorTextActive: string; // 10 colorErrorTextActive: string; // 10
// Info /**
* @desc 信息色的浅色背景颜色
*/
colorInfoBg: string; // 1 colorInfoBg: string; // 1
/**
* @desc 信息色的浅色背景色悬浮态
*/
colorInfoBgHover: string; // 2 colorInfoBgHover: string; // 2
/**
* @desc 信息色的描边色
*/
colorInfoBorder: string; // 3 colorInfoBorder: string; // 3
/**
* @desc 信息色的描边色悬浮态
*/
colorInfoBorderHover: string; // 4 colorInfoBorderHover: string; // 4
/**
* @desc 信息色的深色悬浮态
*/
colorInfoHover: string; // 5 colorInfoHover: string; // 5
/**
* @desc 信息色
*/
colorInfo: string; // 6 colorInfo: string; // 6
/**
* @desc 信息色的深色激活态
*/
colorInfoActive: string; // 7 colorInfoActive: string; // 7
/**
* @desc 信息色的文本悬浮态
*/
colorInfoTextHover: string; // 8 colorInfoTextHover: string; // 8
/**
* @desc 信息色的文本默认态
*/
colorInfoText: string; // 9 colorInfoText: string; // 9
/**
* @desc 信息色的文本激活态
*/
colorInfoTextActive: string; // 10 colorInfoTextActive: string; // 10
/**
* @desc 浮层的背景蒙层颜色
*/
colorBgMask: string; colorBgMask: string;
colorWhite: string; colorWhite: string;
} }
@ -322,7 +676,13 @@ export interface HeightMapToken {
export interface CommonMapToken { export interface CommonMapToken {
// Font // Font
/**
* @internal
*/
fontSizes: number[]; fontSizes: number[];
/**
* @internal
*/
lineHeights: number[]; lineHeights: number[];
// Line // Line
@ -492,14 +852,24 @@ export interface AliasToken extends MapToken {
controlTmpOutline: string; controlTmpOutline: string;
// FIXME: component box-shadow, should be removed // FIXME: component box-shadow, should be removed
/** @internal */
boxShadowPopoverArrow: string; boxShadowPopoverArrow: string;
/** @internal */
boxShadowCard: string; boxShadowCard: string;
/** @internal */
boxShadowDrawerRight: string; boxShadowDrawerRight: string;
/** @internal */
boxShadowDrawerLeft: string; boxShadowDrawerLeft: string;
/** @internal */
boxShadowDrawerUp: string; boxShadowDrawerUp: string;
/** @internal */
boxShadowDrawerDown: string; boxShadowDrawerDown: string;
/** @internal */
boxShadowTabsOverflowLeft: string; boxShadowTabsOverflowLeft: string;
/** @internal */
boxShadowTabsOverflowRight: string; boxShadowTabsOverflowRight: string;
/** @internal */
boxShadowTabsOverflowTop: string; boxShadowTabsOverflowTop: string;
/** @internal */
boxShadowTabsOverflowBottom: string; boxShadowTabsOverflowBottom: string;
} }

215
docs/react/customize-theme.en-US.md
View File

@ -318,228 +318,19 @@ export default () => {
### SeedToken ### SeedToken
| Property | Description | Type | Default | <TokenTable type="seed"></TokenTable>
| --- | --- | --- | --- |
| colorPrimary | 品牌主色 | `string` | `#1677ff` |
| colorSuccess | 成功色 | `string` | `#52c41a` |
| colorWarning | 警戒色 | `string` | `#faad14` |
| colorError | 错误色 | `string` | `#ff4d4f` |
| colorInfo | 信息色 | `string` | `#1677ff` |
| colorTextBase | 基础文本色 | `string` | `#000` |
| colorTextLightSolid | 亮色文本色 | `string` | `#fff` |
| colorBgBase | 基础背景色 | `string` | `#fff` |
| fontFamily | 字体 | `string` | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'` |
| fontSize | 基础字号 | `number` | `14` |
| lineWidth | 基础线宽 | `number` | `1` |
| lineType | 线条样式 | `string` | `solid` |
| motionUnit | 动画时长变化单位 | `number` | `0.1` |
| motionBase | 动画基础时长 | `number` | `0` |
| motionEaseOutCirc | - | `string` | `cubic-bezier(0.08, 0.82, 0.17, 1)` |
| motionEaseInOutCirc | - | `string` | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` |
| motionEaseOut | - | `string` | `cubic-bezier(0.215, 0.61, 0.355, 1)` |
| motionEaseInOut | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
| motionEaseOutBack | - | `string` | `cubic-bezier(0.12, 0.4, 0.29, 1.46)` |
| motionEaseInQuint | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
| motionEaseOutQuint | - | `string` | `cubic-bezier(0.23, 1, 0.32, 1)` |
| borderRadius | 基础圆角 | `number` | `6` |
| sizeUnit | 尺寸变化单位 | `number` | `4` |
| sizeStep | 尺寸基础大小 | `number` | `4` |
| sizePopupArrow | 组件箭头尺寸 | `number` | `16` |
| controlHeight | - | `number` | `32` |
| zIndexBase | 基础 `z-index` | `number` | `0` |
| zIndexPopupBase | 浮层基础 `z-index` | `number` | `1000` |
| opacityImage | - | `number` | `1` |
| wireframe | 线框化 | `boolean` | `false` |
### MapToken ### MapToken
> 继承所有 SeedToken 的 Property > 继承所有 SeedToken 的 Property
| Property | Description | Type | Default | <TokenTable type="map"></TokenTable>
| --- | --- | --- | --- |
| colorText | 一级文本色 | `string` | `rgba(0, 0, 0, 0.88)` |
| colorTextSecondary | 二级文本色 | `string` | `rgba(0, 0, 0, 0.65)` |
| colorTextTertiary | 三级文本色 | `string` | `rgba(0, 0, 0, 0.45)` |
| colorTextQuaternary | 四级文本色 | `string` | `rgba(0, 0, 0, 0.25)` |
| colorFill | 一级填充色 | `string` | `rgba(0, 0, 0, 0.15)` |
| colorFillSecondary | 二级填充色 | `string` | `rgba(0, 0, 0, 0.06)` |
| colorFillTertiary | 三级填充色 | `string` | `rgba(0, 0, 0, 0.04)` |
| colorFillQuaternary | 四级填充色 | `string` | `rgba(0, 0, 0, 0.02)` |
| colorBgContainer | 组件容器背景色 | `string` | `#ffffff` |
| colorBgElevated | 浮层容器背景色 | `string` | `#ffffff` |
| colorBgLayout | 布局背景色 | `string` | `#f5f5f5` |
| colorBgSpotlight | - | `string` | `rgba(0, 0, 0, 0.85)` |
| colorBorder | 一级边框色 | `string` | `#d9d9d9` |
| colorBorderSecondary | 二级边框色 | `string` | `#f0f0f0` |
| colorSplit | 分割线颜色 | `string` | `rgba(0, 0, 0, 0.06)` |
| colorPrimaryBg | 主色的浅色背景颜色 | `string` | `#e6f4ff` |
| colorPrimaryBgHover | 主色的浅色背景色悬浮态 | `string` | `#bae0ff` |
| colorPrimaryBorder | 主色的描边色 | `string` | `#91caff` |
| colorPrimaryBorderHover | 主色的描边色悬浮态 | `string` | `#69b1ff` |
| colorPrimaryHover | 主色的深色悬浮态 | `string` | `#4096ff` |
| colorPrimary | 品牌主色 | `string` | `#1677ff` |
| colorPrimaryActive | 主色的深色激活态 | `string` | `#0958d9` |
| colorPrimaryTextHover | 主色的文本悬浮态 | `string` | `#4096ff` |
| colorPrimaryText | 主色的文本默认态 | `string` | `#1677ff` |
| colorPrimaryTextActive | 主色的文本激活态 | `string` | `#0958d9` |
| colorSuccessBg | 成功色的浅色背景颜色 | `string` | `#f6ffed` |
| colorSuccessBgHover | 成功色的浅色背景色悬浮态 | `string` | `#d9f7be` |
| colorSuccessBorder | 成功色的描边色 | `string` | `#b7eb8f` |
| colorSuccessBorderHover | 成功色的描边色悬浮态 | `string` | `#95de64` |
| colorSuccessHover | 成功色的深色悬浮态 | `string` | `#95de64` |
| colorSuccess | 成功色 | `string` | `#52c41a` |
| colorSuccessActive | 成功色的深色激活态 | `string` | `#389e0d` |
| colorSuccessTextHover | 成功色的文本悬浮态 | `string` | `#73d13d` |
| colorSuccessText | 成功色的文本默认态 | `string` | `#52c41a` |
| colorSuccessTextActive | 成功色的文本激活态 | `string` | `#389e0d` |
| colorWarningBg | 警戒色的浅色背景颜色 | `string` | `#fffbe6` |
| colorWarningBgHover | 警戒色的浅色背景色悬浮态 | `string` | `#fff1b8` |
| colorWarningBorder | 警戒色的描边色 | `string` | `#ffe58f` |
| colorWarningBorderHover | 警戒色的描边色悬浮态 | `string` | `#ffd666` |
| colorWarningHover | 警戒色的深色悬浮态 | `string` | `#ffd666` |
| colorWarning | 警戒色 | `string` | `#faad14` |
| colorWarningActive | 警戒色的深色激活态 | `string` | `#d48806` |
| colorWarningTextHover | 警戒色的文本悬浮态 | `string` | `#ffc53d` |
| colorWarningText | 警戒色的文本默认态 | `string` | `#faad14` |
| colorWarningTextActive | 警戒色的文本激活态 | `string` | `#d48806` |
| colorErrorBg | 错误色的浅色背景颜色 | `string` | `#fff1f0` |
| colorErrorBgHover | 错误色的浅色背景色悬浮态 | `string` | `#ffccc7` |
| colorErrorBorder | 错误色的描边色 | `string` | `#ffa39e` |
| colorErrorBorderHover | 错误色的描边色悬浮态 | `string` | `#ff7875` |
| colorErrorHover | 错误色的深色悬浮态 | `string` | `#ff7875` |
| colorError | 错误色 | `string` | `#ff4d4f` |
| colorErrorActive | 错误色的深色激活态 | `string` | `#cf1322` |
| colorErrorTextHover | 错误色的文本悬浮态 | `string` | `#ff4d4f` |
| colorErrorText | 错误色的文本默认态 | `string` | `#f5222d` |
| colorErrorTextActive | 错误色的文本激活态 | `string` | `#cf1322` |
| colorInfoBg | 信息色的浅色背景颜色 | `string` | `#e6f4ff` |
| colorInfoBgHover | 信息色的浅色背景色悬浮态 | `string` | `#bae0ff` |
| colorInfoBorder | 信息色的描边色 | `string` | `#91caff` |
| colorInfoBorderHover | 信息色的描边色悬浮态 | `string` | `#69b1ff` |
| colorInfoHover | 信息色的深色悬浮态 | `string` | `#69b1ff` |
| colorInfo | 信息色 | `string` | `#e6f4ff` |
| colorInfoActive | 信息色的深色激活态 | `string` | `#0958d9` |
| colorInfoTextHover | 信息色的文本悬浮态 | `string` | `#4096ff` |
| colorInfoText | 信息色的文本默认态 | `string` | `#1677ff` |
| colorInfoTextActive | 信息色的文本激活态 | `string` | `#0958d9` |
| colorBgMask | 浮层的背景蒙层颜色 | `string` | `rgba(0, 0, 0, 0.45)` |
| sizeXXL | - | `number` | `48` |
| sizeXL | - | `number` | `32` |
| sizeLG | - | `number` | `24` |
| sizeMD | - | `number` | `20` |
| sizeMS | - | `number` | `16` |
| size | - | `number` | `16` |
| sizeSM | - | `number` | `12` |
| sizeXS | - | `number` | `8` |
| sizeXXS | - | `number` | `4` |
| lineWidthBold | 较粗的线宽 | `number` | `2` |
| motionDurationFast | 动画速度快 | `string` | `0.1s` |
| motionDurationMid | 动画速度中等 | `string` | `0.2s` |
| motionDurationSlow | 动画速度慢 | `string` | `0.3s` |
| borderRadiusXS | 更小的圆角 | `number` | `2` |
| borderRadiusSM | 较小的圆角 | `number` | `4` |
| borderRadiusLG | 较大的圆角 | `number` | `8` |
| borderRadiusOuter | 向外的圆角（常用于箭头与其他元素相接处） | `number` | `4` |
| controlHeightXS | - | `number` | `24` |
| controlHeightSM | - | `number` | `16` |
| controlHeightLG | - | `number` | `40` |
### AliasToken ### AliasToken
> 继承所有 SeedToken 和 MapToken 的 Property > 继承所有 SeedToken 和 MapToken 的 Property
| Property | Description | Type | Default | <TokenTable type="alias"></TokenTable>
| --- | --- | --- | --- |
| colorFillContent | - | `string` | `rgba(0, 0, 0, 0.06)` |
| colorFillContentHover | - | `string` | `rgba(0, 0, 0, 0.12)` |
| colorFillAlter | - | `string` | `rgba(0, 0, 0, 0.02)` |
| colorBgContainerDisabled | - | `string` | `rgba(0, 0, 0, 0.04)` |
| colorBorderBg | - | `string` | `#ffffff` |
| colorSplit | - | `string` | `rgba(0, 0, 0, 0.06)` |
| colorTextPlaceholder | - | `string` | `rgba(0, 0, 0, 0.25)` |
| colorTextDisabled | - | `string` | `rgba(0, 0, 0, 0.25)` |
| colorTextHeading | - | `string` | `rgba(0, 0, 0, 0.85)` |
| colorTextLabel | - | `string` | `rgba(0, 0, 0, 0.65)` |
| colorTextDescription | - | `string` | `rgba(0, 0, 0, 0.45)` |
| colorBgTextHover | - | `string` | `rgba(0, 0, 0, 0.06)` |
| colorBgTextActive | - | `string` | `rgba(0, 0, 0, 0.15)` |
| colorIcon | - | `string` | `rgba(0, 0, 0, 0.45)` |
| colorIconHover | - | `string` | `rgba(0, 0, 0, 0.88)` |
| colorLink | - | `string` | `#1677ff` |
| colorLinkHover | - | `string` | `#69b1ff` |
| colorLinkActive | - | `string` | `#0958d9` |
| colorHighlight | - | `string` | `#ff4d4f` |
| controlOutline | - | `string` | `rgba(5, 145, 255, 0.1)` |
| colorWarningOutline | - | `string` | `rgba(255, 215, 5, 0.1)` |
| colorErrorOutline | - | `string` | `rgba(255, 22, 5, 0.06)` |
| fontSizeSM | - | `number` | `12` |
| fontSize | - | `number` | `14` |
| fontSizeLG | - | `number` | `16` |
| fontSizeXL | - | `number` | `20` |
| fontSizeIcon | - | `number` | `12` |
| fontSizeHeading1 | - | `number` | `38` |
| fontSizeHeading2 | - | `number` | `30` |
| fontSizeHeading3 | - | `number` | `24` |
| fontSizeHeading4 | - | `number` | `20` |
| fontSizeHeading5 | - | `number` | `16` |
| fontWeightStrong | - | `number` | `600` |
| lineHeight | - | `number` | `1.5714` |
| lineHeightLG | - | `number` | `1.5` |
| lineHeightSM | - | `number` | `1.6667` |
| lineHeightHeading1 | - | `number` | `1.2105` |
| lineHeightHeading2 | - | `number` | `1.2667` |
| lineHeightHeading3 | - | `number` | `1.3333` |
| lineHeightHeading4 | - | `number` | `1.4` |
| lineHeightHeading5 | - | `number` | `1.5` |
| controlLineWidth | - | `number` | `1` |
| controlLineType | - | `string` | `solid` |
| controlOutlineWidth | - | `number` | `8` |
| controlItemBgHover | - | `string` | `rgba(0, 0, 0, 0.04)` |
| controlItemBgActive | - | `string` | `#e6f4ff` |
| controlItemBgActiveHover | - | `string` | `#bae0ff` |
| controlInteractiveSize | - | `number` | `16` |
| controlItemBgActiveDisabled | - | `string` | `rgba(0, 0, 0, 0.15)` |
| controlTmpOutline | - | `string` | `rgba(0, 0, 0, 0.02)` |
| opacityLoading | - | `number` | `0.65` |
| padding | - | `number` | `16` |
| paddingSM | - | `number` | `12` |
| paddingXS | - | `number` | `8` |
| paddingXXS | - | `number` | `4` |
| paddingLG | - | `number` | `24` |
| paddingXL | - | `number` | `32` |
| paddingTmp | - | `number` | `20` |
| margin | - | `number` | `16` |
| marginSM | - | `number` | `12` |
| marginXS | - | `number` | `8` |
| marginXXS | - | `number` | `4` |
| marginLG | - | `number` | `24` |
| marginXL | - | `number` | `32` |
| marginXXL | - | `number` | `48` |
| boxShadow | - | `string` | `0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)` |
| boxShadowSecondary | - | `string` | `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` |
| linkDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
| linkHoverDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
| linkFocusDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
| controlPaddingHorizontal | - | `number` | `12` |
| controlPaddingHorizontalSM | - | `number` | `8` |
| screenXS | - | `number` | `480` |
| screenXSMin | - | `number` | `480` |
| screenXSMax | - | `number` | `479` |
| screenSM | - | `number` | `576` |
| screenSMMin | - | `number` | `576` |
| screenSMMax | - | `number` | `575` |
| screenMD | - | `number` | `768` |
| screenMDMin | - | `number` | `768` |
| screenMDMax | - | `number` | `767` |
| screenLG | - | `number` | `992` |
| screenLGMin | - | `number` | `992` |
| screenLGMax | - | `number` | `991` |
| screenXL | - | `number` | `1200` |
| screenXLMin | - | `number` | `1200` |
| screenXLMax | - | `number` | `1199` |
| screenXXL | - | `number` | `1600` |
| screenXXLMin | - | `number` | `1599` |
| screenXXLMax | - | `number` | `1600` |
## How to Debug your Theme ## How to Debug your Theme

215
docs/react/customize-theme.zh-CN.md
View File

@ -318,228 +318,19 @@ export default () => {
### SeedToken ### SeedToken
| 属性 | 说明 | 类型 | 默认值 | <TokenTable type="seed"></TokenTable>
| --- | --- | --- | --- |
| colorPrimary | 品牌主色 | `string` | `#1677ff` |
| colorSuccess | 成功色 | `string` | `#52c41a` |
| colorWarning | 警戒色 | `string` | `#faad14` |
| colorError | 错误色 | `string` | `#ff4d4f` |
| colorInfo | 信息色 | `string` | `#1677ff` |
| colorTextBase | 基础文本色 | `string` | `#000` |
| colorTextLightSolid | 亮色文本色 | `string` | `#fff` |
| colorBgBase | 基础背景色 | `string` | `#fff` |
| fontFamily | 字体 | `string` | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'` |
| fontSize | 基础字号 | `number` | `14` |
| lineWidth | 基础线宽 | `number` | `1` |
| lineType | 线条样式 | `string` | `solid` |
| motionUnit | 动画时长变化单位 | `number` | `0.1` |
| motionBase | 动画基础时长 | `number` | `0` |
| motionEaseOutCirc | - | `string` | `cubic-bezier(0.08, 0.82, 0.17, 1)` |
| motionEaseInOutCirc | - | `string` | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` |
| motionEaseOut | - | `string` | `cubic-bezier(0.215, 0.61, 0.355, 1)` |
| motionEaseInOut | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
| motionEaseOutBack | - | `string` | `cubic-bezier(0.12, 0.4, 0.29, 1.46)` |
| motionEaseInQuint | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
| motionEaseOutQuint | - | `string` | `cubic-bezier(0.23, 1, 0.32, 1)` |
| borderRadius | 基础圆角 | `number` | `6` |
| sizeUnit | 尺寸变化单位 | `number` | `4` |
| sizeStep | 尺寸基础大小 | `number` | `4` |
| sizePopupArrow | 组件箭头尺寸 | `number` | `16` |
| controlHeight | - | `number` | `32` |
| zIndexBase | 基础 `z-index` | `number` | `0` |
| zIndexPopupBase | 浮层基础 `z-index` | `number` | `1000` |
| opacityImage | - | `number` | `1` |
| wireframe | 线框化 | `boolean` | `false` |
### MapToken ### MapToken
> 继承所有 SeedToken 的属性 > 继承所有 SeedToken 的属性
| 属性 | 说明 | 类型 | 默认值 | <TokenTable type="map"></TokenTable>
| --- | --- | --- | --- |
| colorText | 一级文本色 | `string` | `rgba(0, 0, 0, 0.88)` |
| colorTextSecondary | 二级文本色 | `string` | `rgba(0, 0, 0, 0.65)` |
| colorTextTertiary | 三级文本色 | `string` | `rgba(0, 0, 0, 0.45)` |
| colorTextQuaternary | 四级文本色 | `string` | `rgba(0, 0, 0, 0.25)` |
| colorFill | 一级填充色 | `string` | `rgba(0, 0, 0, 0.15)` |
| colorFillSecondary | 二级填充色 | `string` | `rgba(0, 0, 0, 0.06)` |
| colorFillTertiary | 三级填充色 | `string` | `rgba(0, 0, 0, 0.04)` |
| colorFillQuaternary | 四级填充色 | `string` | `rgba(0, 0, 0, 0.02)` |
| colorBgContainer | 组件容器背景色 | `string` | `#ffffff` |
| colorBgElevated | 浮层容器背景色 | `string` | `#ffffff` |
| colorBgLayout | 布局背景色 | `string` | `#f5f5f5` |
| colorBgSpotlight | - | `string` | `rgba(0, 0, 0, 0.85)` |
| colorBorder | 一级边框色 | `string` | `#d9d9d9` |
| colorBorderSecondary | 二级边框色 | `string` | `#f0f0f0` |
| colorSplit | 分割线颜色 | `string` | `rgba(0, 0, 0, 0.06)` |
| colorPrimaryBg | 主色的浅色背景颜色 | `string` | `#e6f4ff` |
| colorPrimaryBgHover | 主色的浅色背景色悬浮态 | `string` | `#bae0ff` |
| colorPrimaryBorder | 主色的描边色 | `string` | `#91caff` |
| colorPrimaryBorderHover | 主色的描边色悬浮态 | `string` | `#69b1ff` |
| colorPrimaryHover | 主色的深色悬浮态 | `string` | `#4096ff` |
| colorPrimary | 品牌主色 | `string` | `#1677ff` |
| colorPrimaryActive | 主色的深色激活态 | `string` | `#0958d9` |
| colorPrimaryTextHover | 主色的文本悬浮态 | `string` | `#4096ff` |
| colorPrimaryText | 主色的文本默认态 | `string` | `#1677ff` |
| colorPrimaryTextActive | 主色的文本激活态 | `string` | `#0958d9` |
| colorSuccessBg | 成功色的浅色背景颜色 | `string` | `#f6ffed` |
| colorSuccessBgHover | 成功色的浅色背景色悬浮态 | `string` | `#d9f7be` |
| colorSuccessBorder | 成功色的描边色 | `string` | `#b7eb8f` |
| colorSuccessBorderHover | 成功色的描边色悬浮态 | `string` | `#95de64` |
| colorSuccessHover | 成功色的深色悬浮态 | `string` | `#95de64` |
| colorSuccess | 成功色 | `string` | `#52c41a` |
| colorSuccessActive | 成功色的深色激活态 | `string` | `#389e0d` |
| colorSuccessTextHover | 成功色的文本悬浮态 | `string` | `#73d13d` |
| colorSuccessText | 成功色的文本默认态 | `string` | `#52c41a` |
| colorSuccessTextActive | 成功色的文本激活态 | `string` | `#389e0d` |
| colorWarningBg | 警戒色的浅色背景颜色 | `string` | `#fffbe6` |
| colorWarningBgHover | 警戒色的浅色背景色悬浮态 | `string` | `#fff1b8` |
| colorWarningBorder | 警戒色的描边色 | `string` | `#ffe58f` |
| colorWarningBorderHover | 警戒色的描边色悬浮态 | `string` | `#ffd666` |
| colorWarningHover | 警戒色的深色悬浮态 | `string` | `#ffd666` |
| colorWarning | 警戒色 | `string` | `#faad14` |
| colorWarningActive | 警戒色的深色激活态 | `string` | `#d48806` |
| colorWarningTextHover | 警戒色的文本悬浮态 | `string` | `#ffc53d` |
| colorWarningText | 警戒色的文本默认态 | `string` | `#faad14` |
| colorWarningTextActive | 警戒色的文本激活态 | `string` | `#d48806` |
| colorErrorBg | 错误色的浅色背景颜色 | `string` | `#fff1f0` |
| colorErrorBgHover | 错误色的浅色背景色悬浮态 | `string` | `#ffccc7` |
| colorErrorBorder | 错误色的描边色 | `string` | `#ffa39e` |
| colorErrorBorderHover | 错误色的描边色悬浮态 | `string` | `#ff7875` |
| colorErrorHover | 错误色的深色悬浮态 | `string` | `#ff7875` |
| colorError | 错误色 | `string` | `#ff4d4f` |
| colorErrorActive | 错误色的深色激活态 | `string` | `#cf1322` |
| colorErrorTextHover | 错误色的文本悬浮态 | `string` | `#ff4d4f` |
| colorErrorText | 错误色的文本默认态 | `string` | `#f5222d` |
| colorErrorTextActive | 错误色的文本激活态 | `string` | `#cf1322` |
| colorInfoBg | 信息色的浅色背景颜色 | `string` | `#e6f4ff` |
| colorInfoBgHover | 信息色的浅色背景色悬浮态 | `string` | `#bae0ff` |
| colorInfoBorder | 信息色的描边色 | `string` | `#91caff` |
| colorInfoBorderHover | 信息色的描边色悬浮态 | `string` | `#69b1ff` |
| colorInfoHover | 信息色的深色悬浮态 | `string` | `#69b1ff` |
| colorInfo | 信息色 | `string` | `#e6f4ff` |
| colorInfoActive | 信息色的深色激活态 | `string` | `#0958d9` |
| colorInfoTextHover | 信息色的文本悬浮态 | `string` | `#4096ff` |
| colorInfoText | 信息色的文本默认态 | `string` | `#1677ff` |
| colorInfoTextActive | 信息色的文本激活态 | `string` | `#0958d9` |
| colorBgMask | 浮层的背景蒙层颜色 | `string` | `rgba(0, 0, 0, 0.45)` |
| sizeXXL | - | `number` | `48` |
| sizeXL | - | `number` | `32` |
| sizeLG | - | `number` | `24` |
| sizeMD | - | `number` | `20` |
| sizeMS | - | `number` | `16` |
| size | - | `number` | `16` |
| sizeSM | - | `number` | `12` |
| sizeXS | - | `number` | `8` |
| sizeXXS | - | `number` | `4` |
| lineWidthBold | 较粗的线宽 | `number` | `2` |
| motionDurationFast | 动画速度快 | `string` | `0.1s` |
| motionDurationMid | 动画速度中等 | `string` | `0.2s` |
| motionDurationSlow | 动画速度慢 | `string` | `0.3s` |
| borderRadiusXS | 更小的圆角 | `number` | `2` |
| borderRadiusSM | 较小的圆角 | `number` | `4` |
| borderRadiusLG | 较大的圆角 | `number` | `8` |
| borderRadiusOuter | 向外的圆角（常用于箭头与其他元素相接处） | `number` | `4` |
| controlHeightXS | - | `number` | `24` |
| controlHeightSM | - | `number` | `16` |
| controlHeightLG | - | `number` | `40` |
### AliasToken ### AliasToken
> 继承所有 SeedToken 和 MapToken 的属性 > 继承所有 SeedToken 和 MapToken 的属性
| 属性 | 说明 | 类型 | 默认值 | <TokenTable type="alias"></TokenTable>
| --- | --- | --- | --- |
| colorFillContent | - | `string` | `rgba(0, 0, 0, 0.06)` |
| colorFillContentHover | - | `string` | `rgba(0, 0, 0, 0.12)` |
| colorFillAlter | - | `string` | `rgba(0, 0, 0, 0.02)` |
| colorBgContainerDisabled | - | `string` | `rgba(0, 0, 0, 0.04)` |
| colorBorderBg | - | `string` | `#ffffff` |
| colorSplit | - | `string` | `rgba(0, 0, 0, 0.06)` |
| colorTextPlaceholder | - | `string` | `rgba(0, 0, 0, 0.25)` |
| colorTextDisabled | - | `string` | `rgba(0, 0, 0, 0.25)` |
| colorTextHeading | - | `string` | `rgba(0, 0, 0, 0.85)` |
| colorTextLabel | - | `string` | `rgba(0, 0, 0, 0.65)` |
| colorTextDescription | - | `string` | `rgba(0, 0, 0, 0.45)` |
| colorBgTextHover | - | `string` | `rgba(0, 0, 0, 0.06)` |
| colorBgTextActive | - | `string` | `rgba(0, 0, 0, 0.15)` |
| colorIcon | - | `string` | `rgba(0, 0, 0, 0.45)` |
| colorIconHover | - | `string` | `rgba(0, 0, 0, 0.88)` |
| colorLink | - | `string` | `#1677ff` |
| colorLinkHover | - | `string` | `#69b1ff` |
| colorLinkActive | - | `string` | `#0958d9` |
| colorHighlight | - | `string` | `#ff4d4f` |
| controlOutline | - | `string` | `rgba(5, 145, 255, 0.1)` |
| colorWarningOutline | - | `string` | `rgba(255, 215, 5, 0.1)` |
| colorErrorOutline | - | `string` | `rgba(255, 22, 5, 0.06)` |
| fontSizeSM | - | `number` | `12` |
| fontSize | - | `number` | `14` |
| fontSizeLG | - | `number` | `16` |
| fontSizeXL | - | `number` | `20` |
| fontSizeIcon | - | `number` | `12` |
| fontSizeHeading1 | - | `number` | `38` |
| fontSizeHeading2 | - | `number` | `30` |
| fontSizeHeading3 | - | `number` | `24` |
| fontSizeHeading4 | - | `number` | `20` |
| fontSizeHeading5 | - | `number` | `16` |
| fontWeightStrong | - | `number` | `600` |
| lineHeight | - | `number` | `1.5714` |
| lineHeightLG | - | `number` | `1.5` |
| lineHeightSM | - | `number` | `1.6667` |
| lineHeightHeading1 | - | `number` | `1.2105` |
| lineHeightHeading2 | - | `number` | `1.2667` |
| lineHeightHeading3 | - | `number` | `1.3333` |
| lineHeightHeading4 | - | `number` | `1.4` |
| lineHeightHeading5 | - | `number` | `1.5` |
| controlLineWidth | - | `number` | `1` |
| controlLineType | - | `string` | `solid` |
| controlOutlineWidth | - | `number` | `8` |
| controlItemBgHover | - | `string` | `rgba(0, 0, 0, 0.04)` |
| controlItemBgActive | - | `string` | `#e6f4ff` |
| controlItemBgActiveHover | - | `string` | `#bae0ff` |
| controlInteractiveSize | - | `number` | `16` |
| controlItemBgActiveDisabled | - | `string` | `rgba(0, 0, 0, 0.15)` |
| controlTmpOutline | - | `string` | `rgba(0, 0, 0, 0.02)` |
| opacityLoading | - | `number` | `0.65` |
| padding | - | `number` | `16` |
| paddingSM | - | `number` | `12` |
| paddingXS | - | `number` | `8` |
| paddingXXS | - | `number` | `4` |
| paddingLG | - | `number` | `24` |
| paddingXL | - | `number` | `32` |
| paddingTmp | - | `number` | `20` |
| margin | - | `number` | `16` |
| marginSM | - | `number` | `12` |
| marginXS | - | `number` | `8` |
| marginXXS | - | `number` | `4` |
| marginLG | - | `number` | `24` |
| marginXL | - | `number` | `32` |
| marginXXL | - | `number` | `48` |
| boxShadow | - | `string` | `0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)` |
| boxShadowSecondary | - | `string` | `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` |
| linkDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
| linkHoverDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
| linkFocusDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
| controlPaddingHorizontal | - | `number` | `12` |
| controlPaddingHorizontalSM | - | `number` | `8` |
| screenXS | - | `number` | `480` |
| screenXSMin | - | `number` | `480` |
| screenXSMax | - | `number` | `479` |
| screenSM | - | `number` | `576` |
| screenSMMin | - | `number` | `576` |
| screenSMMax | - | `number` | `575` |
| screenMD | - | `number` | `768` |
| screenMDMin | - | `number` | `768` |
| screenMDMax | - | `number` | `767` |
| screenLG | - | `number` | `992` |
| screenLGMin | - | `number` | `992` |
| screenLGMax | - | `number` | `991` |
| screenXL | - | `number` | `1200` |
| screenXLMin | - | `number` | `1200` |
| screenXLMax | - | `number` | `1199` |
| screenXXL | - | `number` | `1600` |
| screenXXLMin | - | `number` | `1599` |
| screenXXLMax | - | `number` | `1600` |
## 调试主题 ## 调试主题

10
package.json
View File

@ -55,11 +55,12 @@
"clean": "antd-tools run clean && rm -rf es lib coverage dist report.html", "clean": "antd-tools run clean && rm -rf es lib coverage dist report.html",
"clean-lockfiles": "rm -rf package-lock.json yarn.lock", "clean-lockfiles": "rm -rf package-lock.json yarn.lock",
"collect-token-statistic": "ts-node --project tsconfig.node.json scripts/collect-token-statistic.js", "collect-token-statistic": "ts-node --project tsconfig.node.json scripts/collect-token-statistic.js",
"prestart": "npm run version && npm run collect-token-statistic", "token-meta": "node scripts/generate-token-meta.js",
"precompile": "npm run version && npm run collect-token-statistic", "prestart": "npm run version & npm run collect-token-statistic & npm run token-meta",
"precompile": "npm run version & npm run collect-token-statistic & npm run token-meta",
"pretest": "npm run version", "pretest": "npm run version",
"predist": "npm run version", "predist": "npm run version",
"presite": "npm run version && npm run collect-token-statistic", "presite": "npm run version & npm run collect-token-statistic & npm run token-meta",
"compile": "npm run clean && antd-tools run compile", "compile": "npm run clean && antd-tools run compile",
"changelog": "node ./scripts/print-changelog", "changelog": "node ./scripts/print-changelog",
"predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test", "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
@ -78,7 +79,7 @@
"lint:script": "eslint . --ext .js,.jsx,.ts,.tsx", "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx",
"pre-publish": "npm run test-all -- --skip-build", "pre-publish": "npm run test-all -- --skip-build",
"prettier": "prettier -c --write **/*", "prettier": "prettier -c --write **/*",
"pub": "npm run version && npm run collect-token-statistic && antd-tools run pub", "pub": "npm run version && npm run collect-token-statistic && npm run token-meta && antd-tools run pub",
"rome:format": "rome format --write .", "rome:format": "rome format --write .",
"prepublishOnly": "antd-tools run guard", "prepublishOnly": "antd-tools run guard",
"postpublish": "node ./scripts/post-script.js", "postpublish": "node ./scripts/post-script.js",
@ -299,6 +300,7 @@
"sylvanas": "^0.6.1", "sylvanas": "^0.6.1",
"theme-switcher": "^1.0.2", "theme-switcher": "^1.0.2",
"ts-node": "^10.8.2", "ts-node": "^10.8.2",
"typedoc": "^0.23.21",
"typescript": "~4.9.3", "typescript": "~4.9.3",
"webpack-bundle-analyzer": "^4.1.0", "webpack-bundle-analyzer": "^4.1.0",
"xhr-mock": "^2.4.1", "xhr-mock": "^2.4.1",

7
scripts/collect-token-statistic.js
View File

@ -58,10 +58,9 @@ styleFiles.forEach((file) => {
); );
}); });
(async () => { (() => {
const tokenPath = `${process.cwd()}/components/version/token.tsx`; const tokenPath = `${process.cwd()}/components/version/token.json`;
const content = `export default ${JSON.stringify(statistic, null, 2)}`; fs.writeJsonSync(tokenPath, statistic, 'utf8');
await fs.writeFile(tokenPath, content, 'utf8');
console.log(chalk.green(`✅ Collected token statistics successfully, check it in`), tokenPath); console.log(chalk.green(`✅ Collected token statistics successfully, check it in`), tokenPath);
})(); })();

71
scripts/generate-token-meta.js Normal file
View File

@ -0,0 +1,71 @@
const TypeDoc = require('typedoc');
const fs = require('fs-extra');
const getTokenList = (list, source) =>
list
.filter((item) => !item.comment?.blockTags.some((tag) => tag.tag === '@internal'))
.map((item) => ({
source,
name: item.name,
type: item.type.toString(),
desc: item.comment?.blockTags?.find((tag) => tag.tag === '@desc')?.content[0]?.text || '-',
descEn:
item.comment?.blockTags?.find((tag) => tag.tag === '@descEn')?.content[0]?.text || '-',
}));
function main() {
const app = new TypeDoc.Application();
// If you want TypeDoc to load tsconfig.json / typedoc.json files
app.options.addReader(new TypeDoc.TSConfigReader());
app.options.addReader(new TypeDoc.TypeDocReader());
app.bootstrap({
// typedoc options here
entryPoints: ['components/theme/interface.ts'],
});
const project = app.convert();
if (project) {
// Project may not have converted correctly
const output = 'components/version/token-meta.json';
const tokenMeta = {};
let presetColors = [];
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.target.elements.map((item) => item.value);
}
});
// Exclude preset colors
tokenMeta.seed = tokenMeta.seed.filter(
(item) => !presetColors.some((color) => item.name.startsWith(color)),
);
tokenMeta.map = tokenMeta.map.filter(
(item) => !presetColors.some((color) => item.name.startsWith(color)),
);
tokenMeta.alias = tokenMeta.alias.filter(
(item) => !presetColors.some((color) => item.name.startsWith(color)),
);
tokenMeta.alias = tokenMeta.alias.filter(
(item) => !tokenMeta.map.some((mapItem) => mapItem.name === item.name),
);
tokenMeta.map = tokenMeta.map.filter(
(item) => !tokenMeta.seed.some((seedItem) => seedItem.name === item.name),
);
fs.writeJsonSync(output, tokenMeta, 'utf8');
// eslint-disable-next-line no-console
console.log(`✅ Token Meta has been written to ${output}`);
}
}
main();