fix: Steps with process style in compact theme

components/steps/demo/label-placement.tsx

@@ -22,7 +22,7 @@ const App: React.FC = () => (
     <br />
     <Steps current={1} percent={60} labelPlacement="vertical" items={items} />
     <br />
-    <Steps current={1} size="small" labelPlacement="vertical" items={items} />
+    <Steps current={1} percent={80} size="small" labelPlacement="vertical" items={items} />
   </>
 );
 

components/steps/style/index.ts

@@ -1,5 +1,6 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { CSSProperties } from 'react';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import { genFocusOutline, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
@@ -239,7 +240,8 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
     },
     [`${stepsItemCls}-tail`]: {
       position: 'absolute',
-      top: token.calc(token.iconSize).div(2).sub(token.paddingXXS).equal(),
+      top: token.calc(token.iconSize).div(2).equal(),
+      transform: 'translateY(-50%)',
       insetInlineStart: 0,
       width: '100%',
 

components/steps/style/progress.ts

@@ -1,82 +1,87 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
-  const { antCls, componentCls } = token;
+  const {
+    antCls,
+    componentCls,
+    iconSize,
+    iconSizeSM,
+    processIconColor,
+    marginXXS,
+    lineWidthBold,
+    lineWidth,
+    paddingXXS,
+  } = token;
+
+  const progressSize = token.calc(iconSize).add(token.calc(lineWidthBold).mul(4).equal()).equal();
+  const progressSizeSM = token
+    .calc(iconSizeSM)
+    .add(token.calc(token.lineWidth).mul(4).equal())
+    .equal();
 
   return {
     [`&${componentCls}-with-progress`]: {
       [`${componentCls}-item`]: {
-        paddingTop: token.paddingXXS,
+        paddingTop: paddingXXS,
 
         [`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]:
           {
-            color: token.processIconColor,
+            color: processIconColor,
           },
       },
 
       [`&${componentCls}-vertical > ${componentCls}-item `]: {
-        paddingInlineStart: token.paddingXXS,
+        paddingInlineStart: paddingXXS,
         [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-          top: token.marginXXS,
-          insetInlineStart: token
-            .calc(token.iconSize)
-            .div(2)
-            .sub(token.lineWidth)
-            .add(token.paddingXXS)
-            .equal(),
+          top: marginXXS,
+          insetInlineStart: token.calc(iconSize).div(2).sub(lineWidth).add(paddingXXS).equal(),
         },
       },
 
       [`&, &${componentCls}-small`]: {
         [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
-          paddingBottom: token.paddingXXS,
-          paddingInlineStart: token.paddingXXS,
+          paddingBottom: paddingXXS,
+          paddingInlineStart: paddingXXS,
         },
       },
 
       [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
         {
-          insetInlineStart: token
-            .calc(token.iconSizeSM)
-            .div(2)
-            .sub(token.lineWidth)
-            .add(token.paddingXXS)
-            .equal(),
+          insetInlineStart: token.calc(iconSizeSM).div(2).sub(lineWidth).add(paddingXXS).equal(),
         },
 
-      [`&${componentCls}-label-vertical`]: {
-        [`${componentCls}-item ${componentCls}-item-tail`]: {
-          top: token.calc(token.margin).sub(token.calc(token.lineWidth).mul(2).equal()).equal(),
-        },
+      [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
+        top: token.calc(iconSize).div(2).add(paddingXXS).equal(),
       },
 
       [`${componentCls}-item-icon`]: {
         position: 'relative',
 
         [`${antCls}-progress`]: {
           position: 'absolute',
-          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(),
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+
+          '&-inner': {
+            width: `${progressSize} !important`,
+            height: `${progressSize} !important`,
+          },
+        },
+      },
+
+      // ============================== Small size ==============================
+      [`&${componentCls}-small`]: {
+        [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
+          top: token.calc(iconSizeSM).div(2).add(paddingXXS).equal(),
+        },
+
+        [`${componentCls}-item-icon ${antCls}-progress-inner`]: {
+          width: `${progressSizeSM} !important`,
+          height: `${progressSizeSM} !important`,
         },
       },
     },