feat: v5 motion duration adjustment (ant-design#37438)

peter-boot · Sep 7, 2022 · 2cf2459 · 2cf2459
1 parent 229d0d8
commit 2cf2459
Show file tree

Hide file tree

Showing 21 changed files with 50 additions and 48 deletions.
diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx
@@ -177,7 +177,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
   const {
     componentCls,
     iconCls,
-    motionDurationSlow: duration,
+    motionDurationFast,
     marginXS,
     fontSizeIcon,
     colorIcon,
@@ -203,7 +203,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
 
         [`${iconCls}-close`]: {
           color: colorIcon,
-          transition: `color ${duration}`,
+          transition: `color ${motionDurationFast}`,
           '&:hover': {
             color: colorIconHover,
           },
@@ -212,7 +212,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
 
       '&-close-text': {
         color: colorIcon,
-        transition: `color ${duration}`,
+        transition: `color ${motionDurationFast}`,
         '&:hover': {
           color: colorIconHover,
         },

diff --git a/components/back-top/style/index.tsx b/components/back-top/style/index.tsx
@@ -50,11 +50,11 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
         textAlign: 'center',
         backgroundColor: token.backTopBackground,
         borderRadius: backTopSize,
-        transition: `all ${token.motionDurationSlow}`,
+        transition: `all ${token.motionDurationFast}`,
 
         '&:hover': {
           backgroundColor: token.backTopHoverBackground,
-          transition: `all ${token.motionDurationSlow}`,
+          transition: `all ${token.motionDurationFast}`,
         },
       },
 

diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx
@@ -116,7 +116,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         background: token.badgeColor,
         borderRadius: token.badgeHeight / 2,
         boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
-        transition: `background ${token.motionDurationSlow}`,
+        transition: `background ${token.motionDurationFast}`,
 
         a: {
           color: token.badgeTextColor,

diff --git a/components/breadcrumb/style/index.tsx b/components/breadcrumb/style/index.tsx
@@ -37,7 +37,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
 
       a: {
         color: token.breadcrumbLinkColor,
-        transition: `color ${token.motionDurationSlow}`,
+        transition: `color ${token.motionDurationFast}`,
         padding: `0 ${token.paddingXXS}px`,
         borderRadius: token.radiusSM,
         height: token.lineHeight * token.fontSize,

diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx
@@ -27,7 +27,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
       backgroundColor: 'transparent',
       border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
       cursor: 'pointer',
-      transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+      transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
       userSelect: 'none',
       touchAction: 'manipulation',
       lineHeight: token.lineHeight,

diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
@@ -93,7 +93,7 @@ const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       ${lineWidth}px 0 0 0 ${colorBorderSecondary} inset,
       0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset;
     `,
-    transition: `all ${token.motionDurationSlow}`,
+    transition: `all ${token.motionDurationFast}`,
 
     '&-hoverable:hover': {
       position: 'relative',
@@ -131,15 +131,15 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
         '&:hover': {
           color: token.colorPrimary,
-          transition: `color ${token.motionDurationSlow}`,
+          transition: `color ${token.motionDurationFast}`,
         },
 
         [`a:not(${componentCls}-btn), > ${iconCls}`]: {
           display: 'inline-block',
           width: '100%',
           color: token.colorTextDescription,
           lineHeight: `${token.fontSize * token.lineHeight}px`,
-          transition: `color ${token.motionDurationSlow}`,
+          transition: `color ${token.motionDurationFast}`,
 
           '&:hover': {
             color: token.colorPrimary,
@@ -299,7 +299,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
     [`${componentCls}-hoverable`]: {
       cursor: 'pointer',
-      transition: `box-shadow ${token.motionDurationSlow}, border-color ${token.motionDurationSlow}`,
+      transition: `box-shadow ${token.motionDurationFast}, border-color ${token.motionDurationFast}`,
 
       '&:hover': {
         borderColor: 'transparent',

diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx
@@ -92,7 +92,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
                 whiteSpace: 'nowrap',
                 textOverflow: 'ellipsis',
                 cursor: 'pointer',
-                transition: `all ${token.motionDurationSlow}`,
+                transition: `all ${token.motionDurationFast}`,
 
                 '&:hover': {
                   background: token.controlItemBgHover,

diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
@@ -102,7 +102,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
           border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
           borderRadius: token.controlRadiusSM,
           borderCollapse: 'separate',
-          transition: `all ${token.motionDurationSlow}`,
+          transition: `all ${token.motionDurationFast}`,
 
           '&:after': {
             position: 'absolute',

diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
@@ -81,7 +81,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       height: token.pickerPanelCellHeight,
       lineHeight: `${token.pickerPanelCellHeight}px`,
       borderRadius: token.controlRadiusSM,
-      transition: `background ${token.motionDurationSlow}, border ${token.motionDurationSlow}`,
+      transition: `background ${token.motionDurationFast}, border ${token.motionDurationFast}`,
     },
 
     // >>> Hover
@@ -320,7 +320,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           background: 'transparent',
           border: 0,
           cursor: 'pointer',
-          transition: `color ${token.motionDurationSlow}`,
+          transition: `color ${token.motionDurationFast}`,
         },
 
         '> button': {
@@ -613,7 +613,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
 
         '&-row': {
           td: {
-            transition: `background ${token.motionDurationSlow}`,
+            transition: `background ${token.motionDurationFast}`,
           },
 
           '&:hover td': {
@@ -700,7 +700,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           overflowY: 'hidden',
           textAlign: 'start',
           listStyle: 'none',
-          transition: `background ${token.motionDurationSlow}`,
+          transition: `background ${token.motionDurationFast}`,
 
           '&::after': {
             display: 'block',
@@ -744,7 +744,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
                 lineHeight: `${token.pickerTimePanelCellHeight}px`,
                 borderRadius: 0,
                 cursor: 'pointer',
-                transition: `background ${token.motionDurationSlow}`,
+                transition: `background ${token.motionDurationFast}`,
 
                 '&:hover': {
                   background: token.controlItemBgHover,
@@ -835,7 +835,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
       background: token.colorBgContainer,
       border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
       borderRadius: token.controlRadius,
-      transition: `border ${token.motionDurationSlow}, box-shadow ${token.motionDurationSlow}`,
+      transition: `border ${token.motionDurationFast}, box-shadow ${token.motionDurationFast}`,
 
       '&:hover, &-focused': {
         ...genHoverStyle(token),
@@ -953,7 +953,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
         transform: 'translateY(-50%)',
         cursor: 'pointer',
         opacity: 0,
-        transition: `opacity ${token.motionDurationSlow}, color ${token.motionDurationSlow}`,
+        transition: `opacity ${token.motionDurationFast}, color ${token.motionDurationFast}`,
 
         '> *': {
           verticalAlign: 'top',

diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx
@@ -19,6 +19,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
     colorBgMask,
     colorBgElevated,
     motionDurationSlow,
+    motionDurationFast,
     padding,
     paddingLG,
     fontSizeLG,
@@ -152,7 +153,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
         border: 0,
         outline: 0,
         cursor: 'pointer',
-        transition: `color ${motionDurationSlow}`,
+        transition: `color ${motionDurationFast}`,
         textRendering: 'auto',
 
         '&:focus, &:hover': {

diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx
@@ -38,7 +38,6 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
     colorPrimary,
     controlHeight,
     inputPaddingHorizontal,
-    motionDurationSlow,
     colorBgContainer,
     motionDurationMid,
     colorTextDisabled,
@@ -149,7 +148,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
             border: 0,
             borderRadius: controlRadius,
             outline: 0,
-            transition: `all ${motionDurationSlow} linear`,
+            transition: `all ${motionDurationFast} linear`,
             appearance: 'textfield',
             ...genPlaceholderStyle(token.colorTextPlaceholder),
 

diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx
@@ -129,7 +129,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
   borderStyle: token.controlLineType,
   borderColor: token.colorBorder,
   borderRadius: token.controlRadius,
-  transition: `all ${token.motionDurationSlow}`,
+  transition: `all ${token.motionDurationFast}`,
   ...genPlaceholderStyle(token.colorTextPlaceholder),
 
   '&:hover': {

diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx
@@ -71,6 +71,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
     radioFocusShadow,
     radioSize,
     motionDurationSlow,
+    motionDurationFast,
     motionEaseInOut,
     motionEaseInOutCirc,
     radioButtonBg,
@@ -182,7 +183,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
         borderStyle: 'solid',
         borderWidth: controlLineWidth,
         borderRadius: '50%',
-        transition: `all ${motionDurationSlow}`,
+        transition: `all ${motionDurationFast}`,
       },
 
       [`${componentCls}-input`]: {
@@ -250,6 +251,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
     controlLineType,
     colorBorder,
     motionDurationSlow,
+    motionDurationFast,
     radioButtonPaddingHorizontal,
     fontSize,
     radioButtonBg,
@@ -291,10 +293,10 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
       borderInlineEndWidth: controlLineWidth,
       cursor: 'pointer',
       transition: [
-        `color ${motionDurationSlow}`,
-        `background ${motionDurationSlow}`,
-        `border-color ${motionDurationSlow}`,
-        `box-shadow ${motionDurationSlow}`,
+        `color ${motionDurationFast}`,
+        `background ${motionDurationFast}`,
+        `border-color ${motionDurationFast}`,
+        `box-shadow ${motionDurationFast}`,
       ].join(','),
 
       a: {

diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx
@@ -27,7 +27,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
       },
 
       '> div': {
-        transition: `all ${token.motionDurationSlow}, outline 0s`,
+        transition: `all ${token.motionDurationFast}, outline 0s`,
 
         '&:hover': {
           transform: token.rateStarHoverScale,
@@ -45,7 +45,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
 
       '&-first, &-second': {
         color: token.defaultColor,
-        transition: `all ${token.motionDurationSlow}`,
+        transition: `all ${token.motionDurationFast}`,
         userSelect: 'none',
 
         [token.iconCls]: {

diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx
@@ -54,7 +54,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
       color: token.labelColor,
       backgroundColor: token.bgColor,
       borderRadius: token.controlRadius,
-      transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+      transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
 
       [`${componentCls}-group`]: {
         position: 'relative',
@@ -84,7 +84,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
         position: 'relative',
         textAlign: 'center',
         cursor: 'pointer',
-        transition: `color ${token.motionDurationSlow} ${token.motionEaseInOut}, background-color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+        transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}, background-color ${token.motionDurationFast} ${token.motionEaseInOut}`,
         borderRadius: token.controlRadiusSM,
 
         '&-selected': {

diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx
@@ -23,7 +23,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
     position: 'relative',
     backgroundColor: token.colorBgContainer,
     border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
-    transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+    transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
 
     input: {
       cursor: 'pointer',
@@ -218,7 +218,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         background: token.colorBgContainer,
         cursor: 'pointer',
         opacity: 0,
-        transition: `color ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`,
+        transition: `color ${token.motionDurationFast} ease, opacity ${token.motionDurationSlow} ease`,
         textRendering: 'auto',
 
         '&:before': {

diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx
@@ -363,11 +363,11 @@ export default genComponentStyleHook(
     return [genBaseStyle(skeletonToken)];
   },
   token => {
-    const { colorFillContent, colorTextPlaceholder } = token;
+    const { colorFillContent, colorFill } = token;
 
     return {
       color: colorFillContent,
-      colorGradientEnd: colorTextPlaceholder,
+      colorGradientEnd: colorFill,
     };
   },
 );
diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
@@ -58,14 +58,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         position: 'absolute',
         backgroundColor: token.colorFillTertiary,
         borderRadius: token.controlRadiusXS,
-        transition: `background-color ${token.motionDurationSlow}`,
+        transition: `background-color ${token.motionDurationFast}`,
       },
 
       [`${componentCls}-track`]: {
         position: 'absolute',
         backgroundColor: token.colorPrimaryBorder,
         borderRadius: token.controlRadiusXS,
-        transition: `background-color ${token.motionDurationSlow}`,
+        transition: `background-color ${token.motionDurationFast}`,
       },
 
       [`${componentCls}-handle`]: {
@@ -78,8 +78,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         borderRadius: '50%',
         cursor: 'pointer',
         transition: `
-          border ${token.motionDurationSlow},
-          outline ${token.motionDurationSlow}
+          border ${token.motionDurationFast},
+          outline ${token.motionDurationFast}
         `,
 
         [`${componentCls}-dragging`]: {

diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx
@@ -156,7 +156,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
       border: '0',
       borderRadius: 100,
       cursor: 'pointer',
-      transition: `all ${token.switchDuration}`,
+      transition: `all ${token.motionDurationFast}`,
       userSelect: 'none',
 
       '&:hover': {

diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx
@@ -74,7 +74,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
       border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
       borderRadius: token.radiusSM,
       opacity: 1,
-      transition: `all ${token.motionDurationSlow}`,
+      transition: `all ${token.motionDurationFast}`,
       textAlign: 'start',
 
       // RTL
@@ -91,7 +91,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
         color: token.colorTextDescription,
         fontSize: token.tagIconSize,
         cursor: 'pointer',
-        transition: `all ${token.motionDurationSlow}`,
+        transition: `all ${token.motionDurationFast}`,
 
         '&:hover': {
           color: token.colorTextHeading,