diff --git a/components/_util/__tests__/wave.test.tsx b/components/_util/__tests__/wave.test.tsx index 72421bc80b..aad8357f00 100644 --- a/components/_util/__tests__/wave.test.tsx +++ b/components/_util/__tests__/wave.test.tsx @@ -4,11 +4,15 @@ import { clsx } from 'clsx'; import mountTest from '../../../tests/shared/mountTest'; import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils'; import Checkbox from '../../checkbox'; +import { defaultPrefixCls } from '../../config-provider'; +import { genCssVar } from '../../theme/util/genStyleUtils'; import Wave from '../wave'; import { TARGET_CLS } from '../wave/interface'; (global as any).isVisible = true; +const [varName] = genCssVar(defaultPrefixCls, 'wave'); + // TODO: Remove this. Mock for React 19 jest.mock('react-dom', () => { const realReactDOM = jest.requireActual('react-dom'); @@ -139,9 +143,8 @@ describe('Wave component', () => { fireEvent.click(container.querySelector('button')!); waitRaf(); - const style = getWaveStyle(); - expect(style['--wave-color']).toEqual(undefined); + expect(style[varName('color')]).toBe(undefined); unmount(); }); @@ -159,7 +162,7 @@ describe('Wave component', () => { waitRaf(); const style = getWaveStyle(); - expect(style['--wave-color']).toEqual('rgb(255, 0, 0)'); + expect(style[varName('color')]).toBe('rgb(255, 0, 0)'); unmount(); }); @@ -175,7 +178,7 @@ describe('Wave component', () => { waitRaf(); const style = getWaveStyle(); - expect(style['--wave-color']).toEqual('rgb(0, 0, 255)'); + expect(style[varName('color')]).toBe('rgb(0, 0, 255)'); unmount(); }); @@ -191,7 +194,7 @@ describe('Wave component', () => { waitRaf(); const style = getWaveStyle(); - expect(style['--wave-color']).toEqual('rgb(0, 128, 0)'); + expect(style[varName('color')]).toBe('rgb(0, 128, 0)'); unmount(); }); @@ -207,7 +210,7 @@ describe('Wave component', () => { waitRaf(); const style = getWaveStyle(); - expect(style['--wave-color']).toEqual('rgb(255, 255, 0)'); + expect(style[varName('color')]).toBe('rgb(255, 255, 0)'); unmount(); }); @@ -288,7 +291,7 @@ describe('Wave component', () => { waitRaf(); const style = getWaveStyle(); - expect(style['--wave-color']).toEqual('rgb(255, 0, 0)'); + expect(style[varName('color')]).toBe('rgb(255, 0, 0)'); unmount(); }); @@ -306,7 +309,7 @@ describe('Wave component', () => { waitRaf(); const style = getWaveStyle(); - expect(style['--wave-color']).toEqual('red'); + expect(style[varName('color')]).toBe('red'); unmount(); }); @@ -374,7 +377,7 @@ describe('Wave component', () => { expect(document.querySelector('.ant-wave')).toBeTruthy(); const style = getWaveStyle(); - expect(style['--wave-color']).toEqual('rgb(255, 0, 0)'); + expect(style[varName('color')]).toBe('rgb(255, 0, 0)'); unmount(); }); diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx index 97c6a721cb..3f6598f548 100644 --- a/components/_util/wave/WaveEffect.tsx +++ b/components/_util/wave/WaveEffect.tsx @@ -6,6 +6,8 @@ import { composeRef } from '@rc-component/util/lib/ref'; import { clsx } from 'clsx'; import type { WaveProps } from '.'; +import { ConfigContext } from '../../config-provider'; +import { genCssVar } from '../../theme/util/genStyleUtils'; import { TARGET_CLS } from './interface'; import type { ShowWaveEffect } from './interface'; import { getTargetWaveColor } from './util'; @@ -21,10 +23,16 @@ export interface WaveEffectProps { colorSource?: WaveProps['colorSource']; } -const WaveEffect = (props: WaveEffectProps) => { +const WaveEffect: React.FC = (props) => { const { className, target, component, colorSource } = props; const divRef = React.useRef(null); + const { getPrefixCls } = React.useContext(ConfigContext); + + const rootPrefixCls = getPrefixCls(); + + const [varName] = genCssVar(rootPrefixCls, 'wave'); + // ===================== Effect ===================== const [color, setWaveColor] = React.useState(null); const [borderRadius, setBorderRadius] = React.useState([]); @@ -43,7 +51,7 @@ const WaveEffect = (props: WaveEffectProps) => { }; if (color) { - waveStyle['--wave-color'] = color; + waveStyle[varName('color')] = color; } function syncPos() { diff --git a/components/_util/wave/style.ts b/components/_util/wave/style.ts index d30ba7f77f..dfaa50e54f 100644 --- a/components/_util/wave/style.ts +++ b/components/_util/wave/style.ts @@ -1,5 +1,6 @@ import { genComponentStyleHook } from '../../theme/internal'; import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genCssVar } from '../../theme/util/genStyleUtils'; // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default export interface ComponentToken {} @@ -7,15 +8,15 @@ export interface ComponentToken {} export interface WaveToken extends FullToken<'Wave'> {} const genWaveStyle: GenerateStyle = (token) => { - const { componentCls, colorPrimary } = token; + const { componentCls, colorPrimary, antCls } = token; + const [, varRef] = genCssVar(antCls, 'wave'); return { [componentCls]: { position: 'absolute', background: 'transparent', pointerEvents: 'none', boxSizing: 'border-box', - color: `var(--wave-color, ${colorPrimary})`, - + color: varRef('color', colorPrimary), boxShadow: `0 0 0 0 currentcolor`, opacity: 0.2, diff --git a/components/button/style/variant.ts b/components/button/style/variant.ts index 3c0dda45ff..3ba729c82d 100644 --- a/components/button/style/variant.ts +++ b/components/button/style/variant.ts @@ -15,58 +15,62 @@ const genVariantStyle: GenerateStyle = (token) => { // ============================================================== { // Border - [varName`border-width`]: '1px', + [varName('border-width')]: '1px', - [varName`border-color`]: '#000', - [varName`border-color-hover`]: varRef`border-color`, - [varName`border-color-active`]: varRef`border-color`, - [varName`border-color-disabled`]: varRef`border-color`, + [varName('border-color')]: '#000', + [varName('border-color-hover')]: varRef('border-color'), + [varName('border-color-active')]: varRef('border-color'), + [varName('border-color-disabled')]: varRef('border-color'), - [varName`border-style`]: 'solid', + [varName('border-style')]: 'solid', // Text - [varName`text-color`]: '#000', - [varName`text-color-hover`]: varRef`text-color`, - [varName`text-color-active`]: varRef`text-color`, - [varName`text-color-disabled`]: varRef`text-color`, + [varName('text-color')]: '#000', + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), + [varName('text-color-disabled')]: varRef('text-color'), // Background - [varName`bg-color`]: '#ddd', - [varName`bg-color-hover`]: varRef`bg-color`, - [varName`bg-color-active`]: varRef`bg-color`, - [varName`bg-color-disabled`]: token.colorBgContainerDisabled, - [varName`bg-color-container`]: token.colorBgContainer, + [varName('bg-color')]: '#ddd', + [varName('bg-color-hover')]: varRef('bg-color'), + [varName('bg-color-active')]: varRef('bg-color'), + [varName('bg-color-disabled')]: token.colorBgContainerDisabled, + [varName('bg-color-container')]: token.colorBgContainer, // Shadow - [varName`shadow`]: 'none', + [varName('shadow')]: 'none', }, // ============================================================== // == Template == // ============================================================== { // Basic - border: [varRef`border-width`, varRef`border-style`, varRef`border-color`].join(' '), - color: varRef`text-color`, - backgroundColor: varRef`bg-color`, + border: [varRef('border-width'), varRef('border-style'), varRef('border-color')].join(' '), + color: varRef('text-color'), + backgroundColor: varRef('bg-color'), // Status [`&:not(:disabled):not(${componentCls}-disabled)`]: { // Hover '&:hover': { - border: [varRef`border-width`, varRef`border-style`, varRef`border-color-hover`].join( - ' ', - ), - color: varRef`text-color-hover`, - backgroundColor: varRef`bg-color-hover`, + border: [ + varRef('border-width'), + varRef('border-style'), + varRef('border-color-hover'), + ].join(' '), + color: varRef('text-color-hover'), + backgroundColor: varRef('bg-color-hover'), }, // Active '&:active': { - border: [varRef`border-width`, varRef`border-style`, varRef`border-color-active`].join( - ' ', - ), - color: varRef`text-color-active`, - backgroundColor: varRef`bg-color-active`, + border: [ + varRef('border-width'), + varRef('border-style'), + varRef('border-color-active'), + ].join(' '), + color: varRef('text-color-active'), + backgroundColor: varRef('bg-color-active'), }, }, }, @@ -78,65 +82,65 @@ const genVariantStyle: GenerateStyle = (token) => { // >>>>> Solid [`&${componentCls}-variant-solid`]: { // Solid Variables - [varName`solid-bg-color`]: varRef`color-base`, - [varName`solid-bg-color-hover`]: varRef`color-hover`, - [varName`solid-bg-color-active`]: varRef`color-active`, + [varName('solid-bg-color')]: varRef('color-base'), + [varName('solid-bg-color-hover')]: varRef('color-hover'), + [varName('solid-bg-color-active')]: varRef('color-active'), // Variables - [varName`border-color`]: 'transparent', + [varName('border-color')]: 'transparent', - [varName`text-color`]: token.colorTextLightSolid, + [varName('text-color')]: token.colorTextLightSolid, - [varName`bg-color`]: varRef`solid-bg-color`, - [varName`bg-color-hover`]: varRef`solid-bg-color-hover`, - [varName`bg-color-active`]: varRef`solid-bg-color-active`, + [varName('bg-color')]: varRef('solid-bg-color'), + [varName('bg-color-hover')]: varRef('solid-bg-color-hover'), + [varName('bg-color-active')]: varRef('solid-bg-color-active'), // Box Shadow - boxShadow: varRef`shadow`, + boxShadow: varRef('shadow'), }, // >>>>> Outlined & Dashed [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: { - [varName`border-color`]: varRef`color-base`, - [varName`border-color-hover`]: varRef`color-hover`, - [varName`border-color-active`]: varRef`color-active`, + [varName('border-color')]: varRef('color-base'), + [varName('border-color-hover')]: varRef('color-hover'), + [varName('border-color-active')]: varRef('color-active'), - [varName`bg-color`]: varRef`bg-color-container`, - [varName`text-color`]: varRef`color-base`, - [varName`text-color-hover`]: varRef`color-hover`, - [varName`text-color-active`]: varRef`color-active`, + [varName('bg-color')]: varRef('bg-color-container'), + [varName('text-color')]: varRef('color-base'), + [varName('text-color-hover')]: varRef('color-hover'), + [varName('text-color-active')]: varRef('color-active'), // Box Shadow - boxShadow: varRef`shadow`, + boxShadow: varRef('shadow'), }, // >>>>> Dashed [`&${componentCls}-variant-dashed`]: { - [varName`border-style`]: 'dashed', - [varName`bg-color-disabled`]: token.dashedBgDisabled, + [varName('border-style')]: 'dashed', + [varName('bg-color-disabled')]: token.dashedBgDisabled, }, // >>>>> Filled [`&${componentCls}-variant-filled`]: { - [varName`border-color`]: 'transparent', + [varName('border-color')]: 'transparent', - [varName`text-color`]: varRef`color-base`, + [varName('text-color')]: varRef('color-base'), - [varName`bg-color`]: varRef`color-light`, - [varName`bg-color-hover`]: varRef`color-light-hover`, - [varName`bg-color-active`]: varRef`color-light-active`, + [varName('bg-color')]: varRef('color-light'), + [varName('bg-color-hover')]: varRef('color-light-hover'), + [varName('bg-color-active')]: varRef('color-light-active'), }, // >>>>> Text & Link [`&${componentCls}-variant-text, &${componentCls}-variant-link`]: { - [varName`border-color`]: 'transparent', + [varName('border-color')]: 'transparent', - [varName`text-color`]: varRef`color-base`, - [varName`text-color-hover`]: varRef`color-hover`, - [varName`text-color-active`]: varRef`color-active`, - [varName`bg-color`]: 'transparent', - [varName`bg-color-hover`]: 'transparent', - [varName`bg-color-active`]: 'transparent', + [varName('text-color')]: varRef('color-base'), + [varName('text-color-hover')]: varRef('color-hover'), + [varName('text-color-active')]: varRef('color-active'), + [varName('bg-color')]: 'transparent', + [varName('bg-color-hover')]: 'transparent', + [varName('bg-color-active')]: 'transparent', [`&:disabled, &${token.componentCls}-disabled`]: { background: 'transparent', @@ -146,8 +150,8 @@ const genVariantStyle: GenerateStyle = (token) => { // >>>>> Text [`&${componentCls}-variant-text`]: { - [varName`bg-color-hover`]: varRef`color-light`, - [varName`bg-color-active`]: varRef`color-light-active`, + [varName('bg-color-hover')]: varRef('color-light'), + [varName('bg-color-active')]: varRef('color-light-active'), }, }, @@ -158,87 +162,87 @@ const genVariantStyle: GenerateStyle = (token) => { // ======================== By Default ======================== // >>>>> Link [`&${componentCls}-variant-link`]: { - [varName`color-base`]: token.colorLink, - [varName`color-hover`]: token.colorLinkHover, - [varName`color-active`]: token.colorLinkActive, + [varName('color-base')]: token.colorLink, + [varName('color-hover')]: token.colorLinkHover, + [varName('color-active')]: token.colorLinkActive, }, // ======================== Compatible ======================== // >>>>> Primary [`&${componentCls}-color-primary`]: { - [varName`color-base`]: token.colorPrimary, - [varName`color-hover`]: token.colorPrimaryHover, - [varName`color-active`]: token.colorPrimaryActive, - [varName`color-light`]: token.colorPrimaryBg, - [varName`color-light-hover`]: token.colorPrimaryBgHover, - [varName`color-light-active`]: token.colorPrimaryBorder, + [varName('color-base')]: token.colorPrimary, + [varName('color-hover')]: token.colorPrimaryHover, + [varName('color-active')]: token.colorPrimaryActive, + [varName('color-light')]: token.colorPrimaryBg, + [varName('color-light-hover')]: token.colorPrimaryBgHover, + [varName('color-light-active')]: token.colorPrimaryBorder, - [varName`shadow`]: token.primaryShadow, + [varName('shadow')]: token.primaryShadow, [`&${componentCls}-variant-solid`]: { - [varName`text-color`]: token.primaryColor, - [varName`text-color-hover`]: varRef`text-color`, - [varName`text-color-active`]: varRef`text-color`, + [varName('text-color')]: token.primaryColor, + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, }, // >>>>> Danger [`&${componentCls}-color-dangerous`]: { - [varName`color-base`]: token.colorError, - [varName`color-hover`]: token.colorErrorHover, - [varName`color-active`]: token.colorErrorActive, - [varName`color-light`]: token.colorErrorBg, - [varName`color-light-hover`]: token.colorErrorBgFilledHover, - [varName`color-light-active`]: token.colorErrorBgActive, + [varName('color-base')]: token.colorError, + [varName('color-hover')]: token.colorErrorHover, + [varName('color-active')]: token.colorErrorActive, + [varName('color-light')]: token.colorErrorBg, + [varName('color-light-hover')]: token.colorErrorBgFilledHover, + [varName('color-light-active')]: token.colorErrorBgActive, - [varName`shadow`]: token.dangerShadow, + [varName('shadow')]: token.dangerShadow, [`&${componentCls}-variant-solid`]: { - [varName`text-color`]: token.dangerColor, - [varName`text-color-hover`]: varRef`text-color`, - [varName`text-color-active`]: varRef`text-color`, + [varName('text-color')]: token.dangerColor, + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, }, // >>>>> Default [`&${componentCls}-color-default`]: { - [varName`solid-bg-color`]: token.colorBgSolid, - [varName`solid-bg-color-hover`]: token.colorBgSolidHover, - [varName`solid-bg-color-active`]: token.colorBgSolidActive, + [varName('solid-bg-color')]: token.colorBgSolid, + [varName('solid-bg-color-hover')]: token.colorBgSolidHover, + [varName('solid-bg-color-active')]: token.colorBgSolidActive, - [varName`color-base`]: token.defaultBorderColor, - [varName`color-hover`]: token.defaultHoverBorderColor, - [varName`color-active`]: token.defaultActiveBorderColor, + [varName('color-base')]: token.defaultBorderColor, + [varName('color-hover')]: token.defaultHoverBorderColor, + [varName('color-active')]: token.defaultActiveBorderColor, - [varName`color-light`]: token.colorFillTertiary, - [varName`color-light-hover`]: token.colorFillSecondary, - [varName`color-light-active`]: token.colorFill, + [varName('color-light')]: token.colorFillTertiary, + [varName('color-light-hover')]: token.colorFillSecondary, + [varName('color-light-active')]: token.colorFill, - [varName`text-color`]: token.colorText, - [varName`text-color-hover`]: token.defaultHoverBorderColor, - [varName`text-color-active`]: token.defaultActiveBorderColor, - [varName`shadow`]: token.defaultShadow, + [varName('text-color')]: token.colorText, + [varName('text-color-hover')]: token.defaultHoverBorderColor, + [varName('text-color-active')]: token.defaultActiveBorderColor, + [varName('shadow')]: token.defaultShadow, [`&${componentCls}-variant-solid`]: { - [varName`text-color`]: token.solidTextColor, - [varName`text-color-hover`]: varRef`text-color`, - [varName`text-color-active`]: varRef`text-color`, + [varName('text-color')]: token.solidTextColor, + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, [`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: { - [varName`text-color-hover`]: varRef`text-color`, - [varName`text-color-active`]: varRef`text-color`, + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: { - [varName`bg-color-hover`]: token.defaultHoverBg, - [varName`bg-color-active`]: token.defaultActiveBg, + [varName('bg-color-hover')]: token.defaultHoverBg, + [varName('bg-color-active')]: token.defaultActiveBg, }, [`&${componentCls}-background-ghost`]: { [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: { - [varName`text-color`]: token.defaultGhostColor, - [varName`border-color`]: token.defaultGhostBorderColor, + [varName('text-color')]: token.defaultGhostColor, + [varName('border-color')]: token.defaultGhostBorderColor, }, }, }, @@ -257,13 +261,13 @@ const genVariantStyle: GenerateStyle = (token) => { return { [`&${componentCls}-color-${colorKey}`]: { - [varName`color-base`]: darkColor, - [varName`color-hover`]: hoverColor, - [varName`color-active`]: activeColor, - [varName`color-light`]: lightColor, - [varName`color-light-hover`]: lightHoverColor, - [varName`color-light-active`]: lightActiveColor, - [varName`shadow`]: shadowColor, + [varName('color-base')]: darkColor, + [varName('color-hover')]: hoverColor, + [varName('color-active')]: activeColor, + [varName('color-light')]: lightColor, + [varName('color-light-hover')]: lightHoverColor, + [varName('color-light-active')]: lightActiveColor, + [varName('shadow')]: shadowColor, }, }; }), @@ -276,7 +280,7 @@ const genVariantStyle: GenerateStyle = (token) => { [`&:disabled, &${token.componentCls}-disabled`]: { cursor: 'not-allowed', borderColor: token.colorBorderDisabled, - background: varRef`bg-color-disabled`, + background: varRef('bg-color-disabled'), color: token.colorTextDisabled, boxShadow: 'none', }, @@ -288,8 +292,8 @@ const genVariantStyle: GenerateStyle = (token) => { { // Ghost [`&${componentCls}-background-ghost`]: { - [varName`bg-color`]: 'transparent', - [varName`shadow`]: 'none', + [varName('bg-color')]: 'transparent', + [varName('shadow')]: 'none', }, }, ], diff --git a/components/float-button/style/button.ts b/components/float-button/style/button.ts index de1c3f6713..dbb08756fe 100644 --- a/components/float-button/style/button.ts +++ b/components/float-button/style/button.ts @@ -24,7 +24,7 @@ const genFloatButtonStyle: GenerateStyle = (token) // == Variable == // ============================================================== { - [varName`size`]: unit(floatButtonSize), + [varName('size')]: unit(floatButtonSize), }, // ============================================================== @@ -35,8 +35,8 @@ const genFloatButtonStyle: GenerateStyle = (token) margin: 0, padding: `${unit(token.paddingXXS)} 0`, - width: varRef`size`, - minHeight: varRef`size`, + width: varRef('size'), + minHeight: varRef('size'), height: 'auto', wordBreak: 'break-word', whiteSpace: 'normal', diff --git a/components/float-button/style/group.ts b/components/float-button/style/group.ts index 4387fb736e..8bc4c8d42e 100644 --- a/components/float-button/style/group.ts +++ b/components/float-button/style/group.ts @@ -20,8 +20,8 @@ const genGroupStyle: GenerateStyle = (token) => { // == Variable == // ============================================================== { - [varName`list-transform-start`]: `translate(0,${unit(floatButtonSize)})`, - [varName`list-trigger-offset`]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`, + [varName('list-transform-start')]: `translate(0,${unit(floatButtonSize)})`, + [varName('list-trigger-offset')]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`, }, // ============================================================== @@ -80,7 +80,7 @@ const genGroupStyle: GenerateStyle = (token) => { '&-enter, &-appear': { opacity: 0, - transform: varRef`list-transform-start`, + transform: varRef('list-transform-start'), '&-active': { opacity: 1, @@ -91,7 +91,7 @@ const genGroupStyle: GenerateStyle = (token) => { '&-leave': { '&-active': { opacity: 0, - transform: varRef`list-transform-start`, + transform: varRef('list-transform-start'), }, }, }, @@ -100,28 +100,28 @@ const genGroupStyle: GenerateStyle = (token) => { // ======================== Placements ======================== '&-top': { [listCls]: { - bottom: varRef`list-trigger-offset`, + bottom: varRef('list-trigger-offset'), }, }, '&-bottom': { [listCls]: { - [varName`list-transform-start`]: `translate(0, calc(${unit(floatButtonSize)} * -1))`, - top: varRef`list-trigger-offset`, + [varName('list-transform-start')]: `translate(0, calc(${unit(floatButtonSize)} * -1))`, + top: varRef('list-trigger-offset'), }, }, '&-left': { [listCls]: { - [varName`list-transform-start`]: `translate(${unit(floatButtonSize)}, 0)`, - right: varRef`list-trigger-offset`, + [varName('list-transform-start')]: `translate(${unit(floatButtonSize)}, 0)`, + right: varRef('list-trigger-offset'), }, }, '&-right': { [listCls]: { - [varName`list-transform-start`]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`, - left: varRef`list-trigger-offset`, + [varName('list-transform-start')]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`, + left: varRef('list-trigger-offset'), }, }, }, diff --git a/components/form/style/index.ts b/components/form/style/index.ts index 9a044af031..a43d749818 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -12,6 +12,7 @@ import type { GetDefaultToken, } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; +import { genCssVar } from '../../theme/util/genStyleUtils'; import genFormValidateMotionStyle from './explain'; export interface ComponentToken { @@ -197,6 +198,8 @@ const genFormItemStyle: GenerateStyle = (token) => { itemMarginBottom, } = token; + const [varName] = genCssVar(antCls, 'grid'); + return { [formItemCls]: { ...resetComponent(token), @@ -319,7 +322,7 @@ const genFormItemStyle: GenerateStyle = (token) => { // = Input = // ============================================================== [`${formItemCls}-control`]: { - ['--ant-display' as any]: 'flex', + [varName('display')]: 'flex', flexDirection: 'column', flexGrow: 1, diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts index 3103ff0e99..a2ca626bf9 100644 --- a/components/grid/style/index.ts +++ b/components/grid/style/index.ts @@ -3,6 +3,7 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; +import { genCssVar } from '../../theme/util/genStyleUtils'; // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default export interface ComponentToken {} @@ -98,8 +99,8 @@ const genGridColStyle: GenerateStyle = (token): CSSObject => { }; const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObject => { - const { prefixCls, componentCls, gridColumns } = token; - + const { prefixCls, componentCls, gridColumns, antCls } = token; + const [varName, varRef] = genCssVar(antCls, 'grid'); const gridColumnsStyle: CSSObject = {}; for (let i = gridColumns; i >= 0; i--) { if (i === 0) { @@ -130,12 +131,12 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec // Form set `display: flex` on Col which will override `display: block`. // Let's get it from css variable to support override. { - ['--ant-display' as any]: 'block', + [varName('display')]: 'block', // Fallback to display if variable not support display: 'block', }, { - display: 'var(--ant-display)', + display: varRef('display'), flex: `0 0 ${(i / gridColumns) * 100}%`, maxWidth: `${(i / gridColumns) * 100}%`, }, diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 28f8b8724e..73fed9d950 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -11,12 +11,13 @@ import { resetComponent, resetIcon } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; import type { GenerateStyle } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; +import { genCssVar } from '../../theme/util/genStyleUtils'; import type { ComponentToken, InputNumberToken } from './token'; import { prepareComponentToken } from './token'; export type { ComponentToken }; -const genInputNumberStyles: GenerateStyle = (token: InputNumberToken) => { +const genInputNumberStyles: GenerateStyle = (token) => { const { componentCls, lineWidth, @@ -43,10 +44,13 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe handleBorderColor, filledHandleBg, lineHeightLG, + antCls, } = token; const borderStyle = `${unit(lineWidth)} ${lineType} ${handleBorderColor}`; + const [varName, varRef] = genCssVar(antCls, 'input-number'); + return [ // ========================================================== // == Base == @@ -56,8 +60,8 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe ...resetComponent(token), ...genBasicInputStyle(token), - '--input-number-input-padding-block': unit(paddingBlock), - '--input-number-input-padding-inline': unit(paddingInline), + [varName('input-padding-block')]: unit(paddingBlock), + [varName('input-padding-inline')]: unit(paddingInline), display: 'inline-flex', width: controlWidth, @@ -117,7 +121,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe [`${componentCls}-input`]: { ...resetComponent(token), width: '100%', - paddingBlock: `var(--input-number-input-padding-block)`, + paddingBlock: varRef('input-padding-block'), textAlign: 'start', backgroundColor: 'transparent', border: 0, @@ -243,7 +247,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe [`${componentCls}-action`]: { flex: 'none', - paddingInline: 'var(--input-number-input-padding-inline)', + paddingInline: varRef('input-padding-inline'), '&-up': { borderInlineStart: borderStyle, @@ -256,7 +260,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe [`${componentCls}-input`]: { textAlign: 'center', - paddingInline: 'var(--input-number-input-padding-inline)', + paddingInline: varRef('input-padding-inline'), }, }, }, @@ -268,8 +272,8 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe { [componentCls]: { '&-lg': { - '--input-number-input-padding-block': unit(paddingBlockLG), - '--input-number-input-padding-inline': unit(paddingInlineLG), + [varName('input-padding-block')]: unit(paddingBlockLG), + [varName('input-padding-inline')]: unit(paddingInlineLG), paddingBlock: 0, fontSize: inputFontSizeLG, @@ -277,8 +281,8 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe }, '&-sm': { - '--input-number-input-padding-block': unit(paddingBlockSM), - '--input-number-input-padding-inline': unit(paddingInlineSM), + [varName('input-padding-block')]: unit(paddingBlockSM), + [varName('input-padding-inline')]: unit(paddingInlineSM), paddingBlock: 0, fontSize: inputFontSizeSM, diff --git a/components/popover/style/index.ts b/components/popover/style/index.ts index d7e0840a38..979ae2ed7c 100644 --- a/components/popover/style/index.ts +++ b/components/popover/style/index.ts @@ -11,6 +11,7 @@ import type { PresetColorType, } from '../../theme/internal'; import { genStyleHooks, mergeToken, PresetColors } from '../../theme/internal'; +import { genCssVar } from '../../theme/util/genStyleUtils'; export interface ComponentToken extends ArrowToken, ArrowOffsetToken { /** @@ -81,8 +82,11 @@ const genBaseStyle: GenerateStyle = (token) => { titleBorderBottom, innerContentPadding, titlePadding, + antCls, } = token; + const [varName, varRef] = genCssVar(antCls, 'tooltip'); + return [ { [componentCls]: { @@ -105,7 +109,7 @@ const genBaseStyle: GenerateStyle = (token) => { '--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))', transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '), - '--antd-arrow-background-color': colorBgElevated, + [varName('arrow-background-color')]: colorBgElevated, width: 'max-content', maxWidth: '100vw', @@ -146,7 +150,7 @@ const genBaseStyle: GenerateStyle = (token) => { }, // Arrow Style - getArrowStyle(token, 'var(--antd-arrow-background-color)'), + getArrowStyle(token, varRef('arrow-background-color')), // Pure Render { @@ -161,14 +165,14 @@ const genBaseStyle: GenerateStyle = (token) => { }; const genColorStyle: GenerateStyle = (token) => { - const { componentCls } = token; - + const { componentCls, antCls } = token; + const [varName] = genCssVar(antCls, 'tooltip'); return { [componentCls]: PresetColors.map((colorKey: keyof PresetColorType) => { const lightColor = token[`${colorKey}6`]; return { [`&${componentCls}-${colorKey}`]: { - '--antd-arrow-background-color': lightColor, + [varName('arrow-background-color')]: lightColor, [`${componentCls}-inner`]: { backgroundColor: lightColor, }, diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts index 9088893aad..430b2e75b4 100644 --- a/components/theme/util/genStyleUtils.ts +++ b/components/theme/util/genStyleUtils.ts @@ -42,15 +42,16 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge getCompUnitless: (() => unitless) as GetCompUnitless, }); -export const genCssVar = ( - antCls: string, - componentAbbr: string, -): readonly [ - varName: (inputs: TemplateStringsArray) => string, - varRef: (inputs: TemplateStringsArray) => string, -] => { - const cssPrefix = `--${antCls.replace(/\./, '')}-${componentAbbr}-`; - const varName = (inputs: TemplateStringsArray) => `${cssPrefix}${inputs[0]}`; - const varRef = (inputs: TemplateStringsArray) => `var(${cssPrefix}${inputs[0]})`; +type CssVarName = (inputs: string) => `--${string}`; +type CssVarRef = (inputs: string, fallback?: string) => `var(--${string})`; + +export const genCssVar = (antCls: string, component: string): readonly [CssVarName, CssVarRef] => { + const cssPrefix = `--${antCls.replace(/\./g, '')}-${component}-` as `--${string}`; + const varName: CssVarName = (name) => { + return `${cssPrefix}${name}`; + }; + const varRef: CssVarRef = (name, fallback) => { + return fallback ? `var(${cssPrefix}${name}, ${fallback})` : `var(${cssPrefix}${name})`; + }; return [varName, varRef] as const; }; diff --git a/components/timeline/style/index.ts b/components/timeline/style/index.ts index 86f134c1ed..6bd61e5979 100644 --- a/components/timeline/style/index.ts +++ b/components/timeline/style/index.ts @@ -214,7 +214,7 @@ const genVerticalStyle: GenerateStyle = (token) => { [`${itemCls}-rail`]: { insetInlineStart: 'auto', - insetInlineEnd: 'calc(var(--steps-icon-size) / 2)', + insetInlineEnd: `calc(var(--steps-icon-size) / 2)`, marginInlineEnd: `calc(var(--steps-rail-size) / -2)`, }, }, diff --git a/components/tooltip/PurePanel.tsx b/components/tooltip/PurePanel.tsx index 0588dcc99a..ae24a56352 100644 --- a/components/tooltip/PurePanel.tsx +++ b/components/tooltip/PurePanel.tsx @@ -27,12 +27,14 @@ const PurePanel: React.FC = (props) => { const prefixCls = getPrefixCls('tooltip', customizePrefixCls); + const rootPrefixCls = getPrefixCls(); + const rootCls = useCSSVarCls(prefixCls); const [hashId, cssVarCls] = useStyle(prefixCls, rootCls); // Color - const colorInfo = parseColor(prefixCls, color); + const colorInfo = parseColor(rootPrefixCls, prefixCls, color); const arrowContentStyle: React.CSSProperties = colorInfo.arrowStyle; diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap index 727f06c7bb..be0ebe70ed 100644 --- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1221,7 +1221,7 @@ Array [
@@ -1255,7 +1255,7 @@ Array [
@@ -1289,7 +1289,7 @@ Array [
@@ -1323,7 +1323,7 @@ Array [
@@ -2135,7 +2135,7 @@ Array [
,
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap index 22ab9fe116..ac24c0b510 100644 --- a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap @@ -843,7 +843,7 @@ Array [
,
diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx index 43df1dc908..60f8439936 100644 --- a/components/tooltip/__tests__/tooltip.test.tsx +++ b/components/tooltip/__tests__/tooltip.test.tsx @@ -9,12 +9,13 @@ import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import Button from '../../button'; -import ConfigProvider from '../../config-provider'; +import ConfigProvider, { defaultPrefixCls } from '../../config-provider'; import DatePicker from '../../date-picker'; import Input from '../../input'; import Group from '../../input/Group'; import Radio from '../../radio'; import Switch from '../../switch'; +import { genCssVar } from '../../theme/util/genStyleUtils'; import { parseColor } from '../util'; import { isTooltipOpen } from './util'; @@ -589,18 +590,18 @@ describe('Tooltip', () => { const prefixCls = 'ant-tooltip'; it('should set white text for dark backgrounds', () => { const darkColor = '#003366'; // 深色 - const { overlayStyle } = parseColor(prefixCls, darkColor); - + const { overlayStyle } = parseColor(defaultPrefixCls, prefixCls, darkColor); + const [varName] = genCssVar(defaultPrefixCls, 'tooltip'); expect(overlayStyle.background).toBe(darkColor); - expect(overlayStyle['--ant-tooltip-color']).toBe('#FFF'); + expect(overlayStyle[varName('overlay-color')]).toBe('#FFF'); }); it('should set black text for light backgrounds', () => { const lightColor = '#f8f8f8'; - const { overlayStyle } = parseColor(prefixCls, lightColor); - + const { overlayStyle } = parseColor(defaultPrefixCls, prefixCls, lightColor); + const [varName] = genCssVar(defaultPrefixCls, 'tooltip'); expect(overlayStyle.background).toBe(lightColor); - expect(overlayStyle['--ant-tooltip-color']).toBe('#000'); + expect(overlayStyle[varName('overlay-color')]).toBe('#000'); }); it('actual tooltip color rendering (default)', () => { const { container } = render( @@ -608,10 +609,9 @@ describe('Tooltip', () => { Hover me , ); - + const [varName] = genCssVar(defaultPrefixCls, 'tooltip'); const tooltipContainer = container.querySelector('.ant-tooltip-container'); - - expect(tooltipContainer).toHaveStyle('--ant-tooltip-color: #FFF'); + expect(tooltipContainer).toHaveStyle({ [varName('overlay-color')]: '#FFF' }); }); it('actual tooltip color rendering (styles)', () => { const { container } = render( diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index b255f6cdce..f26d51a063 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -313,7 +313,7 @@ const InternalTooltip = React.forwardRef((prop const [hashId, cssVarCls] = useStyle(prefixCls, rootCls, !injectFromPopover); // Color - const colorInfo = parseColor(prefixCls, color); + const colorInfo = parseColor(rootPrefixCls, prefixCls, color); const arrowContentStyle = colorInfo.arrowStyle; const themeCls = clsx(rootCls, hashId, cssVarCls); diff --git a/components/tooltip/style/index.ts b/components/tooltip/style/index.ts index 876c674050..85af9eb3ba 100644 --- a/components/tooltip/style/index.ts +++ b/components/tooltip/style/index.ts @@ -12,6 +12,7 @@ import type { ArrowToken } from '../../style/roundedArrow'; import { getArrowToken } from '../../style/roundedArrow'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genPresetColor, genStyleHooks, mergeToken } from '../../theme/internal'; +import { genCssVar } from '../../theme/util/genStyleUtils'; export interface ComponentToken extends ArrowOffsetToken, ArrowToken { /** @@ -44,8 +45,11 @@ const genTooltipStyle: GenerateStyle = (token) => { paddingXS, arrowOffsetHorizontal, sizePopupArrow, + antCls, } = token; + const [varName, varRef] = genCssVar(antCls, 'tooltip'); + // arrowOffsetHorizontal + arrowWidth + borderRadius const edgeAlignMinWidth = calc(tooltipBorderRadius) .add(sizePopupArrow) @@ -59,7 +63,7 @@ const genTooltipStyle: GenerateStyle = (token) => { minWidth: centerAlignMinWidth, minHeight: controlHeight, padding: `${unit(token.calc(paddingSM).div(2).equal())} ${unit(paddingXS)}`, - color: `var(--ant-tooltip-color, ${tooltipColor})`, + color: varRef('overlay-color', tooltipColor), textAlign: 'start', textDecoration: 'none', wordWrap: 'break-word', @@ -92,7 +96,7 @@ const genTooltipStyle: GenerateStyle = (token) => { display: 'none', }, - '--antd-arrow-background-color': tooltipBg, + [varName('arrow-background-color')]: tooltipBg, // Wrapper for the tooltip content [`${componentCls}-container`]: [sharedBodyStyle, initFadeMotion(token, true)], @@ -140,7 +144,7 @@ const genTooltipStyle: GenerateStyle = (token) => { backgroundColor: darkColor, }, [`${componentCls}-arrow`]: { - '--antd-arrow-background-color': darkColor, + [varName('arrow-background-color')]: darkColor, }, }, })), @@ -153,7 +157,7 @@ const genTooltipStyle: GenerateStyle = (token) => { }, // Arrow Style - getArrowStyle(token, 'var(--antd-arrow-background-color)'), + getArrowStyle(token, varRef('arrow-background-color')), // Pure Render { diff --git a/components/tooltip/util.ts b/components/tooltip/util.ts index cc64f8b59c..e018982bac 100644 --- a/components/tooltip/util.ts +++ b/components/tooltip/util.ts @@ -4,10 +4,13 @@ import { clsx } from 'clsx'; import { isPresetColor } from '../_util/colors'; import type { ColorGenInput } from '../color-picker/interface'; import { generateColor } from '../color-picker/util'; +import { genCssVar } from '../theme/util/genStyleUtils'; -export function parseColor(prefixCls: string, color?: string) { +export const parseColor = (rootPrefixCls: string, prefixCls: string, color?: string) => { const isInternalColor = isPresetColor(color); + const [varName] = genCssVar(rootPrefixCls, 'tooltip'); + const className = clsx({ [`${prefixCls}-${color}`]: color && isInternalColor }); const overlayStyle: React.CSSProperties = {}; @@ -17,10 +20,9 @@ export function parseColor(prefixCls: string, color?: string) { const textColor = luminance < 0.5 ? '#FFF' : '#000'; if (color && !isInternalColor) { overlayStyle.background = color; - overlayStyle['--ant-tooltip-color'] = textColor; - // @ts-ignore - arrowStyle['--antd-arrow-background-color'] = color; + overlayStyle[varName('overlay-color')] = textColor; + arrowStyle[varName('arrow-background-color')] = color; } return { className, overlayStyle, arrowStyle }; -} +}; diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts index 1cfdced749..e27b6c65cd 100644 --- a/components/tour/style/index.ts +++ b/components/tour/style/index.ts @@ -11,6 +11,7 @@ import type { ArrowToken } from '../../style/roundedArrow'; import { getArrowToken } from '../../style/roundedArrow'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; +import { genCssVar } from '../../theme/util/genStyleUtils'; export interface ComponentToken extends ArrowOffsetToken, ArrowToken { /** @@ -68,6 +69,8 @@ const genBaseStyle: GenerateStyle = (token) => { primaryPrevBtnBg, } = token; + const [varName, varRef] = genCssVar(antCls, 'tooltip'); + return [ { [componentCls]: { @@ -78,7 +81,7 @@ const genBaseStyle: GenerateStyle = (token) => { maxWidth: 'fit-content', visibility: 'visible', width: 520, - '--antd-arrow-background-color': colorBgElevated, + [varName('arrow-background-color')]: colorBgElevated, '&-pure': { maxWidth: '100%', @@ -189,7 +192,7 @@ const genBaseStyle: GenerateStyle = (token) => { // ============================= primary type =========================== // `$` for panel, `&$` for pure panel [`${componentCls}-primary, &${componentCls}-primary`]: { - '--antd-arrow-background-color': colorPrimary, + [varName('arrow-background-color')]: colorPrimary, [`${componentCls}-section`]: { color: colorTextLightSolid, @@ -259,7 +262,7 @@ const genBaseStyle: GenerateStyle = (token) => { }, // ============================= Arrow =========================== - getArrowStyle(token, 'var(--antd-arrow-background-color)'), + getArrowStyle(token, varRef('arrow-background-color')), ]; }; @@ -282,12 +285,12 @@ export default genStyleHooks( 'Tour', (token) => { const { borderRadiusLG } = token; - const TourToken = mergeToken(token, { + const tourToken = mergeToken(token, { indicatorWidth: 6, indicatorHeight: 6, tourBorderRadius: borderRadiusLG, }); - return genBaseStyle(TourToken); + return genBaseStyle(tourToken); }, prepareComponentToken, );