feat: Descriptions support cssVar (#45900)

components/descriptions/index.tsx

@@ -15,6 +15,7 @@ import type { DescriptionsItemProps } from './Item';
 import DescriptionsItem from './Item';
 import Row from './Row';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 interface CompoundedComponent {
   Item: typeof DescriptionsItem;
@@ -92,7 +93,8 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
   const mergedSize = useSize(customizeSize);
   const rows = useRow(mergedColumn, mergedItems);
 
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   // ======================== Render ========================
   const contextValue = React.useMemo(
@@ -100,7 +102,7 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
     [labelStyle, contentStyle],
   );
 
-  return wrapSSR(
+  return wrapCSSVar(
     <DescriptionsContext.Provider value={contextValue}>
       <div
         className={classNames(

components/descriptions/style/cssVar.ts

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

components/descriptions/style/index.ts

@@ -1,7 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 
 import { resetComponent, textEllipsis } from '../../style';
-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 */
@@ -56,19 +56,19 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
   return {
     [`&${componentCls}-bordered`]: {
       [`> ${componentCls}-view`]: {
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
         '> table': {
           tableLayout: 'auto',
           borderCollapse: 'collapse',
         },
         [`${componentCls}-row`]: {
-          borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+          borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
           '&:last-child': {
             borderBottom: 'none',
           },
           [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
-            padding: `${token.padding}px ${token.paddingLG}px`,
-            borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+            padding: `${unit(token.padding)} ${unit(token.paddingLG)}`,
+            borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
             '&:last-child': {
               borderInlineEnd: 'none',
             },
@@ -85,14 +85,14 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
       [`&${componentCls}-middle`]: {
         [`${componentCls}-row`]: {
           [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
-            padding: `${token.paddingSM}px ${token.paddingLG}px`,
+            padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}`,
           },
         },
       },
       [`&${componentCls}-small`]: {
         [`${componentCls}-row`]: {
           [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
-            padding: `${token.paddingXS}px ${token.padding}px`,
+            padding: `${unit(token.paddingXS)} ${unit(token.padding)}`,
           },
         },
       },
@@ -161,7 +161,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
           content: '":"',
           position: 'relative',
           top: -0.5, // magic for position
-          marginInline: `${colonMarginLeft}px ${colonMarginRight}px`,
+          marginInline: `${unit(colonMarginLeft)} ${unit(colonMarginRight)}`,
         },
 
         [`&${componentCls}-item-no-colon::after`]: {
@@ -215,21 +215,24 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
     },
   };
 };
+
+export const prepareComponentToken: GetDefaultToken<'Descriptions'> = (token) => ({
+  labelBg: token.colorFillAlter,
+  titleColor: token.colorText,
+  titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
+  itemPaddingBottom: token.padding,
+  colonMarginRight: token.marginXS,
+  colonMarginLeft: token.marginXXS / 2,
+  contentColor: token.colorText,
+  extraColor: token.colorText,
+});
+
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Descriptions',
   (token) => {
     const descriptionToken = mergeToken<DescriptionsToken>(token, {});
-    return [genDescriptionStyles(descriptionToken)];
+    return genDescriptionStyles(descriptionToken);
   },
-  (token) => ({
-    labelBg: token.colorFillAlter,
-    titleColor: token.colorText,
-    titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
-    itemPaddingBottom: token.padding,
-    colonMarginRight: token.marginXS,
-    colonMarginLeft: token.marginXXS / 2,
-    contentColor: token.colorText,
-    extraColor: token.colorText,
-  }),
+  prepareComponentToken,
 );

scripts/check-cssinjs.tsx

@@ -35,7 +35,6 @@ async function checkCSSVar() {
     'checkbox',
     'collapse',
     'color-picker',
-    'descriptions',
     'drawer',
     'float-button',
     'grid',