From 0162d2e2d8f5abd3aa7fa65215881630ea0926e1 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 17 Nov 2022 23:31:41 +0800 Subject: [PATCH] feat: change transiton to mid duration (#38648) --- components/alert/style/index.tsx | 8 +++---- components/back-top/style/index.tsx | 8 +++---- components/badge/style/index.tsx | 6 ++--- components/breadcrumb/style/index.tsx | 6 ++--- components/button/style/index.tsx | 32 ++++++++++++------------- components/card/style/index.tsx | 10 ++++---- components/cascader/style/index.tsx | 6 ++--- components/date-picker/style/index.tsx | 20 ++++++++-------- components/drawer/style/index.tsx | 8 +++---- components/dropdown/style/index.tsx | 11 ++++----- components/float-button/style/index.tsx | 14 +++++------ components/input-number/style/index.tsx | 15 ++++++------ components/input/style/index.tsx | 6 ++--- components/menu/style/theme.tsx | 10 ++++---- components/menu/style/vertical.tsx | 4 ++-- components/modal/style/index.tsx | 14 +++++------ components/notification/style/index.tsx | 8 +++---- components/pagination/style/index.tsx | 24 +++++++++---------- components/radio/style/index.tsx | 22 ++++++++--------- components/rate/style/index.tsx | 10 ++++---- components/segmented/style/index.tsx | 6 ++--- components/select/style/index.tsx | 14 +++++------ components/slider/style/index.tsx | 24 +++++++++---------- components/steps/style/inline.ts | 4 ++-- components/style/motion/zoom.tsx | 2 +- components/switch/style/index.tsx | 12 +++++----- components/tag/style/index.tsx | 6 ++--- components/tour/style/index.tsx | 6 ++--- components/tree/style/index.tsx | 6 ++--- 29 files changed, 160 insertions(+), 162 deletions(-) diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 2d3e61bf91..0d71fa0824 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -178,7 +178,7 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS const { componentCls, iconCls, - motionDurationFast, + motionDurationMid, marginXS, fontSizeIcon, colorIcon, @@ -204,7 +204,7 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS [`${iconCls}-close`]: { color: colorIcon, - transition: `color ${motionDurationFast}`, + transition: `color ${motionDurationMid}`, '&:hover': { color: colorIconHover, }, @@ -213,7 +213,7 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS '&-close-text': { color: colorIcon, - transition: `color ${motionDurationFast}`, + transition: `color ${motionDurationMid}`, '&:hover': { color: colorIconHover, }, @@ -228,7 +228,7 @@ export const genAlertStyle: GenerateStyle = (token: AlertToken): CSS genActionStyle(token), ]; -export default genComponentStyleHook('Alert', token => { +export default genComponentStyleHook('Alert', (token) => { const { fontSizeHeading3 } = token; const alertToken = mergeToken(token, { diff --git a/components/back-top/style/index.tsx b/components/back-top/style/index.tsx index c7fecc2dde..9aaabbec9f 100644 --- a/components/back-top/style/index.tsx +++ b/components/back-top/style/index.tsx @@ -50,11 +50,11 @@ const genSharedBackTopStyle: GenerateStyle = (token): C textAlign: 'center', backgroundColor: token.backTopBackground, borderRadius: backTopSize, - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, '&:hover': { backgroundColor: token.backTopHoverBackground, - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, }, }, @@ -89,7 +89,7 @@ const genMediaBackTopStyle: GenerateStyle = (token): CSSObject => export default genComponentStyleHook<'BackTop'>( 'BackTop', - token => { + (token) => { const { fontSizeHeading3, colorTextDescription, @@ -112,7 +112,7 @@ export default genComponentStyleHook<'BackTop'>( }); return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)]; }, - token => ({ + (token) => ({ zIndexPopup: token.zIndexBase + 10, }), ); diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx index 2d2ccb6ff5..a2f87ab555 100644 --- a/components/badge/style/index.tsx +++ b/components/badge/style/index.tsx @@ -116,7 +116,7 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO background: token.badgeColor, borderRadius: token.badgeHeight / 2, boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`, - transition: `background ${token.motionDurationFast}`, + transition: `background ${token.motionDurationMid}`, a: { color: token.badgeTextColor, @@ -161,7 +161,7 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO transformOrigin: '100% 0%', [`${iconCls}-spin`]: { animationName: antBadgeLoadingCircle, - animationDuration: token.motionDurationFast, + animationDuration: token.motionDurationMid, animationIterationCount: 'infinite', animationTimingFunction: 'linear', }, @@ -323,7 +323,7 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }; // ============================== Export ============================== -export default genComponentStyleHook('Badge', token => { +export default genComponentStyleHook('Badge', (token) => { const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token; const badgeFontHeight = Math.round(fontSize * lineHeight); diff --git a/components/breadcrumb/style/index.tsx b/components/breadcrumb/style/index.tsx index 4b0328056a..a469a47ef7 100644 --- a/components/breadcrumb/style/index.tsx +++ b/components/breadcrumb/style/index.tsx @@ -14,7 +14,7 @@ interface BreadcrumbToken extends FullToken<'Breadcrumb'> { breadcrumbSeparatorColor: string; } -const genBreadcrumbStyle: GenerateStyle = token => { +const genBreadcrumbStyle: GenerateStyle = (token) => { const { componentCls, iconCls } = token; return { @@ -37,7 +37,7 @@ const genBreadcrumbStyle: GenerateStyle = token => { a: { color: token.breadcrumbLinkColor, - transition: `color ${token.motionDurationFast}`, + transition: `color ${token.motionDurationMid}`, padding: `0 ${token.paddingXXS}px`, borderRadius: token.borderRadiusSM, height: token.lineHeight * token.fontSize, @@ -107,7 +107,7 @@ const genBreadcrumbStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Breadcrumb', token => { +export default genComponentStyleHook('Breadcrumb', (token) => { const BreadcrumbToken = mergeToken(token, { breadcrumbBaseColor: token.colorTextDescription, breadcrumbFontSize: token.fontSize, diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index a0eb2e694c..1eb847f739 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -31,7 +31,7 @@ const genSharedButtonStyle: GenerateStyle = (token): CSS backgroundColor: 'transparent', border: `${token.lineWidth}px ${token.lineType} transparent`, cursor: 'pointer', - transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, + transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`, userSelect: 'none', touchAction: 'manipulation', lineHeight: token.lineHeight, @@ -109,14 +109,14 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject }); // ============================== Shape =============================== -const genCircleButtonStyle: GenerateStyle = token => ({ +const genCircleButtonStyle: GenerateStyle = (token) => ({ minWidth: token.controlHeight, paddingInlineStart: 0, paddingInlineEnd: 0, borderRadius: '50%', }); -const genRoundButtonStyle: GenerateStyle = token => ({ +const genRoundButtonStyle: GenerateStyle = (token) => ({ borderRadius: token.controlHeight, paddingInlineStart: token.controlHeight / 2, paddingInlineEnd: token.controlHeight / 2, @@ -158,7 +158,7 @@ const genGhostButtonStyle = ( }, }); -const genSolidDisabledButtonStyle: GenerateStyle = token => ({ +const genSolidDisabledButtonStyle: GenerateStyle = (token) => ({ '&:disabled': { cursor: 'not-allowed', borderColor: token.colorBorder, @@ -168,11 +168,11 @@ const genSolidDisabledButtonStyle: GenerateStyle = token }, }); -const genSolidButtonStyle: GenerateStyle = token => ({ +const genSolidButtonStyle: GenerateStyle = (token) => ({ ...genSolidDisabledButtonStyle(token), }); -const genPureDisabledButtonStyle: GenerateStyle = token => ({ +const genPureDisabledButtonStyle: GenerateStyle = (token) => ({ '&:disabled': { cursor: 'not-allowed', color: token.colorTextDisabled, @@ -180,7 +180,7 @@ const genPureDisabledButtonStyle: GenerateStyle = token }); // Type: Default -const genDefaultButtonStyle: GenerateStyle = token => ({ +const genDefaultButtonStyle: GenerateStyle = (token) => ({ ...genSolidButtonStyle(token), backgroundColor: token.colorBgContainer, @@ -234,7 +234,7 @@ const genDefaultButtonStyle: GenerateStyle = token => ({ }); // Type: Primary -const genPrimaryButtonStyle: GenerateStyle = token => ({ +const genPrimaryButtonStyle: GenerateStyle = (token) => ({ ...genSolidButtonStyle(token), color: token.colorTextLightSolid, @@ -302,14 +302,14 @@ const genPrimaryButtonStyle: GenerateStyle = token => ({ }); // Type: Dashed -const genDashedButtonStyle: GenerateStyle = token => ({ +const genDashedButtonStyle: GenerateStyle = (token) => ({ ...genDefaultButtonStyle(token), borderStyle: 'dashed', }); // Type: Link -const genLinkButtonStyle: GenerateStyle = token => ({ +const genLinkButtonStyle: GenerateStyle = (token) => ({ color: token.colorLink, ...genHoverActiveButtonStyle( @@ -340,7 +340,7 @@ const genLinkButtonStyle: GenerateStyle = token => ({ }); // Type: Text -const genTextButtonStyle: GenerateStyle = token => ({ +const genTextButtonStyle: GenerateStyle = (token) => ({ ...genHoverActiveButtonStyle( { color: token.colorText, @@ -371,7 +371,7 @@ const genTextButtonStyle: GenerateStyle = token => ({ }, }); -const genTypeButtonStyle: GenerateStyle = token => { +const genTypeButtonStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -440,9 +440,9 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS ]; }; -const genSizeBaseButtonStyle: GenerateStyle = token => genSizeButtonStyle(token); +const genSizeBaseButtonStyle: GenerateStyle = (token) => genSizeButtonStyle(token); -const genSizeSmallButtonStyle: GenerateStyle = token => { +const genSizeSmallButtonStyle: GenerateStyle = (token) => { const smallToken = mergeToken(token, { controlHeight: token.controlHeightSM, padding: token.paddingXS, @@ -453,7 +453,7 @@ const genSizeSmallButtonStyle: GenerateStyle = token => { return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`); }; -const genSizeLargeButtonStyle: GenerateStyle = token => { +const genSizeLargeButtonStyle: GenerateStyle = (token) => { const largeToken = mergeToken(token, { controlHeight: token.controlHeightLG, fontSize: token.fontSizeLG, @@ -464,7 +464,7 @@ const genSizeLargeButtonStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Button', token => { +export default genComponentStyleHook('Button', (token) => { const { controlTmpOutline, paddingContentHorizontal } = token; const buttonToken = mergeToken(token, { diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 53106e9c43..036f0fb35b 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -96,7 +96,7 @@ const genCardGridStyle: GenerateStyle = (token): CSSObject => { ${lineWidth}px 0 0 0 ${colorBorderSecondary} inset, 0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset; `, - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, '&-hoverable:hover': { position: 'relative', @@ -134,7 +134,7 @@ const genCardActionsStyle: GenerateStyle = (token): CSSObject => { '&:hover': { color: token.colorPrimary, - transition: `color ${token.motionDurationFast}`, + transition: `color ${token.motionDurationMid}`, }, [`a:not(${componentCls}-btn), > ${iconCls}`]: { @@ -142,7 +142,7 @@ const genCardActionsStyle: GenerateStyle = (token): CSSObject => { width: '100%', color: token.colorTextDescription, lineHeight: `${token.fontSize * token.lineHeight}px`, - transition: `color ${token.motionDurationFast}`, + transition: `color ${token.motionDurationMid}`, '&:hover': { color: token.colorPrimary, @@ -300,7 +300,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-hoverable`]: { cursor: 'pointer', - transition: `box-shadow ${token.motionDurationFast}, border-color ${token.motionDurationFast}`, + transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`, '&:hover': { borderColor: 'transparent', @@ -376,7 +376,7 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { }; // ============================== Export ============================== -export default genComponentStyleHook('Card', token => { +export default genComponentStyleHook('Card', (token) => { const cardToken = mergeToken(token, { cardShadow: token.boxShadowCard, cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2, diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index b37acf0fd6..599995bb90 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -13,7 +13,7 @@ export interface ComponentToken { type CascaderToken = FullToken<'Cascader'>; // =============================== Base =============================== -const genBaseStyle: GenerateStyle = token => { +const genBaseStyle: GenerateStyle = (token) => { const { prefixCls, componentCls, antCls } = token; const cascaderMenuItemCls = `${componentCls}-menu-item`; const iconCls = ` @@ -99,7 +99,7 @@ const genBaseStyle: GenerateStyle = token => { padding: `${itemPaddingVertical}px ${token.paddingSM}px`, lineHeight: token.lineHeight, cursor: 'pointer', - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, borderRadius: token.borderRadiusSM, '&:hover': { @@ -156,7 +156,7 @@ const genBaseStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Cascader', token => [genBaseStyle(token)], { +export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], { controlWidth: 184, controlItemWidth: 111, dropdownHeight: 180, diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index f29b75e723..3b7c4d8611 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -75,7 +75,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { pickerPanelCellHeight, motionDurationSlow, borderRadiusSM, - motionDurationFast, + motionDurationMid, controlItemBgHover, lineWidth, lineType, @@ -113,7 +113,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { height: pickerPanelCellHeight, lineHeight: `${pickerPanelCellHeight}px`, borderRadius: borderRadiusSM, - transition: `background ${motionDurationFast}, border ${motionDurationFast}`, + transition: `background ${motionDurationMid}, border ${motionDurationMid}`, }, // >>> Hover @@ -300,7 +300,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { pickerControlIconBorderWidth, colorIcon, pickerTextHeight, - motionDurationFast, + motionDurationMid, colorIconHover, fontWeightStrong, pickerPanelCellHeight, @@ -394,7 +394,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { background: 'transparent', border: 0, cursor: 'pointer', - transition: `color ${motionDurationFast}`, + transition: `color ${motionDurationMid}`, }, '> button': { @@ -687,7 +687,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&-row': { td: { - transition: `background ${motionDurationFast}`, + transition: `background ${motionDurationMid}`, '&:first-child': { borderStartStartRadius: borderRadiusSM, @@ -784,7 +784,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { overflowY: 'hidden', textAlign: 'start', listStyle: 'none', - transition: `background ${motionDurationFast}`, + transition: `background ${motionDurationMid}`, overflowX: 'hidden', '&::after': { @@ -827,7 +827,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { lineHeight: `${pickerTimePanelCellHeight}px`, borderRadius: borderRadiusSM, cursor: 'pointer', - transition: `background ${motionDurationFast}`, + transition: `background ${motionDurationMid}`, '&:hover': { background: controlItemBgHover, @@ -925,7 +925,7 @@ const genPickerStyle: GenerateStyle = (token) => { lineType, colorBorder, borderRadius, - motionDurationFast, + motionDurationMid, colorBgContainerDisabled, colorTextDisabled, colorTextPlaceholder, @@ -970,7 +970,7 @@ const genPickerStyle: GenerateStyle = (token) => { background: colorBgContainer, border: `${lineWidth}px ${lineType} ${colorBorder}`, borderRadius, - transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`, + transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`, // Space.Compact ...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`), @@ -1081,7 +1081,7 @@ const genPickerStyle: GenerateStyle = (token) => { transform: 'translateY(-50%)', cursor: 'pointer', opacity: 0, - transition: `opacity ${motionDurationFast}, color ${motionDurationFast}`, + transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`, '> *': { verticalAlign: 'top', diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx index e8a7c69d25..2721392a05 100644 --- a/components/drawer/style/index.tsx +++ b/components/drawer/style/index.tsx @@ -19,7 +19,7 @@ const genDrawerStyle: GenerateStyle = (token: DrawerToken) => { colorBgMask, colorBgElevated, motionDurationSlow, - motionDurationFast, + motionDurationMid, padding, paddingLG, fontSizeLG, @@ -171,7 +171,7 @@ const genDrawerStyle: GenerateStyle = (token: DrawerToken) => { border: 0, outline: 0, cursor: 'pointer', - transition: `color ${motionDurationFast}`, + transition: `color ${motionDurationMid}`, textRendering: 'auto', '&:focus, &:hover': { @@ -216,7 +216,7 @@ const genDrawerStyle: GenerateStyle = (token: DrawerToken) => { // ============================== Export ============================== export default genComponentStyleHook( 'Drawer', - token => { + (token) => { const drawerToken = mergeToken(token, { drawerFooterPaddingVertical: token.paddingXS, drawerFooterPaddingHorizontal: token.padding, @@ -224,7 +224,7 @@ export default genComponentStyleHook( return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)]; }, - token => ({ + (token) => ({ zIndexPopup: token.zIndexPopupBase, }), ); diff --git a/components/dropdown/style/index.tsx b/components/dropdown/style/index.tsx index 839aa02b4b..d97c75d3c7 100644 --- a/components/dropdown/style/index.tsx +++ b/components/dropdown/style/index.tsx @@ -27,7 +27,7 @@ export interface DropdownToken extends FullToken<'Dropdown'> { } // =============================== Base =============================== -const genBaseStyle: GenerateStyle = token => { +const genBaseStyle: GenerateStyle = (token) => { const { componentCls, menuCls, @@ -38,7 +38,6 @@ const genBaseStyle: GenerateStyle = token => { antCls, iconCls, motionDurationMid, - motionDurationFast, dropdownPaddingVertical, fontSize, dropdownEdgeChildPadding, @@ -273,7 +272,7 @@ const genBaseStyle: GenerateStyle = token => { [`${menuCls}-item-group-title`]: { padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`, color: token.colorTextDescription, - transition: `all ${motionDurationFast}`, + transition: `all ${motionDurationMid}`, }, // ======================= Item Content ======================= @@ -295,7 +294,7 @@ const genBaseStyle: GenerateStyle = token => { '> a': { color: 'inherit', - transition: `all ${motionDurationFast}`, + transition: `all ${motionDurationMid}`, '&:hover': { color: 'inherit', @@ -319,7 +318,7 @@ const genBaseStyle: GenerateStyle = token => { fontSize, lineHeight: token.lineHeight, cursor: 'pointer', - transition: `all ${motionDurationFast}`, + transition: `all ${motionDurationMid}`, '&:first-child': !dropdownEdgeChildPadding ? { @@ -460,7 +459,7 @@ export default genComponentStyleHook( genStatusStyle(dropdownToken), ]; }, - token => ({ + (token) => ({ zIndexPopup: token.zIndexPopupBase + 50, }), ); diff --git a/components/float-button/style/index.tsx b/components/float-button/style/index.tsx index b59fbcf8e0..b282719b88 100644 --- a/components/float-button/style/index.tsx +++ b/components/float-button/style/index.tsx @@ -23,7 +23,7 @@ type FloatButtonToken = FullToken<'FloatButton'> & { }; // ============================== Group ============================== -const floatButtonGroupStyle: GenerateStyle = token => { +const floatButtonGroupStyle: GenerateStyle = (token) => { const { componentCls, floatButtonSize, margin, borderRadius, motionDurationSlow } = token; const groupPrefixCls = `${componentCls}-group`; const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', { @@ -161,7 +161,7 @@ const floatButtonGroupStyle: GenerateStyle = token }; // ============================== Shared ============================== -const sharedFloatButtonStyle: GenerateStyle = token => { +const sharedFloatButtonStyle: GenerateStyle = (token) => { const { componentCls, floatButtonIconSize, floatButtonSize } = token; return { [componentCls]: { @@ -196,7 +196,7 @@ const sharedFloatButtonStyle: GenerateStyle = token display: 'flex', justifyContent: 'center', alignItems: 'center', - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, [`${componentCls}-content`]: { overflow: 'hidden', textAlign: 'center', @@ -234,10 +234,10 @@ const sharedFloatButtonStyle: GenerateStyle = token }, [`${componentCls}-default`]: { backgroundColor: token.colorBgContainer, - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, [`${componentCls}-body`]: { backgroundColor: token.colorBgContainer, - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, '&:hover': { backgroundColor: token.colorFillContent, }, @@ -259,7 +259,7 @@ const sharedFloatButtonStyle: GenerateStyle = token backgroundColor: token.colorPrimary, [`${componentCls}-body`]: { backgroundColor: token.colorPrimary, - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, '&:hover': { backgroundColor: token.colorPrimaryHover, }, @@ -281,7 +281,7 @@ const sharedFloatButtonStyle: GenerateStyle = token }; // ============================== Export ============================== -export default genComponentStyleHook<'FloatButton'>('FloatButton', token => { +export default genComponentStyleHook<'FloatButton'>('FloatButton', (token) => { const { colorTextLightSolid, colorBgContainer, diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx index f468904416..544cccf85b 100644 --- a/components/input-number/style/index.tsx +++ b/components/input-number/style/index.tsx @@ -37,12 +37,11 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe colorError, inputPaddingHorizontalSM, colorTextDescription, - motionDurationFast, + motionDurationMid, colorPrimary, controlHeight, inputPaddingHorizontal, colorBgContainer, - motionDurationMid, colorTextDisabled, borderRadiusSM, borderRadiusLG, @@ -154,7 +153,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe border: 0, borderRadius, outline: 0, - transition: `all ${motionDurationFast} linear`, + transition: `all ${motionDurationMid} linear`, appearance: 'textfield', color: token.colorText, fontSize: 'inherit', @@ -195,7 +194,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe display: 'flex', flexDirection: 'column', alignItems: 'stretch', - transition: `opacity ${motionDurationMid} linear ${motionDurationFast}`, + transition: `opacity ${motionDurationMid} linear ${motionDurationMid}`, // Fix input number inside Menu makes icon too large // We arise the selector priority by nest selector here @@ -226,7 +225,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe textAlign: 'center', cursor: 'pointer', borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`, - transition: `all ${motionDurationFast} linear`, + transition: `all ${motionDurationMid} linear`, '&:active': { background: token.colorFillAlter, }, @@ -247,7 +246,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe ...resetIcon(), color: colorTextDescription, - transition: `all ${motionDurationFast} linear`, + transition: `all ${motionDurationMid} linear`, userSelect: 'none', }, }, @@ -395,11 +394,11 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb // ============================== Export ============================== export default genComponentStyleHook( 'InputNumber', - token => { + (token) => { const inputNumberToken = initInputToken>(token); return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)]; }, - token => ({ + (token) => ({ controlWidth: 90, handleWidth: token.controlHeightSM - token.lineWidth * 2, handleFontSize: token.fontSize / 2, diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index b3b9e5cd47..3a1c7bfaf7 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -149,7 +149,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({ borderStyle: token.lineType, borderColor: token.colorBorder, borderRadius: token.borderRadius, - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, ...genPlaceholderStyle(token.colorTextPlaceholder), '&:hover': { @@ -868,7 +868,7 @@ export function initInputToken(token: T): I }); } -const genTextAreaStyle: GenerateStyle = token => { +const genTextAreaStyle: GenerateStyle = (token) => { const { componentCls, inputPaddingHorizontal, paddingLG } = token; const textareaPrefixCls = `${componentCls}-textarea`; @@ -921,7 +921,7 @@ const genTextAreaStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Input', token => { +export default genComponentStyleHook('Input', (token) => { const inputToken = initInputToken>(token); return [ diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx index 99b6c7c618..eb54a7bb11 100644 --- a/components/menu/style/theme.tsx +++ b/components/menu/style/theme.tsx @@ -24,7 +24,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation motionEaseInOut, motionEaseOut, menuItemPaddingInline, - motionDurationFast, + motionDurationMid, colorItemTextHover, lineType, colorSplit, @@ -221,8 +221,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation transform: 'scaleY(0.0001)', opacity: 0, transition: [ - `transform ${motionDurationFast} ${motionEaseOut}`, - `opacity ${motionDurationFast} ${motionEaseOut}`, + `transform ${motionDurationMid} ${motionEaseOut}`, + `opacity ${motionDurationMid} ${motionEaseOut}`, ].join(','), content: '""', }, @@ -240,8 +240,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation transform: 'scaleY(1)', opacity: 1, transition: [ - `transform ${motionDurationFast} ${motionEaseInOut}`, - `opacity ${motionDurationFast} ${motionEaseInOut}`, + `transform ${motionDurationMid} ${motionEaseInOut}`, + `opacity ${motionDurationMid} ${motionEaseInOut}`, ].join(','), }, }, diff --git a/components/menu/style/vertical.tsx b/components/menu/style/vertical.tsx index 1b852c1d81..262a554eb2 100644 --- a/components/menu/style/vertical.tsx +++ b/components/menu/style/vertical.tsx @@ -59,7 +59,7 @@ const getVerticalStyle: GenerateStyle = (token) => { colorTextLightSolid, dropdownWidth, controlHeightLG, - motionDurationFast, + motionDurationMid, motionEaseOut, paddingXL, fontSizeSM, @@ -127,7 +127,7 @@ const getVerticalStyle: GenerateStyle = (token) => { transition: [ `border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`, - `padding ${motionDurationFast} ${motionEaseOut}`, + `padding ${motionDurationMid} ${motionEaseOut}`, ], [`> ${componentCls}-title-content`]: { diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index cea122b409..cb13e26ca1 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -46,7 +46,7 @@ function box(position: React.CSSProperties['position']): React.CSSProperties { }; } -export const genModalMaskStyle: GenerateStyle> = token => { +export const genModalMaskStyle: GenerateStyle> = (token) => { const { componentCls } = token; return [ @@ -84,7 +84,7 @@ export const genModalMaskStyle: GenerateStyle> = ]; }; -const genModalStyle: GenerateStyle = token => { +const genModalStyle: GenerateStyle = (token) => { const { componentCls } = token; return [ @@ -185,7 +185,7 @@ const genModalStyle: GenerateStyle = token => { border: 0, outline: 0, cursor: 'pointer', - transition: `color ${token.motionDurationFast}, background-color ${token.motionDurationFast}`, + transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`, '&-x': { display: 'block', @@ -264,7 +264,7 @@ const genModalStyle: GenerateStyle = token => { ]; }; -const genModalConfirmStyle: GenerateStyle = token => { +const genModalConfirmStyle: GenerateStyle = (token) => { const { componentCls } = token; const confirmComponentCls = `${componentCls}-confirm`; @@ -356,7 +356,7 @@ const genModalConfirmStyle: GenerateStyle = token => { }; }; -const genRTLStyle: GenerateStyle = token => { +const genRTLStyle: GenerateStyle = (token) => { const { componentCls } = token; return { [`${componentCls}-root`]: { @@ -371,7 +371,7 @@ const genRTLStyle: GenerateStyle = token => { }; }; -const genWireframeStyle: GenerateStyle = token => { +const genWireframeStyle: GenerateStyle = (token) => { const { componentCls, antCls } = token; const confirmComponentCls = `${componentCls}-confirm`; @@ -421,7 +421,7 @@ const genWireframeStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Modal', token => { +export default genComponentStyleHook('Modal', (token) => { const headerPaddingVertical = token.padding; const headerFontSize = token.fontSizeHeading5; const headerLineHeight = token.lineHeightHeading5; diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index 87c3bf9a14..e7e4777bf9 100644 --- a/components/notification/style/index.tsx +++ b/components/notification/style/index.tsx @@ -22,7 +22,7 @@ export interface NotificationToken extends FullToken<'Notification'> { notificationCloseButtonSize: number; } -const genNotificationStyle: GenerateStyle = token => { +const genNotificationStyle: GenerateStyle = (token) => { const { iconCls, componentCls, // .ant-notification @@ -230,7 +230,7 @@ const genNotificationStyle: GenerateStyle = token => { width: token.notificationCloseButtonSize, height: token.notificationCloseButtonSize, borderRadius: token.borderRadiusSM, - transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -260,7 +260,7 @@ const genNotificationStyle: GenerateStyle = token => { // ============================== Export ============================== export default genComponentStyleHook( 'Notification', - token => { + (token) => { const notificationPaddingVertical = token.paddingMD; const notificationPaddingHorizontal = token.paddingLG; @@ -280,7 +280,7 @@ export default genComponentStyleHook( return [genNotificationStyle(notificationToken)]; }, - token => ({ + (token) => ({ zIndexPopup: token.zIndexPopupBase + 50, width: 384, }), diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx index 15e573ff4f..6021e2cb52 100644 --- a/components/pagination/style/index.tsx +++ b/components/pagination/style/index.tsx @@ -31,7 +31,7 @@ interface PaginationToken extends InputToken> { paginationSlashMarginInlineEnd: number; } -const genPaginationDisabledStyle: GenerateStyle = token => { +const genPaginationDisabledStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -114,7 +114,7 @@ const genPaginationDisabledStyle: GenerateStyle = to }; }; -const genPaginationMiniStyle: GenerateStyle = token => { +const genPaginationMiniStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -183,7 +183,7 @@ const genPaginationMiniStyle: GenerateStyle = token }; }; -const genPaginationSimpleStyle: GenerateStyle = token => { +const genPaginationSimpleStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -221,7 +221,7 @@ const genPaginationSimpleStyle: GenerateStyle = toke border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, borderRadius: token.borderRadius, outline: 'none', - transition: `border-color ${token.motionDurationFast}`, + transition: `border-color ${token.motionDurationMid}`, '&:hover': { borderColor: token.colorPrimary, @@ -243,7 +243,7 @@ const genPaginationSimpleStyle: GenerateStyle = toke }; }; -const genPaginationJumpStyle: GenerateStyle = token => { +const genPaginationJumpStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -331,7 +331,7 @@ const genPaginationJumpStyle: GenerateStyle = token listStyle: 'none', borderRadius: token.borderRadius, cursor: 'pointer', - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, }, [`${componentCls}-prev, ${componentCls}-next`]: { @@ -355,7 +355,7 @@ const genPaginationJumpStyle: GenerateStyle = token border: `${token.lineWidth}px ${token.lineType} transparent`, borderRadius: token.borderRadius, outline: 'none', - transition: `border ${token.motionDurationFast}`, + transition: `border ${token.motionDurationMid}`, }, [`&:focus-visible ${componentCls}-item-link`]: { @@ -414,7 +414,7 @@ const genPaginationJumpStyle: GenerateStyle = token }; }; -const genPaginationItemStyle: GenerateStyle = token => { +const genPaginationItemStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -448,7 +448,7 @@ const genPaginationItemStyle: GenerateStyle = token [`&:not(${componentCls}-item-active)`]: { '&:hover': { - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, backgroundColor: token.colorBgTextHover, }, @@ -482,7 +482,7 @@ const genPaginationItemStyle: GenerateStyle = token }; }; -const genPaginationStyle: GenerateStyle = token => { +const genPaginationStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -550,7 +550,7 @@ const genPaginationStyle: GenerateStyle = token => { }; }; -const genBorderedStyle: GenerateStyle = token => { +const genBorderedStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -647,7 +647,7 @@ const genBorderedStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Pagination', token => { +export default genComponentStyleHook('Pagination', (token) => { const paginationToken = mergeToken( token, { diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 48acff8696..4e7a56880b 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -36,7 +36,7 @@ const antRadioEffect = new Keyframes('antRadioEffect', { }); // styles from RadioGroup only -const getGroupRadioStyle: GenerateStyle = token => { +const getGroupRadioStyle: GenerateStyle = (token) => { const { componentCls, antCls } = token; const groupPrefixCls = `${componentCls}-group`; @@ -63,7 +63,7 @@ const getGroupRadioStyle: GenerateStyle = token => { }; // Styles from radio-wrapper -const getRadioBasicStyle: GenerateStyle = token => { +const getRadioBasicStyle: GenerateStyle = (token) => { const { componentCls, radioWrapperMarginRight, @@ -71,7 +71,7 @@ const getRadioBasicStyle: GenerateStyle = token => { radioTop, radioSize, motionDurationSlow, - motionDurationFast, + motionDurationMid, motionEaseInOut, motionEaseInOutCirc, radioButtonBg, @@ -187,7 +187,7 @@ const getRadioBasicStyle: GenerateStyle = token => { borderStyle: 'solid', borderWidth: lineWidth, borderRadius: '50%', - transition: `all ${motionDurationFast}`, + transition: `all ${motionDurationMid}`, }, [`${componentCls}-input`]: { @@ -255,7 +255,7 @@ const getRadioBasicStyle: GenerateStyle = token => { }; // Styles from radio-button -const getRadioButtonStyle: GenerateStyle = token => { +const getRadioButtonStyle: GenerateStyle = (token) => { const { radioButtonColor, controlHeight, @@ -264,7 +264,7 @@ const getRadioButtonStyle: GenerateStyle = token => { lineType, colorBorder, motionDurationSlow, - motionDurationFast, + motionDurationMid, radioButtonPaddingHorizontal, fontSize, radioButtonBg, @@ -305,10 +305,10 @@ const getRadioButtonStyle: GenerateStyle = token => { borderInlineEndWidth: lineWidth, cursor: 'pointer', transition: [ - `color ${motionDurationFast}`, - `background ${motionDurationFast}`, - `border-color ${motionDurationFast}`, - `box-shadow ${motionDurationFast}`, + `color ${motionDurationMid}`, + `background ${motionDurationMid}`, + `border-color ${motionDurationMid}`, + `box-shadow ${motionDurationMid}`, ].join(','), a: { @@ -480,7 +480,7 @@ const getRadioButtonStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Radio', token => { +export default genComponentStyleHook('Radio', (token) => { const { padding, lineWidth, diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index 52c5ff3fa5..6a68f4e1bd 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -12,7 +12,7 @@ interface RateToken extends FullToken<'Rate'> { defaultColor: string; } -const genRateStarStyle: GenerateStyle = token => { +const genRateStarStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -27,7 +27,7 @@ const genRateStarStyle: GenerateStyle = token => { }, '> div': { - transition: `all ${token.motionDurationFast}, outline 0s`, + transition: `all ${token.motionDurationMid}, outline 0s`, '&:hover': { transform: token.rateStarHoverScale, @@ -45,7 +45,7 @@ const genRateStarStyle: GenerateStyle = token => { '&-first, &-second': { color: token.defaultColor, - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, userSelect: 'none', [token.iconCls]: { @@ -80,7 +80,7 @@ const genRateRtlStyle = (token: RateToken): CSSObject => ({ }, }); -const genRateStyle: GenerateStyle = token => { +const genRateStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -122,7 +122,7 @@ const genRateStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Rate', token => { +export default genComponentStyleHook('Rate', (token) => { const { colorFillContent } = token; const rateToken = mergeToken(token, { diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx index bc55e74413..8d9760fdca 100644 --- a/components/segmented/style/index.tsx +++ b/components/segmented/style/index.tsx @@ -52,7 +52,7 @@ const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) color: token.labelColor, backgroundColor: token.bgColor, borderRadius: token.borderRadius, - transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, + transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`, [`${componentCls}-group`]: { position: 'relative', @@ -82,7 +82,7 @@ const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) position: 'relative', textAlign: 'center', cursor: 'pointer', - transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}`, + transition: `color ${token.motionDurationMid} ${token.motionEaseInOut}`, borderRadius: token.borderRadiusSM, '&-selected': { @@ -98,7 +98,7 @@ const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) top: 0, insetInlineStart: 0, borderRadius: token.borderRadiusSM, - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, }, [`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: { diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 7b01ac0ae7..4d0e06c86f 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -17,14 +17,14 @@ export interface SelectToken extends FullToken<'Select'> { } // ============================= Selector ============================= -const genSelectorStyle: GenerateStyle = token => { +const genSelectorStyle: GenerateStyle = (token) => { const { componentCls } = token; return { position: 'relative', backgroundColor: token.colorBgContainer, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, - transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`, + transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`, input: { cursor: 'pointer', @@ -101,7 +101,7 @@ const genStatusStyle = ( // ============================== Styles ============================== // /* Reset search input style */ -const getSearchInputWithoutBorderStyle: GenerateStyle = token => { +const getSearchInputWithoutBorderStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -122,7 +122,7 @@ const getSearchInputWithoutBorderStyle: GenerateStyle = }; // =============================== Base =============================== -const genBaseStyle: GenerateStyle = token => { +const genBaseStyle: GenerateStyle = (token) => { const { componentCls, inputPaddingHorizontalBase, iconCls } = token; return { @@ -215,7 +215,7 @@ const genBaseStyle: GenerateStyle = token => { background: token.colorBgContainer, cursor: 'pointer', opacity: 0, - transition: `color ${token.motionDurationFast} ease, opacity ${token.motionDurationSlow} ease`, + transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`, textRendering: 'auto', '&:before': { @@ -244,7 +244,7 @@ const genBaseStyle: GenerateStyle = token => { }; // ============================== Styles ============================== -const genSelectStyle: GenerateStyle = token => { +const genSelectStyle: GenerateStyle = (token) => { const { componentCls } = token; return [ @@ -335,7 +335,7 @@ export default genComponentStyleHook( return [genSelectStyle(selectToken)]; }, - token => ({ + (token) => ({ zIndexPopup: token.zIndexPopupBase + 50, }), ); diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index b2b71382c7..e6e2fb9f7d 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -28,7 +28,7 @@ interface SliderToken extends FullToken<'Slider'> { } // =============================== Base =============================== -const genBaseStyle: GenerateStyle = token => { +const genBaseStyle: GenerateStyle = (token) => { const { componentCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover } = token; @@ -51,14 +51,14 @@ const genBaseStyle: GenerateStyle = token => { position: 'absolute', backgroundColor: token.colorFillTertiary, borderRadius: token.borderRadiusXS, - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, }, [`${componentCls}-track`]: { position: 'absolute', backgroundColor: token.colorPrimaryBorder, borderRadius: token.borderRadiusXS, - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, }, '&:hover': { @@ -116,11 +116,11 @@ const genBaseStyle: GenerateStyle = token => { borderRadius: '50%', cursor: 'pointer', transition: ` - inset-inline-start ${token.motionDurationFast}, - inset-block-start ${token.motionDurationFast}, - width ${token.motionDurationFast}, - height ${token.motionDurationFast}, - box-shadow ${token.motionDurationFast} + inset-inline-start ${token.motionDurationMid}, + inset-block-start ${token.motionDurationMid}, + width ${token.motionDurationMid}, + height ${token.motionDurationMid}, + box-shadow ${token.motionDurationMid} `, }, @@ -282,7 +282,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject = }; }; // ============================ Horizontal ============================ -const genHorizontalStyle: GenerateStyle = token => { +const genHorizontalStyle: GenerateStyle = (token) => { const { componentCls, marginPartWithMark } = token; return { @@ -297,7 +297,7 @@ const genHorizontalStyle: GenerateStyle = token => { }; // ============================= Vertical ============================= -const genVerticalStyle: GenerateStyle = token => { +const genVerticalStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -311,7 +311,7 @@ const genVerticalStyle: GenerateStyle = token => { // ============================== Export ============================== export default genComponentStyleHook( 'Slider', - token => { + (token) => { const sliderToken = mergeToken(token, { marginPart: (token.controlHeight - token.controlSize) / 2, marginFull: token.controlSize / 2, @@ -323,7 +323,7 @@ export default genComponentStyleHook( genVerticalStyle(sliderToken), ]; }, - token => { + (token) => { // Handle line width is always width-er 1px const increaseHandleWidth = 1; const controlSize = token.controlHeightLG / 4; diff --git a/components/steps/style/inline.ts b/components/steps/style/inline.ts index 335bc267f2..e674d801f7 100644 --- a/components/steps/style/inline.ts +++ b/components/steps/style/inline.ts @@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { StepsToken } from '.'; import type { GenerateStyle } from '../../theme'; -const genStepsInlineStyle: GenerateStyle = token => { +const genStepsInlineStyle: GenerateStyle = (token) => { const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token; const containerPaddingTop = token.paddingXS + token.lineWidth; const titleStyle = { @@ -24,7 +24,7 @@ const genStepsInlineStyle: GenerateStyle = token => { margin: `0 ${token.marginXXS / 2}px`, borderRadius: token.borderRadiusSM, cursor: 'pointer', - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, '&:hover': { background: token.controlItemBgHover, }, diff --git a/components/style/motion/zoom.tsx b/components/style/motion/zoom.tsx index 6a67fb3b44..891c026f47 100644 --- a/components/style/motion/zoom.tsx +++ b/components/style/motion/zoom.tsx @@ -206,7 +206,7 @@ export const initZoomMotion = ( motionCls, inKeyframes, outKeyframes, - motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid, + motionName === 'zoom-big-fast' ? token.motionDurationMid : token.motionDurationMid, ), { [` diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx index 94d42001ab..5967ed41cc 100644 --- a/components/switch/style/index.tsx +++ b/components/switch/style/index.tsx @@ -26,7 +26,7 @@ interface SwitchToken extends FullToken<'Switch'> { switchHandleActiveInset: string; } -const genSwitchSmallStyle: GenerateStyle = token => { +const genSwitchSmallStyle: GenerateStyle = (token) => { const { componentCls } = token; const switchInnerCls = `${componentCls}-inner`; @@ -106,7 +106,7 @@ const genSwitchSmallStyle: GenerateStyle = token => { }; }; -const genSwitchLoadingStyle: GenerateStyle = token => { +const genSwitchLoadingStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -125,7 +125,7 @@ const genSwitchLoadingStyle: GenerateStyle = token => { }; }; -const genSwitchHandleStyle: GenerateStyle = token => { +const genSwitchHandleStyle: GenerateStyle = (token) => { const { componentCls } = token; const switchHandleCls = `${componentCls}-handle`; @@ -172,7 +172,7 @@ const genSwitchHandleStyle: GenerateStyle = token => { }; }; -const genSwitchInnerStyle: GenerateStyle = token => { +const genSwitchInnerStyle: GenerateStyle = (token) => { const { componentCls } = token; const switchInnerCls = `${componentCls}-inner`; @@ -260,7 +260,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => { border: '0', borderRadius: 100, cursor: 'pointer', - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, userSelect: 'none', [`&:hover:not(${componentCls}-disabled)`]: { @@ -296,7 +296,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => { }; // ============================== Export ============================== -export default genComponentStyleHook('Switch', token => { +export default genComponentStyleHook('Switch', (token) => { const switchHeight = token.fontSize * token.lineHeight; const switchHeightSM = token.controlHeight / 2; const switchPadding = 2; // This is magic diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx index eb77492c5f..ec1f5556c6 100644 --- a/components/tag/style/index.tsx +++ b/components/tag/style/index.tsx @@ -77,7 +77,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => { border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, borderRadius: token.borderRadiusSM, opacity: 1, - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, textAlign: 'start', // RTL @@ -94,7 +94,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => { color: token.colorTextDescription, fontSize: token.tagIconSize, cursor: 'pointer', - transition: `all ${token.motionDurationFast}`, + transition: `all ${token.motionDurationMid}`, '&:hover': { color: token.colorTextHeading, @@ -148,7 +148,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => { }; // ============================== Export ============================== -export default genComponentStyleHook('Tag', token => { +export default genComponentStyleHook('Tag', (token) => { const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token; const tagHeight = Math.round(fontSize * lineHeight); diff --git a/components/tour/style/index.tsx b/components/tour/style/index.tsx index 3a6b7fd03c..da9f66cbcb 100644 --- a/components/tour/style/index.tsx +++ b/components/tour/style/index.tsx @@ -15,7 +15,7 @@ interface TourToken extends FullToken<'Tour'> { } // =============================== Base =============================== -const genBaseStyle: GenerateStyle = token => { +const genBaseStyle: GenerateStyle = (token) => { const { componentCls, lineHeight, @@ -89,7 +89,7 @@ const genBaseStyle: GenerateStyle = token => { width: tourCloseSize, height: tourCloseSize, borderRadius: token.borderRadiusSM, - transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -236,7 +236,7 @@ const genBaseStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Tour', token => { +export default genComponentStyleHook('Tour', (token) => { const { borderRadiusLG, fontSize, lineHeight } = token; const TourToken = mergeToken(token, { tourZIndexPopup: token.zIndexPopupBase + 70, diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx index a03392cc4c..96b9464e04 100644 --- a/components/tree/style/index.tsx +++ b/components/tree/style/index.tsx @@ -281,7 +281,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => background: 'transparent', borderRadius: token.borderRadius, 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': { backgroundColor: token.controlItemBgHover, @@ -393,7 +393,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { insetInlineEnd: 0, bottom: treeNodePadding, insetInlineStart: 0, - transition: `background-color ${token.motionDurationFast}`, + transition: `background-color ${token.motionDurationMid}`, content: '""', pointerEvents: 'none', }, @@ -411,7 +411,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { // >>> Switcher [`${treeCls}-switcher`]: { - transition: `color ${token.motionDurationFast}`, + transition: `color ${token.motionDurationMid}`, }, // >>> Title