style: fix Drawer close icon style

ant-design · Mar 16, 2024 · c7e9c80 · c7e9c80
1 parent f7bab92
commit c7e9c80
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 26 deletions.
diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts
@@ -20,10 +20,6 @@ export interface ComponentToken {
    * @descEN Horizontal padding of footer
    */
   footerPaddingInline: number;
-  /** @internal */
-  closeBtnHoverBg: string;
-  /** @internal */
-  closeBtnActiveBg: string;
 }
 
 export interface DrawerToken extends FullToken<'Drawer'> {}
@@ -48,8 +44,8 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
     marginXXS,
     colorIcon,
     colorIconHover,
-    closeBtnHoverBg,
-    closeBtnActiveBg,
+    colorBgTextHover,
+    colorBgTextActive,
     controlHeight,
     colorText,
     fontWeightStrong,
@@ -180,6 +176,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
         height: controlHeight,
         borderRadius: borderRadiusSM,
         justifyContent: 'center',
+        alignItems: 'center',
         marginInlineEnd: marginXXS,
         color: colorIcon,
         fontWeight: fontWeightStrong,
@@ -197,11 +194,11 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
         textRendering: 'auto',
 
         '&:hover': {
-          backgroundColor: closeBtnHoverBg,
+          backgroundColor: colorBgTextHover,
         },
 
         '&:active': {
-          backgroundColor: closeBtnActiveBg,
+          backgroundColor: colorBgTextActive,
         },
 
         '&:focus, &:hover': {
@@ -247,8 +244,6 @@ export const prepareComponentToken: GetDefaultToken<'Drawer'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase,
   footerPaddingBlock: token.paddingXS,
   footerPaddingInline: token.padding,
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
-  closeBtnActiveBg: token.wireframe ? 'transparent' : token.colorFillContentHover,
 });
 
 // ============================== Export ==============================

diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts
@@ -42,10 +42,6 @@ export interface ComponentToken {
    */
   footerBg: string;
 
-  /** @internal */
-  closeBtnHoverBg: string;
-  /** @internal */
-  closeBtnActiveBg: string;
   /** @internal */
   contentPadding: number | string;
   /** @internal */
@@ -249,12 +245,12 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
 
           '&:hover': {
             color: token.modalCloseIconHoverColor,
-            backgroundColor: token.closeBtnHoverBg,
+            backgroundColor: token.colorBgTextHover,
             textDecoration: 'none',
           },
 
           '&:active': {
-            backgroundColor: token.closeBtnActiveBg,
+            backgroundColor: token.colorBgTextActive,
           },
 
           ...genFocusStyle(token),
@@ -367,8 +363,6 @@ export const prepareComponentToken = (token: GlobalToken) => ({
   titleColor: token.colorTextHeading,
 
   // internal
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
-  closeBtnActiveBg: token.wireframe ? 'transparent' : token.colorFillContentHover,
   contentPadding: token.wireframe
     ? 0
     : `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,

diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
@@ -21,8 +21,6 @@ export interface ComponentToken {
    * @descEN Width of Notification
    */
   width: number;
-  /** @internal */
-  closeBtnHoverBg: string;
 }
 
 export interface NotificationToken extends FullToken<'Notification'> {
@@ -151,7 +149,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
 
       '&:hover': {
         color: token.colorIconHover,
-        backgroundColor: token.closeBtnHoverBg,
+        backgroundColor: token.colorBgTextHover,
       },
     },
 
@@ -262,7 +260,6 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 export const prepareComponentToken = (token: AliasToken) => ({
   zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
   width: 384,
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
 });
 
 export const prepareNotificationToken: (

diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts
@@ -33,8 +33,6 @@ export interface ComponentToken extends ArrowOffsetToken, ArrowToken {
    * @descEN Hover background color of next button in primary type
    */
   primaryNextBtnHoverBg: string;
-  /** @internal */
-  closeBtnHoverBg: string;
 }
 
 interface TourToken extends FullToken<'Tour'> {
@@ -129,7 +127,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
 
             '&:hover': {
               color: token.colorIconHover,
-              backgroundColor: token.closeBtnHoverBg,
+              backgroundColor: token.colorBgTextHover,
             },
           },
 
@@ -271,7 +269,6 @@ export const prepareComponentToken: GetDefaultToken<'Tour'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase + 70,
   closeBtnSize: token.fontSize * token.lineHeight,
   primaryPrevBtnBg: new TinyColor(token.colorTextLightSolid).setAlpha(0.15).toRgbString(),
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
   primaryNextBtnHoverBg: new TinyColor(token.colorBgTextHover)
     .onBackground(token.colorWhite)
     .toRgbString(),