feat: Collapse support cssVar

components/collapse/Collapse.tsx

@@ -16,6 +16,7 @@ import type { SizeType } from '../config-provider/SizeContext';
 import type { CollapsibleType } from './CollapsePanel';
 import CollapsePanel from './CollapsePanel';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 /** @deprecated Please use `start` | `end` instead */
 type ExpandIconPositionLegacy = 'left' | 'right';
@@ -76,7 +77,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   const mergedSize = useSize((ctx) => customizeSize ?? ctx ?? 'middle');
   const prefixCls = getPrefixCls('collapse', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Collapse');
@@ -153,7 +155,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     [children],
   );
 
-  return wrapSSR(
+  return wrapCSSVar(
     <RcCollapse
       ref={ref}
       openMotion={openMotion}

components/collapse/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister('Collapse', prepareComponentToken);

components/collapse/style/index.ts

@@ -1,7 +1,9 @@
 import type { CSSProperties } from 'react';
+import { unit } from '@ant-design/cssinjs';
+
 import { resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -52,27 +54,29 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
     colorText,
     colorTextHeading,
     colorTextDisabled,
-    fontSize,
     fontSizeLG,
     lineHeight,
+    lineHeightLG,
     marginSM,
     paddingSM,
     paddingLG,
     paddingXS,
     motionDurationSlow,
     fontSizeIcon,
     contentPadding,
+    fontHeight,
+    fontHeightLG,
   } = token;
 
-  const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`;
+  const borderBase = `${unit(lineWidth)} ${lineType} ${colorBorder}`;
 
   return {
     [componentCls]: {
       ...resetComponent(token),
       backgroundColor: headerBg,
       border: borderBase,
       borderBottom: 0,
-      borderRadius: `${collapsePanelBorderRadius}px`,
+      borderRadius: collapsePanelBorderRadius,
 
       [`&-rtl`]: {
         direction: 'rtl',
@@ -84,7 +88,9 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
           [`
             &,
             & > ${componentCls}-header`]: {
-            borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
+            borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(
+              collapsePanelBorderRadius,
+            )}`,
           },
         },
 
@@ -109,7 +115,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
 
           // >>>>> Arrow
           [`${componentCls}-expand-icon`]: {
-            height: fontSize * lineHeight,
+            height: fontHeight,
             display: 'flex',
             alignItems: 'center',
             paddingInlineEnd: marginSM,
@@ -170,7 +176,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
 
             [`> ${componentCls}-expand-icon`]: {
               // Arrow offset
-              marginInlineStart: paddingSM - paddingXS,
+              marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal(),
             },
           },
           [`> ${componentCls}-content > ${componentCls}-content-box`]: {
@@ -182,15 +188,15 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
       [`&-large`]: {
         [`> ${componentCls}-item`]: {
           fontSize: fontSizeLG,
-
+          lineHeight: lineHeightLG,
           [`> ${componentCls}-header`]: {
             padding: collapseHeaderPaddingLG,
             paddingInlineStart: padding,
 
             [`> ${componentCls}-expand-icon`]: {
-              height: fontSizeLG * lineHeight,
+              height: fontHeightLG,
               // Arrow offset
-              marginInlineStart: paddingLG - padding,
+              marginInlineStart: token.calc(paddingLG).sub(padding).equal(),
             },
           },
           [`> ${componentCls}-content > ${componentCls}-content-box`]: {
@@ -201,7 +207,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
 
       [`${componentCls}-item:last-child`]: {
         [`> ${componentCls}-content`]: {
-          borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
+          borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)}`,
         },
       },
 
@@ -307,12 +313,19 @@ const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
   };
 };
 
+export const prepareComponentToken: GetDefaultToken<'Collapse'> = (token) => ({
+  headerPadding: `${token.paddingSM}px ${token.padding}px`,
+  headerBg: token.colorFillAlter,
+  contentPadding: `${token.padding}px 16px`, // Fixed Value
+  contentBg: token.colorBgContainer,
+});
+
 export default genComponentStyleHook(
   'Collapse',
   (token) => {
     const collapseToken = mergeToken<CollapseToken>(token, {
-      collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`,
-      collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`,
+      collapseHeaderPaddingSM: `${unit(token.paddingXS)} ${unit(token.paddingSM)}`,
+      collapseHeaderPaddingLG: `${unit(token.padding)} ${unit(token.paddingLG)}`,
       collapsePanelBorderRadius: token.borderRadiusLG,
     });
 
@@ -324,10 +337,5 @@ export default genComponentStyleHook(
       genCollapseMotion(collapseToken),
     ];
   },
-  (token) => ({
-    headerPadding: `${token.paddingSM}px ${token.padding}px`,
-    headerBg: token.colorFillAlter,
-    contentPadding: `${token.padding}px 16px`, // Fixed Value
-    contentBg: token.colorBgContainer,
-  }),
+  prepareComponentToken,
 );