refactor: Steps full token (#35841)

* refactor: steps full token * refactor: progress dot * refactor: no hard code * refactor: token optimization
3 years ago · a434ec7614
parent 7b73b62c57
commit a434ec7614
10 changed files with 210 additions and 399 deletions
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@ -31,6 +31,7 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style'
 import type { ComponentToken as SliderComponentToken } from '../../slider/style';
 import type { ComponentToken as SpaceComponentToken } from '../../space/style';
 import type { ComponentToken as SpinComponentToken } from '../../spin/style';
+import type { ComponentToken as StepsComponentToken } from '../../steps/style';
 import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
@ -113,7 +114,7 @@ export interface OverrideToken {
  Tabs?: {};
  Calendar?: CalendarComponentToken;
  Card?: {};
-  Steps?: {};
+  Steps?: StepsComponentToken;
  Menu?: MenuComponentToken;
  Modal?: ModalComponentToken;
  Message?: MessageComponentToken;
--- a/components/steps/style/custom-icon.ts
+++ b/components/steps/style/custom-icon.ts
@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  const {
@ -16,10 +16,9 @@ const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      [`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
        height: 'auto',
        background: 'none',
-        border: 0, // FIXME: hardcode in v4
+        border: 0,
        [`> ${componentCls}-icon`]: {
          top: stepsIconCustomTop,
-          insetInlineStart: 0.5, // FIXME: hardcode in v4
          width: stepsIconCustomSize,
          height: stepsIconCustomSize,
          fontSize: stepsIconCustomFontSize,
--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@ -1,46 +1,35 @@
 // deps-lint-skip-all
-// import '../../style/index.less';
-// import './index.less';
-
-// style dependencies
-// deps-lint-skip: grid
-// import '../../progress/style';
-import { TinyColor } from '@ctrl/tinycolor';
 import type { CSSObject } from '@ant-design/cssinjs';
-import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
-import type { GenerateStyle, FullToken } from '../../_util/theme';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 import genStepsCustomIconStyle from './custom-icon';
-import genStepsSmallStyle from './small';
-import genStepsVerticalStyle from './vertical';
 import genStepsLabelPlacementStyle from './label-placement';
-import genStepsProgressDotStyle from './progress-dot';
-import genStepsProgressStyle from './progress';
 import genStepsNavStyle from './nav';
+import genStepsProgressStyle from './progress';
+import genStepsProgressDotStyle from './progress-dot';
 import genStepsRTLStyle from './rtl';
+import genStepsSmallStyle from './small';
+import genStepsVerticalStyle from './vertical';
+
+export interface ComponentToken {
+  descriptionWidth: number;
+}

 export interface StepsToken extends FullToken<'Steps'> {
  // Steps variable default.less
  processTailColor: string;
  stepsNavArrowColor: string;
-  stepsBackground: string;
  stepsIconSize: number;
  stepsIconCustomSize: number;
  stepsIconCustomTop: number;
  stepsIconCustomFontSize: number;
  stepsIconTop: number;
  stepsIconFontSize: number;
-  stepsIconMargin: string;
  stepsTitleLineHeight: number;
  stepsSmallIconSize: number;
-  stepsSmallIconMargin: string;
  stepsDotSize: number;
-  stepsDotTop: number;
  stepsCurrentDotSize: number;
-  stepsDescriptionMaxWidth: number;
  stepsNavContentMaxWidth: string;
-  stepsVerticalIconWidth: number;
-  stepsVerticalTailWidth: number;
-  stepsVerticalTailWidthSm: number;
  // Steps component less variable
  processIconColor: string;
  processTitleColor: string;
@ -59,6 +48,7 @@ export interface StepsToken extends FullToken<'Steps'> {
  errorDescriptionColor: string;
  errorTailColor: string;
  stepsNavActiveColor: string;
+  stepsProgressSize: number;
 }

 enum StepItemStatusEnum {
@ -74,10 +64,9 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken):
  const titleColorKey: keyof StepsToken = `${status}TitleColor`;
  const descriptionColorKey: keyof StepsToken = `${status}DescriptionColor`;
  const tailColorKey: keyof StepsToken = `${status}TailColor`;
-  const stepsBackground = '#fff'; // FIXME: hardcode in v4
  return {
    [`${prefix}-${status} ${prefix}-icon`]: {
-      backgroundColor: stepsBackground,
+      backgroundColor: token.colorBgComponent,
      borderColor: token[iconColorKey],
      [`> ${token.componentCls}-icon`]: {
        color: token[iconColorKey],
@ -131,17 +120,15 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
    [`${stepsItemCls}-icon`]: {
      width: token.stepsIconSize,
      height: token.stepsIconSize,
-      // margin: token.stepsIconMargin,
-      marginTop: 0, // FIXME: hardcode in v4
-      marginBottom: 0, // FIXME: hardcode in v4
-      marginInline: '0 8px', // FIXME: hardcode in v4
+      marginTop: 0,
+      marginBottom: 0,
+      marginInlineStart: 0,
+      marginInlineEnd: token.marginXS,
      fontSize: token.stepsIconFontSize,
      fontFamily: token.fontFamily,
      lineHeight: `${token.stepsIconSize}px`,
      textAlign: 'center',
-      border: `${token.controlLineWidth}px ${token.controlLineType} ${new TinyColor('#000')
-        .setAlpha(0.25)
-        .toRgbString()}`, // FIXME: hardcode in v4
+      border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorTextDisabled}`,
      borderRadius: token.stepsIconSize,
      transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
      [`${componentCls}-icon`]: {
@ -153,17 +140,16 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
    },
    [`${stepsItemCls}-tail`]: {
      position: 'absolute',
-      top: 12, // FIXME: hardcode in v4
-      insetInlineStart: 0, // FIXME: hardcode in v4
-      width: '100%', // FIXME: hardcode in v4
-      padding: '0 10px', // FIXME: hardcode in v4
+      top: token.marginSM,
+      insetInlineStart: 0,
+      width: '100%',

      '&::after': {
        display: 'inline-block',
-        width: '100%', // FIXME: hardcode in v4
-        height: 1, // FIXME: hardcode in v4
+        width: '100%',
+        height: token.lineWidth,
        background: token.colorSplit,
-        borderRadius: 1, // FIXME: hardcode in v4
+        borderRadius: token.lineWidth,
        transition: `background ${motionDurationSlow}`,
        content: '""',
      },
@ -171,7 +157,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
    [`${stepsItemCls}-title`]: {
      position: 'relative',
      display: 'inline-block',
-      paddingInlineEnd: 16, // FIXME: hardcode in v4
+      paddingInlineEnd: token.padding,
      color: token.colorText,
      fontSize: token.fontSizeLG,
      lineHeight: `${token.stepsTitleLineHeight}px`,
@ -179,17 +165,17 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      '&::after': {
        position: 'absolute',
        top: token.stepsTitleLineHeight / 2,
-        insetInlineStart: '100%', // FIXME: hardcode in v4
+        insetInlineStart: '100%',
        display: 'block',
-        width: 9999, // FIXME: hardcode in v4
-        height: 1, // FIXME: hardcode in v4
+        width: 9999,
+        height: token.lineWidth,
        background: token.processTailColor,
        content: '""',
      },
    },
    [`${stepsItemCls}-subtitle`]: {
      display: 'inline',
-      marginInlineStart: 8, // FIXME: hardcode in v4
+      marginInlineStart: token.marginXS,
      color: token.colorTextSecondary,
      fontWeight: 'normal',
      fontSize: token.fontSizeBase,
@ -208,7 +194,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      },
    },
    [`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
-      fontWeight: 500, // FIXME: hardcode in v4
+      fontWeight: token.fontWeightStrong,
    },
    ...genStepsItemStatusStyle(StepItemStatusEnum.finish, token),
    ...genStepsItemStatusStyle(StepItemStatusEnum.error, token),
@ -262,20 +248,20 @@ const genStepsClickableStyle: GenerateStyle<StepsToken, CSSObject> = token => {
    },
    [`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
      [`${componentCls}-item`]: {
-        paddingInlineStart: 16, // FIXME: hardcode in v4
+        paddingInlineStart: token.padding,
        whiteSpace: 'nowrap',

        '&:first-child': {
-          paddingInlineStart: 0, // FIXME: hardcode in v4
+          paddingInlineStart: 0,
        },
        [`&:last-child ${componentCls}-item-title`]: {
-          paddingInlineEnd: 0, // FIXME: hardcode in v4
+          paddingInlineEnd: 0,
        },
        '&-tail': {
          display: 'none',
        },
        '&-description': {
-          maxWidth: token.stepsDescriptionMaxWidth,
+          maxWidth: token.descriptionWidth,
          whiteSpace: 'normal',
        },
      },
@ -291,7 +277,7 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      ...resetComponent(token),
      display: 'flex',
      width: '100%',
-      fontSize: 0, // FIXME: hardcode in v4
+      fontSize: 0,
      textAlign: 'initial',
      // single Item
      ...genStepsItemStyle(token),
@ -318,53 +304,52 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Steps', token => {
-  const stepsIconSize = 32; // FIXME: hardcode in v4
-  const processTailColor = token.colorSplit;
-  const processIconColor = token.colorPrimary;
+export default genComponentStyleHook(
+  'Steps',
+  token => {
+    const stepsIconSize = token.controlHeight;
+    const processTailColor = token.colorSplit;
+    const processIconColor = token.colorPrimary;

-  const stepsToken = mergeToken<StepsToken>(token, {
-    // Steps variable default.less
-    processTailColor,
-    stepsNavArrowColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), //  fade(@black, 25%),
-    stepsBackground: token.colorBgComponent,
-    stepsIconSize,
-    stepsIconCustomSize: stepsIconSize,
-    stepsIconCustomTop: 0, // FIXME: hardcode in v4
-    stepsIconCustomFontSize: 24, // FIXME: hardcode in v4
-    stepsIconTop: -0.5, // FIXME: hardcode in v4
-    stepsIconFontSize: token.fontSizeLG,
-    stepsIconMargin: '0 8px 0 0', // FIXME: hardcode in v4
-    stepsTitleLineHeight: 32, // FIXME: hardcode in v4
-    stepsSmallIconSize: 24, // FIXME: hardcode in v4
-    stepsSmallIconMargin: '0 8px 0 0', // FIXME: hardcode in v4
-    stepsDotSize: 8, // FIXME: hardcode in v4
-    stepsDotTop: 2, // FIXME: hardcode in v4
-    stepsCurrentDotSize: 10, // FIXME: hardcode in v4
-    stepsDescriptionMaxWidth: 140, // FIXME: hardcode in v4
-    stepsNavContentMaxWidth: 'auto',
-    stepsVerticalIconWidth: 16, // FIXME: hardcode in v4
-    stepsVerticalTailWidth: 16, // FIXME: hardcode in v4
-    stepsVerticalTailWidthSm: 12, // FIXME: hardcode in v4
-    // Steps component less variable
-    processIconColor,
-    processTitleColor: new TinyColor('#000').setAlpha(0.85).toRgbString(), // @heading-color: fade(@black, 85%) FIXME: hardcode in v4
-    processDescriptionColor: token.colorText,
-    processIconTextColor: '#fff', // FIXME: hardcode in v4
-    waitIconColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // @disabled-color FIXME: hardcode in v4
-    waitTitleColor: token.colorTextSecondary,
-    waitDescriptionColor: token.colorTextSecondary,
-    waitTailColor: processTailColor,
-    finishIconColor: processIconColor,
-    finishTitleColor: token.colorText,
-    finishDescriptionColor: token.colorTextSecondary,
-    finishTailColor: token.colorPrimary,
-    errorIconColor: token.colorError,
-    errorTitleColor: token.colorError,
-    errorDescriptionColor: token.colorError,
-    errorTailColor: processTailColor,
-    stepsNavActiveColor: token.colorPrimary,
-  });
+    const stepsToken = mergeToken<StepsToken>(token, {
+      // Steps variable default.less
+      processTailColor,
+      stepsNavArrowColor: token.colorTextDisabled,
+      stepsIconSize,
+      stepsIconCustomSize: stepsIconSize,
+      stepsIconCustomTop: 0,
+      stepsIconCustomFontSize: token.fontSizeHeading3,
+      stepsIconTop: -0.5, // magic for ui experience
+      stepsIconFontSize: token.fontSizeLG,
+      stepsTitleLineHeight: token.controlHeight,
+      stepsSmallIconSize: token.fontSizeHeading3,
+      stepsDotSize: token.controlHeight / 4,
+      stepsCurrentDotSize: token.controlHeightLG / 4,
+      stepsNavContentMaxWidth: 'auto',
+      // Steps component less variable
+      processIconColor,
+      processTitleColor: token.colorText,
+      processDescriptionColor: token.colorText,
+      processIconTextColor: token.colorTextLightSolid,
+      waitIconColor: token.colorTextDisabled,
+      waitTitleColor: token.colorTextSecondary,
+      waitDescriptionColor: token.colorTextSecondary,
+      waitTailColor: processTailColor,
+      finishIconColor: processIconColor,
+      finishTitleColor: token.colorText,
+      finishDescriptionColor: token.colorTextSecondary,
+      finishTailColor: token.colorPrimary,
+      errorIconColor: token.colorError,
+      errorTitleColor: token.colorError,
+      errorDescriptionColor: token.colorError,
+      errorTailColor: processTailColor,
+      stepsNavActiveColor: token.colorPrimary,
+      stepsProgressSize: token.controlHeightLG,
+    });

-  return [genStepsStyle(stepsToken)];
-});
+    return [genStepsStyle(stepsToken)];
+  },
+  {
+    descriptionWidth: 140,
+  },
+);
--- a/components/steps/style/label-placement.ts
+++ b/components/steps/style/label-placement.ts
@ -1,9 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token => {
-  const { componentCls, stepsIconSize, lineHeight } = token;
+  const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token;

  return {
    [`&${componentCls}-label-vertical`]: {
@ -11,25 +11,25 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token
        overflow: 'visible',

        '&-tail': {
-          marginInlineStart: 58, // FIXME: hardcode in v4
-          padding: '3.5px 24px', // FIXME: hardcode in v4
+          marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
+          padding: `${token.paddingXXS}px ${token.paddingLG}px`,
        },

        '&-content': {
          display: 'block',
-          width: (stepsIconSize / 2 + 42) * 2, // FIXME: hardcode in v4
-          marginTop: 8, // FIXME: hardcode in v4
+          width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
+          marginTop: token.marginSM,
          textAlign: 'center',
        },

        '&-icon': {
          display: 'inline-block',
-          marginInlineStart: 42, // FIXME: hardcode in v4
+          marginInlineStart: token.controlHeightLG,
        },

        '&-title': {
-          paddingInlineEnd: 0, // FIXME: hardcode in v4
-          paddingInlineStart: 0, // FIXME: hardcode in v4
+          paddingInlineEnd: 0,
+          paddingInlineStart: 0,

          '&::after': {
            display: 'none',
@ -38,15 +38,15 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token

        '&-subtitle': {
          display: 'block',
-          marginBottom: 4, // FIXME: hardcode in v4
-          marginInlineStart: 0, // FIXME: hardcode in v4
+          marginBottom: token.marginXXS,
+          marginInlineStart: 0,
          lineHeight,
        },
      },
      [`&${componentCls}-small:not(${componentCls}-dot)`]: {
        [`${componentCls}-item`]: {
          '&-icon': {
-            marginInlineStart: 46, // FIXME: hardcode in v4
+            marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2,
          },
        },
      },
--- a/components/steps/style/nav.ts
+++ b/components/steps/style/nav.ts
@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  const {
@ -13,12 +13,12 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {

  return {
    [`&${componentCls}-navigation`]: {
-      paddingTop: 12, // FIXME: hardcode in v4
+      paddingTop: token.paddingSM,

      [`&${componentCls}-small`]: {
        [`${componentCls}-item`]: {
          '&-container': {
-            marginInlineStart: -12, // FIXME: hardcode in v4
+            marginInlineStart: -token.marginSM,
          },
        },
      },
@ -29,9 +29,9 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {

        '&-container': {
          display: 'inline-block',
-          height: '100%', // FIXME: hardcode in v4
-          marginInlineStart: -16, // FIXME: hardcode in v4
-          paddingBottom: 12, // FIXME: hardcode in v4
+          height: '100%',
+          marginInlineStart: -token.margin,
+          paddingBottom: token.paddingSM,
          textAlign: 'start',
          transition: `opacity ${motionDurationSlow}`,

@ -40,8 +40,8 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
          },

          [`${componentCls}-item-title`]: {
-            maxWidth: '100%', // FIXME: hardcode in v4
-            paddingInlineEnd: 0, // FIXME: hardcode in v4
+            maxWidth: '100%',
+            paddingInlineEnd: 0,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
@ -57,7 +57,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
            cursor: 'pointer',

            '&:hover': {
-              opacity: 0.85, // FIXME: hardcode in v4
+              opacity: 0.85,
            },
          },
        },
@ -72,28 +72,26 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {

        '&::after': {
          position: 'absolute',
-          top: '50%',
+          top: `calc(50% - ${token.paddingSM / 2}px)`,
          insetInlineStart: '100%',
          display: 'inline-block',
-          width: 12, // FIXME: hardcode in v4
-          height: 12, // FIXME: hardcode in v4
-          marginTop: -14, // FIXME: hardcode in v4
-          marginInlineStart: -2, // FIXME: hardcode in v4
-          borderTop: `1px solid ${stepsNavArrowColor}`,
+          width: token.fontSizeIcon,
+          height: token.fontSizeIcon,
+          borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
          borderBottom: 'none',
          borderInlineStart: 'none',
-          borderInlineEnd: `1px solid ${stepsNavArrowColor}`,
-          transform: 'rotate(45deg)',
+          borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
+          transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
          content: '""',
        },

        '&::before': {
          position: 'absolute',
-          bottom: 0, // FIXME: hardcode in v4
+          bottom: 0,
          insetInlineStart: '50%',
          display: 'inline-block',
-          width: 0, // FIXME: hardcode in v4
-          height: 2, // FIXME: hardcode in v4
+          width: 0,
+          height: token.lineWidthBold,
          backgroundColor: stepsNavActiveColor,
          transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
          transitionTimingFunction: 'ease-out',
@ -102,8 +100,8 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      },

      [`${componentCls}-item${componentCls}-item-active::before`]: {
-        insetInlineStart: 0, // FIXME: hardcode in v4
-        width: '100%', // FIXME: hardcode in v4
+        insetInlineStart: 0,
+        width: '100%',
      },
    },

@ -115,24 +113,23 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
          display: 'none',
        },
        [`&${componentCls}-item-active::before`]: {
-          top: 0, // FIXME: hardcode in v4
-          insetInlineEnd: 0, // FIXME: hardcode in v4
+          top: 0,
+          insetInlineEnd: 0,
          insetInlineStart: 'unset',
          display: 'block',
-          width: 3, // FIXME: hardcode in v4
-          height: 'calc(100% - 24px)',
+          width: token.lineWidth * 3,
+          height: `calc(100% - ${token.marginLG}px)`,
        },

        '&::after': {
          position: 'relative',
-          top: -2, // FIXME: hardcode in v4
          insetInlineStart: '50%',
          display: 'block',
-          width: 8, // FIXME: hardcode in v4
-          height: 8, // FIXME: hardcode in v4
-          marginBottom: 8, // FIXME: hardcode in v4
+          width: token.controlHeight * 0.25,
+          height: token.controlHeight * 0.25,
+          marginBottom: token.marginXS,
          textAlign: 'center',
-          transform: 'rotate(135deg)',
+          transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
        },
        [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
          visibility: 'hidden',
--- a/components/steps/style/progress-dot.ts
+++ b/components/steps/style/progress-dot.ts
@ -1,13 +1,11 @@
-import { TinyColor } from '@ctrl/tinycolor';
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  const {
    componentCls,
-    stepsDotTop,
-    stepsDescriptionMaxWidth,
+    descriptionWidth,
    lineHeight,
    stepsCurrentDotSize,
    stepsDotSize,
@ -22,107 +20,112 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token =>
        },

        '&-tail': {
-          top: stepsDotTop,
-          width: '100%', // FIXME: hardcode in v4
-          // margin: `0 0 0 ${stepsDescriptionMaxWidth / 2}px`, // FIXME: hardcode in v4
-          marginTop: 0, // FIXME: hardcode in v4
-          marginBottom: 0, // FIXME: hardcode in v4
-          marginInline: `${stepsDescriptionMaxWidth / 2}px 0`, // FIXME: hardcode in v4
-          padding: 0, // FIXME: hardcode in v4
+          top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2),
+          width: '100%',
+          marginTop: 0,
+          marginBottom: 0,
+          marginInline: `${descriptionWidth / 2}px 0`,
+          padding: 0,

          '&::after': {
-            width: 'calc(100% - 20px)', // FIXME: hardcode in v4
-            height: 3, // FIXME: hardcode in v4
-            marginInlineStart: 12, // FIXME: hardcode in v4
+            width: `calc(100% - ${token.marginSM * 2}px)`,
+            height: token.lineWidth * 3,
+            marginInlineStart: token.marginSM,
          },
        },
-        [`&:first-child ${componentCls}-icon-dot`]: {
-          insetInlineStart: 2, // FIXME: hardcode in v4
-        },
        '&-icon': {
          width: stepsDotSize,
          height: stepsDotSize,
-          marginInlineStart: 67, // FIXME: hardcode in v4
-          paddingInlineEnd: 0, // FIXME: hardcode in v4
+          marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
+          paddingInlineEnd: 0,
          lineHeight: `${stepsDotSize}px`,
          background: 'transparent',
-          border: 0, // FIXME: hardcode in v4
+          border: 0,

          [`${componentCls}-icon-dot`]: {
            position: 'relative',
            float: 'left',
-            width: '100%', // FIXME: hardcode in v4
-            height: '100%', // FIXME: hardcode in v4
-            borderRadius: 100, // FIXME: hardcode in v4
+            width: '100%',
+            height: '100%',
+            borderRadius: 100, // very large number
            transition: `all ${motionDurationSlow}`,

            /* expand hover area */
            '&::after': {
              position: 'absolute',
-              top: -12, // FIXME: hardcode in v4
-              insetInlineStart: -26, // FIXME: hardcode in v4
-              width: 60, // FIXME: hardcode in v4
-              height: 32, // FIXME: hardcode in v4
-              background: new TinyColor('#000').setAlpha(0.001).toRgbString(), // FIXME: hardcode in v4
+              top: -token.marginSM,
+              insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
+              width: token.controlHeightLG * 1.5,
+              height: token.controlHeight,
+              background: 'transparent',
              content: '""',
            },
          },
        },

        '&-content': {
-          width: stepsDescriptionMaxWidth,
+          width: descriptionWidth,
        },
        [`&-process ${componentCls}-item-icon`]: {
          position: 'relative',
-          top: -1, // FIXME: hardcode in v4
+          top: (stepsDotSize - stepsCurrentDotSize) / 2,
          width: stepsCurrentDotSize,
          height: stepsCurrentDotSize,
          lineHeight: `${stepsCurrentDotSize}px`,
          background: 'none',
+          marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2,
        },
        [`&-process ${componentCls}-icon`]: {
          [`&:first-child ${componentCls}-icon-dot`]: {
-            insetInlineStart: 0, // FIXME: hardcode in v4
+            insetInlineStart: 0,
          },
        },
      },
    },
    [`&${componentCls}-vertical${componentCls}-dot`]: {
      [`${componentCls}-item-icon`]: {
-        marginTop: 13, // FIXME: hardcode in v4
-        marginInlineStart: 0, // FIXME: hardcode in v4
+        marginTop: (token.controlHeight - stepsDotSize) / 2,
+        marginInlineStart: 0,
        background: 'none',
      },
+      [`${componentCls}-item-process ${componentCls}-item-icon`]: {
+        marginTop: (token.controlHeight - stepsCurrentDotSize) / 2,
+        top: 0,
+        insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2,
+        marginInlineStart: 0,
+      },

      // https://github.com/ant-design/ant-design/issues/18354
      [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-        top: 6.5, // FIXME: hardcode in v4
-        insetInlineStart: -9, // FIXME: hardcode in v4
-        margin: 0, // FIXME: hardcode in v4
-        padding: '22px 0 4px', // FIXME: hardcode in v4
+        top: (token.controlHeight - stepsDotSize) / 2,
+        insetInlineStart: 0,
+        margin: 0,
+        padding: `${stepsDotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
+
+        '&::after': {
+          marginInlineStart: (stepsDotSize - token.lineWidth) / 2,
+        },
      },

      [`&${componentCls}-small`]: {
        [`${componentCls}-item-icon`]: {
-          marginTop: 10, // FIXME: hardcode in v4
+          marginTop: (token.controlHeightSM - stepsDotSize) / 2,
+        },
+        [`${componentCls}-item-process ${componentCls}-item-icon`]: {
+          marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2,
        },

        [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-          top: 3.5, // FIXME: hardcode in v4
+          top: (token.controlHeightSM - stepsDotSize) / 2,
        },
      },

      [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
-        insetInlineStart: 0, // FIXME: hardcode in v4
+        insetInlineStart: 0,
      },
      [`${componentCls}-item-content`]: {
        width: 'inherit',
      },
-      [`${componentCls}-item-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon-dot`]:
-        {
-          top: -1, // FIXME: hardcode in v4
-          insetInlineStart: -1, // FIXME: hardcode in v4
-        },
    },
  };
 };
--- a/components/steps/style/progress.ts
+++ b/components/steps/style/progress.ts
@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  const { antCls, componentCls } = token;
@ -8,16 +8,16 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  return {
    [`&${componentCls}-with-progress`]: {
      [`${componentCls}-item`]: {
-        paddingTop: 4, // FIXME: hardcode in v4
+        paddingTop: token.paddingXXS,

        [`${componentCls}-item-tail`]: {
-          top: '4px !important', // FIXME: hardcode in v4
+          top: `${token.marginXXS}px !important`,
        },
      },

      [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
-        paddingBottom: 4, // FIXME: hardcode in v4
-        paddingInlineStart: 4, // FIXME: hardcode in v4
+        paddingBottom: token.paddingXXS,
+        paddingInlineStart: token.paddingXXS,
      },

      [`${componentCls}-item-icon`]: {
@ -25,10 +25,10 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {

        [`${antCls}-progress`]: {
          position: 'absolute',
-          top: -5, // FIXME: hardcode in v4
-          insetInlineEnd: -5, // FIXME: hardcode in v4
-          bottom: -5, // FIXME: hardcode in v4
-          insetInlineStart: -5, // FIXME: hardcode in v4
+          insetBlockStart:
+            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
+          insetInlineStart:
+            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
        },
      },
    },
--- a/components/steps/style/rtl.ts
+++ b/components/steps/style/rtl.ts
@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  const { componentCls } = token;
@ -10,99 +10,18 @@ const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      direction: 'rtl',

      [`${componentCls}-item`]: {
-        // '&-icon': {
-        // marginInlineEnd: 0,
-        // marginInlineStart: 8,
-        // },
-        // '&-tail': {
-        // insetInlineEnd: 0,
-        // insetInlineStart: 'auto',
-        // },
        '&-subtitle': {
-          // marginInline: '0 8px',
          float: 'left',
        },
-        // '&-title': {
-        // paddingInlineEnd: 0,
-        // paddingInlineStart: 16,
-
-        // '&::after': {
-        // insetInlineEnd: '100%',
-        // insetInlineStart: 'auto',
-        // },
-        // },
      },

-      // [`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
-      // [`${componentCls}-item`]: {
-      // paddingInlineEnd: 16,
-      // paddingInlineStart: 0,
-
-      // '&:first-child': {
-      // paddingInlineEnd: 0,
-      // },
-
-      // [`&:last-child ${componentCls}-item-title`]: {
-      // paddingInlineStart: 0,
-      // },
-      // },
-      // },
-
-      // custom-icon
-      // [`${componentCls}-item-custom`]: {
-      // [`${componentCls}-item-icon`]: {
-      // [`> ${componentCls}-icon`]: {
-      // insetInlineEnd: 0.5,
-      // insetInlineStart: 'auto',
-      // },
-      // },
-      // },
-
      // nav
      [`&${componentCls}-navigation`]: {
-        //   [`&${componentCls}-small`]: {
-        //     [`${componentCls}-item-container`]: {
-        // marginInlineEnd: -12,
-        // marginInlineStart: 0,
-        //   },
-        // },
-
-        // [`${componentCls}-item-container`]: {
-        // marginInlineEnd: -16,
-        // marginInlineStart: 0,
-        // textAlign: 'right',
-
-        // [`${componentCls}-item-title`]: {
-        // paddingInlineStart: 0,
-        // },
-        // },
-
        [`${componentCls}-item::after`]: {
-          // insetInlineEnd: '100%',
-          // insetInlineStart: 'auto',
-          // marginInlineEnd: -2,
-          // marginInlineStart: 0,
          transform: 'rotate(-45deg)',
        },
      },

-      // small
-      // [`&${componentCls}-small`]: {
-      // [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
-      // paddingInlineEnd: 12,
-      // paddingInlineStart: 0,
-
-      // '&:first-child': {
-      // paddingInlineEnd: 0,
-      //   },
-      // },
-
-      // [`${componentCls}-item-title`]: {
-      // paddingInlineEnd: 0,
-      // paddingInlineStart: 12,
-      //   },
-      // },
-
      // vertical
      [`&${componentCls}-vertical`]: {
        [`> ${componentCls}-item`]: {
@ -111,103 +30,17 @@ const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
          },
          [`${componentCls}-item-icon`]: {
            float: 'right',
-            // marginInlineEnd: 0,
-            // marginInlineStart: stepsVerticalIconWidth,
          },
-          // [`${componentCls}-item-container > ${componentCls}-item-tail`]: {
-          // insetInlineEnd: stepsVerticalTailWidth,
-          // insetInlineStart: 'auto',
-          // },
        },
-
-        // [`&${componentCls}-small`]: {
-        // [`${componentCls}-item-container > ${componentCls}-item-tail`]: {
-        // insetInlineEnd: stepsVerticalTailWidthSm,
-        // insetInlineStart: 'auto',
-        // },
-        // },
      },

-      // label
-      // [`&${componentCls}-label-vertical`]: {
-      // [`${componentCls}-item-title`]: {
-      // paddingInlineStart: 0,
-      // },
-      // },
-
      // progress-dot
      [`&${componentCls}-dot`]: {
-        // [`${componentCls}-item-tail, &${componentCls}-small ${componentCls}-item-tail`]: {
-        // margin: `0 ${stepsDescriptionMaxWidth / 2}px 0 0`,
-        // '&::after': {
-        // marginInlineEnd: 12,
-        // marginInlineStart: 0,
-        // },
-        // },
-
-        // [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
-        // insetInlineEnd: 2,
-        // insetInlineStart: 'auto',
-        // },
-
-        // [`&${componentCls}-small ${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
-        // insetInlineEnd: 2,
-        // insetInlineStart: 'auto',
-        // },
-
-        // [`${componentCls}-item-icon, &${componentCls}-small ${componentCls}-item-icon`]: {
-        // marginInlineEnd: 67,
-        // marginInlineStart: 0,
-        // },
-
        [`${componentCls}-item-icon ${componentCls}-icon-dot, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot`]:
          {
            float: 'right',
          },
-
-        /* expand hover area */
-        // [`${componentCls}-item-icon ${componentCls}-icon-dot::after, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot::after`]:
-        // {
-        // insetInlineEnd: -26,
-        // insetInlineStart: 'auto',
-        // },
      },
-
-      // [`&${componentCls}-vertical${componentCls}-dot`]: {
-      // [`${componentCls}-item-icon`]: {
-      // marginInlineEnd: 0,
-      // marginInlineStart: 16,
-      // },
-      // [`${componentCls}-item`]: {
-      // https://github.com/ant-design/ant-design/issues/18354
-      // [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-      // insetInlineEnd: -9,
-      // insetInlineStart: 'auto',
-      // },
-      // [`&:first-child ${componentCls}-icon-dot`]: {
-      // insetInlineEnd: 0,
-      // insetInlineStart: 'auto',
-      // },
-      // },
-      // [`${componentCls}-item-process`]: {
-      // [`${componentCls}-icon-dot`]: {
-      // insetInlineEnd: -2,
-      // insetInlineStart: 'auto',
-      // },
-      // },
-      // },
-
-      // RTL Steps with progress
-      // [`&${componentCls}-with-progress${componentCls}-horizontal${componentCls}-label-horizontal`]:
-      // {
-      // [`${componentCls}-item:first-child`]: {
-      // paddingInlineEnd: 4,
-      // paddingInlineStart: 0,
-      // },
-      // [`${componentCls}-item:first-child${componentCls}-item-active`]: {
-      // paddingInlineEnd: 4,
-      // },
-      // },
    },
  };
 };
--- a/components/steps/style/small.ts
+++ b/components/steps/style/small.ts
@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  const {
@ -15,9 +15,9 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
  return {
    [`&${componentCls}-small`]: {
      [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
-        paddingInlineStart: 12, // FIXME: hardcode in v4
+        paddingInlineStart: token.paddingSM,
        '&:first-child': {
-          paddingInlineStart: 0, // FIXME: hardcode in v4
+          paddingInlineStart: 0,
        },
      },

@ -25,21 +25,21 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
        width: stepsSmallIconSize,
        height: stepsSmallIconSize,
        // margin: stepsSmallIconMargin,
-        marginTop: 0, // FIXME: hardcode in v4
-        marginBottom: 0, // FIXME: hardcode in v4
-        marginInline: '0 8px', // FIXME: hardcode in v4
+        marginTop: 0,
+        marginBottom: 0,
+        marginInline: `0 ${token.marginXS}px`,
        fontSize: fontSizeSM,
        lineHeight: `${stepsSmallIconSize}px`,
        textAlign: 'center',
        borderRadius: stepsSmallIconSize,
      },
      [`${componentCls}-item-title`]: {
-        paddingInlineEnd: 12, // FIXME: hardcode in v4
+        paddingInlineEnd: token.paddingSM,
        fontSize: fontSizeBase,
        lineHeight: `${stepsSmallIconSize}px`,

        '&::after': {
-          top: stepsSmallIconSize / 2, // FIXME: hardcode in v4
+          top: stepsSmallIconSize / 2,
        },
      },
      [`${componentCls}-item-description`]: {
@ -47,15 +47,15 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
        fontSize: fontSizeBase,
      },
      [`${componentCls}-item-tail`]: {
-        top: 8, // FIXME: hardcode in v4
+        top: token.marginXS,
      },
      [`${componentCls}-item-custom ${componentCls}-item-icon`]: {
        width: 'inherit',
        height: 'inherit',
        lineHeight: 'inherit',
        background: 'none',
-        border: 0, // FIXME: hardcode in v4
-        borderRadius: 0, // FIXME: hardcode in v4
+        border: 0,
+        borderRadius: 0,
        [`> ${componentCls}-icon`]: {
          fontSize: stepsSmallIconSize,
          lineHeight: `${stepsSmallIconSize}px`,
--- a/components/steps/style/vertical.ts
+++ b/components/steps/style/vertical.ts
@ -1,16 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
 import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
-  const {
-    componentCls,
-    stepsSmallIconSize,
-    stepsVerticalIconWidth,
-    stepsVerticalTailWidth,
-    stepsVerticalTailWidthSm,
-    stepsIconSize,
-  } = token;
+  const { componentCls, stepsSmallIconSize, stepsIconSize } = token;

  return {
    [`&${componentCls}-vertical`]: {
@ -20,36 +13,36 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      [`> ${componentCls}-item`]: {
        display: 'block',
        flex: '1 0 auto',
-        paddingInlineStart: 0, // FIXME: hardcode in v4
+        paddingInlineStart: 0,
        overflow: 'visible',

        [`${componentCls}-item-icon`]: {
          float: 'left',
-          marginInlineEnd: stepsVerticalIconWidth,
+          marginInlineEnd: token.margin,
        },
        [`${componentCls}-item-content`]: {
          display: 'block',
-          minHeight: 48, // FIXME: hardcode in v4
+          minHeight: token.controlHeight * 1.5,
          overflow: 'hidden',
        },
        [`${componentCls}-item-title`]: {
          lineHeight: `${stepsIconSize}px`,
        },
        [`${componentCls}-item-description`]: {
-          paddingBottom: 12, // FIXME: hardcode in v4
+          paddingBottom: token.paddingSM,
        },
      },
      [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
        position: 'absolute',
-        top: 0, // FIXME: hardcode in v4
-        insetInlineStart: stepsVerticalTailWidth,
-        width: 1, // FIXME: hardcode in v4
-        height: '100%', // FIXME: hardcode in v4
-        padding: `${stepsIconSize + 6}px 0 6px`, // FIXME: hardcode in v4
+        top: 0,
+        insetInlineStart: token.margin,
+        width: token.lineWidth,
+        height: '100%',
+        padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,

        '&::after': {
-          width: 1, // FIXME: hardcode in v4
-          height: '100%', // FIXME: hardcode in v4
+          width: token.lineWidth,
+          height: '100%',
        },
      },
      [`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]:
@ -65,9 +58,9 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
      [`&${componentCls}-small ${componentCls}-item-container`]: {
        [`${componentCls}-item-tail`]: {
          position: 'absolute',
-          top: 0, // FIXME: hardcode in v4
-          insetInlineStart: stepsVerticalTailWidthSm,
-          padding: `${stepsSmallIconSize + 6}px 0 6px`, // FIXME: hardcode in v4
+          top: 0,
+          insetInlineStart: token.marginSM,
+          padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
        },
        [`${componentCls}-item-title`]: {
          lineHeight: `${stepsSmallIconSize}px`,