refactor: image full token (#35465)

* refactor: image full token * chore: remain switch size * refactor: less token * chore: text color
2025-06-07 17:44:35 +08:00 · 2022-05-10 17:30:01 +08:00 · 2022-05-10 17:30:01 +08:00 · 9ca7973521
commit 9ca7973521
parent cde2103e48
13 changed files with 122 additions and 140 deletions
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@ -155,7 +155,7 @@ export interface SeedToken extends PresetColorType {
  /** Base zIndex of component like BackTop, Affix which can be cover by large popup */
  zIndexBase: number;
  /** Base popup component zIndex */
-  zIndexPopup: number;
+  zIndexPopupBase: number;
 }

 // ======================================================================
@ -354,4 +354,6 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
  screenXXLMax: number;

  motionEaseOut: string;
+
+  colorPopupBg: string;
 }
--- a/components/_util/theme/themes/default.ts
+++ b/components/_util/theme/themes/default.ts
@ -196,7 +196,7 @@ const seedToken: SeedToken = {

  // zIndex
  zIndexBase: 0,
-  zIndexPopup: 1000,
+  zIndexPopupBase: 1000,
 };

 export default seedToken;
--- a/components/_util/theme/util/alias.ts
+++ b/components/_util/theme/util/alias.ts
@ -152,6 +152,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    screenXXLMax: screenXXL - 1,

    motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+
+    colorPopupBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
  };

  return aliasToken;
--- a/components/back-top/style/index.tsx
+++ b/components/back-top/style/index.tsx
@ -26,7 +26,7 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
      // FIXME bottom
      insetBlockEnd: 50,
      // FIX ME @zindex-back-top
-      zIndex: token.zIndexPopup,
+      zIndex: token.zIndexPopupBase,
      width: 40,
      height: 40,
      cursor: 'pointer',
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@ -14,7 +14,7 @@ import {

 // FIXME: need full token check
 export interface ComponentToken {
-  zIndexDropdown: number;
+  zIndexPopup: number;
  pickerTextHeight: number;
  pickerPanelCellWidth: number;
  pickerPanelCellHeight: number;
@ -264,7 +264,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
      '&-dropdown': {
        ...resetComponent(token),
        position: 'absolute',
-        zIndex: token.zIndexDropdown,
+        zIndex: token.zIndexPopup,

        '&&-hidden': {
          display: 'none',
@ -1193,7 +1193,7 @@ export default genComponentStyleHook(
    ];
  },
  token => ({
-    zIndexDropdown: token.zIndexPopup + 50,
+    zIndexPopup: token.zIndexPopupBase + 50,
    pickerTextHeight: 40,
    pickerPanelCellWidth: 36,
    pickerPanelCellHeight: 24,
--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@ -51,7 +51,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
    modalFooterPaddingVertical,
    modalFooterPaddingHorizontal,
    borderColorSplit,
-    zIndexPopup,
+    zIndexPopupBase,
    colorText,
    textColorSecondary,
    hoverColor,
@ -62,7 +62,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
      // FIXME: Seems useless?
      // @drawer-header-close-padding: ceil(((drawerHeaderCloseSize - @font-size-lg) / 2));
      position: 'fixed',
-      zIndex: zIndexPopup,
+      zIndex: zIndexPopupBase,
      width: 0,
      height: '100%',
      transition: `width 0s ease ${motionDurationSlow}, height 0s ease ${motionDurationSlow}`,
--- a/components/dropdown/style/index.tsx
+++ b/components/dropdown/style/index.tsx
@ -12,7 +12,7 @@ import genButtonStyle from './button';
 import genStatusStyle from './status';

 export interface ComponentToken {
-  zIndexDropdown: number;
+  zIndexPopup: number;
 }

 export interface DropdownToken extends FullToken<'Dropdown'> {
@ -30,7 +30,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
    rootPrefixCls,
    componentCls,
    menuCls,
-    zIndexDropdown,
+    zIndexPopup,
    dropdownArrowDistance,
    dropdownArrowOffset,
    sizePopupArrow,
@ -59,7 +59,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
          _skip_check_: true,
          value: -9999,
        },
-        zIndex: zIndexDropdown,
+        zIndex: zIndexPopup,
        display: 'block',

        // A placeholder out of dropdown visible range to avoid close when user moving
@ -243,7 +243,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {

      [`${menuCls}-submenu-popup`]: {
        position: 'absolute',
-        zIndex: zIndexDropdown,
+        zIndex: zIndexPopup,
        background: 'transparent',
        boxShadow: 'none',
        transformOrigin: '0 0',
@ -443,6 +443,6 @@ export default genComponentStyleHook(
    ];
  },
  token => ({
-    zIndexDropdown: token.zIndexPopup + 50,
+    zIndexPopup: token.zIndexPopupBase + 50,
  }),
 );
--- a/components/image/style/index.tsx
+++ b/components/image/style/index.tsx
@ -1,22 +1,21 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
+import { modalMask } from '../../modal/style';
 import type { FullToken, GenerateStyle } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';

 export interface ComponentToken {
-  imageBg: string;
-  imagePreviewOperationSize: number;
-  imagePreviewOperationColor: string;
-  imagePreviewSwitchSize: number;
-  zIndexImage: number;
+  zIndexPopup: number;
 }

 export interface ImageToken extends FullToken<'Image'> {
  previewCls: string;
  modalMaskBg: string;
-  zIndexModalMask: number;
  imagePreviewOperationDisabledColor: string;
+  imagePreviewOperationSize: number;
+  imagePreviewSwitchSize: number;
+  imagePreviewOperationColor: string;
 }

 export type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
@ -129,137 +128,117 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
  };
 };

-export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
-  const { motionEaseOut, previewCls, motionDurationSlow } = token;
+export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
+  const { motionEaseOut, previewCls, motionDurationSlow, componentCls } = token;

-  return {
-    height: '100%',
-    textAlign: 'center',
-    [`${previewCls}-body`]: {
-      ...genBoxStyle(),
-      overflow: 'hidden',
-    },
+  return [
+    {
+      [`${componentCls}-preview-root`]: {
+        ...modalMask(previewCls, token),

-    [`${previewCls}-img`]: {
-      maxWidth: '100%',
-      maxHeight: '100%',
-      verticalAlign: 'middle',
-      transform: 'scale3d(1, 1, 1)',
-      cursor: 'grab',
-      transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
-      userSelect: 'none',
-      pointerEvents: 'auto',
+        [previewCls]: {
+          height: '100%',
+          textAlign: 'center',
+          pointerEvents: 'none',
+        },

-      '&-wrapper': {
-        ...genBoxStyle(),
-        transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+        [`${previewCls}-body`]: {
+          ...genBoxStyle(),
+          overflow: 'hidden',
+        },

-        '&::before': {
-          display: 'inline-block',
-          width: 1,
-          height: '50%',
-          marginInlineEnd: -1,
-          content: '""',
+        [`${previewCls}-img`]: {
+          maxWidth: '100%',
+          maxHeight: '100%',
+          verticalAlign: 'middle',
+          transform: 'scale3d(1, 1, 1)',
+          cursor: 'grab',
+          transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+          userSelect: 'none',
+          pointerEvents: 'auto',
+
+          '&-wrapper': {
+            ...genBoxStyle(),
+            transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+
+            '&::before': {
+              display: 'inline-block',
+              width: 1,
+              height: '50%',
+              marginInlineEnd: -1,
+              content: '""',
+            },
+          },
+        },
+
+        [`${previewCls}-moving`]: {
+          [`${previewCls}-preview-img`]: {
+            cursor: 'grabbing',
+
+            '&-wrapper': {
+              transitionDuration: '0s',
+            },
+          },
+        },
+
+        [`${previewCls}-operations`]: {
+          ...genPreviewOperationsStyle(token),
+        },
+
+        [`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
+          ...genPreviewSwitchStyle(token),
+        },
+
+        [`${previewCls}-switch-left`]: {
+          insetInlineStart: token.marginSM,
+        },
+
+        [`${previewCls}-switch-right`]: {
+          insetInlineEnd: token.marginSM,
        },
      },
    },
-
-    [`${previewCls}-moving`]: {
-      [`${previewCls}-preview-img`]: {
-        cursor: 'grabbing',
-
-        '&-wrapper': {
-          transitionDuration: '0s',
+    // Override
+    {
+      [`${componentCls}-preview-root`]: {
+        [`${previewCls}-wrap`]: {
+          zIndex: token.zIndexPopup,
        },
      },
    },
-
-    [`${previewCls}-operations`]: {
-      ...genPreviewOperationsStyle(token),
-    },
-
-    [`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
-      ...genPreviewSwitchStyle(token),
-    },
-
-    [`${previewCls}-switch-left`]: {
-      insetInlineStart: token.marginSM,
-    },
-
-    [`${previewCls}-switch-right`]: {
-      insetInlineEnd: token.marginSM,
-    },
-  };
+  ];
 };

 const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
-  const {
-    prefixCls,
-    zIndexModalMask,
-    modalMaskBg,
-    previewCls,
-    imageBg,
-    zIndexImage,
-    motionDurationSlow,
-  } = token;
+  const { componentCls } = token;
  return {
    // ============================== image ==============================
-    [`.${prefixCls}`]: {
+    [componentCls]: {
      position: 'relative',
      display: 'inline-block',
-      [`.${prefixCls}-img`]: {
+      [`${componentCls}-img`]: {
        width: '100%',
        height: 'auto',
        verticalAlign: 'middle',
      },
-      [`.${prefixCls}-img-placeholder`]: {
-        backgroundColor: imageBg,
+      [`${componentCls}-img-placeholder`]: {
+        backgroundColor: token.colorBgContainer,
        backgroundImage:
          "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '30%',
      },
-      [`.${prefixCls}-mask`]: {
+      [`${componentCls}-mask`]: {
        ...genImageMaskStyle(token),
      },
-      [`.${prefixCls}-mask:hover`]: {
+      [`${componentCls}-mask:hover`]: {
        opacity: 1,
      },
-      [`.${prefixCls}-placeholder`]: {
+      [`${componentCls}-placeholder`]: {
        ...genBoxStyle(),
      },
    },
-    // ============================== preview ==============================
-    pointerEvents: 'none',
-    [`${previewCls}.${prefixCls}-zoom-enter, ${previewCls}.${prefixCls}zoom-appear`]: {
-      transform: 'none',
-      opacity: 0,
-      animationDuration: motionDurationSlow,
-      userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777
-    },
-    [`${previewCls}-root`]: {
-      [`${previewCls}-mask`]: {
-        ...genBoxStyle('fixed'),
-        zIndex: zIndexModalMask,
-        height: '100%',
-        backgroundColor: modalMaskBg,
-
-        '&-hidden': {
-          display: 'none',
-        },
-      },
-      [`${previewCls}-wrap`]: {
-        ...genBoxStyle('fixed'),
-        overflow: 'auto',
-        outline: 0,
-        WebkitOverflowScrolling: 'touch',
-        zIndex: zIndexImage,
-        [`${previewCls}`]: {
-          ...genImagePreviewStyle(token),
-        },
-      },
-    },
  };
 };

@ -267,24 +246,22 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
 export default genComponentStyleHook(
  'Image',
  token => {
-    const imagePreviewOperationColor = new TinyColor(token.imagePreviewOperationColor);
+    const imagePreviewOperationColor = new TinyColor(token.colorTextLightSolid);

    const imageToken = mergeToken<ImageToken>(token, {
      previewCls: `${token.componentCls}-preview`,
+      imagePreviewOperationColor: imagePreviewOperationColor.toRgbString(),
      imagePreviewOperationDisabledColor: new TinyColor(imagePreviewOperationColor)
        .setAlpha(0.25)
        .toRgbString(),
      modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: Shared Token
-      zIndexModalMask: 1000, // FIXME: Shared Token
+      imagePreviewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
+      imagePreviewSwitchSize: token.controlHeightLG,
    });

-    return [genImageStyle(imageToken)];
-  },
-  {
-    imageBg: '#f5f5f5',
-    imagePreviewOperationSize: 18,
-    imagePreviewOperationColor: new TinyColor({ r: 255, g: 255, b: 255, a: 0.85 }).toRgbString(),
-    imagePreviewSwitchSize: 44,
-    zIndexImage: 1080,
+    return [genImageStyle(imageToken), genImagePreviewStyle(imageToken)];
  },
+  token => ({
+    zIndexPopup: token.zIndexPopupBase + 80,
+  }),
 );
--- a/components/mentions/style/index.tsx
+++ b/components/mentions/style/index.tsx
@ -12,7 +12,7 @@ import {
 } from '../../input/style';

 export interface ComponentToken {
-  zIndexDropdown: number;
+  zIndexPopup: number;
  dropdownHeight: number;
  controlItemWidth: number;
 }
@ -136,7 +136,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
        position: 'absolute',
        top: -9999,
        insetInlineStart: -9999,
-        zIndex: token.zIndexDropdown,
+        zIndex: token.zIndexPopup,
        boxSizing: 'border-box',
        fontSize,
        fontVariant: 'initial',
@ -226,6 +226,6 @@ export default genComponentStyleHook(
  token => ({
    dropdownHeight: 250,
    controlItemWidth: 100,
-    zIndexDropdown: token.zIndexPopup + 50,
+    zIndexPopup: token.zIndexPopupBase + 50,
  }),
 );
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@ -2,15 +2,16 @@
 import type React from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
+import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
 import { genComponentStyleHook, mergeToken, resetComponent, clearFix } from '../../_util/theme';
-import type { FullToken, GenerateStyle } from '../../_util/theme';
+import type { FullToken, GenerateStyle, AliasToken } from '../../_util/theme';

 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
  // Component token here
 }

-interface ModalToken extends FullToken<'Modal'> {
+export interface ModalToken extends FullToken<'Modal'> {
  // Custom token here
  modalHeaderPaddingVertical: number;
  modalHeaderPaddingHorizontal: number;
@ -48,7 +49,7 @@ function box(position: React.CSSProperties['position']): React.CSSProperties {
  };
 }

-function modalMask(componentCls: string, token: ModalToken): CSSObject {
+export function modalMask(componentCls: string, token: TokenWithCommonCls<AliasToken>): CSSObject {
  return {
    [`${componentCls}${token.antCls}-zoom-enter, ${componentCls}${token.antCls}-zoom-appear`]: {
      // reset scale avoid mousePosition bug
@ -61,9 +62,9 @@ function modalMask(componentCls: string, token: ModalToken): CSSObject {

    [`${componentCls}-mask`]: {
      ...box('fixed'),
-      zIndex: token.zIndexPopup,
+      zIndex: token.zIndexPopupBase,
      height: '100%',
-      backgroundColor: token.modalMaskBg,
+      backgroundColor: token.colorPopupBg,

      [`${componentCls}-hidden`]: {
        display: 'none',
@ -185,7 +186,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
      },

      [`${componentCls}-wrap`]: {
-        zIndex: token.zIndexPopup,
+        zIndex: token.zIndexPopupBase,
        position: 'fixed',
        inset: 0,
        overflow: 'auto',
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -40,7 +40,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {

        position: 'absolute',
        top: -9999,
-        zIndex: token.zIndexDropdown,
+        zIndex: token.zIndexPopup,
        boxSizing: 'border-box',
        padding: `${token.paddingXXS}px 0`,
        overflow: 'hidden',
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -13,7 +13,7 @@ import genMultipleStyle from './multiple';
 import genDropdownStyle from './dropdown';

 export interface ComponentToken {
-  zIndexDropdown: number;
+  zIndexPopup: number;
 }

 export interface SelectToken extends FullToken<'Select'> {
@ -337,6 +337,6 @@ export default genComponentStyleHook(
    return [genSelectStyle(selectToken)];
  },
  token => ({
-    zIndexDropdown: token.zIndexPopup + 50,
+    zIndexPopup: token.zIndexPopupBase + 50,
  }),
 );
--- a/components/tooltip/style/index.tsx
+++ b/components/tooltip/style/index.tsx
@ -284,7 +284,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {

 // ============================== Export ==============================
 export default genComponentStyleHook('Tooltip', token => {
-  const { radiusBase, zIndexPopup } = token;
+  const { radiusBase, zIndexPopupBase } = token;
  const tooltipArrowShadowWidth = 3; // FIXME: hardcode in v4
  const tooltipArrowWidth = 8 * Math.sqrt(2); // FIXME: hardcode in v4
  const tooltipShadowColor = new TinyColor('#000').setAlpha(0.07).toRgbString(); // FIXME: hardcode in v4
@ -307,7 +307,7 @@ export default genComponentStyleHook('Tooltip', token => {
    tooltipArrowRotateWidth,
    tooltipArrowOffsetVertical: 5, // FIXME: hardcode in v4
    tooltipArrowOffsetHorizontal: 13, // FIXME: hardcode in v4
-    zIndexTooltip: zIndexPopup + 70, // FIXME: hardcode in v4
+    zIndexTooltip: zIndexPopupBase + 70, // FIXME: hardcode in v4
  });

  return [genTooltipStyle(TooltipToken)];