refactor: steps support css var (#45878)

* feat: steps support cssVars * fix: fix style * Update check-cssinjs.tsx * fix: fix bug * style: code format * fix: fix bug * refactor: wireframe & tailTop * wip: fix taiTop * fix: remove tailTop and use token calc top fix: remove tailTop and use token calc top perf: add annotation --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com>
2024-11-24 02:59:58 +08:00 · 2023-11-17 15:33:28 +08:00 · 2023-11-17 15:33:28 +08:00 · 3871763950
commit 3871763950
parent 88a13b1fbc
12 changed files with 181 additions and 120 deletions
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@ -14,6 +14,7 @@ import useBreakpoint from '../grid/hooks/useBreakpoint';
 import Progress from '../progress';
 import Tooltip from '../tooltip';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import useLegacyItems from './useLegacyItems';

 export interface StepProps {
@ -79,7 +80,8 @@ const Steps: CompoundedComponent = (props) => {

  const prefixCls = getPrefixCls('steps', props.prefixCls);

-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);

  const isInline = props.type === 'inline';
  const iconPrefix = getPrefixCls('', props.iconPrefix);
@ -127,7 +129,7 @@ const Steps: CompoundedComponent = (props) => {
  const itemRender = (item: StepProps, stepItem: React.ReactNode) =>
    item.description ? <Tooltip title={item.description}>{stepItem}</Tooltip> : stepItem;

-  return wrapSSR(
+  return wrapCSSVar(
    <RcSteps
      icons={icons}
      {...restProps}
--- a/components/steps/style/cssVar.ts
+++ b/components/steps/style/cssVar.ts
@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Steps', prepareComponentToken);
--- a/components/steps/style/custom-icon.ts
+++ b/components/steps/style/custom-icon.ts
@ -1,5 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
+import { unit } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme/internal';

 const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
@ -16,7 +17,7 @@ const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) =>
          width: customIconSize,
          height: customIconSize,
          fontSize: customIconFontSize,
-          lineHeight: `${customIconFontSize}px`,
+          lineHeight: `${unit(customIconFontSize)}`,
        },
      },
    },
--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@ -1,7 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { CSSProperties } from 'react';
 import { genFocusOutline, 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 genStepsCustomIconStyle from './custom-icon';
 import genStepsInlineStyle from './inline';
@ -79,6 +79,26 @@ export interface ComponentToken {
   * @descEN Line height of title
   */
  titleLineHeight: number;
+  /**
+   * @internal
+   */
+  waitIconColor: string;
+  /**
+   * @internal
+   */
+  waitIconBgColor: string;
+  /**
+   * @internal
+   */
+  waitIconBorderColor: string;
+  /**
+   * @internal
+   */
+  finishIconBgColor: string;
+  /**
+   * @Internal
+   */
+  finishIconBorderColor: string;
 }

 export interface StepsToken extends FullToken<'Steps'> {
@ -91,19 +111,14 @@ export interface StepsToken extends FullToken<'Steps'> {
  processIconBgColor: string;
  processIconBorderColor: string;
  processDotColor: string;
-  waitIconColor: string;
  waitTitleColor: string;
  waitDescriptionColor: string;
  waitTailColor: string;
-  waitIconBgColor: string;
-  waitIconBorderColor: string;
  waitDotColor: string;
  finishIconColor: string;
  finishTitleColor: string;
  finishDescriptionColor: string;
  finishTailColor: string;
-  finishIconBgColor: string;
-  finishIconBorderColor: string;
  finishDotColor: string;
  errorIconColor: string;
  errorTitleColor: string;
@ -210,10 +225,10 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
      marginInlineEnd: token.marginXS,
      fontSize: token.iconFontSize,
      fontFamily: token.fontFamily,
-      lineHeight: `${token.iconSize}px`,
+      lineHeight: `${unit(token.iconSize)}`,
      textAlign: 'center',
      borderRadius: token.iconSize,
-      border: `${token.lineWidth}px ${token.lineType} transparent`,
+      border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
      transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
      [`${componentCls}-icon`]: {
        position: 'relative',
@ -224,7 +239,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
    },
    [`${stepsItemCls}-tail`]: {
      position: 'absolute',
-      top: token.iconSize / 2 - token.paddingXXS,
+      top: token.calc(token.iconSize).div(2).sub(token.paddingXXS).equal(),
      insetInlineStart: 0,
      width: '100%',

@ -244,11 +259,11 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
      paddingInlineEnd: token.padding,
      color: token.colorText,
      fontSize: token.fontSizeLG,
-      lineHeight: `${token.titleLineHeight}px`,
+      lineHeight: `${unit(token.titleLineHeight)}`,

      '&::after': {
        position: 'absolute',
-        top: token.titleLineHeight / 2,
+        top: token.calc(token.titleLineHeight).div(2).equal(),
        insetInlineStart: '100%',
        display: 'block',
        width: 9999,
@ -383,23 +398,39 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
 };

 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'Steps'> = (token) => ({
+  titleLineHeight: token.controlHeight,
+  customIconSize: token.controlHeight,
+  customIconTop: 0,
+  customIconFontSize: token.controlHeightSM,
+  iconSize: token.controlHeight,
+  iconTop: -0.5, // magic for ui experience
+  iconFontSize: token.fontSize,
+  iconSizeSM: token.fontSizeHeading3,
+  dotSize: token.controlHeight / 4,
+  dotCurrentSize: token.controlHeightLG / 4,
+  navArrowColor: token.colorTextDisabled,
+  navContentMaxWidth: 'auto',
+  descriptionMaxWidth: 140,
+  waitIconColor: token.wireframe ? token.colorTextDisabled : token.colorTextLabel,
+  waitIconBgColor: token.wireframe ? token.colorBgContainer : token.colorFillContent,
+  waitIconBorderColor: token.wireframe ? token.colorTextDisabled : 'transparent',
+  finishIconBgColor: token.wireframe ? token.colorBgContainer : token.controlItemBgActive,
+  finishIconBorderColor: token.wireframe ? token.colorPrimary : token.controlItemBgActive,
+});
+
 export default genComponentStyleHook(
  'Steps',
  (token) => {
    const {
-      wireframe,
      colorTextDisabled,
      controlHeightLG,
      colorTextLightSolid,
      colorText,
      colorPrimary,
-      colorTextLabel,
      colorTextDescription,
      colorTextQuaternary,
-      colorFillContent,
-      controlItemBgActive,
      colorError,
-      colorBgContainer,
      colorBorderSecondary,
      colorSplit,
    } = token;
@ -413,19 +444,14 @@ export default genComponentStyleHook(
      processIconBorderColor: colorPrimary,
      processDotColor: colorPrimary,
      processTailColor: colorSplit,
-      waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
      waitTitleColor: colorTextDescription,
      waitDescriptionColor: colorTextDescription,
      waitTailColor: colorSplit,
-      waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
-      waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent',
      waitDotColor: colorTextDisabled,
      finishIconColor: colorPrimary,
      finishTitleColor: colorText,
      finishDescriptionColor: colorTextDescription,
      finishTailColor: colorPrimary,
-      finishIconBgColor: wireframe ? colorBgContainer : controlItemBgActive,
-      finishIconBorderColor: wireframe ? colorPrimary : controlItemBgActive,
      finishDotColor: colorPrimary,
      errorIconColor: colorTextLightSolid,
      errorTitleColor: colorError,
@ -444,29 +470,5 @@ export default genComponentStyleHook(

    return [genStepsStyle(stepsToken)];
  },
-  (token) => {
-    const {
-      colorTextDisabled,
-      fontSize,
-      controlHeightSM,
-      controlHeight,
-      controlHeightLG,
-      fontSizeHeading3,
-    } = token;
-    return {
-      titleLineHeight: controlHeight,
-      customIconSize: controlHeight,
-      customIconTop: 0,
-      customIconFontSize: controlHeightSM,
-      iconSize: controlHeight,
-      iconTop: -0.5, // magic for ui experience
-      iconFontSize: fontSize,
-      iconSizeSM: fontSizeHeading3,
-      dotSize: controlHeight / 4,
-      dotCurrentSize: controlHeightLG / 4,
-      navArrowColor: colorTextDisabled,
-      navContentMaxWidth: 'auto',
-      descriptionMaxWidth: 140,
-    };
-  },
+  prepareComponentToken,
 );
--- a/components/steps/style/inline.ts
+++ b/components/steps/style/inline.ts
@ -1,10 +1,10 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';

 const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
  const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token;
-  const containerPaddingTop = token.paddingXS + token.lineWidth;
+  const containerPaddingTop = token.calc(token.paddingXS).add(token.lineWidth).equal();
  const titleStyle = {
    [`${componentCls}-item-container ${componentCls}-item-content ${componentCls}-item-title`]: {
      color: inlineTitleColor,
@ -20,8 +20,8 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        flex: 'none',

        '&-container': {
-          padding: `${containerPaddingTop}px ${token.paddingXXS}px 0`,
-          margin: `0 ${token.marginXXS / 2}px`,
+          padding: `${unit(containerPaddingTop)} ${unit(token.paddingXXS)} 0`,
+          margin: `0 ${unit(token.calc(token.marginXXS).div(2).equal())}`,
          borderRadius: token.borderRadiusSM,
          cursor: 'pointer',
          transition: `background-color ${token.motionDurationMid}`,
@ -36,25 +36,25 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        '&-icon': {
          width: inlineDotSize,
          height: inlineDotSize,
-          marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
+          marginInlineStart: `calc(50% - ${unit(token.calc(inlineDotSize).div(2).equal())})`,
          [`> ${componentCls}-icon`]: {
            top: 0,
          },
          [`${componentCls}-icon-dot`]: {
-            borderRadius: token.fontSizeSM / 4,
+            borderRadius: token.calc(token.fontSizeSM).div(4).equal(),
          },
        },

        '&-content': {
          width: 'auto',
-          marginTop: token.marginXS - token.lineWidth,
+          marginTop: token.calc(token.marginXS).sub(token.lineWidth).equal(),
        },
        '&-title': {
          color: inlineTitleColor,
          fontSize: token.fontSizeSM,
          lineHeight: token.lineHeightSM,
          fontWeight: 'normal',
-          marginBottom: token.marginXXS / 2,
+          marginBottom: token.calc(token.marginXXS).div(2).equal(),
        },
        '&-description': {
          display: 'none',
@ -62,7 +62,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {

        '&-tail': {
          marginInlineStart: 0,
-          top: containerPaddingTop + inlineDotSize / 2,
+          top: token.calc(inlineDotSize).div(2).add(containerPaddingTop).equal(),
          transform: `translateY(-50%)`,
          '&:after': {
            width: '100%',
@ -85,7 +85,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        '&-wait': {
          [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
            backgroundColor: token.colorBorderBg,
-            border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
+            border: `${unit(token.lineWidth)} ${token.lineType} ${inlineTailColor}`,
          },
          ...titleStyle,
        },
@ -95,7 +95,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
          },
          [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
            backgroundColor: inlineTailColor,
-            border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
+            border: `${unit(token.lineWidth)} ${token.lineType} ${inlineTailColor}`,
          },
          ...titleStyle,
        },
@ -104,7 +104,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
          [`${componentCls}-item-icon`]: {
            width: inlineDotSize,
            height: inlineDotSize,
-            marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
+            marginInlineStart: `calc(50% - ${unit(token.calc(inlineDotSize).div(2).equal())})`,
            top: 0,
          },
          ...titleStyle,
--- a/components/steps/style/label-placement.ts
+++ b/components/steps/style/label-placement.ts
@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';

@ -11,13 +11,13 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
        overflow: 'visible',

        '&-tail': {
-          marginInlineStart: iconSize / 2 + token.controlHeightLG,
-          padding: `${token.paddingXXS}px ${token.paddingLG}px`,
+          marginInlineStart: token.calc(iconSize).div(2).add(token.controlHeightLG).equal(),
+          padding: `${unit(token.paddingXXS)} ${unit(token.paddingLG)}`,
        },

        '&-content': {
          display: 'block',
-          width: (iconSize / 2 + token.controlHeightLG) * 2,
+          width: token.calc(iconSize).div(2).add(token.controlHeightLG).mul(2).equal(),
          marginTop: token.marginSM,
          textAlign: 'center',
        },
@ -46,7 +46,12 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
      [`&${componentCls}-small:not(${componentCls}-dot)`]: {
        [`${componentCls}-item`]: {
          '&-icon': {
-            marginInlineStart: token.controlHeightLG + (iconSize - iconSizeSM) / 2,
+            marginInlineStart: token
+              .calc(iconSize)
+              .sub(iconSizeSM)
+              .div(2)
+              .add(token.controlHeightLG)
+              .equal(),
          },
        },
      },
--- a/components/steps/style/nav.ts
+++ b/components/steps/style/nav.ts
@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import { textEllipsis } from '../../style';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
@ -19,7 +19,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
      [`&${componentCls}-small`]: {
        [`${componentCls}-item`]: {
          '&-container': {
-            marginInlineStart: -token.marginSM,
+            marginInlineStart: token.calc(token.marginSM).mul(-1).equal(),
          },
        },
      },
@ -31,7 +31,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        '&-container': {
          display: 'inline-block',
          height: '100%',
-          marginInlineStart: -token.margin,
+          marginInlineStart: token.calc(token.margin).mul(-1).equal(),
          paddingBottom: token.paddingSM,
          textAlign: 'start',
          transition: `opacity ${motionDurationSlow}`,
@ -71,15 +71,15 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {

        '&::after': {
          position: 'absolute',
-          top: `calc(50% - ${token.paddingSM / 2}px)`,
+          top: `calc(50% - ${unit(token.calc(token.paddingSM).div(2).equal())})`,
          insetInlineStart: '100%',
          display: 'inline-block',
          width: token.fontSizeIcon,
          height: token.fontSizeIcon,
-          borderTop: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`,
+          borderTop: `${unit(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
          borderBottom: 'none',
          borderInlineStart: 'none',
-          borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`,
+          borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
          transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
          content: '""',
        },
@ -116,16 +116,16 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
          insetInlineEnd: 0,
          insetInlineStart: 'unset',
          display: 'block',
-          width: token.lineWidth * 3,
-          height: `calc(100% - ${token.marginLG}px)`,
+          width: token.calc(token.lineWidth).mul(3).equal(),
+          height: `calc(100% - ${unit(token.marginLG)})`,
        },

        '&::after': {
          position: 'relative',
          insetInlineStart: '50%',
          display: 'block',
-          width: token.controlHeight * 0.25,
-          height: token.controlHeight * 0.25,
+          width: token.calc(token.controlHeight).mul(0.25).equal(),
+          height: token.calc(token.controlHeight).mul(0.25).equal(),
          marginBottom: token.marginXS,
          textAlign: 'center',
          transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
--- a/components/steps/style/progress-dot.ts
+++ b/components/steps/style/progress-dot.ts
@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';

@ -20,25 +20,30 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
        },

        '&-tail': {
-          top: Math.floor((token.dotSize - token.lineWidth * 3) / 2),
+          // Math.floor((token.size - token.lineWidth * 3) / 2)
+          top: token
+            .calc(token.dotSize)
+            .sub(token.calc(token.lineWidth).mul(3).equal())
+            .div(2)
+            .equal(),
          width: '100%',
          marginTop: 0,
          marginBottom: 0,
-          marginInline: `${descriptionMaxWidth / 2}px 0`,
+          marginInline: `${unit(token.calc(descriptionMaxWidth).div(2).equal())} 0`,
          padding: 0,

          '&::after': {
-            width: `calc(100% - ${token.marginSM * 2}px)`,
-            height: token.lineWidth * 3,
+            width: `calc(100% - ${unit(token.calc(token.marginSM).mul(2).equal())})`,
+            height: token.calc(token.lineWidth).mul(3).equal(),
            marginInlineStart: token.marginSM,
          },
        },
        '&-icon': {
          width: dotSize,
          height: dotSize,
-          marginInlineStart: (token.descriptionMaxWidth - dotSize) / 2,
+          marginInlineStart: token.calc(token.descriptionMaxWidth).sub(dotSize).div(2).equal(),
          paddingInlineEnd: 0,
-          lineHeight: `${dotSize}px`,
+          lineHeight: `${unit(dotSize)}`,
          background: 'transparent',
          border: 0,

@ -53,9 +58,13 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
            /* expand hover area */
            '&::after': {
              position: 'absolute',
-              top: -token.marginSM,
-              insetInlineStart: (dotSize - token.controlHeightLG * 1.5) / 2,
-              width: token.controlHeightLG * 1.5,
+              top: token.calc(token.marginSM).mul(-1).equal(),
+              insetInlineStart: token
+                .calc(dotSize)
+                .sub(token.calc(token.controlHeightLG).mul(1.5).equal())
+                .div(2)
+                .equal(),
+              width: token.calc(token.controlHeightLG).mul(1.5).equal(),
              height: token.controlHeight,
              background: 'transparent',
              content: '""',
@ -68,12 +77,16 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
        },
        [`&-process ${componentCls}-item-icon`]: {
          position: 'relative',
-          top: (dotSize - dotCurrentSize) / 2,
+          top: token.calc(dotSize).sub(dotCurrentSize).div(2).equal(),
          width: dotCurrentSize,
          height: dotCurrentSize,
-          lineHeight: `${dotCurrentSize}px`,
+          lineHeight: `${unit(dotCurrentSize)}`,
          background: 'none',
-          marginInlineStart: (token.descriptionMaxWidth - dotCurrentSize) / 2,
+          marginInlineStart: token
+            .calc(token.descriptionMaxWidth)
+            .sub(dotCurrentSize)
+            .div(2)
+            .equal(),
        },
        [`&-process ${componentCls}-icon`]: {
          [`&:first-child ${componentCls}-icon-dot`]: {
@ -84,39 +97,41 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
    },
    [`&${componentCls}-vertical${componentCls}-dot`]: {
      [`${componentCls}-item-icon`]: {
-        marginTop: (token.controlHeight - dotSize) / 2,
+        marginTop: token.calc(token.controlHeight).sub(dotSize).div(2).equal(),
        marginInlineStart: 0,
        background: 'none',
      },
      [`${componentCls}-item-process ${componentCls}-item-icon`]: {
-        marginTop: (token.controlHeight - dotCurrentSize) / 2,
+        marginTop: token.calc(token.controlHeight).sub(dotCurrentSize).div(2).equal(),
        top: 0,
-        insetInlineStart: (dotSize - dotCurrentSize) / 2,
+        insetInlineStart: token.calc(dotSize).sub(dotCurrentSize).div(2).equal(),
        marginInlineStart: 0,
      },

      // https://github.com/ant-design/ant-design/issues/18354
      [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-        top: (token.controlHeight - dotSize) / 2,
+        top: token.calc(token.controlHeight).sub(dotSize).div(2).equal(),
        insetInlineStart: 0,
        margin: 0,
-        padding: `${dotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
+        padding: `${unit(token.calc(dotSize).add(token.paddingXS).equal())} 0 ${unit(
+          token.paddingXS,
+        )}`,

        '&::after': {
-          marginInlineStart: (dotSize - token.lineWidth) / 2,
+          marginInlineStart: token.calc(dotSize).sub(token.lineWidth).div(2).equal(),
        },
      },

      [`&${componentCls}-small`]: {
        [`${componentCls}-item-icon`]: {
-          marginTop: (token.controlHeightSM - dotSize) / 2,
+          marginTop: token.calc(token.controlHeightSM).sub(dotSize).div(2).equal(),
        },
        [`${componentCls}-item-process ${componentCls}-item-icon`]: {
-          marginTop: (token.controlHeightSM - dotCurrentSize) / 2,
+          marginTop: token.calc(token.controlHeightSM).sub(dotCurrentSize).div(2).equal(),
        },

        [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-          top: (token.controlHeightSM - dotSize) / 2,
+          top: token.calc(token.controlHeightSM).sub(dotSize).div(2).equal(),
        },
      },

--- a/components/steps/style/progress.ts
+++ b/components/steps/style/progress.ts
@ -20,7 +20,12 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        paddingInlineStart: token.paddingXXS,
        [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
          top: token.marginXXS,
-          insetInlineStart: token.iconSize / 2 - token.lineWidth + token.paddingXXS,
+          insetInlineStart: token
+            .calc(token.iconSize)
+            .div(2)
+            .sub(token.lineWidth)
+            .add(token.paddingXXS)
+            .equal(),
        },
      },

@ -33,12 +38,17 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {

      [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
        {
-          insetInlineStart: token.iconSizeSM / 2 - token.lineWidth + token.paddingXXS,
+          insetInlineStart: token
+            .calc(token.iconSizeSM)
+            .div(2)
+            .sub(token.lineWidth)
+            .add(token.paddingXXS)
+            .equal(),
        },

      [`&${componentCls}-label-vertical`]: {
        [`${componentCls}-item ${componentCls}-item-tail`]: {
-          top: token.margin - 2 * token.lineWidth,
+          top: token.calc(token.margin).sub(token.calc(token.lineWidth).mul(2).equal()).equal(),
        },
      },

@ -47,8 +57,26 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {

        [`${antCls}-progress`]: {
          position: 'absolute',
-          insetBlockStart: (token.iconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
-          insetInlineStart: (token.iconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
+          insetBlockStart: token
+            .calc(
+              token
+                .calc(token.iconSize)
+                .sub(token.stepsProgressSize)
+                .sub(token.calc(token.lineWidth).mul(2).equal())
+                .equal(),
+            )
+            .div(2)
+            .equal(),
+          insetInlineStart: token
+            .calc(
+              token
+                .calc(token.iconSize)
+                .sub(token.stepsProgressSize)
+                .sub(token.calc(token.lineWidth).mul(2).equal())
+                .equal(),
+            )
+            .div(2)
+            .equal(),
        },
      },
    },
--- a/components/steps/style/small.ts
+++ b/components/steps/style/small.ts
@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';

@ -27,19 +27,19 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        // margin: stepsSmallIconMargin,
        marginTop: 0,
        marginBottom: 0,
-        marginInline: `0 ${token.marginXS}px`,
+        marginInline: `0 ${unit(token.marginXS)}`,
        fontSize: fontSizeSM,
-        lineHeight: `${iconSizeSM}px`,
+        lineHeight: `${unit(iconSizeSM)}`,
        textAlign: 'center',
        borderRadius: iconSizeSM,
      },
      [`${componentCls}-item-title`]: {
        paddingInlineEnd: token.paddingSM,
        fontSize,
-        lineHeight: `${iconSizeSM}px`,
+        lineHeight: `${unit(iconSizeSM)}`,

        '&::after': {
-          top: iconSizeSM / 2,
+          top: token.calc(iconSizeSM).div(2).equal(),
        },
      },
      [`${componentCls}-item-description`]: {
@ -47,7 +47,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        fontSize,
      },
      [`${componentCls}-item-tail`]: {
-        top: iconSizeSM / 2 - token.paddingXXS,
+        top: token.calc(iconSizeSM).div(2).sub(token.paddingXXS).equal(),
      },
      [`${componentCls}-item-custom ${componentCls}-item-icon`]: {
        width: 'inherit',
@ -58,7 +58,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        borderRadius: 0,
        [`> ${componentCls}-icon`]: {
          fontSize: iconSizeSM,
-          lineHeight: `${iconSizeSM}px`,
+          lineHeight: `${unit(iconSizeSM)}`,
          transform: 'none',
        },
      },
--- a/components/steps/style/vertical.ts
+++ b/components/steps/style/vertical.ts
@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';

@ -22,11 +22,11 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        },
        [`${componentCls}-item-content`]: {
          display: 'block',
-          minHeight: token.controlHeight * 1.5,
+          minHeight: token.calc(token.controlHeight).mul(1.5).equal(),
          overflow: 'hidden',
        },
        [`${componentCls}-item-title`]: {
-          lineHeight: `${iconSize}px`,
+          lineHeight: `${unit(iconSize)}`,
        },
        [`${componentCls}-item-description`]: {
          paddingBottom: token.paddingSM,
@ -35,10 +35,12 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
      [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
        position: 'absolute',
        top: 0,
-        insetInlineStart: iconSize / 2 - token.lineWidth,
+        insetInlineStart: token.calc(iconSize).div(2).sub(token.lineWidth).equal(),
        width: token.lineWidth,
        height: '100%',
-        padding: `${iconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
+        padding: `${unit(token.calc(token.marginXXS).mul(1.5).add(iconSize).equal())} 0 ${unit(
+          token.calc(token.marginXXS).mul(1.5).equal(),
+        )}`,

        '&::after': {
          width: token.lineWidth,
@ -59,11 +61,13 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
        [`${componentCls}-item-tail`]: {
          position: 'absolute',
          top: 0,
-          insetInlineStart: iconSizeSM / 2 - token.lineWidth,
-          padding: `${iconSizeSM + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
+          insetInlineStart: token.calc(iconSizeSM).div(2).sub(token.lineWidth).equal(),
+          padding: `${unit(token.calc(token.marginXXS).mul(1.5).add(iconSizeSM).equal())} 0 ${unit(
+            token.calc(token.marginXXS).mul(1.5).equal(),
+          )}`,
        },
        [`${componentCls}-item-title`]: {
-          lineHeight: `${iconSizeSM}px`,
+          lineHeight: `${unit(iconSizeSM)}`,
        },
      },
    },
--- a/scripts/check-cssinjs.tsx
+++ b/scripts/check-cssinjs.tsx
@ -29,7 +29,7 @@ console.error = (msg: any) => {
 async function checkCSSVar() {
  await generateCssinjs({
    key: 'check',
-    ignore: ['grid', 'pagination', 'steps', 'calendar'],
+    ignore: ['grid', 'pagination', 'calendar'],
    render(Component: any) {
      ReactDOMServer.renderToString(
        <StyleProvider linters={[NaNLinter]}>