refactor(css): replace background transition with background-color (#56598)

* fix(css): replace background transition with background-color

* chore: update

---------

Co-authored-by: thinkasany <480968828@qq.com>

components/badge/style/index.ts

@@ -192,7 +192,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
         background: token.badgeColor,
         borderRadius: calc(indicatorHeight).div(2).equal(),
         boxShadow: `0 0 0 ${unit(badgeShadowSize)} ${token.badgeShadowColor}`,
-        transition: `background ${token.motionDurationMid}`,
+        transition: `background-color ${token.motionDurationMid}`,
 
         a: {
           color: token.badgeTextColor,

components/calendar/style/index.ts

@@ -196,7 +196,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
         border: 0,
         borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
         borderRadius: 0,
-        transition: `background ${token.motionDurationSlow}`,
+        transition: `background-color ${token.motionDurationSlow}`,
         '&-value': {
           lineHeight: unit(token.dateValueHeight),
           transition: `color ${token.motionDurationSlow}`,

components/date-picker/style/panel.ts

@@ -45,7 +45,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       height: cellHeight,
       lineHeight: unit(cellHeight),
       borderRadius: borderRadiusSM,
-      transition: `background ${motionDurationMid}`,
+      transition: `background-color ${motionDurationMid}`,
     },
 
     // >>> Hover
@@ -446,7 +446,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
       '&-week-panel-row': {
         td: {
           '&:before': {
-            transition: `background ${motionDurationMid}`,
+            transition: `background-color ${motionDurationMid}`,
           },
 
           '&:first-child:before': {
@@ -542,7 +542,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           overflowY: 'hidden',
           textAlign: 'start',
           listStyle: 'none',
-          transition: `background ${motionDurationMid}`,
+          transition: `background-color ${motionDurationMid}`,
           overflowX: 'hidden',
 
           '&::-webkit-scrollbar': {
@@ -597,7 +597,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
                 lineHeight: unit(timeCellHeight),
                 borderRadius: borderRadiusSM,
                 cursor: 'pointer',
-                transition: `background ${motionDurationMid}`,
+                transition: `background-color ${motionDurationMid}`,
 
                 '&:hover': {
                   background: cellHoverBg,

components/layout/style/sider.ts

@@ -88,7 +88,7 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
         background: siderBg,
         borderRadius: `0 ${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0`,
         cursor: 'pointer',
-        transition: `background ${motionDurationSlow} ease`,
+        transition: `background-color ${motionDurationSlow} ease`,
 
         '&::after': {
           position: 'absolute',

components/mentions/style/index.ts

@@ -111,7 +111,7 @@ const genDropdownStyle: GenerateStyle<MentionsToken> = (token) => {
             fontWeight: 'normal',
             lineHeight,
             cursor: 'pointer',
-            transition: `background ${motionDurationSlow} ease`,
+            transition: `background-color ${motionDurationSlow} ease`,
 
             '&:hover': {
               backgroundColor: controlItemBgHover,

components/menu/style/horizontal.ts

@@ -43,9 +43,10 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
       },
 
       [`${componentCls}-item, ${componentCls}-submenu-title`]: {
-        transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`].join(
-          ',',
-        ),
+        transition: [
+          `border-color ${motionDurationSlow}`,
+          `background-color ${motionDurationSlow}`,
+        ].join(','),
       },
 
       // ===================== Sub Menu =====================

components/menu/style/index.ts

@@ -428,7 +428,7 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
       cursor: 'pointer',
       transition: [
         `border-color ${motionDurationSlow}`,
-        `background ${motionDurationSlow}`,
+        `background-color ${motionDurationSlow}`,
         `padding calc(${motionDurationSlow} + 0.1s) ${motionEaseInOut}`,
       ].join(','),
 
@@ -517,7 +517,7 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
           backgroundColor: 'currentcolor',
           borderRadius,
           transition: [
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
             `transform ${motionDurationSlow} ${motionEaseInOut}`,
             `top ${motionDurationSlow} ${motionEaseInOut}`,
             `color ${motionDurationSlow} ${motionEaseInOut}`,
@@ -621,14 +621,14 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
         [`&-horizontal ${componentCls}-submenu`]: {
           transition: [
             `border-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
           ].join(','),
         },
 
         [`${componentCls}-submenu, ${componentCls}-submenu-inline`]: {
           transition: [
             `border-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
             `padding ${motionDurationMid} ${motionEaseInOut}`,
           ].join(','),
         },
@@ -636,7 +636,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
         [`${componentCls}-submenu ${componentCls}-sub`]: {
           cursor: 'initial',
           transition: [
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
             `padding ${motionDurationSlow} ${motionEaseInOut}`,
           ].join(','),
         },

components/menu/style/vertical.ts

@@ -127,7 +127,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
             alignItems: 'center',
             transition: [
               `border-color ${motionDurationSlow}`,
-              `background ${motionDurationSlow}`,
+              `background-color ${motionDurationSlow}`,
               `padding ${motionDurationFast} ${motionEaseOut}`,
             ].join(','),
 

components/radio/style/index.ts

@@ -390,7 +390,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
       cursor: 'pointer',
       transition: [
         `color ${motionDurationMid}`,
-        `background ${motionDurationMid}`,
+        `background-color ${motionDurationMid}`,
         `box-shadow ${motionDurationMid}`,
       ].join(','),
 

components/select/style/dropdown.ts

@@ -96,7 +96,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
         [selectItemCls]: {
           ...genItemStyle(token),
           cursor: 'pointer',
-          transition: `background ${token.motionDurationSlow} ease`,
+          transition: `background-color ${token.motionDurationSlow} ease`,
           borderRadius: token.borderRadiusSM,
 
           // =========== Group ============

components/steps/style/icon.ts

@@ -37,7 +37,7 @@ const genIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         textAlign: 'center',
         borderRadius: varRef('icon-size'),
         border: `${varRef('icon-border-width')} ${lineType} transparent`,
-        transition: ['background', 'border', 'color', 'inset', 'transform']
+        transition: ['background-color', 'border', 'color', 'inset', 'transform']
           .map((key) => `${key} ${motionDurationSlow}`)
           .join(', '),
         zIndex: 1,

components/steps/style/inline.ts

@@ -51,7 +51,7 @@ const genInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           marginInline: token.calc(token.marginXXS).div(2).equal(),
           borderRadius: token.borderRadiusSM,
           cursor: 'pointer',
-          transition: `background ${token.motionDurationMid}`,
+          transition: `background-color ${token.motionDurationMid}`,
           '&:hover': {
             background: token.controlItemBgHover,
           },

components/steps/style/panel.ts

@@ -72,7 +72,7 @@ const genPanelStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
               .equal(),
             [varName('item-base-width')]: `calc(${varRef('item-base-height')} * 0.7071)`,
 
-            transition: `background ${motionDurationMid}`,
+            transition: `background-color ${motionDurationMid}`,
           },
         },
 

components/table/style/index.ts

@@ -316,7 +316,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
           textAlign: 'start',
           background: tableHeaderBg,
           borderBottom: tableBorder,
-          transition: `background ${motionDurationMid} ease`,
+          transition: `background-color ${motionDurationMid} ease`,
 
           "&[colspan]:not([colspan='1'])": {
             textAlign: 'center',
@@ -345,7 +345,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       [`${componentCls}-tbody`]: {
         '> tr': {
           '> th, > td': {
-            transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
+            transition: `background-color ${motionDurationMid}, border-color ${motionDurationMid}`,
             borderBottom: tableBorder,
 
             // ========================= Nest Table ===========================
@@ -376,7 +376,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
             textAlign: 'start',
             background: tableHeaderBg,
             borderBottom: tableBorder,
-            transition: `background ${motionDurationMid} ease`,
+            transition: `background-color ${motionDurationMid} ease`,
           },
 
           // measure cell styles

components/table/style/virtual.ts

@@ -17,7 +17,7 @@ const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       [`${componentCls}-tbody-virtual`]: {
         [`${componentCls}-tbody-virtual-holder-inner`]: {
           [`
-            & > ${componentCls}-row, 
+            & > ${componentCls}-row,
             & > div:not(${componentCls}-row) > ${componentCls}-row
           `]: {
             display: 'flex',
@@ -28,7 +28,7 @@ const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
 
         [`${componentCls}-cell`]: {
           borderBottom: tableBorder,
-          transition: `background ${motionDurationMid}`,
+          transition: `background-color ${motionDurationMid}`,
         },
 
         [`${componentCls}-expanded-row`]: {