feat: Table support cssVar (#45856)

* feat: Table support cssVar

* fix: fix

* fix: fix

* Update check-cssinjs.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/table/style/fixed.ts

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* feat: optimize token

* chore: update

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>

components/table/InternalTable.tsx

@@ -16,6 +16,7 @@ import { devUseWarning } from '../_util/warning';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
@@ -56,6 +57,7 @@ import type {
 import RcTable from './RcTable';
 import RcVirtualTable from './RcTable/VirtualTable';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export type { ColumnsType, TablePaginationConfig };
 
@@ -537,11 +539,13 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     };
   }
 
-  // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
   const [, token] = useToken();
+  const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
   const wrapperClassNames = classNames(
+    rootCls,
     `${prefixCls}-wrapper`,
     table?.className,
     {
@@ -584,7 +588,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     virtualProps.listItemHeight = listItemHeight;
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div ref={rootRef} className={wrapperClassNames} style={mergedStyle}>
       <Spin spinning={false} {...spinProps}>
         {topPaginationNode}

components/table/style/bordered.ts

@@ -1,10 +1,20 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const {
-  const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
+    componentCls,
+    lineWidth,
+    lineType,
+    tableBorderColor,
+    tableHeaderBg,
+    tablePaddingVertical,
+    tablePaddingHorizontal,
+    calc,
+  } = token;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
 
   const getSizeBorderStyle = (
     size: 'small' | 'middle',
@@ -19,7 +29,8 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
             > table > tbody > tr > td
           `]: {
             [`> ${componentCls}-expanded-row-fixed`]: {
-              margin: `-${paddingVertical}px -${paddingHorizontal + token.lineWidth}px`,
+              margin: `${unit(calc(paddingVertical).mul(-1).equal())}
+              ${unit(calc(calc(paddingHorizontal).add(lineWidth)).mul(-1).equal())}`,
             },
           },
         },
@@ -88,14 +99,13 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
                 > tbody > tr > td
               `]: {
                 [`> ${componentCls}-expanded-row-fixed`]: {
-                  margin: `-${token.tablePaddingVertical}px -${
+                  margin: `${unit(calc(tablePaddingVertical).mul(-1).equal())} ${unit(
-                    token.tablePaddingHorizontal + token.lineWidth
+                    calc(calc(tablePaddingHorizontal).add(lineWidth)).mul(-1).equal(),
-                  }px`,
+                  )}`,
-
                   '&::after': {
                     position: 'absolute',
                     top: 0,
-                    insetInlineEnd: token.lineWidth,
+                    insetInlineEnd: lineWidth,
                     bottom: 0,
                     borderInlineEnd: tableBorder,
                     content: '""',
@@ -149,7 +159,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         },
         // https://github.com/ant-design/ant-design/issues/35577
         '&-scrollbar:not([rowspan])': {
-          boxShadow: `0 ${token.lineWidth}px 0 ${token.lineWidth}px ${token.tableHeaderBg}`,
+          boxShadow: `0 ${unit(lineWidth)} 0 ${unit(lineWidth)} ${tableHeaderBg}`,
         },
       },
 

components/table/style/cssVar.ts

@@ -0,0 +1,8 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister<'Table'>('Table', prepareComponentToken, {
+  unitless: {
+    expandIconScale: true,
+  },
+});

components/table/style/expand.ts

@@ -1,13 +1,13 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
+import { operationUnit } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
-import { operationUnit } from '../../style';
 
 const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
   const {
     componentCls,
     antCls,
-    controlInteractiveSize: checkboxSize,
     motionDurationSlow,
     lineWidth,
     paddingXS,
@@ -16,19 +16,18 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     tableExpandIconBg,
     tableExpandColumnWidth,
     borderRadius,
-    fontSize,
-    fontSizeSM,
-    lineHeight,
     tablePaddingVertical,
     tablePaddingHorizontal,
     tableExpandedRowBg,
     paddingXXS,
+    expandIconMarginTop,
+    expandIconSize,
+    expandIconHalfInner,
+    expandIconScale,
+    calc,
   } = token;
-  const halfInnerSize = checkboxSize / 2 - lineWidth;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
-  // must be odd number, unless it cannot align center
+  const expandIconLineOffset = calc(paddingXXS).sub(lineWidth).equal();
-  const expandIconSize = halfInnerSize * 2 + lineWidth * 3;
-  const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
-  const expandIconLineOffset = paddingXXS - lineWidth;
 
   return {
     [`${componentCls}-wrapper`]: {
@@ -60,11 +59,11 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         height: expandIconSize,
         padding: 0,
         color: 'inherit',
-        lineHeight: `${expandIconSize}px`,
+        lineHeight: unit(expandIconSize),
         background: tableExpandIconBg,
         border: tableBorder,
         borderRadius,
-        transform: `scale(${checkboxSize / expandIconSize})`,
+        transform: `scale(${expandIconScale})`,
         transition: `all ${motionDurationSlow}`,
         userSelect: 'none',
 
@@ -80,7 +79,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         },
 
         '&::before': {
-          top: halfInnerSize,
+          top: expandIconHalfInner,
           insetInlineEnd: expandIconLineOffset,
           insetInlineStart: expandIconLineOffset,
           height: lineWidth,
@@ -89,7 +88,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         '&::after': {
           top: expandIconLineOffset,
           bottom: expandIconLineOffset,
-          insetInlineStart: halfInnerSize,
+          insetInlineStart: expandIconHalfInner,
           width: lineWidth,
           transform: 'rotate(90deg)',
         },
@@ -115,9 +114,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       },
 
       [`${componentCls}-row-indent + ${componentCls}-row-expand-icon`]: {
-        marginTop:
+        marginTop: expandIconMarginTop,
-          (fontSize * lineHeight - lineWidth * 3) / 2 -
-          Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
         marginInlineEnd: paddingXS,
       },
 
@@ -142,8 +139,10 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       // With fixed
       [`${componentCls}-expanded-row-fixed`]: {
         position: 'relative',
-        margin: `-${tablePaddingVertical}px -${tablePaddingHorizontal}px`,
+        margin: `${unit(calc(tablePaddingVertical).mul(-1).equal())} ${unit(
-        padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
+          calc(tablePaddingHorizontal).mul(-1).equal(),
+        )}`,
+        padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
       },
     },
   };

components/table/style/filter.ts

@@ -1,3 +1,5 @@
+import { unit } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
@@ -15,7 +17,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
     lineWidth,
     lineType,
     tableBorderColor,
-    tableHeaderIconColor,
+    headerIconColor,
     fontSizeSM,
     tablePaddingHorizontal,
     borderRadius,
@@ -30,11 +32,12 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
     controlItemBgActive,
     boxShadowSecondary,
     filterDropdownMenuBg,
+    calc,
   } = token;
   const dropdownPrefixCls = `${antCls}-dropdown`;
   const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`;
   const treePrefixCls = `${antCls}-tree`;
-  const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
 
   return [
     {
@@ -48,10 +51,12 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
           position: 'relative',
           display: 'flex',
           alignItems: 'center',
-          marginBlock: -paddingXXS,
+          marginBlock: calc(paddingXXS).mul(-1).equal(),
-          marginInline: `${paddingXXS}px ${-tablePaddingHorizontal / 2}px`,
+          marginInline: `${unit(paddingXXS)} ${unit(
-          padding: `0 ${paddingXXS}px`,
+            calc(tablePaddingHorizontal).div(2).mul(-1).equal(),
-          color: tableHeaderIconColor,
+          )}`,
+          padding: `0 ${unit(paddingXXS)}`,
+          color: headerIconColor,
           fontSize: fontSizeSM,
           borderRadius,
           cursor: 'pointer',
@@ -93,7 +98,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
 
             '&:empty::after': {
               display: 'block',
-              padding: `${paddingXS}px 0`,
+              padding: `${unit(paddingXS)} 0`,
               color: colorTextDisabled,
               fontSize: fontSizeSM,
               textAlign: 'center',
@@ -102,7 +107,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
           },
 
           [`${tableFilterDropdownPrefixCls}-tree`]: {
-            paddingBlock: `${paddingXS}px 0`,
+            paddingBlock: `${unit(paddingXS)} 0`,
             paddingInline: paddingXS,
 
             [treePrefixCls]: {
@@ -144,7 +149,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
           [`${tableFilterDropdownPrefixCls}-btns`]: {
             display: 'flex',
             justifyContent: 'space-between',
-            padding: `${paddingXS - lineWidth}px ${paddingXS}px`,
+            padding: `${unit(calc(paddingXS).sub(lineWidth).equal())} ${unit(paddingXS)}`,
             overflow: 'hidden',
             borderTop: tableBorder,
           },

components/table/style/fixed.ts

@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
@@ -11,6 +12,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     zIndexTableFixed,
     tableBg,
     zIndexTableSticky,
+    calc,
   } = token;
 
   const shadowColor = colorSplit;
@@ -37,7 +39,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
           _skip_check_: true,
           value: 0,
         },
-        bottom: -lineWidth,
+        bottom: calc(lineWidth).mul(-1).equal(),
         width: 30,
         transform: 'translateX(100%)',
         transition: `box-shadow ${motionDurationSlow}`,
@@ -55,7 +57,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       `]: {
         position: 'absolute',
         top: 0,
-        bottom: -lineWidth,
+        bottom: calc(lineWidth).mul(-1).equal(),
         left: {
           _skip_check_: true,
           value: 0,
@@ -72,7 +74,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
           position: 'absolute',
           top: 0,
           bottom: 0,
-          zIndex: zIndexTableSticky + 1,
+          zIndex: calc(zIndexTableSticky).add(1).equal({ unit: false }),
           width: 30,
           transition: `box-shadow ${motionDurationSlow}`,
           content: '""',

components/table/style/index.ts

@@ -1,8 +1,8 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 
 import { clearFix, resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genBorderedStyle from './bordered';
 import genEllipsisStyle from './ellipsis';
@@ -176,6 +176,19 @@ export interface ComponentToken {
    * @descEN Border radius of sticky scrollbar
    */
   stickyScrollBarBorderRadius: number;
+
+  /** @internal */
+  expandIconMarginTop: number;
+  /** @internal */
+  expandIconHalfInner: number;
+  /** @internal */
+  expandIconSize: number;
+  /** @internal */
+  expandIconScale: number;
+  /** @internal */
+  headerIconColor: string;
+  /** @internal */
+  headerIconHoverColor: string;
 }
 
 export interface TableToken extends FullToken<'Table'> {
@@ -196,8 +209,6 @@ export interface TableToken extends FullToken<'Table'> {
   tableHeaderCellSplitColor: string;
   tableHeaderSortBg: string;
   tableHeaderSortHoverBg: string;
-  tableHeaderIconColor: string;
-  tableHeaderIconColorHover: string;
   tableBodySortBg: string;
   tableFixedHeaderSortActiveBg: string;
   tableHeaderFilterActiveBg: string;
@@ -211,14 +222,14 @@ export interface TableToken extends FullToken<'Table'> {
   tableFontSizeSmall: number;
   tableSelectionColumnWidth: number;
   tableExpandIconBg: string;
-  tableExpandColumnWidth: number;
+  tableExpandColumnWidth: number | string;
   tableExpandedRowBg: string;
   tableFilterDropdownWidth: number;
   tableFilterDropdownSearchWidth: number;
 
   // Z-Index
   zIndexTableFixed: number;
-  zIndexTableSticky: number;
+  zIndexTableSticky: number | string;
 
   // Virtual Scroll Bar
   tableScrollThumbSize: number;
@@ -233,6 +244,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     fontWeightStrong,
     tablePaddingVertical,
     tablePaddingHorizontal,
+    tableExpandColumnWidth,
     lineWidth,
     lineType,
     tableBorderColor,
@@ -245,8 +257,9 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     tableHeaderCellSplitColor,
     tableFooterTextColor,
     tableFooterBg,
+    calc,
   } = token;
-  const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
   return {
     [`${componentCls}-wrapper`]: {
       clear: 'both',
@@ -257,13 +270,13 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         ...resetComponent(token),
         fontSize: tableFontSize,
         background: tableBg,
-        borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
+        borderRadius: `${unit(tableRadius)} ${unit(tableRadius)} 0 0`,
       },
       // https://github.com/ant-design/ant-design/issues/17611
       table: {
         width: '100%',
         textAlign: 'start',
-        borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
+        borderRadius: `${unit(tableRadius)} ${unit(tableRadius)} 0 0`,
         borderCollapse: 'separate',
         borderSpacing: 0,
       },
@@ -278,13 +291,13 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
           tfoot > tr > td
         `]: {
         position: 'relative',
-        padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
+        padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
         overflowWrap: 'break-word',
       },
 
       // ============================ Title =============================
       [`${componentCls}-title`]: {
-        padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
+        padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
       },
 
       // ============================ Header ============================
@@ -337,10 +350,11 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
               > ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child
             `]: {
               [componentCls]: {
-                marginBlock: `-${tablePaddingVertical}px`,
+                marginBlock: unit(calc(tablePaddingVertical).mul(-1).equal()),
-                marginInline: `${
+                marginInline: `${unit(
-                  token.tableExpandColumnWidth - tablePaddingHorizontal
+                  calc(tableExpandColumnWidth).sub(tablePaddingHorizontal).equal(),
-                }px -${tablePaddingHorizontal}px`,
+                )}
+                ${unit(calc(tablePaddingHorizontal).mul(-1).equal())}`,
                 [`${componentCls}-tbody > tr:last-child > td`]: {
                   borderBottom: 0,
                   '&:first-child, &:last-child': {
@@ -365,7 +379,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
 
       // ============================ Footer ============================
       [`${componentCls}-footer`]: {
-        padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
+        padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
         color: tableFooterTextColor,
         background: tableFooterBg,
       },
@@ -373,6 +387,97 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
   };
 };
 
+export const prepareComponentToken: GetDefaultToken<'Table'> = (token) => {
+  const {
+    colorFillAlter,
+    colorBgContainer,
+    colorTextHeading,
+    colorFillSecondary,
+    colorFillContent,
+    controlItemBgActive,
+    controlItemBgActiveHover,
+    padding,
+    paddingSM,
+    paddingXS,
+    colorBorderSecondary,
+    borderRadiusLG,
+    controlHeight,
+    colorTextPlaceholder,
+    fontSize,
+    fontSizeSM,
+    lineHeight,
+    lineWidth,
+    colorIcon,
+    colorIconHover,
+    opacityLoading,
+    controlInteractiveSize,
+  } = token;
+
+  const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
+    .onBackground(colorBgContainer)
+    .toHexShortString();
+  const colorFillContentSolid = new TinyColor(colorFillContent)
+    .onBackground(colorBgContainer)
+    .toHexShortString();
+  const colorFillAlterSolid = new TinyColor(colorFillAlter)
+    .onBackground(colorBgContainer)
+    .toHexShortString();
+
+  const baseColorAction = new TinyColor(colorIcon);
+  const baseColorActionHover = new TinyColor(colorIconHover);
+
+  const expandIconHalfInner = controlInteractiveSize / 2 - lineWidth;
+  const expandIconSize = expandIconHalfInner * 2 + lineWidth * 3;
+
+  return {
+    headerBg: colorFillAlterSolid,
+    headerColor: colorTextHeading,
+    headerSortActiveBg: colorFillSecondarySolid,
+    headerSortHoverBg: colorFillContentSolid,
+    bodySortBg: colorFillAlterSolid,
+    rowHoverBg: colorFillAlterSolid,
+    rowSelectedBg: controlItemBgActive,
+    rowSelectedHoverBg: controlItemBgActiveHover,
+    rowExpandedBg: colorFillAlter,
+    cellPaddingBlock: padding,
+    cellPaddingInline: padding,
+    cellPaddingBlockMD: paddingSM,
+    cellPaddingInlineMD: paddingXS,
+    cellPaddingBlockSM: paddingXS,
+    cellPaddingInlineSM: paddingXS,
+    borderColor: colorBorderSecondary,
+    headerBorderRadius: borderRadiusLG,
+    footerBg: colorFillAlterSolid,
+    footerColor: colorTextHeading,
+    cellFontSize: fontSize,
+    cellFontSizeMD: fontSize,
+    cellFontSizeSM: fontSize,
+    headerSplitColor: colorBorderSecondary,
+    fixedHeaderSortActiveBg: colorFillSecondarySolid,
+    headerFilterHoverBg: colorFillContent,
+    filterDropdownMenuBg: colorBgContainer,
+    filterDropdownBg: colorBgContainer,
+    expandIconBg: colorBgContainer,
+    selectionColumnWidth: controlHeight,
+    stickyScrollBarBg: colorTextPlaceholder,
+    stickyScrollBarBorderRadius: 100,
+    expandIconMarginTop:
+      (fontSize * lineHeight - lineWidth * 3) / 2 -
+      Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
+    headerIconColor: baseColorAction
+      .clone()
+      .setAlpha(baseColorAction.getAlpha() * opacityLoading)
+      .toRgbString(),
+    headerIconHoverColor: baseColorActionHover
+      .clone()
+      .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
+      .toRgbString(),
+    expandIconHalfInner,
+    expandIconSize,
+    expandIconScale: controlInteractiveSize / expandIconSize,
+  };
+};
+
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Table',
@@ -380,9 +485,6 @@ export default genComponentStyleHook(
     const {
       colorTextHeading,
       colorSplit,
-      colorIcon,
-      colorIconHover,
-      opacityLoading,
       colorBgContainer,
       controlInteractiveSize: checkboxSize,
       headerBg,
@@ -414,11 +516,9 @@ export default genComponentStyleHook(
       expandIconBg,
       selectionColumnWidth,
       stickyScrollBarBg,
+      calc,
     } = token;
 
-    const baseColorAction = new TinyColor(colorIcon);
-    const baseColorActionHover = new TinyColor(colorIconHover);
-
     const zIndexTableFixed: number = 2;
 
     const tableToken = mergeToken<TableToken>(token, {
@@ -440,14 +540,6 @@ export default genComponentStyleHook(
       tableHeaderCellSplitColor: headerSplitColor,
       tableHeaderSortBg: headerSortActiveBg,
       tableHeaderSortHoverBg: headerSortHoverBg,
-      tableHeaderIconColor: baseColorAction
-        .clone()
-        .setAlpha(baseColorAction.getAlpha() * opacityLoading)
-        .toRgbString(),
-      tableHeaderIconColorHover: baseColorActionHover
-        .clone()
-        .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
-        .toRgbString(),
       tableBodySortBg: bodySortBg,
       tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg,
       tableHeaderFilterActiveBg: headerFilterHoverBg,
@@ -461,7 +553,7 @@ export default genComponentStyleHook(
       tableFontSizeSmall: cellFontSizeSM,
       tableSelectionColumnWidth: selectionColumnWidth,
       tableExpandIconBg: expandIconBg,
-      tableExpandColumnWidth: checkboxSize + 2 * token.padding,
+      tableExpandColumnWidth: calc(checkboxSize).add(calc(token.padding).mul(2)).equal(),
       tableExpandedRowBg: rowExpandedBg,
 
       // Dropdown
@@ -496,67 +588,5 @@ export default genComponentStyleHook(
       genVirtualStyle(tableToken),
     ];
   },
-  (token) => {
+  prepareComponentToken,
-    const {
-      colorFillAlter,
-      colorBgContainer,
-      colorTextHeading,
-      colorFillSecondary,
-      colorFillContent,
-      controlItemBgActive,
-      controlItemBgActiveHover,
-      padding,
-      paddingSM,
-      paddingXS,
-      colorBorderSecondary,
-      borderRadiusLG,
-      fontSize,
-      controlHeight,
-      colorTextPlaceholder,
-    } = token;
-
-    const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
-      .onBackground(colorBgContainer)
-      .toHexShortString();
-    const colorFillContentSolid = new TinyColor(colorFillContent)
-      .onBackground(colorBgContainer)
-      .toHexShortString();
-    const colorFillAlterSolid = new TinyColor(colorFillAlter)
-      .onBackground(colorBgContainer)
-      .toHexShortString();
-
-    return {
-      headerBg: colorFillAlterSolid,
-      headerColor: colorTextHeading,
-      headerSortActiveBg: colorFillSecondarySolid,
-      headerSortHoverBg: colorFillContentSolid,
-      bodySortBg: colorFillAlterSolid,
-      rowHoverBg: colorFillAlterSolid,
-      rowSelectedBg: controlItemBgActive,
-      rowSelectedHoverBg: controlItemBgActiveHover,
-      rowExpandedBg: colorFillAlter,
-      cellPaddingBlock: padding,
-      cellPaddingInline: padding,
-      cellPaddingBlockMD: paddingSM,
-      cellPaddingInlineMD: paddingXS,
-      cellPaddingBlockSM: paddingXS,
-      cellPaddingInlineSM: paddingXS,
-      borderColor: colorBorderSecondary,
-      headerBorderRadius: borderRadiusLG,
-      footerBg: colorFillAlterSolid,
-      footerColor: colorTextHeading,
-      cellFontSize: fontSize,
-      cellFontSizeMD: fontSize,
-      cellFontSizeSM: fontSize,
-      headerSplitColor: colorBorderSecondary,
-      fixedHeaderSortActiveBg: colorFillSecondarySolid,
-      headerFilterHoverBg: colorFillContent,
-      filterDropdownMenuBg: colorBgContainer,
-      filterDropdownBg: colorBgContainer,
-      expandIconBg: colorBgContainer,
-      selectionColumnWidth: controlHeight,
-      stickyScrollBarBg: colorTextPlaceholder,
-      stickyScrollBarBorderRadius: 100,
-    };
-  },
 );

components/table/style/pagination.ts

@@ -1,14 +1,15 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genPaginationStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
-  const { componentCls, antCls } = token;
+  const { componentCls, antCls, margin } = token;
   return {
     [`${componentCls}-wrapper`]: {
       // ========================== Pagination ==========================
       [`${componentCls}-pagination${antCls}-pagination`]: {
-        margin: `${token.margin}px 0`,
+        margin: `${unit(margin)} 0`,
       },
 
       [`${componentCls}-pagination`]: {

components/table/style/radius.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 { TableToken } from './index';
 
@@ -9,7 +10,7 @@ const genRadiusStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       [componentCls]: {
         // https://github.com/ant-design/ant-design/issues/39115#issuecomment-1362314574
         [`${componentCls}-title, ${componentCls}-header`]: {
-          borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
+          borderRadius: `${unit(tableRadius)} ${unit(tableRadius)} 0 0`,
         },
 
         [`${componentCls}-title + ${componentCls}-container`]: {
@@ -44,7 +45,7 @@ const genRadiusStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         },
 
         '&-footer': {
-          borderRadius: `0 0 ${tableRadius}px ${tableRadius}px`,
+          borderRadius: `0 0 ${unit(tableRadius)} ${unit(tableRadius)}`,
         },
       },
     },

components/table/style/selection.ts

@@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
@@ -11,12 +11,14 @@ const genSelectionStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     fontSizeIcon,
     padding,
     paddingXS,
-    tableHeaderIconColor,
+    headerIconColor,
-    tableHeaderIconColorHover,
+    headerIconHoverColor,
     tableSelectionColumnWidth,
     tableSelectedRowBg,
     tableSelectedRowHoverBg,
     tableRowHoverBg,
+    tablePaddingHorizontal,
+    calc,
   } = token;
 
   return {
@@ -25,14 +27,21 @@ const genSelectionStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       [`${componentCls}-selection-col`]: {
         width: tableSelectionColumnWidth,
         [`&${componentCls}-selection-col-with-dropdown`]: {
-          width: tableSelectionColumnWidth + fontSizeIcon + padding / 4,
+          width: calc(tableSelectionColumnWidth)
+            .add(fontSizeIcon)
+            .add(calc(padding).div(4))
+            .equal(),
         },
       },
 
       [`${componentCls}-bordered ${componentCls}-selection-col`]: {
-        width: tableSelectionColumnWidth + paddingXS * 2,
+        width: calc(tableSelectionColumnWidth).add(calc(paddingXS).mul(2)).equal(),
         [`&${componentCls}-selection-col-with-dropdown`]: {
-          width: tableSelectionColumnWidth + fontSizeIcon + padding / 4 + paddingXS * 2,
+          width: calc(tableSelectionColumnWidth)
+            .add(fontSizeIcon)
+            .add(calc(padding).div(4))
+            .add(calc(paddingXS).mul(2))
+            .equal(),
         },
       },
 
@@ -71,15 +80,15 @@ const genSelectionStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         cursor: 'pointer',
         transition: `all ${token.motionDurationSlow}`,
         marginInlineStart: '100%',
-        paddingInlineStart: `${token.tablePaddingHorizontal / 4}px`,
+        paddingInlineStart: unit(calc(tablePaddingHorizontal).div(4).equal()),
 
         [iconCls]: {
-          color: tableHeaderIconColor,
+          color: headerIconColor,
           fontSize: fontSizeIcon,
           verticalAlign: 'baseline',
 
           '&:hover': {
-            color: tableHeaderIconColorHover,
+            color: headerIconHoverColor,
           },
         },
       },

components/table/style/size.ts

@@ -1,9 +1,10 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genSizeStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, tableExpandColumnWidth, calc } = token;
   const getSizeStyle = (
     size: 'small' | 'middle',
     paddingVertical: number,
@@ -22,30 +23,32 @@ const genSizeStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         tfoot > tr > th,
         tfoot > tr > td
       `]: {
-        padding: `${paddingVertical}px ${paddingHorizontal}px`,
+        padding: `${unit(paddingVertical)} ${unit(paddingHorizontal)}`,
       },
 
       [`${componentCls}-filter-trigger`]: {
-        marginInlineEnd: `-${paddingHorizontal / 2}px`,
+        marginInlineEnd: unit(calc(paddingHorizontal).div(2).mul(-1).equal()),
       },
 
       [`${componentCls}-expanded-row-fixed`]: {
-        margin: `-${paddingVertical}px -${paddingHorizontal}px`,
+        margin: `${unit(calc(paddingVertical).mul(-1).equal())} ${unit(
+          calc(paddingHorizontal).mul(-1).equal(),
+        )}`,
       },
 
       [`${componentCls}-tbody`]: {
         // ========================= Nest Table ===========================
         [`${componentCls}-wrapper:only-child ${componentCls}`]: {
-          marginBlock: `-${paddingVertical}px`,
+          marginBlock: unit(calc(paddingVertical).mul(-1).equal()),
-          marginInline: `${
+          marginInline: `${unit(
-            token.tableExpandColumnWidth - paddingHorizontal
+            calc(tableExpandColumnWidth).sub(paddingHorizontal).equal(),
-          }px -${paddingHorizontal}px`,
+          )} ${unit(calc(paddingHorizontal).mul(-1).equal())}`,
         },
       },
 
       // https://github.com/ant-design/ant-design/issues/35167
       [`${componentCls}-selection-extra`]: {
-        paddingInlineStart: `${paddingHorizontal / 4}px`,
+        paddingInlineStart: unit(calc(paddingHorizontal).div(4).equal()),
       },
     },
   });

components/table/style/sorter.ts

@@ -3,8 +3,7 @@ import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genSorterStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
-  const { componentCls, marginXXS, fontSizeIcon, tableHeaderIconColor, tableHeaderIconColorHover } =
+  const { componentCls, marginXXS, fontSizeIcon, headerIconColor, headerIconHoverColor } = token;
-    token;
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}-thead th${componentCls}-column-has-sorters`]: {
@@ -68,7 +67,7 @@ const genSorterStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
 
       [`${componentCls}-column-sorter`]: {
         marginInlineStart: marginXXS,
-        color: tableHeaderIconColor,
+        color: headerIconColor,
         fontSize: 0,
         transition: `color ${token.motionDurationSlow}`,
 
@@ -92,7 +91,7 @@ const genSorterStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       },
 
       [`${componentCls}-column-sorters:hover ${componentCls}-column-sorter`]: {
-        color: tableHeaderIconColorHover,
+        color: headerIconHoverColor,
       },
     },
   };

components/table/style/sticky.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 { TableToken } from './index';
 
@@ -12,8 +13,11 @@ const genStickyStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     tableScrollBg,
     zIndexTableSticky,
     stickyScrollBarBorderRadius,
+    lineWidth,
+    lineType,
+    tableBorderColor,
   } = token;
-  const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}-sticky`]: {
@@ -26,7 +30,7 @@ const genStickyStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         '&-scroll': {
           position: 'sticky',
           bottom: 0,
-          height: `${tableScrollThumbSize}px !important`,
+          height: `${unit(tableScrollThumbSize)} !important`,
           zIndex: zIndexTableSticky,
           display: 'flex',
           alignItems: 'center',

components/table/style/summary.ts

@@ -1,17 +1,17 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
-  const { componentCls, lineWidth, tableBorderColor } = token;
+  const { componentCls, lineWidth, tableBorderColor, calc } = token;
-  const tableBorder = `${lineWidth}px ${token.lineType} ${tableBorderColor}`;
+  const tableBorder = `${unit(lineWidth)} ${token.lineType} ${tableBorderColor}`;
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}-summary`]: {
         position: 'relative',
         zIndex: token.zIndexTableFixed,
         background: token.tableBg,
-
         '> tr': {
           '> th, > td': {
             borderBottom: tableBorder,
@@ -20,7 +20,7 @@ const genSummaryStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       },
 
       [`div${componentCls}-summary`]: {
-        boxShadow: `0 -${lineWidth}px 0 ${tableBorderColor}`,
+        boxShadow: `0 ${unit(calc(lineWidth).mul(-1).equal())} 0 ${tableBorderColor}`,
       },
     },
   };

components/table/style/virtual.ts

@@ -1,12 +1,12 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
-  const { componentCls, motionDurationMid } = token;
+  const { componentCls, motionDurationMid, lineWidth, lineType, tableBorderColor, calc } = token;
 
-  const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
 
   const rowCellCls = `${componentCls}-expanded-row-cell`;
 
@@ -30,7 +30,7 @@ const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
             position: 'sticky',
             insetInlineStart: 0,
             overflow: 'hidden',
-            width: `calc(var(--virtual-width) - ${token.lineWidth}px)`,
+            width: `calc(var(--virtual-width) - ${unit(lineWidth)})`,
             borderInlineEnd: 'none',
           },
         },
@@ -54,7 +54,7 @@ const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
               content: '""',
               position: 'absolute',
               insetBlock: 0,
-              insetInlineStart: -token.lineWidth,
+              insetInlineStart: calc(lineWidth).mul(-1).equal(),
               borderInlineStart: tableBorder,
             },
           },

scripts/check-cssinjs.tsx

@@ -27,26 +27,9 @@ console.error = (msg: any) => {
 };
 
 async function checkCSSVar() {
-  const ignore = [
-    'calendar',
-    'cascader',
-    'checkbox',
-    'collapse',
-    'color-picker',
-    'float-button',
-    'grid',
-    'icon',
-    'pagination',
-    'radio',
-    'space',
-    'steps',
-    'switch',
-    'table',
-  ];
-
   await generateCssinjs({
     key: 'check',
-    ignore,
+    ignore: ['grid', 'pagination', 'steps', 'calendar'],
     render(Component: any) {
       ReactDOMServer.renderToString(
         <StyleProvider linters={[NaNLinter]}>

scripts/generate-cssinjs.ts

@@ -1,7 +1,7 @@
 import url from 'node:url';
 import path from 'path';
-import { globSync } from 'glob';
 import React from 'react';
+import { globSync } from 'glob';
 
 type StyleFn = (prefix?: string) => void;
 
@@ -29,7 +29,9 @@ export const generateCssinjs = ({ key, beforeRender, render, ignore }: GenCssinj
       const pathArr = file.split('/');
       const styleIndex = pathArr.lastIndexOf('style');
       const componentName = pathArr[styleIndex - 1];
-      if (ignore?.includes(componentName)) return;
+      if (ignore?.includes(componentName)) {
+        return;
+      }
       let useStyle: StyleFn = () => {};
       if (file.includes('grid')) {
         const { useColStyle, useRowStyle } = await import(absPath);