mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
docs: collect token API from tsdoc (#38964)
* chore: token doc * docs: token meta * chore: code clean * chore: code clean * chore: json * chore: rename * chore: style
This commit is contained in:
MadCcc
GitHub
parent
963f95faba
commit
e04c2d69ae
114
.dumi/theme/builtins/TokenTable/index.tsx
Normal file
114
.dumi/theme/builtins/TokenTable/index.tsx
Normal 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
3
.gitignore
vendored
@ -48,7 +48,8 @@ server/
|
||||
# Docs templates
|
||||
scripts/previewEditor/index.html
|
||||
components/version/version.tsx
|
||||
components/version/token.tsx
|
||||
components/version/token.json
|
||||
components/version/token-meta.json
|
||||
.dumi/tmp
|
||||
.dumi/tmp-test
|
||||
.dumi/tmp-production
|
||||
|
||||
@ -129,6 +129,7 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
|
||||
|
||||
#### SubMenuType
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Property | Description | Type | Default value | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - | |
|
||||
|
||||
@ -149,151 +149,505 @@ export type GlobalToken = AliasToken & ComponentTokenMap;
|
||||
// ======================================================================
|
||||
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
|
||||
export interface SeedToken extends PresetColorType {
|
||||
// Color
|
||||
/**
|
||||
* @desc 品牌主色
|
||||
*/
|
||||
colorPrimary: string;
|
||||
|
||||
/**
|
||||
* @desc 成功色
|
||||
*/
|
||||
colorSuccess: string;
|
||||
|
||||
/**
|
||||
* @desc 警戒色
|
||||
*/
|
||||
colorWarning: string;
|
||||
|
||||
/**
|
||||
* @desc 错误色
|
||||
*/
|
||||
colorError: string;
|
||||
|
||||
/**
|
||||
* @desc 信息色
|
||||
*/
|
||||
colorInfo: string;
|
||||
|
||||
/**
|
||||
* @desc 基础文本色
|
||||
*/
|
||||
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;
|
||||
|
||||
// Font
|
||||
/**
|
||||
* @desc 字体
|
||||
*/
|
||||
fontFamily: string;
|
||||
|
||||
/**
|
||||
* @desc 基础字号
|
||||
*/
|
||||
fontSize: number;
|
||||
|
||||
// Line
|
||||
/** Border width of base components */
|
||||
/**
|
||||
* Border width of base components
|
||||
* @desc 基础线宽
|
||||
*/
|
||||
lineWidth: number;
|
||||
|
||||
/**
|
||||
* @desc 线条样式
|
||||
*/
|
||||
lineType: string;
|
||||
|
||||
// Motion
|
||||
/**
|
||||
* @desc 动画时长变化单位
|
||||
*/
|
||||
motionUnit: number;
|
||||
|
||||
/**
|
||||
* @desc 动画基础时长
|
||||
*/
|
||||
motionBase: number;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseOutCirc: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseInOutCirc: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseInOut: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseOutBack: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseInBack: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseInQuint: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseOutQuint: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
motionEaseOut: string;
|
||||
|
||||
// Radius
|
||||
/**
|
||||
* @desc 基础圆角
|
||||
* @descEn Base border radius
|
||||
*/
|
||||
borderRadius: number;
|
||||
|
||||
// Size
|
||||
/**
|
||||
* @desc 尺寸变化单位
|
||||
*/
|
||||
sizeUnit: number;
|
||||
|
||||
/**
|
||||
* @desc 尺寸基础大小
|
||||
*/
|
||||
sizeStep: number;
|
||||
|
||||
/**
|
||||
* @desc 组件箭头尺寸
|
||||
*/
|
||||
sizePopupArrow: number;
|
||||
|
||||
// Control Base
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
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;
|
||||
/** Base popup component zIndex */
|
||||
/** */
|
||||
|
||||
/**
|
||||
* @desc 浮层基础 zIndex
|
||||
* @descEn Base zIndex of component like FloatButton, Affix which can be cover by large popup
|
||||
*/
|
||||
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;
|
||||
|
||||
// Wireframe
|
||||
/**
|
||||
* @desc 线框化
|
||||
*/
|
||||
wireframe: boolean;
|
||||
}
|
||||
|
||||
export interface NeutralColorMapToken {
|
||||
// Base
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
colorTextBase: string;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
colorBgBase: string;
|
||||
|
||||
// Text
|
||||
/**
|
||||
* @desc 一级文本色
|
||||
*/
|
||||
colorText: string;
|
||||
|
||||
/**
|
||||
* @desc 二级文本色
|
||||
*/
|
||||
colorTextSecondary: string;
|
||||
|
||||
/**
|
||||
* @desc 三级文本色
|
||||
*/
|
||||
colorTextTertiary: string;
|
||||
|
||||
/**
|
||||
* @desc 四级文本色
|
||||
*/
|
||||
colorTextQuaternary: string;
|
||||
|
||||
// Fill
|
||||
/**
|
||||
* @desc 一级填充色
|
||||
*/
|
||||
colorFill: string;
|
||||
|
||||
/**
|
||||
* @desc 二级填充色
|
||||
*/
|
||||
colorFillSecondary: string;
|
||||
|
||||
/**
|
||||
* @desc 三级填充色
|
||||
*/
|
||||
colorFillTertiary: string;
|
||||
|
||||
/**
|
||||
* @desc 四级填充色
|
||||
*/
|
||||
colorFillQuaternary: string;
|
||||
|
||||
// Background
|
||||
/**
|
||||
* @desc 组件容器背景色
|
||||
*/
|
||||
colorBgContainer: string;
|
||||
|
||||
/**
|
||||
* @desc 浮层容器背景色
|
||||
*/
|
||||
colorBgElevated: string;
|
||||
|
||||
/**
|
||||
* @desc 布局背景色
|
||||
*/
|
||||
colorBgLayout: string;
|
||||
|
||||
/**
|
||||
* @desc
|
||||
*/
|
||||
colorBgSpotlight: string;
|
||||
|
||||
// Border
|
||||
/**
|
||||
* @desc 一级边框色
|
||||
*/
|
||||
colorBorder: string;
|
||||
|
||||
/**
|
||||
* @desc 二级边框色
|
||||
*/
|
||||
colorBorderSecondary: string;
|
||||
}
|
||||
|
||||
export interface ColorMapToken extends NeutralColorMapToken {
|
||||
// Primary
|
||||
/**
|
||||
* @desc 主色的浅色背景颜色
|
||||
*/
|
||||
colorPrimaryBg: string; // 1
|
||||
|
||||
/**
|
||||
* @desc 主色的浅色背景色悬浮态
|
||||
*/
|
||||
colorPrimaryBgHover: string; // 2
|
||||
|
||||
/**
|
||||
* @desc 主色的描边色
|
||||
*/
|
||||
colorPrimaryBorder: string; // 3
|
||||
|
||||
/**
|
||||
* @desc 主色的描边色悬浮态
|
||||
*/
|
||||
colorPrimaryBorderHover: string; // 4
|
||||
|
||||
/**
|
||||
* @desc 主色的深色悬浮态
|
||||
*/
|
||||
colorPrimaryHover: string; // 5
|
||||
|
||||
/**
|
||||
* @desc 品牌主色
|
||||
*/
|
||||
colorPrimary: string; // 6
|
||||
|
||||
/**
|
||||
* @desc 主色的深色激活态
|
||||
*/
|
||||
colorPrimaryActive: string; // 7
|
||||
|
||||
/**
|
||||
* @desc 主色的文本悬浮态
|
||||
*/
|
||||
colorPrimaryTextHover: string; // 8
|
||||
|
||||
/**
|
||||
* @desc 主色的文本默认态
|
||||
*/
|
||||
colorPrimaryText: string; // 9
|
||||
|
||||
/**
|
||||
* @desc 主色的文本激活态
|
||||
*/
|
||||
colorPrimaryTextActive: string; // 10
|
||||
|
||||
// Success
|
||||
/**
|
||||
* @desc 成功色的浅色背景颜色
|
||||
*/
|
||||
colorSuccessBg: string; // 1
|
||||
|
||||
/**
|
||||
* @desc 成功色的浅色背景色悬浮态
|
||||
*/
|
||||
colorSuccessBgHover: string; // 2
|
||||
|
||||
/**
|
||||
* @desc 成功色的描边色
|
||||
*/
|
||||
colorSuccessBorder: string; // 3
|
||||
|
||||
/**
|
||||
* @desc 成功色的描边色悬浮态
|
||||
*/
|
||||
colorSuccessBorderHover: string; // 4
|
||||
|
||||
/**
|
||||
* @desc 成功色的深色悬浮态
|
||||
*/
|
||||
colorSuccessHover: string; // 5
|
||||
|
||||
/**
|
||||
* @desc 成功色
|
||||
*/
|
||||
colorSuccess: string; // 6
|
||||
|
||||
/**
|
||||
* @desc 成功色的深色激活态
|
||||
*/
|
||||
colorSuccessActive: string; // 7
|
||||
|
||||
/**
|
||||
* @desc 成功色的文本悬浮态
|
||||
*/
|
||||
colorSuccessTextHover: string; // 8
|
||||
|
||||
/**
|
||||
* @desc 成功色的文本默认态
|
||||
*/
|
||||
colorSuccessText: string; // 9
|
||||
|
||||
/**
|
||||
* @desc 成功色的文本激活态
|
||||
*/
|
||||
colorSuccessTextActive: string; // 10
|
||||
|
||||
// Warning
|
||||
/**
|
||||
* @desc 警戒色的浅色背景颜色
|
||||
*/
|
||||
colorWarningBg: string; // 1
|
||||
|
||||
/**
|
||||
* @desc 警戒色的浅色背景色悬浮态
|
||||
*/
|
||||
colorWarningBgHover: string; // 2
|
||||
|
||||
/**
|
||||
* @desc 警戒色的描边色
|
||||
*/
|
||||
colorWarningBorder: string; // 3
|
||||
|
||||
/**
|
||||
* @desc 警戒色的描边色悬浮态
|
||||
*/
|
||||
colorWarningBorderHover: string; // 4
|
||||
|
||||
/**
|
||||
* @desc 警戒色的深色悬浮态
|
||||
*/
|
||||
colorWarningHover: string; // 5
|
||||
|
||||
/**
|
||||
* @desc 警戒色
|
||||
*/
|
||||
colorWarning: string; // 6
|
||||
|
||||
/**
|
||||
* @desc 警戒色的深色激活态
|
||||
*/
|
||||
colorWarningActive: string; // 7
|
||||
|
||||
/**
|
||||
* @desc 警戒色的文本悬浮态
|
||||
*/
|
||||
colorWarningTextHover: string; // 8
|
||||
|
||||
/**
|
||||
* @desc 警戒色的文本默认态
|
||||
*/
|
||||
colorWarningText: string; // 9
|
||||
|
||||
/**
|
||||
* @desc 警戒色的文本激活态
|
||||
*/
|
||||
colorWarningTextActive: string; // 10
|
||||
|
||||
// Error
|
||||
/**
|
||||
* @desc 错误色的浅色背景颜色
|
||||
*/
|
||||
colorErrorBg: string; // 1
|
||||
|
||||
/**
|
||||
* @desc 错误色的浅色背景色悬浮态
|
||||
*/
|
||||
colorErrorBgHover: string; // 2
|
||||
|
||||
/**
|
||||
* @desc 错误色的描边色
|
||||
*/
|
||||
colorErrorBorder: string; // 3
|
||||
|
||||
/**
|
||||
* @desc 错误色的描边色悬浮态
|
||||
*/
|
||||
colorErrorBorderHover: string; // 4
|
||||
|
||||
/**
|
||||
* @desc 错误色的深色悬浮态
|
||||
*/
|
||||
colorErrorHover: string; // 5
|
||||
|
||||
/**
|
||||
* @desc 错误色
|
||||
*/
|
||||
colorError: string; // 6
|
||||
|
||||
/**
|
||||
* @desc 错误色的深色激活态
|
||||
*/
|
||||
colorErrorActive: string; // 7
|
||||
|
||||
/**
|
||||
* @desc 错误色的文本悬浮态
|
||||
*/
|
||||
colorErrorTextHover: string; // 8
|
||||
|
||||
/**
|
||||
* @desc 错误色的文本默认态
|
||||
*/
|
||||
colorErrorText: string; // 9
|
||||
|
||||
/**
|
||||
* @desc 错误色的文本激活态
|
||||
*/
|
||||
colorErrorTextActive: string; // 10
|
||||
|
||||
// Info
|
||||
/**
|
||||
* @desc 信息色的浅色背景颜色
|
||||
*/
|
||||
colorInfoBg: string; // 1
|
||||
|
||||
/**
|
||||
* @desc 信息色的浅色背景色悬浮态
|
||||
*/
|
||||
colorInfoBgHover: string; // 2
|
||||
|
||||
/**
|
||||
* @desc 信息色的描边色
|
||||
*/
|
||||
colorInfoBorder: string; // 3
|
||||
|
||||
/**
|
||||
* @desc 信息色的描边色悬浮态
|
||||
*/
|
||||
colorInfoBorderHover: string; // 4
|
||||
|
||||
/**
|
||||
* @desc 信息色的深色悬浮态
|
||||
*/
|
||||
colorInfoHover: string; // 5
|
||||
|
||||
/**
|
||||
* @desc 信息色
|
||||
*/
|
||||
colorInfo: string; // 6
|
||||
|
||||
/**
|
||||
* @desc 信息色的深色激活态
|
||||
*/
|
||||
colorInfoActive: string; // 7
|
||||
|
||||
/**
|
||||
* @desc 信息色的文本悬浮态
|
||||
*/
|
||||
colorInfoTextHover: string; // 8
|
||||
|
||||
/**
|
||||
* @desc 信息色的文本默认态
|
||||
*/
|
||||
colorInfoText: string; // 9
|
||||
|
||||
/**
|
||||
* @desc 信息色的文本激活态
|
||||
*/
|
||||
colorInfoTextActive: string; // 10
|
||||
|
||||
/**
|
||||
* @desc 浮层的背景蒙层颜色
|
||||
*/
|
||||
colorBgMask: string;
|
||||
colorWhite: string;
|
||||
}
|
||||
@ -322,7 +676,13 @@ export interface HeightMapToken {
|
||||
|
||||
export interface CommonMapToken {
|
||||
// Font
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
fontSizes: number[];
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
lineHeights: number[];
|
||||
|
||||
// Line
|
||||
@ -492,14 +852,24 @@ export interface AliasToken extends MapToken {
|
||||
controlTmpOutline: string;
|
||||
|
||||
// FIXME: component box-shadow, should be removed
|
||||
/** @internal */
|
||||
boxShadowPopoverArrow: string;
|
||||
/** @internal */
|
||||
boxShadowCard: string;
|
||||
/** @internal */
|
||||
boxShadowDrawerRight: string;
|
||||
/** @internal */
|
||||
boxShadowDrawerLeft: string;
|
||||
/** @internal */
|
||||
boxShadowDrawerUp: string;
|
||||
/** @internal */
|
||||
boxShadowDrawerDown: string;
|
||||
/** @internal */
|
||||
boxShadowTabsOverflowLeft: string;
|
||||
/** @internal */
|
||||
boxShadowTabsOverflowRight: string;
|
||||
/** @internal */
|
||||
boxShadowTabsOverflowTop: string;
|
||||
/** @internal */
|
||||
boxShadowTabsOverflowBottom: string;
|
||||
}
|
||||
|
||||
@ -318,228 +318,19 @@ export default () => {
|
||||
|
||||
### SeedToken
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
<TokenTable type="seed"></TokenTable>
|
||||
|
||||
### MapToken
|
||||
|
||||
> 继承所有 SeedToken 的 Property
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
<TokenTable type="map"></TokenTable>
|
||||
|
||||
### AliasToken
|
||||
|
||||
> 继承所有 SeedToken 和 MapToken 的 Property
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
<TokenTable type="alias"></TokenTable>
|
||||
|
||||
## How to Debug your Theme
|
||||
|
||||
|
||||
@ -318,228 +318,19 @@ export default () => {
|
||||
|
||||
### SeedToken
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
<TokenTable type="seed"></TokenTable>
|
||||
|
||||
### MapToken
|
||||
|
||||
> 继承所有 SeedToken 的属性
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
<TokenTable type="map"></TokenTable>
|
||||
|
||||
### AliasToken
|
||||
|
||||
> 继承所有 SeedToken 和 MapToken 的属性
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
<TokenTable type="alias"></TokenTable>
|
||||
|
||||
## 调试主题
|
||||
|
||||
|
||||
10
package.json
10
package.json
@ -55,11 +55,12 @@
|
||||
"clean": "antd-tools run clean && rm -rf es lib coverage dist report.html",
|
||||
"clean-lockfiles": "rm -rf package-lock.json yarn.lock",
|
||||
"collect-token-statistic": "ts-node --project tsconfig.node.json scripts/collect-token-statistic.js",
|
||||
"prestart": "npm run version && npm run collect-token-statistic",
|
||||
"precompile": "npm run version && npm run collect-token-statistic",
|
||||
"token-meta": "node scripts/generate-token-meta.js",
|
||||
"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",
|
||||
"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",
|
||||
"changelog": "node ./scripts/print-changelog",
|
||||
"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",
|
||||
"pre-publish": "npm run test-all -- --skip-build",
|
||||
"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 .",
|
||||
"prepublishOnly": "antd-tools run guard",
|
||||
"postpublish": "node ./scripts/post-script.js",
|
||||
@ -299,6 +300,7 @@
|
||||
"sylvanas": "^0.6.1",
|
||||
"theme-switcher": "^1.0.2",
|
||||
"ts-node": "^10.8.2",
|
||||
"typedoc": "^0.23.21",
|
||||
"typescript": "~4.9.3",
|
||||
"webpack-bundle-analyzer": "^4.1.0",
|
||||
"xhr-mock": "^2.4.1",
|
||||
|
||||
@ -58,10 +58,9 @@ styleFiles.forEach((file) => {
|
||||
);
|
||||
});
|
||||
|
||||
(async () => {
|
||||
const tokenPath = `${process.cwd()}/components/version/token.tsx`;
|
||||
const content = `export default ${JSON.stringify(statistic, null, 2)}`;
|
||||
await fs.writeFile(tokenPath, content, 'utf8');
|
||||
(() => {
|
||||
const tokenPath = `${process.cwd()}/components/version/token.json`;
|
||||
fs.writeJsonSync(tokenPath, statistic, 'utf8');
|
||||
|
||||
console.log(chalk.green(`✅ Collected token statistics successfully, check it in`), tokenPath);
|
||||
})();
|
||||
|
||||
71
scripts/generate-token-meta.js
Normal file
71
scripts/generate-token-meta.js
Normal 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();
|
||||
Loading…
Reference in New Issue
Block a user