mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

feat: token update (#38314)

Browse Source 
* feat: token update

* chore: update test

* chore: lint

* chore: code clean

* test: update test case

* feat: radius token update

* fix: form size

* chore: fix steps style

* chore: code clean

* chore: update test case
This commit is contained in:
MadCcc 2022-11-01 15:06:38 +08:00 committed by GitHub
parent 0785068f0c
commit 9f88c1238a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
84 changed files with 693 additions and 855 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@ const genAlertTypeStyle = (
alertCls: string, alertCls: string,
): CSSObject => ({ ): CSSObject => ({
backgroundColor: bgColor, backgroundColor: bgColor,
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColor}`, border: `${token.lineWidth}px ${token.lineType} ${borderColor}`,
[`${alertCls}-icon`]: { [`${alertCls}-icon`]: {
color: iconColor, color: iconColor,
}, },
@ -33,7 +33,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
fontSize, fontSize,
fontSizeLG, fontSizeLG,
lineHeight, lineHeight,
radiusLG: borderRadius, borderRadiusLG: borderRadius,
motionEaseInOutCirc, motionEaseInOutCirc,
alertIconSizeLG, alertIconSizeLG,
colorText, colorText,

12
components/avatar/style/index.tsx
View File

@ -33,9 +33,9 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
avatarFontSizeBase, avatarFontSizeBase,
avatarFontSizeLG, avatarFontSizeLG,
avatarFontSizeSM, avatarFontSizeSM,
controlRadius, borderRadius,
controlRadiusLG, borderRadiusLG,
controlRadiusSM, borderRadiusSM,
lineWidth, lineWidth,
lineType, lineType,
} = token; } = token;
@ -89,14 +89,14 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
display: 'block', display: 'block',
}, },
...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, controlRadius), ...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, borderRadius),
[`&-lg`]: { [`&-lg`]: {
...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, controlRadiusLG), ...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, borderRadiusLG),
}, },
[`&-sm`]: { [`&-sm`]: {
...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, controlRadiusSM), ...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, borderRadiusSM),
}, },
'> img': { '> img': {

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

@ -288,7 +288,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
lineHeight: `${badgeFontHeight}px`, lineHeight: `${badgeFontHeight}px`,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
backgroundColor: token.colorPrimary, backgroundColor: token.colorPrimary,
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
[`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid }, [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
[`${ribbonPrefixCls}-corner`]: { [`${ribbonPrefixCls}-corner`]: {
position: 'absolute', position: 'absolute',
@ -324,10 +324,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Badge', token => { export default genComponentStyleHook('Badge', token => {
const { fontSize, lineHeight, fontSizeSM, controlLineWidth, marginXS, colorBorderBg } = token; const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token;
const badgeFontHeight = Math.round(fontSize * lineHeight); const badgeFontHeight = Math.round(fontSize * lineHeight);
const badgeShadowSize = controlLineWidth; const badgeShadowSize = lineWidth;
const badgeZIndex = 'auto'; const badgeZIndex = 'auto';
const badgeHeight = badgeFontHeight - 2 * badgeShadowSize; const badgeHeight = badgeFontHeight - 2 * badgeShadowSize;
const badgeTextColor = token.colorBgContainer; const badgeTextColor = token.colorBgContainer;

8
components/breadcrumb/style/index.tsx
View File

@ -39,7 +39,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
color: token.breadcrumbLinkColor, color: token.breadcrumbLinkColor,
transition: `color ${token.motionDurationFast}`, transition: `color ${token.motionDurationFast}`,
padding: `0 ${token.paddingXXS}px`, padding: `0 ${token.paddingXXS}px`,
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
height: token.lineHeight * token.fontSize, height: token.lineHeight * token.fontSize,
display: 'inline-block', display: 'inline-block',
marginInline: -token.marginXXS, marginInline: -token.marginXXS,
@ -71,7 +71,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
}, },
[`${componentCls}-overlay-link`]: { [`${componentCls}-overlay-link`]: {
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
height: token.lineHeight * token.fontSize, height: token.lineHeight * token.fontSize,
display: 'inline-block', display: 'inline-block',
padding: `0 ${token.paddingXXS}px`, padding: `0 ${token.paddingXXS}px`,
@ -110,8 +110,8 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
export default genComponentStyleHook('Breadcrumb', token => { export default genComponentStyleHook('Breadcrumb', token => {
const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, { const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
breadcrumbBaseColor: token.colorTextDescription, breadcrumbBaseColor: token.colorTextDescription,
breadcrumbFontSize: token.fontSizeBase, breadcrumbFontSize: token.fontSize,
breadcrumbIconFontSize: token.fontSizeBase, breadcrumbIconFontSize: token.fontSize,
breadcrumbLinkColor: token.colorTextDescription, breadcrumbLinkColor: token.colorTextDescription,
breadcrumbLinkColorHover: token.colorText, breadcrumbLinkColorHover: token.colorText,
breadcrumbLastItemColor: token.colorText, breadcrumbLastItemColor: token.colorText,

7
components/button/style/group.tsx
View File

@ -23,8 +23,7 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
}); });
const genGroupStyle: GenerateStyle<ButtonToken> = token => { const genGroupStyle: GenerateStyle<ButtonToken> = token => {
const { componentCls, fontSizeBase, controlLineWidth, colorPrimaryHover, colorErrorHover } = const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token;
token;
return { return {
[`${componentCls}-group`]: [ [`${componentCls}-group`]: [
@ -42,7 +41,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = token => {
}, },
'&:not(:first-child)': { '&:not(:first-child)': {
marginInlineStart: -controlLineWidth, marginInlineStart: -lineWidth,
[`&, & > ${componentCls}`]: { [`&, & > ${componentCls}`]: {
borderStartStartRadius: 0, borderStartStartRadius: 0,
@ -67,7 +66,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = token => {
}, },
[`${componentCls}-icon-only`]: { [`${componentCls}-icon-only`]: {
fontSize: fontSizeBase, fontSize,
}, },
}, },

28
components/button/style/index.tsx
View File

@ -29,7 +29,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
textAlign: 'center', textAlign: 'center',
backgroundImage: 'none', backgroundImage: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`, border: `${token.lineWidth}px ${token.lineType} transparent`,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
userSelect: 'none', userSelect: 'none',
@ -68,11 +68,11 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
'&:after': { '&:after': {
position: 'absolute', position: 'absolute',
top: -token.controlLineWidth, top: -token.lineWidth,
insetInlineStart: -token.controlLineWidth, insetInlineStart: -token.lineWidth,
display: 'inline-block', display: 'inline-block',
width: token.controlLineWidth, width: token.lineWidth,
height: `calc(100% + ${token.controlLineWidth * 2}px)`, height: `calc(100% + ${token.lineWidth * 2}px)`,
backgroundColor: token.colorPrimaryBorder, backgroundColor: token.colorPrimaryBorder,
content: '""', content: '""',
}, },
@ -86,11 +86,11 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
'&:after': { '&:after': {
position: 'absolute', position: 'absolute',
top: -token.controlLineWidth, top: -token.lineWidth,
insetInlineStart: -token.controlLineWidth, insetInlineStart: -token.lineWidth,
display: 'inline-block', display: 'inline-block',
width: `calc(100% + ${token.controlLineWidth * 2}px)`, width: `calc(100% + ${token.lineWidth * 2}px)`,
height: token.controlLineWidth, height: token.lineWidth,
backgroundColor: token.colorPrimaryBorder, backgroundColor: token.colorPrimaryBorder,
content: '""', content: '""',
}, },
@ -389,9 +389,9 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
const paddingVertical = Math.max( const paddingVertical = Math.max(
0, 0,
(token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.controlLineWidth, (token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.lineWidth,
); );
const paddingHorizontal = token.buttonPaddingHorizontal - token.controlLineWidth; const paddingHorizontal = token.buttonPaddingHorizontal - token.lineWidth;
const iconOnlyCls = `${componentCls}-icon-only`; const iconOnlyCls = `${componentCls}-icon-only`;
@ -402,7 +402,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
fontSize: token.fontSize, fontSize: token.fontSize,
height: token.controlHeight, height: token.controlHeight,
padding: `${paddingVertical}px ${paddingHorizontal}px`, padding: `${paddingVertical}px ${paddingHorizontal}px`,
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
[`&${iconOnlyCls}`]: { [`&${iconOnlyCls}`]: {
width: token.controlHeight, width: token.controlHeight,
@ -447,7 +447,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
controlHeight: token.controlHeightSM, controlHeight: token.controlHeightSM,
padding: token.paddingXS, padding: token.paddingXS,
buttonPaddingHorizontal: 8, // Fixed padding buttonPaddingHorizontal: 8, // Fixed padding
controlRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
}); });
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`); return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`);
@ -457,7 +457,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
const largeToken = mergeToken<ButtonToken>(token, { const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightLG, controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
controlRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
}); });
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`); return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`);

6
components/calendar/style/index.tsx
View File

@ -54,7 +54,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
[`${calendarCls} ${componentCls}-panel`]: { [`${calendarCls} ${componentCls}-panel`]: {
background: calendarFullPanelBg, background: calendarFullPanelBg,
border: 0, border: 0,
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`, borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
borderRadius: 0, borderRadius: 0,
[`${componentCls}-month-panel, ${componentCls}-date-panel`]: { [`${componentCls}-month-panel, ${componentCls}-date-panel`]: {
width: 'auto', width: 'auto',
@ -67,13 +67,13 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
}, },
}, },
[`${calendarCls}-mini`]: { [`${calendarCls}-mini`]: {
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
[`${calendarCls}-header`]: { [`${calendarCls}-header`]: {
paddingInlineEnd: token.paddingXS, paddingInlineEnd: token.paddingXS,
paddingInlineStart: token.paddingXS, paddingInlineStart: token.paddingXS,
}, },
[`${componentCls}-panel`]: { [`${componentCls}-panel`]: {
borderRadius: `0 0 ${token.controlRadiusLG}px ${token.controlRadiusLG}px`, borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
}, },
[`${componentCls}-content`]: { [`${componentCls}-content`]: {
height: token.miniContentHeight, height: token.miniContentHeight,

22
components/card/style/index.tsx
View File

@ -41,8 +41,8 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
fontWeight: token.fontWeightStrong, fontWeight: token.fontWeightStrong,
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
background: 'transparent', background: 'transparent',
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorderSecondary}`, borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
...clearFix(), ...clearFix(),
@ -72,10 +72,10 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
marginBottom: cardHeadTabsMarginBottom, marginBottom: cardHeadTabsMarginBottom,
color: token.colorText, color: token.colorText,
fontWeight: 'normal', fontWeight: 'normal',
fontSize: token.fontSizeBase, fontSize: token.fontSize,
'&-bar': { '&-bar': {
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorderSecondary}`, borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
}, },
}, },
}; };
@ -115,7 +115,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
padding: 0, padding: 0,
listStyle: 'none', listStyle: 'none',
background: token.colorBgContainer, background: token.colorBgContainer,
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`, borderTop: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
display: 'flex', display: 'flex',
...clearFix(), ...clearFix(),
@ -156,7 +156,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}, },
'&:not(:last-child)': { '&:not(:last-child)': {
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`, borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
}, },
}, },
}; };
@ -203,7 +203,7 @@ const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
'&-title': { '&-title': {
padding: `${cardInnerHeadPadding}px 0`, padding: `${cardInnerHeadPadding}px 0`,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
}, },
@ -248,7 +248,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
position: 'relative', position: 'relative',
background: token.colorBgContainer, background: token.colorBgContainer,
borderRadius: token.radiusLG, borderRadius: token.borderRadiusLG,
[`&:not(${componentCls}-bordered)`]: { [`&:not(${componentCls}-bordered)`]: {
boxShadow, boxShadow,
@ -262,7 +262,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
padding: '', padding: '',
color: '', color: '',
fontWeight: 'normal', fontWeight: 'normal',
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
[`${componentCls}-body`]: { [`${componentCls}-body`]: {
@ -279,7 +279,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}, },
img: { img: {
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
}, },
}, },
@ -289,7 +289,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}, },
[`${componentCls}-bordered`]: { [`${componentCls}-bordered`]: {
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`, border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
[`${componentCls}-cover`]: { [`${componentCls}-cover`]: {
marginTop: -1, marginTop: -1,

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

@ -88,7 +88,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
'-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857 '-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857
'&:not(:last-child)': { '&:not(:last-child)': {
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`, borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
}, },
'&-item': { '&-item': {
@ -100,7 +100,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationFast}`,
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
'&:hover': { '&:hover': {
background: token.controlItemBgHover, background: token.controlItemBgHover,

8
components/checkbox/style/index.tsx
View File

@ -104,8 +104,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
height: token.checkboxSize, height: token.checkboxSize,
direction: 'ltr', direction: 'ltr',
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
borderCollapse: 'separate', borderCollapse: 'separate',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationFast}`,
@ -117,7 +117,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
display: 'table', display: 'table',
width: (token.checkboxSize / 14) * 5, width: (token.checkboxSize / 14) * 5,
height: (token.checkboxSize / 14) * 8, height: (token.checkboxSize / 14) * 8,
border: `${token.lineWidthBold}px solid ${token.colorBgContainer}`, border: `${token.lineWidthBold}px solid ${token.colorWhite}`,
borderTop: 0, borderTop: 0,
borderInlineStart: 0, borderInlineStart: 0,
transform: 'rotate(45deg) scale(0) translate(-50%,-50%)', transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
@ -200,7 +200,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
insetInlineStart: 0, insetInlineStart: 0,
width: '100%', width: '100%',
height: '100%', height: '100%',
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
visibility: 'hidden', visibility: 'hidden',
border: `${token.lineWidthBold}px solid ${token.colorPrimary}`, border: `${token.lineWidthBold}px solid ${token.colorPrimary}`,
animationName: antCheckboxEffect, animationName: antCheckboxEffect,

8
components/collapse/style/index.tsx
View File

@ -23,8 +23,8 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
collapseHeaderPadding, collapseHeaderPadding,
collapsePanelBorderRadius, collapsePanelBorderRadius,
controlLineWidth, lineWidth,
controlLineType, lineType,
colorBorder, colorBorder,
colorText, colorText,
colorTextHeading, colorTextHeading,
@ -37,7 +37,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
fontSizeIcon, fontSizeIcon,
} = token; } = token;
const borderBase = `${controlLineWidth}px ${controlLineType} ${colorBorder}`; const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`;
return { return {
[componentCls]: { [componentCls]: {
@ -260,7 +260,7 @@ export default genComponentStyleHook('Collapse', token => {
collapseContentBg: token.colorBgContainer, collapseContentBg: token.colorBgContainer,
collapseHeaderBg: token.colorFillAlter, collapseHeaderBg: token.colorFillAlter,
collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`, collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
collapsePanelBorderRadius: token.radiusLG, collapsePanelBorderRadius: token.borderRadiusLG,
collapseContentPaddingHorizontal: 16, // Fixed value collapseContentPaddingHorizontal: 16, // Fixed value
}); });

35
components/config-provider/__tests__/theme.test.tsx
View File

@ -8,8 +8,7 @@ import { useToken } from '../../theme';
import theme from '../../theme/export'; import theme from '../../theme/export';
import { resetWarned } from '../../_util/warning'; import { resetWarned } from '../../_util/warning';
const { defaultAlgorithm, darkAlgorithm, defaultAlgorithmV4, darkAlgorithmV4, compactAlgorithm } = const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;
theme;
let mockCanUseDom = true; let mockCanUseDom = true;
@ -73,36 +72,6 @@ describe('ConfigProvider.Theme', () => {
expect(tokenRef?.colorPrimaryText).toBe('#177ddc'); expect(tokenRef?.colorPrimaryText).toBe('#177ddc');
}); });
it('defaultAlgorithmV4 should work', () => {
let tokenRef: any;
const Demo = () => {
const [, token] = useToken();
tokenRef = token;
return null;
};
render(
<ConfigProvider theme={{ token: { colorPrimary: '#1890ff' }, algorithm: defaultAlgorithmV4 }}>
<Demo />
</ConfigProvider>,
);
expect(tokenRef?.colorPrimaryText).toBe('#1890ff');
});
it('darkAlgorithmV4 should work', () => {
let tokenRef: any;
const Demo = () => {
const [, token] = useToken();
tokenRef = token;
return null;
};
render(
<ConfigProvider theme={{ token: { colorPrimary: '#1890ff' }, algorithm: darkAlgorithmV4 }}>
<Demo />
</ConfigProvider>,
);
expect(tokenRef?.colorPrimaryText).toBe('#177ddc');
});
it('compactAlgorithm should work', () => { it('compactAlgorithm should work', () => {
let tokenRef: any; let tokenRef: any;
const Demo = () => { const Demo = () => {
@ -111,7 +80,7 @@ describe('ConfigProvider.Theme', () => {
return null; return null;
}; };
render( render(
<ConfigProvider theme={{ token: { sizeBaseStep: 2 }, algorithm: compactAlgorithm }}> <ConfigProvider theme={{ algorithm: compactAlgorithm }}>
<Demo /> <Demo />
</ConfigProvider>, </ConfigProvider>,
); );

137
components/date-picker/style/index.tsx
View File

@ -67,11 +67,11 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
pickerCellInnerCls, pickerCellInnerCls,
pickerPanelCellHeight, pickerPanelCellHeight,
motionDurationSlow, motionDurationSlow,
controlRadiusSM, borderRadiusSM,
motionDurationFast, motionDurationFast,
controlItemBgHover, controlItemBgHover,
controlLineWidth, lineWidth,
controlLineType, lineType,
colorPrimary, colorPrimary,
controlItemBgActive, controlItemBgActive,
colorTextLightSolid, colorTextLightSolid,
@ -105,7 +105,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
minWidth: pickerPanelCellHeight, minWidth: pickerPanelCellHeight,
height: pickerPanelCellHeight, height: pickerPanelCellHeight,
lineHeight: `${pickerPanelCellHeight}px`, lineHeight: `${pickerPanelCellHeight}px`,
borderRadius: controlRadiusSM, borderRadius: borderRadiusSM,
transition: `background ${motionDurationFast}, border ${motionDurationFast}`, transition: `background ${motionDurationFast}, border ${motionDurationFast}`,
}, },
@ -127,8 +127,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
bottom: 0, bottom: 0,
insetInlineStart: 0, insetInlineStart: 0,
zIndex: 1, zIndex: 1,
border: `${controlLineWidth}px ${controlLineType} ${colorPrimary}`, border: `${lineWidth}px ${lineType} ${colorPrimary}`,
borderRadius: controlRadiusSM, borderRadius: borderRadiusSM,
content: '""', content: '""',
}, },
}, },
@ -178,8 +178,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
top: '50%', top: '50%',
zIndex: 0, zIndex: 0,
height: controlHeightSM, height: controlHeightSM,
borderTop: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderBottom: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
content: '""', content: '""',
@ -212,8 +212,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
// range start border-radius // range start border-radius
[`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]: [`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]:
{ {
borderStartStartRadius: controlRadiusSM, borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: controlRadiusSM, borderEndStartRadius: borderRadiusSM,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
}, },
@ -223,8 +223,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
{ {
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderEndStartRadius: 0, borderEndStartRadius: 0,
borderStartEndRadius: controlRadiusSM, borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: controlRadiusSM, borderEndEndRadius: borderRadiusSM,
}, },
'&-range-hover:is(&-range-end)::after': { '&-range-hover:is(&-range-end)::after': {
@ -238,9 +238,9 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
&-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after, &-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after,
&-in-view:is(&-range-hover-start)::after`]: { &-in-view:is(&-range-hover-start)::after`]: {
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineStart: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: controlLineWidth, borderStartStartRadius: lineWidth,
borderEndStartRadius: controlLineWidth, borderEndStartRadius: lineWidth,
}, },
// Edge end // Edge end
@ -250,9 +250,9 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
&-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after, &-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after,
&-in-view:is(&-range-hover-end)::after`]: { &-in-view:is(&-range-hover-end)::after`]: {
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineEnd: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartEndRadius: controlLineWidth, borderStartEndRadius: lineWidth,
borderEndEndRadius: controlLineWidth, borderEndEndRadius: lineWidth,
}, },
// >>> Disabled // >>> Disabled
@ -284,9 +284,9 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
paddingSM, paddingSM,
paddingXS, paddingXS,
colorBgContainer, colorBgContainer,
controlLineWidth, lineWidth,
controlLineType, lineType,
controlRadiusLG, borderRadiusLG,
colorPrimary, colorPrimary,
colorTextHeading, colorTextHeading,
colorSplit, colorSplit,
@ -309,10 +309,9 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
colorLinkActive, colorLinkActive,
colorLinkHover, colorLinkHover,
pickerDateHoverRangeBorderColor, pickerDateHoverRangeBorderColor,
controlRadiusSM, borderRadiusSM,
radiusSM,
colorTextLightSolid, colorTextLightSolid,
controlRadius, borderRadius,
controlItemBgHover, controlItemBgHover,
pickerTimePanelColumnHeight, pickerTimePanelColumnHeight,
pickerTimePanelColumnWidth, pickerTimePanelColumnWidth,
@ -332,8 +331,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
flexDirection: 'column', flexDirection: 'column',
textAlign: 'center', textAlign: 'center',
background: colorBgContainer, background: colorBgContainer,
border: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, border: `${lineWidth}px ${lineType} ${colorSplit}`,
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
outline: 'none', outline: 'none',
'&-focused': { '&-focused': {
@ -375,7 +374,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
display: 'flex', display: 'flex',
padding: `0 ${paddingXS}px`, padding: `0 ${paddingXS}px`,
color: colorTextHeading, color: colorTextHeading,
borderBottom: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
'> *': { '> *': {
flex: 'none', flex: 'none',
@ -560,22 +559,22 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
// ======================== Footer ======================== // ======================== Footer ========================
[`&-panel ${componentCls}-footer`]: { [`&-panel ${componentCls}-footer`]: {
borderTop: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
}, },
'&-footer': { '&-footer': {
width: 'min-content', width: 'min-content',
minWidth: '100%', minWidth: '100%',
lineHeight: `${pickerTextHeight - 2 * controlLineWidth}px`, lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
textAlign: 'center', textAlign: 'center',
'&-extra': { '&-extra': {
padding: `0 ${paddingSM}`, padding: `0 ${paddingSM}`,
lineHeight: `${pickerTextHeight - 2 * controlLineWidth}px`, lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
textAlign: 'start', textAlign: 'start',
'&:not(:last-child)': { '&:not(:last-child)': {
borderBottom: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
}, },
}, },
}, },
@ -630,34 +629,34 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
[`${componentCls}-cell-range-hover-start::after`]: { [`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: hoverCellFixedDistance, insetInlineStart: hoverCellFixedDistance,
borderInlineStart: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: controlRadiusSM, borderStartStartRadius: borderRadiusSM,
borderBottomStartRadius: controlRadiusSM, borderBottomStartRadius: borderRadiusSM,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderBottomEndRadius: 0, borderBottomEndRadius: 0,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineEnd: hoverCellFixedDistance, insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderBottomStartRadius: 0, borderBottomStartRadius: 0,
borderStartEndRadius: controlRadiusSM, borderStartEndRadius: borderRadiusSM,
borderBottomEndRadius: controlRadiusSM, borderBottomEndRadius: borderRadiusSM,
}, },
}, },
[`${componentCls}-cell-range-hover-end::after`]: { [`${componentCls}-cell-range-hover-end::after`]: {
insetInlineEnd: hoverCellFixedDistance, insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderBottomStartRadius: 0, borderBottomStartRadius: 0,
borderStartEndRadius: controlRadius, borderStartEndRadius: borderRadius,
borderBottomEndRadius: controlRadius, borderBottomEndRadius: borderRadius,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineStart: hoverCellFixedDistance, insetInlineStart: hoverCellFixedDistance,
borderInlineStart: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: controlRadius, borderStartStartRadius: borderRadius,
borderBottomStartRadius: controlRadius, borderBottomStartRadius: borderRadius,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderBottomEndRadius: 0, borderBottomEndRadius: 0,
}, },
@ -684,13 +683,13 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
transition: `background ${motionDurationFast}`, transition: `background ${motionDurationFast}`,
'&:first-child': { '&:first-child': {
borderStartStartRadius: radiusSM, borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: radiusSM, borderEndStartRadius: borderRadiusSM,
}, },
'&:last-child': { '&:last-child': {
borderStartEndRadius: radiusSM, borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: radiusSM, borderEndEndRadius: borderRadiusSM,
}, },
}, },
@ -737,7 +736,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
display: 'flex', display: 'flex',
[`${componentCls}-time-panel`]: { [`${componentCls}-time-panel`]: {
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`,
}, },
[`${componentCls}-date-panel, [`${componentCls}-date-panel,
@ -787,14 +786,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
content: '""', content: '""',
[`${componentCls}-datetime-panel &`]: { [`${componentCls}-datetime-panel &`]: {
height: height:
pickerTimePanelColumnHeight - pickerTimePanelColumnHeight - pickerPanelWithoutTimeCellHeight + 2 * lineWidth,
pickerPanelWithoutTimeCellHeight +
2 * controlLineWidth,
}, },
}, },
'&:not(:first-child)': { '&:not(:first-child)': {
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`,
}, },
'&-active': { '&-active': {
@ -821,7 +818,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2, paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2,
color: colorText, color: colorText,
lineHeight: `${pickerTimePanelCellHeight}px`, lineHeight: `${pickerTimePanelCellHeight}px`,
borderRadius: controlRadiusSM, borderRadius: borderRadiusSM,
cursor: 'pointer', cursor: 'pointer',
transition: `background ${motionDurationFast}`, transition: `background ${motionDurationFast}`,
@ -917,10 +914,10 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
fontSize, fontSize,
inputPaddingHorizontal, inputPaddingHorizontal,
colorBgContainer, colorBgContainer,
controlLineWidth, lineWidth,
controlLineType, lineType,
colorBorder, colorBorder,
controlRadius, borderRadius,
motionDurationFast, motionDurationFast,
colorBgContainerDisabled, colorBgContainerDisabled,
colorTextDisabled, colorTextDisabled,
@ -943,12 +940,12 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
controlItemBgActive, controlItemBgActive,
colorPrimaryBorder, colorPrimaryBorder,
sizePopupArrow, sizePopupArrow,
radiusXS, borderRadiusXS,
radiusOuter, borderRadiusOuter,
colorBgElevated, colorBgElevated,
controlRadiusLG, borderRadiusLG,
boxShadowSecondary, boxShadowSecondary,
radiusSM, borderRadiusSM,
colorSplit, colorSplit,
controlItemBgHover, controlItemBgHover,
presetsWidth, presetsWidth,
@ -963,8 +960,8 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
background: colorBgContainer, background: colorBgContainer,
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, border: `${lineWidth}px ${lineType} ${colorBorder}`,
borderRadius: controlRadius, borderRadius,
transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`, transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`,
// Space.Compact // Space.Compact
@ -1126,7 +1123,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
// Active bar // Active bar
[`${componentCls}-active-bar`]: { [`${componentCls}-active-bar`]: {
bottom: -controlLineWidth, bottom: -lineWidth,
height: lineWidthBold, height: lineWidthBold,
marginInlineStart: inputPaddingHorizontal, marginInlineStart: inputPaddingHorizontal,
background: colorPrimary, background: colorPrimary,
@ -1226,7 +1223,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
marginBottom: 0, marginBottom: 0,
padding: `${paddingXXS}px ${paddingSM}px`, padding: `${paddingXXS}px ${paddingSM}px`,
overflow: 'hidden', overflow: 'hidden',
lineHeight: `${pickerTextHeight - 2 * controlLineWidth - paddingXS / 2}px`, lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`,
textAlign: 'start', textAlign: 'start',
listStyle: 'none', listStyle: 'none',
display: 'flex', display: 'flex',
@ -1262,8 +1259,8 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
transition: `left ${motionDurationSlow} ease-out`, transition: `left ${motionDurationSlow} ease-out`,
...roundedArrow( ...roundedArrow(
sizePopupArrow, sizePopupArrow,
radiusXS, borderRadiusXS,
radiusOuter, borderRadiusOuter,
colorBgElevated, colorBgElevated,
boxShadowPopoverArrow, boxShadowPopoverArrow,
), ),
@ -1273,7 +1270,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
overflow: 'hidden', overflow: 'hidden',
verticalAlign: 'top', verticalAlign: 'top',
background: colorBgElevated, background: colorBgElevated,
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
boxShadow: boxShadowSecondary, boxShadow: boxShadowSecondary,
transition: `margin ${motionDurationSlow}`, transition: `margin ${motionDurationSlow}`,
@ -1298,11 +1295,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
overflow: 'auto', overflow: 'auto',
margin: 0, margin: 0,
padding: paddingXS, padding: paddingXS,
borderInlineEnd: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderInlineEnd: `${lineWidth}px ${lineType} ${colorSplit}`,
li: { li: {
...textEllipsis, ...textEllipsis,
borderRadius: radiusSM, borderRadius: borderRadiusSM,
paddingInline: paddingXS, paddingInline: paddingXS,
paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2, paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2,
cursor: 'pointer', cursor: 'pointer',
@ -1326,7 +1323,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
direction: 'ltr', direction: 'ltr',
[`${componentCls}-panel`]: { [`${componentCls}-panel`]: {
borderWidth: `0 0 ${controlLineWidth}px`, borderWidth: `0 0 ${lineWidth}px`,
}, },
'&:last-child': { '&:last-child': {

2
components/descriptions/style/index.tsx
View File

@ -101,7 +101,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: Descripti
}, },
[`${componentCls}-view`]: { [`${componentCls}-view`]: {
width: '100%', width: '100%',
borderRadius: token.radiusLG, borderRadius: token.borderRadiusLG,
table: { table: {
width: '100%', width: '100%',
tableLayout: 'fixed', tableLayout: 'fixed',

12
components/divider/style/index.tsx
View File

@ -16,12 +16,12 @@ interface DividerToken extends FullToken<'Divider'> {
// ============================== Shared ============================== // ============================== Shared ==============================
const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => { const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
const { componentCls, sizePaddingEdgeHorizontal, colorSplit, controlLineWidth } = token; const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token;
return { return {
[componentCls]: { [componentCls]: {
...resetComponent(token), ...resetComponent(token),
borderBlockStart: `${controlLineWidth}px solid ${colorSplit}`, borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
// vertical // vertical
'&-vertical': { '&-vertical': {
@ -32,7 +32,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
margin: `0 ${token.dividerVerticalGutterMargin}px`, margin: `0 ${token.dividerVerticalGutterMargin}px`,
verticalAlign: 'middle', verticalAlign: 'middle',
borderTop: 0, borderTop: 0,
borderInlineStart: `${controlLineWidth}px solid ${colorSplit}`, borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
}, },
'&-horizontal': { '&-horizontal': {
@ -57,7 +57,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
position: 'relative', position: 'relative',
top: '50%', top: '50%',
width: '50%', width: '50%',
borderBlockStart: `${controlLineWidth}px solid transparent`, borderBlockStart: `${lineWidth}px solid transparent`,
// Chrome not accept `inherit` in `border-top` // Chrome not accept `inherit` in `border-top`
borderBlockStartColor: 'inherit', borderBlockStartColor: 'inherit',
borderBlockEnd: 0, borderBlockEnd: 0,
@ -99,7 +99,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
background: 'none', background: 'none',
borderColor: colorSplit, borderColor: colorSplit,
borderStyle: 'dashed', borderStyle: 'dashed',
borderWidth: `${controlLineWidth}px 0 0`, borderWidth: `${lineWidth}px 0 0`,
}, },
'&-horizontal&-with-text&-dashed': { '&-horizontal&-with-text&-dashed': {
@ -109,7 +109,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
}, },
'&-vertical&-dashed': { '&-vertical&-dashed': {
borderInlineStart: controlLineWidth, borderInlineStart: lineWidth,
borderInlineEnd: 0, borderInlineEnd: 0,
borderBlockStart: 0, borderBlockStart: 0,
borderBlockEnd: 0, borderBlockEnd: 0,

32
components/dropdown/style/index.tsx
View File

@ -40,9 +40,9 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
motionDurationMid, motionDurationMid,
motionDurationFast, motionDurationFast,
dropdownPaddingVertical, dropdownPaddingVertical,
fontSizeBase, fontSize,
dropdownEdgeChildPadding, dropdownEdgeChildPadding,
radiusBase, borderRadius,
colorTextDisabled, colorTextDisabled,
fontSizeIcon, fontSizeIcon,
controlPaddingHorizontal, controlPaddingHorizontal,
@ -128,8 +128,8 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
...roundedArrow( ...roundedArrow(
sizePopupArrow, sizePopupArrow,
token.radiusXS, token.borderRadiusXS,
token.radiusOuter, token.borderRadiusOuter,
colorBgElevated, colorBgElevated,
boxShadowPopoverArrow, boxShadowPopoverArrow,
), ),
@ -265,7 +265,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
listStyleType: 'none', listStyleType: 'none',
backgroundColor: colorBgElevated, backgroundColor: colorBgElevated,
backgroundClip: 'padding-box', backgroundClip: 'padding-box',
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
outline: 'none', outline: 'none',
boxShadow: token.boxShadowSecondary, boxShadow: token.boxShadowSecondary,
...genFocusStyle(token), ...genFocusStyle(token),
@ -281,11 +281,11 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
}, },
[`${menuCls}-item-icon`]: { [`${menuCls}-item-icon`]: {
minWidth: fontSizeBase, minWidth: fontSize,
marginInlineEnd: token.marginXS, marginInlineEnd: token.marginXS,
fontSize: token.fontSizeSM, fontSize: token.fontSizeSM,
}, },
@ -316,20 +316,20 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`, padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
color: token.colorText, color: token.colorText,
fontWeight: 'normal', fontWeight: 'normal',
fontSize: fontSizeBase, fontSize,
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${motionDurationFast}`, transition: `all ${motionDurationFast}`,
'&:first-child': !dropdownEdgeChildPadding '&:first-child': !dropdownEdgeChildPadding
? { ? {
borderRadius: `${radiusBase}px ${radiusBase}px 0 0`, borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,
} }
: [], : [],
'&:last-child': !dropdownEdgeChildPadding '&:last-child': !dropdownEdgeChildPadding
? { ? {
borderRadius: `0 0 ${radiusBase}px ${radiusBase}px`, borderRadius: `0 0 ${borderRadius}px ${borderRadius}px`,
} }
: [], : [],
@ -431,19 +431,19 @@ export default genComponentStyleHook(
marginXXS, marginXXS,
sizePopupArrow, sizePopupArrow,
controlHeight, controlHeight,
fontSizeBase, fontSize,
lineHeight, lineHeight,
paddingXXS, paddingXXS,
componentCls, componentCls,
radiusOuter, borderRadiusOuter,
radiusLG, borderRadiusLG,
} = token; } = token;
const dropdownPaddingVertical = (controlHeight - fontSizeBase * lineHeight) / 2; const dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2;
const { dropdownArrowOffset } = getArrowOffset({ const { dropdownArrowOffset } = getArrowOffset({
sizePopupArrow, sizePopupArrow,
contentRadius: radiusLG, contentRadius: borderRadiusLG,
radiusOuter, borderRadiusOuter,
}); });
const dropdownToken = mergeToken<DropdownToken>(token, { const dropdownToken = mergeToken<DropdownToken>(token, {

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

@ -14,12 +14,12 @@ interface EmptyToken extends FullToken<'Empty'> {
// ============================== Shared ============================== // ============================== Shared ==============================
const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => { const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
const { componentCls, margin, marginXS, marginXL, fontSizeBase, lineHeight } = token; const { componentCls, margin, marginXS, marginXL, fontSize, lineHeight } = token;
return { return {
[componentCls]: { [componentCls]: {
marginInline: marginXS, marginInline: marginXS,
fontSize: fontSizeBase, fontSize,
lineHeight, lineHeight,
textAlign: 'center', textAlign: 'center',

26
components/float-button/style/index.tsx
View File

@ -24,7 +24,7 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
// ============================== Group ============================== // ============================== Group ==============================
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => { const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => {
const { componentCls, floatButtonSize, margin, radiusBase, motionDurationSlow } = token; const { componentCls, floatButtonSize, margin, borderRadius, motionDurationSlow } = token;
const groupPrefixCls = `${componentCls}-group`; const groupPrefixCls = `${componentCls}-group`;
const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', { const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
'0%': { '0%': {
@ -66,7 +66,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
insetInlineEnd: token.floatButtonInsetInlineEnd, insetInlineEnd: token.floatButtonInsetInlineEnd,
insetBlockEnd: token.floatButtonInsetBlockEnd, insetBlockEnd: token.floatButtonInsetBlockEnd,
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
borderRadius: token.radiusBase, borderRadius: token.borderRadius,
[`${groupPrefixCls}-wrap`]: { [`${groupPrefixCls}-wrap`]: {
zIndex: -1, zIndex: -1,
@ -95,12 +95,12 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
borderRadius: 0, borderRadius: 0,
padding: 0, padding: 0,
'&:first-child': { '&:first-child': {
borderStartStartRadius: radiusBase, borderStartStartRadius: borderRadius,
borderStartEndRadius: radiusBase, borderStartEndRadius: borderRadius,
}, },
'&:last-child': { '&:last-child': {
borderEndStartRadius: radiusBase, borderEndStartRadius: borderRadius,
borderEndEndRadius: radiusBase, borderEndEndRadius: borderRadius,
}, },
'&:not(:last-child)': { '&:not(:last-child)': {
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
@ -108,7 +108,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
}, },
[`${groupPrefixCls}-wrap`]: { [`${groupPrefixCls}-wrap`]: {
display: 'block', display: 'block',
borderRadius: radiusBase, borderRadius,
boxShadow: token.boxShadowSecondary, boxShadow: token.boxShadowSecondary,
overflow: 'hidden', overflow: 'hidden',
[`${componentCls}-square`]: { [`${componentCls}-square`]: {
@ -117,12 +117,12 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
borderRadius: 0, borderRadius: 0,
padding: token.paddingXXS, padding: token.paddingXXS,
'&:first-child': { '&:first-child': {
borderStartStartRadius: radiusBase, borderStartStartRadius: borderRadius,
borderStartEndRadius: radiusBase, borderStartEndRadius: borderRadius,
}, },
'&:last-child': { '&:last-child': {
borderEndStartRadius: radiusBase, borderEndStartRadius: borderRadius,
borderEndEndRadius: radiusBase, borderEndEndRadius: borderRadius,
}, },
'&:not(:last-child)': { '&:not(:last-child)': {
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
@ -227,10 +227,10 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
[`${componentCls}-square`]: { [`${componentCls}-square`]: {
height: 'auto', height: 'auto',
minHeight: floatButtonSize, minHeight: floatButtonSize,
borderRadius: token.radiusBase, borderRadius: token.borderRadius,
[`${componentCls}-body`]: { [`${componentCls}-body`]: {
height: 'auto', height: 'auto',
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
}, },
}, },
[`${componentCls}-default`]: { [`${componentCls}-default`]: {

24
components/form/style/index.tsx
View File

@ -19,7 +19,7 @@ const resetForm = (token: AliasToken): CSSObject => ({
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
lineHeight: 'inherit', lineHeight: 'inherit',
border: 0, border: 0,
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
}, },
label: { label: {
@ -68,15 +68,21 @@ const resetForm = (token: AliasToken): CSSObject => ({
}, },
}); });
const genFormSize = (token: FormToken, height: number): CSSObject => ({ const genFormSize = (token: FormToken, height: number): CSSObject => {
[`${token.formItemCls}-label > label`]: { const { formItemCls } = token;
height,
},
[`${token.formItemCls}-control-input`]: { return {
minHeight: height, [formItemCls]: {
}, [`${formItemCls}-label > label`]: {
}); height,
},
[`${formItemCls}-control-input`]: {
minHeight: height,
},
},
};
};
const genFormStyle: GenerateStyle<FormToken> = token => { const genFormStyle: GenerateStyle<FormToken> = token => {
const { componentCls } = token; const { componentCls } = token;

52
components/input-number/style/index.tsx
View File

@ -27,10 +27,10 @@ type InputNumberToken = InputToken<FullToken<'InputNumber'>>;
const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => { const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
const { const {
componentCls, componentCls,
controlLineWidth, lineWidth,
controlLineType, lineType,
colorBorder, colorBorder,
controlRadius, borderRadius,
fontSizeLG, fontSizeLG,
controlHeightLG, controlHeightLG,
controlHeightSM, controlHeightSM,
@ -44,8 +44,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
colorBgContainer, colorBgContainer,
motionDurationMid, motionDurationMid,
colorTextDisabled, colorTextDisabled,
controlRadiusSM, borderRadiusSM,
controlRadiusLG, borderRadiusLG,
controlWidth, controlWidth,
handleVisible, handleVisible,
} = token; } = token;
@ -61,8 +61,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
width: controlWidth, width: controlWidth,
margin: 0, margin: 0,
padding: 0, padding: 0,
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, border: `${lineWidth}px ${lineType} ${colorBorder}`,
borderRadius: controlRadius, borderRadius,
...genCompactItemStyle(token, componentCls), ...genCompactItemStyle(token, componentCls),
@ -77,19 +77,19 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
'&-lg': { '&-lg': {
padding: 0, padding: 0,
fontSize: fontSizeLG, fontSize: fontSizeLG,
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
[`input${componentCls}-input`]: { [`input${componentCls}-input`]: {
height: controlHeightLG - 2 * controlLineWidth, height: controlHeightLG - 2 * lineWidth,
}, },
}, },
'&-sm': { '&-sm': {
padding: 0, padding: 0,
borderRadius: controlRadiusSM, borderRadius: borderRadiusSM,
[`input${componentCls}-input`]: { [`input${componentCls}-input`]: {
height: controlHeightSM - 2 * controlLineWidth, height: controlHeightSM - 2 * lineWidth,
padding: `0 ${inputPaddingHorizontalSM}px`, padding: `0 ${inputPaddingHorizontalSM}px`,
}, },
}, },
@ -133,12 +133,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
// Size // Size
'&-lg': { '&-lg': {
[`${componentCls}-group-addon`]: { [`${componentCls}-group-addon`]: {
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
}, },
}, },
'&-sm': { '&-sm': {
[`${componentCls}-group-addon`]: { [`${componentCls}-group-addon`]: {
borderRadius: controlRadiusSM, borderRadius: borderRadiusSM,
}, },
}, },
}, },
@ -147,12 +147,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
[componentCls]: { [componentCls]: {
'&-input': { '&-input': {
width: '100%', width: '100%',
height: controlHeight - 2 * controlLineWidth, height: controlHeight - 2 * lineWidth,
padding: `0 ${inputPaddingHorizontal}px`, padding: `0 ${inputPaddingHorizontal}px`,
textAlign: 'start', textAlign: 'start',
backgroundColor: 'transparent', backgroundColor: 'transparent',
border: 0, border: 0,
borderRadius: controlRadius, borderRadius,
outline: 0, outline: 0,
transition: `all ${motionDurationFast} linear`, transition: `all ${motionDurationFast} linear`,
appearance: 'textfield', appearance: 'textfield',
@ -186,8 +186,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
height: '100%', height: '100%',
background: colorBgContainer, background: colorBgContainer,
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderStartEndRadius: controlRadius, borderStartEndRadius: borderRadius,
borderEndEndRadius: controlRadius, borderEndEndRadius: borderRadius,
borderEndStartRadius: 0, borderEndStartRadius: 0,
opacity: handleVisible === true ? 1 : 0, opacity: handleVisible === true ? 1 : 0,
display: 'flex', display: 'flex',
@ -223,7 +223,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
lineHeight: 0, lineHeight: 0,
textAlign: 'center', textAlign: 'center',
cursor: 'pointer', cursor: 'pointer',
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
transition: `all ${motionDurationFast} linear`, transition: `all ${motionDurationFast} linear`,
'&:active': { '&:active': {
background: token.colorFillAlter, background: token.colorFillAlter,
@ -251,12 +251,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
}, },
[`${componentCls}-handler-up`]: { [`${componentCls}-handler-up`]: {
borderStartEndRadius: controlRadius, borderStartEndRadius: borderRadius,
}, },
[`${componentCls}-handler-down`]: { [`${componentCls}-handler-down`]: {
borderBlockStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`,
borderEndEndRadius: controlRadius, borderEndEndRadius: borderRadius,
}, },
// Disabled // Disabled
@ -302,8 +302,8 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
inputPaddingHorizontal, inputPaddingHorizontal,
inputAffixPadding, inputAffixPadding,
controlWidth, controlWidth,
controlRadiusLG, borderRadiusLG,
controlRadiusSM, borderRadiusSM,
} = token; } = token;
return { return {
@ -318,11 +318,11 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
paddingInlineStart: inputPaddingHorizontal, paddingInlineStart: inputPaddingHorizontal,
'&-lg': { '&-lg': {
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
}, },
'&-sm': { '&-sm': {
borderRadius: controlRadiusSM, borderRadius: borderRadiusSM,
}, },
'&:not(&-disabled):hover': { '&:not(&-disabled):hover': {
@ -399,7 +399,7 @@ export default genComponentStyleHook(
}, },
token => ({ token => ({
controlWidth: 90, controlWidth: 90,
handleWidth: token.controlHeightSM - token.controlLineWidth * 2, handleWidth: token.controlHeightSM - token.lineWidth * 2,
handleFontSize: token.fontSize / 2, handleFontSize: token.fontSize / 2,
handleVisible: 'auto', handleVisible: 'auto',
}), }),

77
components/input/style/index.tsx
View File

@ -32,13 +32,13 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
export const genHoverStyle = (token: InputToken): CSSObject => ({ export const genHoverStyle = (token: InputToken): CSSObject => ({
borderColor: token.inputBorderHoverColor, borderColor: token.inputBorderHoverColor,
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.lineWidth,
}); });
export const genActiveStyle = (token: InputToken) => ({ export const genActiveStyle = (token: InputToken) => ({
borderColor: token.inputBorderHoverColor, borderColor: token.inputBorderHoverColor,
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.lineWidth,
outline: 0, outline: 0,
}); });
@ -56,18 +56,18 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
}); });
const genInputLargeStyle = (token: InputToken): CSSObject => { const genInputLargeStyle = (token: InputToken): CSSObject => {
const { inputPaddingVerticalLG, inputPaddingHorizontal, fontSizeLG, controlRadiusLG } = token; const { inputPaddingVerticalLG, inputPaddingHorizontal, fontSizeLG, borderRadiusLG } = token;
return { return {
padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontal}px`, padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontal}px`,
fontSize: fontSizeLG, fontSize: fontSizeLG,
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
}; };
}; };
export const genInputSmallStyle = (token: InputToken): CSSObject => ({ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`, padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
}); });
export const genStatusStyle = (token: InputToken): CSSObject => { export const genStatusStyle = (token: InputToken): CSSObject => {
@ -138,10 +138,10 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
backgroundImage: 'none', backgroundImage: 'none',
borderWidth: token.controlLineWidth, borderWidth: token.lineWidth,
borderStyle: token.controlLineType, borderStyle: token.lineType,
borderColor: token.colorBorder, borderColor: token.colorBorder,
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationFast}`,
...genPlaceholderStyle(token.colorTextPlaceholder), ...genPlaceholderStyle(token.colorTextPlaceholder),
@ -263,8 +263,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
fontSize: token.fontSize, fontSize: token.fontSize,
textAlign: 'center', textAlign: 'center',
backgroundColor: token.colorFillAlter, backgroundColor: token.colorFillAlter,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
transition: `all ${token.motionDurationSlow}`, transition: `all ${token.motionDurationSlow}`,
// Reset Select's style in addon // Reset Select's style in addon
@ -274,7 +274,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
[`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: { [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
[`${antCls}-select-selector`]: { [`${antCls}-select-selector`]: {
backgroundColor: 'inherit', backgroundColor: 'inherit',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`, border: `${token.lineWidth}px ${token.lineType} transparent`,
boxShadow: 'none', boxShadow: 'none',
}, },
}, },
@ -368,8 +368,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
[`.${prefixCls}-search &`]: { [`.${prefixCls}-search &`]: {
borderStartStartRadius: token.controlRadius, borderStartStartRadius: token.borderRadius,
borderEndStartRadius: token.controlRadius, borderEndStartRadius: token.borderRadius,
}, },
}, },
@ -385,7 +385,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
[`.${prefixCls}-group-addon, .${prefixCls}-group-wrap, > .${prefixCls}`]: { [`.${prefixCls}-group-addon, .${prefixCls}-group-wrap, > .${prefixCls}`]: {
'&:not(:first-child):not(:last-child)': { '&:not(:first-child):not(:last-child)': {
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.lineWidth,
'&:hover': { '&:hover': {
zIndex: 1, zIndex: 1,
@ -413,8 +413,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
'& > *:not(:last-child)': { '& > *:not(:last-child)': {
marginInlineEnd: -token.controlLineWidth, marginInlineEnd: -token.lineWidth,
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.lineWidth,
}, },
// Undo float for .ant-input-group .ant-input // Undo float for .ant-input-group .ant-input
@ -427,7 +427,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
& > ${antCls}-select-auto-complete .${prefixCls}, & > ${antCls}-select-auto-complete .${prefixCls},
& > ${antCls}-cascader-picker .${prefixCls}, & > ${antCls}-cascader-picker .${prefixCls},
& > .${prefixCls}-group-wrapper .${prefixCls}`]: { & > .${prefixCls}-group-wrapper .${prefixCls}`]: {
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.lineWidth,
borderRadius: 0, borderRadius: 0,
'&:hover': { '&:hover': {
@ -452,17 +452,17 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
& > ${antCls}-select:first-child > ${antCls}-select-selector, & > ${antCls}-select:first-child > ${antCls}-select-selector,
& > ${antCls}-select-auto-complete:first-child .${prefixCls}, & > ${antCls}-select-auto-complete:first-child .${prefixCls},
& > ${antCls}-cascader-picker:first-child .${prefixCls}`]: { & > ${antCls}-cascader-picker:first-child .${prefixCls}`]: {
borderStartStartRadius: token.controlRadius, borderStartStartRadius: token.borderRadius,
borderEndStartRadius: token.controlRadius, borderEndStartRadius: token.borderRadius,
}, },
[`& > *:last-child, [`& > *:last-child,
& > ${antCls}-select:last-child > ${antCls}-select-selector, & > ${antCls}-select:last-child > ${antCls}-select-selector,
& > ${antCls}-cascader-picker:last-child .${prefixCls}, & > ${antCls}-cascader-picker:last-child .${prefixCls},
& > ${antCls}-cascader-picker-focused:last-child .${prefixCls}`]: { & > ${antCls}-cascader-picker-focused:last-child .${prefixCls}`]: {
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.lineWidth,
borderStartEndRadius: token.controlRadius, borderStartEndRadius: token.borderRadius,
borderEndEndRadius: token.controlRadius, borderEndEndRadius: token.borderRadius,
}, },
// https://github.com/ant-design/ant-design/issues/12493 // https://github.com/ant-design/ant-design/issues/12493
@ -471,7 +471,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
[`.${prefixCls}-group-wrapper + .${prefixCls}-group-wrapper`]: { [`.${prefixCls}-group-wrapper + .${prefixCls}-group-wrapper`]: {
marginInlineStart: -token.controlLineWidth, marginInlineStart: -token.lineWidth,
[`.${prefixCls}-affix-wrapper`]: { [`.${prefixCls}-affix-wrapper`]: {
borderRadius: 0, borderRadius: 0,
}, },
@ -484,10 +484,10 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
[`& > .${prefixCls}`]: { [`& > .${prefixCls}`]: {
borderStartStartRadius: token.controlRadius, borderStartStartRadius: token.borderRadius,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
borderEndStartRadius: token.controlRadius, borderEndStartRadius: token.borderRadius,
}, },
}, },
}, },
@ -496,11 +496,10 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}; };
const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => { const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const { prefixCls, controlHeightSM, controlLineWidth } = token; const { prefixCls, controlHeightSM, lineWidth } = token;
const FIXED_CHROME_COLOR_HEIGHT = 16; const FIXED_CHROME_COLOR_HEIGHT = 16;
const colorSmallPadding = const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
(controlHeightSM - controlLineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
return { return {
[`.${prefixCls}`]: { [`.${prefixCls}`]: {
@ -670,7 +669,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
}; };
const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => { const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const { prefixCls, colorError, colorSuccess, componentCls, controlRadiusLG, controlRadiusSM } = const { prefixCls, colorError, colorSuccess, componentCls, borderRadiusLG, borderRadiusSM } =
token; token;
return { return {
@ -696,12 +695,12 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
// Size // Size
'&-lg': { '&-lg': {
[`${componentCls}-group-addon`]: { [`${componentCls}-group-addon`]: {
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
}, },
}, },
'&-sm': { '&-sm': {
[`${componentCls}-group-addon`]: { [`${componentCls}-group-addon`]: {
borderRadius: controlRadiusSM, borderRadius: borderRadiusSM,
}, },
}, },
@ -759,8 +758,8 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
paddingTop: 0, paddingTop: 0,
paddingBottom: 0, paddingBottom: 0,
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderStartEndRadius: token.controlRadius, borderStartEndRadius: token.borderRadius,
borderEndEndRadius: token.controlRadius, borderEndEndRadius: token.borderRadius,
borderEndStartRadius: 0, borderEndStartRadius: 0,
}, },
@ -810,7 +809,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
[`&:not(.${prefixCls}-compact-last-item)`]: { [`&:not(.${prefixCls}-compact-last-item)`]: {
[`.${prefixCls}-group-addon`]: { [`.${prefixCls}-group-addon`]: {
[`.${prefixCls}-search-button`]: { [`.${prefixCls}-search-button`]: {
marginInlineEnd: -token.controlLineWidth, marginInlineEnd: -token.lineWidth,
borderRadius: 0, borderRadius: 0,
}, },
}, },
@ -844,19 +843,19 @@ export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): I
inputAffixPadding: token.paddingXXS, inputAffixPadding: token.paddingXXS,
inputPaddingVertical: Math.max( inputPaddingVertical: Math.max(
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 - Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.controlLineWidth, token.lineWidth,
3, 3,
), ),
inputPaddingVerticalLG: inputPaddingVerticalLG:
Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 - Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
token.controlLineWidth, token.lineWidth,
inputPaddingVerticalSM: Math.max( inputPaddingVerticalSM: Math.max(
Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 - Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.controlLineWidth, token.lineWidth,
0, 0,
), ),
inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth, inputPaddingHorizontal: token.controlPaddingHorizontal - token.lineWidth,
inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth, inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.lineWidth,
inputBorderHoverColor: token.colorPrimaryHover, inputBorderHoverColor: token.colorPrimaryHover,
inputBorderActiveColor: token.colorPrimaryHover, inputBorderActiveColor: token.colorPrimaryHover,
}); });

14
components/layout/style/index.tsx
View File

@ -36,8 +36,8 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
layoutZeroTriggerSize, layoutZeroTriggerSize,
motionDurationMid, motionDurationMid,
motionDurationSlow, motionDurationSlow,
fontSizeBase, fontSize,
radiusBase, borderRadius,
} = token; } = token;
return { return {
@ -82,7 +82,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
[`${componentCls}-footer`]: { [`${componentCls}-footer`]: {
padding: layoutFooterPadding, padding: layoutFooterPadding,
color: colorText, color: colorText,
fontSize: fontSizeBase, fontSize,
background: colorBgBody, background: colorBgBody,
}, },
@ -154,8 +154,8 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
justifyContent: 'center', justifyContent: 'center',
background: colorBgHeader, background: colorBgHeader,
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderStartEndRadius: radiusBase, borderStartEndRadius: borderRadius,
borderEndEndRadius: radiusBase, borderEndEndRadius: borderRadius,
borderEndStartRadius: 0, borderEndStartRadius: 0,
cursor: 'pointer', cursor: 'pointer',
@ -176,10 +176,10 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
'&-right': { '&-right': {
insetInlineStart: -layoutZeroTriggerSize, insetInlineStart: -layoutZeroTriggerSize,
borderStartStartRadius: radiusBase, borderStartStartRadius: borderRadius,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
borderEndStartRadius: radiusBase, borderEndStartRadius: borderRadius,
}, },
}, },
}, },

6
components/list/style/index.tsx
View File

@ -24,12 +24,12 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
padding, padding,
listItemPaddingSM, listItemPaddingSM,
marginLG, marginLG,
radiusLG, borderRadiusLG,
} = token; } = token;
return { return {
[`${listBorderedCls}`]: { [`${listBorderedCls}`]: {
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: radiusLG, borderRadius: borderRadiusLG,
[`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: { [`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
paddingInline: paddingLG, paddingInline: paddingLG,
}, },
@ -297,7 +297,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
}, },
[`${componentCls}-split ${componentCls}-item`]: { [`${componentCls}-split ${componentCls}-item`]: {
borderBlockEnd: `${token.lineWidth}px ${token.controlLineType} ${token.colorSplit}`, borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
[`&:last-child`]: { [`&:last-child`]: {
borderBlockEnd: 'none', borderBlockEnd: 'none',

12
components/mentions/style/index.tsx
View File

@ -33,7 +33,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
inputPaddingVertical, inputPaddingVertical,
fontSize, fontSize,
colorBgElevated, colorBgElevated,
controlRadiusLG, borderRadiusLG,
boxShadowSecondary, boxShadowSecondary,
} = token; } = token;
@ -144,7 +144,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
fontSize, fontSize,
fontVariant: 'initial', fontVariant: 'initial',
backgroundColor: colorBgElevated, backgroundColor: colorBgElevated,
borderRadius: controlRadiusLG, borderRadius: borderRadiusLG,
outline: 'none', outline: 'none',
boxShadow: boxShadowSecondary, boxShadow: boxShadowSecondary,
@ -177,8 +177,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
}, },
'&:first-child': { '&:first-child': {
borderStartStartRadius: controlRadiusLG, borderStartStartRadius: borderRadiusLG,
borderStartEndRadius: controlRadiusLG, borderStartEndRadius: borderRadiusLG,
borderEndStartRadius: 0, borderEndStartRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
}, },
@ -186,8 +186,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
'&:last-child': { '&:last-child': {
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndStartRadius: controlRadiusLG, borderEndStartRadius: borderRadiusLG,
borderEndEndRadius: controlRadiusLG, borderEndEndRadius: borderRadiusLG,
}, },
'&-disabled': { '&-disabled': {

14
components/menu/style/index.tsx
View File

@ -83,8 +83,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
lineWidth, lineWidth,
iconCls, iconCls,
zIndexPopup, zIndexPopup,
radiusBase, borderRadius,
radiusLG, borderRadiusLG,
radiusSubMenuItem, radiusSubMenuItem,
menuArrowSize, menuArrowSize,
controlHeightSM, controlHeightSM,
@ -287,7 +287,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
position: 'absolute', position: 'absolute',
zIndex: zIndexPopup, zIndex: zIndexPopup,
background: 'transparent', background: 'transparent',
borderRadius: radiusLG, borderRadius: borderRadiusLG,
boxShadow: 'none', boxShadow: 'none',
transformOrigin: '0 0', transformOrigin: '0 0',
@ -310,7 +310,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
}, },
[`> ${componentCls}`]: { [`> ${componentCls}`]: {
borderRadius: radiusLG, borderRadius: borderRadiusLG,
[`> ${componentCls}-item`]: { [`> ${componentCls}-item`]: {
borderRadius: radiusSubMenuItem, borderRadius: radiusSubMenuItem,
@ -340,7 +340,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
width: menuArrowSize * 0.6, width: menuArrowSize * 0.6,
height: menuArrowSize * 0.15, height: menuArrowSize * 0.15,
backgroundColor: 'currentcolor', backgroundColor: 'currentcolor',
borderRadius: radiusBase, borderRadius,
transition: [ transition: [
`background ${motionDurationSlow} ${motionEaseInOut}`, `background ${motionDurationSlow} ${motionEaseInOut}`,
`transform ${motionDurationSlow} ${motionEaseInOut}`, `transform ${motionDurationSlow} ${motionEaseInOut}`,
@ -502,8 +502,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
return { return {
dropdownWidth: 160, dropdownWidth: 160,
zIndexPopup: token.zIndexPopupBase + 50, zIndexPopup: token.zIndexPopupBase + 50,
radiusItem: token.radiusLG, radiusItem: token.borderRadiusLG,
radiusSubMenuItem: token.radiusSM, radiusSubMenuItem: token.borderRadiusSM,
colorItemText: colorText, colorItemText: colorText,
colorItemTextHover: colorText, colorItemTextHover: colorText,
colorItemTextHoverHorizontal: colorPrimary, colorItemTextHoverHorizontal: colorPrimary,

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

@ -31,7 +31,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
motionDurationSlow, motionDurationSlow,
marginXS, marginXS,
paddingXS, paddingXS,
radiusLG, borderRadiusLG,
zIndexPopup, zIndexPopup,
// Custom token // Custom token
messageNoticeContentPadding, messageNoticeContentPadding,
@ -128,7 +128,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
display: 'inline-block', display: 'inline-block',
padding: messageNoticeContentPadding, padding: messageNoticeContentPadding,
background: colorBgElevated, background: colorBgElevated,
borderRadius: radiusLG, borderRadius: borderRadiusLG,
boxShadow: boxShadowSecondary, boxShadow: boxShadowSecondary,
pointerEvents: 'all', pointerEvents: 'all',
}, },

20
components/modal/style/index.tsx
View File

@ -162,7 +162,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
backgroundColor: token.modalContentBg, backgroundColor: token.modalContentBg,
backgroundClip: 'padding-box', backgroundClip: 'padding-box',
border: 0, border: 0,
borderRadius: token.radiusLG, borderRadius: token.borderRadiusLG,
boxShadow: token.boxShadowSecondary, boxShadow: token.boxShadowSecondary,
pointerEvents: 'auto', pointerEvents: 'auto',
padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
@ -179,7 +179,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
lineHeight: 1, lineHeight: 1,
textDecoration: 'none', textDecoration: 'none',
background: 'transparent', background: 'transparent',
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
width: token.modalConfirmIconSize, width: token.modalConfirmIconSize,
height: token.modalConfirmIconSize, height: token.modalConfirmIconSize,
border: 0, border: 0,
@ -213,12 +213,12 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
[`${componentCls}-header`]: { [`${componentCls}-header`]: {
color: token.colorText, color: token.colorText,
background: token.modalHeaderBg, background: token.modalHeaderBg,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
marginBottom: token.marginXS, marginBottom: token.marginXS,
}, },
[`${componentCls}-body`]: { [`${componentCls}-body`]: {
fontSize: token.fontSizeBase, fontSize: token.fontSize,
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
wordWrap: 'break-word', wordWrap: 'break-word',
}, },
@ -302,7 +302,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
[`${confirmComponentCls}-content`]: { [`${confirmComponentCls}-content`]: {
color: token.colorText, color: token.colorText,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
[`> ${token.iconCls}`]: { [`> ${token.iconCls}`]: {
@ -389,7 +389,7 @@ const genWireframeStyle: GenerateStyle<ModalToken> = token => {
[`${componentCls}-footer`]: { [`${componentCls}-footer`]: {
padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`, padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`,
borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`, borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`,
borderRadius: `0 0 ${token.radiusLG}px ${token.radiusLG}px`, borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
marginTop: 0, marginTop: 0,
}, },
}, },
@ -425,8 +425,8 @@ export default genComponentStyleHook('Modal', token => {
modalBodyPadding: token.paddingLG, modalBodyPadding: token.paddingLG,
modalHeaderBg: token.colorBgElevated, modalHeaderBg: token.colorBgElevated,
modalHeaderPadding: `${headerPaddingVertical}px ${token.paddingLG}px`, modalHeaderPadding: `${headerPaddingVertical}px ${token.paddingLG}px`,
modalHeaderBorderWidth: token.controlLineWidth, modalHeaderBorderWidth: token.lineWidth,
modalHeaderBorderStyle: token.controlLineType, modalHeaderBorderStyle: token.lineType,
modalHeaderTitleLineHeight: headerLineHeight, modalHeaderTitleLineHeight: headerLineHeight,
modalHeaderTitleFontSize: headerFontSize, modalHeaderTitleFontSize: headerFontSize,
modalHeaderBorderColorSplit: token.colorSplit, modalHeaderBorderColorSplit: token.colorSplit,
@ -436,10 +436,10 @@ export default genComponentStyleHook('Modal', token => {
modalCloseColor: token.colorTextDescription, modalCloseColor: token.colorTextDescription,
modalFooterBg: 'transparent', modalFooterBg: 'transparent',
modalFooterBorderColorSplit: token.colorSplit, modalFooterBorderColorSplit: token.colorSplit,
modalFooterBorderStyle: token.controlLineType, modalFooterBorderStyle: token.lineType,
modalFooterPaddingVertical: token.paddingXS, modalFooterPaddingVertical: token.paddingXS,
modalFooterPaddingHorizontal: token.padding, modalFooterPaddingHorizontal: token.padding,
modalFooterBorderWidth: token.controlLineWidth, modalFooterBorderWidth: token.lineWidth,
modalConfirmTitleFontSize: token.fontSizeLG, modalConfirmTitleFontSize: token.fontSizeLG,
modalIconHoverColor: token.colorIconHover, modalIconHoverColor: token.colorIconHover,
modalConfirmIconSize: token.fontSize * token.lineHeight, modalConfirmIconSize: token.fontSize * token.lineHeight,

14
components/notification/style/index.tsx
View File

@ -29,7 +29,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
boxShadowSecondary, boxShadowSecondary,
fontSizeLG, fontSizeLG,
notificationMarginBottom, notificationMarginBottom,
radiusLG, borderRadiusLG,
colorSuccess, colorSuccess,
colorInfo, colorInfo,
colorWarning, colorWarning,
@ -40,7 +40,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
notificationMarginEdge, notificationMarginEdge,
motionDurationMid, motionDurationMid,
motionEaseInOut, motionEaseInOut,
fontSizeBase, fontSize,
lineHeight, lineHeight,
width, width,
notificationIconSize, notificationIconSize,
@ -164,11 +164,11 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
lineHeight, lineHeight,
wordWrap: 'break-word', wordWrap: 'break-word',
background: notificationBg, background: notificationBg,
borderRadius: radiusLG, borderRadius: borderRadiusLG,
boxShadow: boxShadowSecondary, boxShadow: boxShadowSecondary,
[`${componentCls}-close-icon`]: { [`${componentCls}-close-icon`]: {
fontSize: fontSizeBase, fontSize,
cursor: 'pointer', cursor: 'pointer',
}, },
@ -180,7 +180,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
}, },
[`${noticeCls}-description`]: { [`${noticeCls}-description`]: {
fontSize: fontSizeBase, fontSize,
}, },
[`&${noticeCls}-closable ${noticeCls}-message`]: { [`&${noticeCls}-closable ${noticeCls}-message`]: {
@ -195,7 +195,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
[`${noticeCls}-with-icon ${noticeCls}-description`]: { [`${noticeCls}-with-icon ${noticeCls}-description`]: {
marginInlineStart: token.marginSM + notificationIconSize, marginInlineStart: token.marginSM + notificationIconSize,
fontSize: fontSizeBase, fontSize,
}, },
// Icon & color style in different selector level // Icon & color style in different selector level
@ -229,7 +229,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
outline: 'none', outline: 'none',
width: token.notificationCloseButtonSize, width: token.notificationCloseButtonSize,
height: token.notificationCloseButtonSize, height: token.notificationCloseButtonSize,
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',

16
components/pagination/style/index.tsx
View File

@ -218,8 +218,8 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
padding: `0 ${token.paginationItemPaddingInline}px`, padding: `0 ${token.paginationItemPaddingInline}px`,
textAlign: 'center', textAlign: 'center',
backgroundColor: token.paginationItemInputBg, backgroundColor: token.paginationItemInputBg,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: token.radiusBase, borderRadius: token.borderRadius,
outline: 'none', outline: 'none',
transition: `border-color ${token.motionDurationFast}`, transition: `border-color ${token.motionDurationFast}`,
@ -329,7 +329,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
textAlign: 'center', textAlign: 'center',
verticalAlign: 'middle', verticalAlign: 'middle',
listStyle: 'none', listStyle: 'none',
borderRadius: token.radiusBase, borderRadius: token.borderRadius,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationFast}`,
}, },
@ -352,8 +352,8 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
fontSize: token.fontSizeSM, fontSize: token.fontSizeSM,
textAlign: 'center', textAlign: 'center',
backgroundColor: 'transparent', backgroundColor: 'transparent',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`, border: `${token.lineWidth}px ${token.lineType} transparent`,
borderRadius: token.radiusBase, borderRadius: token.borderRadius,
outline: 'none', outline: 'none',
transition: `border ${token.motionDurationFast}`, transition: `border ${token.motionDurationFast}`,
}, },
@ -428,8 +428,8 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
verticalAlign: 'middle', verticalAlign: 'middle',
listStyle: 'none', listStyle: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`, border: `${token.lineWidth}px ${token.lineType} transparent`,
borderRadius: token.radiusBase, borderRadius: token.borderRadius,
outline: 0, outline: 0,
cursor: 'pointer', cursor: 'pointer',
userSelect: 'none', userSelect: 'none',
@ -626,7 +626,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
[`${componentCls}-item`]: { [`${componentCls}-item`]: {
backgroundColor: token.paginationItemBg, backgroundColor: token.paginationItemBg,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
[`&:hover:not(${componentCls}-item-active)`]: { [`&:hover:not(${componentCls}-item-active)`]: {
borderColor: token.colorPrimary, borderColor: token.colorPrimary,

2
components/popover/style/index.tsx
View File

@ -25,7 +25,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
popoverPadding, popoverPadding,
boxShadowSecondary, boxShadowSecondary,
colorTextHeading, colorTextHeading,
radiusLG: borderRadius, borderRadiusLG: borderRadius,
zIndexPopup, zIndexPopup,
marginXS, marginXS,
} = token; } = token;

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

@ -47,7 +47,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = token => {
'&-line': { '&-line': {
position: 'relative', position: 'relative',
width: '100%', width: '100%',
fontSize: token.fontSizeBase, fontSize: token.fontSize,
marginInlineEnd: token.marginXS, marginInlineEnd: token.marginXS,
marginBottom: token.marginXS, marginBottom: token.marginXS,
}, },
@ -105,7 +105,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = token => {
verticalAlign: 'middle', verticalAlign: 'middle',
wordBreak: 'normal', wordBreak: 'normal',
[iconPrefixCls]: { [iconPrefixCls]: {
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
}, },

77
components/radio/style/index.tsx
View File

@ -76,15 +76,16 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
motionEaseInOutCirc, motionEaseInOutCirc,
radioButtonBg, radioButtonBg,
colorBorder, colorBorder,
controlLineWidth, lineWidth,
radioDotSize, radioDotSize,
colorBgContainerDisabled, colorBgContainerDisabled,
colorTextDisabled, colorTextDisabled,
paddingXS, paddingXS,
radioDotDisabledColor, radioDotDisabledColor,
controlLineType, lineType,
radioDotDisabledSize, radioDotDisabledSize,
wireframe, wireframe,
colorWhite,
} = token; } = token;
const radioInnerPrefixCls = `${componentCls}-inner`; const radioInnerPrefixCls = `${componentCls}-inner`;
@ -121,7 +122,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
insetInlineStart: 0, insetInlineStart: 0,
width: '100%', width: '100%',
height: '100%', height: '100%',
border: `${controlLineWidth}px ${controlLineType} ${radioCheckedColor}`, border: `${lineWidth}px ${lineType} ${radioCheckedColor}`,
borderRadius: '50%', borderRadius: '50%',
visibility: 'hidden', visibility: 'hidden',
animationName: antRadioEffect, animationName: antRadioEffect,
@ -164,7 +165,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
height: radioSize, height: radioSize,
marginBlockStart: radioSize / -2, marginBlockStart: radioSize / -2,
marginInlineStart: radioSize / -2, marginInlineStart: radioSize / -2,
backgroundColor: wireframe ? radioCheckedColor : radioButtonBg, backgroundColor: wireframe ? radioCheckedColor : colorWhite,
borderBlockStart: 0, borderBlockStart: 0,
borderInlineStart: 0, borderInlineStart: 0,
borderRadius: radioSize, borderRadius: radioSize,
@ -184,7 +185,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
backgroundColor: radioButtonBg, backgroundColor: radioButtonBg,
borderColor: colorBorder, borderColor: colorBorder,
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: controlLineWidth, borderWidth: lineWidth,
borderRadius: '50%', borderRadius: '50%',
transition: `all ${motionDurationFast}`, transition: `all ${motionDurationFast}`,
}, },
@ -259,8 +260,8 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
radioButtonColor, radioButtonColor,
controlHeight, controlHeight,
componentCls, componentCls,
controlLineWidth, lineWidth,
controlLineType, lineType,
colorBorder, colorBorder,
motionDurationSlow, motionDurationSlow,
motionDurationFast, motionDurationFast,
@ -271,9 +272,9 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
controlHeightLG, controlHeightLG,
controlHeightSM, controlHeightSM,
paddingXS, paddingXS,
controlRadius, borderRadius,
controlRadiusSM, borderRadiusSM,
controlRadiusLG, borderRadiusLG,
radioCheckedColor, radioCheckedColor,
radioButtonCheckedBg, radioButtonCheckedBg,
radioButtonHoverColor, radioButtonHoverColor,
@ -294,14 +295,14 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
paddingBlock: 0, paddingBlock: 0,
color: radioButtonColor, color: radioButtonColor,
fontSize, fontSize,
lineHeight: `${controlHeight - controlLineWidth * 2}px`, lineHeight: `${controlHeight - lineWidth * 2}px`,
background: radioButtonBg, background: radioButtonBg,
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, border: `${lineWidth}px ${lineType} ${colorBorder}`,
// strange align fix for chrome but works // strange align fix for chrome but works
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
borderBlockStartWidth: controlLineWidth + 0.02, borderBlockStartWidth: lineWidth + 0.02,
borderInlineStartWidth: 0, borderInlineStartWidth: 0,
borderInlineEndWidth: controlLineWidth, borderInlineEndWidth: lineWidth,
cursor: 'pointer', cursor: 'pointer',
transition: [ transition: [
`color ${motionDurationFast}`, `color ${motionDurationFast}`,
@ -326,13 +327,13 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
'&:not(:first-child)': { '&:not(:first-child)': {
'&::before': { '&::before': {
position: 'absolute', position: 'absolute',
insetBlockStart: -controlLineWidth, insetBlockStart: -lineWidth,
insetInlineStart: -controlLineWidth, insetInlineStart: -lineWidth,
display: 'block', display: 'block',
boxSizing: 'content-box', boxSizing: 'content-box',
width: 1, width: 1,
height: '100%', height: '100%',
paddingBlock: controlLineWidth, paddingBlock: lineWidth,
paddingInline: 0, paddingInline: 0,
backgroundColor: colorBorder, backgroundColor: colorBorder,
transition: `background-color ${motionDurationSlow}`, transition: `background-color ${motionDurationSlow}`,
@ -341,50 +342,50 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
}, },
'&:first-child': { '&:first-child': {
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
borderStartStartRadius: controlRadius, borderStartStartRadius: borderRadius,
borderEndStartRadius: controlRadius, borderEndStartRadius: borderRadius,
}, },
'&:last-child': { '&:last-child': {
borderStartEndRadius: controlRadius, borderStartEndRadius: borderRadius,
borderEndEndRadius: controlRadius, borderEndEndRadius: borderRadius,
}, },
'&:first-child:last-child': { '&:first-child:last-child': {
borderRadius: controlRadius, borderRadius,
}, },
[`${componentCls}-group-large &`]: { [`${componentCls}-group-large &`]: {
height: controlHeightLG, height: controlHeightLG,
fontSize: fontSizeLG, fontSize: fontSizeLG,
lineHeight: `${controlHeightLG - controlLineWidth * 2}px`, lineHeight: `${controlHeightLG - lineWidth * 2}px`,
'&:first-child': { '&:first-child': {
borderStartStartRadius: controlRadiusLG, borderStartStartRadius: borderRadiusLG,
borderEndStartRadius: controlRadiusLG, borderEndStartRadius: borderRadiusLG,
}, },
'&:last-child': { '&:last-child': {
borderStartEndRadius: controlRadiusLG, borderStartEndRadius: borderRadiusLG,
borderEndEndRadius: controlRadiusLG, borderEndEndRadius: borderRadiusLG,
}, },
}, },
[`${componentCls}-group-small &`]: { [`${componentCls}-group-small &`]: {
height: controlHeightSM, height: controlHeightSM,
paddingInline: paddingXS - controlLineWidth, paddingInline: paddingXS - lineWidth,
paddingBlock: 0, paddingBlock: 0,
lineHeight: `${controlHeightSM - controlLineWidth * 2}px`, lineHeight: `${controlHeightSM - lineWidth * 2}px`,
'&:first-child': { '&:first-child': {
borderStartStartRadius: controlRadiusSM, borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: controlRadiusSM, borderEndStartRadius: borderRadiusSM,
}, },
'&:last-child': { '&:last-child': {
borderStartEndRadius: controlRadiusSM, borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: controlRadiusSM, borderEndEndRadius: borderRadiusSM,
}, },
}, },
@ -482,7 +483,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
export default genComponentStyleHook('Radio', token => { export default genComponentStyleHook('Radio', token => {
const { const {
padding, padding,
controlLineWidth, lineWidth,
colorBgContainerDisabled, colorBgContainerDisabled,
colorTextDisabled, colorTextDisabled,
colorBgContainer, colorBgContainer,
@ -507,16 +508,14 @@ export default genComponentStyleHook('Radio', token => {
const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2; const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2;
const dotPadding = 4; // Fixed value const dotPadding = 4; // Fixed value
const radioDotDisabledSize = radioSize - dotPadding * 2; const radioDotDisabledSize = radioSize - dotPadding * 2;
const radioDotSize = wireframe const radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (dotPadding + lineWidth) * 2;
? radioDotDisabledSize
: radioSize - (dotPadding + controlLineWidth) * 2;
const radioCheckedColor = colorPrimary; const radioCheckedColor = colorPrimary;
// Radio buttons // Radio buttons
const radioButtonColor = colorText; const radioButtonColor = colorText;
const radioButtonHoverColor = colorPrimaryHover; const radioButtonHoverColor = colorPrimaryHover;
const radioButtonActiveColor = colorPrimaryActive; const radioButtonActiveColor = colorPrimaryActive;
const radioButtonPaddingHorizontal = padding - controlLineWidth; const radioButtonPaddingHorizontal = padding - lineWidth;
const radioDisabledButtonCheckedColor = colorTextDisabled; const radioDisabledButtonCheckedColor = colorTextDisabled;
const radioWrapperMarginRight = marginXS; const radioWrapperMarginRight = marginXS;

22
components/segmented/style/index.tsx
View File

@ -51,7 +51,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
padding: token.segmentedContainerPadding, padding: token.segmentedContainerPadding,
color: token.labelColor, color: token.labelColor,
backgroundColor: token.bgColor, backgroundColor: token.bgColor,
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
[`${componentCls}-group`]: { [`${componentCls}-group`]: {
@ -83,7 +83,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
textAlign: 'center', textAlign: 'center',
cursor: 'pointer', cursor: 'pointer',
transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}`,
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
'&-selected': { '&-selected': {
...getSegmentedItemSelectedStyle(token), ...getSegmentedItemSelectedStyle(token),
@ -97,7 +97,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
height: '100%', height: '100%',
top: 0, top: 0,
insetInlineStart: 0, insetInlineStart: 0,
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationFast}`,
}, },
@ -134,7 +134,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
// size styles // size styles
'&&-lg': { '&&-lg': {
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
[`${componentCls}-item-label`]: { [`${componentCls}-item-label`]: {
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2, minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`, lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
@ -142,19 +142,19 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
}, },
[`${componentCls}-item-selected`]: { [`${componentCls}-item-selected`]: {
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
}, },
}, },
'&&-sm': { '&&-sm': {
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
[`${componentCls}-item-label`]: { [`${componentCls}-item-label`]: {
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2, minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`, lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontalSM}px`, padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
}, },
[`${componentCls}-item-selected`]: { [`${componentCls}-item-selected`]: {
borderRadius: token.controlRadiusXS, borderRadius: token.borderRadiusXS,
}, },
}, },
@ -172,7 +172,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
width: 0, width: 0,
height: '100%', height: '100%',
padding: `${token.paddingXXS}px 0`, padding: `${token.paddingXXS}px 0`,
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
[`& ~ ${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)::after`]: [`& ~ ${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)::after`]:
{ {
@ -193,7 +193,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
export default genComponentStyleHook('Segmented', token => { export default genComponentStyleHook('Segmented', token => {
const { const {
lineWidthBold, lineWidthBold,
controlLineWidth, lineWidth,
colorTextLabel, colorTextLabel,
colorText, colorText,
colorFillSecondary, colorFillSecondary,
@ -201,8 +201,8 @@ export default genComponentStyleHook('Segmented', token => {
} = token; } = token;
const segmentedToken = mergeToken<SegmentedToken>(token, { const segmentedToken = mergeToken<SegmentedToken>(token, {
segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth, segmentedPaddingHorizontal: token.controlPaddingHorizontal - lineWidth,
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth, segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - lineWidth,
segmentedContainerPadding: lineWidthBold, segmentedContainerPadding: lineWidthBold,
labelColor: colorTextLabel, labelColor: colorTextLabel,
labelColorHover: colorText, labelColorHover: colorText,

4
components/select/style/dropdown.tsx
View File

@ -52,7 +52,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
// https://github.com/ant-design/ant-design/issues/11843 // https://github.com/ant-design/ant-design/issues/11843
fontVariant: 'initial', fontVariant: 'initial',
backgroundColor: token.colorBgElevated, backgroundColor: token.colorBgElevated,
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
outline: 'none', outline: 'none',
boxShadow: token.boxShadowSecondary, boxShadow: token.boxShadowSecondary,
@ -96,7 +96,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
...genItemStyle(token), ...genItemStyle(token),
cursor: 'pointer', cursor: 'pointer',
transition: `background ${token.motionDurationSlow} ease`, transition: `background ${token.motionDurationSlow} ease`,
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
// =========== Group ============ // =========== Group ============
'&-group': { '&-group': {

2
components/select/style/index.tsx
View File

@ -23,7 +23,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
return { return {
position: 'relative', position: 'relative',
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
input: { input: {

20
components/select/style/multiple.tsx
View File

@ -8,7 +8,7 @@ const FIXED_ITEM_MARGIN = 2;
function getSelectItemStyle({ function getSelectItemStyle({
controlHeightSM, controlHeightSM,
controlHeight, controlHeight,
controlLineWidth: borderWidth, lineWidth: borderWidth,
}: SelectToken) { }: SelectToken) {
const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth; const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
const selectItemMargin = Math.ceil(selectItemDist / 2); const selectItemMargin = Math.ceil(selectItemDist / 2);
@ -56,7 +56,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
alignItems: 'center', alignItems: 'center',
// Multiple is little different that horizontal is follow the vertical // Multiple is little different that horizontal is follow the vertical
padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`, padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
[`${componentCls}-show-search&`]: { [`${componentCls}-show-search&`]: {
cursor: 'text', cursor: 'text',
@ -93,10 +93,10 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
height: selectItemHeight, height: selectItemHeight,
marginTop: FIXED_ITEM_MARGIN, marginTop: FIXED_ITEM_MARGIN,
marginBottom: FIXED_ITEM_MARGIN, marginBottom: FIXED_ITEM_MARGIN,
lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`, lineHeight: `${selectItemHeight - token.lineWidth * 2}px`,
background: token.colorFillSecondary, background: token.colorFillSecondary,
border: `${token.controlLineWidth}px solid ${token.colorSplit}`, border: `${token.lineWidth}px solid ${token.colorSplit}`,
borderRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
cursor: 'default', cursor: 'default',
transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`, transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
userSelect: 'none', userSelect: 'none',
@ -197,8 +197,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
const smallToken = mergeToken<SelectToken>(token, { const smallToken = mergeToken<SelectToken>(token, {
controlHeight: token.controlHeightSM, controlHeight: token.controlHeightSM,
controlHeightSM: token.controlHeightXS, controlHeightSM: token.controlHeightXS,
controlRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
controlRadiusSM: token.controlRadiusXS, borderRadiusSM: token.borderRadiusXS,
}); });
const [, smSelectItemMargin] = getSelectItemStyle(token); const [, smSelectItemMargin] = getSelectItemStyle(token);
@ -212,7 +212,7 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
{ {
[`${componentCls}-multiple${componentCls}-sm`]: { [`${componentCls}-multiple${componentCls}-sm`]: {
[`${componentCls}-selection-placeholder`]: { [`${componentCls}-selection-placeholder`]: {
insetInlineStart: token.controlPaddingHorizontalSM - token.controlLineWidth, insetInlineStart: token.controlPaddingHorizontalSM - token.lineWidth,
insetInlineEnd: 'auto', insetInlineEnd: 'auto',
}, },
@ -230,8 +230,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
controlHeight: token.controlHeightLG, controlHeight: token.controlHeightLG,
controlHeightSM: token.controlHeight, controlHeightSM: token.controlHeight,
controlRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
controlRadiusSM: token.controlRadius, borderRadiusSM: token.borderRadius,
}), }),
'lg', 'lg',
), ),

12
components/select/style/single.tsx
View File

@ -4,9 +4,9 @@ import type { SelectToken } from '.';
import { mergeToken } from '../../theme'; import { mergeToken } from '../../theme';
function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
const { componentCls, inputPaddingHorizontalBase, controlRadius } = token; const { componentCls, inputPaddingHorizontalBase, borderRadius } = token;
const selectHeightWithoutBorder = token.controlHeight - token.controlLineWidth * 2; const selectHeightWithoutBorder = token.controlHeight - token.lineWidth * 2;
const selectionItemPadding = Math.ceil(token.fontSize * 1.25); const selectionItemPadding = Math.ceil(token.fontSize * 1.25);
@ -21,7 +21,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
...resetComponent(token), ...resetComponent(token),
display: 'flex', display: 'flex',
borderRadius: controlRadius, borderRadius,
[`${componentCls}-selection-search`]: { [`${componentCls}-selection-search`]: {
position: 'absolute', position: 'absolute',
@ -135,7 +135,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
export default function genSingleStyle(token: SelectToken): CSSInterpolation { export default function genSingleStyle(token: SelectToken): CSSInterpolation {
const { componentCls } = token; const { componentCls } = token;
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.controlLineWidth; const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.lineWidth;
return [ return [
genSizeStyle(token), genSizeStyle(token),
@ -145,7 +145,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
genSizeStyle( genSizeStyle(
mergeToken<any>(token, { mergeToken<any>(token, {
controlHeight: token.controlHeightSM, controlHeight: token.controlHeightSM,
controlRadius: token.controlRadiusSM, borderRadius: token.borderRadiusSM,
}), }),
'sm', 'sm',
), ),
@ -185,7 +185,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
mergeToken<any>(token, { mergeToken<any>(token, {
controlHeight: token.controlHeightLG, controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
controlRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
}), }),
'lg', 'lg',
), ),

14
components/skeleton/style/index.tsx
View File

@ -171,14 +171,20 @@ const genSkeletonElementButtonSize = (size: number): CSSObject => ({
}); });
const genSkeletonElementButton = (token: SkeletonToken): CSSObject => { const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
const { radiusSM, skeletonButtonCls, controlHeight, controlHeightLG, controlHeightSM, color } = const {
token; borderRadiusSM,
skeletonButtonCls,
controlHeight,
controlHeightLG,
controlHeightSM,
color,
} = token;
return { return {
[`${skeletonButtonCls}`]: { [`${skeletonButtonCls}`]: {
display: 'inline-block', display: 'inline-block',
verticalAlign: 'top', verticalAlign: 'top',
background: color, background: color,
borderRadius: radiusSM, borderRadius: borderRadiusSM,
width: controlHeight * 2, width: controlHeight * 2,
minWidth: controlHeight * 2, minWidth: controlHeight * 2,
...genSkeletonElementButtonSize(controlHeight), ...genSkeletonElementButtonSize(controlHeight),
@ -353,7 +359,7 @@ export default genComponentStyleHook(
skeletonImageCls: `${componentCls}-image`, skeletonImageCls: `${componentCls}-image`,
imageSizeBase: token.controlHeight * 1.5, imageSizeBase: token.controlHeight * 1.5,
skeletonTitleHeight: token.controlHeight / 2, skeletonTitleHeight: token.controlHeight / 2,
skeletonBlockRadius: token.radiusSM, skeletonBlockRadius: token.borderRadiusSM,
skeletonParagraphLineHeight: token.controlHeight / 2, skeletonParagraphLineHeight: token.controlHeight / 2,
skeletonParagraphMarginTop: token.marginLG + token.marginXXS, skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
borderRadius: 100, // Large number to make capsule shape borderRadius: 100, // Large number to make capsule shape

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

@ -57,14 +57,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
[`${componentCls}-rail`]: { [`${componentCls}-rail`]: {
position: 'absolute', position: 'absolute',
backgroundColor: token.colorFillTertiary, backgroundColor: token.colorFillTertiary,
borderRadius: token.controlRadiusXS, borderRadius: token.borderRadiusXS,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationFast}`,
}, },
[`${componentCls}-track`]: { [`${componentCls}-track`]: {
position: 'absolute', position: 'absolute',
backgroundColor: token.colorPrimaryBorder, backgroundColor: token.colorPrimaryBorder,
borderRadius: token.controlRadiusXS, borderRadius: token.borderRadiusXS,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationFast}`,
}, },

8
components/steps/style/index.tsx
View File

@ -148,7 +148,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
lineHeight: `${token.stepsIconSize}px`, lineHeight: `${token.stepsIconSize}px`,
textAlign: 'center', textAlign: 'center',
borderRadius: token.stepsIconSize, borderRadius: token.stepsIconSize,
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`, border: `${token.lineWidth}px ${token.lineType} transparent`,
transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`, transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
[`${componentCls}-icon`]: { [`${componentCls}-icon`]: {
position: 'relative', position: 'relative',
@ -159,7 +159,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
}, },
[`${stepsItemCls}-tail`]: { [`${stepsItemCls}-tail`]: {
position: 'absolute', position: 'absolute',
top: token.stepsIconSize / 2 - token.lineWidth, top: token.stepsIconSize / 2 - token.paddingXXS,
insetInlineStart: 0, insetInlineStart: 0,
width: '100%', width: '100%',
@ -197,11 +197,11 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
marginInlineStart: token.marginXS, marginInlineStart: token.marginXS,
color: token.colorTextDescription, color: token.colorTextDescription,
fontWeight: 'normal', fontWeight: 'normal',
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
[`${stepsItemCls}-description`]: { [`${stepsItemCls}-description`]: {
color: token.colorTextDescription, color: token.colorTextDescription,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
...genStepsItemStatusStyle(StepItemStatusEnum.wait, token), ...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
...genStepsItemStatusStyle(StepItemStatusEnum.process, token), ...genStepsItemStatusStyle(StepItemStatusEnum.process, token),

2
components/steps/style/nav.ts
View File

@ -106,7 +106,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
[`&${componentCls}-navigation${componentCls}-vertical`]: { [`&${componentCls}-navigation${componentCls}-vertical`]: {
[`> ${componentCls}-item`]: { [`> ${componentCls}-item`]: {
marginInlineEnd: '0 !important', marginInlineEnd: 0,
'&::before': { '&::before': {
display: 'none', display: 'none',

9
components/steps/style/progress.ts
View File

@ -9,12 +9,13 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
[`&${componentCls}-with-progress`]: { [`&${componentCls}-with-progress`]: {
[`${componentCls}-item`]: { [`${componentCls}-item`]: {
paddingTop: token.paddingXXS, paddingTop: token.paddingXXS,
[`${componentCls}-item-tail`]: {
top: `${token.marginXXS}px !important`,
},
}, },
[`&${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
{
top: token.marginXXS,
},
[`&${componentCls}-horizontal`]: { [`&${componentCls}-horizontal`]: {
[`${componentCls}-item:first-child`]: { [`${componentCls}-item:first-child`]: {
paddingBottom: token.paddingXXS, paddingBottom: token.paddingXXS,

8
components/steps/style/small.ts
View File

@ -8,7 +8,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
stepsSmallIconSize, stepsSmallIconSize,
// stepsSmallIconMargin, // stepsSmallIconMargin,
fontSizeSM, fontSizeSM,
fontSizeBase, fontSize,
colorTextDescription, colorTextDescription,
} = token; } = token;
@ -35,7 +35,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
}, },
[`${componentCls}-item-title`]: { [`${componentCls}-item-title`]: {
paddingInlineEnd: token.paddingSM, paddingInlineEnd: token.paddingSM,
fontSize: fontSizeBase, fontSize,
lineHeight: `${stepsSmallIconSize}px`, lineHeight: `${stepsSmallIconSize}px`,
'&::after': { '&::after': {
@ -44,10 +44,10 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
}, },
[`${componentCls}-item-description`]: { [`${componentCls}-item-description`]: {
color: colorTextDescription, color: colorTextDescription,
fontSize: fontSizeBase, fontSize,
}, },
[`${componentCls}-item-tail`]: { [`${componentCls}-item-tail`]: {
top: stepsSmallIconSize / 2 - token.lineWidth, top: stepsSmallIconSize / 2 - token.paddingXXS,
}, },
[`${componentCls}-item-custom ${componentCls}-item-icon`]: { [`${componentCls}-item-custom ${componentCls}-item-icon`]: {
width: 'inherit', width: 'inherit',

2
components/style/compact-item-vertical.tsx
View File

@ -6,7 +6,7 @@ function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
return { return {
// border collapse // border collapse
'&-item:not(&-last-item)': { '&-item:not(&-last-item)': {
marginBottom: -token.controlLineWidth, marginBottom: -token.lineWidth,
}, },
'&-item': { '&-item': {

2
components/style/compact-item.tsx
View File

@ -11,7 +11,7 @@ function compactItemBorder(
const childCombinator = borderedItemCls ? '> *' : ''; const childCombinator = borderedItemCls ? '> *' : '';
return { return {
'&-item:not(&-last-item)': { '&-item:not(&-last-item)': {
marginInlineEnd: -token.controlLineWidth, marginInlineEnd: -token.lineWidth,
}, },
'&-item': { '&-item': {

33
components/style/placementArrow.tsx
View File

@ -12,12 +12,12 @@ export const MAX_VERTICAL_CONTENT_RADIUS = 8;
export function getArrowOffset(options: { export function getArrowOffset(options: {
sizePopupArrow: number; sizePopupArrow: number;
contentRadius: number; contentRadius: number;
radiusOuter: number; borderRadiusOuter: number;
limitVerticalRadius?: boolean; limitVerticalRadius?: boolean;
}) { }) {
const maxVerticalContentRadius = MAX_VERTICAL_CONTENT_RADIUS; const maxVerticalContentRadius = MAX_VERTICAL_CONTENT_RADIUS;
const { sizePopupArrow, contentRadius, radiusOuter, limitVerticalRadius } = options; const { sizePopupArrow, contentRadius, borderRadiusOuter, limitVerticalRadius } = options;
const arrowInnerOffset = sizePopupArrow / 2 - Math.ceil(radiusOuter * (Math.sqrt(2) - 1)); const arrowInnerOffset = sizePopupArrow / 2 - Math.ceil(borderRadiusOuter * (Math.sqrt(2) - 1));
const dropdownArrowOffset = (contentRadius > 12 ? contentRadius + 2 : 12) - arrowInnerOffset; const dropdownArrowOffset = (contentRadius > 12 ? contentRadius + 2 : 12) - arrowInnerOffset;
const dropdownArrowOffsetVertical = limitVerticalRadius const dropdownArrowOffsetVertical = limitVerticalRadius
? maxVerticalContentRadius - arrowInnerOffset ? maxVerticalContentRadius - arrowInnerOffset
@ -34,15 +34,26 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
limitVerticalRadius?: boolean; limitVerticalRadius?: boolean;
}, },
): CSSInterpolation { ): CSSInterpolation {
const { componentCls, sizePopupArrow, marginXXS, radiusXS, radiusOuter, boxShadowPopoverArrow } = const {
token; componentCls,
sizePopupArrow,
marginXXS,
borderRadiusXS,
borderRadiusOuter,
boxShadowPopoverArrow,
} = token;
const { colorBg, showArrowCls, contentRadius = token.radiusLG, limitVerticalRadius } = options; const {
colorBg,
showArrowCls,
contentRadius = token.borderRadiusLG,
limitVerticalRadius,
} = options;
const { dropdownArrowOffsetVertical, dropdownArrowOffset } = getArrowOffset({ const { dropdownArrowOffsetVertical, dropdownArrowOffset } = getArrowOffset({
sizePopupArrow, sizePopupArrow,
contentRadius, contentRadius,
radiusOuter, borderRadiusOuter,
limitVerticalRadius, limitVerticalRadius,
}); });
const dropdownArrowDistance = sizePopupArrow + marginXXS; const dropdownArrowDistance = sizePopupArrow + marginXXS;
@ -56,7 +67,13 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
zIndex: 1, // lift it up so the menu wouldn't cask shadow on it zIndex: 1, // lift it up so the menu wouldn't cask shadow on it
display: 'block', display: 'block',
...roundedArrow(sizePopupArrow, radiusXS, radiusOuter, colorBg, boxShadowPopoverArrow), ...roundedArrow(
sizePopupArrow,
borderRadiusXS,
borderRadiusOuter,
colorBg,
boxShadowPopoverArrow,
),
'&:before': { '&:before': {
background: colorBg, background: colorBg,

2
components/switch/style/index.tsx
View File

@ -145,7 +145,7 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
insetInlineEnd: 0, insetInlineEnd: 0,
bottom: 0, bottom: 0,
insetInlineStart: 0, insetInlineStart: 0,
backgroundColor: token.switchBg, backgroundColor: token.colorWhite,
borderRadius: token.switchPinSize / 2, borderRadius: token.switchPinSize / 2,
boxShadow: token.switchHandleShadow, boxShadow: token.switchHandleShadow,
transition: `all ${token.switchDuration} ease-in-out`, transition: `all ${token.switchDuration} ease-in-out`,

10
components/table/style/bordered.tsx
View File

@ -4,7 +4,7 @@ import type { TableToken } from './index';
const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => { const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => {
const { componentCls } = token; const { componentCls } = token;
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`; const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
const getSizeBorderStyle = ( const getSizeBorderStyle = (
size: 'small' | 'middle', size: 'small' | 'middle',
@ -16,7 +16,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => {
[`> ${componentCls}-content, > ${componentCls}-body`]: { [`> ${componentCls}-content, > ${componentCls}-body`]: {
'> table > tbody > tr > td': { '> table > tbody > tr > td': {
[`> ${componentCls}-expanded-row-fixed`]: { [`> ${componentCls}-expanded-row-fixed`]: {
margin: `-${paddingVertical}px -${paddingHorizontal + token.controlLineWidth}px`, margin: `-${paddingVertical}px -${paddingHorizontal + token.lineWidth}px`,
}, },
}, },
}, },
@ -80,13 +80,13 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => {
'> table > tbody > tr > td': { '> table > tbody > tr > td': {
[`> ${componentCls}-expanded-row-fixed`]: { [`> ${componentCls}-expanded-row-fixed`]: {
margin: `-${token.tablePaddingVertical}px -${ margin: `-${token.tablePaddingVertical}px -${
token.tablePaddingHorizontal + token.controlLineWidth token.tablePaddingHorizontal + token.lineWidth
}px`, }px`,
'&::after': { '&::after': {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
insetInlineEnd: token.controlLineWidth, insetInlineEnd: token.lineWidth,
bottom: 0, bottom: 0,
borderInlineEnd: tableBorder, borderInlineEnd: tableBorder,
content: '""', content: '""',
@ -149,7 +149,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => {
}, },
// https://github.com/ant-design/ant-design/issues/35577 // https://github.com/ant-design/ant-design/issues/35577
'&-scrollbar:not([rowspan])': { '&-scrollbar:not([rowspan])': {
boxShadow: `0 ${token.controlLineWidth}px 0 ${token.controlLineWidth}px ${token.tableHeaderBg}`, boxShadow: `0 ${token.lineWidth}px 0 ${token.lineWidth}px ${token.tableHeaderBg}`,
}, },
}, },
}, },

21
components/table/style/expand.tsx
View File

@ -9,27 +9,26 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
antCls, antCls,
controlInteractiveSize: checkboxSize, controlInteractiveSize: checkboxSize,
motionDurationSlow, motionDurationSlow,
controlLineWidth, lineWidth,
paddingXS, paddingXS,
controlLineType, lineType,
tableBorderColor, tableBorderColor,
tableExpandIconBg, tableExpandIconBg,
tableExpandColumnWidth, tableExpandColumnWidth,
radiusBase, borderRadius,
fontSize, fontSize,
fontSizeSM, fontSizeSM,
lineHeight, lineHeight,
lineWidth,
tablePaddingVertical, tablePaddingVertical,
tablePaddingHorizontal, tablePaddingHorizontal,
tableExpandedRowBg, tableExpandedRowBg,
paddingXXS, paddingXXS,
} = token; } = token;
const halfInnerSize = checkboxSize / 2 - controlLineWidth; const halfInnerSize = checkboxSize / 2 - lineWidth;
// must be odd number, unless it cannot align center // must be odd number, unless it cannot align center
const expandIconSize = halfInnerSize * 2 + controlLineWidth * 3; const expandIconSize = halfInnerSize * 2 + lineWidth * 3;
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`; const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
const expandIconLineOffset = paddingXXS - controlLineWidth; const expandIconLineOffset = paddingXXS - lineWidth;
return { return {
[`${componentCls}-wrapper`]: { [`${componentCls}-wrapper`]: {
@ -63,7 +62,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
lineHeight: `${expandIconSize}px`, lineHeight: `${expandIconSize}px`,
background: tableExpandIconBg, background: tableExpandIconBg,
border: tableBorder, border: tableBorder,
borderRadius: radiusBase, borderRadius,
transform: `scale(${checkboxSize / expandIconSize})`, transform: `scale(${checkboxSize / expandIconSize})`,
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
userSelect: 'none', userSelect: 'none',
@ -83,14 +82,14 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
top: halfInnerSize, top: halfInnerSize,
insetInlineEnd: expandIconLineOffset, insetInlineEnd: expandIconLineOffset,
insetInlineStart: expandIconLineOffset, insetInlineStart: expandIconLineOffset,
height: controlLineWidth, height: lineWidth,
}, },
'&::after': { '&::after': {
top: expandIconLineOffset, top: expandIconLineOffset,
bottom: expandIconLineOffset, bottom: expandIconLineOffset,
insetInlineStart: halfInnerSize, insetInlineStart: halfInnerSize,
width: controlLineWidth, width: lineWidth,
transform: 'rotate(90deg)', transform: 'rotate(90deg)',
}, },

13
components/table/style/filter.tsx
View File

@ -11,15 +11,14 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
tableFilterDropdownSearchWidth, tableFilterDropdownSearchWidth,
paddingXXS, paddingXXS,
paddingXS, paddingXS,
lineWidth,
colorText, colorText,
controlLineWidth, lineWidth,
controlLineType, lineType,
tableBorderColor, tableBorderColor,
tableHeaderIconColor, tableHeaderIconColor,
fontSizeSM, fontSizeSM,
tablePaddingHorizontal, tablePaddingHorizontal,
radiusBase, borderRadius,
motionDurationSlow, motionDurationSlow,
colorTextDescription, colorTextDescription,
colorPrimary, colorPrimary,
@ -34,7 +33,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
const dropdownPrefixCls = `${antCls}-dropdown`; const dropdownPrefixCls = `${antCls}-dropdown`;
const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`; const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`;
const treePrefixCls = `${antCls}-tree`; const treePrefixCls = `${antCls}-tree`;
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`; const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
return [ return [
{ {
@ -53,7 +52,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
padding: `0 ${paddingXXS}px`, padding: `0 ${paddingXXS}px`,
color: tableHeaderIconColor, color: tableHeaderIconColor,
fontSize: fontSizeSM, fontSize: fontSizeSM,
borderRadius: radiusBase, borderRadius,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
@ -76,7 +75,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
minWidth: tableFilterDropdownWidth, minWidth: tableFilterDropdownWidth,
backgroundColor: tableFilterDropdownBg, backgroundColor: tableFilterDropdownBg,
borderRadius: radiusBase, borderRadius,
boxShadow, boxShadow,
// Reset menu // Reset menu

10
components/table/style/index.tsx
View File

@ -75,8 +75,8 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
fontWeightStrong, fontWeightStrong,
tablePaddingVertical, tablePaddingVertical,
tablePaddingHorizontal, tablePaddingHorizontal,
controlLineWidth, lineWidth,
controlLineType, lineType,
tableBorderColor, tableBorderColor,
tableFontSize, tableFontSize,
tableBg, tableBg,
@ -93,7 +93,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
paddingContentVerticalLG, paddingContentVerticalLG,
wireframe, wireframe,
} = token; } = token;
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`; const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
return { return {
[`${componentCls}-wrapper`]: { [`${componentCls}-wrapper`]: {
clear: 'both', clear: 'both',
@ -283,7 +283,7 @@ export default genComponentStyleHook('Table', token => {
opacityLoading, opacityLoading,
colorBgContainer, colorBgContainer,
colorFillSecondary, colorFillSecondary,
radiusLG, borderRadiusLG,
colorFillContent, colorFillContent,
controlInteractiveSize: checkboxSize, controlInteractiveSize: checkboxSize,
} = token; } = token;
@ -301,7 +301,7 @@ export default genComponentStyleHook('Table', token => {
const tableToken = mergeToken<TableToken>(token, { const tableToken = mergeToken<TableToken>(token, {
tableFontSize: fontSize, tableFontSize: fontSize,
tableBg: colorBgContainer, tableBg: colorBgContainer,
tableRadius: radiusLG, tableRadius: borderRadiusLG,
tablePaddingVertical: padding, tablePaddingVertical: padding,
tablePaddingHorizontal: padding, tablePaddingHorizontal: padding,

2
components/table/style/sticky.tsx
View File

@ -12,7 +12,7 @@ const genStickyStyle: GenerateStyle<TableToken, CSSObject> = token => {
tableScrollBg, tableScrollBg,
zIndexTableSticky, zIndexTableSticky,
} = token; } = token;
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`; const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
return { return {
[`${componentCls}-wrapper`]: { [`${componentCls}-wrapper`]: {
[`${componentCls}-sticky`]: { [`${componentCls}-sticky`]: {

6
components/table/style/summary.tsx
View File

@ -3,8 +3,8 @@ import type { GenerateStyle } from '../../theme';
import type { TableToken } from './index'; import type { TableToken } from './index';
const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = token => { const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = token => {
const { componentCls, controlLineWidth, tableBorderColor } = token; const { componentCls, lineWidth, tableBorderColor } = token;
const tableBorder = `${controlLineWidth}px ${token.controlLineType} ${tableBorderColor}`; const tableBorder = `${lineWidth}px ${token.lineType} ${tableBorderColor}`;
return { return {
[`${componentCls}-wrapper`]: { [`${componentCls}-wrapper`]: {
[`${componentCls}-summary`]: { [`${componentCls}-summary`]: {
@ -20,7 +20,7 @@ const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = token => {
}, },
[`div${componentCls}-summary`]: { [`div${componentCls}-summary`]: {
boxShadow: `0 -${controlLineWidth}px 0 ${tableBorderColor}`, boxShadow: `0 -${lineWidth}px 0 ${tableBorderColor}`,
}, },
}, },
}; };

41
components/tabs/style/index.tsx
View File

@ -38,7 +38,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
margin: 0, margin: 0,
padding: tabsCardHorizontalPadding, padding: tabsCardHorizontalPadding,
background: tabsCardHeadBackground, background: tabsCardHeadBackground,
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorSplit}`, border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
}, },
@ -67,7 +67,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`&${componentCls}-top`]: { [`&${componentCls}-top`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: { [`${componentCls}-tab`]: {
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
}, },
[`${componentCls}-tab-active`]: { [`${componentCls}-tab-active`]: {
@ -79,7 +79,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`&${componentCls}-bottom`]: { [`&${componentCls}-bottom`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: { [`${componentCls}-tab`]: {
borderRadius: `0 0 ${token.radiusLG}px ${token.radiusLG}px`, borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
}, },
[`${componentCls}-tab-active`]: { [`${componentCls}-tab-active`]: {
@ -102,7 +102,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`${componentCls}-tab`]: { [`${componentCls}-tab`]: {
borderRadius: { borderRadius: {
_skip_check_: true, _skip_check_: true,
value: `${token.radiusLG}px 0 0 ${token.radiusLG}px`, value: `${token.borderRadiusLG}px 0 0 ${token.borderRadiusLG}px`,
}, },
}, },
@ -120,7 +120,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`${componentCls}-tab`]: { [`${componentCls}-tab`]: {
borderRadius: { borderRadius: {
_skip_check_: true, _skip_check_: true,
value: `0 ${token.radiusLG}px ${token.radiusLG}px 0`, value: `0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0`,
}, },
}, },
@ -168,7 +168,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
listStyleType: 'none', listStyleType: 'none',
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
backgroundClip: 'padding-box', backgroundClip: 'padding-box',
borderRadius: token.radiusLG, borderRadius: token.borderRadiusLG,
outline: 'none', outline: 'none',
boxShadow: token.boxShadow, boxShadow: token.boxShadow,
@ -245,7 +245,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
_skip_check_: true, _skip_check_: true,
value: 0, value: 0,
}, },
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${colorSplit}`, borderBottom: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
content: "''", content: "''",
}, },
@ -404,11 +404,11 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: { [`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
marginLeft: { marginLeft: {
_skip_check_: true, _skip_check_: true,
value: `-${token.controlLineWidth}px`, value: `-${token.lineWidth}px`,
}, },
borderLeft: { borderLeft: {
_skip_check_: true, _skip_check_: true,
value: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, value: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
}, },
[`> ${componentCls}-content > ${componentCls}-tabpane`]: { [`> ${componentCls}-content > ${componentCls}-tabpane`]: {
@ -436,11 +436,11 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
order: 0, order: 0,
marginRight: { marginRight: {
_skip_check_: true, _skip_check_: true,
value: -token.controlLineWidth, value: -token.lineWidth,
}, },
borderRight: { borderRight: {
_skip_check_: true, _skip_check_: true,
value: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, value: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
}, },
[`> ${componentCls}-content > ${componentCls}-tabpane`]: { [`> ${componentCls}-content > ${componentCls}-tabpane`]: {
@ -462,7 +462,7 @@ const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`> ${componentCls}-nav`]: { [`> ${componentCls}-nav`]: {
[`${componentCls}-tab`]: { [`${componentCls}-tab`]: {
padding: `${token.paddingXS}px 0`, padding: `${token.paddingXS}px 0`,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
}, },
}, },
@ -486,19 +486,19 @@ const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
}, },
[`&${componentCls}-bottom`]: { [`&${componentCls}-bottom`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`, borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
}, },
}, },
[`&${componentCls}-top`]: { [`&${componentCls}-top`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`, borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`,
}, },
}, },
[`&${componentCls}-right`]: { [`&${componentCls}-right`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: { borderRadius: {
_skip_check_: true, _skip_check_: true,
value: `0 ${token.radiusBase}px ${token.radiusBase}px 0`, value: `0 ${token.borderRadius}px ${token.borderRadius}px 0`,
}, },
}, },
}, },
@ -506,7 +506,7 @@ const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`> ${componentCls}-nav ${componentCls}-tab`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: { borderRadius: {
_skip_check_: true, _skip_check_: true,
value: `${token.radiusBase}px 0 0 ${token.radiusBase}px`, value: `${token.borderRadius}px 0 0 ${token.borderRadius}px`,
}, },
}, },
}, },
@ -534,7 +534,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
padding: `${token.paddingSM}px 0`, padding: `${token.paddingSM}px 0`,
fontSize: `${token.fontSizeBase}px`, fontSize: `${token.fontSize}px`,
background: 'transparent', background: 'transparent',
border: 0, border: 0,
outline: 'none', outline: 'none',
@ -798,8 +798,8 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
}, },
padding: `0 ${token.paddingXS}px`, padding: `0 ${token.paddingXS}px`,
background: 'transparent', background: 'transparent',
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorSplit}`, border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
outline: 'none', outline: 'none',
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
@ -873,8 +873,7 @@ export default genComponentStyleHook(
tabsActiveColor: token.colorPrimaryActive, tabsActiveColor: token.colorPrimaryActive,
tabsCardHorizontalPadding: `${ tabsCardHorizontalPadding: `${
(tabsCardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 - (tabsCardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 - token.lineWidth
token.controlLineWidth
}px ${token.padding}px`, }px ${token.padding}px`,
tabsCardHeight, tabsCardHeight,
tabsCardGutter: token.marginXXS / 2, tabsCardGutter: token.marginXXS / 2,

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

@ -58,9 +58,9 @@ const genTagColorStyle = (token: TagToken): CSSInterpolation =>
}, {} as CSSObject); }, {} as CSSObject);
const genBaseStyle = (token: TagToken): CSSInterpolation => { const genBaseStyle = (token: TagToken): CSSInterpolation => {
const { paddingXXS, controlLineWidth, tagPaddingHorizontal } = token; const { paddingXXS, lineWidth, tagPaddingHorizontal } = token;
const paddingInline = tagPaddingHorizontal - controlLineWidth; const paddingInline = tagPaddingHorizontal - lineWidth;
const iconMarginInline = paddingXXS - controlLineWidth; const iconMarginInline = paddingXXS - lineWidth;
return { return {
// Result // Result
@ -74,8 +74,8 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
lineHeight: `${token.tagLineHeight}px`, lineHeight: `${token.tagLineHeight}px`,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
background: token.tagDefaultBg, background: token.tagDefaultBg,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: token.radiusSM, borderRadius: token.borderRadiusSM,
opacity: 1, opacity: 1,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationFast}`,
textAlign: 'start', textAlign: 'start',
@ -149,11 +149,11 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Tag', token => { export default genComponentStyleHook('Tag', token => {
const { fontSize, lineHeight, controlLineWidth, fontSizeIcon } = token; const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token;
const tagHeight = Math.round(fontSize * lineHeight); const tagHeight = Math.round(fontSize * lineHeight);
const tagFontSize = token.fontSizeSM; const tagFontSize = token.fontSizeSM;
const tagLineHeight = tagHeight - controlLineWidth * 2; const tagLineHeight = tagHeight - lineWidth * 2;
const tagDefaultBg = token.colorFillAlter; const tagDefaultBg = token.colorFillAlter;
const tagDefaultColor = token.colorText; const tagDefaultColor = token.colorText;
@ -162,7 +162,7 @@ export default genComponentStyleHook('Tag', token => {
tagLineHeight, tagLineHeight,
tagDefaultBg, tagDefaultBg,
tagDefaultColor, tagDefaultColor,
tagIconSize: fontSizeIcon - 2 * controlLineWidth, // Tag icon is much more smaller tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
tagPaddingHorizontal: 8, // Fixed padding. tagPaddingHorizontal: 8, // Fixed padding.
}); });

96
components/theme/__tests__/token.test.tsx
View File

@ -50,18 +50,90 @@ describe('Theme', () => {
describe('radius should be computed as expected', () => { describe('radius should be computed as expected', () => {
const radiusGroup = { const radiusGroup = {
0: { radiusBase: 0, radiusLG: 0, radiusSM: 0, radiusXS: 0, radiusOuter: 0 }, 0: {
2: { radiusBase: 2, radiusLG: 2, radiusSM: 2, radiusXS: 1, radiusOuter: 2 }, borderRadius: 0,
4: { radiusBase: 4, radiusLG: 4, radiusSM: 4, radiusXS: 1, radiusOuter: 4 }, borderRadiusLG: 0,
5: { radiusBase: 5, radiusLG: 6, radiusSM: 4, radiusXS: 1, radiusOuter: 4 }, borderRadiusSM: 0,
6: { radiusBase: 6, radiusLG: 8, radiusSM: 4, radiusXS: 2, radiusOuter: 4 }, borderRadiusXS: 0,
7: { radiusBase: 7, radiusLG: 9, radiusSM: 5, radiusXS: 2, radiusOuter: 4 }, borderRadiusOuter: 0,
8: { radiusBase: 8, radiusLG: 10, radiusSM: 6, radiusXS: 2, radiusOuter: 6 }, },
10: { radiusBase: 10, radiusLG: 12, radiusSM: 6, radiusXS: 2, radiusOuter: 6 }, 2: {
12: { radiusBase: 12, radiusLG: 14, radiusSM: 6, radiusXS: 2, radiusOuter: 6 }, borderRadius: 2,
14: { radiusBase: 14, radiusLG: 16, radiusSM: 7, radiusXS: 2, radiusOuter: 6 }, borderRadiusLG: 2,
16: { radiusBase: 16, radiusLG: 16, radiusSM: 8, radiusXS: 2, radiusOuter: 6 }, borderRadiusSM: 2,
20: { radiusBase: 16, radiusLG: 16, radiusSM: 8, radiusXS: 2, radiusOuter: 6 }, borderRadiusXS: 1,
borderRadiusOuter: 2,
},
4: {
borderRadius: 4,
borderRadiusLG: 4,
borderRadiusSM: 4,
borderRadiusXS: 1,
borderRadiusOuter: 4,
},
5: {
borderRadius: 5,
borderRadiusLG: 6,
borderRadiusSM: 4,
borderRadiusXS: 1,
borderRadiusOuter: 4,
},
6: {
borderRadius: 6,
borderRadiusLG: 8,
borderRadiusSM: 4,
borderRadiusXS: 2,
borderRadiusOuter: 4,
},
7: {
borderRadius: 7,
borderRadiusLG: 9,
borderRadiusSM: 5,
borderRadiusXS: 2,
borderRadiusOuter: 4,
},
8: {
borderRadius: 8,
borderRadiusLG: 10,
borderRadiusSM: 6,
borderRadiusXS: 2,
borderRadiusOuter: 6,
},
10: {
borderRadius: 10,
borderRadiusLG: 12,
borderRadiusSM: 6,
borderRadiusXS: 2,
borderRadiusOuter: 6,
},
12: {
borderRadius: 12,
borderRadiusLG: 14,
borderRadiusSM: 6,
borderRadiusXS: 2,
borderRadiusOuter: 6,
},
14: {
borderRadius: 14,
borderRadiusLG: 16,
borderRadiusSM: 7,
borderRadiusXS: 2,
borderRadiusOuter: 6,
},
16: {
borderRadius: 16,
borderRadiusLG: 16,
borderRadiusSM: 8,
borderRadiusXS: 2,
borderRadiusOuter: 6,
},
20: {
borderRadius: 16,
borderRadiusLG: 16,
borderRadiusSM: 8,
borderRadiusXS: 2,
borderRadiusOuter: 6,
},
}; };
Object.entries(radiusGroup).forEach(([base, result]) => { Object.entries(radiusGroup).forEach(([base, result]) => {

5
components/theme/export.ts
View File

@ -1,9 +1,8 @@
/* eslint-disable import/prefer-default-export */ /* eslint-disable import/prefer-default-export */
import { useToken as useInternalToken, defaultConfig } from '.'; import { defaultConfig, useToken as useInternalToken } from '.';
import defaultAlgorithm from './themes/default'; import defaultAlgorithm from './themes/default';
import darkAlgorithm from './themes/dark'; import darkAlgorithm from './themes/dark';
import compactAlgorithm from './themes/compact'; import compactAlgorithm from './themes/compact';
import { defaultAlgorithmV4, darkAlgorithmV4 } from './themes/v4';
// ZombieJ: We export as object to user but array in internal. // ZombieJ: We export as object to user but array in internal.
// This is used to minimize the bundle size for antd package but safe to refactor as object also. // This is used to minimize the bundle size for antd package but safe to refactor as object also.
@ -22,7 +21,5 @@ export default {
useToken, useToken,
defaultAlgorithm, defaultAlgorithm,
darkAlgorithm, darkAlgorithm,
defaultAlgorithmV4,
darkAlgorithmV4,
compactAlgorithm, compactAlgorithm,
}; };

40
components/theme/interface.ts
View File

@ -154,13 +154,12 @@ export interface SeedToken extends PresetColorType {
colorError: string; colorError: string;
colorInfo: string; colorInfo: string;
colorTextBase: string; colorTextBase: string;
colorTextLightSolid: string;
/** Base component background color. Will derivative container background color with this */ /** Base component background color. Will derivative container background color with this */
colorBgBase: string; colorBgBase: string;
// Font // Font
fontFamily: string; fontFamily: string;
fontSizeBase: number; fontSize: number;
// Line // Line
/** Border width of base components */ /** Border width of base components */
@ -179,11 +178,11 @@ export interface SeedToken extends PresetColorType {
motionEaseOut: string; motionEaseOut: string;
// Radius // Radius
radiusBase: number; borderRadius: number;
// Size // Size
sizeUnit: number; sizeUnit: number;
sizeBaseStep: number; sizeStep: number;
sizePopupArrow: number; sizePopupArrow: number;
// Control Base // Control Base
@ -293,6 +292,7 @@ export interface ColorMapToken extends NeutralColorMapToken {
colorInfoTextActive: string; // 10 colorInfoTextActive: string; // 10
colorBgMask: string; colorBgMask: string;
colorWhite: string;
} }
export interface SizeMapToken { export interface SizeMapToken {
@ -301,7 +301,7 @@ export interface SizeMapToken {
sizeXL: number; sizeXL: number;
sizeLG: number; sizeLG: number;
sizeMD: number; sizeMD: number;
/** Same as size by default, but can be larger in compact mode */ /** Same as size by default, but could be larger in compact mode */
sizeMS: number; sizeMS: number;
size: number; size: number;
sizeSM: number; sizeSM: number;
@ -309,6 +309,14 @@ export interface SizeMapToken {
sizeXXS: number; sizeXXS: number;
} }
export interface HeightMapToken {
// Control
/** @private Only Used for control inside component like Multiple Select inner selection item */
controlHeightXS: number;
controlHeightSM: number;
controlHeightLG: number;
}
export interface CommonMapToken { export interface CommonMapToken {
// Font // Font
fontSizes: number[]; fontSizes: number[];
@ -323,16 +331,10 @@ export interface CommonMapToken {
motionDurationSlow: string; motionDurationSlow: string;
// Radius // Radius
radiusXS: number; borderRadiusXS: number;
radiusSM: number; borderRadiusSM: number;
radiusLG: number; borderRadiusLG: number;
radiusOuter: number; borderRadiusOuter: number;
// Control
/** @private Only Used for control inside component like Multiple Select inner selection item */
controlHeightXS: number;
controlHeightSM: number;
controlHeightLG: number;
} }
// ====================================================================== // ======================================================================
@ -344,6 +346,7 @@ export interface MapToken
ColorPalettes, ColorPalettes,
ColorMapToken, ColorMapToken,
SizeMapToken, SizeMapToken,
HeightMapToken,
CommonMapToken {} CommonMapToken {}
// ====================================================================== // ======================================================================
@ -367,6 +370,7 @@ export interface AliasToken extends MapToken {
colorTextHeading: string; colorTextHeading: string;
colorTextLabel: string; colorTextLabel: string;
colorTextDescription: string; colorTextDescription: string;
colorTextLightSolid: string;
colorBgTextHover: string; colorBgTextHover: string;
colorBgTextActive: string; colorBgTextActive: string;
@ -414,12 +418,6 @@ export interface AliasToken extends MapToken {
lineHeightHeading5: number; lineHeightHeading5: number;
// Control // Control
controlLineWidth: number;
controlLineType: string;
controlRadius: number;
controlRadiusXS: number;
controlRadiusSM: number;
controlRadiusLG: number;
controlOutlineWidth: number; controlOutlineWidth: number;
controlItemBgHover: string; // Note. It also is a color controlItemBgHover: string; // Note. It also is a color
controlItemBgActive: string; // Note. It also is a color controlItemBgActive: string; // Note. It also is a color

2
components/theme/themes/ColorMap.ts
View File

@ -1,4 +1,4 @@
import type { NeutralColorMapToken } from 'antd/es/theme/interface'; import type { NeutralColorMapToken } from '../interface';
export interface ColorMap { export interface ColorMap {
1: string; 1: string;

22
components/theme/themes/compact/genCompactSizeMapToken.ts
View File

@ -1,17 +1,19 @@
import type { SeedToken, SizeMapToken } from '../../interface'; import type { SeedToken, SizeMapToken } from '../../interface';
export default function genSizeMapToken(token: SeedToken): SizeMapToken { export default function genSizeMapToken(token: SeedToken): SizeMapToken {
const { sizeUnit, sizeBaseStep } = token; const { sizeUnit, sizeStep } = token;
const compactSizeStep = sizeStep - 2;
return { return {
sizeXXL: sizeUnit * (sizeBaseStep + 10), sizeXXL: sizeUnit * (compactSizeStep + 10),
sizeXL: sizeUnit * (sizeBaseStep + 6), sizeXL: sizeUnit * (compactSizeStep + 6),
sizeLG: sizeUnit * (sizeBaseStep + 2), sizeLG: sizeUnit * (compactSizeStep + 2),
sizeMD: sizeUnit * (sizeBaseStep + 2), sizeMD: sizeUnit * (compactSizeStep + 2),
sizeMS: sizeUnit * (sizeBaseStep + 1), sizeMS: sizeUnit * (compactSizeStep + 1),
size: sizeUnit * sizeBaseStep, size: sizeUnit * compactSizeStep,
sizeSM: sizeUnit * sizeBaseStep, sizeSM: sizeUnit * compactSizeStep,
sizeXS: sizeUnit * (sizeBaseStep - 1), sizeXS: sizeUnit * (compactSizeStep - 1),
sizeXXS: sizeUnit * (sizeBaseStep - 1), sizeXXS: sizeUnit * (compactSizeStep - 1),
}; };
} }

16
components/theme/themes/compact/index.ts
View File

@ -1,14 +1,28 @@
import type { DerivativeFunc } from '@ant-design/cssinjs'; import type { DerivativeFunc } from '@ant-design/cssinjs';
import genControlHeight from '../shared/genControlHeight';
import type { SeedToken, MapToken } from '../../interface'; import type { SeedToken, MapToken } from '../../interface';
import defaultAlgorithm from '../default'; import defaultAlgorithm from '../default';
import genCompactSizeMapToken from './genCompactSizeMapToken'; import genCompactSizeMapToken from './genCompactSizeMapToken';
import getFontSizes from '../shared/genFontSizes';
const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => { const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
const mergedMapToken = mapToken ?? defaultAlgorithm(token); const mergedMapToken = mapToken ?? defaultAlgorithm(token);
const fontSize = mergedMapToken.fontSizes[0]; // Smaller size font-size as base
const fontSizes = getFontSizes(fontSize);
const controlHeight = mergedMapToken.controlHeight - 4;
return { return {
...mergedMapToken, ...mergedMapToken,
...genCompactSizeMapToken(token), ...genCompactSizeMapToken(mapToken ?? token),
// font
fontSizes: fontSizes.map(fs => fs.size),
lineHeights: fontSizes.map(fs => fs.lineHeight),
// controlHeight
controlHeight,
...genControlHeight({ ...mergedMapToken, controlHeight }),
}; };
}; };

2
components/theme/themes/dark/index.ts
View File

@ -32,7 +32,7 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
// Dark tokens // Dark tokens
...colorPalettes, ...colorPalettes,
// Colors // Colors
...genColorMapToken(token, { ...genColorMapToken(mapToken ?? token, {
generateColorPalettes, generateColorPalettes,
generateNeutralColorPalettes, generateNeutralColorPalettes,
}), }),

3
components/theme/themes/default/index.ts
View File

@ -1,4 +1,5 @@
import { generate } from '@ant-design/colors'; import { generate } from '@ant-design/colors';
import genControlHeight from '../shared/genControlHeight';
import genSizeMapToken from '../shared/genSizeMapToken'; import genSizeMapToken from '../shared/genSizeMapToken';
import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
import { defaultPresetColors } from '../seed'; import { defaultPresetColors } from '../seed';
@ -34,6 +35,8 @@ export default function derivative(token: SeedToken): MapToken {
}), }),
// Size // Size
...genSizeMapToken(token), ...genSizeMapToken(token),
// Height
...genControlHeight(token),
// Others // Others
...genCommonMapToken(token), ...genCommonMapToken(token),
}; };

7
components/theme/themes/seed.ts
View File

@ -27,7 +27,6 @@ const seedToken: SeedToken = {
colorError: '#f5222d', colorError: '#f5222d',
colorInfo: '#1677ff', colorInfo: '#1677ff',
colorTextBase: '', colorTextBase: '',
colorTextLightSolid: '#fff',
colorBgBase: '', colorBgBase: '',
@ -35,7 +34,7 @@ const seedToken: SeedToken = {
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji'`, 'Noto Color Emoji'`,
fontSizeBase: 14, fontSize: 14,
// Line // Line
lineWidth: 1, lineWidth: 1,
@ -53,11 +52,11 @@ const seedToken: SeedToken = {
motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`, motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
// Radius // Radius
radiusBase: 6, borderRadius: 6,
// Size // Size
sizeUnit: 4, sizeUnit: 4,
sizeBaseStep: 4, sizeStep: 4,
sizePopupArrow: 16, sizePopupArrow: 16,
// Control Base // Control Base

1
components/theme/themes/shared/genColorMapToken.ts
View File

@ -87,5 +87,6 @@ export default function genColorMapToken(
colorInfoTextActive: infoColors[10], colorInfoTextActive: infoColors[10],
colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(), colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
colorWhite: '#fff',
}; };
} }

11
components/theme/themes/shared/genCommonMapToken.ts
View File

@ -3,9 +3,9 @@ import genFontSizes from './genFontSizes';
import genRadius from './genRadius'; import genRadius from './genRadius';
export default function genCommonMapToken(token: SeedToken): CommonMapToken { export default function genCommonMapToken(token: SeedToken): CommonMapToken {
const { motionUnit, motionBase, fontSizeBase, radiusBase, controlHeight, lineWidth } = token; const { motionUnit, motionBase, fontSize, borderRadius, lineWidth } = token;
const fontSizes = genFontSizes(fontSizeBase); const fontSizes = genFontSizes(fontSize);
return { return {
// motion // motion
@ -21,11 +21,6 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken {
lineWidthBold: lineWidth + 1, lineWidthBold: lineWidth + 1,
// radius // radius
...genRadius(radiusBase), ...genRadius(borderRadius),
// control
controlHeightSM: controlHeight * 0.75,
controlHeightXS: controlHeight * 0.5,
controlHeightLG: controlHeight * 1.25,
}; };
} }

13
components/theme/themes/shared/genControlHeight.ts Normal file
View File

@ -0,0 +1,13 @@
import type { HeightMapToken, SeedToken } from '../../interface';
const genControlHeight = (token: SeedToken): HeightMapToken => {
const { controlHeight } = token;
return {
controlHeightSM: controlHeight * 0.75,
controlHeightXS: controlHeight * 0.5,
controlHeightLG: controlHeight * 1.25,
};
};
export default genControlHeight;

15
components/theme/themes/shared/genRadius.ts
View File

@ -2,7 +2,10 @@ import type { MapToken } from '../../interface';
const genRadius = ( const genRadius = (
radiusBase: number, radiusBase: number,
): Pick<MapToken, 'radiusXS' | 'radiusSM' | 'radiusLG' | 'radiusBase' | 'radiusOuter'> => { ): Pick<
MapToken,
'borderRadiusXS' | 'borderRadiusSM' | 'borderRadiusLG' | 'borderRadius' | 'borderRadiusOuter'
> => {
let radiusLG = radiusBase; let radiusLG = radiusBase;
let radiusSM = radiusBase; let radiusSM = radiusBase;
let radiusXS = radiusBase; let radiusXS = radiusBase;
@ -45,11 +48,11 @@ const genRadius = (
} }
return { return {
radiusBase: radiusBase > 16 ? 16 : radiusBase, borderRadius: radiusBase > 16 ? 16 : radiusBase,
radiusXS, borderRadiusXS: radiusXS,
radiusSM, borderRadiusSM: radiusSM,
radiusLG, borderRadiusLG: radiusLG,
radiusOuter, borderRadiusOuter: radiusOuter,
}; };
}; };

20
components/theme/themes/shared/genSizeMapToken.ts
View File

@ -1,17 +1,17 @@
import type { SeedToken, SizeMapToken } from '../../interface'; import type { SeedToken, SizeMapToken } from '../../interface';
export default function genSizeMapToken(token: SeedToken): SizeMapToken { export default function genSizeMapToken(token: SeedToken): SizeMapToken {
const { sizeUnit, sizeBaseStep } = token; const { sizeUnit, sizeStep } = token;
return { return {
sizeXXL: sizeUnit * (sizeBaseStep + 8), // 48 sizeXXL: sizeUnit * (sizeStep + 8), // 48
sizeXL: sizeUnit * (sizeBaseStep + 4), // 32 sizeXL: sizeUnit * (sizeStep + 4), // 32
sizeLG: sizeUnit * (sizeBaseStep + 2), // 24 sizeLG: sizeUnit * (sizeStep + 2), // 24
sizeMD: sizeUnit * (sizeBaseStep + 1), // 20 sizeMD: sizeUnit * (sizeStep + 1), // 20
sizeMS: sizeUnit * sizeBaseStep, // 16 sizeMS: sizeUnit * sizeStep, // 16
size: sizeUnit * sizeBaseStep, // 16 size: sizeUnit * sizeStep, // 16
sizeSM: sizeUnit * (sizeBaseStep - 1), // 12 sizeSM: sizeUnit * (sizeStep - 1), // 12
sizeXS: sizeUnit * (sizeBaseStep - 2), // 8 sizeXS: sizeUnit * (sizeStep - 2), // 8
sizeXXS: sizeUnit * (sizeBaseStep - 3), // 4 sizeXXS: sizeUnit * (sizeStep - 3), // 4
}; };
} }

71
components/theme/themes/v4/dark.ts
View File

@ -1,71 +0,0 @@
import type { DerivativeFunc } from '@ant-design/cssinjs';
import { generate } from '@ant-design/colors';
import genColorMapToken from './genColorMapToken';
import type { MapToken, SeedToken } from '../../interface';
import defaultAlgorithm from '../dark';
import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
import { getAlphaColor, getSolidColor } from '../dark/colorAlgorithm';
const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
const colors = generate(baseColor, { theme: 'dark' });
return {
1: colors[0],
2: colors[1],
3: colors[2],
4: colors[3],
5: colors[6],
6: colors[5],
7: colors[4],
8: colors[6],
9: colors[5],
10: colors[4],
};
};
const generateNeutralColorPalettes: GenerateNeutralColorMap = (
bgBaseColor: string,
textBaseColor: string,
) => {
const colorBgBase = bgBaseColor || '#000';
const colorTextBase = textBaseColor || '#fff';
return {
colorBgBase,
colorTextBase,
colorText: getAlphaColor(colorTextBase, 0.85),
colorTextSecondary: getAlphaColor(colorTextBase, 0.45), // Different from v5
colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
colorFill: getAlphaColor(colorTextBase, 0.18),
colorFillSecondary: getAlphaColor(colorTextBase, 0.12),
colorFillTertiary: getAlphaColor(colorTextBase, 0.08),
colorFillQuaternary: getAlphaColor(colorTextBase, 0.04),
colorBgElevated: getSolidColor(colorBgBase, 12),
colorBgContainer: getSolidColor(colorBgBase, 8),
colorBgLayout: getSolidColor(colorBgBase, 0),
colorBgSpotlight: getSolidColor(colorBgBase, 26),
colorBorder: getSolidColor(colorBgBase, 26),
colorBorderSecondary: getSolidColor(colorBgBase, 19),
colorSplit: getAlphaColor(colorTextBase, 0.12),
};
};
const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
const mergedMapToken = mapToken ?? defaultAlgorithm(token);
return {
...mergedMapToken,
// Colors
...genColorMapToken(token, {
generateColorPalettes,
generateNeutralColorPalettes,
}),
};
};
export default derivative;

71
components/theme/themes/v4/default.ts
View File

@ -1,71 +0,0 @@
import type { DerivativeFunc } from '@ant-design/cssinjs';
import { generate } from '@ant-design/colors';
import genColorMapToken from './genColorMapToken';
import type { MapToken, SeedToken } from '../../interface';
import defaultAlgorithm from '../default';
import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
import { getAlphaColor, getSolidColor } from '../default/colorAlgorithm';
export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
const colors = generate(baseColor);
return {
1: colors[0],
2: colors[1],
3: colors[2],
4: colors[3],
5: colors[4],
6: colors[5],
7: colors[6],
8: colors[4],
9: colors[5],
10: colors[6],
};
};
const generateNeutralColorPalettes: GenerateNeutralColorMap = (
bgBaseColor: string,
textBaseColor: string,
) => {
const colorBgBase = bgBaseColor || '#fff';
const colorTextBase = textBaseColor || '#000';
return {
colorBgBase,
colorTextBase,
colorText: getAlphaColor(colorTextBase, 0.85),
colorTextSecondary: getAlphaColor(colorTextBase, 0.45), // Different from v5
colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
colorFill: getAlphaColor(colorTextBase, 0.06),
colorFillSecondary: getAlphaColor(colorTextBase, 0.04),
colorFillTertiary: getAlphaColor(colorTextBase, 0.03),
colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
colorBgLayout: getSolidColor(colorBgBase, 4),
colorBgContainer: getSolidColor(colorBgBase, 0),
colorBgElevated: getSolidColor(colorBgBase, 0),
colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
colorBorder: getSolidColor(colorBgBase, 15),
colorBorderSecondary: getSolidColor(colorBgBase, 6),
colorSplit: getAlphaColor(colorTextBase, 0.06),
};
};
const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
const mergedMapToken = mapToken ?? defaultAlgorithm(token);
return {
...mergedMapToken,
// Colors
...genColorMapToken(token, {
generateColorPalettes,
generateNeutralColorPalettes,
}),
};
};
export default derivative;

91
components/theme/themes/v4/genColorMapToken.ts
View File

@ -1,91 +0,0 @@
import { TinyColor } from '@ctrl/tinycolor';
import type { ColorMapToken, SeedToken } from '../../interface';
import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
interface PaletteGenerators {
generateColorPalettes: GenerateColorMap;
generateNeutralColorPalettes: GenerateNeutralColorMap;
}
export default function genColorMapToken(
seed: SeedToken,
{ generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
): ColorMapToken {
const {
colorSuccess: colorSuccessBase,
colorWarning: colorWarningBase,
colorError: colorErrorBase,
colorInfo: colorInfoBase,
colorPrimary: colorPrimaryBase,
colorBgBase,
colorTextBase,
} = seed;
const primaryColors = generateColorPalettes(colorPrimaryBase);
const successColors = generateColorPalettes(colorSuccessBase);
const warningColors = generateColorPalettes(colorWarningBase);
const errorColors = generateColorPalettes(colorErrorBase);
const infoColors = generateColorPalettes(colorInfoBase);
const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
return {
...neutralColors,
colorPrimaryBg: primaryColors[1],
colorPrimaryBgHover: primaryColors[2],
colorPrimaryBorder: primaryColors[3],
colorPrimaryBorderHover: primaryColors[4],
colorPrimaryHover: primaryColors[5],
colorPrimary: primaryColors[6],
colorPrimaryActive: primaryColors[7],
colorPrimaryTextHover: primaryColors[8],
colorPrimaryText: primaryColors[9],
colorPrimaryTextActive: primaryColors[10],
colorSuccessBg: successColors[1],
colorSuccessBgHover: successColors[2],
colorSuccessBorder: successColors[3],
colorSuccessBorderHover: successColors[4],
colorSuccessHover: successColors[5],
colorSuccess: successColors[6],
colorSuccessActive: successColors[7],
colorSuccessTextHover: successColors[8],
colorSuccessText: successColors[9],
colorSuccessTextActive: successColors[10],
colorErrorBg: errorColors[1],
colorErrorBgHover: errorColors[2],
colorErrorBorder: errorColors[3],
colorErrorBorderHover: errorColors[4],
colorErrorHover: errorColors[5],
colorError: errorColors[6],
colorErrorActive: errorColors[7],
colorErrorTextHover: errorColors[8],
colorErrorText: errorColors[9],
colorErrorTextActive: errorColors[10],
colorWarningBg: warningColors[1],
colorWarningBgHover: warningColors[2],
colorWarningBorder: warningColors[3],
colorWarningBorderHover: warningColors[4],
colorWarningHover: warningColors[5],
colorWarning: warningColors[6],
colorWarningActive: warningColors[7],
colorWarningTextHover: warningColors[8],
colorWarningText: warningColors[9],
colorWarningTextActive: warningColors[10],
colorInfoBg: infoColors[1],
colorInfoBgHover: infoColors[2],
colorInfoBorder: infoColors[3],
colorInfoBorderHover: infoColors[4],
colorInfoHover: infoColors[5],
colorInfo: infoColors[6],
colorInfoActive: infoColors[7],
colorInfoTextHover: infoColors[8],
colorInfoText: infoColors[9],
colorInfoTextActive: infoColors[10],
colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
};
}

2
components/theme/themes/v4/index.ts
View File

@ -1,2 +0,0 @@
export { default as defaultAlgorithmV4 } from './default';
export { default as darkAlgorithmV4 } from './dark';

13
components/theme/util/alias.ts
View File

@ -58,6 +58,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
colorTextHeading: mergedToken.colorText, colorTextHeading: mergedToken.colorText,
colorTextLabel: mergedToken.colorTextSecondary, colorTextLabel: mergedToken.colorTextSecondary,
colorTextDescription: mergedToken.colorTextTertiary, colorTextDescription: mergedToken.colorTextTertiary,
colorTextLightSolid: mergedToken.colorWhite,
colorHighlight: mergedToken.colorError, colorHighlight: mergedToken.colorError,
colorBgTextHover: mergedToken.colorFillSecondary, colorBgTextHover: mergedToken.colorFillSecondary,
colorBgTextActive: mergedToken.colorFill, colorBgTextActive: mergedToken.colorFill,
@ -91,7 +92,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
lineHeightHeading5: lineHeights[2], lineHeightHeading5: lineHeights[2],
// Control // Control
controlLineWidth: mergedToken.lineWidth, lineWidth: mergedToken.lineWidth,
controlOutlineWidth: mergedToken.lineWidth * 2, controlOutlineWidth: mergedToken.lineWidth * 2,
// Checkbox size and expand icon size // Checkbox size and expand icon size
controlInteractiveSize: mergedToken.controlHeight / 2, controlInteractiveSize: mergedToken.controlHeight / 2,
@ -103,11 +104,11 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
controlTmpOutline: mergedToken.colorFillQuaternary, controlTmpOutline: mergedToken.colorFillQuaternary,
controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer), controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
controlLineType: mergedToken.lineType, lineType: mergedToken.lineType,
controlRadius: mergedToken.radiusBase, borderRadius: mergedToken.borderRadius,
controlRadiusXS: mergedToken.radiusXS, borderRadiusXS: mergedToken.borderRadiusXS,
controlRadiusSM: mergedToken.radiusSM, borderRadiusSM: mergedToken.borderRadiusSM,
controlRadiusLG: mergedToken.radiusLG, borderRadiusLG: mergedToken.borderRadiusLG,
fontWeightStrong: 600, fontWeightStrong: 600,

3
components/timeline/style/index.tsx
View File

@ -194,8 +194,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = token => {
[`${componentCls}-item-label`]: { [`${componentCls}-item-label`]: {
position: 'absolute', position: 'absolute',
insetBlockStart: insetBlockStart:
-(token.fontSizeBase * token.lineHeight - token.fontSizeBase) + -(token.fontSize * token.lineHeight - token.fontSize) + token.timeLineItemTailWidth,
token.timeLineItemTailWidth,
width: `calc(50% - ${token.marginSM}px)`, width: `calc(50% - ${token.marginSM}px)`,
textAlign: 'end', textAlign: 'end',
}, },

8
components/tooltip/style/index.tsx
View File

@ -120,7 +120,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
// Arrow Style // Arrow Style
getArrowStyle<TooltipToken>( getArrowStyle<TooltipToken>(
mergeToken<TooltipToken>(token, { mergeToken<TooltipToken>(token, {
radiusOuter: tooltipRadiusOuter, borderRadiusOuter: tooltipRadiusOuter,
}), }),
{ {
colorBg: 'var(--antd-arrow-background-color)', colorBg: 'var(--antd-arrow-background-color)',
@ -150,15 +150,15 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
return []; return [];
} }
const { radiusBase, colorTextLightSolid, colorBgDefault, radiusOuter } = token; const { borderRadius, colorTextLightSolid, colorBgDefault, borderRadiusOuter } = token;
const TooltipToken = mergeToken<TooltipToken>(token, { const TooltipToken = mergeToken<TooltipToken>(token, {
// default variables // default variables
tooltipMaxWidth: 250, tooltipMaxWidth: 250,
tooltipColor: colorTextLightSolid, tooltipColor: colorTextLightSolid,
tooltipBorderRadius: radiusBase, tooltipBorderRadius: borderRadius,
tooltipBg: colorBgDefault, tooltipBg: colorBgDefault,
tooltipRadiusOuter: radiusOuter > 4 ? 4 : radiusOuter, tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter,
}); });
return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')]; return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];

26
components/transfer/style/index.tsx
View File

@ -88,7 +88,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
componentCls, componentCls,
colorBorder, colorBorder,
colorSplit, colorSplit,
controlLineWidth, lineWidth,
transferItemHeight, transferItemHeight,
transferHeaderHeight, transferHeaderHeight,
transferHeaderVerticalPadding, transferHeaderVerticalPadding,
@ -102,7 +102,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
fontSizeIcon, fontSizeIcon,
marginXS, marginXS,
paddingSM, paddingSM,
controlLineType, lineType,
iconCls, iconCls,
motionDurationSlow, motionDurationSlow,
} = token; } = token;
@ -112,8 +112,8 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
flexDirection: 'column', flexDirection: 'column',
width: listWidth, width: listWidth,
height: listHeight, height: listHeight,
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, border: `${lineWidth}px ${lineType} ${colorBorder}`,
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
'&-with-pagination': { '&-with-pagination': {
width: listWidthLG, width: listWidthLG,
@ -133,12 +133,12 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
height: transferHeaderHeight, height: transferHeaderHeight,
// border-top is on the transfer dom. We should minus 1px for this // border-top is on the transfer dom. We should minus 1px for this
padding: `${ padding: `${
transferHeaderVerticalPadding - controlLineWidth transferHeaderVerticalPadding - lineWidth
}px ${paddingSM}px ${transferHeaderVerticalPadding}px`, }px ${paddingSM}px ${transferHeaderVerticalPadding}px`,
color: token.colorText, color: token.colorText,
background: token.colorBgContainer, background: token.colorBgContainer,
borderBottom: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
borderRadius: `${token.controlRadiusLG}px ${token.controlRadiusLG}px 0 0`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
'> *:not(:last-child)': { '> *:not(:last-child)': {
marginInlineEnd: 4, // This is magic and fixed number, DO NOT use token since it may change. marginInlineEnd: 4, // This is magic and fixed number, DO NOT use token since it may change.
@ -172,7 +172,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
flex: 'auto', flex: 'auto',
flexDirection: 'column', flexDirection: 'column',
overflow: 'hidden', overflow: 'hidden',
fontSize: token.fontSizeBase, fontSize: token.fontSize,
'&-search-wrapper': { '&-search-wrapper': {
position: 'relative', position: 'relative',
@ -257,7 +257,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
'&-pagination': { '&-pagination': {
padding: `${token.paddingXS}px 0`, padding: `${token.paddingXS}px 0`,
textAlign: 'end', textAlign: 'end',
borderTop: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
}, },
'&-body-not-found': { '&-body-not-found': {
@ -269,7 +269,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
}, },
'&-footer': { '&-footer': {
borderTop: `${controlLineWidth}px ${controlLineType} ${colorSplit}`, borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
}, },
}; };
}; };
@ -344,7 +344,7 @@ const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken)
export default genComponentStyleHook( export default genComponentStyleHook(
'Transfer', 'Transfer',
token => { token => {
const { fontSize, lineHeight, controlLineWidth, controlHeightLG, controlHeight } = token; const { fontSize, lineHeight, lineWidth, controlHeightLG, controlHeight } = token;
const fontHeight = Math.round(fontSize * lineHeight); const fontHeight = Math.round(fontSize * lineHeight);
const transferHeaderHeight = controlHeightLG; const transferHeaderHeight = controlHeightLG;
@ -353,9 +353,7 @@ export default genComponentStyleHook(
const transferToken = mergeToken<TransferToken>(token, { const transferToken = mergeToken<TransferToken>(token, {
transferItemHeight, transferItemHeight,
transferHeaderHeight, transferHeaderHeight,
transferHeaderVerticalPadding: Math.ceil( transferHeaderVerticalPadding: Math.ceil((transferHeaderHeight - lineWidth - fontHeight) / 2),
(transferHeaderHeight - controlLineWidth - fontHeight) / 2,
),
transferItemPaddingVertical: (transferItemHeight - fontHeight) / 2, transferItemPaddingVertical: (transferItemHeight - fontHeight) / 2,
}); });

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

@ -72,7 +72,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
[treeCls]: { [treeCls]: {
...resetComponent(token), ...resetComponent(token),
background: token.colorBgContainer, background: token.colorBgContainer,
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
transition: `background-color ${token.motionDurationSlow}`, transition: `background-color ${token.motionDurationSlow}`,
'&&-rtl': { '&&-rtl': {
@ -279,7 +279,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
color: 'inherit', color: 'inherit',
lineHeight: `${treeTitleHeight}px`, lineHeight: `${treeTitleHeight}px`,
background: 'transparent', background: 'transparent',
borderRadius: token.controlRadius, borderRadius: token.borderRadius,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}, border 0s, line-height 0s, box-shadow 0s`, transition: `all ${token.motionDurationFast}, border 0s, line-height 0s, box-shadow 0s`,

6
components/upload/style/dragger.tsx
View File

@ -12,8 +12,8 @@ const genDraggerStyle: GenerateStyle<UploadToken> = token => {
height: '100%', height: '100%',
textAlign: 'center', textAlign: 'center',
background: token.colorFillAlter, background: token.colorFillAlter,
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`, border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
cursor: 'pointer', cursor: 'pointer',
transition: `border-color ${token.motionDurationSlow}`, transition: `border-color ${token.motionDurationSlow}`,
@ -54,7 +54,7 @@ const genDraggerStyle: GenerateStyle<UploadToken> = token => {
[`p${componentCls}-hint`]: { [`p${componentCls}-hint`]: {
color: token.colorTextDescription, color: token.colorTextDescription,
fontSize: token.fontSizeBase, fontSize: token.fontSize,
}, },
// ===================== Disabled ===================== // ===================== Disabled =====================

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

@ -44,8 +44,8 @@ const genBaseStyle: GenerateStyle<UploadToken> = token => {
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Upload', token => { export default genComponentStyleHook('Upload', token => {
const { fontSizeHeading3, fontSizeBase, lineHeight, lineWidth, controlHeightLG } = token; const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token;
const listItemHeightSM = Math.round(fontSizeBase * lineHeight); const listItemHeightSM = Math.round(fontSize * lineHeight);
const uploadToken = mergeToken<UploadToken>(token, { const uploadToken = mergeToken<UploadToken>(token, {
uploadThumbnailSize: fontSizeHeading3 * 2, uploadThumbnailSize: fontSizeHeading3 * 2,

14
components/upload/style/list.tsx
View File

@ -3,11 +3,11 @@ import type { GenerateStyle } from '../../theme';
import { clearFix, textEllipsis } from '../../style'; import { clearFix, textEllipsis } from '../../style';
const genListStyle: GenerateStyle<UploadToken> = token => { const genListStyle: GenerateStyle<UploadToken> = token => {
const { componentCls, antCls, iconCls, fontSizeBase, lineHeight } = token; const { componentCls, antCls, iconCls, fontSize, lineHeight } = token;
const itemCls = `${componentCls}-list-item`; const itemCls = `${componentCls}-list-item`;
const actionsCls = `${itemCls}-actions`; const actionsCls = `${itemCls}-actions`;
const actionCls = `${itemCls}-action`; const actionCls = `${itemCls}-action`;
const listItemHeightSM = Math.round(fontSizeBase * lineHeight); const listItemHeightSM = Math.round(fontSize * lineHeight);
return { return {
[`${componentCls}-wrapper`]: { [`${componentCls}-wrapper`]: {
@ -17,9 +17,9 @@ const genListStyle: GenerateStyle<UploadToken> = token => {
[itemCls]: { [itemCls]: {
position: 'relative', position: 'relative',
height: token.lineHeight * fontSizeBase, height: token.lineHeight * fontSize,
marginTop: token.marginXS, marginTop: token.marginXS,
fontSize: fontSizeBase, fontSize,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
transition: `background-color ${token.motionDurationSlow}`, transition: `background-color ${token.motionDurationSlow}`,
@ -70,15 +70,15 @@ const genListStyle: GenerateStyle<UploadToken> = token => {
[`${componentCls}-icon ${iconCls}`]: { [`${componentCls}-icon ${iconCls}`]: {
color: token.colorTextDescription, color: token.colorTextDescription,
fontSize: fontSizeBase, fontSize,
}, },
[`${itemCls}-progress`]: { [`${itemCls}-progress`]: {
position: 'absolute', position: 'absolute',
bottom: -token.uploadProgressOffset, bottom: -token.uploadProgressOffset,
width: '100%', width: '100%',
paddingInlineStart: fontSizeBase + token.paddingXS, paddingInlineStart: fontSize + token.paddingXS,
fontSize: fontSizeBase, fontSize,
lineHeight: 0, lineHeight: 0,
pointerEvents: 'none', pointerEvents: 'none',

10
components/upload/style/picture.tsx
View File

@ -14,10 +14,10 @@ const genPictureStyle: GenerateStyle<UploadToken> = token => {
[`${listCls}${listCls}-picture, ${listCls}${listCls}-picture-card`]: { [`${listCls}${listCls}-picture, ${listCls}${listCls}-picture-card`]: {
[itemCls]: { [itemCls]: {
position: 'relative', position: 'relative',
height: uploadThumbnailSize + token.controlLineWidth * 2 + token.paddingXS * 2, height: uploadThumbnailSize + token.lineWidth * 2 + token.paddingXS * 2,
padding: token.paddingXS, padding: token.paddingXS,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
'&:hover': { '&:hover': {
background: 'transparent', background: 'transparent',
@ -98,8 +98,8 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = token => {
textAlign: 'center', textAlign: 'center',
verticalAlign: 'top', verticalAlign: 'top',
backgroundColor: token.colorFillAlter, backgroundColor: token.colorFillAlter,
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`, border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.controlRadiusLG, borderRadius: token.borderRadiusLG,
cursor: 'pointer', cursor: 'pointer',
transition: `border-color ${token.motionDurationSlow}`, transition: `border-color ${token.motionDurationSlow}`,

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

@ -95,14 +95,6 @@ export default function DynamicTheme({
label: 'Dark', label: 'Dark',
value: 'dark', value: 'dark',
}, },
{
label: 'Default-V4',
value: 'defaultV4',
},
{
label: 'Dark-V4',
value: 'darkV4',
},
]} ]}
/> />
</Form.Item> </Form.Item>

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

@ -255,10 +255,6 @@ export default class Layout extends React.Component<LayoutPropsType, LayoutState
switch (this.state.v5theme) { switch (this.state.v5theme) {
case 'dark': case 'dark':
return antdTheme.darkAlgorithm; return antdTheme.darkAlgorithm;
case 'defaultV4':
return antdTheme.defaultAlgorithmV4;
case 'darkV4':
return antdTheme.darkAlgorithmV4;
case 'default': case 'default':
default: default:
return antdTheme.defaultAlgorithm; return antdTheme.defaultAlgorithm;