mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

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

Browse Source 
* chore: replace TinyColor with FastColor across the codebase

* test: update snapshot
This commit is contained in:
Jony J 2024-12-30 10:02:44 +08:00 committed by GitHub
parent 03e3a41ec8
commit 39d9c1c6bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
35 changed files with 117 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.dumi/pages/index/components/Theme/index.tsx
View File

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

8
.dumi/theme/builtins/ColorChunk/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; 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'; import { createStyles } from 'antd-style';
const useStyle = createStyles(({ token, css }) => ({ const useStyle = createStyles(({ token, css }) => ({
@ -22,7 +22,7 @@ const useStyle = createStyles(({ token, css }) => ({
})); }));
interface ColorChunkProps { interface ColorChunkProps {
value?: ColorInput; value: ColorInput;
} }
const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) => { 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 { value, children } = props;
const dotColor = React.useMemo(() => { 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; return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
}, [value]); }, [value]);

4
.dumi/theme/builtins/TokenCompare/index.tsx
View File

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

2
.dumi/theme/builtins/TokenTable/index.tsx
View File

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

10
.dumi/theme/common/styles/Markdown.tsx
View File

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

4
.dumi/theme/slots/Footer/index.tsx
View File

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

16
components/config-provider/cssVariables.ts
View File

@ -1,5 +1,5 @@
import { generate } from '@ant-design/colors'; 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 canUseDom from 'rc-util/lib/Dom/canUseDom';
import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS'; 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) { export function getStyle(globalPrefixCls: string, theme: Theme) {
const variables: Record<string, string> = {}; 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(); let clone = color.clone();
clone = updater?.(clone) || clone; clone = updater?.(clone) || clone;
return clone.toRgbString(); return clone.toRgbString();
}; };
const fillColor = (colorVal: string, type: string) => { const fillColor = (colorVal: string, type: string) => {
const baseColor = new TinyColor(colorVal); const baseColor = new FastColor(colorVal);
const colorPalettes = generate(baseColor.toRgbString()); const colorPalettes = generate(baseColor.toRgbString());
variables[`${type}-color`] = formatColor(baseColor); variables[`${type}-color`] = formatColor(baseColor);
variables[`${type}-color-disabled`] = colorPalettes[1]; variables[`${type}-color-disabled`] = colorPalettes[1];
variables[`${type}-color-hover`] = colorPalettes[4]; variables[`${type}-color-hover`] = colorPalettes[4];
variables[`${type}-color-active`] = colorPalettes[6]; 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-bg`] = colorPalettes[0];
variables[`${type}-color-deprecated-border`] = colorPalettes[2]; variables[`${type}-color-deprecated-border`] = colorPalettes[2];
}; };
@ -34,7 +34,7 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
if (theme.primaryColor) { if (theme.primaryColor) {
fillColor(theme.primaryColor, 'primary'); fillColor(theme.primaryColor, 'primary');
const primaryColor = new TinyColor(theme.primaryColor); const primaryColor = new FastColor(theme.primaryColor);
const primaryColors = generate(primaryColor.toRgbString()); const primaryColors = generate(primaryColor.toRgbString());
// Legacy - We should use semantic naming standard // 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-20'] = formatColor(primaryColor, (c) => c.tint(20));
variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50)); variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50));
variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, (c) => 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) => 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) => variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, (c) =>
c.darken(2), c.darken(2),

6
components/date-picker/style/panel.ts
View File

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

8
components/date-picker/style/token.ts
View File

@ -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 type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
import { initComponentToken } 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 type { ArrowToken } from '../../style/roundedArrow';
import { getArrowToken } from '../../style/roundedArrow'; import { getArrowToken } from '../../style/roundedArrow';
import type { import type {
GlobalToken,
FullToken, FullToken,
GetDefaultToken, GetDefaultToken,
GlobalToken,
TokenWithCommonCls, TokenWithCommonCls,
} from '../../theme/internal'; } from '../../theme/internal';
@ -175,8 +175,8 @@ export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken
INTERNAL_FIXED_ITEM_MARGIN, INTERNAL_FIXED_ITEM_MARGIN,
cellHoverBg: token.controlItemBgHover, cellHoverBg: token.controlItemBgHover,
cellActiveWithRangeBg: token.controlItemBgActive, 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, cellBgDisabled: colorBgContainerDisabled,
timeColumnWidth: controlHeightLG * 1.4, timeColumnWidth: controlHeightLG * 1.4,
timeColumnHeight: 28 * 8, timeColumnHeight: 28 * 8,

4
components/empty/empty.tsx
View File

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

12
components/empty/simple.tsx
View File

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

22
components/image/style/index.ts
View File

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

4
components/input-number/style/token.ts
View File

@ -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 type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
import { initComponentToken } from '../../input/style/token'; import { initComponentToken } from '../../input/style/token';
@ -75,7 +75,7 @@ export const prepareComponentToken: GetDefaultToken<'InputNumber'> = (token) =>
handleVisible, handleVisible,
handleActiveBg: token.colorFillAlter, handleActiveBg: token.colorFillAlter,
handleBg: token.colorBgContainer, handleBg: token.colorBgContainer,
filledHandleBg: new TinyColor(token.colorFillSecondary) filledHandleBg: new FastColor(token.colorFillSecondary)
.onBackground(token.colorBgContainer) .onBackground(token.colorBgContainer)
.toHexString(), .toHexString(),
handleHoverColor: token.colorPrimary, handleHoverColor: token.colorPrimary,

6
components/menu/style/index.ts
View File

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

4
components/progress/progress.tsx
View File

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

4
components/qr-code/style/index.ts
View File

@ -1,5 +1,5 @@
import { unit } 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 { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@ -80,7 +80,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
}; };
export const prepareComponentToken: GetDefaultToken<'QRCode'> = (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'>( export default genStyleHooks<'QRCode'>(

8
components/slider/style/index.ts
View File

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

4
components/switch/style/index.ts
View File

@ -1,6 +1,6 @@
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { unit } 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 { genFocusStyle, resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@ -394,7 +394,7 @@ export const prepareComponentToken: GetDefaultToken<'Switch'> = (token) => {
handleBg: colorWhite, handleBg: colorWhite,
handleSize, handleSize,
handleSizeSM, 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, innerMinMargin: handleSize / 2,
innerMaxMargin: handleSize + padding + padding * 2, innerMaxMargin: handleSize + padding + padding * 2,
innerMinMarginSM: handleSizeSM / 2, innerMinMarginSM: handleSizeSM / 2,

22
components/table/style/index.ts
View File

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

4
components/tag/style/index.ts
View File

@ -1,7 +1,7 @@
import type React from 'react'; import type React from 'react';
import { unit } from '@ant-design/cssinjs'; import { unit } from '@ant-design/cssinjs';
import type { CSSInterpolation } 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 { resetComponent } from '../../style';
import type { FullToken, GetDefaultToken, GenStyleFn } from '../../theme/internal'; 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) => ({ export const prepareComponentToken: GetDefaultToken<'Tag'> = (token) => ({
defaultBg: new TinyColor(token.colorFillQuaternary) defaultBg: new FastColor(token.colorFillQuaternary)
.onBackground(token.colorBgContainer) .onBackground(token.colorBgContainer)
.toHexString(), .toHexString(),
defaultColor: token.colorText, defaultColor: token.colorText,

6
components/theme/themes/dark/colorAlgorithm.ts
View File

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

6
components/theme/themes/default/colorAlgorithm.ts
View File

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

8
components/theme/themes/shared/genColorMapToken.ts
View File

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

8
components/theme/util/alias.ts
View File

@ -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 type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface';
import seedToken from '../themes/seed'; 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)', boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
boxShadowCard: ` 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: ` boxShadowDrawerRight: `
-6px 0 16px 0 rgba(0, 0, 0, 0.08), -6px 0 16px 0 rgba(0, 0, 0, 0.08),

10
components/theme/util/getAlphaColor.ts
View File

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

6
components/tour/style/index.ts
View File

@ -1,5 +1,5 @@
import { unit } 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 { genFocusStyle, resetComponent } from '../../style';
import type { ArrowOffsetToken } from '../../style/placementArrow'; import type { ArrowOffsetToken } from '../../style/placementArrow';
@ -267,8 +267,8 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
export const prepareComponentToken: GetDefaultToken<'Tour'> = (token) => ({ export const prepareComponentToken: GetDefaultToken<'Tour'> = (token) => ({
zIndexPopup: token.zIndexPopupBase + 70, zIndexPopup: token.zIndexPopupBase + 70,
closeBtnSize: token.fontSize * token.lineHeight, 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) .onBackground(token.colorWhite)
.toRgbString(), .toRgbString(),
...getArrowOffsetToken({ ...getArrowOffsetToken({

4
package.json
View File

@ -108,10 +108,10 @@
"@ant-design/colors": "^7.1.0", "@ant-design/colors": "^7.1.0",
"@ant-design/cssinjs": "^1.22.0", "@ant-design/cssinjs": "^1.22.0",
"@ant-design/cssinjs-utils": "^1.1.3", "@ant-design/cssinjs-utils": "^1.1.3",
"@ant-design/fast-color": "^2.0.6",
"@ant-design/icons": "^5.5.2", "@ant-design/icons": "^5.5.2",
"@ant-design/react-slick": "~1.1.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/color-picker": "~2.0.1",
"@rc-component/mutate-observer": "^1.1.0", "@rc-component/mutate-observer": "^1.1.0",
"@rc-component/qrcode": "~1.0.0", "@rc-component/qrcode": "~1.0.0",