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>
2024-12-01 11:39:28 +08:00 · 2023-11-17 13:46:41 +08:00 · 2023-11-17 13:46:41 +08:00 · a1f77f3694
commit a1f77f3694
parent 427d1a3eef
17 changed files with 261 additions and 201 deletions
--- a/components/table/InternalTable.tsx
+++ b/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}
--- a/components/table/style/bordered.ts
+++ b/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 tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
+  const {
+    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 -${
-                    token.tablePaddingHorizontal + token.lineWidth
-                  }px`,
-
+                  margin: `${unit(calc(tablePaddingVertical).mul(-1).equal())} ${unit(
+                    calc(calc(tablePaddingHorizontal).add(lineWidth)).mul(-1).equal(),
+                  )}`,
                  '&::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}`,
        },
      },

--- a/components/table/style/cssVar.ts
+++ b/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,
+  },
+});
--- a/components/table/style/expand.ts
+++ b/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;
-  // must be odd number, unless it cannot align center
-  const expandIconSize = halfInnerSize * 2 + lineWidth * 3;
-  const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
-  const expandIconLineOffset = paddingXXS - lineWidth;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
+  const expandIconLineOffset = calc(paddingXXS).sub(lineWidth).equal();

  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:
-          (fontSize * lineHeight - lineWidth * 3) / 2 -
-          Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
+        marginTop: expandIconMarginTop,
        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`,
-        padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
+        margin: `${unit(calc(tablePaddingVertical).mul(-1).equal())} ${unit(
+          calc(tablePaddingHorizontal).mul(-1).equal(),
+        )}`,
+        padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
      },
    },
  };
--- a/components/table/style/filter.ts
+++ b/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,
-          marginInline: `${paddingXXS}px ${-tablePaddingHorizontal / 2}px`,
-          padding: `0 ${paddingXXS}px`,
-          color: tableHeaderIconColor,
+          marginBlock: calc(paddingXXS).mul(-1).equal(),
+          marginInline: `${unit(paddingXXS)} ${unit(
+            calc(tablePaddingHorizontal).div(2).mul(-1).equal(),
+          )}`,
+          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,
          },
--- a/components/table/style/fixed.ts
+++ b/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: '""',
--- a/components/table/style/index.ts
+++ b/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`,
-                marginInline: `${
-                  token.tableExpandColumnWidth - tablePaddingHorizontal
-                }px -${tablePaddingHorizontal}px`,
+                marginBlock: unit(calc(tablePaddingVertical).mul(-1).equal()),
+                marginInline: `${unit(
+                  calc(tableExpandColumnWidth).sub(tablePaddingHorizontal).equal(),
+                )}
+                ${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) => {
-    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,
-    };
-  },
+  prepareComponentToken,
 );
--- a/components/table/style/pagination.ts
+++ b/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`]: {
--- a/components/table/style/radius.ts
+++ b/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)}`,
        },
      },
    },
--- a/components/table/style/selection.ts
+++ b/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,
-    tableHeaderIconColorHover,
+    headerIconColor,
+    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,
          },
        },
      },
--- a/components/table/style/size.ts
+++ b/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`,
-          marginInline: `${
-            token.tableExpandColumnWidth - paddingHorizontal
-          }px -${paddingHorizontal}px`,
+          marginBlock: unit(calc(paddingVertical).mul(-1).equal()),
+          marginInline: `${unit(
+            calc(tableExpandColumnWidth).sub(paddingHorizontal).equal(),
+          )} ${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()),
      },
    },
  });
--- a/components/table/style/sorter.ts
+++ b/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 } =
-    token;
+  const { componentCls, marginXXS, fontSizeIcon, headerIconColor, headerIconHoverColor } = 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,
      },
    },
  };
--- a/components/table/style/sticky.ts
+++ b/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',
--- a/components/table/style/summary.ts
+++ b/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 tableBorder = `${lineWidth}px ${token.lineType} ${tableBorderColor}`;
+  const { componentCls, lineWidth, tableBorderColor, calc } = token;
+  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}`,
      },
    },
  };
--- a/components/table/style/virtual.ts
+++ b/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,
            },
          },
--- a/scripts/check-cssinjs.tsx
+++ b/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]}>
--- a/scripts/generate-cssinjs.ts
+++ b/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);