refactor: token update (#36306)

2 years ago · abb409ccf7
21 changed files with 96 additions and 97 deletions
--- a/components/avatar/style/index.tsx
+++ b/components/avatar/style/index.tsx
@ -146,12 +146,12 @@ export default genComponentStyleHook('Avatar', token => {
    fontSizeHeading3,

    marginXS,
-    textColors,
-    bgColors,
+    colorBorderBg,
+    colorTextPlaceholder,
  } = token;

  const avatarToken = mergeToken<AvatarToken>(token, {
-    avatarBg: textColors['25'],
+    avatarBg: colorTextPlaceholder,
    avatarColor: colorTextLightSolid,

    avatarSizeBase: controlHeight,
@ -164,7 +164,7 @@ export default genComponentStyleHook('Avatar', token => {
    avatarBorderRadius: token.radiusBase,
    avatarGroupOverlapping: marginXS,
    avatarGroupSpace: marginXS,
-    avatarGroupBorderColor: bgColors['0'],
+    avatarGroupBorderColor: colorBorderBg,
  });

  return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@ -317,7 +317,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO

 // ============================== Export ==============================
 export default genComponentStyleHook('Badge', token => {
-  const { fontSize, lineHeight, fontSizeSM, controlLineWidth, marginXS, bgColors } = token;
+  const { fontSize, lineHeight, fontSizeSM, controlLineWidth, marginXS, colorBorderBg } = token;

  const badgeFontHeight = Math.round(fontSize * lineHeight);
  const badgeShadowSize = controlLineWidth;
@ -341,7 +341,7 @@ export default genComponentStyleHook('Badge', token => {
    badgeFontWeight,
    badgeFontSize,
    badgeColor,
-    badgeShadowColor: bgColors['0'],
+    badgeShadowColor: colorBorderBg,
    badgeHeightSm,
    badgeDotSize,
    badgeFontSizeSm,
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@ -130,7 +130,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
  backgroundColor: token.colorBgContainer,
  borderColor: token.colorBorder,

-  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorDefaultOutline}`,
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,

  ...genHoverActiveButtonStyle(
    {
@ -377,12 +377,12 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {

 // ============================== Export ==============================
 export default genComponentStyleHook('Button', token => {
-  const { textColors } = token;
+  const { buttonColorBgTextHover, buttonColorBgTextActive, controlTmpOutline } = token;

  const buttonToken = mergeToken<ButtonToken>(token, {
-    colorBgTextHover: textColors['3'],
-    colorBgTextActive: textColors['4'],
-    colorOutlineDefault: textColors['8'],
+    colorBgTextHover: buttonColorBgTextHover,
+    colorBgTextActive: buttonColorBgTextActive,
+    colorOutlineDefault: controlTmpOutline,
  });

  return [
--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@ -136,7 +136,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
        insetInlineStart: 0,
        width: '100%',
        height: 0,
-        backgroundColor: token.controlMaskBg,
+        backgroundColor: token.colorBgMask,
        opacity: 0,
        transition: `opacity ${motionDurationSlow} linear, height 0s ease ${motionDurationSlow}`,
        pointerEvents: 'none',
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@ -64,7 +64,7 @@ export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> =
          ...box('fixed'),
          zIndex: token.zIndexPopupBase,
          height: '100%',
-          backgroundColor: token.controlMaskBg,
+          backgroundColor: token.colorBgMask,

          [`${componentCls}-hidden`]: {
            display: 'none',
--- a/components/rate/style/index.tsx
+++ b/components/rate/style/index.tsx
@ -123,13 +123,13 @@ const genRateStyle: GenerateStyle<RateToken> = token => {

 // ============================== Export ==============================
 export default genComponentStyleHook('Rate', token => {
-  const { textColors } = token;
+  const { colorBgFillTmp } = token;

  const rateToken = mergeToken<RateToken>(token, {
    rateStarColor: token['yellow-6'],
    rateStarSize: token.controlHeightLG * 0.5,
    rateStarHoverScale: 'scale(1.1)',
-    defaultColor: textColors['12'],
+    defaultColor: colorBgFillTmp,
  });
  return [genRateStyle(rateToken)];
 });
--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.tsx
@ -171,20 +171,20 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
 export default genComponentStyleHook(
  'Segmented',
  token => {
-    const { lineWidthBold, controlLineWidth, textColors } = token;
+    const { lineWidthBold, controlLineWidth, colorTextLabel, colorText } = token;

    const segmentedToken = mergeToken<SegmentedToken>(token, {
      segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
      segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
      segmentedContainerPadding: lineWidthBold,
-      labelColor: textColors['65'],
-      labelColorHover: textColors['85'],
+      labelColor: colorTextLabel,
+      labelColorHover: colorText,
    });
    return [genSegmentedStyle(segmentedToken)];
  },
-  ({ bgColors, textColors }) => ({
-    bgColor: textColors['8'],
-    bgColorHover: textColors['12'],
-    bgColorSelected: bgColors['8'],
+  ({ segmentedBgColor, segmentedBgColorActive, segmentedBgColorHover }) => ({
+    bgColor: segmentedBgColor,
+    bgColorHover: segmentedBgColorHover,
+    bgColorSelected: segmentedBgColorActive,
  }),
 );
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@ -369,11 +369,11 @@ export default genComponentStyleHook(
    return [genBaseStyle(skeletonToken)];
  },
  token => {
-    const { textColors } = token;
+    const { colorBgFillTmp, colorTextPlaceholder } = token;

    return {
-      color: textColors['12'],
-      colorGradientEnd: textColors['25'],
+      color: colorBgFillTmp,
+      colorGradientEnd: colorTextPlaceholder,
    };
  },
 );
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@ -161,7 +161,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {

      '&:focus-visible': {
        outline: 0,
-        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorDefaultOutline}`,
+        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlTmpOutline}`,
      },

      [`&${token.componentCls}-checked:focus-visible`]: {
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@ -240,8 +240,7 @@ export default genComponentStyleHook('Table', token => {
    colorBgContainer,
    colorBgContent,
    radiusBase,
-    bgColors,
-    textColors,
+    colorBgFillTmp,
    controlInteractiveSize: checkboxSize,
  } = token;

@ -268,8 +267,8 @@ export default genComponentStyleHook('Table', token => {
    tableFooterTextColor: colorTextHeading,
    tableFooterBg: colorBgContainerSecondary,
    tableHeaderCellSplitColor: colorSplit,
-    tableHeaderSortBg: bgColors['15'],
-    tableHeaderSortHoverBg: textColors['12'],
+    tableHeaderSortBg: colorBgContent,
+    tableHeaderSortHoverBg: colorBgFillTmp,
    tableHeaderIconColor: baseColorAction
      .clone()
      .setAlpha(baseColorAction.getAlpha() * opacityLoading)
@ -280,7 +279,7 @@ export default genComponentStyleHook('Table', token => {
      .toRgbString(),
    tableBodySortBg: colorBgContainerSecondary,
    tableFixedHeaderSortActiveBg: colorBgContent,
-    tableHeaderFilterActiveBg: textColors['12'],
+    tableHeaderFilterActiveBg: colorBgFillTmp,
    tableFilterDropdownBg: colorBgContainer,
    tableRowHoverBg: colorBgContainerSecondary,
    tableSelectedRowBg,
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@ -41,7 +41,6 @@ import type { ComponentToken as TooltipComponentToken } from '../tooltip/style';
 import type { ComponentToken as TransferComponentToken } from '../transfer/style';
 import type { ComponentToken as TypographyComponentToken } from '../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../upload/style';
-import type { BgPalettes, TextAlphaPalettes } from './themes/IPalettes';

 export const PresetColors = [
  'blue',
@ -154,10 +153,10 @@ export interface SeedToken extends PresetColorType {
  colorWarning: string;
  colorError: string;
  colorInfo: string;
-  colorText: string;
+  colorTextBase: string;
  colorTextLightSolid: string;
  /** Base component background color. Will derivative container background color with this */
-  colorBg: string;
+  colorBgBase: string;

  // Font
  fontFamily: string;
@ -207,10 +206,9 @@ export interface SeedToken extends PresetColorType {

 export interface ColorMapToken {
  // Color
-  /** Used for DefaultButton, Switch which has default outline */
-  colorDefaultOutline: string;
-
  colorPrimaryHover: string;
+  colorPrimaryBg: string;
+  colorPrimaryBgHover: string;
  colorPrimaryActive: string;
  colorPrimaryBorder: string; // primary[2]
  colorPrimaryBorderHover: string;
@ -231,20 +229,20 @@ export interface ColorMapToken {
  colorInfoBorder: string;
  colorInfoBg: string;

-  colorHighlight: string;
-
  /** Color of layout background */
  colorBgLayout: string;
  colorBgContent: string;
-  colorBgContentHover: string;
  /** Color of popup background */
  colorBgElevated: string;
  /** Color of component background */
  colorBgContainer: string;
+
+  colorBgContentHover: string;
  colorBgContainerSecondary: string;
  colorBgContainerDisabled: string;

  colorBorder: string;
+  colorBorderBg: string;
  colorBorderSecondary: string;
  colorSplit: string;

@ -252,9 +250,8 @@ export interface ColorMapToken {
  colorText: string;
  colorTextSecondary: string;
  colorTextDisabled: string;
-  /** Placeholder text color */
-  colorTextPlaceholder: string;
  colorTextHeading: string;
+  colorTextLabel: string;

  /** Weak action. Such as `allowClear` or Alert close button */
  colorAction: string;
@ -264,6 +261,18 @@ export interface ColorMapToken {
  colorLink: string;
  colorLinkHover: string;
  colorLinkActive: string;
+
+  colorBgMask: string;
+  colorBgItemHover: string;
+  colorBgFillTmp: string;
+  colorBgTooltipTmp: string;
+
+  // FIXME: should be removed
+  buttonColorBgTextHover: string;
+  buttonColorBgTextActive: string;
+  segmentedBgColor: string;
+  segmentedBgColorHover: string;
+  segmentedBgColorActive: string;
 }

 export interface CommonMapToken {
@ -312,18 +321,18 @@ export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, Commo
  colorPrimaryOutline: string;
  colorWarningOutline: string;
  colorErrorOutline: string;
-
-  // Map Token
-  bgColors: BgPalettes;
-  textColors: TextAlphaPalettes;
 }

 // ======================================================================
 // ==                           Alias Token                            ==
 // ======================================================================
-// FIXME: DerivativeToken should part pick
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 export interface AliasToken extends MapToken {
+  /** Placeholder text color */
+  colorTextPlaceholder: string;
+
+  colorHighlight: string;
+
  // Font
  fontSizeSM: number;
  fontSize: number;
@ -410,7 +419,8 @@ export interface AliasToken extends MapToken {
  screenXXLMin: number;
  screenXXLMax: number;

-  controlMaskBg: string;
+  /** Used for DefaultButton, Switch which has default outline */
+  controlTmpOutline: string;

  // FIXME: component box-shadow, should be removed
  boxShadowPopoverArrow: string;
--- a/components/theme/themes/IPalettes.ts
+++ b/components/theme/themes/IPalettes.ts
@ -74,4 +74,5 @@ export interface BgPalettes {
  'light-12'?: string;
  'light-2'?: string;
  'light-10'?: string;
+  base: string;
 }
--- a/components/theme/themes/dark/index.ts
+++ b/components/theme/themes/dark/index.ts
@ -62,9 +62,5 @@ export default function derivative(token: SeedToken): MapToken {
    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),

    ...genCommonMapToken(token),
-
-    // map token
-    bgColors,
-    textColors,
  };
 }
--- a/components/theme/themes/dark/palettes.ts
+++ b/components/theme/themes/dark/palettes.ts
@ -13,7 +13,7 @@ import { getAlphaColor, getSolidColor } from './colorAlgorithm';
 export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalettes {
  const primaryColors = generate(primaryBaseColor, { theme: 'dark' });
  return {
-    0: '#0e161f',
+    0: primaryBaseColor,
    1: primaryColors[0],
    2: primaryColors[1],
    3: primaryColors[2],
@ -75,6 +75,7 @@ export function generateBgPalettes(bgBaseColor: string): BgPalettes {
    12: getSolidColor(bgBaseColor, 12),
    8: getSolidColor(bgBaseColor, 8),
    0: getSolidColor(bgBaseColor, 0),
+    base: getSolidColor(bgBaseColor, 0),
  };
 }

--- a/components/theme/themes/default/index.ts
+++ b/components/theme/themes/default/index.ts
@ -15,7 +15,7 @@ import {
 } from './palettes';

 export default function derivative(token: SeedToken): MapToken {
-  const { colorPrimary, colorSuccess, colorWarning, colorError, colorInfo, colorBg } = token;
+  const { colorPrimary, colorSuccess, colorWarning, colorError, colorInfo, colorBgBase } = token;

  const colorPalettes = Object.keys(defaultPresetColors)
    .map((colorKey: keyof PresetColorType) => {
@ -39,7 +39,7 @@ export default function derivative(token: SeedToken): MapToken {
  const warningColors = generateWarningPalettes(colorWarning);
  const errorColors = generateErrorPalettes(colorError);
  const infoColors = generateInfoPalettes(colorInfo);
-  const bgColors = generateBgPalettes(colorBg);
+  const bgColors = generateBgPalettes(colorBgBase);
  const textColors = generateTextAlphaPalettes('#000');

  return {
@ -61,9 +61,5 @@ export default function derivative(token: SeedToken): MapToken {
    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),

    ...genCommonMapToken(token),
-
-    // FIXME: should be removed
-    bgColors,
-    textColors,
  };
 }
--- a/components/theme/themes/default/palettes.ts
+++ b/components/theme/themes/default/palettes.ts
@ -75,6 +75,7 @@ export function generateBgPalettes(bgBaseColor: string): BgPalettes {
    12: getSolidColor(bgBaseColor, 0),
    8: getSolidColor(bgBaseColor, 0),
    0: getSolidColor(bgBaseColor, 4),
+    base: getSolidColor(bgBaseColor, 0),
  };
 }

--- a/components/theme/themes/seed.ts
+++ b/components/theme/themes/seed.ts
@ -1,4 +1,3 @@
-import { TinyColor } from '@ctrl/tinycolor';
 import type { PresetColorType, SeedToken } from '..';

 export const defaultPresetColors: PresetColorType = {
@ -27,10 +26,10 @@ const seedToken: SeedToken = {
  colorWarning: '#faad14',
  colorError: '#ff4d4f',
  colorInfo: '#1890ff',
-  colorText: new TinyColor('#000').setAlpha(0.85).toRgbString(),
+  colorTextBase: '#000',
  colorTextLightSolid: '#fff',

-  colorBg: new TinyColor({ h: 0, s: 0, v: 100 }).toHexString(),
+  colorBgBase: '#fff',

  // Font
  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
--- a/components/theme/themes/shared/genColorMapToken.ts
+++ b/components/theme/themes/shared/genColorMapToken.ts
@ -30,6 +30,8 @@ export default function genColorMapToken({
 }: PaletteSheets): ColorMapToken {
  return {
    colorPrimaryHover: primaryPalettes['5'],
+    colorPrimaryBg: primaryPalettes['1'],
+    colorPrimaryBgHover: primaryPalettes['0'],
    colorPrimaryActive: primaryPalettes['7'],
    colorPrimaryBorder: primaryPalettes['3'],
    colorPrimaryBorderHover: primaryPalettes['4'],
@ -54,33 +56,41 @@ export default function genColorMapToken({
    colorLinkHover: primaryPalettes['5'],
    colorLinkActive: primaryPalettes['7'],

-    colorDefaultOutline: textAlphaPalettes['4'],
-
    // ============== Background ============== //
    colorBgLayout: bgPalettes['0'],
    colorBgElevated: bgPalettes['12'],
    colorBgContainer: bgPalettes['8'],
-    colorBgContainerSecondary: textAlphaPalettes['4'],
-    colorBgContainerDisabled: textAlphaPalettes['8'],
    colorBgContent: bgPalettes['15'],
+
    colorBgContentHover: bgPalettes['26'],
+    colorBgContainerSecondary: textAlphaPalettes['4'],
+    colorBgContainerDisabled: textAlphaPalettes['8'],
+
+    colorBgMask: textAlphaPalettes['45'],
+    colorBgItemHover: textAlphaPalettes['8'],
+    colorBgFillTmp: textAlphaPalettes['12'],
+    colorBgTooltipTmp: textAlphaPalettes['85'],

    // ============== Split ============== //
    colorBorder: bgPalettes['26'],
    colorBorderSecondary: bgPalettes['19'],
+    colorBorderBg: bgPalettes.base,
    colorSplit: textAlphaPalettes['12'],

    // ============== Text ============== //
    colorText: textAlphaPalettes['85'],
    colorTextHeading: textAlphaPalettes['85'],
    colorTextSecondary: textAlphaPalettes['45'],
-    // TODO: 这个 30 估计要改成 25
-    colorTextDisabled: textAlphaPalettes['30'],
-    colorTextPlaceholder: textAlphaPalettes['25'],
+    colorTextDisabled: textAlphaPalettes['25'],
+    colorTextLabel: textAlphaPalettes['65'],

    colorAction: textAlphaPalettes['45'],
    colorActionHover: textAlphaPalettes['85'],

-    colorHighlight: errorPalettes['5'],
+    buttonColorBgTextHover: textAlphaPalettes['3'],
+    buttonColorBgTextActive: textAlphaPalettes['4'],
+    segmentedBgColor: textAlphaPalettes['8'],
+    segmentedBgColorHover: textAlphaPalettes['12'],
+    segmentedBgColorActive: bgPalettes['8'],
  };
 }
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@ -1,4 +1,3 @@
-import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
 import type { AliasToken, MapToken, OverrideToken } from '../interface';

@ -18,14 +17,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    ...derivative,
  };

-  const { fontSizes, lineHeights, textColors } = mergedToken;
-
-  // FIXME: tmp
-  const primaryColors = generate(mergedToken.colorPrimary);
-  const infoColors = generate(mergedToken.colorInfo);
-  const successColors = generate(mergedToken.colorSuccess);
-  const warningColors = generate(mergedToken.colorWarning);
-  const errorColors = generate(mergedToken.colorError);
+  const { fontSizes, lineHeights } = mergedToken;
  const screenXS = 480;
  const screenSM = 576;
  const screenMD = 768;
@ -39,6 +31,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
  const aliasToken: AliasToken = {
    ...mergedToken,

+    colorTextPlaceholder: mergedToken.colorTextDisabled,
+    colorHighlight: mergedToken.colorError,
+
    // Font
    fontSizeSM,
    fontSize: fontSizes[1],
@ -62,33 +57,22 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    lineHeightHeading5: lineHeights[2],

    // Control
-    // TODO: 确认下 hover 是用 Alpha 还是实色
-    // 暂时确认下来应该用 alpha
    controlLineWidth: mergedToken.lineWidth,
    controlOutlineWidth: mergedToken.lineWidth * 2,
    // Checkbox size and expand icon size
    controlInteractiveSize: mergedToken.controlHeight / 2,

-    controlItemBgHover: mergedToken.textColors['8'],
-    controlItemBgActive: primaryColors[0],
-    controlItemBgActiveHover: primaryColors[1],
-    controlItemBgActiveDisabled: textColors['25'],
-    controlMaskBg: textColors['45'],
+    controlItemBgHover: mergedToken.colorBgItemHover,
+    controlItemBgActive: mergedToken.colorPrimaryBg,
+    controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
+    controlItemBgActiveDisabled: mergedToken.colorTextDisabled,

-    // 👀👀👀👀👀👀👀👀👀 Not align with Derivative 👀👀👀👀👀👀👀👀👀
-    // FIXME: @arvinxx handle this
    controlLineType: mergedToken.lineType,
    controlRadius: mergedToken.radiusBase,
    fontWeightStrong: 600,

-    // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
    opacityLoading: 0.65,

-    colorSuccessBorder: successColors[2],
-    colorWarningBorder: warningColors[2],
-    colorErrorBorder: errorColors[2],
-    colorInfoBorder: infoColors[2],
-
    linkDecoration: 'none',
    linkHoverDecoration: 'none',
    linkFocusDecoration: 'none',
@ -137,6 +121,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    screenXXLMin: screenXXL,
    screenXXLMax: screenXXL - 1,

+    controlTmpOutline: mergedToken.colorBgContainerSecondary,
+
    // FIXME: component box-shadow, should be removed
    boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
    boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`,
--- a/components/tooltip/style/index.tsx
+++ b/components/tooltip/style/index.tsx
@ -132,9 +132,9 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul

      return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
    },
-    ({ zIndexPopupBase, textColors }) => ({
+    ({ zIndexPopupBase, colorBgTooltipTmp }) => ({
      zIndexPopup: zIndexPopupBase + 70,
-      colorBgDefault: textColors['light-75'],
+      colorBgDefault: colorBgTooltipTmp,
    }),
  );

--- a/components/upload/style/picture.tsx
+++ b/components/upload/style/picture.tsx
@ -142,7 +142,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = token => {
            zIndex: 1,
            width: `calc(100% - ${token.paddingXS * 2}px)`,
            height: `calc(100% - ${token.paddingXS * 2}px)`,
-            backgroundColor: token.controlMaskBg,
+            backgroundColor: token.colorBgMask,
            opacity: 0,
            transition: `all ${token.motionDurationSlow}`,
            content: '" "',