refactor: merge preset colors (#39742)

* style: remove redundant code * feat(style): add preset colour style generation method (cherry picked from commit 1266e42ba27accb48a6544e3eddaa4a94daef00c) * feat: uniform preset colour generation css selector method (cherry picked from commit 5af87e8d5ffcfd23e755946167f200c0565f8222) * chore: merge preset colors (cherry picked from commit 05040dfb703f60a3ea1715326748c508acbf41a6) * chore: update (cherry picked from commit 241b40a1361469487a6a3e8f1ad07a25d250463d) * chore: remove Badge preset inverse colors * chore: remove fix 删除的这部分其实一个 Bug，但是为了给 PR 减负（尽可能单一，后面新开一个 PR 来修复这个问题 * suggestions accepted Update components/style/presetColor.tsx Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
2 years ago · 7f189d56e5
14 changed files with 130 additions and 126 deletions
--- a/components/_util/colors.ts
+++ b/components/_util/colors.ts
@ -1,3 +1,9 @@
+import type { PresetColorKey } from '../theme/interface';
+import { PresetColors } from '../theme/interface';
+
+type InverseColor = `${PresetColorKey}-inverse`;
+const inverseColors = PresetColors.map<InverseColor>((color) => `${color}-inverse`);
+
 export const PresetStatusColorTypes = [
  'success',
  'processing',
@ -6,22 +12,23 @@ export const PresetStatusColorTypes = [
  'warning',
 ] as const;

-export const PresetColorTypes = [
-  'pink',
-  'red',
-  'yellow',
-  'orange',
-  'cyan',
-  'green',
-  'blue',
-  'purple',
-  'geekblue',
-  'magenta',
-  'volcano',
-  'gold',
-  'lime',
-] as const;
-
-export type PresetColorType = typeof PresetColorTypes[number];
+export type PresetColorType = PresetColorKey | InverseColor;

 export type PresetStatusColorType = typeof PresetStatusColorTypes[number];
+
+/**
+ * determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.
+ * @param color color to be judged
+ * @param includeInverse whether to include reversed colors
+ */
+export function isPresetColor(color?: any, includeInverse = true) {
+  if (includeInverse) {
+    return [...inverseColors, ...PresetColors].includes(color);
+  }
+
+  return PresetColors.includes(color);
+}
+
+export function isPresetStatusColor(color?: any): color is PresetStatusColorType {
+  return PresetStatusColorTypes.includes(color);
+}
--- a/components/badge/Ribbon.tsx
+++ b/components/badge/Ribbon.tsx
@ -4,7 +4,7 @@ import { ConfigContext } from '../config-provider';
 import type { PresetColorType } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import useStyle from './style';
-import { isPresetColor } from './utils';
+import { isPresetColor } from '../_util/colors';

 type RibbonPlacement = 'start' | 'end';

@ -29,7 +29,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
 }) {
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
-  const colorInPreset = isPresetColor(color);
+  const colorInPreset = isPresetColor(color, false);
  const ribbonCls = classNames(
    prefixCls,
    `${prefixCls}-placement-${placement}`,
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@ -3,13 +3,14 @@ import CSSMotion from 'rc-motion';
 import * as React from 'react';
 import { useMemo, useRef } from 'react';
 import { ConfigContext } from '../config-provider';
-import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
+import type { PresetStatusColorType } from '../_util/colors';
 import { cloneElement } from '../_util/reactNode';
 import type { LiteralUnion } from '../_util/type';
 import Ribbon from './Ribbon';
 import ScrollNumber from './ScrollNumber';
 import useStyle from './style';
-import { isPresetColor } from './utils';
+import { isPresetColor } from '../_util/colors';
+import type { PresetColorKey } from '../theme/internal';

 export type { ScrollNumberProps } from './ScrollNumber';

@ -30,7 +31,7 @@ export interface BadgeProps {
  scrollNumberPrefixCls?: string;
  className?: string;
  status?: PresetStatusColorType;
-  color?: LiteralUnion<PresetColorType>;
+  color?: LiteralUnion<PresetColorKey>;
  text?: React.ReactNode;
  size?: 'default' | 'small';
  offset?: [number | string, number | string];
@ -144,15 +145,18 @@ const Badge: CompoundedComponent = ({
          },
        }));

+  // InternalColor
+  const isInternalColor = isPresetColor(color, false);
+
  // Shared styles
  const statusCls = classNames({
    [`${prefixCls}-status-dot`]: hasStatus,
    [`${prefixCls}-status-${status}`]: !!status,
-    [`${prefixCls}-status-${color}`]: isPresetColor(color),
+    [`${prefixCls}-status-${color}`]: isInternalColor,
  });

  const statusStyle: React.CSSProperties = {};
-  if (color && !isPresetColor(color)) {
+  if (color && !isInternalColor) {
    statusStyle.color = color;
    statusStyle.background = color;
  }
@ -207,11 +211,11 @@ const Badge: CompoundedComponent = ({
            [`${prefixCls}-multiple-words`]:
              !isDot && displayCount && displayCount.toString().length > 1,
            [`${prefixCls}-status-${status}`]: !!status,
-            [`${prefixCls}-status-${color}`]: isPresetColor(color),
+            [`${prefixCls}-status-${color}`]: isInternalColor,
          });

          let scrollNumberStyle: React.CSSProperties = { ...mergedStyle };
-          if (color && !isPresetColor(color)) {
+          if (color && !isInternalColor) {
            scrollNumberStyle = scrollNumberStyle || {};
            scrollNumberStyle.background = color;
          }
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@ -1,8 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
-import { resetComponent } from '../../style';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genPresetColor, resetComponent } from '../../style';

 interface BadgeToken extends FullToken<'Badge'> {
  badgeFontHeight: number;
@ -73,28 +73,18 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
  const ribbonPrefixCls = `${antCls}-ribbon`;
  const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;

-  const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
-    const darkColor = token[`${colorKey}-6`];
-    return {
-      ...prev,
-      [`${componentCls}-status-${colorKey}`]: {
-        background: darkColor,
-      },
-    };
-  }, {} as CSSObject);
-  const statusRibbonPreset = PresetColors.reduce(
-    (prev: CSSObject, colorKey: keyof PresetColorType) => {
-      const darkColor = token[`${colorKey}-6`];
-      return {
-        ...prev,
-        [`&${ribbonPrefixCls}-color-${colorKey}`]: {
-          background: darkColor,
-          color: darkColor,
-        },
-      };
+  const statusPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
+    [`${componentCls}-status-${colorKey}`]: {
+      background: darkColor,
+    },
+  }));
+
+  const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
+    [`&${ribbonPrefixCls}-color-${colorKey}`]: {
+      background: darkColor,
+      color: darkColor,
    },
-    {} as CSSObject,
-  );
+  }));

  return {
    [componentCls]: {
--- a/components/badge/utils.ts
+++ b/components/badge/utils.ts
@ -1,6 +0,0 @@
-import { PresetColorTypes } from '../_util/colors';
-
-// eslint-disable-next-line import/prefer-default-export
-export function isPresetColor(color?: string): boolean {
-  return PresetColorTypes.includes(color as any);
-}
--- a/components/style/index.ts
+++ b/components/style/index.ts
@ -4,6 +4,7 @@ import type { DerivativeToken } from '../theme/internal';

 export { operationUnit } from './operationUnit';
 export { roundedArrow } from './roundedArrow';
+export { genPresetColor } from './presetColor';

 export const textEllipsis: CSSObject = {
  overflow: 'hidden',
--- a/components/style/presetColor.tsx
+++ b/components/style/presetColor.tsx
@ -0,0 +1,35 @@
+/* eslint-disable import/prefer-default-export */
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { AliasToken, PresetColorKey } from '../theme/internal';
+import { PresetColors } from '../theme/internal';
+import type { TokenWithCommonCls } from '../theme/util/genComponentStyleHook';
+
+interface CalcColor {
+  /** token[`${colorKey}-1`] */
+  lightColor: string;
+  /** token[`${colorKey}-3`] */
+  lightBorderColor: string;
+  /** token[`${colorKey}-6`] */
+  darkColor: string;
+  /** token[`${colorKey}-7`] */
+  textColor: string;
+}
+
+type GenCSS = (colorKey: PresetColorKey, calcColor: CalcColor) => CSSObject;
+
+export function genPresetColor<Token extends TokenWithCommonCls<AliasToken>>(
+  token: Token,
+  genCss: GenCSS,
+): CSSObject {
+  return PresetColors.reduce((prev: CSSObject, colorKey: PresetColorKey) => {
+    const lightColor = token[`${colorKey}-1`];
+    const lightBorderColor = token[`${colorKey}-3`];
+    const darkColor = token[`${colorKey}-6`];
+    const textColor = token[`${colorKey}-7`];
+
+    return {
+      ...prev,
+      ...genCss(colorKey, { lightColor, lightBorderColor, darkColor, textColor }),
+    };
+  }, {} as CSSObject);
+}
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@ -3,7 +3,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
-import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
+import { isPresetColor, isPresetStatusColor } from '../_util/colors';
 import Wave from '../_util/wave';
 import warning from '../_util/warning';
 import CheckableTag from './CheckableTag';
@ -25,9 +25,6 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
  icon?: React.ReactNode;
 }

-const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
-const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
-
 export interface TagType
  extends React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>> {
  CheckableTag: typeof CheckableTag;
@ -66,19 +63,13 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
    }
  }, [props.visible]);

-  const isPresetColor = (): boolean => {
-    if (!color) {
-      return false;
-    }
-    return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
-  };
+  const isInternalColor = isPresetColor(color) || isPresetStatusColor(color);

  const tagStyle = {
-    backgroundColor: color && !isPresetColor() ? color : undefined,
+    backgroundColor: color && !isInternalColor ? color : undefined,
    ...style,
  };

-  const presetColor = isPresetColor();
  const prefixCls = getPrefixCls('tag', customizePrefixCls);
  // Style
  const [wrapSSR, hashId] = useStyle(prefixCls);
@ -86,8 +77,8 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
  const tagClassName = classNames(
    prefixCls,
    {
-      [`${prefixCls}-${color}`]: presetColor,
-      [`${prefixCls}-has-color`]: color && !presetColor,
+      [`${prefixCls}-${color}`]: isInternalColor,
+      [`${prefixCls}-has-color`]: color && !isInternalColor,
      [`${prefixCls}-hidden`]: !visible,
      [`${prefixCls}-rtl`]: direction === 'rtl',
    },
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@ -1,9 +1,9 @@
-import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type React from 'react';
-import type { FullToken, PresetColorType } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
+import type { FullToken } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import capitalize from '../../_util/capitalize';
-import { resetComponent } from '../../style';
+import { genPresetColor, resetComponent } from '../../style';

 export interface ComponentToken {}

@ -35,27 +35,21 @@ const genTagStatusStyle = (
  };
 };

-// FIXME: special preset colors
-const genTagColorStyle = (token: TagToken): CSSInterpolation =>
-  PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
-    const lightColor = token[`${colorKey}-1`];
-    const lightBorderColor = token[`${colorKey}-3`];
-    const darkColor = token[`${colorKey}-6`];
-    const textColor = token[`${colorKey}-7`];
-    return {
-      ...prev,
-      [`${token.componentCls}-${colorKey}`]: {
-        color: textColor,
-        background: lightColor,
-        borderColor: lightBorderColor,
-      },
-      [`${token.componentCls}-${colorKey}-inverse`]: {
+const genPresetStyle = (token: TagToken) =>
+  genPresetColor(token, (colorKey, { textColor, lightBorderColor, lightColor, darkColor }) => ({
+    [`${token.componentCls}-${colorKey}`]: {
+      color: textColor,
+      background: lightColor,
+      borderColor: lightBorderColor,
+
+      // Inverse color
+      '&-inverse': {
        color: token.colorTextLightSolid,
        background: darkColor,
        borderColor: darkColor,
      },
-    };
-  }, {} as CSSObject);
+    },
+  }));

 const genBaseStyle = (token: TagToken): CSSInterpolation => {
  const { paddingXXS, lineWidth, tagPaddingHorizontal } = token;
@ -168,7 +162,7 @@ export default genComponentStyleHook('Tag', (token) => {

  return [
    genBaseStyle(tagToken),
-    genTagColorStyle(tagToken),
+    genPresetStyle(tagToken),
    genTagStatusStyle(tagToken, 'success', 'Success'),
    genTagStatusStyle(tagToken, 'processing', 'Info'),
    genTagStatusStyle(tagToken, 'error', 'Error'),
--- a/components/theme/interface/index.ts
+++ b/components/theme/interface/index.ts
@ -9,7 +9,7 @@ export type OverrideToken = {
 export type GlobalToken = AliasToken & ComponentTokenMap;

 export { PresetColors } from './presetColors';
-export type { PresetColorType, ColorPalettes } from './presetColors';
+export type { PresetColorType, ColorPalettes, PresetColorKey } from './presetColors';
 export type { SeedToken } from './seeds';
 export type {
  MapToken,
--- a/components/theme/interface/presetColors.ts
+++ b/components/theme/interface/presetColors.ts
@ -14,7 +14,7 @@ export const PresetColors = [
  'gold',
 ] as const;

-type PresetColorKey = typeof PresetColors[number];
+export type PresetColorKey = typeof PresetColors[number];

 export type PresetColorType = Record<PresetColorKey, string>;

--- a/components/theme/internal.ts
+++ b/components/theme/internal.ts
@ -8,6 +8,7 @@ import type {
  MapToken,
  OverrideToken,
  PresetColorType,
+  PresetColorKey,
  SeedToken,
 } from './interface';
 import { PresetColors } from './interface';
@ -35,6 +36,7 @@ export type {
  SeedToken,
  AliasToken,
  PresetColorType,
+  PresetColorKey,
  // FIXME: Remove this type
  AliasToken as DerivativeToken,
  FullToken,
--- a/components/tooltip/style/index.ts
+++ b/components/tooltip/style/index.ts
@ -1,13 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
 import { initZoomMotion } from '../../style/motion';
-import type {
-  FullToken,
-  GenerateStyle,
-  PresetColorType,
-  UseComponentStyleResult,
-} from '../../theme/internal';
-import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
-import { resetComponent } from '../../style';
+import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genPresetColor, resetComponent } from '../../style';
 import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';

 export interface ComponentToken {
@ -24,23 +18,6 @@ interface TooltipToken extends FullToken<'Tooltip'> {
  tooltipRadiusOuter: number;
 }

-const generatorTooltipPresetColor: GenerateStyle<TooltipToken, CSSObject> = (token) => {
-  const { componentCls } = token;
-
-  return PresetColors.reduce((previousValue: any, currentValue: keyof PresetColorType) => {
-    const lightColor = token[`${currentValue}-6`];
-    previousValue[`&${componentCls}-${currentValue}`] = {
-      [`${componentCls}-inner`]: {
-        backgroundColor: lightColor,
-      },
-      [`${componentCls}-arrow`]: {
-        '--antd-arrow-background-color': lightColor,
-      },
-    };
-    return previousValue;
-  }, {});
-};
-
 const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
  const {
    componentCls, // ant-tooltip
@ -105,7 +82,16 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
        },

        // generator for preset color
-        ...generatorTooltipPresetColor(token),
+        ...genPresetColor(token, (colorKey, { darkColor }) => ({
+          [`&${componentCls}-${colorKey}`]: {
+            [`${componentCls}-inner`]: {
+              backgroundColor: darkColor,
+            },
+            [`${componentCls}-arrow`]: {
+              '--antd-arrow-background-color': darkColor,
+            },
+          },
+        })),

        // RTL
        '&-rtl': {
--- a/components/tooltip/util.ts
+++ b/components/tooltip/util.ts
@ -2,19 +2,19 @@

 import type * as React from 'react';
 import classNames from 'classnames';
-import { PresetColorTypes } from '../_util/colors';
-
-const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
+import { isPresetColor } from '../_util/colors';

 export function parseColor(prefixCls: string, color?: string) {
+  const isInternalColor = isPresetColor(color);
+
  const className = classNames({
-    [`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
+    [`${prefixCls}-${color}`]: color && isInternalColor,
  });

  const overlayStyle: React.CSSProperties = {};
  const arrowStyle: React.CSSProperties = {};

-  if (color && !PresetColorRegex.test(color)) {
+  if (color && !isInternalColor) {
    overlayStyle.background = color;
    // @ts-ignore
    arrowStyle['--antd-arrow-background-color'] = color;