feat: ColorPicker support cssVar (#45868)

* feat: color-picker support cssvar * fix: replace rootCls * fix: popover add mergeRootCls * fix: lint issue
2024-12-01 06:49:32 +08:00 · 2023-11-16 11:57:10 +08:00 · 2023-11-16 11:57:10 +08:00 · ffe73ac23f
commit ffe73ac23f
parent e0f8be820a
7 changed files with 61 additions and 38 deletions
--- 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(
    <Popover
      style={styles?.popup}
      overlayInnerStyle={styles?.popupOverlayInner}
--- a/components/color-picker/style/color-block.ts
+++ b/components/color-picker/style/color-block.ts
@ -1,4 +1,5 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import type { ColorPickerToken } from './index';

 /**
@ -23,7 +24,7 @@ const genColorBlockStyle = (token: ColorPickerToken, size: number): CSSObject =>
      [`${componentCls}-color-block-inner`]: {
        width: '100%',
        height: '100%',
-        border: `${lineWidth}px solid ${colorFillSecondary}`,
+        border: `${unit(lineWidth)} solid ${colorFillSecondary}`,
        borderRadius: 'inherit',
      },
    },
--- a/components/color-picker/style/cssVar.ts
+++ b/components/color-picker/style/cssVar.ts
@ -0,0 +1,3 @@
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister('ColorPicker', {});
--- 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<ColorPickerToken> = (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<ColorPickerToken> = (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)];
--- 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<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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,
--- 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<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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 },
    },

--- 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<ColorPickerToken, CSSObject> = (token) => {
    colorWhite,
    marginXXS,
    paddingXS,
+    fontHeightSM,
  } = token;

  return {
@ -25,7 +27,7 @@ const genPresetsStyle: GenerateStyle<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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<ColorPickerToken, CSSObject> = (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%)',