mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

refactor: Move design token in (#34624)

Browse Source 
* chore: move in

* wip: refactor the structure of design token

* refactor: merge override

* chore: mv in

* chore: fix ts

* chore: tmp all

* chore: comment

* chore: comment

* chore: use variables

* fix: compile error

Co-authored-by: arvinxx <arvinx@foxmail.com>
This commit is contained in:
二货机器人 2022-03-21 16:48:25 +08:00 committed by GitHub
parent fbf9311100
commit f3f1dbf1b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 1125 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/_util/theme/default.tsx
View File

@ -1,86 +0,0 @@
import { TinyColor } from '@ctrl/tinycolor';
import type { DesignToken, PresetColorType } from '.';
const presetColors: PresetColorType = {
blue: '#1890FF',
purple: '#722ED1',
cyan: '#13C2C2',
green: '#52C41A',
magenta: '#EB2F96',
pink: '#eb2f96',
red: '#F5222D',
orange: '#FA8C16',
yellow: '#FADB14',
volcano: '#FA541C',
geekblue: '#2F54EB',
gold: '#FAAD14',
lime: '#A0D911',
};
const defaultDesignToken: DesignToken = {
primaryColor: '#1890ff',
successColor: '#52c41a',
warningColor: '#faad14',
errorColor: '#ff4d4f',
infoColor: '#1890ff',
// https://github.com/ant-design/ant-design/issues/20210
lineHeight: 1.5715,
borderWidth: 1,
borderStyle: 'solid',
borderRadius: 2,
borderColor: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
easeInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
easeInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
easeOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
easeInQuint: `cubic-bezier(0.755, 0.05, 0.855, 0.06)`,
easeOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
outlineWidth: 2,
outlineBlurSize: 0,
fontSize: 14,
fontFamily: `-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'`,
textColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(),
textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
textColorInverse: '#fff',
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(),
headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
itemHoverBackground: '#f5f5f5',
controlHeight: 32,
padding: 16,
margin: 16,
// Default grey background color
background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
// background of header and selected item
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
componentBackground: '#fff',
componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
duration: 0.3,
zIndexDropdown: 1050,
// preset color palettes
...presetColors,
};
export default defaultDesignToken;

479
components/_util/theme/index-bac.tsx Normal file
View File

@ -0,0 +1,479 @@
// import React from 'react';
// import { generate } from '@ant-design/colors';
// import { TinyColor } from '@ctrl/tinycolor';
// import {
// CSSInterpolation,
// CSSObject,
// Theme,
// useCacheToken,
// useStyleRegister,
// } from '@ant-design/cssinjs';
// import defaultDesignToken from './default';
// import version from '../../version';
// import { resetComponent, resetIcon, clearFix } from './util';
// import {
// initSlideMotion,
// slideUpIn,
// slideUpOut,
// slideDownIn,
// slideDownOut,
// slideLeftIn,
// slideLeftOut,
// slideRightIn,
// slideRightOut,
// } from './util/slide';
// export {
// resetComponent,
// resetIcon,
// clearFix,
// initSlideMotion,
// slideUpIn,
// slideUpOut,
// slideDownIn,
// slideDownOut,
// slideLeftIn,
// slideLeftOut,
// slideRightIn,
// slideRightOut,
// };
// export interface PresetColorType {
// blue: string;
// purple: string;
// cyan: string;
// green: string;
// magenta: string;
// pink: string;
// red: string;
// orange: string;
// yellow: string;
// volcano: string;
// geekblue: string;
// lime: string;
// gold: string;
// }
// export const PresetColorKeys: ReadonlyArray<keyof PresetColorType> = [
// 'blue',
// 'purple',
// 'cyan',
// 'green',
// 'magenta',
// 'pink',
// 'red',
// 'orange',
// 'yellow',
// 'volcano',
// 'geekblue',
// 'lime',
// 'gold',
// ];
// // 🚨🚨🚨🚨🚨 Note: Design Token is freeze. Please connect @zombieJ if need update this 🚨🚨🚨🚨🚨
// export interface DesignToken extends PresetColorType {
// // Color
// colorPrimary: string;
// colorSuccess: string;
// colorWarning: string;
// colorError: string;
// colorInfo: string;
// colorText: string;
// colorTextLightSolid: string;
// colorBg: string;
// // Font
// fontFamily: string;
// fontSizeBase: number;
// // Grid
// gridUnit: number;
// gridStepBase: number;
// // Line
// lineWidth: number;
// // Motion
// motionUnit: number;
// motionBaseStep: number;
// motionEaseInOutCirc: string;
// motionEaseInOut: string;
// motionEaseOutBack: string;
// motionEaseInQuint: string;
// motionEaseOutQuint: string;
// // Radius
// radiusBase: number;
// // Size
// sizeUnit: number;
// sizeBaseStep: number;
// // =============== Legacy: should be remove ===============
// primaryColor: string;
// successColor: string;
// warningColor: string;
// errorColor: string;
// infoColor: string;
// lineHeight: number;
// borderWidth: number;
// borderStyle: string;
// borderRadius: number;
// borderColor: string;
// borderColorSplit: string;
// easeInOut: string;
// easeInOutCirc: string;
// easeOutBack: string;
// easeInQuint: string;
// easeOutQuint: string;
// outlineWidth: number;
// outlineBlurSize: number;
// fontSize: number;
// // fontFamily: string;
// textColor: string;
// textColorSecondary: string;
// textColorDisabled: string;
// textColorInverse: string;
// placeholderColor: string;
// disabledColor: string;
// iconColorHover: string;
// headingColor: string;
// itemHoverBackground: string;
// controlHeight: number;
// padding: number;
// margin: number;
// background: string;
// backgroundLight: string;
// componentBackground: string;
// componentBackgroundDisabled: string;
// duration: number;
// zIndexDropdown: number;
// boxShadow?: string;
// }
// type ColorPaletteKeyIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// export type ColorPalettes = {
// [key in `${keyof PresetColorType}-${ColorPaletteKeyIndexes[number]}`]: string;
// };
// export interface DerivativeToken extends ColorPalettes, Omit<DesignToken, 'duration'> {
// // =================== Derivative Parts ===================
// // Derivative Parts: is generated directly by the algorithm with DesignToken.
// colorPrimaryHover: string;
// colorPrimaryActive: string;
// colorPrimaryFocus: string;
// colorErrorHover: string;
// colorErrorActive: string;
// fontSizeSM: number;
// fontSizeLG: number;
// sizeSpace: number;
// fontSize: number;
// colorTextBelow: string;
// colorTextBelow2: string;
// sizeSpaceXS: number;
// motionDurationBase: number;
// motionDurationFast: number;
// motionDurationSlow: number;
// fontHeight: number;
// sizeSpaceSM: number;
// sizePaddingXXS: number;
// gridSpaceSM: number;
// gridSpaceBase: number;
// motionDurationMd: number;
// radiusLG: number;
// radiusXL: number;
// radiusSM: number;
// colorTextAbove: string;
// radiusXXL: number;
// radiusXXXL: number;
// gridSpaceLG: number;
// gridSpaceXL: number;
// gridSpaceXXL: number;
// fontSizeXL: number;
// colorTextAbove2: string;
// colorBgBelow: string;
// colorBgBelow2: string;
// // ===================== Alias Parts ======================
// // Alias Parts: Alias of the derivative parts for more meaningful name.
// colorPrimaryBorder: string;
// colorLink: string;
// colorPrimaryBg: string;
// controlHeight: number;
// colorBgContainer: string;
// colorBgComponent: string;
// colorBgComponentDisabled: string;
// controlLineType: string;
// colorBorder: string;
// colorHeading: string;
// colorIconHover: string;
// colorBgContainerHover: string;
// controlHeightSM: number;
// controlHeightLG: number;
// controlOutlineWidthActive: string;
// controlOutlineActiveStyle: string;
// controlOutlineActiveColor: string;
// colorPlaceholder: string;
// colorIcon: string;
// colorBgHover: string;
// colorSplit: string;
// colorTextPrimary: string;
// controlRadius: number;
// radiusPiece: number;
// gridContainerMargin: number;
// controlPaddingHorizontal: number;
// controlItemBgSelected: number;
// sizePaddingHorizontal: number;
// sizePaddingHorizontalXS: number;
// sizePaddingHorizontalSM: number;
// sizePaddingHorizontalXXS: number;
// controlPaddingHorizontalSM: number;
// controlLineWidth: number;
// controlHeightXS: number;
// controlItemBgActive: string;
// controlItemBgHover: string;
// colorTextDarkSolid: string;
// // =============== Legacy: should be remove ===============
// primaryHoverColor: string;
// primaryActiveColor: string;
// primaryOutlineColor: string;
// errorHoverColor: string;
// errorActiveColor: string;
// errorOutlineColor: string;
// warningHoverColor: string;
// warningOutlineColor: string;
// itemActiveBackground: string;
// highlightColor: string;
// linkColor: string;
// linkHoverColor: string;
// linkActiveColor: string;
// linkDecoration: CSSObject['textDecoration'];
// linkHoverDecoration: CSSObject['textDecoration'];
// linkFocusDecoration: CSSObject['textDecoration'];
// paddingSM: number;
// paddingXS: number;
// paddingXXS: number;
// paddingLG: number;
// marginXS: number;
// marginLG: number;
// marginXXS: number;
// duration: string;
// durationMid: string;
// durationFast: string;
// heading1Size: number;
// heading2Size: number;
// heading3Size: number;
// heading4Size: number;
// heading5Size: number;
// primaryColors: string[];
// errorColors: string[];
// warningColors: string[];
// // TMP
// tmpPrimaryColorWeak: string;
// tmpPrimaryHoverColorWeak: string;
// // Checked background for Checkable Tag
// tmpPrimaryColor6: string;
// // Active background for Checkable Tag
// tmpPrimaryColor7: string;
// tmpSuccessColorDeprecatedBg: string;
// tmpWarningColorDeprecatedBg: string;
// tmpErrorColorDeprecatedBg: string;
// tmpInfoColorDeprecatedBg: string;
// tmpSuccessColorDeprecatedBorder: string;
// tmpWarningColorDeprecatedBorder: string;
// tmpErrorColorDeprecatedBorder: string;
// tmpInfoColorDeprecatedBorder: string;
// }
// export { useStyleRegister };
// // =============================== Derivative ===============================
// function derivative(designToken: DesignToken): DerivativeToken {
// const { primaryColor, errorColor, warningColor, infoColor, successColor } = designToken;
// const primaryColors = generate(primaryColor);
// const errorColors = generate(errorColor);
// const warningColors = generate(warningColor);
// const infoColors = generate(infoColor);
// const successColors = generate(successColor);
// const paddingSM = (designToken.padding / 4) * 3;
// const paddingXS = designToken.padding * 0.5;
// const colorPalettes = PresetColorKeys.map((colorKey: keyof PresetColorType) => {
// const colors = generate(designToken[colorKey]);
// const ret = new Array(10).fill(1).reduce((prev, _, i) => {
// prev[`${colorKey}-${i + 1}`] = colors[i];
// return prev;
// }, {}) as ColorPalettes;
// return ret;
// }).reduce((prev, cur) => {
// prev = {
// ...prev,
// ...cur,
// };
// return prev;
// }, {} as ColorPalettes);
// return {
// // =================== Derivative Parts ===================
// // FIXME: @arvinxx fix this
// // ===================== Alias Parts ======================
// // FIXME: @arvinxx fix this
// // =============== Legacy: should be remove ===============
// // FIXME: Need design token
// boxShadow: `
// 0 3px 6px -4px rgba(0, 0, 0, 0.12),
// 0 6px 16px 0 rgba(0, 0, 0, 0.08),
// 0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
// ...designToken,
// primaryHoverColor: primaryColors[4],
// primaryActiveColor: primaryColors[6],
// primaryOutlineColor: new TinyColor(primaryColor).setAlpha(0.2).toRgbString(),
// errorHoverColor: errorColors[4],
// errorActiveColor: errorColors[6],
// errorOutlineColor: new TinyColor(errorColor).setAlpha(0.2).toRgbString(),
// warningHoverColor: warningColors[4],
// warningOutlineColor: new TinyColor(warningColor).setAlpha(0.2).toRgbString(),
// highlightColor: errorColors[4], // FIXME: Should not align with error color
// itemActiveBackground: primaryColors[0],
// linkColor: primaryColor,
// linkHoverColor: primaryColors[4],
// linkActiveColor: primaryColors[6],
// linkDecoration: 'none',
// linkHoverDecoration: 'none',
// linkFocusDecoration: 'none',
// fontSizeSM: designToken.fontSize - 2,
// fontSizeLG: designToken.fontSize + 2,
// controlHeightXS: designToken.controlHeight / 2,
// controlHeightSM: designToken.controlHeight * 0.75,
// controlHeightLG: designToken.controlHeight * 1.25,
// controlPaddingHorizontal: paddingSM,
// controlPaddingHorizontalSM: paddingXS,
// paddingSM,
// paddingXS,
// paddingXXS: designToken.padding * 0.25,
// paddingLG: designToken.padding * 1.5,
// marginXS: designToken.margin * 0.5,
// marginLG: designToken.margin * 1.5,
// marginXXS: designToken.margin * 0.25,
// duration: `${designToken.duration}s`,
// durationMid: `${(designToken.duration / 3) * 2}s`,
// durationFast: `${designToken.duration / 3}s`,
// ...colorPalettes,
// heading1Size: Math.ceil(designToken.fontSize * 2.71),
// heading2Size: Math.ceil(designToken.fontSize * 2.14),
// heading3Size: Math.ceil(designToken.fontSize * 1.71),
// heading4Size: Math.ceil(designToken.fontSize * 1.42),
// heading5Size: Math.ceil(designToken.fontSize * 1.14),
// primaryColors,
// errorColors,
// warningColors,
// // TMP
// tmpPrimaryColorWeak: primaryColors[2],
// tmpPrimaryHoverColorWeak: primaryColors[0],
// tmpPrimaryColor6: primaryColors[5],
// tmpPrimaryColor7: primaryColors[6],
// tmpSuccessColorDeprecatedBg: successColors[0],
// tmpWarningColorDeprecatedBg: warningColors[0],
// tmpErrorColorDeprecatedBg: errorColors[0],
// tmpInfoColorDeprecatedBg: infoColors[0],
// tmpSuccessColorDeprecatedBorder: successColors[2],
// tmpWarningColorDeprecatedBorder: warningColors[2],
// tmpErrorColorDeprecatedBorder: errorColors[2],
// tmpInfoColorDeprecatedBorder: infoColors[2],
// };
// }
// // ================================ Context =================================
// export const ThemeContext = React.createContext(
// new Theme<DesignToken, DerivativeToken>(derivative),
// );
// export const DesignTokenContext = React.createContext<{
// token: Partial<DesignToken>;
// hashed?: string | boolean;
// }>({
// token: defaultDesignToken,
// });
// // ================================== Hook ==================================
// export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToken, string] {
// const { token: rootDesignToken, hashed } = React.useContext(DesignTokenContext);
// const theme = React.useContext(ThemeContext);
// const salt = `${version}-${hashed || ''}`;
// const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
// theme,
// [defaultDesignToken, rootDesignToken],
// {
// salt,
// },
// );
// return [theme, token, hashed ? hashId : ''];
// }
// export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
// export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpolation> = (
// token: ComponentToken,
// hashId?: string,
// ) => ReturnType;
// // ================================== Util ==================================
// export function withPrefix(
// style: CSSObject,
// prefixCls: string,
// additionalClsList: string[] = [],
// ): CSSObject {
// const fullClsList = [prefixCls, ...additionalClsList].filter(cls => cls).map(cls => `.${cls}`);
// return {
// [fullClsList.join('')]: style,
// };
// }

324
components/_util/theme/index.tsx
View File

@ -1,6 +1,4 @@
import React from 'react';
import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor';
import {
CSSInterpolation,
CSSObject,
@ -8,9 +6,10 @@ import {
useCacheToken,
useStyleRegister,
} from '@ant-design/cssinjs';
import defaultDesignToken from './default';
import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
import version from '../../version';
import { resetComponent, resetIcon, clearFix } from './util';
import formatToken from './util/alias';
import {
initSlideMotion,
slideUpIn,
@ -22,8 +21,17 @@ import {
slideRightIn,
slideRightOut,
} from './util/slide';
import { PresetColors } from './interface';
import type {
SeedToken,
DerivativeToken,
AliasToken,
OverrideToken,
PresetColorType,
} from './interface';
export {
PresetColors,
resetComponent,
resetIcon,
clearFix,
@ -36,311 +44,51 @@ export {
slideLeftOut,
slideRightIn,
slideRightOut,
useStyleRegister,
};
export interface PresetColorType {
blue: string;
purple: string;
cyan: string;
green: string;
magenta: string;
pink: string;
red: string;
orange: string;
yellow: string;
volcano: string;
geekblue: string;
lime: string;
gold: string;
}
export const PresetColorKeys: ReadonlyArray<keyof PresetColorType> = [
'blue',
'purple',
'cyan',
'green',
'magenta',
'pink',
'red',
'orange',
'yellow',
'volcano',
'geekblue',
'lime',
'gold',
];
export interface DesignToken extends PresetColorType {
primaryColor: string;
successColor: string;
warningColor: string;
errorColor: string;
infoColor: string;
lineHeight: number;
borderWidth: number;
borderStyle: string;
borderRadius: number;
borderColor: string;
borderColorSplit: string;
easeInOut: string;
easeInOutCirc: string;
easeOutBack: string;
easeInQuint: string;
easeOutQuint: string;
outlineWidth: number;
outlineBlurSize: number;
fontSize: number;
fontFamily: string;
textColor: string;
textColorSecondary: string;
textColorDisabled: string;
textColorInverse: string;
placeholderColor: string;
disabledColor: string;
iconColorHover: string;
headingColor: string;
itemHoverBackground: string;
controlHeight: number;
padding: number;
margin: number;
background: string;
backgroundLight: string;
componentBackground: string;
componentBackgroundDisabled: string;
duration: number;
zIndexDropdown: number;
boxShadow?: string;
}
type ColorPaletteKeyIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
type ColorPalettes = {
[key in `${keyof PresetColorType}-${ColorPaletteKeyIndexes[number]}`]: string;
export type {
SeedToken,
AliasToken,
PresetColorType,
// FIXME: Remove this type
AliasToken as DerivativeToken,
};
/** This is temporary token definition since final token definition is not ready yet. */
export interface DerivativeToken extends ColorPalettes, Omit<DesignToken, 'duration'> {
primaryHoverColor: string;
primaryActiveColor: string;
primaryOutlineColor: string;
errorHoverColor: string;
errorActiveColor: string;
errorOutlineColor: string;
warningHoverColor: string;
warningOutlineColor: string;
itemActiveBackground: string;
highlightColor: string;
linkColor: string;
linkHoverColor: string;
linkActiveColor: string;
linkDecoration: CSSObject['textDecoration'];
linkHoverDecoration: CSSObject['textDecoration'];
linkFocusDecoration: CSSObject['textDecoration'];
fontSizeSM: number;
fontSizeLG: number;
/** @private Only Used for control inside component like Multiple Select inner selection item */
controlHeightXS: number;
controlHeightSM: number;
controlHeightLG: number;
controlPaddingHorizontal: number;
controlPaddingHorizontalSM: number;
paddingSM: number;
paddingXS: number;
paddingXXS: number;
paddingLG: number;
marginXS: number;
marginLG: number;
marginXXS: number;
duration: string;
durationMid: string;
durationFast: string;
heading1Size: number;
heading2Size: number;
heading3Size: number;
heading4Size: number;
heading5Size: number;
primaryColors: string[];
errorColors: string[];
warningColors: string[];
// TMP
tmpPrimaryColorWeak: string;
tmpPrimaryHoverColorWeak: string;
// Checked background for Checkable Tag
tmpPrimaryColor6: string;
// Active background for Checkable Tag
tmpPrimaryColor7: string;
tmpSuccessColorDeprecatedBg: string;
tmpWarningColorDeprecatedBg: string;
tmpErrorColorDeprecatedBg: string;
tmpInfoColorDeprecatedBg: string;
tmpSuccessColorDeprecatedBorder: string;
tmpWarningColorDeprecatedBorder: string;
tmpErrorColorDeprecatedBorder: string;
tmpInfoColorDeprecatedBorder: string;
}
export { useStyleRegister };
// =============================== Derivative ===============================
function derivative(designToken: DesignToken): DerivativeToken {
const { primaryColor, errorColor, warningColor, infoColor, successColor } = designToken;
const primaryColors = generate(primaryColor);
const errorColors = generate(errorColor);
const warningColors = generate(warningColor);
const infoColors = generate(infoColor);
const successColors = generate(successColor);
const paddingSM = (designToken.padding / 4) * 3;
const paddingXS = designToken.padding * 0.5;
const colorPalettes = PresetColorKeys.map((colorKey: keyof PresetColorType) => {
const colors = generate(designToken[colorKey]);
const ret = new Array(10).fill(1).reduce((prev, _, i) => {
prev[`${colorKey}-${i + 1}`] = colors[i];
return prev;
}, {}) as ColorPalettes;
return ret;
}).reduce((prev, cur) => {
prev = {
...prev,
...cur,
};
return prev;
}, {} as ColorPalettes);
return {
// FIXME: Need design token
boxShadow: `
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
...designToken,
primaryHoverColor: primaryColors[4],
primaryActiveColor: primaryColors[6],
primaryOutlineColor: new TinyColor(primaryColor).setAlpha(0.2).toRgbString(),
errorHoverColor: errorColors[4],
errorActiveColor: errorColors[6],
errorOutlineColor: new TinyColor(errorColor).setAlpha(0.2).toRgbString(),
warningHoverColor: warningColors[4],
warningOutlineColor: new TinyColor(warningColor).setAlpha(0.2).toRgbString(),
highlightColor: errorColors[5], // FIXME: Should not align with error color
// FIXME: fix2 badge-color
itemActiveBackground: primaryColors[0],
linkColor: primaryColor,
linkHoverColor: primaryColors[4],
linkActiveColor: primaryColors[6],
linkDecoration: 'none',
linkHoverDecoration: 'none',
linkFocusDecoration: 'none',
fontSizeSM: designToken.fontSize - 2,
fontSizeLG: designToken.fontSize + 2,
controlHeightXS: designToken.controlHeight / 2,
controlHeightSM: designToken.controlHeight * 0.75,
controlHeightLG: designToken.controlHeight * 1.25,
controlPaddingHorizontal: paddingSM,
controlPaddingHorizontalSM: paddingXS,
paddingSM,
paddingXS,
paddingXXS: designToken.padding * 0.25,
paddingLG: designToken.padding * 1.5,
marginXS: designToken.margin * 0.5,
marginLG: designToken.margin * 1.5,
marginXXS: designToken.margin * 0.25,
duration: `${designToken.duration}s`,
durationMid: `${(designToken.duration / 3) * 2}s`,
durationFast: `${designToken.duration / 3}s`,
...colorPalettes,
heading1Size: Math.ceil(designToken.fontSize * 2.71),
heading2Size: Math.ceil(designToken.fontSize * 2.14),
heading3Size: Math.ceil(designToken.fontSize * 1.71),
heading4Size: Math.ceil(designToken.fontSize * 1.42),
heading5Size: Math.ceil(designToken.fontSize * 1.14),
primaryColors,
errorColors,
warningColors,
// TMP
tmpPrimaryColorWeak: primaryColors[2],
tmpPrimaryHoverColorWeak: primaryColors[0],
tmpPrimaryColor6: primaryColors[5],
tmpPrimaryColor7: primaryColors[6],
tmpSuccessColorDeprecatedBg: successColors[0],
tmpWarningColorDeprecatedBg: warningColors[0],
tmpErrorColorDeprecatedBg: errorColors[0],
tmpInfoColorDeprecatedBg: infoColors[0],
tmpSuccessColorDeprecatedBorder: successColors[2],
tmpWarningColorDeprecatedBorder: warningColors[2],
tmpErrorColorDeprecatedBorder: errorColors[2],
tmpInfoColorDeprecatedBorder: infoColors[2],
};
}
// ================================ Context =================================
export const ThemeContext = React.createContext(
new Theme<DesignToken, DerivativeToken>(derivative),
);
const defaultTheme = new Theme(defaultDerivative);
export const DesignTokenContext = React.createContext<{
token: Partial<DesignToken>;
token: Partial<SeedToken>;
theme?: Theme<SeedToken, DerivativeToken>;
override?: OverrideToken;
hashed?: string | boolean;
}>({
token: defaultDesignToken,
token: defaultSeedToken,
theme: defaultTheme,
});
// ================================== Hook ==================================
export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToken, string] {
const { token: rootDesignToken, hashed } = React.useContext(DesignTokenContext);
const theme = React.useContext(ThemeContext);
export function useToken(): [Theme<SeedToken, DerivativeToken>, AliasToken, string] {
const {
token: rootDesignToken,
theme = defaultTheme,
override,
hashed,
} = React.useContext(DesignTokenContext);
const salt = `${version}-${hashed || ''}`;
const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
const [token, hashId] = useCacheToken<AliasToken, SeedToken>(
theme,
[defaultDesignToken, rootDesignToken],
[defaultSeedToken, rootDesignToken],
{
salt,
override,
formatToken,
},
);
return [theme, token, hashed ? hashId : ''];
}

256
components/_util/theme/interface.ts Normal file
View File

@ -0,0 +1,256 @@
import * as React from 'react';
export const PresetColors = [
'blue',
'purple',
'cyan',
'green',
'magenta',
'pink',
'red',
'orange',
'yellow',
'volcano',
'geekblue',
'lime',
'gold',
] as const;
type PresetColorKey = typeof PresetColors[number];
export type PresetColorType = Record<PresetColorKey, string>;
type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
export type ColorPalettes = {
[key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
};
export interface OverrideToken {
derivative: Partial<DerivativeToken & AliasToken>;
[componentName: string]: object; // FIXME: tmp of component token
}
// ======================================================================
// == Seed Token ==
// ======================================================================
export interface SeedToken extends PresetColorType {
// Color
colorPrimary: string;
colorSuccess: string;
colorWarning: string;
colorError: string;
colorInfo: string;
colorText: string;
colorTextLightSolid: string;
colorBg: string;
// Font
fontFamily: string;
fontSizeBase: number;
// Grid
gridUnit: number;
gridBaseStep: number;
// Line
lineWidth: number;
// Motion
motionUnit: number;
motionBaseStep: number;
motionEaseInOutCirc: string;
motionEaseInOut: string;
motionEaseOutBack: string;
motionEaseInQuint: string;
motionEaseOutQuint: string;
// Radius
radiusBase: number;
// Size
sizeUnit: number;
sizeBaseStep: number;
}
// ======================================================================
// == Derivative Token ==
// ======================================================================
export interface DerivativeToken extends SeedToken, ColorPalettes {
// Color
colorPrimaryHover: string;
colorPrimaryActive: string;
colorWarningHover: string;
colorWarningActive: string;
colorErrorHover: string;
colorErrorActive: string;
colorText2: string;
colorTextBelow: string;
colorTextBelow2: string;
colorTextBelow3: string;
colorBgBelow: string;
colorBgBelow2: string;
// Font
fontSizeSM: number;
fontSizeLG: number;
fontSize: number;
fontSizeXL: number;
// Size
sizeSpace: number;
sizeSpaceXS: number;
sizeSpaceXXS: number;
sizeSpaceSM: number;
// Grid
gridSpaceSM: number;
gridSpaceBase: number;
gridSpaceLG: number;
gridSpaceXL: number;
gridSpaceXXL: number;
// Motion
motionDurationBase: string;
motionDurationMd: string;
motionDurationFast: string;
motionDurationSlow: string;
fontHeight: number;
// Radius
radiusSM: number;
radiusLG: number;
radiusXL: number;
}
// ======================================================================
// == Alias Token ==
// ======================================================================
// FIXME: DerivativeToken should part pick
export interface AliasToken extends DerivativeToken {
// =============== Legacy: should be remove ===============
primaryColor: string;
successColor: string;
warningColor: string;
errorColor: string;
infoColor: string;
lineHeight: number;
borderWidth: number;
borderStyle: string;
borderRadius: number;
borderColor: string;
borderColorSplit: string;
easeInOut: string;
easeInOutCirc: string;
easeOutBack: string;
easeInQuint: string;
easeOutQuint: string;
outlineWidth: number;
outlineBlurSize: number;
fontSize: number;
fontFamily: string;
textColor: string;
textColorSecondary: string;
textColorDisabled: string;
textColorInverse: string;
placeholderColor: string;
disabledColor: string;
iconColorHover: string;
headingColor: string;
itemHoverBackground: string;
controlHeight: number;
padding: number;
margin: number;
background: string;
backgroundLight: string;
componentBackground: string;
componentBackgroundDisabled: string;
zIndexDropdown: number;
boxShadow?: string;
// =============== Legacy: should be remove ===============
primaryHoverColor: string;
primaryActiveColor: string;
primaryOutlineColor: string;
errorHoverColor: string;
errorActiveColor: string;
errorOutlineColor: string;
warningHoverColor: string;
warningOutlineColor: string;
itemActiveBackground: string;
highlightColor: string;
linkColor: string;
linkHoverColor: string;
linkActiveColor: string;
linkDecoration: React.CSSProperties['textDecoration'];
linkHoverDecoration: React.CSSProperties['textDecoration'];
linkFocusDecoration: React.CSSProperties['textDecoration'];
fontSizeSM: number;
fontSizeLG: number;
/** @private Only Used for control inside component like Multiple Select inner selection item */
controlHeightXS: number;
controlHeightSM: number;
controlHeightLG: number;
controlPaddingHorizontal: number;
controlPaddingHorizontalSM: number;
paddingSM: number;
paddingXS: number;
paddingXXS: number;
paddingLG: number;
marginXS: number;
marginLG: number;
marginXXS: number;
duration: string;
durationMid: string;
durationFast: string;
heading1Size: number;
heading2Size: number;
heading3Size: number;
heading4Size: number;
heading5Size: number;
primaryColors: string[];
errorColors: string[];
warningColors: string[];
// TMP
tmpPrimaryColorWeak: string;
tmpPrimaryHoverColorWeak: string;
// Checked background for Checkable Tag
tmpPrimaryColor6: string;
// Active background for Checkable Tag
tmpPrimaryColor7: string;
tmpSuccessColorDeprecatedBg: string;
tmpWarningColorDeprecatedBg: string;
tmpErrorColorDeprecatedBg: string;
tmpInfoColorDeprecatedBg: string;
tmpSuccessColorDeprecatedBorder: string;
tmpWarningColorDeprecatedBorder: string;
tmpErrorColorDeprecatedBorder: string;
tmpInfoColorDeprecatedBorder: string;
}

162
components/_util/theme/themes/default.ts Normal file
View File

@ -0,0 +1,162 @@
/* eslint-disable import/prefer-default-export */
import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor';
import type { PresetColorType, SeedToken, DerivativeToken, ColorPalettes } from '../interface';
const defaultPresetColors: PresetColorType = {
blue: '#1890FF',
purple: '#722ED1',
cyan: '#13C2C2',
green: '#52C41A',
magenta: '#EB2F96',
pink: '#eb2f96',
red: '#F5222D',
orange: '#FA8C16',
yellow: '#FADB14',
volcano: '#FA541C',
geekblue: '#2F54EB',
gold: '#FAAD14',
lime: '#A0D911',
};
export function derivative(token: SeedToken): DerivativeToken {
const {
colorPrimary,
colorWarning,
colorError,
motionUnit,
motionBaseStep,
fontSizeBase,
sizeUnit,
sizeBaseStep,
gridUnit,
gridBaseStep,
radiusBase,
} = token;
const primaryColors = generate(colorPrimary);
const warningColors = generate(colorWarning);
const errorColors = generate(colorError);
const colorPalettes = Object.keys(defaultPresetColors)
.map((colorKey: keyof PresetColorType) => {
const colors = generate(token[colorKey]);
return new Array(10).fill(1).reduce((prev, _, i) => {
prev[`${colorKey}-${i + 1}`] = colors[i];
return prev;
}, {}) as ColorPalettes;
})
.reduce((prev, cur) => {
prev = {
...prev,
...cur,
};
return prev;
}, {} as ColorPalettes);
return {
...token,
...colorPalettes,
// motion
motionDurationBase: `${motionUnit * motionBaseStep}s`,
motionDurationMd: `${motionUnit * (motionBaseStep - 1)}s`,
motionDurationFast: `${motionUnit * (motionBaseStep - 2)}s`,
motionDurationSlow: `${motionUnit * (motionBaseStep + 1)}s`,
// font
fontSize: fontSizeBase,
fontSizeSM: fontSizeBase - 2,
fontSizeLG: fontSizeBase + 2,
fontSizeXL: fontSizeBase + 4,
// size
sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
sizeSpace: sizeUnit * sizeBaseStep,
sizeSpaceXS: sizeUnit * (sizeBaseStep - 2),
sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3),
// grid
gridSpaceSM: gridUnit * (gridBaseStep - 1),
gridSpaceBase: gridUnit * gridBaseStep,
gridSpaceLG: gridUnit * (gridBaseStep + 1),
gridSpaceXL: gridUnit * (gridBaseStep + 2),
gridSpaceXXL: gridUnit * (gridBaseStep + 5),
// radius
radiusSM: radiusBase / 2,
radiusLG: radiusBase * 2,
radiusXL: radiusBase * 4,
// color //
colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
colorErrorActive: errorColors[6],
colorErrorHover: errorColors[4],
colorPrimaryActive: primaryColors[6],
colorPrimaryHover: primaryColors[4],
colorWarningActive: warningColors[6],
colorWarningHover: warningColors[4],
// text color
colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
colorTextBelow: new TinyColor('#000').setAlpha(0.45).toRgbString(),
colorTextBelow2: new TinyColor('#000').setAlpha(0.25).toRgbString(),
colorTextBelow3: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
// FIXME: should be currentFontSize + 8
fontHeight: fontSizeBase + 8,
};
}
const seedToken: SeedToken = {
// preset color palettes
...defaultPresetColors,
// Color
colorPrimary: '#1890ff',
colorSuccess: '#52c41a',
colorWarning: '#faad14',
colorError: '#ff4d4f',
colorInfo: '#1890ff',
colorText: new TinyColor('#000').setAlpha(0.85).toRgbString(),
colorTextLightSolid: '#fff',
colorBg: new TinyColor({ h: 0, s: 0, v: 100 }).toHexString(),
// Font
fontFamily: `-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'`,
fontSizeBase: 14,
// Grid
gridUnit: 4,
gridBaseStep: 2,
// Line
lineWidth: 1,
// Motion
motionUnit: 0.1,
motionBaseStep: 3,
motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
motionEaseInQuint: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
// Radius
radiusBase: 2,
// Size
sizeUnit: 4,
sizeBaseStep: 4,
};
export default seedToken;

161
components/_util/theme/util/alias.ts Normal file
View File

@ -0,0 +1,161 @@
import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor';
import type { AliasToken, DerivativeToken, OverrideToken } from '../interface';
/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
type RawMergedToken = DerivativeToken & OverrideToken;
/**
* Seed (designer) > Derivative (designer) > Alias (developer).
*
* Merge seed & derivative & override token and generate alias token for developer.
*/
export default function formatToken(derivativeToken: RawMergedToken): AliasToken {
const { derivative, ...restToken } = derivativeToken;
const mergedToken = {
...restToken,
...derivative,
};
// FIXME: tmp
const primaryColors = generate(mergedToken.colorPrimary);
const infoColors = generate(mergedToken.colorInfo);
const successColors = generate(mergedToken.colorSuccess);
const warningColors = generate(mergedToken.colorWarning);
const errorColors = generate(mergedToken.colorError);
// Generate alias token
const aliasToken: AliasToken = {
...mergedToken,
// Colors
primaryHoverColor: mergedToken.colorPrimaryHover,
primaryActiveColor: mergedToken.colorPrimaryActive,
errorHoverColor: mergedToken.colorErrorHover,
errorActiveColor: mergedToken.colorErrorActive,
warningHoverColor: mergedToken.colorWarningHover,
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
// FIXME: Handle this when derivative is ready
primaryColors,
warningColors,
errorColors,
tmpPrimaryColorWeak: primaryColors[2],
tmpPrimaryHoverColorWeak: primaryColors[0],
tmpPrimaryColor6: primaryColors[5],
tmpPrimaryColor7: primaryColors[6],
tmpSuccessColorDeprecatedBg: successColors[0],
tmpWarningColorDeprecatedBg: warningColors[0],
tmpErrorColorDeprecatedBg: errorColors[0],
tmpInfoColorDeprecatedBg: infoColors[0],
tmpSuccessColorDeprecatedBorder: successColors[2],
tmpWarningColorDeprecatedBorder: warningColors[2],
tmpErrorColorDeprecatedBorder: errorColors[2],
tmpInfoColorDeprecatedBorder: infoColors[2],
primaryOutlineColor: new TinyColor(mergedToken.primaryColor).setAlpha(0.2).toRgbString(),
errorOutlineColor: new TinyColor(mergedToken.errorColor).setAlpha(0.2).toRgbString(),
warningOutlineColor: new TinyColor(mergedToken.warningColor).setAlpha(0.2).toRgbString(),
primaryColor: mergedToken.colorPrimary,
successColor: mergedToken.colorSuccess,
warningColor: mergedToken.colorWarning,
errorColor: mergedToken.colorError,
infoColor: mergedToken.colorInfo,
itemActiveBackground: primaryColors[0],
highlightColor: errorColors[5], // FIXME: Should not align with error color
// FIXME: fix2 badge-color
linkColor: mergedToken.colorPrimary,
linkHoverColor: primaryColors[4],
linkActiveColor: primaryColors[6],
linkDecoration: 'none',
linkHoverDecoration: 'none',
linkFocusDecoration: 'none',
// https://github.com/ant-design/ant-design/issues/20210
lineHeight: 1.5715,
borderWidth: 1,
borderStyle: 'solid',
borderRadius: 2,
borderColor: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
easeInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
easeInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
easeOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
easeInQuint: `cubic-bezier(0.755, 0.05, 0.855, 0.06)`,
easeOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
outlineWidth: 2,
outlineBlurSize: 0,
fontSize: 14,
fontFamily: `-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'`,
textColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(),
textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
textColorInverse: '#fff',
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(),
headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
itemHoverBackground: '#f5f5f5',
controlHeight: 32,
controlHeightSM: 24,
controlHeightXS: 16,
controlHeightLG: 40,
controlPaddingHorizontal: 16,
controlPaddingHorizontalSM: 12,
padding: 16,
margin: 16,
paddingXXS: 2,
paddingXS: 4,
paddingSM: 8,
paddingLG: 32,
marginXXS: 2,
marginXS: 4,
// marginSM: 8,
marginLG: 32,
// Default grey background color
background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
// background of header and selected item
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
componentBackground: '#fff',
componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
duration: '0.3s',
durationMid: '0.2s',
durationFast: '0.1s',
heading1Size: Math.ceil(mergedToken.fontSize * 2.71),
heading2Size: Math.ceil(mergedToken.fontSize * 2.14),
heading3Size: Math.ceil(mergedToken.fontSize * 1.71),
heading4Size: Math.ceil(mergedToken.fontSize * 1.42),
heading5Size: Math.ceil(mergedToken.fontSize * 1.14),
zIndexDropdown: 1050,
};
return aliasToken;
}

11
components/badge/style/index.tsx
View File

@ -6,7 +6,7 @@ import {
resetComponent,
UseComponentStyleResult,
GenerateStyle,
PresetColorKeys,
PresetColors,
PresetColorType,
} from '../../_util/theme';
import type { DerivativeToken } from '../../_util/theme';
@ -68,8 +68,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
const ribbonWrapperPrefixCls = `${antPrefix}-ribbon-wrapper`;
// FIXME preset color 后面可能要统一重构
const statusPreset = PresetColorKeys.reduce(
(prev: CSSObject, colorKey: keyof PresetColorType) => {
const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
const darkColor = token[`${colorKey}-6`];
return {
...prev,
@ -77,10 +76,8 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
background: darkColor,
},
};
},
{} as CSSObject,
);
const statusRibbonPreset = PresetColorKeys.reduce(
}, {} as CSSObject);
const statusRibbonPreset = PresetColors.reduce(
(prev: CSSObject, colorKey: keyof PresetColorType) => {
const darkColor = token[`${colorKey}-6`];
return {

4
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -62,9 +62,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
return (
<li>
{link}
{separator && (
<span className={`${prefixCls}-separator`}>{separator}</span>
)}
{separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
</li>
);
}

4
components/breadcrumb/__tests__/Breadcrumb.test.js
View File

@ -3,12 +3,12 @@ import { mount, render } from 'enzyme';
import Breadcrumb from '../index';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import accessibilityTest from "../../../tests/shared/accessibilityTest";
import accessibilityTest from '../../../tests/shared/accessibilityTest';
describe('Breadcrumb', () => {
mountTest(Breadcrumb);
rtlTest(Breadcrumb);
accessibilityTest(Breadcrumb)
accessibilityTest(Breadcrumb);
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

2
components/config-provider/__tests__/cssinjs.test.tsx
View File

@ -15,7 +15,7 @@ describe('ConfigProvider.DynamicTheme', () => {
<ConfigProvider
theme={{
token: {
primaryColor: '#f00',
colorPrimary: '#f00',
},
}}
>

9
components/config-provider/index.tsx
View File

@ -21,8 +21,8 @@ import notification from '../notification';
import { RequiredMark } from '../form/Form';
import { registerTheme } from './cssVariables';
import defaultLocale from '../locale/default';
import { DesignToken, DesignTokenContext } from '../_util/theme';
import defaultThemeToken from '../_util/theme/default';
import { SeedToken, DesignTokenContext } from '../_util/theme';
import defaultSeedToken from '../_util/theme/themes/default';
export {
RenderEmptyHandler,
@ -84,7 +84,7 @@ export interface ConfigProviderProps {
virtual?: boolean;
dropdownMatchSelectWidth?: boolean;
theme?: {
token?: Partial<DesignToken>;
token?: Partial<SeedToken>;
hashed?: boolean;
};
}
@ -257,10 +257,11 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
}
// ================================ Dynamic theme ================================
// FIXME: Multiple theme support for pass Theme & override
const memoTheme = React.useMemo(
() => ({
token: {
...defaultThemeToken,
...defaultSeedToken,
...theme?.token,
},
hashed: theme?.hashed,

4
components/tag/style/index.tsx
View File

@ -8,7 +8,7 @@ import {
useToken,
resetComponent,
UseComponentStyleResult,
PresetColorKeys,
PresetColors,
} from '../../_util/theme';
interface TagToken extends DerivativeToken {
@ -40,7 +40,7 @@ const genTagStatusStyle = (
// FIXME: special preset colors
const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation =>
PresetColorKeys.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
const lightColor = token[`${colorKey}-1`];
const lightBorderColor = token[`${colorKey}-3`];
const darkColor = token[`${colorKey}-6`];

2
package.json
View File

@ -113,7 +113,7 @@
],
"dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/cssinjs": "~0.0.0-alpha.17",
"@ant-design/cssinjs": "~0.0.0-alpha.20",
"@ant-design/icons": "^4.7.0",
"@ant-design/react-slick": "~0.28.1",
"@babel/runtime": "^7.12.5",

12
site/theme/template/Layout/DynamicTheme/index.tsx
View File

@ -3,14 +3,14 @@ import { TinyColor } from '@ctrl/tinycolor';
import { Drawer, Form, Input, Button, InputNumber, Checkbox, Space } from 'antd';
import { useIntl } from 'react-intl';
import { BugOutlined, EyeOutlined } from '@ant-design/icons';
import { DesignToken } from '../../../../../components/_util/theme';
import defaultTheme from '../../../../../components/_util/theme/default';
import { SeedToken } from '../../../../../components/_util/theme';
import defaultSeedToken from '../../../../../components/_util/theme/themes/default';
import Preview from './Preview';
export interface ThemeConfigProps {
componentName: string;
defaultToken: DesignToken;
onChangeTheme: (theme: DesignToken) => void;
defaultToken: SeedToken;
onChangeTheme: (theme: SeedToken) => void;
}
export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps) => {
@ -19,9 +19,9 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
const [previewVisible, setPreviewVisible] = React.useState(false);
const [form] = Form.useForm();
const keys = Object.keys(defaultTheme);
const keys = Object.keys(defaultSeedToken);
const onFinish = (nextToken: DesignToken) => {
const onFinish = (nextToken: SeedToken) => {
onChangeTheme(nextToken);
};

4
site/theme/template/Layout/index.jsx
View File

@ -15,7 +15,7 @@ import SiteContext from './SiteContext';
import enLocale from '../../en-US';
import cnLocale from '../../zh-CN';
import * as utils from '../utils';
import defaultDesignToken from '../../../../components/_util/theme/default';
import defaultSeedToken from '../../../../components/_util/theme/themes/default';
import DynamicTheme from './DynamicTheme';
@ -82,7 +82,7 @@ export default class Layout extends React.Component {
setTheme: this.setTheme,
direction: 'ltr',
setIframeTheme: this.setIframeTheme,
designToken: defaultDesignToken,
designToken: defaultSeedToken,
hashedStyle: true,
};
}