style: unify Modal and Drawer close icon style (#47909)

* style: unify Modal and Drawer close icon style * style: fix Drawer close icon style * style: add focus style * style: unify close btn style * test: update snapshots * style: tweak drawer close icon size
2024-11-23 18:50:06 +08:00 · 2024-03-16 23:21:09 +08:00 · 2024-03-16 23:21:09 +08:00 · e8839ae48b
commit e8839ae48b
parent 96bade2dad
11 changed files with 130 additions and 131 deletions
--- a/components/drawer/style/index.ts
+++ b/components/drawer/style/index.ts
@ -1,5 +1,6 @@
 import { unit } from '@ant-design/cssinjs';

+import { genFocusStyle } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
@ -27,12 +28,14 @@ export interface DrawerToken extends FullToken<'Drawer'> {}
 // =============================== Base ===============================
 const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
  const {
+    borderRadiusSM,
    componentCls,
    zIndexPopup,
    colorBgMask,
    colorBgElevated,
    motionDurationSlow,
    motionDurationMid,
+    paddingXS,
    padding,
    paddingLG,
    fontSizeLG,
@ -40,13 +43,16 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
    lineWidth,
    lineType,
    colorSplit,
-    marginSM,
+    marginXS,
    colorIcon,
    colorIconHover,
+    colorBgTextHover,
+    colorBgTextActive,
    colorText,
    fontWeightStrong,
    footerPaddingBlock,
    footerPaddingInline,
+    calc,
  } = token;

  const wrapperCls = `${componentCls}-content-wrapper`;
@ -167,8 +173,13 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
      },

      [`${componentCls}-close`]: {
-        display: 'inline-block',
-        marginInlineEnd: marginSM,
+        display: 'inline-flex',
+        width: calc(fontSizeLG).add(paddingXS).equal(),
+        height: calc(fontSizeLG).add(paddingXS).equal(),
+        borderRadius: borderRadiusSM,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginInlineEnd: marginXS,
        color: colorIcon,
        fontWeight: fontWeightStrong,
        fontSize: fontSizeLG,
@ -179,15 +190,21 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
        textDecoration: 'none',
        background: 'transparent',
        border: 0,
-        outline: 0,
        cursor: 'pointer',
-        transition: `color ${motionDurationMid}`,
+        transition: `all ${motionDurationMid}`,
        textRendering: 'auto',

-        '&:focus, &:hover': {
+        '&:hover': {
          color: colorIconHover,
+          backgroundColor: colorBgTextHover,
          textDecoration: 'none',
        },
+
+        '&:active': {
+          backgroundColor: colorBgTextActive,
+        },
+
+        ...genFocusStyle(token),
      },

      [`${componentCls}-title`]: {
--- 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 */
@ -78,8 +74,8 @@ export interface ModalToken extends FullToken<'Modal'> {
  modalFooterBorderColorSplit: string;
  modalFooterBorderStyle: string;
  modalFooterBorderWidth: number;
-  modalIconHoverColor: string;
  modalCloseIconColor: string;
+  modalCloseIconHoverColor: string;
  modalCloseBtnSize: number | string;
  modalConfirmIconSize: number | string;
  modalTitleHeight: number | string;
@ -248,13 +244,13 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
          },

          '&:hover': {
-            color: token.modalIconHoverColor,
-            backgroundColor: token.closeBtnHoverBg,
+            color: token.modalCloseIconHoverColor,
+            backgroundColor: token.colorBgTextHover,
            textDecoration: 'none',
          },

          '&:active': {
-            backgroundColor: token.closeBtnActiveBg,
+            backgroundColor: token.colorBgTextActive,
          },

          ...genFocusStyle(token),
@ -348,9 +344,9 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalT
    modalFooterBorderColorSplit: token.colorSplit,
    modalFooterBorderStyle: token.lineType,
    modalFooterBorderWidth: token.lineWidth,
-    modalIconHoverColor: token.colorIconHover,
    modalCloseIconColor: token.colorIcon,
-    modalCloseBtnSize: token.fontHeight,
+    modalCloseIconHoverColor: token.colorIconHover,
+    modalCloseBtnSize: token.controlHeight,
    modalConfirmIconSize: token.fontHeight,
    modalTitleHeight: token.calc(token.titleFontSize).mul(token.titleLineHeight).equal(),
  });
@ -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)}`,
--- a/components/notification/PurePanel.tsx
+++ b/components/notification/PurePanel.tsx
@ -27,13 +27,7 @@ export function getCloseIcon(prefixCls: string, closeIcon?: React.ReactNode): Re
  if (closeIcon === null || closeIcon === false) {
    return null;
  }
-  return (
-    closeIcon || (
-      <span className={`${prefixCls}-close-x`}>
-        <CloseOutlined className={`${prefixCls}-close-icon`} />
-      </span>
-    )
-  );
+  return closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />;
 }

 export interface PureContentProps {
--- a/components/notification/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/notification/tests/snapshots/demo-extend.test.ts.snap
@ -510,28 +510,24 @@ exports[`renders components/notification/demo/render-panel.tsx extend context co
      tabindex="0"
    >
      <span
-        class="ant-notification-close-x"
+        aria-label="close"
+        class="anticon anticon-close ant-notification-close-icon"
+        role="img"
      >
-        <span
-          aria-label="close"
-          class="anticon anticon-close ant-notification-close-icon"
-          role="img"
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
        >
-          <svg
-            aria-hidden="true"
-            data-icon="close"
-            fill="currentColor"
-            fill-rule="evenodd"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+          />
+        </svg>
      </span>
    </a>
  </div>
--- a/components/notification/tests/snapshots/demo.test.ts.snap
+++ b/components/notification/tests/snapshots/demo.test.ts.snap
@ -498,28 +498,24 @@ exports[`renders components/notification/demo/render-panel.tsx correctly 1`] = `
      tabindex="0"
    >
      <span
-        class="ant-notification-close-x"
+        aria-label="close"
+        class="anticon anticon-close ant-notification-close-icon"
+        role="img"
      >
-        <span
-          aria-label="close"
-          class="anticon anticon-close ant-notification-close-icon"
-          role="img"
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
        >
-          <svg
-            aria-hidden="true"
-            data-icon="close"
-            fill="currentColor"
-            fill-rule="evenodd"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+          />
+        </svg>
      </span>
    </a>
  </div>
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';

 import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
-import { resetComponent } from '../../style';
+import { resetComponent, genFocusStyle } from '../../style';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
@ -21,8 +21,6 @@ export interface ComponentToken {
   * @descEN Width of Notification
   */
  width: number;
-  /** @internal */
-  closeBtnHoverBg: string;
 }

 export interface NotificationToken extends FullToken<'Notification'> {
@ -80,11 +78,6 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
      wordWrap: 'break-word',
    },

-    [`${componentCls}-close-icon`]: {
-      fontSize,
-      cursor: 'pointer',
-    },
-
    [`${noticeCls}-message`]: {
      marginBottom: token.marginXS,
      color: colorTextHeading,
@ -151,8 +144,14 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {

      '&:hover': {
        color: token.colorIconHover,
-        backgroundColor: token.closeBtnHoverBg,
+        backgroundColor: token.colorBgTextHover,
      },
+
+      '&:active': {
+        backgroundColor: token.colorBgTextActive,
+      },
+
+      ...genFocusStyle(token),
    },

    [`${noticeCls}-btn`]: {
@ -262,7 +261,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: (
--- a/components/tour/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tour/tests/snapshots/demo-extend.test.ts.snap
@ -88,9 +88,9 @@ Array [
      <div
        class="ant-tour-inner"
      >
-        <span
-          aria-label="Close"
+        <button
          class="ant-tour-close"
+          type="button"
        >
          <span
            aria-label="close"
@ -112,7 +112,7 @@ Array [
              />
            </svg>
          </span>
-        </span>
+        </button>
        <div
          class="ant-tour-cover"
        >
@ -260,9 +260,9 @@ Array [
      <div
        class="ant-tour-inner"
      >
-        <span
-          aria-label="Close"
+        <button
          class="ant-tour-close"
+          type="button"
        >
          <span
            aria-label="close"
@ -284,7 +284,7 @@ Array [
              />
            </svg>
          </span>
-        </span>
+        </button>
        <div
          class="ant-tour-header"
        >
@ -418,9 +418,9 @@ Array [
      <div
        class="ant-tour-inner"
      >
-        <span
-          aria-label="Close"
+        <button
          class="ant-tour-close"
+          type="button"
        >
          <span
            aria-label="close"
@ -442,7 +442,7 @@ Array [
              />
            </svg>
          </span>
-        </span>
+        </button>
        <div
          class="ant-tour-cover"
        >
@ -590,9 +590,9 @@ Array [
      <div
        class="ant-tour-inner"
      >
-        <span
-          aria-label="Close"
+        <button
          class="ant-tour-close"
+          type="button"
        >
          <span
            aria-label="close"
@ -614,7 +614,7 @@ Array [
              />
            </svg>
          </span>
-        </span>
+        </button>
        <div
          class="ant-tour-cover"
        >
@ -694,9 +694,9 @@ Array [
      <div
        class="ant-tour-inner"
      >
-        <span
-          aria-label="Close"
+        <button
          class="ant-tour-close"
+          type="button"
        >
          <span
            aria-label="close"
@ -718,7 +718,7 @@ Array [
              />
            </svg>
          </span>
-        </span>
+        </button>
        <div
          class="ant-tour-header"
        >
@ -793,9 +793,9 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
          <div
            class="ant-tour-inner"
          >
-            <span
-              aria-label="Close"
+            <button
              class="ant-tour-close"
+              type="button"
            >
              <span
                aria-label="close"
@ -817,7 +817,7 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
                  />
                </svg>
              </span>
-            </span>
+            </button>
            <div
              class="ant-tour-header"
            >
@ -894,9 +894,9 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
          <div
            class="ant-tour-inner"
          >
-            <span
-              aria-label="Close"
+            <button
              class="ant-tour-close"
+              type="button"
            >
              <span
                aria-label="close"
@ -918,7 +918,7 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
                  />
                </svg>
              </span>
-            </span>
+            </button>
            <div
              class="ant-tour-cover"
            >
@ -1014,9 +1014,9 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
          <div
            class="ant-tour-inner"
          >
-            <span
-              aria-label="Close"
+            <button
              class="ant-tour-close"
+              type="button"
            >
              <span
                aria-label="close"
@ -1038,7 +1038,7 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
                  />
                </svg>
              </span>
-            </span>
+            </button>
            <div
              class="ant-tour-header"
            >
--- a/components/tour/tests/snapshots/demo.test.tsx.snap
+++ b/components/tour/tests/snapshots/demo.test.tsx.snap
@ -342,9 +342,9 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
          <div
            class="ant-tour-inner"
          >
-            <span
-              aria-label="Close"
+            <button
              class="ant-tour-close"
+              type="button"
            >
              <span
                aria-label="close"
@ -366,7 +366,7 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
                  />
                </svg>
              </span>
-            </span>
+            </button>
            <div
              class="ant-tour-header"
            >
@ -443,9 +443,9 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
          <div
            class="ant-tour-inner"
          >
-            <span
-              aria-label="Close"
+            <button
              class="ant-tour-close"
+              type="button"
            >
              <span
                aria-label="close"
@ -467,7 +467,7 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
                  />
                </svg>
              </span>
-            </span>
+            </button>
            <div
              class="ant-tour-cover"
            >
@ -563,9 +563,9 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
          <div
            class="ant-tour-inner"
          >
-            <span
-              aria-label="Close"
+            <button
              class="ant-tour-close"
+              type="button"
            >
              <span
                aria-label="close"
@ -587,7 +587,7 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
                  />
                </svg>
              </span>
-            </span>
+            </button>
            <div
              class="ant-tour-header"
            >
--- a/components/tour/tests/snapshots/index.test.tsx.snap
+++ b/components/tour/tests/snapshots/index.test.tsx.snap
@ -23,9 +23,9 @@ exports[`Tour Primary 1`] = `
        <div
          class="ant-tour-inner"
        >
-          <span
-            aria-label="Close"
+          <button
            class="ant-tour-close"
+            type="button"
          >
            <span
              aria-label="close"
@ -47,7 +47,7 @@ exports[`Tour Primary 1`] = `
                />
              </svg>
            </span>
-          </span>
+          </button>
          <div
            class="ant-tour-header"
          >
@ -228,9 +228,9 @@ exports[`Tour controlled current 1`] = `
        <div
          class="ant-tour-inner"
        >
-          <span
-            aria-label="Close"
+          <button
            class="ant-tour-close"
+            type="button"
          >
            <span
              aria-label="close"
@ -252,7 +252,7 @@ exports[`Tour controlled current 1`] = `
                />
              </svg>
            </span>
-          </span>
+          </button>
          <div
            class="ant-tour-header"
          >
@ -357,9 +357,9 @@ exports[`Tour custom step pre btn & next btn className & style 1`] = `
    <div
      class="ant-tour-inner"
    >
-      <span
-        aria-label="Close"
+      <button
        class="ant-tour-close"
+        type="button"
      >
        <span
          aria-label="close"
@ -381,7 +381,7 @@ exports[`Tour custom step pre btn & next btn className & style 1`] = `
            />
          </svg>
        </span>
-      </span>
+      </button>
      <div
        class="ant-tour-header"
      >
@ -453,9 +453,9 @@ exports[`Tour single 1`] = `
        <div
          class="ant-tour-inner"
        >
-          <span
-            aria-label="Close"
+          <button
            class="ant-tour-close"
+            type="button"
          >
            <span
              aria-label="close"
@ -477,7 +477,7 @@ exports[`Tour single 1`] = `
                />
              </svg>
            </span>
-          </span>
+          </button>
          <div
            class="ant-tour-header"
          >
@ -617,9 +617,9 @@ exports[`Tour step support Primary 1`] = `
        <div
          class="ant-tour-inner"
        >
-          <span
-            aria-label="Close"
+          <button
            class="ant-tour-close"
+            type="button"
          >
            <span
              aria-label="close"
@ -641,7 +641,7 @@ exports[`Tour step support Primary 1`] = `
                />
              </svg>
            </span>
-          </span>
+          </button>
          <div
            class="ant-tour-header"
          >
--- a/components/tour/panelRender.tsx
+++ b/components/tour/panelRender.tsx
@ -52,9 +52,9 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
    }

    return (
-      <span onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
+      <button type="button" onClick={onClose} className={`${prefixCls}-close`}>
        {defaultCloseIcon}
-      </span>
+      </button>
    );
  }, [closable]);

--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@ -1,6 +1,6 @@
 import { TinyColor } from '@ctrl/tinycolor';

-import { resetComponent } from '../../style';
+import { resetComponent, genFocusStyle } from '../../style';
 import type { ArrowOffsetToken } from '../../style/placementArrow';
 import getArrowStyle, {
  getArrowOffsetToken,
@ -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'> {
@ -117,7 +115,8 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
            top: padding,
            insetInlineEnd: padding,
            color: token.colorIcon,
-            outline: 'none',
+            background: 'none',
+            border: 'none',
            width: closeBtnSize,
            height: closeBtnSize,
            borderRadius: token.borderRadiusSM,
@ -129,8 +128,14 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {

            '&:hover': {
              color: token.colorIconHover,
-              backgroundColor: token.closeBtnHoverBg,
+              backgroundColor: token.colorBgTextHover,
            },
+
+            '&:active': {
+              backgroundColor: token.colorBgTextActive,
+            },
+
+            ...genFocusStyle(token),
          },

          [`${componentCls}-cover`]: {
@ -271,7 +276,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(),