chore: replace TinyColor with FastColor across the codebase (#52157)

* chore: replace TinyColor with FastColor across the codebase

* test: update snapshot

.dumi/pages/index/components/Theme/index.tsx

@@ -6,7 +6,7 @@ import {
   HomeOutlined,
   QuestionCircleOutlined,
 } from '@ant-design/icons';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import type { ColorPickerProps, GetProp, MenuProps, ThemeConfig } from 'antd';
 import {
   Breadcrumb,
@@ -324,7 +324,7 @@ const ThemesInfo: Record<THEME, Partial<ThemeData>> = {
 const normalize = (value: number) => value / 255;
 
 function rgbToColorMatrix(color: string) {
-  const rgb = new TinyColor(color).toRgb();
+  const rgb = new FastColor(color).toRgb();
   const { r, g, b } = rgb;
 
   const invertValue = normalize(r) * 100;

.dumi/theme/builtins/ColorChunk/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ColorInput } from '@ctrl/tinycolor';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
+import type { ColorInput } from '@ant-design/fast-color';
 import { createStyles } from 'antd-style';
 
 const useStyle = createStyles(({ token, css }) => ({
@@ -22,7 +22,7 @@ const useStyle = createStyles(({ token, css }) => ({
 }));
 
 interface ColorChunkProps {
-  value?: ColorInput;
+  value: ColorInput;
 }
 
 const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) => {
@@ -30,7 +30,7 @@ const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) =
   const { value, children } = props;
 
   const dotColor = React.useMemo(() => {
-    const _color = new TinyColor(value).toHex8String();
+    const _color = new FastColor(value).toHexString();
     return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
   }, [value]);
 

.dumi/theme/builtins/TokenCompare/index.tsx

@@ -1,6 +1,6 @@
 // 用于 color.md 中的颜色对比
 import React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { Flex, theme } from 'antd';
 import { createStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
@@ -55,7 +55,7 @@ const useStyle = createStyles(({ token, css }) => {
 });
 
 function color2Rgba(color: string) {
-  return `#${new TinyColor(color).toHex8().toUpperCase()}`;
+  return `#${new FastColor(color).toHexString().toUpperCase()}`;
 }
 
 interface ColorCircleProps {

.dumi/theme/builtins/TokenTable/index.tsx

@@ -99,7 +99,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
           name: token,
           desc: lang === 'cn' ? meta.desc : meta.descEn,
           type: meta.type,
-          value: defaultToken[token],
+          value: defaultToken[token as keyof typeof defaultToken],
         })),
     [type, lang],
   );

.dumi/theme/common/styles/Markdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
 
@@ -410,7 +410,7 @@ const GlobalStyle: React.FC = () => {
             background: ${demoGridColor};
 
             &:nth-child(2n + 1) {
-              background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
+              background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
             }
           }
 
@@ -426,12 +426,12 @@ const GlobalStyle: React.FC = () => {
           }
 
           ${antCls}-row .demo-col-1 {
-            background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
+            background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
           }
 
           ${antCls}-row .demo-col-2,
             .code-box-demo ${antCls}-row .demo-col-2 {
-            background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
+            background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
           }
 
           ${antCls}-row .demo-col-3,
@@ -442,7 +442,7 @@ const GlobalStyle: React.FC = () => {
 
           ${antCls}-row .demo-col-4,
             .code-box-demo ${antCls}-row .demo-col-4 {
-            background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()};
+            background: ${new FastColor(demoGridColor).setA(0.6).toHexString()};
           }
 
           ${antCls}-row .demo-col-5,

.dumi/theme/slots/Footer/index.tsx

@@ -13,7 +13,7 @@ import {
   UsergroupAddOutlined,
   ZhihuOutlined,
 } from '@ant-design/icons';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { createStyles } from 'antd-style';
 import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
 import { FormattedMessage, Link } from 'dumi';
@@ -37,7 +37,7 @@ const locales = {
 const useStyle = () => {
   const { isMobile } = useContext(SiteContext);
   return createStyles(({ token, css }) => {
-    const background = new TinyColor(getAlphaColor('#f0f3fa', '#fff'))
+    const background = new FastColor(getAlphaColor('#f0f3fa', '#fff'))
       .onBackground(token.colorBgContainer)
       .toHexString();
 

components/config-provider/cssVariables.ts

@@ -1,5 +1,5 @@
 import { generate } from '@ant-design/colors';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
@@ -11,21 +11,21 @@ const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
 export function getStyle(globalPrefixCls: string, theme: Theme) {
   const variables: Record<string, string> = {};
 
-  const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
+  const formatColor = (color: FastColor, updater?: (cloneColor: FastColor) => FastColor) => {
     let clone = color.clone();
     clone = updater?.(clone) || clone;
     return clone.toRgbString();
   };
 
   const fillColor = (colorVal: string, type: string) => {
-    const baseColor = new TinyColor(colorVal);
+    const baseColor = new FastColor(colorVal);
     const colorPalettes = generate(baseColor.toRgbString());
 
     variables[`${type}-color`] = formatColor(baseColor);
     variables[`${type}-color-disabled`] = colorPalettes[1];
     variables[`${type}-color-hover`] = colorPalettes[4];
     variables[`${type}-color-active`] = colorPalettes[6];
-    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
+    variables[`${type}-color-outline`] = baseColor.clone().setA(0.2).toRgbString();
     variables[`${type}-color-deprecated-bg`] = colorPalettes[0];
     variables[`${type}-color-deprecated-border`] = colorPalettes[2];
   };
@@ -34,7 +34,7 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
   if (theme.primaryColor) {
     fillColor(theme.primaryColor, 'primary');
 
-    const primaryColor = new TinyColor(theme.primaryColor);
+    const primaryColor = new FastColor(theme.primaryColor);
     const primaryColors = generate(primaryColor.toRgbString());
 
     // Legacy - We should use semantic naming standard
@@ -47,12 +47,12 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
     variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, (c) => c.tint(20));
     variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50));
     variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, (c) =>
-      c.setAlpha(c.getAlpha() * 0.12),
+      c.setA(c.a * 0.12),
     );
 
-    const primaryActiveColor = new TinyColor(primaryColors[0]);
+    const primaryActiveColor = new FastColor(primaryColors[0]);
     variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, (c) =>
-      c.setAlpha(c.getAlpha() * 0.3),
+      c.setA(c.a * 0.3),
     );
     variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, (c) =>
       c.darken(2),

components/date-picker/style/panel.ts

@@ -1,6 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { GenerateStyle } from '../../theme/internal';
 import type { PickerToken, SharedPickerToken } from './token';
@@ -477,7 +477,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
               },
 
               [`&${componentCls}-cell-week`]: {
-                color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString(),
+                color: new FastColor(colorTextLightSolid).setA(0.5).toHexString(),
               },
 
               [pickerCellInnerCls]: {
@@ -578,7 +578,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           },
 
           '&-active': {
-            background: new TinyColor(controlItemBgActive).setAlpha(0.2).toHexString(),
+            background: new FastColor(controlItemBgActive).setA(0.2).toHexString(),
           },
 
           '&:hover': {

components/date-picker/style/token.ts

@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
 import { initComponentToken } from '../../input/style/token';
@@ -6,9 +6,9 @@ import type { MultipleSelectorToken, SelectorToken } from '../../select/style/to
 import type { ArrowToken } from '../../style/roundedArrow';
 import { getArrowToken } from '../../style/roundedArrow';
 import type {
-  GlobalToken,
   FullToken,
   GetDefaultToken,
+  GlobalToken,
   TokenWithCommonCls,
 } from '../../theme/internal';
 
@@ -175,8 +175,8 @@ export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken
     INTERNAL_FIXED_ITEM_MARGIN,
     cellHoverBg: token.controlItemBgHover,
     cellActiveWithRangeBg: token.controlItemBgActive,
-    cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
-    cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(),
+    cellHoverWithRangeBg: new FastColor(token.colorPrimary).lighten(35).toHexString(),
+    cellRangeBorderColor: new FastColor(token.colorPrimary).lighten(20).toHexString(),
     cellBgDisabled: colorBgContainerDisabled,
     timeColumnWidth: controlHeightLG * 1.4,
     timeColumnHeight: 28 * 8,

components/empty/empty.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { useLocale } from '../locale';
 import { useToken } from '../theme/internal';
@@ -8,7 +8,7 @@ const Empty: React.FC = () => {
   const [, token] = useToken();
   const [locale] = useLocale('Empty');
 
-  const bgColor = new TinyColor(token.colorBgBase);
+  const bgColor = new FastColor(token.colorBgBase);
 
   // Dark Theme need more dark of this
   const themeStyle: React.CSSProperties = bgColor.toHsl().l < 0.5 ? { opacity: 0.65 } : {};

components/empty/simple.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { useToken } from '../theme/internal';
 import { useLocale } from '../locale';
@@ -13,13 +13,9 @@ const Simple: React.FC = () => {
 
   const { borderColor, shadowColor, contentColor } = useMemo(
     () => ({
-      borderColor: new TinyColor(colorFill).onBackground(colorBgContainer).toHexShortString(),
-      shadowColor: new TinyColor(colorFillTertiary)
-        .onBackground(colorBgContainer)
-        .toHexShortString(),
-      contentColor: new TinyColor(colorFillQuaternary)
-        .onBackground(colorBgContainer)
-        .toHexShortString(),
+      borderColor: new FastColor(colorFill).onBackground(colorBgContainer).toHexString(),
+      shadowColor: new FastColor(colorFillTertiary).onBackground(colorBgContainer).toHexString(),
+      contentColor: new FastColor(colorFillQuaternary).onBackground(colorBgContainer).toHexString(),
     }),
     [colorFill, colorFillTertiary, colorFillQuaternary, colorBgContainer],
   );

components/image/style/index.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { genModalMaskStyle } from '../../modal/style';
 import { textEllipsis } from '../../style';
@@ -75,7 +75,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
     alignItems: 'center',
     justifyContent: 'center',
     color: colorTextLightSolid,
-    background: new TinyColor('#000').setAlpha(0.5).toRgbString(),
+    background: new FastColor('#000').setA(0.5).toRgbString(),
     cursor: 'pointer',
     opacity: 0,
     transition: `opacity ${motionDurationSlow}`,
@@ -108,8 +108,8 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
     colorTextLightSolid,
   } = token;
 
-  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
-  const operationBgHover = operationBg.clone().setAlpha(0.2);
+  const operationBg = new FastColor(modalMaskBg).setA(0.1);
+  const operationBgHover = operationBg.clone().setA(0.2);
 
   return {
     [`${previewCls}-footer`]: {
@@ -198,8 +198,8 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
     motionDurationSlow,
   } = token;
 
-  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
-  const operationBgHover = operationBg.clone().setAlpha(0.2);
+  const operationBg = new FastColor(modalMaskBg).setA(0.1);
+  const operationBgHover = operationBg.clone().setA(0.2);
 
   return {
     [`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
@@ -376,11 +376,9 @@ const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
 // ============================== Export ==============================
 export const prepareComponentToken: GetDefaultToken<'Image'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase + 80,
-  previewOperationColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.65).toRgbString(),
-  previewOperationHoverColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.85).toRgbString(),
-  previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
-    .setAlpha(0.25)
-    .toRgbString(),
+  previewOperationColor: new FastColor(token.colorTextLightSolid).setA(0.65).toRgbString(),
+  previewOperationHoverColor: new FastColor(token.colorTextLightSolid).setA(0.85).toRgbString(),
+  previewOperationColorDisabled: new FastColor(token.colorTextLightSolid).setA(0.25).toRgbString(),
   previewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
 });
 
@@ -391,7 +389,7 @@ export default genStyleHooks(
 
     const imageToken = mergeToken<ImageToken>(token, {
       previewCls,
-      modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: Shared Token
+      modalMaskBg: new FastColor('#000').setA(0.45).toRgbString(), // FIXME: Shared Token
       imagePreviewSwitchSize: token.controlHeightLG,
     });
 

components/input-number/style/token.ts

@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
 import { initComponentToken } from '../../input/style/token';
@@ -75,7 +75,7 @@ export const prepareComponentToken: GetDefaultToken<'InputNumber'> = (token) =>
     handleVisible,
     handleActiveBg: token.colorFillAlter,
     handleBg: token.colorBgContainer,
-    filledHandleBg: new TinyColor(token.colorFillSecondary)
+    filledHandleBg: new FastColor(token.colorFillSecondary)
       .onBackground(token.colorBgContainer)
       .toHexString(),
     handleHoverColor: token.colorPrimary,

components/menu/style/index.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import type { CssUtil } from 'antd-style';
 
 import { clearFix, resetComponent, resetIcon } from '../../style';
@@ -871,7 +871,7 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
   const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
   const itemMarginInline = token.itemMarginInline ?? token.marginXXS;
 
-  const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
+  const colorTextDark = new FastColor(colorTextLightSolid).setA(0.65).toRgbString();
 
   return {
     dropdownWidth: 160,
@@ -944,7 +944,7 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
     groupTitleFontSize: fontSize,
 
     // Disabled
-    darkItemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
+    darkItemDisabledColor: new FastColor(colorTextLightSolid).setA(0.25).toRgbString(),
 
     // Dark
     darkItemColor: colorTextDark,

components/progress/progress.tsx

@@ -3,7 +3,7 @@ import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 
@@ -92,7 +92,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
         typeof strokeColorNotArray === 'string'
           ? strokeColorNotArray
           : Object.values(strokeColorNotArray)[0];
-      return new TinyColor(color).isLight();
+      return new FastColor(color).isLight();
     }
     return false;
   }, [strokeColor]);

components/qr-code/style/index.ts

@@ -1,5 +1,5 @@
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -80,7 +80,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
 };
 
 export const prepareComponentToken: GetDefaultToken<'QRCode'> = (token) => ({
-  QRCodeMaskBackgroundColor: new TinyColor(token.colorBgContainer).setAlpha(0.96).toRgbString(),
+  QRCodeMaskBackgroundColor: new FastColor(token.colorBgContainer).setA(0.96).toRgbString(),
 });
 
 export default genStyleHooks<'QRCode'>(

components/slider/style/index.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -466,7 +466,7 @@ export const prepareComponentToken: GetDefaultToken<'Slider'> = (token) => {
   const handleLineWidth = token.lineWidth + increaseHandleWidth;
   const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 1.5;
   const handleActiveColor = token.colorPrimary;
-  const handleActiveOutlineColor = new TinyColor(handleActiveColor).setAlpha(0.2).toRgbString();
+  const handleActiveOutlineColor = new FastColor(handleActiveColor).setA(0.2).toRgbString();
 
   return {
     controlSize,
@@ -483,9 +483,9 @@ export const prepareComponentToken: GetDefaultToken<'Slider'> = (token) => {
     handleColor: token.colorPrimaryBorder,
     handleActiveColor,
     handleActiveOutlineColor,
-    handleColorDisabled: new TinyColor(token.colorTextDisabled)
+    handleColorDisabled: new FastColor(token.colorTextDisabled)
       .onBackground(token.colorBgContainer)
-      .toHexShortString(),
+      .toHexString(),
     dotBorderColor: token.colorBorderSecondary,
     dotActiveBorderColor: token.colorPrimaryBorder,
     trackBgDisabled: token.colorBgContainerDisabled,

components/switch/style/index.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -394,7 +394,7 @@ export const prepareComponentToken: GetDefaultToken<'Switch'> = (token) => {
     handleBg: colorWhite,
     handleSize,
     handleSizeSM,
-    handleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
+    handleShadow: `0 2px 4px 0 ${new FastColor('#00230b').setA(0.2).toRgbString()}`,
     innerMinMargin: handleSize / 2,
     innerMaxMargin: handleSize + padding + padding * 2,
     innerMinMarginSM: handleSizeSM / 2,

components/table/style/index.ts

@@ -1,6 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { clearFix, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -416,18 +416,18 @@ export const prepareComponentToken: GetDefaultToken<'Table'> = (token) => {
     controlInteractiveSize,
   } = token;
 
-  const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
+  const colorFillSecondarySolid = new FastColor(colorFillSecondary)
     .onBackground(colorBgContainer)
-    .toHexShortString();
-  const colorFillContentSolid = new TinyColor(colorFillContent)
+    .toHexString();
+  const colorFillContentSolid = new FastColor(colorFillContent)
     .onBackground(colorBgContainer)
-    .toHexShortString();
-  const colorFillAlterSolid = new TinyColor(colorFillAlter)
+    .toHexString();
+  const colorFillAlterSolid = new FastColor(colorFillAlter)
     .onBackground(colorBgContainer)
-    .toHexShortString();
+    .toHexString();
 
-  const baseColorAction = new TinyColor(colorIcon);
-  const baseColorActionHover = new TinyColor(colorIconHover);
+  const baseColorAction = new FastColor(colorIcon);
+  const baseColorActionHover = new FastColor(colorIconHover);
 
   const expandIconHalfInner = controlInteractiveSize / 2 - lineWidth;
   const expandIconSize = expandIconHalfInner * 2 + lineWidth * 3;
@@ -469,11 +469,11 @@ export const prepareComponentToken: GetDefaultToken<'Table'> = (token) => {
       Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
     headerIconColor: baseColorAction
       .clone()
-      .setAlpha(baseColorAction.getAlpha() * opacityLoading)
+      .setA(baseColorAction.a * opacityLoading)
       .toRgbString(),
     headerIconHoverColor: baseColorActionHover
       .clone()
-      .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
+      .setA(baseColorActionHover.a * opacityLoading)
       .toRgbString(),
     expandIconHalfInner,
     expandIconSize,

components/tag/style/index.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { unit } from '@ant-design/cssinjs';
 import type { CSSInterpolation } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GetDefaultToken, GenStyleFn } from '../../theme/internal';
@@ -140,7 +140,7 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Tag'>>[0]) => TagToken
 };
 
 export const prepareComponentToken: GetDefaultToken<'Tag'> = (token) => ({
-  defaultBg: new TinyColor(token.colorFillQuaternary)
+  defaultBg: new FastColor(token.colorFillQuaternary)
     .onBackground(token.colorBgContainer)
     .toHexString(),
   defaultColor: token.colorText,

components/theme/themes/dark/colorAlgorithm.ts

@@ -1,9 +1,9 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 export const getAlphaColor = (baseColor: string, alpha: number) =>
-  new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+  new FastColor(baseColor).setA(alpha).toRgbString();
 
 export const getSolidColor = (baseColor: string, brightness: number) => {
-  const instance = new TinyColor(baseColor);
+  const instance = new FastColor(baseColor);
   return instance.lighten(brightness).toHexString();
 };

components/theme/themes/default/colorAlgorithm.ts

@@ -1,9 +1,9 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 export const getAlphaColor = (baseColor: string, alpha: number) =>
-  new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+  new FastColor(baseColor).setA(alpha).toRgbString();
 
 export const getSolidColor = (baseColor: string, brightness: number) => {
-  const instance = new TinyColor(baseColor);
+  const instance = new FastColor(baseColor);
   return instance.darken(brightness).toHexString();
 };

components/theme/themes/shared/genColorMapToken.ts

@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { ColorMapToken, SeedToken } from '../../interface';
 import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
@@ -33,8 +33,8 @@ export default function genColorMapToken(
   const colorLink = seed.colorLink || seed.colorInfo;
   const linkColors = generateColorPalettes(colorLink);
 
-  const colorErrorBgFilledHover = new TinyColor(errorColors[1])
-    .mix(new TinyColor(errorColors[3]), 50)
+  const colorErrorBgFilledHover = new FastColor(errorColors[1])
+    .mix(new FastColor(errorColors[3]), 50)
     .toHexString();
 
   return {
@@ -101,7 +101,7 @@ export default function genColorMapToken(
     colorLink: linkColors[6],
     colorLinkActive: linkColors[7],
 
-    colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+    colorBgMask: new FastColor('#000').setA(0.45).toRgbString(),
     colorWhite: '#fff',
   };
 }

components/theme/util/alias.ts

@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface';
 import seedToken from '../themes/seed';
@@ -167,9 +167,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
 
     boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
     boxShadowCard: `
-      0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
-      0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
-      0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
+      0 1px 2px -2px ${new FastColor('rgba(0, 0, 0, 0.16)').toRgbString()},
+      0 3px 6px 0 ${new FastColor('rgba(0, 0, 0, 0.12)').toRgbString()},
+      0 5px 12px 4px ${new FastColor('rgba(0, 0, 0, 0.09)').toRgbString()}
     `,
     boxShadowDrawerRight: `
       -6px 0 16px 0 rgba(0, 0, 0, 0.08),

components/theme/util/getAlphaColor.ts

@@ -1,29 +1,29 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 function isStableColor(color: number): boolean {
   return color >= 0 && color <= 255;
 }
 
 function getAlphaColor(frontColor: string, backgroundColor: string): string {
-  const { r: fR, g: fG, b: fB, a: originAlpha } = new TinyColor(frontColor).toRgb();
+  const { r: fR, g: fG, b: fB, a: originAlpha } = new FastColor(frontColor).toRgb();
   if (originAlpha < 1) {
     return frontColor;
   }
 
-  const { r: bR, g: bG, b: bB } = new TinyColor(backgroundColor).toRgb();
+  const { r: bR, g: bG, b: bB } = new FastColor(backgroundColor).toRgb();
 
   for (let fA = 0.01; fA <= 1; fA += 0.01) {
     const r = Math.round((fR - bR * (1 - fA)) / fA);
     const g = Math.round((fG - bG * (1 - fA)) / fA);
     const b = Math.round((fB - bB * (1 - fA)) / fA);
     if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
-      return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString();
+      return new FastColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString();
     }
   }
 
   // fallback
   /* istanbul ignore next */
-  return new TinyColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString();
+  return new FastColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString();
 }
 
 export default getAlphaColor;

components/tour/style/index.ts

@@ -1,5 +1,5 @@
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { genFocusStyle, resetComponent } from '../../style';
 import type { ArrowOffsetToken } from '../../style/placementArrow';
@@ -267,8 +267,8 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
 export const prepareComponentToken: GetDefaultToken<'Tour'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase + 70,
   closeBtnSize: token.fontSize * token.lineHeight,
-  primaryPrevBtnBg: new TinyColor(token.colorTextLightSolid).setAlpha(0.15).toRgbString(),
-  primaryNextBtnHoverBg: new TinyColor(token.colorBgTextHover)
+  primaryPrevBtnBg: new FastColor(token.colorTextLightSolid).setA(0.15).toRgbString(),
+  primaryNextBtnHoverBg: new FastColor(token.colorBgTextHover)
     .onBackground(token.colorWhite)
     .toRgbString(),
   ...getArrowOffsetToken({

package.json

@@ -108,10 +108,10 @@
     "@ant-design/colors": "^7.1.0",
     "@ant-design/cssinjs": "^1.22.0",
     "@ant-design/cssinjs-utils": "^1.1.3",
+    "@ant-design/fast-color": "^2.0.6",
     "@ant-design/icons": "^5.5.2",
     "@ant-design/react-slick": "~1.1.2",
-    "@babel/runtime": "^7.26.0",
-    "@ctrl/tinycolor": "^3.6.1",
+    "@babel/runtime": "^7.25.7",
     "@rc-component/color-picker": "~2.0.1",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/qrcode": "~1.0.0",