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 { FastColor } from '@ant-design/fast-color';
-import { TinyColor } from '@ctrl/tinycolor';
+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/collapse/__tests__/__snapshots__/demo.test.ts.snap

@@ -727,7 +727,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
 >
   <div
     class="ant-collapse-item ant-collapse-item-active"
-    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
+    style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -782,7 +782,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
   </div>
   <div
     class="ant-collapse-item"
-    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
+    style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -823,7 +823,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
   </div>
   <div
     class="ant-collapse-item"
-    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
+    style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"

components/config-provider/__tests__/theme.test.tsx

@@ -39,7 +39,7 @@ describe('ConfigProvider.Theme', () => {
       );
       expect(themeStyle).toBeTruthy();
 
-      expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
+      expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0,0,255)`);
     });
   });
 
@@ -234,7 +234,7 @@ describe('ConfigProvider.Theme', () => {
 
       expect(button).toHaveClass('foo');
       expect(button).toHaveStyle({
-        '--ant-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--ant-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--ant-button-default-shadow)',
         'border-radius': 'var(--ant-border-radius)',
       });
@@ -257,14 +257,14 @@ describe('ConfigProvider.Theme', () => {
 
       expect(fooBtn).toHaveClass('foo');
       expect(fooBtn).toHaveStyle({
-        '--ant-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--ant-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--ant-button-default-shadow)',
         'border-radius': 'var(--ant-border-radius)',
       });
 
       expect(barBtn).toHaveClass('bar');
       expect(barBtn).toHaveStyle({
-        '--bar-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--bar-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--bar-button-default-shadow)',
         'border-radius': 'var(--bar-border-radius)',
       });
@@ -298,7 +298,7 @@ describe('ConfigProvider.Theme', () => {
       const fooBtn = container.querySelector('.button-foo')!;
       expect(fooBtn).toHaveClass('foo');
       expect(fooBtn).toHaveStyle({
-        '--foo-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--foo-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--foo-button-default-shadow)',
         'border-radius': 'var(--foo-border-radius)',
       });
@@ -306,7 +306,7 @@ describe('ConfigProvider.Theme', () => {
       const barBtn = container.querySelector('.button-bar')!;
       expect(barBtn).toHaveClass('bar');
       expect(barBtn).toHaveStyle({
-        '--bar-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--bar-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--bar-button-default-shadow)',
         'border-radius': 'var(--bar-border-radius)',
       });
@@ -314,7 +314,7 @@ describe('ConfigProvider.Theme', () => {
       const bananaBtn = container.querySelector('.button-banana')!;
       expect(bananaBtn).toHaveClass('banana');
       expect(bananaBtn).toHaveStyle({
-        '--banana-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--banana-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--banana-button-default-shadow)',
         'border-radius': 'var(--banana-border-radius)',
       });
@@ -322,7 +322,7 @@ describe('ConfigProvider.Theme', () => {
       const catBtn = container.querySelector('.button-cat')!;
       expect(catBtn).toHaveClass('apple');
       expect(catBtn).toHaveStyle({
-        '--cat-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--cat-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--cat-button-default-shadow)',
         'border-radius': 'var(--cat-border-radius)',
       });

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(),
+    cellHoverWithRangeBg: new FastColor(token.colorPrimary).lighten(35).toHexString(),
-    cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(),
+    cellRangeBorderColor: new FastColor(token.colorPrimary).lighten(20).toHexString(),
     cellBgDisabled: colorBgContainerDisabled,
     timeColumnWidth: controlHeightLG * 1.4,
     timeColumnHeight: 28 * 8,

components/drawer/__tests__/__snapshots__/demo.test.ts.snap

@@ -406,7 +406,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
 
 exports[`renders components/drawer/demo/render-in-current.tsx correctly 1`] = `
 <div
-  style="position:relative;height:200px;padding:48px;overflow:hidden;background:rgba(0, 0, 0, 0.02);border:1px solid #f0f0f0;border-radius:8px"
+  style="position:relative;height:200px;padding:48px;overflow:hidden;background:rgba(0,0,0,0.02);border:1px solid #f0f0f0;border-radius:8px"
 >
   Render in this
   <div

components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap

@@ -236,7 +236,7 @@ exports[`renders components/dropdown/demo/basic.tsx correctly 1`] = `
 exports[`renders components/dropdown/demo/context-menu.tsx correctly 1`] = `
 <div
   class="ant-dropdown-trigger"
-  style="color:rgba(0, 0, 0, 0.45);background:#f5f5f5;height:200px;text-align:center;line-height:200px"
+  style="color:rgba(0,0,0,0.45);background:#f5f5f5;height:200px;text-align:center;line-height:200px"
 >
   Right Click on here
 </div>

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(),
+      borderColor: new FastColor(colorFill).onBackground(colorBgContainer).toHexString(),
-      shadowColor: new TinyColor(colorFillTertiary)
+      shadowColor: new FastColor(colorFillTertiary).onBackground(colorBgContainer).toHexString(),
-        .onBackground(colorBgContainer)
+      contentColor: new FastColor(colorFillQuaternary).onBackground(colorBgContainer).toHexString(),
-        .toHexShortString(),
-      contentColor: new TinyColor(colorFillQuaternary)
-        .onBackground(colorBgContainer)
-        .toHexShortString(),
     }),
     [colorFill, colorFillTertiary, colorFillQuaternary, colorBgContainer],
   );

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -5,7 +5,7 @@ Array [
   <form
     class="ant-form ant-form-horizontal"
     id="advanced_search"
-    style="max-width:none;background:rgba(0, 0, 0, 0.02);border-radius:8px;padding:24px"
+    style="max-width:none;background:rgba(0,0,0,0.02);border-radius:8px;padding:24px"
   >
     <div
       class="ant-row"
@@ -454,7 +454,7 @@ Array [
     </div>
   </form>,
   <div
-    style="line-height:200px;text-align:center;background:rgba(0, 0, 0, 0.02);border-radius:8px;margin-top:16px"
+    style="line-height:200px;text-align:center;background:rgba(0,0,0,0.02);border-radius:8px;margin-top:16px"
   >
     Search Result List
   </div>,

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 operationBg = new FastColor(modalMaskBg).setA(0.1);
-  const operationBgHover = operationBg.clone().setAlpha(0.2);
+  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 operationBg = new FastColor(modalMaskBg).setA(0.1);
-  const operationBgHover = operationBg.clone().setAlpha(0.2);
+  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(),
+  previewOperationColor: new FastColor(token.colorTextLightSolid).setA(0.65).toRgbString(),
-  previewOperationHoverColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.85).toRgbString(),
+  previewOperationHoverColor: new FastColor(token.colorTextLightSolid).setA(0.85).toRgbString(),
-  previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
+  previewOperationColorDisabled: new FastColor(token.colorTextLightSolid).setA(0.25).toRgbString(),
-    .setAlpha(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/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -734,7 +734,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
         />
         <path
           d="M0 0h7v1H0zM8 0h2v1H8zM11 0h5v1H11zM18,0 h7v1H18zM0 1h1v1H0zM6 1h1v1H6zM10 1h6v1H10zM18 1h1v1H18zM24,1 h1v1H24zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM10 2h1v1H10zM12 2h1v1H12zM15 2h1v1H15zM18 2h1v1H18zM20 2h3v1H20zM24,2 h1v1H24zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h2v1H8zM15 3h1v1H15zM18 3h1v1H18zM20 3h3v1H20zM24,3 h1v1H24zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM10 4h1v1H10zM12 4h1v1H12zM14 4h3v1H14zM18 4h1v1H18zM20 4h3v1H20zM24,4 h1v1H24zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM11 5h1v1H11zM15 5h2v1H15zM18 5h1v1H18zM24,5 h1v1H24zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18,6 h7v1H18zM8 7h1v1H8zM14 7h3v1H14zM1 8h1v1H1zM3 8h1v1H3zM5 8h8v1H5zM15 8h5v1H15zM21 8h2v1H21zM24,8 h1v1H24zM0 9h3v1H0zM7 9h1v1H7zM9 9h2v1H9zM16 9h3v1H16zM24,9 h1v1H24zM4 10h1v1H4zM6 10h2v1H6zM16 10h2v1H16zM20 10h1v1H20zM23,10 h2v1H23zM0 11h1v1H0zM2 11h2v1H2zM8 11h1v1H8zM11 11h2v1H11zM14 11h1v1H14zM18 11h3v1H18zM0 12h2v1H0zM4 12h4v1H4zM10 12h3v1H10zM17 12h2v1H17zM21 12h1v1H21zM23,12 h2v1H23zM1 13h2v1H1zM5 13h1v1H5zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM18 13h2v1H18zM21 13h2v1H21zM24,13 h1v1H24zM0 14h1v1H0zM2 14h2v1H2zM6 14h2v1H6zM9 14h1v1H9zM11 14h1v1H11zM18 14h3v1H18zM22 14h1v1H22zM24,14 h1v1H24zM1 15h1v1H1zM3 15h3v1H3zM7 15h1v1H7zM9 15h2v1H9zM13 15h1v1H13zM15 15h3v1H15zM20 15h1v1H20zM23 15h1v1H23zM0 16h3v1H0zM4 16h1v1H4zM6 16h1v1H6zM9 16h1v1H9zM12 16h1v1H12zM14 16h1v1H14zM16 16h7v1H16zM8 17h1v1H8zM10 17h1v1H10zM12 17h5v1H12zM20 17h2v1H20zM24,17 h1v1H24zM0 18h7v1H0zM8 18h3v1H8zM14 18h3v1H14zM18 18h1v1H18zM20 18h2v1H20zM23,18 h2v1H23zM0 19h1v1H0zM6 19h1v1H6zM8 19h2v1H8zM13 19h1v1H13zM16 19h1v1H16zM20 19h3v1H20zM24,19 h1v1H24zM0 20h1v1H0zM2 20h3v1H2zM6 20h1v1H6zM9 20h1v1H9zM11 20h3v1H11zM16 20h6v1H16zM23,20 h2v1H23zM0 21h1v1H0zM2 21h3v1H2zM6 21h1v1H6zM8 21h2v1H8zM11 21h1v1H11zM15 21h1v1H15zM17 21h1v1H17zM19 21h4v1H19zM0 22h1v1H0zM2 22h3v1H2zM6 22h1v1H6zM9 22h5v1H9zM15 22h1v1H15zM19 22h2v1H19zM22 22h1v1H22zM24,22 h1v1H24zM0 23h1v1H0zM6 23h1v1H6zM8 23h1v1H8zM10 23h1v1H10zM13 23h1v1H13zM15 23h4v1H15zM21 23h1v1H21zM0 24h7v1H0zM14 24h3v1H14zM19 24h1v1H19zM23,24 h2v1H23z"
-          fill="rgba(0, 0, 0, 0.88)"
+          fill="rgba(0,0,0,0.88)"
           shape-rendering="crispEdges"
         />
       </svg>

components/qr-code/__tests__/__snapshots__/demo.test.ts.snap

@@ -684,7 +684,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
         />
         <path
           d="M0 0h7v1H0zM8 0h2v1H8zM11 0h5v1H11zM18,0 h7v1H18zM0 1h1v1H0zM6 1h1v1H6zM10 1h6v1H10zM18 1h1v1H18zM24,1 h1v1H24zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM10 2h1v1H10zM12 2h1v1H12zM15 2h1v1H15zM18 2h1v1H18zM20 2h3v1H20zM24,2 h1v1H24zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h2v1H8zM15 3h1v1H15zM18 3h1v1H18zM20 3h3v1H20zM24,3 h1v1H24zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM10 4h1v1H10zM12 4h1v1H12zM14 4h3v1H14zM18 4h1v1H18zM20 4h3v1H20zM24,4 h1v1H24zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM11 5h1v1H11zM15 5h2v1H15zM18 5h1v1H18zM24,5 h1v1H24zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18,6 h7v1H18zM8 7h1v1H8zM14 7h3v1H14zM1 8h1v1H1zM3 8h1v1H3zM5 8h8v1H5zM15 8h5v1H15zM21 8h2v1H21zM24,8 h1v1H24zM0 9h3v1H0zM7 9h1v1H7zM9 9h2v1H9zM16 9h3v1H16zM24,9 h1v1H24zM4 10h1v1H4zM6 10h2v1H6zM16 10h2v1H16zM20 10h1v1H20zM23,10 h2v1H23zM0 11h1v1H0zM2 11h2v1H2zM8 11h1v1H8zM11 11h2v1H11zM14 11h1v1H14zM18 11h3v1H18zM0 12h2v1H0zM4 12h4v1H4zM10 12h3v1H10zM17 12h2v1H17zM21 12h1v1H21zM23,12 h2v1H23zM1 13h2v1H1zM5 13h1v1H5zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM18 13h2v1H18zM21 13h2v1H21zM24,13 h1v1H24zM0 14h1v1H0zM2 14h2v1H2zM6 14h2v1H6zM9 14h1v1H9zM11 14h1v1H11zM18 14h3v1H18zM22 14h1v1H22zM24,14 h1v1H24zM1 15h1v1H1zM3 15h3v1H3zM7 15h1v1H7zM9 15h2v1H9zM13 15h1v1H13zM15 15h3v1H15zM20 15h1v1H20zM23 15h1v1H23zM0 16h3v1H0zM4 16h1v1H4zM6 16h1v1H6zM9 16h1v1H9zM12 16h1v1H12zM14 16h1v1H14zM16 16h7v1H16zM8 17h1v1H8zM10 17h1v1H10zM12 17h5v1H12zM20 17h2v1H20zM24,17 h1v1H24zM0 18h7v1H0zM8 18h3v1H8zM14 18h3v1H14zM18 18h1v1H18zM20 18h2v1H20zM23,18 h2v1H23zM0 19h1v1H0zM6 19h1v1H6zM8 19h2v1H8zM13 19h1v1H13zM16 19h1v1H16zM20 19h3v1H20zM24,19 h1v1H24zM0 20h1v1H0zM2 20h3v1H2zM6 20h1v1H6zM9 20h1v1H9zM11 20h3v1H11zM16 20h6v1H16zM23,20 h2v1H23zM0 21h1v1H0zM2 21h3v1H2zM6 21h1v1H6zM8 21h2v1H8zM11 21h1v1H11zM15 21h1v1H15zM17 21h1v1H17zM19 21h4v1H19zM0 22h1v1H0zM2 22h3v1H2zM6 22h1v1H6zM9 22h5v1H9zM15 22h1v1H15zM19 22h2v1H19zM22 22h1v1H22zM24,22 h1v1H24zM0 23h1v1H0zM6 23h1v1H6zM8 23h1v1H8zM10 23h1v1H10zM13 23h1v1H13zM15 23h4v1H15zM21 23h1v1H21zM0 24h7v1H0zM14 24h3v1H14zM19 24h1v1H19zM23,24 h2v1H23z"
-          fill="rgba(0, 0, 0, 0.88)"
+          fill="rgba(0,0,0,0.88)"
           shape-rendering="crispEdges"
         />
       </svg>

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/steps/__tests__/__snapshots__/demo.test.ts.snap

@@ -4950,7 +4950,7 @@ Array [
     </div>
   </div>,
   <div
-    style="line-height:260px;text-align:center;color:rgba(0, 0, 0, 0.45);background-color:rgba(0, 0, 0, 0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
+    style="line-height:260px;text-align:center;color:rgba(0,0,0,0.45);background-color:rgba(0,0,0,0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
   >
     First-content
   </div>,

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();
+    .toHexString();
-  const colorFillContentSolid = new TinyColor(colorFillContent)
+  const colorFillContentSolid = new FastColor(colorFillContent)
     .onBackground(colorBgContainer)
-    .toHexShortString();
+    .toHexString();
-  const colorFillAlterSolid = new TinyColor(colorFillAlter)
+  const colorFillAlterSolid = new FastColor(colorFillAlter)
     .onBackground(colorBgContainer)
-    .toHexShortString();
+    .toHexString();
 
-  const baseColorAction = new TinyColor(colorIcon);
+  const baseColorAction = new FastColor(colorIcon);
-  const baseColorActionHover = new TinyColor(colorIconHover);
+  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])
+  const colorErrorBgFilledHover = new FastColor(errorColors[1])
-    .mix(new TinyColor(errorColors[3]), 50)
+    .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 1px 2px -2px ${new FastColor('rgba(0, 0, 0, 0.16)').toRgbString()},
-      0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
+      0 3px 6px 0 ${new FastColor('rgba(0, 0, 0, 0.12)').toRgbString()},
-      0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').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(),
+  primaryPrevBtnBg: new FastColor(token.colorTextLightSolid).setA(0.15).toRgbString(),
-  primaryNextBtnHoverBg: new TinyColor(token.colorBgTextHover)
+  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",
+    "@babel/runtime": "^7.25.7",
-    "@ctrl/tinycolor": "^3.6.1",
     "@rc-component/color-picker": "~2.0.1",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/qrcode": "~1.0.0",