设置多个主题
接着上一篇文章讲的配置主题，本章来讲使用Design Token 定制主题。
在 Design Token 中我们提供了一套更加贴合设计的三层结构，将 Design Token 拆解为 Seed Token、Map Token 和 Alias Token 三部分。这三组 Token 并不是简单的分组，而是一个三层的派生关系，由 Seed Token 派生 Map Token，再由 Map Token 派生 Alias Token。
基础变量（Seed Token）
比如我们可以通过改变 colorPrimary 来改变主题色，antd 内部的算法会自动的根据 Seed Token 计算出对应的一系列颜色并应用，以下是一个自定义的SeedToken
export interface SeedToken extends PresetColorType {
/**
* 基本色
*/
colorPrimary: string;
/**
* 成功色
*/
colorSuccess: string;
/**
* 警告色
*/
colorWarning: string;
/**
* 错误色
*/
colorError: string;
/**
* 信息色
*/
colorInfo: string;
/**
* Seed 文本颜色
*/
colorTextBase: string;
/**
* Seed 背景颜色
*/
colorBgBase: string;
/**
* 默认文本字体
*/
fontFamily: string;
/**
* 代码文本字体
*/
fontFamilyCode: string;
/**
* 默认字体大小
*/
fontSize: number;
/**
* 基础线宽
*/
lineWidth: number;
/**
* 基础组件边框样式
*/
lineType: string;
/**
* 基础组件边框圆角
*/
borderRadius: number;
/**
* 尺寸变化单位
* @default 4
*/
sizeUnit: number;
/**
* 尺寸基础步长
* @default 4
*/
sizeStep: number;
/**
* 弹出框箭头尺寸
*/
sizePopupArrow: number;
/**
* 基础控件高度
* @default 32
*/
controlHeight: number;
/**
* 基础 zIndex
* @default 0
*/
zIndexBase: number;
/**
* 弹出框基础 zIndex
* @default 1000
*/
zIndexPopupBase: number;
/**
* 定义默认图片透明度。当使用类似暗色主题时有用
*/
opacityImage: number;
/**
* 动画持续时间单位
* @default 100ms
*/
motionUnit: number;
/**
* 动画基础时间
*/
motionBase: number;
motionEaseOutCirc: string;
motionEaseInOutCirc: string;
motionEaseInOut: string;
motionEaseOutBack: string;
motionEaseInBack: string;
motionEaseInQuint: string;
motionEaseOutQuint: string;
motionEaseOut: string;
/**
* 线框样式
* @default false
*/
wireframe: boolean;
}
下面的代码修改了 src/App.js 中的 ConfigProvider，以自定义 SeedToken.colorPrimary：
<ConfigProvider
theme={{
algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
colorPrimary: 'pink',
},
}}
></ConfigProvider>
我们可以看到主色被设置为粉色。
梯度变量（Map Token）
Map Token 是基于 Seed 派生的梯度变量。定制 Map Token 推荐通过 theme.algorithm 来实现，这样可以保证 Map Token 之间的梯度关系。也可以通过 theme.token 覆盖，用于单独修改一些 map token 的值。
export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, SizeMapToken, HeightMapToken, StyleMapToken, FontMapToken, CommonMapToken {
}
-
ColorMapToken的接口定义：
export interface ColorMapToken extends ColorNeutralMapToken, ColorPrimaryMapToken, ColorSuccessMapToken, ColorWarningMapToken, ColorErrorMapToken, ColorInfoMapToken {
/**
* 不受主题影响的纯白色
* @default #FFFFFF
*/
colorWhite: string;
/**
* 遮罩的背景颜色
*/
colorBgMask: string;
}
-
SizeMapToken: 定义尺寸映射变量
SizeMapToken 接口定义了一组尺寸映射变量，用于在程序中统一管理不同尺寸的数值。
接口定义 :
export interface SizeMapToken {
/**
* XXL
* @default 48
*/
sizeXXL: number;
/**
* XL
* @default 32
*/
sizeXL: number;
/**
* LG
* @default 24
*/
sizeLG: number;
/**
* MD
* @default 20
*/
sizeMD: number;
/** Same as size by default, but could be larger in compact mode */
sizeMS: number;
/**
* Size
* @default 16
*/
size: number;
/**
* SM
* @default 12
*/
sizeSM: number;
/**
* XS
* @default 8
*/
sizeXS: number;
/**
* XXS
* @default 4
*/
sizeXXS: number;
}
使用示例：
import { SizeMapToken } from 'your-package';
const sizeMap: SizeMapToken = {
sizeXXL: 56,
sizeXL: 40,
sizeLG: 28,
sizeMD: 24,
sizeMS: 20,
size: 16,
sizeSM: 12,
sizeXS: 8,
sizeXXS: 6,
};
console.log(sizeMap.sizeXL); // 输出: 40
-
HeightMapToken：用于定义组件内部控制的高度
export interface HeightMapToken {
/** 仅用于组件内部控制，例如多选下拉框的内部选择项。 */
/**
* XS组件的高度
*/
controlHeightXS: number;
/**
* SM组件的高度
*/
controlHeightSM: number;
/**
* LG组件的高度
*/
controlHeightLG: number;
}
-
StyleMapToken：用于定义样式映射
export interface StyleMapToken {
/**
* 粗线的宽度
* @default 1
*/
lineWidthBold: number;
/**
* XS尺寸的边框半径
* @default 2
*/
borderRadiusXS: number;
/**
* SM尺寸的边框半径
* @default 4
*/
borderRadiusSM: number;
/**
* LG尺寸的边框半径
* @default 8
*/
borderRadiusLG: number;
/**
* 外部边框半径
* @default 4
*/
borderRadiusOuter: number;
}
-
FontMapToken:用于定义字体映射
这里就不做过多的解释了
export interface FontMapToken {
fontSizeSM: number;
fontSize: number;
fontSizeLG: number;
fontSizeXL: number;
/**
* H1
* @default 38
*/
fontSizeHeading1: number;
/**
* H2
* @default 30
*/
fontSizeHeading2: number;
/**
* H3
* @default 24
*/
fontSizeHeading3: number;
/**
* H4
* @default 20
*/
fontSizeHeading4: number;
/**
* H5
* @default 16
*/
fontSizeHeading5: number;
lineHeight: number;
lineHeightLG: number;
lineHeightSM: number;
lineHeightHeading1: number;
lineHeightHeading2: number;
lineHeightHeading3: number;
lineHeightHeading4: number;
lineHeightHeading5: number;
}
-
CommonMapToken 接口定义
下面是 CommonMapToken 接口的定义，它继承了 StyleMapToken 接口，并添加了三个属性：motionDurationFast、motionDurationMid 和 motionDurationSlow。
export interface CommonMapToken extends StyleMapToken {
motionDurationFast: string;
motionDurationMid: string;
motionDurationSlow: string;
}
该接口用于定义一些常见的 MapTokens，以便在应用程序中使用。这些属性表示动画的持续时间，分为快速、中等和较慢三种。
通过使用 CommonMapToken 接口，我们可以在应用程序中轻松地引用这些属性，以实现统一的动画效果。
下面的代码示例修改了 src/App.js 中的 ConfigProvider，用自定义 MapToken.fontSize 和 SeedToken.colorPrimary。
<ConfigProvider
theme={{
algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
colorPrimary: 'pink',
fontSize: 20,
},
}}
></ConfigProvider>
来看我们的效果：字体变大了
别名变量（Alias Token）
Alias Token 用于批量控制某些共性组件的样式，基本上是 Map Token 别名，或者特殊处理过的 Map Token。
export interface AliasToken extends MapToken {
colorFillContentHover: string;
colorFillAlter: string;
colorFillContent: string;
colorBgContainerDisabled: string;
colorBgTextHover: string;
colorBgTextActive: string;
colorBorderBg: string;
colorSplit: string;
colorTextPlaceholder: string;
colorTextDisabled: string;
colorTextHeading: string;
colorTextLabel: string;
colorTextDescription: string;
colorTextLightSolid: string;
/** 弱操作，比如 `allowClear` 或者 Alert 关闭按钮 */
colorIcon: string;
/** 弱操作悬停颜色，比如 `allowClear` 或者 Alert 关闭按钮 */
colorIconHover: string;
colorLink: string;
colorLinkHover: string;
colorLinkActive: string;
colorHighlight: string;
controlOutline: string;
colorWarningOutline: string;
colorErrorOutline: string;
/** Select、Cascader 等组件中操作图标的字体大小，通常与 fontSizeSM 相同 */
fontSizeIcon: number;
/** 标题（h1、h2、h3）或者选项选中项的字体粗细 */
fontWeightStrong: number;
controlOutlineWidth: number;
controlItemBgHover: string;
controlItemBgActive: string;
controlItemBgActiveHover: string;
controlInteractiveSize: number;
controlItemBgActiveDisabled: string;
paddingXXS: number;
paddingXS: number;
paddingSM: number;
padding: number;
paddingMD: number;
paddingLG: number;
paddingXL: number;
paddingContentHorizontalLG: number;
paddingContentHorizontal: number;
paddingContentHorizontalSM: number;
paddingContentVerticalLG: number;
paddingContentVertical: number;
paddingContentVerticalSM: number;
marginXXS: number;
marginXS: number;
marginSM: number;
margin: number;
marginMD: number;
marginLG: number;
marginXL: number;
marginXXL: number;
opacityLoading: number;
boxShadow: string;
boxShadowSecondary: string;
boxShadowTertiary: string;
linkDecoration: React.CSSProperties['textDecoration'];
linkHoverDecoration: React.CSSProperties['textDecoration'];
linkFocusDecoration: React.CSSProperties['textDecoration'];
controlPaddingHorizontal: number;
controlPaddingHorizontalSM: number;
screenXS: number;
screenXSMin: number;
screenXSMax: number;
screenSM: number;
screenSMMin: number;
screenSMMax: number;
screenMD: number;
screenMDMin: number;
screenMDMax: number;
screenLG: number;
screenLGMin: number;
screenLGMax: number;
screenXL: number;
screenXLMin: number;
screenXLMax: number;
screenXXL: number;
screenXXLMin: number;
/** 用于具有默认轮廓线的 DefaultButton、Switch 等组件 */
controlTmpOutline: string;
}
下面的代码修改了src/App.js中的ConfigProvider，自定义了AliasToken.colorTextDisabled，此外还有SeedToken.colorPrimary和MapToken.fontSize。
<ConfigProvider
theme={{
algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
colorPrimary: 'pink',
fontSize: 20,
colorTextDisabled: 'green',
},
}}
></ConfigProvider>
主色调被设置为粉色，字体大小为20，禁用状态的颜色为绿色。
主题配置
定义一个ThemeConfig，它具有以下属性：
export interface ThemeConfig {
/** 修改设计 Token */
token?: Partial<AliasToken>;
/** 修改应用于组件的组件 Token 和别名 Token */
components?: OverrideToken;
/** 修改主题算法，(token: SeedToken) => MapToken | ((token: SeedToken) => MapToken)[] */
algorithm?: MappingAlgorithm | MappingAlgorithm[];
/** 一些配置，默认值为 true */
hashed?: boolean;
/** 继承上层 ConfigProvider 中的主题配置，默认值为 true */
inherit?: boolean;
}
components 允许我们对特定组件进行自定义设置。让我们看一下下面的 src/App.js 代码：
<ConfigProvider
theme={{
algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
Button: {
colorPrimary: 'pink',
},
Select: {
fontSize: 20,
},
colorTextDisabled: 'green',
},
}}
></ConfigProvider>
在上述代码中，我们使用了 Ant Design 的 Button 组件。如果我们想要对该组件进行自定义设置，我们可以通过在 ThemeConfig 的 components 属性中进行配置。
以上就是今日分享的文章，晚安啦!!!
原文始发于微信公众号（大前端编程教学）：Antd5.6.3框架定制主题配置（Seed Token、Map Token 和 Alias Token 三部分）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224021.html
