mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
feat: token update (#38314)
* 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
GitHub
parent
0785068f0c
commit
9f88c1238a
@ -18,7 +18,7 @@ const genAlertTypeStyle = (
|
||||
alertCls: string,
|
||||
): CSSObject => ({
|
||||
backgroundColor: bgColor,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColor}`,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${borderColor}`,
|
||||
[`${alertCls}-icon`]: {
|
||||
color: iconColor,
|
||||
},
|
||||
@ -33,7 +33,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
|
||||
fontSize,
|
||||
fontSizeLG,
|
||||
lineHeight,
|
||||
radiusLG: borderRadius,
|
||||
borderRadiusLG: borderRadius,
|
||||
motionEaseInOutCirc,
|
||||
alertIconSizeLG,
|
||||
colorText,
|
||||
|
||||
@ -33,9 +33,9 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
|
||||
avatarFontSizeBase,
|
||||
avatarFontSizeLG,
|
||||
avatarFontSizeSM,
|
||||
controlRadius,
|
||||
controlRadiusLG,
|
||||
controlRadiusSM,
|
||||
borderRadius,
|
||||
borderRadiusLG,
|
||||
borderRadiusSM,
|
||||
lineWidth,
|
||||
lineType,
|
||||
} = token;
|
||||
@ -89,14 +89,14 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
|
||||
display: 'block',
|
||||
},
|
||||
|
||||
...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, controlRadius),
|
||||
...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, borderRadius),
|
||||
|
||||
[`&-lg`]: {
|
||||
...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, controlRadiusLG),
|
||||
...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, borderRadiusLG),
|
||||
},
|
||||
|
||||
[`&-sm`]: {
|
||||
...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, controlRadiusSM),
|
||||
...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, borderRadiusSM),
|
||||
},
|
||||
|
||||
'> img': {
|
||||
|
||||
@ -288,7 +288,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
lineHeight: `${badgeFontHeight}px`,
|
||||
whiteSpace: 'nowrap',
|
||||
backgroundColor: token.colorPrimary,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
[`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
|
||||
[`${ribbonPrefixCls}-corner`]: {
|
||||
position: 'absolute',
|
||||
@ -324,10 +324,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
|
||||
// ============================== Export ==============================
|
||||
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 badgeShadowSize = controlLineWidth;
|
||||
const badgeShadowSize = lineWidth;
|
||||
const badgeZIndex = 'auto';
|
||||
const badgeHeight = badgeFontHeight - 2 * badgeShadowSize;
|
||||
const badgeTextColor = token.colorBgContainer;
|
||||
|
||||
@ -39,7 +39,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
color: token.breadcrumbLinkColor,
|
||||
transition: `color ${token.motionDurationFast}`,
|
||||
padding: `0 ${token.paddingXXS}px`,
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
height: token.lineHeight * token.fontSize,
|
||||
display: 'inline-block',
|
||||
marginInline: -token.marginXXS,
|
||||
@ -71,7 +71,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-overlay-link`]: {
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
height: token.lineHeight * token.fontSize,
|
||||
display: 'inline-block',
|
||||
padding: `0 ${token.paddingXXS}px`,
|
||||
@ -110,8 +110,8 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
export default genComponentStyleHook('Breadcrumb', token => {
|
||||
const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
|
||||
breadcrumbBaseColor: token.colorTextDescription,
|
||||
breadcrumbFontSize: token.fontSizeBase,
|
||||
breadcrumbIconFontSize: token.fontSizeBase,
|
||||
breadcrumbFontSize: token.fontSize,
|
||||
breadcrumbIconFontSize: token.fontSize,
|
||||
breadcrumbLinkColor: token.colorTextDescription,
|
||||
breadcrumbLinkColorHover: token.colorText,
|
||||
breadcrumbLastItemColor: token.colorText,
|
||||
|
||||
@ -23,8 +23,7 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
|
||||
});
|
||||
|
||||
const genGroupStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const { componentCls, fontSizeBase, controlLineWidth, colorPrimaryHover, colorErrorHover } =
|
||||
token;
|
||||
const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-group`]: [
|
||||
@ -42,7 +41,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = token => {
|
||||
},
|
||||
|
||||
'&:not(:first-child)': {
|
||||
marginInlineStart: -controlLineWidth,
|
||||
marginInlineStart: -lineWidth,
|
||||
|
||||
[`&, & > ${componentCls}`]: {
|
||||
borderStartStartRadius: 0,
|
||||
@ -67,7 +66,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-icon-only`]: {
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
textAlign: 'center',
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
userSelect: 'none',
|
||||
@ -68,11 +68,11 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
|
||||
'&:after': {
|
||||
position: 'absolute',
|
||||
top: -token.controlLineWidth,
|
||||
insetInlineStart: -token.controlLineWidth,
|
||||
top: -token.lineWidth,
|
||||
insetInlineStart: -token.lineWidth,
|
||||
display: 'inline-block',
|
||||
width: token.controlLineWidth,
|
||||
height: `calc(100% + ${token.controlLineWidth * 2}px)`,
|
||||
width: token.lineWidth,
|
||||
height: `calc(100% + ${token.lineWidth * 2}px)`,
|
||||
backgroundColor: token.colorPrimaryBorder,
|
||||
content: '""',
|
||||
},
|
||||
@ -86,11 +86,11 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
|
||||
'&:after': {
|
||||
position: 'absolute',
|
||||
top: -token.controlLineWidth,
|
||||
insetInlineStart: -token.controlLineWidth,
|
||||
top: -token.lineWidth,
|
||||
insetInlineStart: -token.lineWidth,
|
||||
display: 'inline-block',
|
||||
width: `calc(100% + ${token.controlLineWidth * 2}px)`,
|
||||
height: token.controlLineWidth,
|
||||
width: `calc(100% + ${token.lineWidth * 2}px)`,
|
||||
height: token.lineWidth,
|
||||
backgroundColor: token.colorPrimaryBorder,
|
||||
content: '""',
|
||||
},
|
||||
@ -389,9 +389,9 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
|
||||
|
||||
const paddingVertical = Math.max(
|
||||
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`;
|
||||
|
||||
@ -402,7 +402,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
|
||||
fontSize: token.fontSize,
|
||||
height: token.controlHeight,
|
||||
padding: `${paddingVertical}px ${paddingHorizontal}px`,
|
||||
borderRadius: token.controlRadius,
|
||||
borderRadius: token.borderRadius,
|
||||
|
||||
[`&${iconOnlyCls}`]: {
|
||||
width: token.controlHeight,
|
||||
@ -447,7 +447,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
controlHeight: token.controlHeightSM,
|
||||
padding: token.paddingXS,
|
||||
buttonPaddingHorizontal: 8, // Fixed padding
|
||||
controlRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
});
|
||||
|
||||
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`);
|
||||
@ -457,7 +457,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const largeToken = mergeToken<ButtonToken>(token, {
|
||||
controlHeight: token.controlHeightLG,
|
||||
fontSize: token.fontSizeLG,
|
||||
controlRadius: token.controlRadiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
});
|
||||
|
||||
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`);
|
||||
|
||||
@ -54,7 +54,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
|
||||
[`${calendarCls} ${componentCls}-panel`]: {
|
||||
background: calendarFullPanelBg,
|
||||
border: 0,
|
||||
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`,
|
||||
borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
borderRadius: 0,
|
||||
[`${componentCls}-month-panel, ${componentCls}-date-panel`]: {
|
||||
width: 'auto',
|
||||
@ -67,13 +67,13 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
|
||||
},
|
||||
},
|
||||
[`${calendarCls}-mini`]: {
|
||||
borderRadius: token.controlRadiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
[`${calendarCls}-header`]: {
|
||||
paddingInlineEnd: token.paddingXS,
|
||||
paddingInlineStart: token.paddingXS,
|
||||
},
|
||||
[`${componentCls}-panel`]: {
|
||||
borderRadius: `0 0 ${token.controlRadiusLG}px ${token.controlRadiusLG}px`,
|
||||
borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
|
||||
},
|
||||
[`${componentCls}-content`]: {
|
||||
height: token.miniContentHeight,
|
||||
|
||||
@ -41,8 +41,8 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
fontWeight: token.fontWeightStrong,
|
||||
fontSize: token.fontSizeLG,
|
||||
background: 'transparent',
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorderSecondary}`,
|
||||
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
|
||||
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
|
||||
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
||||
|
||||
...clearFix(),
|
||||
|
||||
@ -72,10 +72,10 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
marginBottom: cardHeadTabsMarginBottom,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
|
||||
'&-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,
|
||||
listStyle: 'none',
|
||||
background: token.colorBgContainer,
|
||||
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
|
||||
borderTop: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
|
||||
display: 'flex',
|
||||
...clearFix(),
|
||||
|
||||
@ -156,7 +156,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
'&: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': {
|
||||
padding: `${cardInnerHeadPadding}px 0`,
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
|
||||
@ -248,7 +248,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
position: 'relative',
|
||||
background: token.colorBgContainer,
|
||||
borderRadius: token.radiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
|
||||
[`&:not(${componentCls}-bordered)`]: {
|
||||
boxShadow,
|
||||
@ -262,7 +262,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
padding: '',
|
||||
color: '',
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
|
||||
[`${componentCls}-body`]: {
|
||||
@ -279,7 +279,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
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`]: {
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
|
||||
|
||||
[`${componentCls}-cover`]: {
|
||||
marginTop: -1,
|
||||
|
||||
@ -88,7 +88,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
'-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857
|
||||
|
||||
'&:not(:last-child)': {
|
||||
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`,
|
||||
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
},
|
||||
|
||||
'&-item': {
|
||||
@ -100,7 +100,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
|
||||
'&:hover': {
|
||||
background: token.controlItemBgHover,
|
||||
|
||||
@ -104,8 +104,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
|
||||
height: token.checkboxSize,
|
||||
direction: 'ltr',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
borderCollapse: 'separate',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
|
||||
@ -117,7 +117,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
|
||||
display: 'table',
|
||||
width: (token.checkboxSize / 14) * 5,
|
||||
height: (token.checkboxSize / 14) * 8,
|
||||
border: `${token.lineWidthBold}px solid ${token.colorBgContainer}`,
|
||||
border: `${token.lineWidthBold}px solid ${token.colorWhite}`,
|
||||
borderTop: 0,
|
||||
borderInlineStart: 0,
|
||||
transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
|
||||
@ -200,7 +200,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
visibility: 'hidden',
|
||||
border: `${token.lineWidthBold}px solid ${token.colorPrimary}`,
|
||||
animationName: antCheckboxEffect,
|
||||
|
||||
@ -23,8 +23,8 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
collapseHeaderPadding,
|
||||
collapsePanelBorderRadius,
|
||||
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorBorder,
|
||||
colorText,
|
||||
colorTextHeading,
|
||||
@ -37,7 +37,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
fontSizeIcon,
|
||||
} = token;
|
||||
|
||||
const borderBase = `${controlLineWidth}px ${controlLineType} ${colorBorder}`;
|
||||
const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
@ -260,7 +260,7 @@ export default genComponentStyleHook('Collapse', token => {
|
||||
collapseContentBg: token.colorBgContainer,
|
||||
collapseHeaderBg: token.colorFillAlter,
|
||||
collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
|
||||
collapsePanelBorderRadius: token.radiusLG,
|
||||
collapsePanelBorderRadius: token.borderRadiusLG,
|
||||
collapseContentPaddingHorizontal: 16, // Fixed value
|
||||
});
|
||||
|
||||
|
||||
@ -8,8 +8,7 @@ import { useToken } from '../../theme';
|
||||
import theme from '../../theme/export';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
|
||||
const { defaultAlgorithm, darkAlgorithm, defaultAlgorithmV4, darkAlgorithmV4, compactAlgorithm } =
|
||||
theme;
|
||||
const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;
|
||||
|
||||
let mockCanUseDom = true;
|
||||
|
||||
@ -73,36 +72,6 @@ describe('ConfigProvider.Theme', () => {
|
||||
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', () => {
|
||||
let tokenRef: any;
|
||||
const Demo = () => {
|
||||
@ -111,7 +80,7 @@ describe('ConfigProvider.Theme', () => {
|
||||
return null;
|
||||
};
|
||||
render(
|
||||
<ConfigProvider theme={{ token: { sizeBaseStep: 2 }, algorithm: compactAlgorithm }}>
|
||||
<ConfigProvider theme={{ algorithm: compactAlgorithm }}>
|
||||
<Demo />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
@ -67,11 +67,11 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
pickerCellInnerCls,
|
||||
pickerPanelCellHeight,
|
||||
motionDurationSlow,
|
||||
controlRadiusSM,
|
||||
borderRadiusSM,
|
||||
motionDurationFast,
|
||||
controlItemBgHover,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorPrimary,
|
||||
controlItemBgActive,
|
||||
colorTextLightSolid,
|
||||
@ -105,7 +105,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
minWidth: pickerPanelCellHeight,
|
||||
height: pickerPanelCellHeight,
|
||||
lineHeight: `${pickerPanelCellHeight}px`,
|
||||
borderRadius: controlRadiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
transition: `background ${motionDurationFast}, border ${motionDurationFast}`,
|
||||
},
|
||||
|
||||
@ -127,8 +127,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 1,
|
||||
border: `${controlLineWidth}px ${controlLineType} ${colorPrimary}`,
|
||||
borderRadius: controlRadiusSM,
|
||||
border: `${lineWidth}px ${lineType} ${colorPrimary}`,
|
||||
borderRadius: borderRadiusSM,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
@ -178,8 +178,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
top: '50%',
|
||||
zIndex: 0,
|
||||
height: controlHeightSM,
|
||||
borderTop: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderBottom: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
transform: 'translateY(-50%)',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
@ -212,8 +212,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
// range start border-radius
|
||||
[`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]:
|
||||
{
|
||||
borderStartStartRadius: controlRadiusSM,
|
||||
borderEndStartRadius: controlRadiusSM,
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
borderEndStartRadius: borderRadiusSM,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
},
|
||||
@ -223,8 +223,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
{
|
||||
borderStartStartRadius: 0,
|
||||
borderEndStartRadius: 0,
|
||||
borderStartEndRadius: controlRadiusSM,
|
||||
borderEndEndRadius: controlRadiusSM,
|
||||
borderStartEndRadius: borderRadiusSM,
|
||||
borderEndEndRadius: borderRadiusSM,
|
||||
},
|
||||
|
||||
'&-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-start)::after`]: {
|
||||
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
|
||||
borderInlineStart: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: controlLineWidth,
|
||||
borderEndStartRadius: controlLineWidth,
|
||||
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: lineWidth,
|
||||
borderEndStartRadius: lineWidth,
|
||||
},
|
||||
|
||||
// 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-end)::after`]: {
|
||||
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
|
||||
borderInlineEnd: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartEndRadius: controlLineWidth,
|
||||
borderEndEndRadius: controlLineWidth,
|
||||
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartEndRadius: lineWidth,
|
||||
borderEndEndRadius: lineWidth,
|
||||
},
|
||||
|
||||
// >>> Disabled
|
||||
@ -284,9 +284,9 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
paddingSM,
|
||||
paddingXS,
|
||||
colorBgContainer,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
controlRadiusLG,
|
||||
lineWidth,
|
||||
lineType,
|
||||
borderRadiusLG,
|
||||
colorPrimary,
|
||||
colorTextHeading,
|
||||
colorSplit,
|
||||
@ -309,10 +309,9 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
colorLinkActive,
|
||||
colorLinkHover,
|
||||
pickerDateHoverRangeBorderColor,
|
||||
controlRadiusSM,
|
||||
radiusSM,
|
||||
borderRadiusSM,
|
||||
colorTextLightSolid,
|
||||
controlRadius,
|
||||
borderRadius,
|
||||
controlItemBgHover,
|
||||
pickerTimePanelColumnHeight,
|
||||
pickerTimePanelColumnWidth,
|
||||
@ -332,8 +331,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center',
|
||||
background: colorBgContainer,
|
||||
border: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderRadius: controlRadiusLG,
|
||||
border: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
borderRadius: borderRadiusLG,
|
||||
outline: 'none',
|
||||
|
||||
'&-focused': {
|
||||
@ -375,7 +374,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
display: 'flex',
|
||||
padding: `0 ${paddingXS}px`,
|
||||
color: colorTextHeading,
|
||||
borderBottom: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
|
||||
'> *': {
|
||||
flex: 'none',
|
||||
@ -560,22 +559,22 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
|
||||
// ======================== Footer ========================
|
||||
[`&-panel ${componentCls}-footer`]: {
|
||||
borderTop: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
},
|
||||
|
||||
'&-footer': {
|
||||
width: 'min-content',
|
||||
minWidth: '100%',
|
||||
lineHeight: `${pickerTextHeight - 2 * controlLineWidth}px`,
|
||||
lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
|
||||
textAlign: 'center',
|
||||
|
||||
'&-extra': {
|
||||
padding: `0 ${paddingSM}`,
|
||||
lineHeight: `${pickerTextHeight - 2 * controlLineWidth}px`,
|
||||
lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
|
||||
textAlign: 'start',
|
||||
|
||||
'&: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`]: {
|
||||
insetInlineStart: hoverCellFixedDistance,
|
||||
borderInlineStart: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: controlRadiusSM,
|
||||
borderBottomStartRadius: controlRadiusSM,
|
||||
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
borderBottomStartRadius: borderRadiusSM,
|
||||
borderStartEndRadius: 0,
|
||||
borderBottomEndRadius: 0,
|
||||
|
||||
[`${componentCls}-panel-rtl &`]: {
|
||||
insetInlineEnd: hoverCellFixedDistance,
|
||||
borderInlineEnd: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: 0,
|
||||
borderBottomStartRadius: 0,
|
||||
borderStartEndRadius: controlRadiusSM,
|
||||
borderBottomEndRadius: controlRadiusSM,
|
||||
borderStartEndRadius: borderRadiusSM,
|
||||
borderBottomEndRadius: borderRadiusSM,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-cell-range-hover-end::after`]: {
|
||||
insetInlineEnd: hoverCellFixedDistance,
|
||||
borderInlineEnd: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: 0,
|
||||
borderBottomStartRadius: 0,
|
||||
borderStartEndRadius: controlRadius,
|
||||
borderBottomEndRadius: controlRadius,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderBottomEndRadius: borderRadius,
|
||||
|
||||
[`${componentCls}-panel-rtl &`]: {
|
||||
insetInlineStart: hoverCellFixedDistance,
|
||||
borderInlineStart: `${controlLineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: controlRadius,
|
||||
borderBottomStartRadius: controlRadius,
|
||||
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderBottomStartRadius: borderRadius,
|
||||
borderStartEndRadius: 0,
|
||||
borderBottomEndRadius: 0,
|
||||
},
|
||||
@ -684,13 +683,13 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
transition: `background ${motionDurationFast}`,
|
||||
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: radiusSM,
|
||||
borderEndStartRadius: radiusSM,
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
borderEndStartRadius: borderRadiusSM,
|
||||
},
|
||||
|
||||
'&:last-child': {
|
||||
borderStartEndRadius: radiusSM,
|
||||
borderEndEndRadius: radiusSM,
|
||||
borderStartEndRadius: borderRadiusSM,
|
||||
borderEndEndRadius: borderRadiusSM,
|
||||
},
|
||||
},
|
||||
|
||||
@ -737,7 +736,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
display: 'flex',
|
||||
|
||||
[`${componentCls}-time-panel`]: {
|
||||
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-date-panel,
|
||||
@ -787,14 +786,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
content: '""',
|
||||
[`${componentCls}-datetime-panel &`]: {
|
||||
height:
|
||||
pickerTimePanelColumnHeight -
|
||||
pickerPanelWithoutTimeCellHeight +
|
||||
2 * controlLineWidth,
|
||||
pickerTimePanelColumnHeight - pickerPanelWithoutTimeCellHeight + 2 * lineWidth,
|
||||
},
|
||||
},
|
||||
|
||||
'&:not(:first-child)': {
|
||||
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
},
|
||||
|
||||
'&-active': {
|
||||
@ -821,7 +818,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2,
|
||||
color: colorText,
|
||||
lineHeight: `${pickerTimePanelCellHeight}px`,
|
||||
borderRadius: controlRadiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
cursor: 'pointer',
|
||||
transition: `background ${motionDurationFast}`,
|
||||
|
||||
@ -917,10 +914,10 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
fontSize,
|
||||
inputPaddingHorizontal,
|
||||
colorBgContainer,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorBorder,
|
||||
controlRadius,
|
||||
borderRadius,
|
||||
motionDurationFast,
|
||||
colorBgContainerDisabled,
|
||||
colorTextDisabled,
|
||||
@ -943,12 +940,12 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
controlItemBgActive,
|
||||
colorPrimaryBorder,
|
||||
sizePopupArrow,
|
||||
radiusXS,
|
||||
radiusOuter,
|
||||
borderRadiusXS,
|
||||
borderRadiusOuter,
|
||||
colorBgElevated,
|
||||
controlRadiusLG,
|
||||
borderRadiusLG,
|
||||
boxShadowSecondary,
|
||||
radiusSM,
|
||||
borderRadiusSM,
|
||||
colorSplit,
|
||||
controlItemBgHover,
|
||||
presetsWidth,
|
||||
@ -963,8 +960,8 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
background: colorBgContainer,
|
||||
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderRadius: controlRadius,
|
||||
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderRadius,
|
||||
transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`,
|
||||
|
||||
// Space.Compact
|
||||
@ -1126,7 +1123,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
|
||||
// Active bar
|
||||
[`${componentCls}-active-bar`]: {
|
||||
bottom: -controlLineWidth,
|
||||
bottom: -lineWidth,
|
||||
height: lineWidthBold,
|
||||
marginInlineStart: inputPaddingHorizontal,
|
||||
background: colorPrimary,
|
||||
@ -1226,7 +1223,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
marginBottom: 0,
|
||||
padding: `${paddingXXS}px ${paddingSM}px`,
|
||||
overflow: 'hidden',
|
||||
lineHeight: `${pickerTextHeight - 2 * controlLineWidth - paddingXS / 2}px`,
|
||||
lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`,
|
||||
textAlign: 'start',
|
||||
listStyle: 'none',
|
||||
display: 'flex',
|
||||
@ -1262,8 +1259,8 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
transition: `left ${motionDurationSlow} ease-out`,
|
||||
...roundedArrow(
|
||||
sizePopupArrow,
|
||||
radiusXS,
|
||||
radiusOuter,
|
||||
borderRadiusXS,
|
||||
borderRadiusOuter,
|
||||
colorBgElevated,
|
||||
boxShadowPopoverArrow,
|
||||
),
|
||||
@ -1273,7 +1270,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
overflow: 'hidden',
|
||||
verticalAlign: 'top',
|
||||
background: colorBgElevated,
|
||||
borderRadius: controlRadiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow: boxShadowSecondary,
|
||||
transition: `margin ${motionDurationSlow}`,
|
||||
|
||||
@ -1298,11 +1295,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
overflow: 'auto',
|
||||
margin: 0,
|
||||
padding: paddingXS,
|
||||
borderInlineEnd: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderInlineEnd: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
|
||||
li: {
|
||||
...textEllipsis,
|
||||
borderRadius: radiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
paddingInline: paddingXS,
|
||||
paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2,
|
||||
cursor: 'pointer',
|
||||
@ -1326,7 +1323,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
direction: 'ltr',
|
||||
|
||||
[`${componentCls}-panel`]: {
|
||||
borderWidth: `0 0 ${controlLineWidth}px`,
|
||||
borderWidth: `0 0 ${lineWidth}px`,
|
||||
},
|
||||
|
||||
'&:last-child': {
|
||||
|
||||
@ -101,7 +101,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: Descripti
|
||||
},
|
||||
[`${componentCls}-view`]: {
|
||||
width: '100%',
|
||||
borderRadius: token.radiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
table: {
|
||||
width: '100%',
|
||||
tableLayout: 'fixed',
|
||||
|
||||
@ -16,12 +16,12 @@ interface DividerToken extends FullToken<'Divider'> {
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
|
||||
const { componentCls, sizePaddingEdgeHorizontal, colorSplit, controlLineWidth } = token;
|
||||
const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
borderBlockStart: `${controlLineWidth}px solid ${colorSplit}`,
|
||||
borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
|
||||
|
||||
// vertical
|
||||
'&-vertical': {
|
||||
@ -32,7 +32,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
margin: `0 ${token.dividerVerticalGutterMargin}px`,
|
||||
verticalAlign: 'middle',
|
||||
borderTop: 0,
|
||||
borderInlineStart: `${controlLineWidth}px solid ${colorSplit}`,
|
||||
borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
|
||||
},
|
||||
|
||||
'&-horizontal': {
|
||||
@ -57,7 +57,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
position: 'relative',
|
||||
top: '50%',
|
||||
width: '50%',
|
||||
borderBlockStart: `${controlLineWidth}px solid transparent`,
|
||||
borderBlockStart: `${lineWidth}px solid transparent`,
|
||||
// Chrome not accept `inherit` in `border-top`
|
||||
borderBlockStartColor: 'inherit',
|
||||
borderBlockEnd: 0,
|
||||
@ -99,7 +99,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
background: 'none',
|
||||
borderColor: colorSplit,
|
||||
borderStyle: 'dashed',
|
||||
borderWidth: `${controlLineWidth}px 0 0`,
|
||||
borderWidth: `${lineWidth}px 0 0`,
|
||||
},
|
||||
|
||||
'&-horizontal&-with-text&-dashed': {
|
||||
@ -109,7 +109,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
},
|
||||
|
||||
'&-vertical&-dashed': {
|
||||
borderInlineStart: controlLineWidth,
|
||||
borderInlineStart: lineWidth,
|
||||
borderInlineEnd: 0,
|
||||
borderBlockStart: 0,
|
||||
borderBlockEnd: 0,
|
||||
|
||||
@ -40,9 +40,9 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
motionDurationMid,
|
||||
motionDurationFast,
|
||||
dropdownPaddingVertical,
|
||||
fontSizeBase,
|
||||
fontSize,
|
||||
dropdownEdgeChildPadding,
|
||||
radiusBase,
|
||||
borderRadius,
|
||||
colorTextDisabled,
|
||||
fontSizeIcon,
|
||||
controlPaddingHorizontal,
|
||||
@ -128,8 +128,8 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
|
||||
...roundedArrow(
|
||||
sizePopupArrow,
|
||||
token.radiusXS,
|
||||
token.radiusOuter,
|
||||
token.borderRadiusXS,
|
||||
token.borderRadiusOuter,
|
||||
colorBgElevated,
|
||||
boxShadowPopoverArrow,
|
||||
),
|
||||
@ -265,7 +265,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
listStyleType: 'none',
|
||||
backgroundColor: colorBgElevated,
|
||||
backgroundClip: 'padding-box',
|
||||
borderRadius: token.controlRadiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
...genFocusStyle(token),
|
||||
@ -281,11 +281,11 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
},
|
||||
|
||||
[`${menuCls}-item-icon`]: {
|
||||
minWidth: fontSizeBase,
|
||||
minWidth: fontSize,
|
||||
marginInlineEnd: token.marginXS,
|
||||
fontSize: token.fontSizeSM,
|
||||
},
|
||||
@ -316,20 +316,20 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationFast}`,
|
||||
|
||||
'&:first-child': !dropdownEdgeChildPadding
|
||||
? {
|
||||
borderRadius: `${radiusBase}px ${radiusBase}px 0 0`,
|
||||
borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,
|
||||
}
|
||||
: [],
|
||||
|
||||
'&: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,
|
||||
sizePopupArrow,
|
||||
controlHeight,
|
||||
fontSizeBase,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
paddingXXS,
|
||||
componentCls,
|
||||
radiusOuter,
|
||||
radiusLG,
|
||||
borderRadiusOuter,
|
||||
borderRadiusLG,
|
||||
} = token;
|
||||
|
||||
const dropdownPaddingVertical = (controlHeight - fontSizeBase * lineHeight) / 2;
|
||||
const dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2;
|
||||
const { dropdownArrowOffset } = getArrowOffset({
|
||||
sizePopupArrow,
|
||||
contentRadius: radiusLG,
|
||||
radiusOuter,
|
||||
contentRadius: borderRadiusLG,
|
||||
borderRadiusOuter,
|
||||
});
|
||||
|
||||
const dropdownToken = mergeToken<DropdownToken>(token, {
|
||||
|
||||
@ -14,12 +14,12 @@ interface EmptyToken extends FullToken<'Empty'> {
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
|
||||
const { componentCls, margin, marginXS, marginXL, fontSizeBase, lineHeight } = token;
|
||||
const { componentCls, margin, marginXS, marginXL, fontSize, lineHeight } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
marginInline: marginXS,
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
textAlign: 'center',
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
|
||||
|
||||
// ============================== Group ==============================
|
||||
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 moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
|
||||
'0%': {
|
||||
@ -66,7 +66,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
insetInlineEnd: token.floatButtonInsetInlineEnd,
|
||||
insetBlockEnd: token.floatButtonInsetBlockEnd,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRadius: token.radiusBase,
|
||||
borderRadius: token.borderRadius,
|
||||
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
zIndex: -1,
|
||||
@ -95,12 +95,12 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
borderRadius: 0,
|
||||
padding: 0,
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: radiusBase,
|
||||
borderStartEndRadius: radiusBase,
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderStartEndRadius: borderRadius,
|
||||
},
|
||||
'&:last-child': {
|
||||
borderEndStartRadius: radiusBase,
|
||||
borderEndEndRadius: radiusBase,
|
||||
borderEndStartRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
@ -108,7 +108,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
},
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
display: 'block',
|
||||
borderRadius: radiusBase,
|
||||
borderRadius,
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
overflow: 'hidden',
|
||||
[`${componentCls}-square`]: {
|
||||
@ -117,12 +117,12 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
borderRadius: 0,
|
||||
padding: token.paddingXXS,
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: radiusBase,
|
||||
borderStartEndRadius: radiusBase,
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderStartEndRadius: borderRadius,
|
||||
},
|
||||
'&:last-child': {
|
||||
borderEndStartRadius: radiusBase,
|
||||
borderEndEndRadius: radiusBase,
|
||||
borderEndStartRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
@ -227,10 +227,10 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
[`${componentCls}-square`]: {
|
||||
height: 'auto',
|
||||
minHeight: floatButtonSize,
|
||||
borderRadius: token.radiusBase,
|
||||
borderRadius: token.borderRadius,
|
||||
[`${componentCls}-body`]: {
|
||||
height: 'auto',
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-default`]: {
|
||||
|
||||
@ -19,7 +19,7 @@ const resetForm = (token: AliasToken): CSSObject => ({
|
||||
fontSize: token.fontSizeLG,
|
||||
lineHeight: 'inherit',
|
||||
border: 0,
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
},
|
||||
|
||||
label: {
|
||||
@ -68,15 +68,21 @@ const resetForm = (token: AliasToken): CSSObject => ({
|
||||
},
|
||||
});
|
||||
|
||||
const genFormSize = (token: FormToken, height: number): CSSObject => ({
|
||||
[`${token.formItemCls}-label > label`]: {
|
||||
height,
|
||||
},
|
||||
const genFormSize = (token: FormToken, height: number): CSSObject => {
|
||||
const { formItemCls } = token;
|
||||
|
||||
[`${token.formItemCls}-control-input`]: {
|
||||
minHeight: height,
|
||||
},
|
||||
});
|
||||
return {
|
||||
[formItemCls]: {
|
||||
[`${formItemCls}-label > label`]: {
|
||||
height,
|
||||
},
|
||||
|
||||
[`${formItemCls}-control-input`]: {
|
||||
minHeight: height,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genFormStyle: GenerateStyle<FormToken> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
@ -27,10 +27,10 @@ type InputNumberToken = InputToken<FullToken<'InputNumber'>>;
|
||||
const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const {
|
||||
componentCls,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorBorder,
|
||||
controlRadius,
|
||||
borderRadius,
|
||||
fontSizeLG,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
@ -44,8 +44,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
colorBgContainer,
|
||||
motionDurationMid,
|
||||
colorTextDisabled,
|
||||
controlRadiusSM,
|
||||
controlRadiusLG,
|
||||
borderRadiusSM,
|
||||
borderRadiusLG,
|
||||
controlWidth,
|
||||
handleVisible,
|
||||
} = token;
|
||||
@ -61,8 +61,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
width: controlWidth,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderRadius: controlRadius,
|
||||
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderRadius,
|
||||
|
||||
...genCompactItemStyle(token, componentCls),
|
||||
|
||||
@ -77,19 +77,19 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
'&-lg': {
|
||||
padding: 0,
|
||||
fontSize: fontSizeLG,
|
||||
borderRadius: controlRadiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
|
||||
[`input${componentCls}-input`]: {
|
||||
height: controlHeightLG - 2 * controlLineWidth,
|
||||
height: controlHeightLG - 2 * lineWidth,
|
||||
},
|
||||
},
|
||||
|
||||
'&-sm': {
|
||||
padding: 0,
|
||||
borderRadius: controlRadiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
|
||||
[`input${componentCls}-input`]: {
|
||||
height: controlHeightSM - 2 * controlLineWidth,
|
||||
height: controlHeightSM - 2 * lineWidth,
|
||||
padding: `0 ${inputPaddingHorizontalSM}px`,
|
||||
},
|
||||
},
|
||||
@ -133,12 +133,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
// Size
|
||||
'&-lg': {
|
||||
[`${componentCls}-group-addon`]: {
|
||||
borderRadius: controlRadiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
},
|
||||
},
|
||||
'&-sm': {
|
||||
[`${componentCls}-group-addon`]: {
|
||||
borderRadius: controlRadiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -147,12 +147,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
[componentCls]: {
|
||||
'&-input': {
|
||||
width: '100%',
|
||||
height: controlHeight - 2 * controlLineWidth,
|
||||
height: controlHeight - 2 * lineWidth,
|
||||
padding: `0 ${inputPaddingHorizontal}px`,
|
||||
textAlign: 'start',
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
borderRadius: controlRadius,
|
||||
borderRadius,
|
||||
outline: 0,
|
||||
transition: `all ${motionDurationFast} linear`,
|
||||
appearance: 'textfield',
|
||||
@ -186,8 +186,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
height: '100%',
|
||||
background: colorBgContainer,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: controlRadius,
|
||||
borderEndEndRadius: controlRadius,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
borderEndStartRadius: 0,
|
||||
opacity: handleVisible === true ? 1 : 0,
|
||||
display: 'flex',
|
||||
@ -223,7 +223,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
lineHeight: 0,
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
transition: `all ${motionDurationFast} linear`,
|
||||
'&:active': {
|
||||
background: token.colorFillAlter,
|
||||
@ -251,12 +251,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
},
|
||||
|
||||
[`${componentCls}-handler-up`]: {
|
||||
borderStartEndRadius: controlRadius,
|
||||
borderStartEndRadius: borderRadius,
|
||||
},
|
||||
|
||||
[`${componentCls}-handler-down`]: {
|
||||
borderBlockStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderEndEndRadius: controlRadius,
|
||||
borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderEndEndRadius: borderRadius,
|
||||
},
|
||||
|
||||
// Disabled
|
||||
@ -302,8 +302,8 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
inputPaddingHorizontal,
|
||||
inputAffixPadding,
|
||||
controlWidth,
|
||||
controlRadiusLG,
|
||||
controlRadiusSM,
|
||||
borderRadiusLG,
|
||||
borderRadiusSM,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -318,11 +318,11 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
paddingInlineStart: inputPaddingHorizontal,
|
||||
|
||||
'&-lg': {
|
||||
borderRadius: controlRadiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
},
|
||||
|
||||
'&-sm': {
|
||||
borderRadius: controlRadiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
},
|
||||
|
||||
'&:not(&-disabled):hover': {
|
||||
@ -399,7 +399,7 @@ export default genComponentStyleHook(
|
||||
},
|
||||
token => ({
|
||||
controlWidth: 90,
|
||||
handleWidth: token.controlHeightSM - token.controlLineWidth * 2,
|
||||
handleWidth: token.controlHeightSM - token.lineWidth * 2,
|
||||
handleFontSize: token.fontSize / 2,
|
||||
handleVisible: 'auto',
|
||||
}),
|
||||
|
||||
@ -32,13 +32,13 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
|
||||
|
||||
export const genHoverStyle = (token: InputToken): CSSObject => ({
|
||||
borderColor: token.inputBorderHoverColor,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
});
|
||||
|
||||
export const genActiveStyle = (token: InputToken) => ({
|
||||
borderColor: token.inputBorderHoverColor,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
outline: 0,
|
||||
});
|
||||
|
||||
@ -56,18 +56,18 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
|
||||
});
|
||||
|
||||
const genInputLargeStyle = (token: InputToken): CSSObject => {
|
||||
const { inputPaddingVerticalLG, inputPaddingHorizontal, fontSizeLG, controlRadiusLG } = token;
|
||||
const { inputPaddingVerticalLG, inputPaddingHorizontal, fontSizeLG, borderRadiusLG } = token;
|
||||
|
||||
return {
|
||||
padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontal}px`,
|
||||
fontSize: fontSizeLG,
|
||||
borderRadius: controlRadiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
};
|
||||
};
|
||||
|
||||
export const genInputSmallStyle = (token: InputToken): CSSObject => ({
|
||||
padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
});
|
||||
|
||||
export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
@ -138,10 +138,10 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
lineHeight: token.lineHeight,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
backgroundImage: 'none',
|
||||
borderWidth: token.controlLineWidth,
|
||||
borderStyle: token.controlLineType,
|
||||
borderWidth: token.lineWidth,
|
||||
borderStyle: token.lineType,
|
||||
borderColor: token.colorBorder,
|
||||
borderRadius: token.controlRadius,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
...genPlaceholderStyle(token.colorTextPlaceholder),
|
||||
|
||||
@ -263,8 +263,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'center',
|
||||
backgroundColor: token.colorFillAlter,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
// 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-selector`]: {
|
||||
backgroundColor: 'inherit',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
@ -368,8 +368,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
[`.${prefixCls}-search &`]: {
|
||||
borderStartStartRadius: token.controlRadius,
|
||||
borderEndStartRadius: token.controlRadius,
|
||||
borderStartStartRadius: token.borderRadius,
|
||||
borderEndStartRadius: token.borderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
@ -385,7 +385,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
|
||||
[`.${prefixCls}-group-addon, .${prefixCls}-group-wrap, > .${prefixCls}`]: {
|
||||
'&:not(:first-child):not(:last-child)': {
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
|
||||
'&:hover': {
|
||||
zIndex: 1,
|
||||
@ -413,8 +413,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
},
|
||||
|
||||
'& > *:not(:last-child)': {
|
||||
marginInlineEnd: -token.controlLineWidth,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
marginInlineEnd: -token.lineWidth,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
},
|
||||
|
||||
// Undo float for .ant-input-group .ant-input
|
||||
@ -427,7 +427,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
& > ${antCls}-select-auto-complete .${prefixCls},
|
||||
& > ${antCls}-cascader-picker .${prefixCls},
|
||||
& > .${prefixCls}-group-wrapper .${prefixCls}`]: {
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
borderRadius: 0,
|
||||
|
||||
'&:hover': {
|
||||
@ -452,17 +452,17 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
& > ${antCls}-select:first-child > ${antCls}-select-selector,
|
||||
& > ${antCls}-select-auto-complete:first-child .${prefixCls},
|
||||
& > ${antCls}-cascader-picker:first-child .${prefixCls}`]: {
|
||||
borderStartStartRadius: token.controlRadius,
|
||||
borderEndStartRadius: token.controlRadius,
|
||||
borderStartStartRadius: token.borderRadius,
|
||||
borderEndStartRadius: token.borderRadius,
|
||||
},
|
||||
|
||||
[`& > *:last-child,
|
||||
& > ${antCls}-select:last-child > ${antCls}-select-selector,
|
||||
& > ${antCls}-cascader-picker:last-child .${prefixCls},
|
||||
& > ${antCls}-cascader-picker-focused:last-child .${prefixCls}`]: {
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
borderStartEndRadius: token.controlRadius,
|
||||
borderEndEndRadius: token.controlRadius,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
borderStartEndRadius: token.borderRadius,
|
||||
borderEndEndRadius: token.borderRadius,
|
||||
},
|
||||
|
||||
// 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`]: {
|
||||
marginInlineStart: -token.controlLineWidth,
|
||||
marginInlineStart: -token.lineWidth,
|
||||
[`.${prefixCls}-affix-wrapper`]: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
@ -484,10 +484,10 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
},
|
||||
|
||||
[`& > .${prefixCls}`]: {
|
||||
borderStartStartRadius: token.controlRadius,
|
||||
borderStartStartRadius: token.borderRadius,
|
||||
borderStartEndRadius: 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 { prefixCls, controlHeightSM, controlLineWidth } = token;
|
||||
const { prefixCls, controlHeightSM, lineWidth } = token;
|
||||
|
||||
const FIXED_CHROME_COLOR_HEIGHT = 16;
|
||||
const colorSmallPadding =
|
||||
(controlHeightSM - controlLineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
|
||||
const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
|
||||
|
||||
return {
|
||||
[`.${prefixCls}`]: {
|
||||
@ -670,7 +669,7 @@ const genAffixStyle: 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;
|
||||
|
||||
return {
|
||||
@ -696,12 +695,12 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
// Size
|
||||
'&-lg': {
|
||||
[`${componentCls}-group-addon`]: {
|
||||
borderRadius: controlRadiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
},
|
||||
},
|
||||
'&-sm': {
|
||||
[`${componentCls}-group-addon`]: {
|
||||
borderRadius: controlRadiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
},
|
||||
},
|
||||
|
||||
@ -759,8 +758,8 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: token.controlRadius,
|
||||
borderEndEndRadius: token.controlRadius,
|
||||
borderStartEndRadius: token.borderRadius,
|
||||
borderEndEndRadius: token.borderRadius,
|
||||
borderEndStartRadius: 0,
|
||||
},
|
||||
|
||||
@ -810,7 +809,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
[`&:not(.${prefixCls}-compact-last-item)`]: {
|
||||
[`.${prefixCls}-group-addon`]: {
|
||||
[`.${prefixCls}-search-button`]: {
|
||||
marginInlineEnd: -token.controlLineWidth,
|
||||
marginInlineEnd: -token.lineWidth,
|
||||
borderRadius: 0,
|
||||
},
|
||||
},
|
||||
@ -844,19 +843,19 @@ export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): I
|
||||
inputAffixPadding: token.paddingXXS,
|
||||
inputPaddingVertical: Math.max(
|
||||
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.controlLineWidth,
|
||||
token.lineWidth,
|
||||
3,
|
||||
),
|
||||
inputPaddingVerticalLG:
|
||||
Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.controlLineWidth,
|
||||
token.lineWidth,
|
||||
inputPaddingVerticalSM: Math.max(
|
||||
Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.controlLineWidth,
|
||||
token.lineWidth,
|
||||
0,
|
||||
),
|
||||
inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth,
|
||||
inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth,
|
||||
inputPaddingHorizontal: token.controlPaddingHorizontal - token.lineWidth,
|
||||
inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.lineWidth,
|
||||
inputBorderHoverColor: token.colorPrimaryHover,
|
||||
inputBorderActiveColor: token.colorPrimaryHover,
|
||||
});
|
||||
|
||||
@ -36,8 +36,8 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
layoutZeroTriggerSize,
|
||||
motionDurationMid,
|
||||
motionDurationSlow,
|
||||
fontSizeBase,
|
||||
radiusBase,
|
||||
fontSize,
|
||||
borderRadius,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -82,7 +82,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
[`${componentCls}-footer`]: {
|
||||
padding: layoutFooterPadding,
|
||||
color: colorText,
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
background: colorBgBody,
|
||||
},
|
||||
|
||||
@ -154,8 +154,8 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
justifyContent: 'center',
|
||||
background: colorBgHeader,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: radiusBase,
|
||||
borderEndEndRadius: radiusBase,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
borderEndStartRadius: 0,
|
||||
|
||||
cursor: 'pointer',
|
||||
@ -176,10 +176,10 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
|
||||
'&-right': {
|
||||
insetInlineStart: -layoutZeroTriggerSize,
|
||||
borderStartStartRadius: radiusBase,
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
borderEndStartRadius: radiusBase,
|
||||
borderEndStartRadius: borderRadius,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -24,12 +24,12 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
|
||||
padding,
|
||||
listItemPaddingSM,
|
||||
marginLG,
|
||||
radiusLG,
|
||||
borderRadiusLG,
|
||||
} = token;
|
||||
return {
|
||||
[`${listBorderedCls}`]: {
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: radiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
[`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
|
||||
paddingInline: paddingLG,
|
||||
},
|
||||
@ -297,7 +297,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-split ${componentCls}-item`]: {
|
||||
borderBlockEnd: `${token.lineWidth}px ${token.controlLineType} ${token.colorSplit}`,
|
||||
borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
|
||||
[`&:last-child`]: {
|
||||
borderBlockEnd: 'none',
|
||||
|
||||
@ -33,7 +33,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
inputPaddingVertical,
|
||||
fontSize,
|
||||
colorBgElevated,
|
||||
controlRadiusLG,
|
||||
borderRadiusLG,
|
||||
boxShadowSecondary,
|
||||
} = token;
|
||||
|
||||
@ -144,7 +144,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
fontSize,
|
||||
fontVariant: 'initial',
|
||||
backgroundColor: colorBgElevated,
|
||||
borderRadius: controlRadiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
outline: 'none',
|
||||
boxShadow: boxShadowSecondary,
|
||||
|
||||
@ -177,8 +177,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
},
|
||||
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: controlRadiusLG,
|
||||
borderStartEndRadius: controlRadiusLG,
|
||||
borderStartStartRadius: borderRadiusLG,
|
||||
borderStartEndRadius: borderRadiusLG,
|
||||
borderEndStartRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
},
|
||||
@ -186,8 +186,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
'&:last-child': {
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndStartRadius: controlRadiusLG,
|
||||
borderEndEndRadius: controlRadiusLG,
|
||||
borderEndStartRadius: borderRadiusLG,
|
||||
borderEndEndRadius: borderRadiusLG,
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
|
||||
@ -83,8 +83,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
||||
lineWidth,
|
||||
iconCls,
|
||||
zIndexPopup,
|
||||
radiusBase,
|
||||
radiusLG,
|
||||
borderRadius,
|
||||
borderRadiusLG,
|
||||
radiusSubMenuItem,
|
||||
menuArrowSize,
|
||||
controlHeightSM,
|
||||
@ -287,7 +287,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
||||
position: 'absolute',
|
||||
zIndex: zIndexPopup,
|
||||
background: 'transparent',
|
||||
borderRadius: radiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow: 'none',
|
||||
transformOrigin: '0 0',
|
||||
|
||||
@ -310,7 +310,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
||||
},
|
||||
|
||||
[`> ${componentCls}`]: {
|
||||
borderRadius: radiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
|
||||
[`> ${componentCls}-item`]: {
|
||||
borderRadius: radiusSubMenuItem,
|
||||
@ -340,7 +340,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
||||
width: menuArrowSize * 0.6,
|
||||
height: menuArrowSize * 0.15,
|
||||
backgroundColor: 'currentcolor',
|
||||
borderRadius: radiusBase,
|
||||
borderRadius,
|
||||
transition: [
|
||||
`background ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`transform ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
@ -502,8 +502,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
return {
|
||||
dropdownWidth: 160,
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
radiusItem: token.radiusLG,
|
||||
radiusSubMenuItem: token.radiusSM,
|
||||
radiusItem: token.borderRadiusLG,
|
||||
radiusSubMenuItem: token.borderRadiusSM,
|
||||
colorItemText: colorText,
|
||||
colorItemTextHover: colorText,
|
||||
colorItemTextHoverHorizontal: colorPrimary,
|
||||
|
||||
@ -31,7 +31,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
|
||||
motionDurationSlow,
|
||||
marginXS,
|
||||
paddingXS,
|
||||
radiusLG,
|
||||
borderRadiusLG,
|
||||
zIndexPopup,
|
||||
// Custom token
|
||||
messageNoticeContentPadding,
|
||||
@ -128,7 +128,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
|
||||
display: 'inline-block',
|
||||
padding: messageNoticeContentPadding,
|
||||
background: colorBgElevated,
|
||||
borderRadius: radiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow: boxShadowSecondary,
|
||||
pointerEvents: 'all',
|
||||
},
|
||||
|
||||
@ -162,7 +162,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
|
||||
backgroundColor: token.modalContentBg,
|
||||
backgroundClip: 'padding-box',
|
||||
border: 0,
|
||||
borderRadius: token.radiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
pointerEvents: 'auto',
|
||||
padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
|
||||
@ -179,7 +179,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
|
||||
lineHeight: 1,
|
||||
textDecoration: 'none',
|
||||
background: 'transparent',
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
width: token.modalConfirmIconSize,
|
||||
height: token.modalConfirmIconSize,
|
||||
border: 0,
|
||||
@ -213,12 +213,12 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
|
||||
[`${componentCls}-header`]: {
|
||||
color: token.colorText,
|
||||
background: token.modalHeaderBg,
|
||||
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
|
||||
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
||||
marginBottom: token.marginXS,
|
||||
},
|
||||
|
||||
[`${componentCls}-body`]: {
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
wordWrap: 'break-word',
|
||||
},
|
||||
@ -302,7 +302,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
|
||||
|
||||
[`${confirmComponentCls}-content`]: {
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
|
||||
[`> ${token.iconCls}`]: {
|
||||
@ -389,7 +389,7 @@ const genWireframeStyle: GenerateStyle<ModalToken> = token => {
|
||||
[`${componentCls}-footer`]: {
|
||||
padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`,
|
||||
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,
|
||||
},
|
||||
},
|
||||
@ -425,8 +425,8 @@ export default genComponentStyleHook('Modal', token => {
|
||||
modalBodyPadding: token.paddingLG,
|
||||
modalHeaderBg: token.colorBgElevated,
|
||||
modalHeaderPadding: `${headerPaddingVertical}px ${token.paddingLG}px`,
|
||||
modalHeaderBorderWidth: token.controlLineWidth,
|
||||
modalHeaderBorderStyle: token.controlLineType,
|
||||
modalHeaderBorderWidth: token.lineWidth,
|
||||
modalHeaderBorderStyle: token.lineType,
|
||||
modalHeaderTitleLineHeight: headerLineHeight,
|
||||
modalHeaderTitleFontSize: headerFontSize,
|
||||
modalHeaderBorderColorSplit: token.colorSplit,
|
||||
@ -436,10 +436,10 @@ export default genComponentStyleHook('Modal', token => {
|
||||
modalCloseColor: token.colorTextDescription,
|
||||
modalFooterBg: 'transparent',
|
||||
modalFooterBorderColorSplit: token.colorSplit,
|
||||
modalFooterBorderStyle: token.controlLineType,
|
||||
modalFooterBorderStyle: token.lineType,
|
||||
modalFooterPaddingVertical: token.paddingXS,
|
||||
modalFooterPaddingHorizontal: token.padding,
|
||||
modalFooterBorderWidth: token.controlLineWidth,
|
||||
modalFooterBorderWidth: token.lineWidth,
|
||||
modalConfirmTitleFontSize: token.fontSizeLG,
|
||||
modalIconHoverColor: token.colorIconHover,
|
||||
modalConfirmIconSize: token.fontSize * token.lineHeight,
|
||||
|
||||
@ -29,7 +29,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
boxShadowSecondary,
|
||||
fontSizeLG,
|
||||
notificationMarginBottom,
|
||||
radiusLG,
|
||||
borderRadiusLG,
|
||||
colorSuccess,
|
||||
colorInfo,
|
||||
colorWarning,
|
||||
@ -40,7 +40,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
notificationMarginEdge,
|
||||
motionDurationMid,
|
||||
motionEaseInOut,
|
||||
fontSizeBase,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
width,
|
||||
notificationIconSize,
|
||||
@ -164,11 +164,11 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
lineHeight,
|
||||
wordWrap: 'break-word',
|
||||
background: notificationBg,
|
||||
borderRadius: radiusLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow: boxShadowSecondary,
|
||||
|
||||
[`${componentCls}-close-icon`]: {
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
|
||||
@ -180,7 +180,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
},
|
||||
|
||||
[`${noticeCls}-description`]: {
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
},
|
||||
|
||||
[`&${noticeCls}-closable ${noticeCls}-message`]: {
|
||||
@ -195,7 +195,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
|
||||
[`${noticeCls}-with-icon ${noticeCls}-description`]: {
|
||||
marginInlineStart: token.marginSM + notificationIconSize,
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
},
|
||||
|
||||
// Icon & color style in different selector level
|
||||
@ -229,7 +229,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
outline: 'none',
|
||||
width: token.notificationCloseButtonSize,
|
||||
height: token.notificationCloseButtonSize,
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@ -218,8 +218,8 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
|
||||
padding: `0 ${token.paginationItemPaddingInline}px`,
|
||||
textAlign: 'center',
|
||||
backgroundColor: token.paginationItemInputBg,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.radiusBase,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 'none',
|
||||
transition: `border-color ${token.motionDurationFast}`,
|
||||
|
||||
@ -329,7 +329,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
listStyle: 'none',
|
||||
borderRadius: token.radiusBase,
|
||||
borderRadius: token.borderRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
},
|
||||
@ -352,8 +352,8 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
fontSize: token.fontSizeSM,
|
||||
textAlign: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
borderRadius: token.radiusBase,
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 'none',
|
||||
transition: `border ${token.motionDurationFast}`,
|
||||
},
|
||||
@ -428,8 +428,8 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
verticalAlign: 'middle',
|
||||
listStyle: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
borderRadius: token.radiusBase,
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 0,
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
@ -626,7 +626,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
backgroundColor: token.paginationItemBg,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
|
||||
[`&:hover:not(${componentCls}-item-active)`]: {
|
||||
borderColor: token.colorPrimary,
|
||||
|
||||
@ -25,7 +25,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
|
||||
popoverPadding,
|
||||
boxShadowSecondary,
|
||||
colorTextHeading,
|
||||
radiusLG: borderRadius,
|
||||
borderRadiusLG: borderRadius,
|
||||
zIndexPopup,
|
||||
marginXS,
|
||||
} = token;
|
||||
|
||||
@ -47,7 +47,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = token => {
|
||||
'&-line': {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
marginInlineEnd: token.marginXS,
|
||||
marginBottom: token.marginXS,
|
||||
},
|
||||
@ -105,7 +105,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = token => {
|
||||
verticalAlign: 'middle',
|
||||
wordBreak: 'normal',
|
||||
[iconPrefixCls]: {
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -76,15 +76,16 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
motionEaseInOutCirc,
|
||||
radioButtonBg,
|
||||
colorBorder,
|
||||
controlLineWidth,
|
||||
lineWidth,
|
||||
radioDotSize,
|
||||
colorBgContainerDisabled,
|
||||
colorTextDisabled,
|
||||
paddingXS,
|
||||
radioDotDisabledColor,
|
||||
controlLineType,
|
||||
lineType,
|
||||
radioDotDisabledSize,
|
||||
wireframe,
|
||||
colorWhite,
|
||||
} = token;
|
||||
const radioInnerPrefixCls = `${componentCls}-inner`;
|
||||
|
||||
@ -121,7 +122,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: `${controlLineWidth}px ${controlLineType} ${radioCheckedColor}`,
|
||||
border: `${lineWidth}px ${lineType} ${radioCheckedColor}`,
|
||||
borderRadius: '50%',
|
||||
visibility: 'hidden',
|
||||
animationName: antRadioEffect,
|
||||
@ -164,7 +165,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
height: radioSize,
|
||||
marginBlockStart: radioSize / -2,
|
||||
marginInlineStart: radioSize / -2,
|
||||
backgroundColor: wireframe ? radioCheckedColor : radioButtonBg,
|
||||
backgroundColor: wireframe ? radioCheckedColor : colorWhite,
|
||||
borderBlockStart: 0,
|
||||
borderInlineStart: 0,
|
||||
borderRadius: radioSize,
|
||||
@ -184,7 +185,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
backgroundColor: radioButtonBg,
|
||||
borderColor: colorBorder,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: controlLineWidth,
|
||||
borderWidth: lineWidth,
|
||||
borderRadius: '50%',
|
||||
transition: `all ${motionDurationFast}`,
|
||||
},
|
||||
@ -259,8 +260,8 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
radioButtonColor,
|
||||
controlHeight,
|
||||
componentCls,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorBorder,
|
||||
motionDurationSlow,
|
||||
motionDurationFast,
|
||||
@ -271,9 +272,9 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
paddingXS,
|
||||
controlRadius,
|
||||
controlRadiusSM,
|
||||
controlRadiusLG,
|
||||
borderRadius,
|
||||
borderRadiusSM,
|
||||
borderRadiusLG,
|
||||
radioCheckedColor,
|
||||
radioButtonCheckedBg,
|
||||
radioButtonHoverColor,
|
||||
@ -294,14 +295,14 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
paddingBlock: 0,
|
||||
color: radioButtonColor,
|
||||
fontSize,
|
||||
lineHeight: `${controlHeight - controlLineWidth * 2}px`,
|
||||
lineHeight: `${controlHeight - lineWidth * 2}px`,
|
||||
background: radioButtonBg,
|
||||
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
// strange align fix for chrome but works
|
||||
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
|
||||
borderBlockStartWidth: controlLineWidth + 0.02,
|
||||
borderBlockStartWidth: lineWidth + 0.02,
|
||||
borderInlineStartWidth: 0,
|
||||
borderInlineEndWidth: controlLineWidth,
|
||||
borderInlineEndWidth: lineWidth,
|
||||
cursor: 'pointer',
|
||||
transition: [
|
||||
`color ${motionDurationFast}`,
|
||||
@ -326,13 +327,13 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
'&:not(:first-child)': {
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
insetBlockStart: -controlLineWidth,
|
||||
insetInlineStart: -controlLineWidth,
|
||||
insetBlockStart: -lineWidth,
|
||||
insetInlineStart: -lineWidth,
|
||||
display: 'block',
|
||||
boxSizing: 'content-box',
|
||||
width: 1,
|
||||
height: '100%',
|
||||
paddingBlock: controlLineWidth,
|
||||
paddingBlock: lineWidth,
|
||||
paddingInline: 0,
|
||||
backgroundColor: colorBorder,
|
||||
transition: `background-color ${motionDurationSlow}`,
|
||||
@ -341,50 +342,50 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
},
|
||||
|
||||
'&:first-child': {
|
||||
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderStartStartRadius: controlRadius,
|
||||
borderEndStartRadius: controlRadius,
|
||||
borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderEndStartRadius: borderRadius,
|
||||
},
|
||||
|
||||
'&:last-child': {
|
||||
borderStartEndRadius: controlRadius,
|
||||
borderEndEndRadius: controlRadius,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
},
|
||||
|
||||
'&:first-child:last-child': {
|
||||
borderRadius: controlRadius,
|
||||
borderRadius,
|
||||
},
|
||||
|
||||
[`${componentCls}-group-large &`]: {
|
||||
height: controlHeightLG,
|
||||
fontSize: fontSizeLG,
|
||||
lineHeight: `${controlHeightLG - controlLineWidth * 2}px`,
|
||||
lineHeight: `${controlHeightLG - lineWidth * 2}px`,
|
||||
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: controlRadiusLG,
|
||||
borderEndStartRadius: controlRadiusLG,
|
||||
borderStartStartRadius: borderRadiusLG,
|
||||
borderEndStartRadius: borderRadiusLG,
|
||||
},
|
||||
|
||||
'&:last-child': {
|
||||
borderStartEndRadius: controlRadiusLG,
|
||||
borderEndEndRadius: controlRadiusLG,
|
||||
borderStartEndRadius: borderRadiusLG,
|
||||
borderEndEndRadius: borderRadiusLG,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-group-small &`]: {
|
||||
height: controlHeightSM,
|
||||
paddingInline: paddingXS - controlLineWidth,
|
||||
paddingInline: paddingXS - lineWidth,
|
||||
paddingBlock: 0,
|
||||
lineHeight: `${controlHeightSM - controlLineWidth * 2}px`,
|
||||
lineHeight: `${controlHeightSM - lineWidth * 2}px`,
|
||||
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: controlRadiusSM,
|
||||
borderEndStartRadius: controlRadiusSM,
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
borderEndStartRadius: borderRadiusSM,
|
||||
},
|
||||
|
||||
'&:last-child': {
|
||||
borderStartEndRadius: controlRadiusSM,
|
||||
borderEndEndRadius: controlRadiusSM,
|
||||
borderStartEndRadius: borderRadiusSM,
|
||||
borderEndEndRadius: borderRadiusSM,
|
||||
},
|
||||
},
|
||||
|
||||
@ -482,7 +483,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
export default genComponentStyleHook('Radio', token => {
|
||||
const {
|
||||
padding,
|
||||
controlLineWidth,
|
||||
lineWidth,
|
||||
colorBgContainerDisabled,
|
||||
colorTextDisabled,
|
||||
colorBgContainer,
|
||||
@ -507,16 +508,14 @@ export default genComponentStyleHook('Radio', token => {
|
||||
const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2;
|
||||
const dotPadding = 4; // Fixed value
|
||||
const radioDotDisabledSize = radioSize - dotPadding * 2;
|
||||
const radioDotSize = wireframe
|
||||
? radioDotDisabledSize
|
||||
: radioSize - (dotPadding + controlLineWidth) * 2;
|
||||
const radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (dotPadding + lineWidth) * 2;
|
||||
const radioCheckedColor = colorPrimary;
|
||||
|
||||
// Radio buttons
|
||||
const radioButtonColor = colorText;
|
||||
const radioButtonHoverColor = colorPrimaryHover;
|
||||
const radioButtonActiveColor = colorPrimaryActive;
|
||||
const radioButtonPaddingHorizontal = padding - controlLineWidth;
|
||||
const radioButtonPaddingHorizontal = padding - lineWidth;
|
||||
const radioDisabledButtonCheckedColor = colorTextDisabled;
|
||||
const radioWrapperMarginRight = marginXS;
|
||||
|
||||
|
||||
@ -51,7 +51,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
padding: token.segmentedContainerPadding,
|
||||
color: token.labelColor,
|
||||
backgroundColor: token.bgColor,
|
||||
borderRadius: token.controlRadius,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
|
||||
[`${componentCls}-group`]: {
|
||||
@ -83,7 +83,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
|
||||
'&-selected': {
|
||||
...getSegmentedItemSelectedStyle(token),
|
||||
@ -97,7 +97,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
height: '100%',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
},
|
||||
|
||||
@ -134,7 +134,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
|
||||
// size styles
|
||||
'&&-lg': {
|
||||
borderRadius: token.controlRadiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
[`${componentCls}-item-label`]: {
|
||||
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
|
||||
lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
|
||||
@ -142,19 +142,19 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
fontSize: token.fontSizeLG,
|
||||
},
|
||||
[`${componentCls}-item-selected`]: {
|
||||
borderRadius: token.controlRadius,
|
||||
borderRadius: token.borderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
'&&-sm': {
|
||||
borderRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
[`${componentCls}-item-label`]: {
|
||||
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
|
||||
lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
|
||||
padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
|
||||
},
|
||||
[`${componentCls}-item-selected`]: {
|
||||
borderRadius: token.controlRadiusXS,
|
||||
borderRadius: token.borderRadiusXS,
|
||||
},
|
||||
},
|
||||
|
||||
@ -172,7 +172,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
width: 0,
|
||||
height: '100%',
|
||||
padding: `${token.paddingXXS}px 0`,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
|
||||
[`& ~ ${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 => {
|
||||
const {
|
||||
lineWidthBold,
|
||||
controlLineWidth,
|
||||
lineWidth,
|
||||
colorTextLabel,
|
||||
colorText,
|
||||
colorFillSecondary,
|
||||
@ -201,8 +201,8 @@ export default genComponentStyleHook('Segmented', token => {
|
||||
} = token;
|
||||
|
||||
const segmentedToken = mergeToken<SegmentedToken>(token, {
|
||||
segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
|
||||
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
|
||||
segmentedPaddingHorizontal: token.controlPaddingHorizontal - lineWidth,
|
||||
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - lineWidth,
|
||||
segmentedContainerPadding: lineWidthBold,
|
||||
labelColor: colorTextLabel,
|
||||
labelColorHover: colorText,
|
||||
|
||||
@ -52,7 +52,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
fontVariant: 'initial',
|
||||
backgroundColor: token.colorBgElevated,
|
||||
borderRadius: token.controlRadiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
|
||||
@ -96,7 +96,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
|
||||
...genItemStyle(token),
|
||||
cursor: 'pointer',
|
||||
transition: `background ${token.motionDurationSlow} ease`,
|
||||
borderRadius: token.radiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
|
||||
// =========== Group ============
|
||||
'&-group': {
|
||||
|
||||
@ -23,7 +23,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
return {
|
||||
position: 'relative',
|
||||
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}`,
|
||||
|
||||
input: {
|
||||
|
||||
@ -8,7 +8,7 @@ const FIXED_ITEM_MARGIN = 2;
|
||||
function getSelectItemStyle({
|
||||
controlHeightSM,
|
||||
controlHeight,
|
||||
controlLineWidth: borderWidth,
|
||||
lineWidth: borderWidth,
|
||||
}: SelectToken) {
|
||||
const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
|
||||
const selectItemMargin = Math.ceil(selectItemDist / 2);
|
||||
@ -56,7 +56,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
alignItems: 'center',
|
||||
// Multiple is little different that horizontal is follow the vertical
|
||||
padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,
|
||||
borderRadius: token.controlRadius,
|
||||
borderRadius: token.borderRadius,
|
||||
|
||||
[`${componentCls}-show-search&`]: {
|
||||
cursor: 'text',
|
||||
@ -93,10 +93,10 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
height: selectItemHeight,
|
||||
marginTop: FIXED_ITEM_MARGIN,
|
||||
marginBottom: FIXED_ITEM_MARGIN,
|
||||
lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
|
||||
lineHeight: `${selectItemHeight - token.lineWidth * 2}px`,
|
||||
background: token.colorFillSecondary,
|
||||
border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
border: `${token.lineWidth}px solid ${token.colorSplit}`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
cursor: 'default',
|
||||
transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
|
||||
userSelect: 'none',
|
||||
@ -197,8 +197,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
|
||||
const smallToken = mergeToken<SelectToken>(token, {
|
||||
controlHeight: token.controlHeightSM,
|
||||
controlHeightSM: token.controlHeightXS,
|
||||
controlRadius: token.controlRadiusSM,
|
||||
controlRadiusSM: token.controlRadiusXS,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
borderRadiusSM: token.borderRadiusXS,
|
||||
});
|
||||
const [, smSelectItemMargin] = getSelectItemStyle(token);
|
||||
|
||||
@ -212,7 +212,7 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
|
||||
{
|
||||
[`${componentCls}-multiple${componentCls}-sm`]: {
|
||||
[`${componentCls}-selection-placeholder`]: {
|
||||
insetInlineStart: token.controlPaddingHorizontalSM - token.controlLineWidth,
|
||||
insetInlineStart: token.controlPaddingHorizontalSM - token.lineWidth,
|
||||
insetInlineEnd: 'auto',
|
||||
},
|
||||
|
||||
@ -230,8 +230,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
|
||||
fontSize: token.fontSizeLG,
|
||||
controlHeight: token.controlHeightLG,
|
||||
controlHeightSM: token.controlHeight,
|
||||
controlRadius: token.controlRadiusLG,
|
||||
controlRadiusSM: token.controlRadius,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
borderRadiusSM: token.borderRadius,
|
||||
}),
|
||||
'lg',
|
||||
),
|
||||
|
||||
@ -4,9 +4,9 @@ import type { SelectToken } from '.';
|
||||
import { mergeToken } from '../../theme';
|
||||
|
||||
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);
|
||||
|
||||
@ -21,7 +21,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
...resetComponent(token),
|
||||
|
||||
display: 'flex',
|
||||
borderRadius: controlRadius,
|
||||
borderRadius,
|
||||
|
||||
[`${componentCls}-selection-search`]: {
|
||||
position: 'absolute',
|
||||
@ -135,7 +135,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
export default function genSingleStyle(token: SelectToken): CSSInterpolation {
|
||||
const { componentCls } = token;
|
||||
|
||||
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.controlLineWidth;
|
||||
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.lineWidth;
|
||||
|
||||
return [
|
||||
genSizeStyle(token),
|
||||
@ -145,7 +145,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
|
||||
genSizeStyle(
|
||||
mergeToken<any>(token, {
|
||||
controlHeight: token.controlHeightSM,
|
||||
controlRadius: token.controlRadiusSM,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
}),
|
||||
'sm',
|
||||
),
|
||||
@ -185,7 +185,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
|
||||
mergeToken<any>(token, {
|
||||
controlHeight: token.controlHeightLG,
|
||||
fontSize: token.fontSizeLG,
|
||||
controlRadius: token.controlRadiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
}),
|
||||
'lg',
|
||||
),
|
||||
|
||||
@ -171,14 +171,20 @@ const genSkeletonElementButtonSize = (size: number): CSSObject => ({
|
||||
});
|
||||
|
||||
const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
|
||||
const { radiusSM, skeletonButtonCls, controlHeight, controlHeightLG, controlHeightSM, color } =
|
||||
token;
|
||||
const {
|
||||
borderRadiusSM,
|
||||
skeletonButtonCls,
|
||||
controlHeight,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
color,
|
||||
} = token;
|
||||
return {
|
||||
[`${skeletonButtonCls}`]: {
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'top',
|
||||
background: color,
|
||||
borderRadius: radiusSM,
|
||||
borderRadius: borderRadiusSM,
|
||||
width: controlHeight * 2,
|
||||
minWidth: controlHeight * 2,
|
||||
...genSkeletonElementButtonSize(controlHeight),
|
||||
@ -353,7 +359,7 @@ export default genComponentStyleHook(
|
||||
skeletonImageCls: `${componentCls}-image`,
|
||||
imageSizeBase: token.controlHeight * 1.5,
|
||||
skeletonTitleHeight: token.controlHeight / 2,
|
||||
skeletonBlockRadius: token.radiusSM,
|
||||
skeletonBlockRadius: token.borderRadiusSM,
|
||||
skeletonParagraphLineHeight: token.controlHeight / 2,
|
||||
skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
|
||||
borderRadius: 100, // Large number to make capsule shape
|
||||
|
||||
@ -57,14 +57,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
[`${componentCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.colorFillTertiary,
|
||||
borderRadius: token.controlRadiusXS,
|
||||
borderRadius: token.borderRadiusXS,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-track`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.colorPrimaryBorder,
|
||||
borderRadius: token.controlRadiusXS,
|
||||
borderRadius: token.borderRadiusXS,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
},
|
||||
|
||||
|
||||
@ -148,7 +148,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
lineHeight: `${token.stepsIconSize}px`,
|
||||
textAlign: 'center',
|
||||
borderRadius: token.stepsIconSize,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
|
||||
[`${componentCls}-icon`]: {
|
||||
position: 'relative',
|
||||
@ -159,7 +159,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
[`${stepsItemCls}-tail`]: {
|
||||
position: 'absolute',
|
||||
top: token.stepsIconSize / 2 - token.lineWidth,
|
||||
top: token.stepsIconSize / 2 - token.paddingXXS,
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
|
||||
@ -197,11 +197,11 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
marginInlineStart: token.marginXS,
|
||||
color: token.colorTextDescription,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
[`${stepsItemCls}-description`]: {
|
||||
color: token.colorTextDescription,
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.process, token),
|
||||
|
||||
@ -106,7 +106,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
|
||||
[`&${componentCls}-navigation${componentCls}-vertical`]: {
|
||||
[`> ${componentCls}-item`]: {
|
||||
marginInlineEnd: '0 !important',
|
||||
marginInlineEnd: 0,
|
||||
|
||||
'&::before': {
|
||||
display: 'none',
|
||||
|
||||
@ -9,12 +9,13 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
[`&${componentCls}-with-progress`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
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}-item:first-child`]: {
|
||||
paddingBottom: token.paddingXXS,
|
||||
|
||||
@ -8,7 +8,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
stepsSmallIconSize,
|
||||
// stepsSmallIconMargin,
|
||||
fontSizeSM,
|
||||
fontSizeBase,
|
||||
fontSize,
|
||||
colorTextDescription,
|
||||
} = token;
|
||||
|
||||
@ -35,7 +35,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
paddingInlineEnd: token.paddingSM,
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
|
||||
'&::after': {
|
||||
@ -44,10 +44,10 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
[`${componentCls}-item-description`]: {
|
||||
color: colorTextDescription,
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
},
|
||||
[`${componentCls}-item-tail`]: {
|
||||
top: stepsSmallIconSize / 2 - token.lineWidth,
|
||||
top: stepsSmallIconSize / 2 - token.paddingXXS,
|
||||
},
|
||||
[`${componentCls}-item-custom ${componentCls}-item-icon`]: {
|
||||
width: 'inherit',
|
||||
|
||||
@ -6,7 +6,7 @@ function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
|
||||
return {
|
||||
// border collapse
|
||||
'&-item:not(&-last-item)': {
|
||||
marginBottom: -token.controlLineWidth,
|
||||
marginBottom: -token.lineWidth,
|
||||
},
|
||||
|
||||
'&-item': {
|
||||
|
||||
@ -11,7 +11,7 @@ function compactItemBorder(
|
||||
const childCombinator = borderedItemCls ? '> *' : '';
|
||||
return {
|
||||
'&-item:not(&-last-item)': {
|
||||
marginInlineEnd: -token.controlLineWidth,
|
||||
marginInlineEnd: -token.lineWidth,
|
||||
},
|
||||
|
||||
'&-item': {
|
||||
|
||||
@ -12,12 +12,12 @@ export const MAX_VERTICAL_CONTENT_RADIUS = 8;
|
||||
export function getArrowOffset(options: {
|
||||
sizePopupArrow: number;
|
||||
contentRadius: number;
|
||||
radiusOuter: number;
|
||||
borderRadiusOuter: number;
|
||||
limitVerticalRadius?: boolean;
|
||||
}) {
|
||||
const maxVerticalContentRadius = MAX_VERTICAL_CONTENT_RADIUS;
|
||||
const { sizePopupArrow, contentRadius, radiusOuter, limitVerticalRadius } = options;
|
||||
const arrowInnerOffset = sizePopupArrow / 2 - Math.ceil(radiusOuter * (Math.sqrt(2) - 1));
|
||||
const { sizePopupArrow, contentRadius, borderRadiusOuter, limitVerticalRadius } = options;
|
||||
const arrowInnerOffset = sizePopupArrow / 2 - Math.ceil(borderRadiusOuter * (Math.sqrt(2) - 1));
|
||||
const dropdownArrowOffset = (contentRadius > 12 ? contentRadius + 2 : 12) - arrowInnerOffset;
|
||||
const dropdownArrowOffsetVertical = limitVerticalRadius
|
||||
? maxVerticalContentRadius - arrowInnerOffset
|
||||
@ -34,15 +34,26 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
|
||||
limitVerticalRadius?: boolean;
|
||||
},
|
||||
): CSSInterpolation {
|
||||
const { componentCls, sizePopupArrow, marginXXS, radiusXS, radiusOuter, boxShadowPopoverArrow } =
|
||||
token;
|
||||
const {
|
||||
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({
|
||||
sizePopupArrow,
|
||||
contentRadius,
|
||||
radiusOuter,
|
||||
borderRadiusOuter,
|
||||
limitVerticalRadius,
|
||||
});
|
||||
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
|
||||
display: 'block',
|
||||
|
||||
...roundedArrow(sizePopupArrow, radiusXS, radiusOuter, colorBg, boxShadowPopoverArrow),
|
||||
...roundedArrow(
|
||||
sizePopupArrow,
|
||||
borderRadiusXS,
|
||||
borderRadiusOuter,
|
||||
colorBg,
|
||||
boxShadowPopoverArrow,
|
||||
),
|
||||
|
||||
'&:before': {
|
||||
background: colorBg,
|
||||
|
||||
@ -145,7 +145,7 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
backgroundColor: token.switchBg,
|
||||
backgroundColor: token.colorWhite,
|
||||
borderRadius: token.switchPinSize / 2,
|
||||
boxShadow: token.switchHandleShadow,
|
||||
transition: `all ${token.switchDuration} ease-in-out`,
|
||||
|
||||
@ -4,7 +4,7 @@ import type { TableToken } from './index';
|
||||
|
||||
const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`;
|
||||
const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
|
||||
|
||||
const getSizeBorderStyle = (
|
||||
size: 'small' | 'middle',
|
||||
@ -16,7 +16,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
[`> ${componentCls}-content, > ${componentCls}-body`]: {
|
||||
'> table > tbody > tr > td': {
|
||||
[`> ${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': {
|
||||
[`> ${componentCls}-expanded-row-fixed`]: {
|
||||
margin: `-${token.tablePaddingVertical}px -${
|
||||
token.tablePaddingHorizontal + token.controlLineWidth
|
||||
token.tablePaddingHorizontal + token.lineWidth
|
||||
}px`,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: token.controlLineWidth,
|
||||
insetInlineEnd: token.lineWidth,
|
||||
bottom: 0,
|
||||
borderInlineEnd: tableBorder,
|
||||
content: '""',
|
||||
@ -149,7 +149,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
// https://github.com/ant-design/ant-design/issues/35577
|
||||
'&-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}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -9,27 +9,26 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
antCls,
|
||||
controlInteractiveSize: checkboxSize,
|
||||
motionDurationSlow,
|
||||
controlLineWidth,
|
||||
lineWidth,
|
||||
paddingXS,
|
||||
controlLineType,
|
||||
lineType,
|
||||
tableBorderColor,
|
||||
tableExpandIconBg,
|
||||
tableExpandColumnWidth,
|
||||
radiusBase,
|
||||
borderRadius,
|
||||
fontSize,
|
||||
fontSizeSM,
|
||||
lineHeight,
|
||||
lineWidth,
|
||||
tablePaddingVertical,
|
||||
tablePaddingHorizontal,
|
||||
tableExpandedRowBg,
|
||||
paddingXXS,
|
||||
} = token;
|
||||
const halfInnerSize = checkboxSize / 2 - controlLineWidth;
|
||||
const halfInnerSize = checkboxSize / 2 - lineWidth;
|
||||
// must be odd number, unless it cannot align center
|
||||
const expandIconSize = halfInnerSize * 2 + controlLineWidth * 3;
|
||||
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
|
||||
const expandIconLineOffset = paddingXXS - controlLineWidth;
|
||||
const expandIconSize = halfInnerSize * 2 + lineWidth * 3;
|
||||
const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
|
||||
const expandIconLineOffset = paddingXXS - lineWidth;
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
@ -63,7 +62,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
lineHeight: `${expandIconSize}px`,
|
||||
background: tableExpandIconBg,
|
||||
border: tableBorder,
|
||||
borderRadius: radiusBase,
|
||||
borderRadius,
|
||||
transform: `scale(${checkboxSize / expandIconSize})`,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
userSelect: 'none',
|
||||
@ -83,14 +82,14 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
top: halfInnerSize,
|
||||
insetInlineEnd: expandIconLineOffset,
|
||||
insetInlineStart: expandIconLineOffset,
|
||||
height: controlLineWidth,
|
||||
height: lineWidth,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
top: expandIconLineOffset,
|
||||
bottom: expandIconLineOffset,
|
||||
insetInlineStart: halfInnerSize,
|
||||
width: controlLineWidth,
|
||||
width: lineWidth,
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
|
||||
|
||||
@ -11,15 +11,14 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
|
||||
tableFilterDropdownSearchWidth,
|
||||
paddingXXS,
|
||||
paddingXS,
|
||||
lineWidth,
|
||||
colorText,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
lineWidth,
|
||||
lineType,
|
||||
tableBorderColor,
|
||||
tableHeaderIconColor,
|
||||
fontSizeSM,
|
||||
tablePaddingHorizontal,
|
||||
radiusBase,
|
||||
borderRadius,
|
||||
motionDurationSlow,
|
||||
colorTextDescription,
|
||||
colorPrimary,
|
||||
@ -34,7 +33,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
|
||||
const dropdownPrefixCls = `${antCls}-dropdown`;
|
||||
const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`;
|
||||
const treePrefixCls = `${antCls}-tree`;
|
||||
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
|
||||
const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
|
||||
|
||||
return [
|
||||
{
|
||||
@ -53,7 +52,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
|
||||
padding: `0 ${paddingXXS}px`,
|
||||
color: tableHeaderIconColor,
|
||||
fontSize: fontSizeSM,
|
||||
borderRadius: radiusBase,
|
||||
borderRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
@ -76,7 +75,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
|
||||
|
||||
minWidth: tableFilterDropdownWidth,
|
||||
backgroundColor: tableFilterDropdownBg,
|
||||
borderRadius: radiusBase,
|
||||
borderRadius,
|
||||
boxShadow,
|
||||
|
||||
// Reset menu
|
||||
|
||||
@ -75,8 +75,8 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
fontWeightStrong,
|
||||
tablePaddingVertical,
|
||||
tablePaddingHorizontal,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
lineWidth,
|
||||
lineType,
|
||||
tableBorderColor,
|
||||
tableFontSize,
|
||||
tableBg,
|
||||
@ -93,7 +93,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
paddingContentVerticalLG,
|
||||
wireframe,
|
||||
} = token;
|
||||
const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
|
||||
const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
clear: 'both',
|
||||
@ -283,7 +283,7 @@ export default genComponentStyleHook('Table', token => {
|
||||
opacityLoading,
|
||||
colorBgContainer,
|
||||
colorFillSecondary,
|
||||
radiusLG,
|
||||
borderRadiusLG,
|
||||
colorFillContent,
|
||||
controlInteractiveSize: checkboxSize,
|
||||
} = token;
|
||||
@ -301,7 +301,7 @@ export default genComponentStyleHook('Table', token => {
|
||||
const tableToken = mergeToken<TableToken>(token, {
|
||||
tableFontSize: fontSize,
|
||||
tableBg: colorBgContainer,
|
||||
tableRadius: radiusLG,
|
||||
tableRadius: borderRadiusLG,
|
||||
|
||||
tablePaddingVertical: padding,
|
||||
tablePaddingHorizontal: padding,
|
||||
|
||||
@ -12,7 +12,7 @@ const genStickyStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
tableScrollBg,
|
||||
zIndexTableSticky,
|
||||
} = token;
|
||||
const tableBorder = `${token.controlLineWidth}px ${token.controlLineType} ${token.tableBorderColor}`;
|
||||
const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-sticky`]: {
|
||||
|
||||
@ -3,8 +3,8 @@ import type { GenerateStyle } from '../../theme';
|
||||
import type { TableToken } from './index';
|
||||
|
||||
const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
const { componentCls, controlLineWidth, tableBorderColor } = token;
|
||||
const tableBorder = `${controlLineWidth}px ${token.controlLineType} ${tableBorderColor}`;
|
||||
const { componentCls, lineWidth, tableBorderColor } = token;
|
||||
const tableBorder = `${lineWidth}px ${token.lineType} ${tableBorderColor}`;
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
[`${componentCls}-summary`]: {
|
||||
@ -20,7 +20,7 @@ const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`div${componentCls}-summary`]: {
|
||||
boxShadow: `0 -${controlLineWidth}px 0 ${tableBorderColor}`,
|
||||
boxShadow: `0 -${lineWidth}px 0 ${tableBorderColor}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -38,7 +38,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
|
||||
margin: 0,
|
||||
padding: tabsCardHorizontalPadding,
|
||||
background: tabsCardHeadBackground,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorSplit}`,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
},
|
||||
|
||||
@ -67,7 +67,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
|
||||
[`&${componentCls}-top`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
|
||||
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-active`]: {
|
||||
@ -79,7 +79,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
|
||||
[`&${componentCls}-bottom`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: `0 0 ${token.radiusLG}px ${token.radiusLG}px`,
|
||||
borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-active`]: {
|
||||
@ -102,7 +102,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_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`]: {
|
||||
borderRadius: {
|
||||
_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',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
backgroundClip: 'padding-box',
|
||||
borderRadius: token.radiusLG,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadow,
|
||||
|
||||
@ -245,7 +245,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${colorSplit}`,
|
||||
borderBottom: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
|
||||
content: "''",
|
||||
},
|
||||
|
||||
@ -404,11 +404,11 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
|
||||
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: `-${token.controlLineWidth}px`,
|
||||
value: `-${token.lineWidth}px`,
|
||||
},
|
||||
borderLeft: {
|
||||
_skip_check_: true,
|
||||
value: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
value: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
|
||||
@ -436,11 +436,11 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
|
||||
order: 0,
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: -token.controlLineWidth,
|
||||
value: -token.lineWidth,
|
||||
},
|
||||
borderRight: {
|
||||
_skip_check_: true,
|
||||
value: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
value: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
|
||||
@ -462,7 +462,7 @@ const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
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}-nav ${componentCls}-tab`]: {
|
||||
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
|
||||
borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-top`]: {
|
||||
[`> ${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}-nav ${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_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`]: {
|
||||
borderRadius: {
|
||||
_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',
|
||||
alignItems: 'center',
|
||||
padding: `${token.paddingSM}px 0`,
|
||||
fontSize: `${token.fontSizeBase}px`,
|
||||
fontSize: `${token.fontSize}px`,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
outline: 'none',
|
||||
@ -798,8 +798,8 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
|
||||
},
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
background: 'transparent',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorSplit}`,
|
||||
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`,
|
||||
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
@ -873,8 +873,7 @@ export default genComponentStyleHook(
|
||||
tabsActiveColor: token.colorPrimaryActive,
|
||||
|
||||
tabsCardHorizontalPadding: `${
|
||||
(tabsCardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 -
|
||||
token.controlLineWidth
|
||||
(tabsCardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 - token.lineWidth
|
||||
}px ${token.padding}px`,
|
||||
tabsCardHeight,
|
||||
tabsCardGutter: token.marginXXS / 2,
|
||||
|
||||
@ -58,9 +58,9 @@ const genTagColorStyle = (token: TagToken): CSSInterpolation =>
|
||||
}, {} as CSSObject);
|
||||
|
||||
const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
const { paddingXXS, controlLineWidth, tagPaddingHorizontal } = token;
|
||||
const paddingInline = tagPaddingHorizontal - controlLineWidth;
|
||||
const iconMarginInline = paddingXXS - controlLineWidth;
|
||||
const { paddingXXS, lineWidth, tagPaddingHorizontal } = token;
|
||||
const paddingInline = tagPaddingHorizontal - lineWidth;
|
||||
const iconMarginInline = paddingXXS - lineWidth;
|
||||
|
||||
return {
|
||||
// Result
|
||||
@ -74,8 +74,8 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
lineHeight: `${token.tagLineHeight}px`,
|
||||
whiteSpace: 'nowrap',
|
||||
background: token.tagDefaultBg,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.radiusSM,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
opacity: 1,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
textAlign: 'start',
|
||||
@ -149,11 +149,11 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tag', token => {
|
||||
const { fontSize, lineHeight, controlLineWidth, fontSizeIcon } = token;
|
||||
const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token;
|
||||
const tagHeight = Math.round(fontSize * lineHeight);
|
||||
|
||||
const tagFontSize = token.fontSizeSM;
|
||||
const tagLineHeight = tagHeight - controlLineWidth * 2;
|
||||
const tagLineHeight = tagHeight - lineWidth * 2;
|
||||
const tagDefaultBg = token.colorFillAlter;
|
||||
const tagDefaultColor = token.colorText;
|
||||
|
||||
@ -162,7 +162,7 @@ export default genComponentStyleHook('Tag', token => {
|
||||
tagLineHeight,
|
||||
tagDefaultBg,
|
||||
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.
|
||||
});
|
||||
|
||||
|
||||
@ -50,18 +50,90 @@ describe('Theme', () => {
|
||||
|
||||
describe('radius should be computed as expected', () => {
|
||||
const radiusGroup = {
|
||||
0: { radiusBase: 0, radiusLG: 0, radiusSM: 0, radiusXS: 0, radiusOuter: 0 },
|
||||
2: { radiusBase: 2, radiusLG: 2, radiusSM: 2, radiusXS: 1, radiusOuter: 2 },
|
||||
4: { radiusBase: 4, radiusLG: 4, radiusSM: 4, radiusXS: 1, radiusOuter: 4 },
|
||||
5: { radiusBase: 5, radiusLG: 6, radiusSM: 4, radiusXS: 1, radiusOuter: 4 },
|
||||
6: { radiusBase: 6, radiusLG: 8, radiusSM: 4, radiusXS: 2, radiusOuter: 4 },
|
||||
7: { radiusBase: 7, radiusLG: 9, radiusSM: 5, radiusXS: 2, radiusOuter: 4 },
|
||||
8: { radiusBase: 8, radiusLG: 10, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
|
||||
10: { radiusBase: 10, radiusLG: 12, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
|
||||
12: { radiusBase: 12, radiusLG: 14, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
|
||||
14: { radiusBase: 14, radiusLG: 16, radiusSM: 7, radiusXS: 2, radiusOuter: 6 },
|
||||
16: { radiusBase: 16, radiusLG: 16, radiusSM: 8, radiusXS: 2, radiusOuter: 6 },
|
||||
20: { radiusBase: 16, radiusLG: 16, radiusSM: 8, radiusXS: 2, radiusOuter: 6 },
|
||||
0: {
|
||||
borderRadius: 0,
|
||||
borderRadiusLG: 0,
|
||||
borderRadiusSM: 0,
|
||||
borderRadiusXS: 0,
|
||||
borderRadiusOuter: 0,
|
||||
},
|
||||
2: {
|
||||
borderRadius: 2,
|
||||
borderRadiusLG: 2,
|
||||
borderRadiusSM: 2,
|
||||
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]) => {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { useToken as useInternalToken, defaultConfig } from '.';
|
||||
import { defaultConfig, useToken as useInternalToken } from '.';
|
||||
import defaultAlgorithm from './themes/default';
|
||||
import darkAlgorithm from './themes/dark';
|
||||
import compactAlgorithm from './themes/compact';
|
||||
import { defaultAlgorithmV4, darkAlgorithmV4 } from './themes/v4';
|
||||
|
||||
// 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.
|
||||
@ -22,7 +21,5 @@ export default {
|
||||
useToken,
|
||||
defaultAlgorithm,
|
||||
darkAlgorithm,
|
||||
defaultAlgorithmV4,
|
||||
darkAlgorithmV4,
|
||||
compactAlgorithm,
|
||||
};
|
||||
|
||||
@ -154,13 +154,12 @@ export interface SeedToken extends PresetColorType {
|
||||
colorError: string;
|
||||
colorInfo: string;
|
||||
colorTextBase: string;
|
||||
colorTextLightSolid: string;
|
||||
/** Base component background color. Will derivative container background color with this */
|
||||
colorBgBase: string;
|
||||
|
||||
// Font
|
||||
fontFamily: string;
|
||||
fontSizeBase: number;
|
||||
fontSize: number;
|
||||
|
||||
// Line
|
||||
/** Border width of base components */
|
||||
@ -179,11 +178,11 @@ export interface SeedToken extends PresetColorType {
|
||||
motionEaseOut: string;
|
||||
|
||||
// Radius
|
||||
radiusBase: number;
|
||||
borderRadius: number;
|
||||
|
||||
// Size
|
||||
sizeUnit: number;
|
||||
sizeBaseStep: number;
|
||||
sizeStep: number;
|
||||
sizePopupArrow: number;
|
||||
|
||||
// Control Base
|
||||
@ -293,6 +292,7 @@ export interface ColorMapToken extends NeutralColorMapToken {
|
||||
colorInfoTextActive: string; // 10
|
||||
|
||||
colorBgMask: string;
|
||||
colorWhite: string;
|
||||
}
|
||||
|
||||
export interface SizeMapToken {
|
||||
@ -301,7 +301,7 @@ export interface SizeMapToken {
|
||||
sizeXL: number;
|
||||
sizeLG: 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;
|
||||
size: number;
|
||||
sizeSM: number;
|
||||
@ -309,6 +309,14 @@ export interface SizeMapToken {
|
||||
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 {
|
||||
// Font
|
||||
fontSizes: number[];
|
||||
@ -323,16 +331,10 @@ export interface CommonMapToken {
|
||||
motionDurationSlow: string;
|
||||
|
||||
// Radius
|
||||
radiusXS: number;
|
||||
radiusSM: number;
|
||||
radiusLG: number;
|
||||
radiusOuter: number;
|
||||
|
||||
// Control
|
||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||
controlHeightXS: number;
|
||||
controlHeightSM: number;
|
||||
controlHeightLG: number;
|
||||
borderRadiusXS: number;
|
||||
borderRadiusSM: number;
|
||||
borderRadiusLG: number;
|
||||
borderRadiusOuter: number;
|
||||
}
|
||||
|
||||
// ======================================================================
|
||||
@ -344,6 +346,7 @@ export interface MapToken
|
||||
ColorPalettes,
|
||||
ColorMapToken,
|
||||
SizeMapToken,
|
||||
HeightMapToken,
|
||||
CommonMapToken {}
|
||||
|
||||
// ======================================================================
|
||||
@ -367,6 +370,7 @@ export interface AliasToken extends MapToken {
|
||||
colorTextHeading: string;
|
||||
colorTextLabel: string;
|
||||
colorTextDescription: string;
|
||||
colorTextLightSolid: string;
|
||||
colorBgTextHover: string;
|
||||
colorBgTextActive: string;
|
||||
|
||||
@ -414,12 +418,6 @@ export interface AliasToken extends MapToken {
|
||||
lineHeightHeading5: number;
|
||||
|
||||
// Control
|
||||
controlLineWidth: number;
|
||||
controlLineType: string;
|
||||
controlRadius: number;
|
||||
controlRadiusXS: number;
|
||||
controlRadiusSM: number;
|
||||
controlRadiusLG: number;
|
||||
controlOutlineWidth: number;
|
||||
controlItemBgHover: string; // Note. It also is a color
|
||||
controlItemBgActive: string; // Note. It also is a color
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { NeutralColorMapToken } from 'antd/es/theme/interface';
|
||||
import type { NeutralColorMapToken } from '../interface';
|
||||
|
||||
export interface ColorMap {
|
||||
1: string;
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
import type { SeedToken, SizeMapToken } from '../../interface';
|
||||
|
||||
export default function genSizeMapToken(token: SeedToken): SizeMapToken {
|
||||
const { sizeUnit, sizeBaseStep } = token;
|
||||
const { sizeUnit, sizeStep } = token;
|
||||
|
||||
const compactSizeStep = sizeStep - 2;
|
||||
|
||||
return {
|
||||
sizeXXL: sizeUnit * (sizeBaseStep + 10),
|
||||
sizeXL: sizeUnit * (sizeBaseStep + 6),
|
||||
sizeLG: sizeUnit * (sizeBaseStep + 2),
|
||||
sizeMD: sizeUnit * (sizeBaseStep + 2),
|
||||
sizeMS: sizeUnit * (sizeBaseStep + 1),
|
||||
size: sizeUnit * sizeBaseStep,
|
||||
sizeSM: sizeUnit * sizeBaseStep,
|
||||
sizeXS: sizeUnit * (sizeBaseStep - 1),
|
||||
sizeXXS: sizeUnit * (sizeBaseStep - 1),
|
||||
sizeXXL: sizeUnit * (compactSizeStep + 10),
|
||||
sizeXL: sizeUnit * (compactSizeStep + 6),
|
||||
sizeLG: sizeUnit * (compactSizeStep + 2),
|
||||
sizeMD: sizeUnit * (compactSizeStep + 2),
|
||||
sizeMS: sizeUnit * (compactSizeStep + 1),
|
||||
size: sizeUnit * compactSizeStep,
|
||||
sizeSM: sizeUnit * compactSizeStep,
|
||||
sizeXS: sizeUnit * (compactSizeStep - 1),
|
||||
sizeXXS: sizeUnit * (compactSizeStep - 1),
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
import type { DerivativeFunc } from '@ant-design/cssinjs';
|
||||
import genControlHeight from '../shared/genControlHeight';
|
||||
import type { SeedToken, MapToken } from '../../interface';
|
||||
import defaultAlgorithm from '../default';
|
||||
import genCompactSizeMapToken from './genCompactSizeMapToken';
|
||||
import getFontSizes from '../shared/genFontSizes';
|
||||
|
||||
const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
|
||||
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 {
|
||||
...mergedMapToken,
|
||||
...genCompactSizeMapToken(token),
|
||||
...genCompactSizeMapToken(mapToken ?? token),
|
||||
|
||||
// font
|
||||
fontSizes: fontSizes.map(fs => fs.size),
|
||||
lineHeights: fontSizes.map(fs => fs.lineHeight),
|
||||
|
||||
// controlHeight
|
||||
controlHeight,
|
||||
...genControlHeight({ ...mergedMapToken, controlHeight }),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
|
||||
// Dark tokens
|
||||
...colorPalettes,
|
||||
// Colors
|
||||
...genColorMapToken(token, {
|
||||
...genColorMapToken(mapToken ?? token, {
|
||||
generateColorPalettes,
|
||||
generateNeutralColorPalettes,
|
||||
}),
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { generate } from '@ant-design/colors';
|
||||
import genControlHeight from '../shared/genControlHeight';
|
||||
import genSizeMapToken from '../shared/genSizeMapToken';
|
||||
import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
|
||||
import { defaultPresetColors } from '../seed';
|
||||
@ -34,6 +35,8 @@ export default function derivative(token: SeedToken): MapToken {
|
||||
}),
|
||||
// Size
|
||||
...genSizeMapToken(token),
|
||||
// Height
|
||||
...genControlHeight(token),
|
||||
// Others
|
||||
...genCommonMapToken(token),
|
||||
};
|
||||
|
||||
@ -27,7 +27,6 @@ const seedToken: SeedToken = {
|
||||
colorError: '#f5222d',
|
||||
colorInfo: '#1677ff',
|
||||
colorTextBase: '',
|
||||
colorTextLightSolid: '#fff',
|
||||
|
||||
colorBgBase: '',
|
||||
|
||||
@ -35,7 +34,7 @@ const seedToken: SeedToken = {
|
||||
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji'`,
|
||||
fontSizeBase: 14,
|
||||
fontSize: 14,
|
||||
|
||||
// Line
|
||||
lineWidth: 1,
|
||||
@ -53,11 +52,11 @@ const seedToken: SeedToken = {
|
||||
motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
|
||||
|
||||
// Radius
|
||||
radiusBase: 6,
|
||||
borderRadius: 6,
|
||||
|
||||
// Size
|
||||
sizeUnit: 4,
|
||||
sizeBaseStep: 4,
|
||||
sizeStep: 4,
|
||||
sizePopupArrow: 16,
|
||||
|
||||
// Control Base
|
||||
|
||||
@ -87,5 +87,6 @@ export default function genColorMapToken(
|
||||
colorInfoTextActive: infoColors[10],
|
||||
|
||||
colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
colorWhite: '#fff',
|
||||
};
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@ import genFontSizes from './genFontSizes';
|
||||
import genRadius from './genRadius';
|
||||
|
||||
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 {
|
||||
// motion
|
||||
@ -21,11 +21,6 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken {
|
||||
lineWidthBold: lineWidth + 1,
|
||||
|
||||
// radius
|
||||
...genRadius(radiusBase),
|
||||
|
||||
// control
|
||||
controlHeightSM: controlHeight * 0.75,
|
||||
controlHeightXS: controlHeight * 0.5,
|
||||
controlHeightLG: controlHeight * 1.25,
|
||||
...genRadius(borderRadius),
|
||||
};
|
||||
}
|
||||
|
||||
13
components/theme/themes/shared/genControlHeight.ts
Normal file
13
components/theme/themes/shared/genControlHeight.ts
Normal 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;
|
||||
@ -2,7 +2,10 @@ import type { MapToken } from '../../interface';
|
||||
|
||||
const genRadius = (
|
||||
radiusBase: number,
|
||||
): Pick<MapToken, 'radiusXS' | 'radiusSM' | 'radiusLG' | 'radiusBase' | 'radiusOuter'> => {
|
||||
): Pick<
|
||||
MapToken,
|
||||
'borderRadiusXS' | 'borderRadiusSM' | 'borderRadiusLG' | 'borderRadius' | 'borderRadiusOuter'
|
||||
> => {
|
||||
let radiusLG = radiusBase;
|
||||
let radiusSM = radiusBase;
|
||||
let radiusXS = radiusBase;
|
||||
@ -45,11 +48,11 @@ const genRadius = (
|
||||
}
|
||||
|
||||
return {
|
||||
radiusBase: radiusBase > 16 ? 16 : radiusBase,
|
||||
radiusXS,
|
||||
radiusSM,
|
||||
radiusLG,
|
||||
radiusOuter,
|
||||
borderRadius: radiusBase > 16 ? 16 : radiusBase,
|
||||
borderRadiusXS: radiusXS,
|
||||
borderRadiusSM: radiusSM,
|
||||
borderRadiusLG: radiusLG,
|
||||
borderRadiusOuter: radiusOuter,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import type { SeedToken, SizeMapToken } from '../../interface';
|
||||
|
||||
export default function genSizeMapToken(token: SeedToken): SizeMapToken {
|
||||
const { sizeUnit, sizeBaseStep } = token;
|
||||
const { sizeUnit, sizeStep } = token;
|
||||
|
||||
return {
|
||||
sizeXXL: sizeUnit * (sizeBaseStep + 8), // 48
|
||||
sizeXL: sizeUnit * (sizeBaseStep + 4), // 32
|
||||
sizeLG: sizeUnit * (sizeBaseStep + 2), // 24
|
||||
sizeMD: sizeUnit * (sizeBaseStep + 1), // 20
|
||||
sizeMS: sizeUnit * sizeBaseStep, // 16
|
||||
size: sizeUnit * sizeBaseStep, // 16
|
||||
sizeSM: sizeUnit * (sizeBaseStep - 1), // 12
|
||||
sizeXS: sizeUnit * (sizeBaseStep - 2), // 8
|
||||
sizeXXS: sizeUnit * (sizeBaseStep - 3), // 4
|
||||
sizeXXL: sizeUnit * (sizeStep + 8), // 48
|
||||
sizeXL: sizeUnit * (sizeStep + 4), // 32
|
||||
sizeLG: sizeUnit * (sizeStep + 2), // 24
|
||||
sizeMD: sizeUnit * (sizeStep + 1), // 20
|
||||
sizeMS: sizeUnit * sizeStep, // 16
|
||||
size: sizeUnit * sizeStep, // 16
|
||||
sizeSM: sizeUnit * (sizeStep - 1), // 12
|
||||
sizeXS: sizeUnit * (sizeStep - 2), // 8
|
||||
sizeXXS: sizeUnit * (sizeStep - 3), // 4
|
||||
};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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(),
|
||||
};
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as defaultAlgorithmV4 } from './default';
|
||||
export { default as darkAlgorithmV4 } from './dark';
|
||||
@ -58,6 +58,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
colorTextHeading: mergedToken.colorText,
|
||||
colorTextLabel: mergedToken.colorTextSecondary,
|
||||
colorTextDescription: mergedToken.colorTextTertiary,
|
||||
colorTextLightSolid: mergedToken.colorWhite,
|
||||
colorHighlight: mergedToken.colorError,
|
||||
colorBgTextHover: mergedToken.colorFillSecondary,
|
||||
colorBgTextActive: mergedToken.colorFill,
|
||||
@ -91,7 +92,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
lineHeightHeading5: lineHeights[2],
|
||||
|
||||
// Control
|
||||
controlLineWidth: mergedToken.lineWidth,
|
||||
lineWidth: mergedToken.lineWidth,
|
||||
controlOutlineWidth: mergedToken.lineWidth * 2,
|
||||
// Checkbox size and expand icon size
|
||||
controlInteractiveSize: mergedToken.controlHeight / 2,
|
||||
@ -103,11 +104,11 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
controlTmpOutline: mergedToken.colorFillQuaternary,
|
||||
controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
|
||||
|
||||
controlLineType: mergedToken.lineType,
|
||||
controlRadius: mergedToken.radiusBase,
|
||||
controlRadiusXS: mergedToken.radiusXS,
|
||||
controlRadiusSM: mergedToken.radiusSM,
|
||||
controlRadiusLG: mergedToken.radiusLG,
|
||||
lineType: mergedToken.lineType,
|
||||
borderRadius: mergedToken.borderRadius,
|
||||
borderRadiusXS: mergedToken.borderRadiusXS,
|
||||
borderRadiusSM: mergedToken.borderRadiusSM,
|
||||
borderRadiusLG: mergedToken.borderRadiusLG,
|
||||
|
||||
fontWeightStrong: 600,
|
||||
|
||||
|
||||
@ -194,8 +194,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = token => {
|
||||
[`${componentCls}-item-label`]: {
|
||||
position: 'absolute',
|
||||
insetBlockStart:
|
||||
-(token.fontSizeBase * token.lineHeight - token.fontSizeBase) +
|
||||
token.timeLineItemTailWidth,
|
||||
-(token.fontSize * token.lineHeight - token.fontSize) + token.timeLineItemTailWidth,
|
||||
width: `calc(50% - ${token.marginSM}px)`,
|
||||
textAlign: 'end',
|
||||
},
|
||||
|
||||
@ -120,7 +120,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
|
||||
// Arrow Style
|
||||
getArrowStyle<TooltipToken>(
|
||||
mergeToken<TooltipToken>(token, {
|
||||
radiusOuter: tooltipRadiusOuter,
|
||||
borderRadiusOuter: tooltipRadiusOuter,
|
||||
}),
|
||||
{
|
||||
colorBg: 'var(--antd-arrow-background-color)',
|
||||
@ -150,15 +150,15 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
return [];
|
||||
}
|
||||
|
||||
const { radiusBase, colorTextLightSolid, colorBgDefault, radiusOuter } = token;
|
||||
const { borderRadius, colorTextLightSolid, colorBgDefault, borderRadiusOuter } = token;
|
||||
|
||||
const TooltipToken = mergeToken<TooltipToken>(token, {
|
||||
// default variables
|
||||
tooltipMaxWidth: 250,
|
||||
tooltipColor: colorTextLightSolid,
|
||||
tooltipBorderRadius: radiusBase,
|
||||
tooltipBorderRadius: borderRadius,
|
||||
tooltipBg: colorBgDefault,
|
||||
tooltipRadiusOuter: radiusOuter > 4 ? 4 : radiusOuter,
|
||||
tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter,
|
||||
});
|
||||
|
||||
return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
|
||||
|
||||
@ -88,7 +88,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
componentCls,
|
||||
colorBorder,
|
||||
colorSplit,
|
||||
controlLineWidth,
|
||||
lineWidth,
|
||||
transferItemHeight,
|
||||
transferHeaderHeight,
|
||||
transferHeaderVerticalPadding,
|
||||
@ -102,7 +102,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
fontSizeIcon,
|
||||
marginXS,
|
||||
paddingSM,
|
||||
controlLineType,
|
||||
lineType,
|
||||
iconCls,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
@ -112,8 +112,8 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
flexDirection: 'column',
|
||||
width: listWidth,
|
||||
height: listHeight,
|
||||
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderRadius: token.controlRadiusLG,
|
||||
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
|
||||
'&-with-pagination': {
|
||||
width: listWidthLG,
|
||||
@ -133,12 +133,12 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
height: transferHeaderHeight,
|
||||
// border-top is on the transfer dom. We should minus 1px for this
|
||||
padding: `${
|
||||
transferHeaderVerticalPadding - controlLineWidth
|
||||
transferHeaderVerticalPadding - lineWidth
|
||||
}px ${paddingSM}px ${transferHeaderVerticalPadding}px`,
|
||||
color: token.colorText,
|
||||
background: token.colorBgContainer,
|
||||
borderBottom: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderRadius: `${token.controlRadiusLG}px ${token.controlRadiusLG}px 0 0`,
|
||||
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
||||
|
||||
'> *:not(:last-child)': {
|
||||
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',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
|
||||
'&-search-wrapper': {
|
||||
position: 'relative',
|
||||
@ -257,7 +257,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
'&-pagination': {
|
||||
padding: `${token.paddingXS}px 0`,
|
||||
textAlign: 'end',
|
||||
borderTop: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
},
|
||||
|
||||
'&-body-not-found': {
|
||||
@ -269,7 +269,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
},
|
||||
|
||||
'&-footer': {
|
||||
borderTop: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
|
||||
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -344,7 +344,7 @@ const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken)
|
||||
export default genComponentStyleHook(
|
||||
'Transfer',
|
||||
token => {
|
||||
const { fontSize, lineHeight, controlLineWidth, controlHeightLG, controlHeight } = token;
|
||||
const { fontSize, lineHeight, lineWidth, controlHeightLG, controlHeight } = token;
|
||||
|
||||
const fontHeight = Math.round(fontSize * lineHeight);
|
||||
const transferHeaderHeight = controlHeightLG;
|
||||
@ -353,9 +353,7 @@ export default genComponentStyleHook(
|
||||
const transferToken = mergeToken<TransferToken>(token, {
|
||||
transferItemHeight,
|
||||
transferHeaderHeight,
|
||||
transferHeaderVerticalPadding: Math.ceil(
|
||||
(transferHeaderHeight - controlLineWidth - fontHeight) / 2,
|
||||
),
|
||||
transferHeaderVerticalPadding: Math.ceil((transferHeaderHeight - lineWidth - fontHeight) / 2),
|
||||
transferItemPaddingVertical: (transferItemHeight - fontHeight) / 2,
|
||||
});
|
||||
|
||||
|
||||
@ -72,7 +72,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
|
||||
[treeCls]: {
|
||||
...resetComponent(token),
|
||||
background: token.colorBgContainer,
|
||||
borderRadius: token.controlRadius,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
|
||||
'&&-rtl': {
|
||||
@ -279,7 +279,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
|
||||
color: 'inherit',
|
||||
lineHeight: `${treeTitleHeight}px`,
|
||||
background: 'transparent',
|
||||
borderRadius: token.controlRadius,
|
||||
borderRadius: token.borderRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}, border 0s, line-height 0s, box-shadow 0s`,
|
||||
|
||||
|
||||
@ -12,8 +12,8 @@ const genDraggerStyle: GenerateStyle<UploadToken> = token => {
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
background: token.colorFillAlter,
|
||||
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadiusLG,
|
||||
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
|
||||
@ -54,7 +54,7 @@ const genDraggerStyle: GenerateStyle<UploadToken> = token => {
|
||||
|
||||
[`p${componentCls}-hint`]: {
|
||||
color: token.colorTextDescription,
|
||||
fontSize: token.fontSizeBase,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
|
||||
// ===================== Disabled =====================
|
||||
|
||||
@ -44,8 +44,8 @@ const genBaseStyle: GenerateStyle<UploadToken> = token => {
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Upload', token => {
|
||||
const { fontSizeHeading3, fontSizeBase, lineHeight, lineWidth, controlHeightLG } = token;
|
||||
const listItemHeightSM = Math.round(fontSizeBase * lineHeight);
|
||||
const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token;
|
||||
const listItemHeightSM = Math.round(fontSize * lineHeight);
|
||||
|
||||
const uploadToken = mergeToken<UploadToken>(token, {
|
||||
uploadThumbnailSize: fontSizeHeading3 * 2,
|
||||
|
||||
@ -3,11 +3,11 @@ import type { GenerateStyle } from '../../theme';
|
||||
import { clearFix, textEllipsis } from '../../style';
|
||||
|
||||
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 actionsCls = `${itemCls}-actions`;
|
||||
const actionCls = `${itemCls}-action`;
|
||||
const listItemHeightSM = Math.round(fontSizeBase * lineHeight);
|
||||
const listItemHeightSM = Math.round(fontSize * lineHeight);
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
@ -17,9 +17,9 @@ const genListStyle: GenerateStyle<UploadToken> = token => {
|
||||
|
||||
[itemCls]: {
|
||||
position: 'relative',
|
||||
height: token.lineHeight * fontSizeBase,
|
||||
height: token.lineHeight * fontSize,
|
||||
marginTop: token.marginXS,
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
@ -70,15 +70,15 @@ const genListStyle: GenerateStyle<UploadToken> = token => {
|
||||
|
||||
[`${componentCls}-icon ${iconCls}`]: {
|
||||
color: token.colorTextDescription,
|
||||
fontSize: fontSizeBase,
|
||||
fontSize,
|
||||
},
|
||||
|
||||
[`${itemCls}-progress`]: {
|
||||
position: 'absolute',
|
||||
bottom: -token.uploadProgressOffset,
|
||||
width: '100%',
|
||||
paddingInlineStart: fontSizeBase + token.paddingXS,
|
||||
fontSize: fontSizeBase,
|
||||
paddingInlineStart: fontSize + token.paddingXS,
|
||||
fontSize,
|
||||
lineHeight: 0,
|
||||
pointerEvents: 'none',
|
||||
|
||||
|
||||
@ -14,10 +14,10 @@ const genPictureStyle: GenerateStyle<UploadToken> = token => {
|
||||
[`${listCls}${listCls}-picture, ${listCls}${listCls}-picture-card`]: {
|
||||
[itemCls]: {
|
||||
position: 'relative',
|
||||
height: uploadThumbnailSize + token.controlLineWidth * 2 + token.paddingXS * 2,
|
||||
height: uploadThumbnailSize + token.lineWidth * 2 + token.paddingXS * 2,
|
||||
padding: token.paddingXS,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadiusLG,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
|
||||
'&:hover': {
|
||||
background: 'transparent',
|
||||
@ -98,8 +98,8 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = token => {
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'top',
|
||||
backgroundColor: token.colorFillAlter,
|
||||
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadiusLG,
|
||||
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
|
||||
|
||||
@ -95,14 +95,6 @@ export default function DynamicTheme({
|
||||
label: 'Dark',
|
||||
value: 'dark',
|
||||
},
|
||||
{
|
||||
label: 'Default-V4',
|
||||
value: 'defaultV4',
|
||||
},
|
||||
{
|
||||
label: 'Dark-V4',
|
||||
value: 'darkV4',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@ -255,10 +255,6 @@ export default class Layout extends React.Component<LayoutPropsType, LayoutState
|
||||
switch (this.state.v5theme) {
|
||||
case 'dark':
|
||||
return antdTheme.darkAlgorithm;
|
||||
case 'defaultV4':
|
||||
return antdTheme.defaultAlgorithmV4;
|
||||
case 'darkV4':
|
||||
return antdTheme.darkAlgorithmV4;
|
||||
case 'default':
|
||||
default:
|
||||
return antdTheme.defaultAlgorithm;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user