refactor: merge preset colors (ant-design#39742)

* style: remove redundant code * feat(style): add preset colour style generation method (cherry picked from commit 1266e42) * feat: uniform preset colour generation css selector method (cherry picked from commit 5af87e8) * chore: merge preset colors (cherry picked from commit 05040df) * chore: update (cherry picked from commit 241b40a) * 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>
Wxh16144-forks · Jan 6, 2023 · 7f189d5 · 7f189d5
1 parent 67e958f
commit 7f189d5
Show file tree

Hide file tree

Showing 14 changed files with 130 additions and 126 deletions.
diff --git 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);
+}
diff --git 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}`,

diff --git 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;
           }

diff --git 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]: {

diff --git a/components/badge/utils.ts b/components/badge/utils.ts
diff --git 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',

diff --git 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);
+}
diff --git 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,28 +63,22 @@ 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);
 
   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',
     },

diff --git 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'),

diff --git 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,

diff --git 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>;
 

diff --git 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,