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

feat: change transiton to mid duration (#38648)

Browse Source
This commit is contained in:
MadCcc 2022-11-17 23:31:41 +08:00 committed by GitHub
parent 35af9b180b
commit 0162d2e2d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 160 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -178,7 +178,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
const { const {
componentCls, componentCls,
iconCls, iconCls,
motionDurationFast, motionDurationMid,
marginXS, marginXS,
fontSizeIcon, fontSizeIcon,
colorIcon, colorIcon,
@ -204,7 +204,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
[`${iconCls}-close`]: { [`${iconCls}-close`]: {
color: colorIcon, color: colorIcon,
transition: `color ${motionDurationFast}`, transition: `color ${motionDurationMid}`,
'&:hover': { '&:hover': {
color: colorIconHover, color: colorIconHover,
}, },
@ -213,7 +213,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
'&-close-text': { '&-close-text': {
color: colorIcon, color: colorIcon,
transition: `color ${motionDurationFast}`, transition: `color ${motionDurationMid}`,
'&:hover': { '&:hover': {
color: colorIconHover, color: colorIconHover,
}, },
@ -228,7 +228,7 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
genActionStyle(token), genActionStyle(token),
]; ];
export default genComponentStyleHook('Alert', token => { export default genComponentStyleHook('Alert', (token) => {
const { fontSizeHeading3 } = token; const { fontSizeHeading3 } = token;
const alertToken = mergeToken<AlertToken>(token, { const alertToken = mergeToken<AlertToken>(token, {

8
components/back-top/style/index.tsx
View File

@ -50,11 +50,11 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
textAlign: 'center', textAlign: 'center',
backgroundColor: token.backTopBackground, backgroundColor: token.backTopBackground,
borderRadius: backTopSize, borderRadius: backTopSize,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
backgroundColor: token.backTopHoverBackground, backgroundColor: token.backTopHoverBackground,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
}, },
}, },
@ -89,7 +89,7 @@ const genMediaBackTopStyle: GenerateStyle<BackTopToken> = (token): CSSObject =>
export default genComponentStyleHook<'BackTop'>( export default genComponentStyleHook<'BackTop'>(
'BackTop', 'BackTop',
token => { (token) => {
const { const {
fontSizeHeading3, fontSizeHeading3,
colorTextDescription, colorTextDescription,
@ -112,7 +112,7 @@ export default genComponentStyleHook<'BackTop'>(
}); });
return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)]; return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)];
}, },
token => ({ (token) => ({
zIndexPopup: token.zIndexBase + 10, zIndexPopup: token.zIndexBase + 10,
}), }),
); );

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

@ -116,7 +116,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
background: token.badgeColor, background: token.badgeColor,
borderRadius: token.badgeHeight / 2, borderRadius: token.badgeHeight / 2,
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`, boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
transition: `background ${token.motionDurationFast}`, transition: `background ${token.motionDurationMid}`,
a: { a: {
color: token.badgeTextColor, color: token.badgeTextColor,
@ -161,7 +161,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
transformOrigin: '100% 0%', transformOrigin: '100% 0%',
[`${iconCls}-spin`]: { [`${iconCls}-spin`]: {
animationName: antBadgeLoadingCircle, animationName: antBadgeLoadingCircle,
animationDuration: token.motionDurationFast, animationDuration: token.motionDurationMid,
animationIterationCount: 'infinite', animationIterationCount: 'infinite',
animationTimingFunction: 'linear', animationTimingFunction: 'linear',
}, },
@ -323,7 +323,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Badge', token => { export default genComponentStyleHook('Badge', (token) => {
const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token; const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token;
const badgeFontHeight = Math.round(fontSize * lineHeight); const badgeFontHeight = Math.round(fontSize * lineHeight);

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

@ -14,7 +14,7 @@ interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
breadcrumbSeparatorColor: string; breadcrumbSeparatorColor: string;
} }
const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => { const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) => {
const { componentCls, iconCls } = token; const { componentCls, iconCls } = token;
return { return {
@ -37,7 +37,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
a: { a: {
color: token.breadcrumbLinkColor, color: token.breadcrumbLinkColor,
transition: `color ${token.motionDurationFast}`, transition: `color ${token.motionDurationMid}`,
padding: `0 ${token.paddingXXS}px`, padding: `0 ${token.paddingXXS}px`,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
height: token.lineHeight * token.fontSize, height: token.lineHeight * token.fontSize,
@ -107,7 +107,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Breadcrumb', token => { export default genComponentStyleHook('Breadcrumb', (token) => {
const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, { const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
breadcrumbBaseColor: token.colorTextDescription, breadcrumbBaseColor: token.colorTextDescription,
breadcrumbFontSize: token.fontSize, breadcrumbFontSize: token.fontSize,

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

@ -31,7 +31,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
backgroundColor: 'transparent', backgroundColor: 'transparent',
border: `${token.lineWidth}px ${token.lineType} transparent`, border: `${token.lineWidth}px ${token.lineType} transparent`,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
userSelect: 'none', userSelect: 'none',
touchAction: 'manipulation', touchAction: 'manipulation',
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
@ -109,14 +109,14 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject
}); });
// ============================== Shape =============================== // ============================== Shape ===============================
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
minWidth: token.controlHeight, minWidth: token.controlHeight,
paddingInlineStart: 0, paddingInlineStart: 0,
paddingInlineEnd: 0, paddingInlineEnd: 0,
borderRadius: '50%', borderRadius: '50%',
}); });
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
borderRadius: token.controlHeight, borderRadius: token.controlHeight,
paddingInlineStart: token.controlHeight / 2, paddingInlineStart: token.controlHeight / 2,
paddingInlineEnd: token.controlHeight / 2, paddingInlineEnd: token.controlHeight / 2,
@ -158,7 +158,7 @@ const genGhostButtonStyle = (
}, },
}); });
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
'&:disabled': { '&:disabled': {
cursor: 'not-allowed', cursor: 'not-allowed',
borderColor: token.colorBorder, borderColor: token.colorBorder,
@ -168,11 +168,11 @@ const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
}, },
}); });
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidDisabledButtonStyle(token), ...genSolidDisabledButtonStyle(token),
}); });
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
'&:disabled': { '&:disabled': {
cursor: 'not-allowed', cursor: 'not-allowed',
color: token.colorTextDisabled, color: token.colorTextDisabled,
@ -180,7 +180,7 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
}); });
// Type: Default // Type: Default
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidButtonStyle(token), ...genSolidButtonStyle(token),
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
@ -234,7 +234,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
}); });
// Type: Primary // Type: Primary
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidButtonStyle(token), ...genSolidButtonStyle(token),
color: token.colorTextLightSolid, color: token.colorTextLightSolid,
@ -302,14 +302,14 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
}); });
// Type: Dashed // Type: Dashed
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genDefaultButtonStyle(token), ...genDefaultButtonStyle(token),
borderStyle: 'dashed', borderStyle: 'dashed',
}); });
// Type: Link // Type: Link
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.colorLink, color: token.colorLink,
...genHoverActiveButtonStyle( ...genHoverActiveButtonStyle(
@ -340,7 +340,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
}); });
// Type: Text // Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genHoverActiveButtonStyle( ...genHoverActiveButtonStyle(
{ {
color: token.colorText, color: token.colorText,
@ -371,7 +371,7 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
}, },
}); });
const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => { const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -440,9 +440,9 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
]; ];
}; };
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token); const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = (token) => genSizeButtonStyle(token);
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => { const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const smallToken = mergeToken<ButtonToken>(token, { const smallToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightSM, controlHeight: token.controlHeightSM,
padding: token.paddingXS, padding: token.paddingXS,
@ -453,7 +453,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`); return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`);
}; };
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => { const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const largeToken = mergeToken<ButtonToken>(token, { const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightLG, controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
@ -464,7 +464,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Button', token => { export default genComponentStyleHook('Button', (token) => {
const { controlTmpOutline, paddingContentHorizontal } = token; const { controlTmpOutline, paddingContentHorizontal } = token;
const buttonToken = mergeToken<ButtonToken>(token, { const buttonToken = mergeToken<ButtonToken>(token, {

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

@ -96,7 +96,7 @@ const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
${lineWidth}px 0 0 0 ${colorBorderSecondary} inset, ${lineWidth}px 0 0 0 ${colorBorderSecondary} inset,
0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset; 0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset;
`, `,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
'&-hoverable:hover': { '&-hoverable:hover': {
position: 'relative', position: 'relative',
@ -134,7 +134,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
'&:hover': { '&:hover': {
color: token.colorPrimary, color: token.colorPrimary,
transition: `color ${token.motionDurationFast}`, transition: `color ${token.motionDurationMid}`,
}, },
[`a:not(${componentCls}-btn), > ${iconCls}`]: { [`a:not(${componentCls}-btn), > ${iconCls}`]: {
@ -142,7 +142,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
width: '100%', width: '100%',
color: token.colorTextDescription, color: token.colorTextDescription,
lineHeight: `${token.fontSize * token.lineHeight}px`, lineHeight: `${token.fontSize * token.lineHeight}px`,
transition: `color ${token.motionDurationFast}`, transition: `color ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
color: token.colorPrimary, color: token.colorPrimary,
@ -300,7 +300,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
[`${componentCls}-hoverable`]: { [`${componentCls}-hoverable`]: {
cursor: 'pointer', cursor: 'pointer',
transition: `box-shadow ${token.motionDurationFast}, border-color ${token.motionDurationFast}`, transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
borderColor: 'transparent', borderColor: 'transparent',
@ -376,7 +376,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Card', token => { export default genComponentStyleHook('Card', (token) => {
const cardToken = mergeToken<CardToken>(token, { const cardToken = mergeToken<CardToken>(token, {
cardShadow: token.boxShadowCard, cardShadow: token.boxShadowCard,
cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2, cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,

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

@ -13,7 +13,7 @@ export interface ComponentToken {
type CascaderToken = FullToken<'Cascader'>; type CascaderToken = FullToken<'Cascader'>;
// =============================== Base =============================== // =============================== Base ===============================
const genBaseStyle: GenerateStyle<CascaderToken> = token => { const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
const { prefixCls, componentCls, antCls } = token; const { prefixCls, componentCls, antCls } = token;
const cascaderMenuItemCls = `${componentCls}-menu-item`; const cascaderMenuItemCls = `${componentCls}-menu-item`;
const iconCls = ` const iconCls = `
@ -99,7 +99,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
padding: `${itemPaddingVertical}px ${token.paddingSM}px`, padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
'&:hover': { '&:hover': {
@ -156,7 +156,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Cascader', token => [genBaseStyle(token)], { export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], {
controlWidth: 184, controlWidth: 184,
controlItemWidth: 111, controlItemWidth: 111,
dropdownHeight: 180, dropdownHeight: 180,

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

@ -75,7 +75,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
pickerPanelCellHeight, pickerPanelCellHeight,
motionDurationSlow, motionDurationSlow,
borderRadiusSM, borderRadiusSM,
motionDurationFast, motionDurationMid,
controlItemBgHover, controlItemBgHover,
lineWidth, lineWidth,
lineType, lineType,
@ -113,7 +113,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
height: pickerPanelCellHeight, height: pickerPanelCellHeight,
lineHeight: `${pickerPanelCellHeight}px`, lineHeight: `${pickerPanelCellHeight}px`,
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
transition: `background ${motionDurationFast}, border ${motionDurationFast}`, transition: `background ${motionDurationMid}, border ${motionDurationMid}`,
}, },
// >>> Hover // >>> Hover
@ -300,7 +300,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
pickerControlIconBorderWidth, pickerControlIconBorderWidth,
colorIcon, colorIcon,
pickerTextHeight, pickerTextHeight,
motionDurationFast, motionDurationMid,
colorIconHover, colorIconHover,
fontWeightStrong, fontWeightStrong,
pickerPanelCellHeight, pickerPanelCellHeight,
@ -394,7 +394,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
background: 'transparent', background: 'transparent',
border: 0, border: 0,
cursor: 'pointer', cursor: 'pointer',
transition: `color ${motionDurationFast}`, transition: `color ${motionDurationMid}`,
}, },
'> button': { '> button': {
@ -687,7 +687,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
'&-row': { '&-row': {
td: { td: {
transition: `background ${motionDurationFast}`, transition: `background ${motionDurationMid}`,
'&:first-child': { '&:first-child': {
borderStartStartRadius: borderRadiusSM, borderStartStartRadius: borderRadiusSM,
@ -784,7 +784,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
overflowY: 'hidden', overflowY: 'hidden',
textAlign: 'start', textAlign: 'start',
listStyle: 'none', listStyle: 'none',
transition: `background ${motionDurationFast}`, transition: `background ${motionDurationMid}`,
overflowX: 'hidden', overflowX: 'hidden',
'&::after': { '&::after': {
@ -827,7 +827,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
lineHeight: `${pickerTimePanelCellHeight}px`, lineHeight: `${pickerTimePanelCellHeight}px`,
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
cursor: 'pointer', cursor: 'pointer',
transition: `background ${motionDurationFast}`, transition: `background ${motionDurationMid}`,
'&:hover': { '&:hover': {
background: controlItemBgHover, background: controlItemBgHover,
@ -925,7 +925,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
lineType, lineType,
colorBorder, colorBorder,
borderRadius, borderRadius,
motionDurationFast, motionDurationMid,
colorBgContainerDisabled, colorBgContainerDisabled,
colorTextDisabled, colorTextDisabled,
colorTextPlaceholder, colorTextPlaceholder,
@ -970,7 +970,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
background: colorBgContainer, background: colorBgContainer,
border: `${lineWidth}px ${lineType} ${colorBorder}`, border: `${lineWidth}px ${lineType} ${colorBorder}`,
borderRadius, borderRadius,
transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`, transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
// Space.Compact // Space.Compact
...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`), ...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`),
@ -1081,7 +1081,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
cursor: 'pointer', cursor: 'pointer',
opacity: 0, opacity: 0,
transition: `opacity ${motionDurationFast}, color ${motionDurationFast}`, transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
'> *': { '> *': {
verticalAlign: 'top', verticalAlign: 'top',

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

@ -19,7 +19,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
colorBgMask, colorBgMask,
colorBgElevated, colorBgElevated,
motionDurationSlow, motionDurationSlow,
motionDurationFast, motionDurationMid,
padding, padding,
paddingLG, paddingLG,
fontSizeLG, fontSizeLG,
@ -171,7 +171,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
border: 0, border: 0,
outline: 0, outline: 0,
cursor: 'pointer', cursor: 'pointer',
transition: `color ${motionDurationFast}`, transition: `color ${motionDurationMid}`,
textRendering: 'auto', textRendering: 'auto',
'&:focus, &:hover': { '&:focus, &:hover': {
@ -216,7 +216,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook( export default genComponentStyleHook(
'Drawer', 'Drawer',
token => { (token) => {
const drawerToken = mergeToken<DrawerToken>(token, { const drawerToken = mergeToken<DrawerToken>(token, {
drawerFooterPaddingVertical: token.paddingXS, drawerFooterPaddingVertical: token.paddingXS,
drawerFooterPaddingHorizontal: token.padding, drawerFooterPaddingHorizontal: token.padding,
@ -224,7 +224,7 @@ export default genComponentStyleHook(
return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)]; return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
}, },
token => ({ (token) => ({
zIndexPopup: token.zIndexPopupBase, zIndexPopup: token.zIndexPopupBase,
}), }),
); );

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

@ -27,7 +27,7 @@ export interface DropdownToken extends FullToken<'Dropdown'> {
} }
// =============================== Base =============================== // =============================== Base ===============================
const genBaseStyle: GenerateStyle<DropdownToken> = token => { const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
const { const {
componentCls, componentCls,
menuCls, menuCls,
@ -38,7 +38,6 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
antCls, antCls,
iconCls, iconCls,
motionDurationMid, motionDurationMid,
motionDurationFast,
dropdownPaddingVertical, dropdownPaddingVertical,
fontSize, fontSize,
dropdownEdgeChildPadding, dropdownEdgeChildPadding,
@ -273,7 +272,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
[`${menuCls}-item-group-title`]: { [`${menuCls}-item-group-title`]: {
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`, padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
color: token.colorTextDescription, color: token.colorTextDescription,
transition: `all ${motionDurationFast}`, transition: `all ${motionDurationMid}`,
}, },
// ======================= Item Content ======================= // ======================= Item Content =======================
@ -295,7 +294,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
'> a': { '> a': {
color: 'inherit', color: 'inherit',
transition: `all ${motionDurationFast}`, transition: `all ${motionDurationMid}`,
'&:hover': { '&:hover': {
color: 'inherit', color: 'inherit',
@ -319,7 +318,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
fontSize, fontSize,
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${motionDurationFast}`, transition: `all ${motionDurationMid}`,
'&:first-child': !dropdownEdgeChildPadding '&:first-child': !dropdownEdgeChildPadding
? { ? {
@ -460,7 +459,7 @@ export default genComponentStyleHook(
genStatusStyle(dropdownToken), genStatusStyle(dropdownToken),
]; ];
}, },
token => ({ (token) => ({
zIndexPopup: token.zIndexPopupBase + 50, zIndexPopup: token.zIndexPopupBase + 50,
}), }),
); );

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

@ -23,7 +23,7 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
}; };
// ============================== Group ============================== // ============================== Group ==============================
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => { const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
const { componentCls, floatButtonSize, margin, borderRadius, motionDurationSlow } = token; const { componentCls, floatButtonSize, margin, borderRadius, motionDurationSlow } = token;
const groupPrefixCls = `${componentCls}-group`; const groupPrefixCls = `${componentCls}-group`;
const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', { const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
@ -161,7 +161,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
}; };
// ============================== Shared ============================== // ============================== Shared ==============================
const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => { const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
const { componentCls, floatButtonIconSize, floatButtonSize } = token; const { componentCls, floatButtonIconSize, floatButtonSize } = token;
return { return {
[componentCls]: { [componentCls]: {
@ -196,7 +196,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
[`${componentCls}-content`]: { [`${componentCls}-content`]: {
overflow: 'hidden', overflow: 'hidden',
textAlign: 'center', textAlign: 'center',
@ -234,10 +234,10 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
}, },
[`${componentCls}-default`]: { [`${componentCls}-default`]: {
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
[`${componentCls}-body`]: { [`${componentCls}-body`]: {
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
backgroundColor: token.colorFillContent, backgroundColor: token.colorFillContent,
}, },
@ -259,7 +259,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
backgroundColor: token.colorPrimary, backgroundColor: token.colorPrimary,
[`${componentCls}-body`]: { [`${componentCls}-body`]: {
backgroundColor: token.colorPrimary, backgroundColor: token.colorPrimary,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
backgroundColor: token.colorPrimaryHover, backgroundColor: token.colorPrimaryHover,
}, },
@ -281,7 +281,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook<'FloatButton'>('FloatButton', token => { export default genComponentStyleHook<'FloatButton'>('FloatButton', (token) => {
const { const {
colorTextLightSolid, colorTextLightSolid,
colorBgContainer, colorBgContainer,

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

@ -37,12 +37,11 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
colorError, colorError,
inputPaddingHorizontalSM, inputPaddingHorizontalSM,
colorTextDescription, colorTextDescription,
motionDurationFast, motionDurationMid,
colorPrimary, colorPrimary,
controlHeight, controlHeight,
inputPaddingHorizontal, inputPaddingHorizontal,
colorBgContainer, colorBgContainer,
motionDurationMid,
colorTextDisabled, colorTextDisabled,
borderRadiusSM, borderRadiusSM,
borderRadiusLG, borderRadiusLG,
@ -154,7 +153,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
border: 0, border: 0,
borderRadius, borderRadius,
outline: 0, outline: 0,
transition: `all ${motionDurationFast} linear`, transition: `all ${motionDurationMid} linear`,
appearance: 'textfield', appearance: 'textfield',
color: token.colorText, color: token.colorText,
fontSize: 'inherit', fontSize: 'inherit',
@ -195,7 +194,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'stretch', alignItems: 'stretch',
transition: `opacity ${motionDurationMid} linear ${motionDurationFast}`, transition: `opacity ${motionDurationMid} linear ${motionDurationMid}`,
// Fix input number inside Menu makes icon too large // Fix input number inside Menu makes icon too large
// We arise the selector priority by nest selector here // We arise the selector priority by nest selector here
@ -226,7 +225,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
textAlign: 'center', textAlign: 'center',
cursor: 'pointer', cursor: 'pointer',
borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`, borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
transition: `all ${motionDurationFast} linear`, transition: `all ${motionDurationMid} linear`,
'&:active': { '&:active': {
background: token.colorFillAlter, background: token.colorFillAlter,
}, },
@ -247,7 +246,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
...resetIcon(), ...resetIcon(),
color: colorTextDescription, color: colorTextDescription,
transition: `all ${motionDurationFast} linear`, transition: `all ${motionDurationMid} linear`,
userSelect: 'none', userSelect: 'none',
}, },
}, },
@ -395,11 +394,11 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook( export default genComponentStyleHook(
'InputNumber', 'InputNumber',
token => { (token) => {
const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token); const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)]; return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
}, },
token => ({ (token) => ({
controlWidth: 90, controlWidth: 90,
handleWidth: token.controlHeightSM - token.lineWidth * 2, handleWidth: token.controlHeightSM - token.lineWidth * 2,
handleFontSize: token.fontSize / 2, handleFontSize: token.fontSize / 2,

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

@ -149,7 +149,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
borderStyle: token.lineType, borderStyle: token.lineType,
borderColor: token.colorBorder, borderColor: token.colorBorder,
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
...genPlaceholderStyle(token.colorTextPlaceholder), ...genPlaceholderStyle(token.colorTextPlaceholder),
'&:hover': { '&:hover': {
@ -868,7 +868,7 @@ export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): I
}); });
} }
const genTextAreaStyle: GenerateStyle<InputToken> = token => { const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
const { componentCls, inputPaddingHorizontal, paddingLG } = token; const { componentCls, inputPaddingHorizontal, paddingLG } = token;
const textareaPrefixCls = `${componentCls}-textarea`; const textareaPrefixCls = `${componentCls}-textarea`;
@ -921,7 +921,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Input', token => { export default genComponentStyleHook('Input', (token) => {
const inputToken = initInputToken<FullToken<'Input'>>(token); const inputToken = initInputToken<FullToken<'Input'>>(token);
return [ return [

10
components/menu/style/theme.tsx
View File

@ -24,7 +24,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
motionEaseInOut, motionEaseInOut,
motionEaseOut, motionEaseOut,
menuItemPaddingInline, menuItemPaddingInline,
motionDurationFast, motionDurationMid,
colorItemTextHover, colorItemTextHover,
lineType, lineType,
colorSplit, colorSplit,
@ -221,8 +221,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
transform: 'scaleY(0.0001)', transform: 'scaleY(0.0001)',
opacity: 0, opacity: 0,
transition: [ transition: [
`transform ${motionDurationFast} ${motionEaseOut}`, `transform ${motionDurationMid} ${motionEaseOut}`,
`opacity ${motionDurationFast} ${motionEaseOut}`, `opacity ${motionDurationMid} ${motionEaseOut}`,
].join(','), ].join(','),
content: '""', content: '""',
}, },
@ -240,8 +240,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
transform: 'scaleY(1)', transform: 'scaleY(1)',
opacity: 1, opacity: 1,
transition: [ transition: [
`transform ${motionDurationFast} ${motionEaseInOut}`, `transform ${motionDurationMid} ${motionEaseInOut}`,
`opacity ${motionDurationFast} ${motionEaseInOut}`, `opacity ${motionDurationMid} ${motionEaseInOut}`,
].join(','), ].join(','),
}, },
}, },

4
components/menu/style/vertical.tsx
View File

@ -59,7 +59,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
colorTextLightSolid, colorTextLightSolid,
dropdownWidth, dropdownWidth,
controlHeightLG, controlHeightLG,
motionDurationFast, motionDurationMid,
motionEaseOut, motionEaseOut,
paddingXL, paddingXL,
fontSizeSM, fontSizeSM,
@ -127,7 +127,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
transition: [ transition: [
`border-color ${motionDurationSlow}`, `border-color ${motionDurationSlow}`,
`background ${motionDurationSlow}`, `background ${motionDurationSlow}`,
`padding ${motionDurationFast} ${motionEaseOut}`, `padding ${motionDurationMid} ${motionEaseOut}`,
], ],
[`> ${componentCls}-title-content`]: { [`> ${componentCls}-title-content`]: {

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

@ -46,7 +46,7 @@ function box(position: React.CSSProperties['position']): React.CSSProperties {
}; };
} }
export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> = token => { export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return [ return [
@ -84,7 +84,7 @@ export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> =
]; ];
}; };
const genModalStyle: GenerateStyle<ModalToken> = token => { const genModalStyle: GenerateStyle<ModalToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return [ return [
@ -185,7 +185,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
border: 0, border: 0,
outline: 0, outline: 0,
cursor: 'pointer', cursor: 'pointer',
transition: `color ${token.motionDurationFast}, background-color ${token.motionDurationFast}`, transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
'&-x': { '&-x': {
display: 'block', display: 'block',
@ -264,7 +264,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
]; ];
}; };
const genModalConfirmStyle: GenerateStyle<ModalToken> = token => { const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
const confirmComponentCls = `${componentCls}-confirm`; const confirmComponentCls = `${componentCls}-confirm`;
@ -356,7 +356,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
}; };
}; };
const genRTLStyle: GenerateStyle<ModalToken> = token => { const genRTLStyle: GenerateStyle<ModalToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
[`${componentCls}-root`]: { [`${componentCls}-root`]: {
@ -371,7 +371,7 @@ const genRTLStyle: GenerateStyle<ModalToken> = token => {
}; };
}; };
const genWireframeStyle: GenerateStyle<ModalToken> = token => { const genWireframeStyle: GenerateStyle<ModalToken> = (token) => {
const { componentCls, antCls } = token; const { componentCls, antCls } = token;
const confirmComponentCls = `${componentCls}-confirm`; const confirmComponentCls = `${componentCls}-confirm`;
@ -421,7 +421,7 @@ const genWireframeStyle: GenerateStyle<ModalToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Modal', token => { export default genComponentStyleHook('Modal', (token) => {
const headerPaddingVertical = token.padding; const headerPaddingVertical = token.padding;
const headerFontSize = token.fontSizeHeading5; const headerFontSize = token.fontSizeHeading5;
const headerLineHeight = token.lineHeightHeading5; const headerLineHeight = token.lineHeightHeading5;

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

@ -22,7 +22,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
notificationCloseButtonSize: number; notificationCloseButtonSize: number;
} }
const genNotificationStyle: GenerateStyle<NotificationToken> = token => { const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
const { const {
iconCls, iconCls,
componentCls, // .ant-notification componentCls, // .ant-notification
@ -230,7 +230,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
width: token.notificationCloseButtonSize, width: token.notificationCloseButtonSize,
height: token.notificationCloseButtonSize, height: token.notificationCloseButtonSize,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -260,7 +260,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook( export default genComponentStyleHook(
'Notification', 'Notification',
token => { (token) => {
const notificationPaddingVertical = token.paddingMD; const notificationPaddingVertical = token.paddingMD;
const notificationPaddingHorizontal = token.paddingLG; const notificationPaddingHorizontal = token.paddingLG;
@ -280,7 +280,7 @@ export default genComponentStyleHook(
return [genNotificationStyle(notificationToken)]; return [genNotificationStyle(notificationToken)];
}, },
token => ({ (token) => ({
zIndexPopup: token.zIndexPopupBase + 50, zIndexPopup: token.zIndexPopupBase + 50,
width: 384, width: 384,
}), }),

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

@ -31,7 +31,7 @@ interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
paginationSlashMarginInlineEnd: number; paginationSlashMarginInlineEnd: number;
} }
const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = token => { const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -114,7 +114,7 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
}; };
}; };
const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token => { const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -183,7 +183,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
}; };
}; };
const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = token => { const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -221,7 +221,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
outline: 'none', outline: 'none',
transition: `border-color ${token.motionDurationFast}`, transition: `border-color ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
borderColor: token.colorPrimary, borderColor: token.colorPrimary,
@ -243,7 +243,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
}; };
}; };
const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token => { const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -331,7 +331,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
listStyle: 'none', listStyle: 'none',
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
}, },
[`${componentCls}-prev, ${componentCls}-next`]: { [`${componentCls}-prev, ${componentCls}-next`]: {
@ -355,7 +355,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
border: `${token.lineWidth}px ${token.lineType} transparent`, border: `${token.lineWidth}px ${token.lineType} transparent`,
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
outline: 'none', outline: 'none',
transition: `border ${token.motionDurationFast}`, transition: `border ${token.motionDurationMid}`,
}, },
[`&:focus-visible ${componentCls}-item-link`]: { [`&:focus-visible ${componentCls}-item-link`]: {
@ -414,7 +414,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
}; };
}; };
const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token => { const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -448,7 +448,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
[`&:not(${componentCls}-item-active)`]: { [`&:not(${componentCls}-item-active)`]: {
'&:hover': { '&:hover': {
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
backgroundColor: token.colorBgTextHover, backgroundColor: token.colorBgTextHover,
}, },
@ -482,7 +482,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
}; };
}; };
const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => { const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -550,7 +550,7 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
}; };
}; };
const genBorderedStyle: GenerateStyle<PaginationToken> = token => { const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -647,7 +647,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Pagination', token => { export default genComponentStyleHook('Pagination', (token) => {
const paginationToken = mergeToken<PaginationToken>( const paginationToken = mergeToken<PaginationToken>(
token, token,
{ {

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

@ -36,7 +36,7 @@ const antRadioEffect = new Keyframes('antRadioEffect', {
}); });
// styles from RadioGroup only // styles from RadioGroup only
const getGroupRadioStyle: GenerateStyle<RadioToken> = token => { const getGroupRadioStyle: GenerateStyle<RadioToken> = (token) => {
const { componentCls, antCls } = token; const { componentCls, antCls } = token;
const groupPrefixCls = `${componentCls}-group`; const groupPrefixCls = `${componentCls}-group`;
@ -63,7 +63,7 @@ const getGroupRadioStyle: GenerateStyle<RadioToken> = token => {
}; };
// Styles from radio-wrapper // Styles from radio-wrapper
const getRadioBasicStyle: GenerateStyle<RadioToken> = token => { const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
const { const {
componentCls, componentCls,
radioWrapperMarginRight, radioWrapperMarginRight,
@ -71,7 +71,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
radioTop, radioTop,
radioSize, radioSize,
motionDurationSlow, motionDurationSlow,
motionDurationFast, motionDurationMid,
motionEaseInOut, motionEaseInOut,
motionEaseInOutCirc, motionEaseInOutCirc,
radioButtonBg, radioButtonBg,
@ -187,7 +187,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: lineWidth, borderWidth: lineWidth,
borderRadius: '50%', borderRadius: '50%',
transition: `all ${motionDurationFast}`, transition: `all ${motionDurationMid}`,
}, },
[`${componentCls}-input`]: { [`${componentCls}-input`]: {
@ -255,7 +255,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
}; };
// Styles from radio-button // Styles from radio-button
const getRadioButtonStyle: GenerateStyle<RadioToken> = token => { const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
const { const {
radioButtonColor, radioButtonColor,
controlHeight, controlHeight,
@ -264,7 +264,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
lineType, lineType,
colorBorder, colorBorder,
motionDurationSlow, motionDurationSlow,
motionDurationFast, motionDurationMid,
radioButtonPaddingHorizontal, radioButtonPaddingHorizontal,
fontSize, fontSize,
radioButtonBg, radioButtonBg,
@ -305,10 +305,10 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
borderInlineEndWidth: lineWidth, borderInlineEndWidth: lineWidth,
cursor: 'pointer', cursor: 'pointer',
transition: [ transition: [
`color ${motionDurationFast}`, `color ${motionDurationMid}`,
`background ${motionDurationFast}`, `background ${motionDurationMid}`,
`border-color ${motionDurationFast}`, `border-color ${motionDurationMid}`,
`box-shadow ${motionDurationFast}`, `box-shadow ${motionDurationMid}`,
].join(','), ].join(','),
a: { a: {
@ -480,7 +480,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Radio', token => { export default genComponentStyleHook('Radio', (token) => {
const { const {
padding, padding,
lineWidth, lineWidth,

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

@ -12,7 +12,7 @@ interface RateToken extends FullToken<'Rate'> {
defaultColor: string; defaultColor: string;
} }
const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => { const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -27,7 +27,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
}, },
'> div': { '> div': {
transition: `all ${token.motionDurationFast}, outline 0s`, transition: `all ${token.motionDurationMid}, outline 0s`,
'&:hover': { '&:hover': {
transform: token.rateStarHoverScale, transform: token.rateStarHoverScale,
@ -45,7 +45,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
'&-first, &-second': { '&-first, &-second': {
color: token.defaultColor, color: token.defaultColor,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
userSelect: 'none', userSelect: 'none',
[token.iconCls]: { [token.iconCls]: {
@ -80,7 +80,7 @@ const genRateRtlStyle = (token: RateToken): CSSObject => ({
}, },
}); });
const genRateStyle: GenerateStyle<RateToken> = token => { const genRateStyle: GenerateStyle<RateToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -122,7 +122,7 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Rate', token => { export default genComponentStyleHook('Rate', (token) => {
const { colorFillContent } = token; const { colorFillContent } = token;
const rateToken = mergeToken<RateToken>(token, { const rateToken = mergeToken<RateToken>(token, {

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

@ -52,7 +52,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
color: token.labelColor, color: token.labelColor,
backgroundColor: token.bgColor, backgroundColor: token.bgColor,
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
[`${componentCls}-group`]: { [`${componentCls}-group`]: {
position: 'relative', position: 'relative',
@ -82,7 +82,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
position: 'relative', position: 'relative',
textAlign: 'center', textAlign: 'center',
cursor: 'pointer', cursor: 'pointer',
transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `color ${token.motionDurationMid} ${token.motionEaseInOut}`,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
'&-selected': { '&-selected': {
@ -98,7 +98,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
top: 0, top: 0,
insetInlineStart: 0, insetInlineStart: 0,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
}, },
[`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: { [`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {

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

@ -17,14 +17,14 @@ export interface SelectToken extends FullToken<'Select'> {
} }
// ============================= Selector ============================= // ============================= Selector =============================
const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => { const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
position: 'relative', position: 'relative',
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
input: { input: {
cursor: 'pointer', cursor: 'pointer',
@ -101,7 +101,7 @@ const genStatusStyle = (
// ============================== Styles ============================== // ============================== Styles ==============================
// /* Reset search input style */ // /* Reset search input style */
const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = token => { const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -122,7 +122,7 @@ const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> =
}; };
// =============================== Base =============================== // =============================== Base ===============================
const genBaseStyle: GenerateStyle<SelectToken> = token => { const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
const { componentCls, inputPaddingHorizontalBase, iconCls } = token; const { componentCls, inputPaddingHorizontalBase, iconCls } = token;
return { return {
@ -215,7 +215,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
background: token.colorBgContainer, background: token.colorBgContainer,
cursor: 'pointer', cursor: 'pointer',
opacity: 0, opacity: 0,
transition: `color ${token.motionDurationFast} ease, opacity ${token.motionDurationSlow} ease`, transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
textRendering: 'auto', textRendering: 'auto',
'&:before': { '&:before': {
@ -244,7 +244,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
}; };
// ============================== Styles ============================== // ============================== Styles ==============================
const genSelectStyle: GenerateStyle<SelectToken> = token => { const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return [ return [
@ -335,7 +335,7 @@ export default genComponentStyleHook(
return [genSelectStyle(selectToken)]; return [genSelectStyle(selectToken)];
}, },
token => ({ (token) => ({
zIndexPopup: token.zIndexPopupBase + 50, zIndexPopup: token.zIndexPopupBase + 50,
}), }),
); );

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

@ -28,7 +28,7 @@ interface SliderToken extends FullToken<'Slider'> {
} }
// =============================== Base =============================== // =============================== Base ===============================
const genBaseStyle: GenerateStyle<SliderToken> = token => { const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
const { componentCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover } = const { componentCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover } =
token; token;
@ -51,14 +51,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
position: 'absolute', position: 'absolute',
backgroundColor: token.colorFillTertiary, backgroundColor: token.colorFillTertiary,
borderRadius: token.borderRadiusXS, borderRadius: token.borderRadiusXS,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
}, },
[`${componentCls}-track`]: { [`${componentCls}-track`]: {
position: 'absolute', position: 'absolute',
backgroundColor: token.colorPrimaryBorder, backgroundColor: token.colorPrimaryBorder,
borderRadius: token.borderRadiusXS, borderRadius: token.borderRadiusXS,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
}, },
'&:hover': { '&:hover': {
@ -116,11 +116,11 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
borderRadius: '50%', borderRadius: '50%',
cursor: 'pointer', cursor: 'pointer',
transition: ` transition: `
inset-inline-start ${token.motionDurationFast}, inset-inline-start ${token.motionDurationMid},
inset-block-start ${token.motionDurationFast}, inset-block-start ${token.motionDurationMid},
width ${token.motionDurationFast}, width ${token.motionDurationMid},
height ${token.motionDurationFast}, height ${token.motionDurationMid},
box-shadow ${token.motionDurationFast} box-shadow ${token.motionDurationMid}
`, `,
}, },
@ -282,7 +282,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
}; };
}; };
// ============================ Horizontal ============================ // ============================ Horizontal ============================
const genHorizontalStyle: GenerateStyle<SliderToken> = token => { const genHorizontalStyle: GenerateStyle<SliderToken> = (token) => {
const { componentCls, marginPartWithMark } = token; const { componentCls, marginPartWithMark } = token;
return { return {
@ -297,7 +297,7 @@ const genHorizontalStyle: GenerateStyle<SliderToken> = token => {
}; };
// ============================= Vertical ============================= // ============================= Vertical =============================
const genVerticalStyle: GenerateStyle<SliderToken> = token => { const genVerticalStyle: GenerateStyle<SliderToken> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -311,7 +311,7 @@ const genVerticalStyle: GenerateStyle<SliderToken> = token => {
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook( export default genComponentStyleHook(
'Slider', 'Slider',
token => { (token) => {
const sliderToken = mergeToken<SliderToken>(token, { const sliderToken = mergeToken<SliderToken>(token, {
marginPart: (token.controlHeight - token.controlSize) / 2, marginPart: (token.controlHeight - token.controlSize) / 2,
marginFull: token.controlSize / 2, marginFull: token.controlSize / 2,
@ -323,7 +323,7 @@ export default genComponentStyleHook(
genVerticalStyle(sliderToken), genVerticalStyle(sliderToken),
]; ];
}, },
token => { (token) => {
// Handle line width is always width-er 1px // Handle line width is always width-er 1px
const increaseHandleWidth = 1; const increaseHandleWidth = 1;
const controlSize = token.controlHeightLG / 4; const controlSize = token.controlHeightLG / 4;

4
components/steps/style/inline.ts
View File

@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.'; import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme'; import type { GenerateStyle } from '../../theme';
const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = token => { const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token; const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token;
const containerPaddingTop = token.paddingXS + token.lineWidth; const containerPaddingTop = token.paddingXS + token.lineWidth;
const titleStyle = { const titleStyle = {
@ -24,7 +24,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = token => {
margin: `0 ${token.marginXXS / 2}px`, margin: `0 ${token.marginXXS / 2}px`,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
cursor: 'pointer', cursor: 'pointer',
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
background: token.controlItemBgHover, background: token.controlItemBgHover,
}, },

2
components/style/motion/zoom.tsx
View File

@ -206,7 +206,7 @@ export const initZoomMotion = (
motionCls, motionCls,
inKeyframes, inKeyframes,
outKeyframes, outKeyframes,
motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid, motionName === 'zoom-big-fast' ? token.motionDurationMid : token.motionDurationMid,
), ),
{ {
[` [`

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

@ -26,7 +26,7 @@ interface SwitchToken extends FullToken<'Switch'> {
switchHandleActiveInset: string; switchHandleActiveInset: string;
} }
const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => { const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
const switchInnerCls = `${componentCls}-inner`; const switchInnerCls = `${componentCls}-inner`;
@ -106,7 +106,7 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
}; };
}; };
const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = token => { const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
return { return {
@ -125,7 +125,7 @@ const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
}; };
}; };
const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => { const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
const switchHandleCls = `${componentCls}-handle`; const switchHandleCls = `${componentCls}-handle`;
@ -172,7 +172,7 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
}; };
}; };
const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => { const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
const { componentCls } = token; const { componentCls } = token;
const switchInnerCls = `${componentCls}-inner`; const switchInnerCls = `${componentCls}-inner`;
@ -260,7 +260,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
border: '0', border: '0',
borderRadius: 100, borderRadius: 100,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
userSelect: 'none', userSelect: 'none',
[`&:hover:not(${componentCls}-disabled)`]: { [`&:hover:not(${componentCls}-disabled)`]: {
@ -296,7 +296,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Switch', token => { export default genComponentStyleHook('Switch', (token) => {
const switchHeight = token.fontSize * token.lineHeight; const switchHeight = token.fontSize * token.lineHeight;
const switchHeightSM = token.controlHeight / 2; const switchHeightSM = token.controlHeight / 2;
const switchPadding = 2; // This is magic const switchPadding = 2; // This is magic

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

@ -77,7 +77,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
opacity: 1, opacity: 1,
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
textAlign: 'start', textAlign: 'start',
// RTL // RTL
@ -94,7 +94,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
color: token.colorTextDescription, color: token.colorTextDescription,
fontSize: token.tagIconSize, fontSize: token.tagIconSize,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}`, transition: `all ${token.motionDurationMid}`,
'&:hover': { '&:hover': {
color: token.colorTextHeading, color: token.colorTextHeading,
@ -148,7 +148,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Tag', token => { export default genComponentStyleHook('Tag', (token) => {
const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token; const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token;
const tagHeight = Math.round(fontSize * lineHeight); const tagHeight = Math.round(fontSize * lineHeight);

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

@ -15,7 +15,7 @@ interface TourToken extends FullToken<'Tour'> {
} }
// =============================== Base =============================== // =============================== Base ===============================
const genBaseStyle: GenerateStyle<TourToken> = token => { const genBaseStyle: GenerateStyle<TourToken> = (token) => {
const { const {
componentCls, componentCls,
lineHeight, lineHeight,
@ -89,7 +89,7 @@ const genBaseStyle: GenerateStyle<TourToken> = token => {
width: tourCloseSize, width: tourCloseSize,
height: tourCloseSize, height: tourCloseSize,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -236,7 +236,7 @@ const genBaseStyle: GenerateStyle<TourToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Tour', token => { export default genComponentStyleHook('Tour', (token) => {
const { borderRadiusLG, fontSize, lineHeight } = token; const { borderRadiusLG, fontSize, lineHeight } = token;
const TourToken = mergeToken<TourToken>(token, { const TourToken = mergeToken<TourToken>(token, {
tourZIndexPopup: token.zIndexPopupBase + 70, tourZIndexPopup: token.zIndexPopupBase + 70,

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

@ -281,7 +281,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
background: 'transparent', background: 'transparent',
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.motionDurationFast}, border 0s, line-height 0s, box-shadow 0s`, transition: `all ${token.motionDurationMid}, border 0s, line-height 0s, box-shadow 0s`,
'&:hover': { '&:hover': {
backgroundColor: token.controlItemBgHover, backgroundColor: token.controlItemBgHover,
@ -393,7 +393,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
insetInlineEnd: 0, insetInlineEnd: 0,
bottom: treeNodePadding, bottom: treeNodePadding,
insetInlineStart: 0, insetInlineStart: 0,
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationMid}`,
content: '""', content: '""',
pointerEvents: 'none', pointerEvents: 'none',
}, },
@ -411,7 +411,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
// >>> Switcher // >>> Switcher
[`${treeCls}-switcher`]: { [`${treeCls}-switcher`]: {
transition: `color ${token.motionDurationFast}`, transition: `color ${token.motionDurationMid}`,
}, },
// >>> Title // >>> Title