diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index d6f9c79f3ce9..0dfaffde3d9d 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -12,6 +12,7 @@ import { getStatusClassNames } from '../_util/statusUtils'; import { devUseWarning } from '../_util/warning'; import type { ConfigConsumerProps } from '../config-provider/context'; import { ConfigContext } from '../config-provider/context'; +import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import useSize from '../config-provider/hooks/useSize'; import type { SizeType } from '../config-provider/SizeContext'; import { FormItemInputContext, NoFormStyle } from '../form/context'; @@ -30,6 +31,7 @@ import type { TriggerPlacement, TriggerType, } from './interface'; +import useCSSVar from './style/cssVar'; import useStyle from './style/index'; import { customizePrefixCls, genAlphaColor, generateColor, getAlphaColor } from './util'; @@ -133,9 +135,11 @@ const ColorPicker: CompoundedComponent = (props) => { // ===================== Style ===================== const mergedSize = useSize(customizeSize); - const [wrapSSR, hashId] = useStyle(prefixCls); + const [, hashId] = useStyle(prefixCls); + const rootCls = useCSSVarCls(prefixCls); + const wrapCSSVar = useCSSVar(rootCls); const rtlCls = { [`${prefixCls}-rtl`]: direction }; - const mergeRootCls = classNames(rootClassName, rtlCls); + const mergeRootCls = classNames(rootClassName, rootCls, rtlCls); const mergeCls = classNames( getStatusClassNames(prefixCls, contextStatus), { @@ -147,7 +151,7 @@ const ColorPicker: CompoundedComponent = (props) => { className, hashId, ); - const mergePopupCls = classNames(prefixCls, rtlCls); + const mergePopupCls = classNames(prefixCls, mergeRootCls); const popupAllowCloseRef = useRef(true); @@ -232,7 +236,7 @@ const ColorPicker: CompoundedComponent = (props) => { // ============================ zIndex ============================ - return wrapSSR( + return wrapCSSVar( [`${componentCls}-color-block-inner`]: { width: '100%', height: '100%', - border: `${lineWidth}px solid ${colorFillSecondary}`, + border: `${unit(lineWidth)} solid ${colorFillSecondary}`, borderRadius: 'inherit', }, }, diff --git a/components/color-picker/style/cssVar.ts b/components/color-picker/style/cssVar.ts new file mode 100644 index 000000000000..f1347a7b4286 --- /dev/null +++ b/components/color-picker/style/cssVar.ts @@ -0,0 +1,3 @@ +import { genCSSVarRegister } from '../../theme/internal'; + +export default genCSSVarRegister('ColorPicker', {}); diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts index a705d4e49712..77b1012d52f5 100644 --- a/components/color-picker/style/index.ts +++ b/components/color-picker/style/index.ts @@ -1,4 +1,5 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit, type CSSObject } from '@ant-design/cssinjs'; + import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genColorBlockStyle from './color-block'; @@ -27,7 +28,7 @@ export const genActiveStyle = ( ) => ({ borderInlineEndWidth: token.lineWidth, borderColor, - boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`, + boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${outlineColor}`, outline: 0, }); @@ -61,7 +62,7 @@ const genClearStyle = ( width: size, height: size, borderRadius: borderRadiusSM, - border: `${lineWidth}px solid ${colorSplit}`, + border: `${unit(lineWidth)} solid ${colorSplit}`, position: 'relative', cursor: 'pointer', overflow: 'hidden', @@ -188,7 +189,7 @@ const genColorPickerStyle: GenerateStyle = (token) => { width: colorPickerWidth, '&-divider': { - margin: `${marginSM}px 0 ${marginXS}px`, + margin: `${unit(marginSM)} 0 ${unit(marginXS)}`, }, [`${componentCls}-panel`]: { ...genPickerStyle(token), @@ -206,17 +207,20 @@ const genColorPickerStyle: GenerateStyle = (token) => { minWidth: controlHeight, height: controlHeight, borderRadius, - border: `${lineWidth}px solid ${colorBorder}`, + border: `${unit(lineWidth)} solid ${colorBorder}`, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: `all ${motionDurationMid}`, background: colorBgElevated, - padding: paddingXXS - lineWidth, + padding: token.calc(paddingXXS).sub(lineWidth).equal(), [`${componentCls}-trigger-text`]: { marginInlineStart: marginXS, - marginInlineEnd: marginXS - (paddingXXS - lineWidth), + marginInlineEnd: token + .calc(marginXS) + .sub(token.calc(paddingXXS).sub(lineWidth)) + .equal(), fontSize, color: colorText, }, @@ -262,7 +266,11 @@ export default genComponentStyleHook('ColorPicker', (token) => { colorPickerPresetColorSize: 18, colorPickerInsetShadow: `inset 0 0 1px 0 ${colorTextQuaternary}`, colorPickerSliderHeight, - colorPickerPreviewSize: colorPickerSliderHeight * 2 + marginSM, + colorPickerPreviewSize: token + .calc(colorPickerSliderHeight) + .mul(2) + .add(marginSM) + .equal() as number, }); return [genColorPickerStyle(colorPickerToken)]; diff --git a/components/color-picker/style/input.ts b/components/color-picker/style/input.ts index 2aea1b876fd1..e8b475ff83e2 100644 --- a/components/color-picker/style/input.ts +++ b/components/color-picker/style/input.ts @@ -1,4 +1,5 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit, type CSSObject } from '@ant-design/cssinjs'; + import type { GenerateStyle } from '../../theme/internal'; import type { ColorPickerToken } from './index'; @@ -36,7 +37,7 @@ const genInputStyle: GenerateStyle = (token) => { }, [`${componentCls}-steppers${componentCls}-alpha-input`]: { - flex: `0 0 ${colorPickerAlphaInputWidth}px`, + flex: `0 0 ${unit(colorPickerAlphaInputWidth)}`, marginInlineStart: marginXXS, }, @@ -52,9 +53,9 @@ const genInputStyle: GenerateStyle = (token) => { insetInlineEnd: 0, }, [`${antCls}-select-selection-item`]: { - paddingInlineEnd: fontSizeIcon + marginXXS, + paddingInlineEnd: token.calc(fontSizeIcon).add(marginXXS).equal(), fontSize: fontSizeSM, - lineHeight: `${controlHeightSM}px`, + lineHeight: `${unit(controlHeightSM)}`, }, [`${antCls}-select-item-option-content`]: { fontSize: fontSizeSM, @@ -83,11 +84,11 @@ const genInputStyle: GenerateStyle = (token) => { }, [`${componentCls}-hex-input${antCls}-input-affix-wrapper`]: { flex: 1, - padding: `0 ${paddingXS}px`, + padding: `0 ${unit(paddingXS)}`, [`${antCls}-input`]: { fontSize: fontSizeSM, textTransform: 'uppercase', - lineHeight: `${controlHeightSM - 2 * lineWidth}px`, + lineHeight: unit(token.calc(controlHeightSM).sub(token.calc(lineWidth).mul(2)).equal()), }, [`${antCls}-input-prefix`]: { color: colorTextPlaceholder, diff --git a/components/color-picker/style/picker.ts b/components/color-picker/style/picker.ts index b482c65685c9..9287416e8795 100644 --- a/components/color-picker/style/picker.ts +++ b/components/color-picker/style/picker.ts @@ -1,4 +1,5 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit, type CSSObject } from '@ant-design/cssinjs'; + import type { GenerateStyle } from '../../theme/internal'; import { getTransBg } from './color-block'; import type { ColorPickerToken } from './index'; @@ -21,7 +22,7 @@ const genPickerStyle: GenerateStyle = (token) => { return { [`${componentCls}-select`]: { [`${componentCls}-palette`]: { - minHeight: controlHeightLG * 4, + minHeight: token.calc(controlHeightLG).mul(4).equal(), overflow: 'hidden', borderRadius: borderRadiusSM, }, @@ -37,7 +38,7 @@ const genPickerStyle: GenerateStyle = (token) => { [`${componentCls}-handler`]: { width: colorPickerHandlerSize, height: colorPickerHandlerSize, - border: `${lineWidthBold}px solid ${colorBgElevated}`, + border: `${unit(lineWidthBold)} solid ${colorBgElevated}`, position: 'relative', borderRadius: '50%', cursor: 'pointer', @@ -49,15 +50,15 @@ const genPickerStyle: GenerateStyle = (token) => { }, [`${componentCls}-slider`]: { - borderRadius: colorPickerSliderHeight / 2, + borderRadius: token.calc(colorPickerSliderHeight).div(2).equal(), [`${componentCls}-palette`]: { height: colorPickerSliderHeight, }, [`${componentCls}-gradient`]: { - borderRadius: colorPickerSliderHeight / 2, + borderRadius: token.calc(colorPickerSliderHeight).div(2).equal(), boxShadow: colorPickerInsetShadow, }, - '&-alpha': getTransBg(`${colorPickerSliderHeight}px`, token.colorFillSecondary), + '&-alpha': getTransBg(`${unit(colorPickerSliderHeight)}`, token.colorFillSecondary), '&-hue': { marginBottom: marginSM }, }, diff --git a/components/color-picker/style/presets.ts b/components/color-picker/style/presets.ts index 05fa2617e52d..9156db3167a4 100644 --- a/components/color-picker/style/presets.ts +++ b/components/color-picker/style/presets.ts @@ -1,4 +1,5 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit, type CSSObject } from '@ant-design/cssinjs'; + import type { GenerateStyle } from '../../theme/internal'; import type { ColorPickerToken } from './index'; @@ -18,6 +19,7 @@ const genPresetsStyle: GenerateStyle = (token) => { colorWhite, marginXXS, paddingXS, + fontHeightSM, } = token; return { @@ -25,7 +27,7 @@ const genPresetsStyle: GenerateStyle = (token) => { [`${antCls}-collapse-item > ${antCls}-collapse-header`]: { padding: 0, [`${antCls}-collapse-expand-icon`]: { - height: fontSizeSM * lineHeightSM, + height: fontHeightSM, color: colorTextQuaternary, paddingInlineEnd: paddingXXS, }, @@ -36,7 +38,7 @@ const genPresetsStyle: GenerateStyle = (token) => { gap: marginXXS, }, [`${antCls}-collapse-item > ${antCls}-collapse-content > ${antCls}-collapse-content-box`]: { - padding: `${paddingXS}px 0`, + padding: `${unit(paddingXS)} 0`, }, '&-label': { fontSize: fontSizeSM, @@ -46,7 +48,7 @@ const genPresetsStyle: GenerateStyle = (token) => { '&-items': { display: 'flex', flexWrap: 'wrap', - gap: marginXXS * 1.5, + gap: token.calc(marginXXS).mul(1.5).equal(), [`${componentCls}-presets-color`]: { position: 'relative', cursor: 'pointer', @@ -56,13 +58,16 @@ const genPresetsStyle: GenerateStyle = (token) => { '&::before': { content: '""', pointerEvents: 'none', - width: colorPickerPresetColorSize + 4 * lineWidth, - height: colorPickerPresetColorSize + 4 * lineWidth, + width: token.calc(colorPickerPresetColorSize).add(token.calc(lineWidth).mul(4)).equal(), + height: token + .calc(colorPickerPresetColorSize) + .add(token.calc(lineWidth).mul(4)) + .equal(), position: 'absolute', - top: -2 * lineWidth, - insetInlineStart: -2 * lineWidth, + top: token.calc(lineWidth).mul(-2).equal(), + insetInlineStart: token.calc(lineWidth).mul(-2).equal(), borderRadius, - border: `${lineWidth}px solid transparent`, + border: `${unit(lineWidth)} solid transparent`, transition: `border-color ${token.motionDurationMid} ${token.motionEaseInBack}`, }, '&:hover::before': { @@ -75,9 +80,9 @@ const genPresetsStyle: GenerateStyle = (token) => { top: '50%', insetInlineStart: '21.5%', display: 'table', - width: (colorPickerPresetColorSize / 13) * 5, - height: (colorPickerPresetColorSize / 13) * 8, - border: `${token.lineWidthBold}px solid ${token.colorWhite}`, + width: token.calc(colorPickerPresetColorSize).div(13).mul(5).equal(), + height: token.calc(colorPickerPresetColorSize).div(13).mul(8).equal(), + border: `${unit(token.lineWidthBold)} solid ${token.colorWhite}`, borderTop: 0, borderInlineStart: 0, transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',