feat: ColorPicker support cssVar (ant-design#45868)

* feat: color-picker support cssvar * fix: replace rootCls * fix: popover add mergeRootCls * fix: lint issue
wanghui2021 · Nov 16, 2023 · ffe73ac · ffe73ac
1 parent e0f8be8
commit ffe73ac
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 38 deletions.
diff --git 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}

diff --git 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',
       },
     },

diff --git 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', {});
diff --git 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)];

diff --git 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,

diff --git 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 },
     },
 

diff --git 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,14 +19,15 @@ const genPresetsStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
     colorWhite,
     marginXXS,
     paddingXS,
+    fontHeightSM,
   } = token;
 
   return {
     [`${componentCls}-presets`]: {
       [`${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%)',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { genCSSVarRegister } from '../../theme/internal';

		export default genCSSVarRegister('ColorPicker', {});