From 39d9c1c6bfb3f2b40eaff9d4c12ba6532139f96f Mon Sep 17 00:00:00 2001 From: Jony J <1844749591@qq.com> Date: Mon, 30 Dec 2024 10:02:44 +0800 Subject: [PATCH] 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 | 4 ++-- .dumi/theme/builtins/ColorChunk/index.tsx | 8 +++---- .dumi/theme/builtins/TokenCompare/index.tsx | 4 ++-- .dumi/theme/builtins/TokenTable/index.tsx | 2 +- .dumi/theme/common/styles/Markdown.tsx | 10 ++++----- .dumi/theme/slots/Footer/index.tsx | 4 ++-- .../__tests__/__snapshots__/demo.test.ts.snap | 6 ++--- .../config-provider/__tests__/theme.test.tsx | 16 +++++++------- components/config-provider/cssVariables.ts | 16 +++++++------- components/date-picker/style/panel.ts | 6 ++--- components/date-picker/style/token.ts | 8 +++---- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../__snapshots__/demo.test.tsx.snap | 2 +- components/empty/empty.tsx | 4 ++-- components/empty/simple.tsx | 12 ++++------ .../__snapshots__/demo.test.tsx.snap | 4 ++-- components/image/style/index.ts | 22 +++++++++---------- components/input-number/style/token.ts | 4 ++-- components/menu/style/index.ts | 6 ++--- components/progress/progress.tsx | 4 ++-- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- components/qr-code/style/index.ts | 4 ++-- components/slider/style/index.ts | 8 +++---- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- components/switch/style/index.ts | 4 ++-- components/table/style/index.ts | 22 +++++++++---------- components/tag/style/index.ts | 4 ++-- .../theme/themes/dark/colorAlgorithm.ts | 6 ++--- .../theme/themes/default/colorAlgorithm.ts | 6 ++--- .../theme/themes/shared/genColorMapToken.ts | 8 +++---- components/theme/util/alias.ts | 8 +++---- components/theme/util/getAlphaColor.ts | 10 ++++----- components/tour/style/index.ts | 6 ++--- package.json | 4 ++-- 35 files changed, 117 insertions(+), 123 deletions(-) diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx index 78ebcb860d..2a60ebada0 100644 --- a/.dumi/pages/index/components/Theme/index.tsx +++ b/.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> = { 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; diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx index 26d815145f..743ded015d 100644 --- a/.dumi/theme/builtins/ColorChunk/index.tsx +++ b/.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> = (props) => { @@ -30,7 +30,7 @@ const ColorChunk: React.FC> = (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]); diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx index dc20185a61..2da926f294 100644 --- a/.dumi/theme/builtins/TokenCompare/index.tsx +++ b/.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 { diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx index afe7a86612..7611b51999 100644 --- a/.dumi/theme/builtins/TokenTable/index.tsx +++ b/.dumi/theme/builtins/TokenTable/index.tsx @@ -99,7 +99,7 @@ const TokenTable: FC = ({ 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], ); diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 81cb69c4c4..952074b558 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.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, diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx index 01d038bdb7..7419eef0e3 100644 --- a/.dumi/theme/slots/Footer/index.tsx +++ b/.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(); diff --git a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap index c20dfb4712..5961eaaf28 100644 --- a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap @@ -727,7 +727,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = ` >
{ ); 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)', }); diff --git a/components/config-provider/cssVariables.ts b/components/config-provider/cssVariables.ts index d897310ba3..90d89177c5 100644 --- a/components/config-provider/cssVariables.ts +++ b/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 = {}; - 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), diff --git a/components/date-picker/style/panel.ts b/components/date-picker/style/panel.ts index 1c7f802de4..30c90ede05 100644 --- a/components/date-picker/style/panel.ts +++ b/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': { diff --git a/components/date-picker/style/token.ts b/components/date-picker/style/token.ts index 44cb3cee05..38a211886a 100644 --- a/components/date-picker/style/token.ts +++ b/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, diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap index a6222dd9cd..d7da3b91ba 100644 --- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap +++ b/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`] = `
Render in this
Right Click on here
diff --git a/components/empty/empty.tsx b/components/empty/empty.tsx index 70f21fb6f9..e765ebf566 100644 --- a/components/empty/empty.tsx +++ b/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 } : {}; diff --git a/components/empty/simple.tsx b/components/empty/simple.tsx index e28fa52963..869bfee6dd 100644 --- a/components/empty/simple.tsx +++ b/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], ); diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 05ec8e588a..4cc351f0cd 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -5,7 +5,7 @@ Array [
,
First-content
, diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts index b722e91626..f7745c8c95 100644 --- a/components/switch/style/index.ts +++ b/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, diff --git a/components/table/style/index.ts b/components/table/style/index.ts index 22e75f5951..c96e31eb14 100644 --- a/components/table/style/index.ts +++ b/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, diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts index 11f169e73f..6d6b57664d 100644 --- a/components/tag/style/index.ts +++ b/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>[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, diff --git a/components/theme/themes/dark/colorAlgorithm.ts b/components/theme/themes/dark/colorAlgorithm.ts index cf395bc0ab..c88c22ebb3 100644 --- a/components/theme/themes/dark/colorAlgorithm.ts +++ b/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(); }; diff --git a/components/theme/themes/default/colorAlgorithm.ts b/components/theme/themes/default/colorAlgorithm.ts index 5ab75e6b1f..043d007312 100644 --- a/components/theme/themes/default/colorAlgorithm.ts +++ b/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(); }; diff --git a/components/theme/themes/shared/genColorMapToken.ts b/components/theme/themes/shared/genColorMapToken.ts index 955980dcdf..bfc96efb3a 100644 --- a/components/theme/themes/shared/genColorMapToken.ts +++ b/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', }; } diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 90f72f87e3..32d48e92ca 100644 --- a/components/theme/util/alias.ts +++ b/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), diff --git a/components/theme/util/getAlphaColor.ts b/components/theme/util/getAlphaColor.ts index 7cd1d3fdbb..5333877ae1 100644 --- a/components/theme/util/getAlphaColor.ts +++ b/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; diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts index 3feda6117b..f265ffaf68 100644 --- a/components/tour/style/index.ts +++ b/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 = (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({ diff --git a/package.json b/package.json index 8d40e562a6..d1021195f9 100644 --- a/package.json +++ b/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",