refactor:steps (#6264)

* refactor:steps

* fix ...attrs

* fix StepsToken error

* docs:update & refactor: steps type

components/steps/demo/progress.vue

@@ -22,4 +22,9 @@ Steps with progress.
     <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
     <a-step title="Waiting" description="This is a description." />
   </a-steps>
+  <a-steps :percent="60" :current="1" size="small">
+    <a-step title="Finished" description="This is a description." />
+    <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
+    <a-step title="Waiting" description="This is a description." />
+  </a-steps>
 </template>

components/steps/index.en-US.md

@@ -3,7 +3,7 @@ category: Components
 type: Navigation
 cols: 1
 title: Steps
-cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 `Steps` is a navigation bar that guides users through the steps of a task.

components/steps/index.tsx

@@ -1,4 +1,4 @@
-import type { App, ExtractPropTypes, PropType } from 'vue';
+import type { App, ExtractPropTypes } from 'vue';
 import { computed, defineComponent } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@@ -13,6 +13,11 @@ import omit from '../_util/omit';
 import { VcStepProps } from '../vc-steps/Step';
 import type { ProgressDotRender } from '../vc-steps/Steps';
 import type { MouseEventHandler } from '../_util/EventInterface';
+import { booleanType, stringType, functionType, someType } from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
+import { useToken } from '../theme/internal';
 
 export const stepsProps = () => ({
   prefixCls: String,
@@ -20,28 +25,28 @@ export const stepsProps = () => ({
   current: Number,
   initial: Number,
   percent: Number,
-  responsive: { type: Boolean, default: undefined },
+  responsive: booleanType(),
-  labelPlacement: String as PropType<'horizontal' | 'vertical'>,
+  labelPlacement: stringType<'horizontal' | 'vertical'>(),
-  status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
+  status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
-  size: String as PropType<'default' | 'small'>,
+  size: stringType<'default' | 'small'>(),
-  direction: String as PropType<'horizontal' | 'vertical'>,
+  direction: stringType<'horizontal' | 'vertical'>(),
-  progressDot: {
+  progressDot: someType<boolean | ProgressDotRender>(
-    type: [Boolean, Function] as PropType<boolean | ProgressDotRender>,
+    [Boolean, Function],
-    default: undefined as boolean | ProgressDotRender,
+    undefined as boolean | ProgressDotRender,
-  },
+  ),
-  type: String as PropType<'default' | 'navigation'>,
+  type: stringType<'default' | 'navigation'>(),
-  onChange: Function as PropType<(current: number) => void>,
+  onChange: functionType<(current: number) => void>(),
-  'onUpdate:current': Function as PropType<(current: number) => void>,
+  'onUpdate:current': functionType<(current: number) => void>(),
 });
 
 export const stepProps = () => ({
   description: PropTypes.any,
   icon: PropTypes.any,
-  status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
+  status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
-  disabled: { type: Boolean, default: undefined },
+  disabled: booleanType(),
   title: PropTypes.any,
   subTitle: PropTypes.any,
-  onClick: Function as PropType<MouseEventHandler>,
+  onClick: functionType<MouseEventHandler>(),
 });
 
 export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
@@ -61,6 +66,13 @@ const Steps = defineComponent({
   // emits: ['update:current', 'change'],
   setup(props, { attrs, slots, emit }) {
     const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
+
+    // 接入换肤
+    const [, token] = useToken();
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const screens = useBreakpoint();
     const direction = computed(() =>
       props.responsive && screens.value.xs ? 'vertical' : props.direction,
@@ -84,11 +96,12 @@ const Steps = defineComponent({
         // currently it's hard-coded, since we can't easily read the actually width of icon
         const progressWidth = props.size === 'small' ? 32 : 40;
         const iconWithProgress = (
-          <div class={`${prefixCls}-progress-icon`}>
+          <div class={`${prefixCls.value}-progress-icon`}>
             <Progress
               type="circle"
               percent={props.percent}
               width={progressWidth}
+              strokeColor={token.value.colorPrimary}
               strokeWidth={4}
               format={() => null}
             />
@@ -106,14 +119,16 @@ const Steps = defineComponent({
           [`${prefixCls.value}-with-progress`]: props.percent !== undefined,
         },
         attrs.class,
+        hashId.value,
       );
       const icons = {
         finish: <CheckOutlined class={`${prefixCls}-finish-icon`} />,
         error: <CloseOutlined class={`${prefixCls}-error-icon`} />,
       };
-      return (
+      return wrapSSR(
         <VcSteps
           icons={icons}
+          {...attrs}
           {...omit(props, ['percent', 'responsive'])}
           direction={direction.value}
           prefixCls={prefixCls.value}
@@ -121,7 +136,7 @@ const Steps = defineComponent({
           class={stepsClassName}
           onChange={handleChange}
           v-slots={{ ...slots, stepIcon: stepIconRender }}
-        />
+        />,
       );
     };
   },

components/steps/index.zh-CN.md

@@ -4,7 +4,7 @@ subtitle: 步骤条
 type: 导航
 cols: 1
 title: Steps
-cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 引导用户按照流程完成任务的导航条。

components/steps/style/custom-icon.less

@@ -1,32 +0,0 @@
-.@{steps-prefix-cls}-item-custom {
-  > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-icon {
-    height: auto;
-    background: none;
-    border: 0;
-    > .@{steps-prefix-cls}-icon {
-      top: @steps-icon-custom-top;
-      left: 0.5px;
-      width: @steps-icon-custom-size;
-      height: @steps-icon-custom-size;
-      font-size: @steps-icon-custom-font-size;
-      line-height: @steps-icon-custom-size;
-    }
-  }
-  &.@{steps-prefix-cls}-item-process {
-    .@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
-      color: @process-icon-color;
-    }
-  }
-}
-
-// Only adjust horizontal customize icon width
-.@{steps-prefix-cls} {
-  &:not(.@{steps-prefix-cls}-vertical) {
-    .@{steps-prefix-cls}-item-custom {
-      .@{steps-prefix-cls}-item-icon {
-        width: auto;
-        background: none;
-      }
-    }
-  }
-}

components/steps/style/custom-icon.ts

@@ -0,0 +1,36 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token;
+
+  return {
+    [`${componentCls}-item-custom`]: {
+      [`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
+        height: 'auto',
+        background: 'none',
+        border: 0,
+        [`> ${componentCls}-icon`]: {
+          top: stepsIconCustomTop,
+          width: stepsIconCustomSize,
+          height: stepsIconCustomSize,
+          fontSize: stepsIconCustomFontSize,
+          lineHeight: `${stepsIconCustomSize}px`,
+        },
+      },
+    },
+
+    // Only adjust horizontal customize icon width
+    [`&:not(${componentCls}-vertical)`]: {
+      [`${componentCls}-item-custom`]: {
+        [`${componentCls}-item-icon`]: {
+          width: 'auto',
+          background: 'none',
+        },
+      },
+    },
+  };
+};
+
+export default genStepsCustomIconStyle;

components/steps/style/index.less

@@ -1,255 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@steps-prefix-cls: ~'@{ant-prefix}-steps';
-@process-icon-color: @primary-color;
-@process-title-color: @heading-color;
-@process-description-color: @text-color;
-@process-icon-text-color: @text-color-inverse;
-@wait-icon-color: @disabled-color;
-@wait-title-color: @text-color-secondary;
-@wait-description-color: @wait-title-color;
-@wait-tail-color: @process-tail-color;
-@finish-icon-color: @process-icon-color;
-@finish-title-color: @text-color;
-@finish-description-color: @text-color-secondary;
-@finish-tail-color: @primary-color;
-@error-icon-color: @error-color;
-@error-title-color: @error-color;
-@error-description-color: @error-color;
-@error-tail-color: @wait-tail-color;
-@steps-nav-active-color: @primary-color;
-
-.@{steps-prefix-cls} {
-  .reset-component();
-
-  display: flex;
-  width: 100%;
-  font-size: 0;
-  text-align: initial;
-}
-
-.@{steps-prefix-cls}-item {
-  position: relative;
-  display: inline-block;
-  flex: 1;
-  overflow: hidden;
-  vertical-align: top;
-
-  &-container {
-    outline: none;
-  }
-
-  &:last-child {
-    flex: none;
-  }
-
-  &:last-child > &-container > &-tail,
-  &:last-child > &-container > &-content > &-title::after {
-    display: none;
-  }
-
-  &-icon,
-  &-content {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  &-icon {
-    width: @steps-icon-size;
-    height: @steps-icon-size;
-    margin: @steps-icon-margin;
-    font-size: @steps-icon-font-size;
-    font-family: @font-family;
-    line-height: @steps-icon-size;
-    text-align: center;
-    border: @border-width-base @border-style-base @wait-icon-color;
-    border-radius: @steps-icon-size;
-    transition: background-color 0.3s, border-color 0.3s;
-
-    .@{steps-prefix-cls}-icon {
-      position: relative;
-      top: @steps-icon-top;
-      color: @primary-color;
-      line-height: 1;
-    }
-  }
-
-  &-tail {
-    position: absolute;
-    top: 12px;
-    left: 0;
-    width: 100%;
-    padding: 0 10px;
-
-    &::after {
-      display: inline-block;
-      width: 100%;
-      height: 1px;
-      background: @border-color-split;
-      border-radius: 1px;
-      transition: background 0.3s;
-      content: '';
-    }
-  }
-
-  &-title {
-    position: relative;
-    display: inline-block;
-    padding-right: 16px;
-    color: @text-color;
-    font-size: @font-size-lg;
-    line-height: @steps-title-line-height;
-
-    &::after {
-      position: absolute;
-      top: (@steps-title-line-height / 2);
-      left: 100%;
-      display: block;
-      width: 9999px;
-      height: 1px;
-      background: @wait-tail-color;
-      content: '';
-    }
-  }
-
-  &-subtitle {
-    display: inline;
-    margin-left: 8px;
-    color: @text-color-secondary;
-    font-weight: normal;
-    font-size: @font-size-base;
-  }
-
-  &-description {
-    color: @text-color-secondary;
-    font-size: @font-size-base;
-  }
-  .step-item-status(wait);
-  .step-item-status(process);
-
-  &-process > &-container > &-icon {
-    background: @process-icon-color;
-    .@{steps-prefix-cls}-icon {
-      color: @process-icon-text-color;
-    }
-  }
-
-  &-process > &-container > &-title {
-    font-weight: 500;
-  }
-  .step-item-status(finish);
-  .step-item-status(error);
-
-  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
-    background: @error-icon-color;
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-  }
-}
-
-// ===================== Clickable =====================
-.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
-  &:not(.@{steps-prefix-cls}-item-active) {
-    & > .@{steps-prefix-cls}-item-container[role='button'] {
-      cursor: pointer;
-
-      .@{steps-prefix-cls}-item {
-        &-title,
-        &-subtitle,
-        &-description,
-        &-icon .@{steps-prefix-cls}-icon {
-          transition: color 0.3s;
-        }
-      }
-
-      &:hover {
-        .@{steps-prefix-cls}-item {
-          &-title,
-          &-subtitle,
-          &-description {
-            color: @primary-color;
-          }
-        }
-      }
-    }
-
-    &:not(.@{steps-prefix-cls}-item-process) {
-      & > .@{steps-prefix-cls}-item-container[role='button']:hover {
-        .@{steps-prefix-cls}-item {
-          &-icon {
-            border-color: @primary-color;
-
-            .@{steps-prefix-cls}-icon {
-              color: @primary-color;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
-  .@{steps-prefix-cls}-item {
-    padding-left: 16px;
-    white-space: nowrap;
-
-    &:first-child {
-      padding-left: 0;
-    }
-    &:last-child .@{steps-prefix-cls}-item-title {
-      padding-right: 0;
-    }
-
-    &-tail {
-      display: none;
-    }
-
-    &-description {
-      max-width: @steps-description-max-width;
-      white-space: normal;
-    }
-  }
-}
-
-.step-item-status(@status) {
-  @icon-color: '@{status}-icon-color';
-  @title-color: '@{status}-title-color';
-  @description-color: '@{status}-description-color';
-  @tail-color: '@{status}-tail-color';
-  &-@{status} &-icon {
-    background-color: @steps-background;
-    border-color: @@icon-color;
-    > .@{steps-prefix-cls}-icon {
-      color: @@icon-color;
-      .@{steps-prefix-cls}-icon-dot {
-        background: @@icon-color;
-      }
-    }
-  }
-  &-@{status} > &-container > &-content > &-title {
-    color: @@title-color;
-
-    &::after {
-      background-color: @@tail-color;
-    }
-  }
-  &-@{status} > &-container > &-content > &-description {
-    color: @@description-color;
-  }
-  &-@{status} > &-container > &-tail::after {
-    background-color: @@tail-color;
-  }
-}
-
-@import './custom-icon';
-@import './small';
-@import './vertical';
-@import './label-placement';
-@import './progress-dot';
-@import './nav';
-@import './rtl';
-@import './progress.less';

components/steps/style/index.tsx

@@ -1,6 +1,408 @@
-import '../../style/index.less';
+import type { CSSObject } from '../../_util/cssinjs';
-import './index.less';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import genStepsCustomIconStyle from './custom-icon';
+import genStepsLabelPlacementStyle from './label-placement';
+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';
+import genStepsInlineStyle from './inline';
+import { resetComponent } from '../../_style';
 
-// style dependencies
+export interface ComponentToken {
-// deps-lint-skip: grid
+  descriptionWidth: number;
-import '../../progress/style';
+}
+
+export interface StepsToken extends FullToken<'Steps'> {
+  // Steps variable default.less
+  processTailColor: string;
+  stepsNavArrowColor: string;
+  stepsIconSize: number;
+  stepsIconCustomSize: number;
+  stepsIconCustomTop: number;
+  stepsIconCustomFontSize: number;
+  stepsIconTop: number;
+  stepsIconFontSize: number;
+  stepsTitleLineHeight: number;
+  stepsSmallIconSize: number;
+  stepsDotSize: number;
+  stepsCurrentDotSize: number;
+  stepsNavContentMaxWidth: string;
+  // Steps component less variable
+  processIconColor: string;
+  processTitleColor: string;
+  processDescriptionColor: string;
+  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;
+  errorDescriptionColor: string;
+  errorTailColor: string;
+  errorIconBgColor: string;
+  errorIconBorderColor: string;
+  errorDotColor: string;
+  stepsNavActiveColor: string;
+  stepsProgressSize: number;
+  // Steps inline variable
+  inlineDotSize: number;
+  inlineTitleColor: string;
+  inlineTailColor: string;
+}
+
+enum StepItemStatusEnum {
+  wait = 'wait',
+  process = 'process',
+  finish = 'finish',
+  error = 'error',
+}
+
+const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): CSSObject => {
+  const prefix = `${token.componentCls}-item`;
+  const iconColorKey: keyof StepsToken = `${status}IconColor`;
+  const titleColorKey: keyof StepsToken = `${status}TitleColor`;
+  const descriptionColorKey: keyof StepsToken = `${status}DescriptionColor`;
+  const tailColorKey: keyof StepsToken = `${status}TailColor`;
+  const iconBgColorKey: keyof StepsToken = `${status}IconBgColor`;
+  const iconBorderColorKey: keyof StepsToken = `${status}IconBorderColor`;
+  const dotColorKey: keyof StepsToken = `${status}DotColor`;
+  return {
+    [`${prefix}-${status} ${prefix}-icon`]: {
+      backgroundColor: token[iconBgColorKey],
+      borderColor: token[iconBorderColorKey],
+      [`> ${token.componentCls}-icon`]: {
+        color: token[iconColorKey],
+        [`${token.componentCls}-icon-dot`]: {
+          background: token[dotColorKey],
+        },
+      },
+    },
+    [`${prefix}-${status}${prefix}-custom ${prefix}-icon`]: {
+      [`> ${token.componentCls}-icon`]: {
+        color: token[dotColorKey],
+      },
+    },
+    [`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-title`]: {
+      color: token[titleColorKey],
+
+      '&::after': {
+        backgroundColor: token[tailColorKey],
+      },
+    },
+    [`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-description`]: {
+      color: token[descriptionColorKey],
+    },
+    [`${prefix}-${status} > ${prefix}-container > ${prefix}-tail::after`]: {
+      backgroundColor: token[tailColorKey],
+    },
+  };
+};
+
+const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls, motionDurationSlow } = token;
+  const stepsItemCls = `${componentCls}-item`; // .ant-steps-item
+
+  return {
+    [stepsItemCls]: {
+      position: 'relative',
+      display: 'inline-block',
+      flex: 1,
+      overflow: 'hidden',
+      verticalAlign: 'top',
+      '&:last-child': {
+        flex: 'none',
+        [`> ${stepsItemCls}-container > ${stepsItemCls}-tail, > ${stepsItemCls}-container >  ${stepsItemCls}-content > ${stepsItemCls}-title::after`]:
+          {
+            display: 'none',
+          },
+      },
+    },
+    [`${stepsItemCls}-container`]: {
+      outline: 'none',
+    },
+    [`${stepsItemCls}-icon, ${stepsItemCls}-content`]: {
+      display: 'inline-block',
+      verticalAlign: 'top',
+    },
+    [`${stepsItemCls}-icon`]: {
+      width: token.stepsIconSize,
+      height: token.stepsIconSize,
+      marginTop: 0,
+      marginBottom: 0,
+      marginInlineStart: 0,
+      marginInlineEnd: token.marginXS,
+      fontSize: token.stepsIconFontSize,
+      fontFamily: token.fontFamily,
+      lineHeight: `${token.stepsIconSize}px`,
+      textAlign: 'center',
+      borderRadius: token.stepsIconSize,
+      border: `${token.lineWidth}px ${token.lineType} transparent`,
+      transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
+      [`${componentCls}-icon`]: {
+        position: 'relative',
+        top: token.stepsIconTop,
+        color: token.colorPrimary,
+        lineHeight: 1,
+      },
+    },
+    [`${stepsItemCls}-tail`]: {
+      position: 'absolute',
+      top: token.stepsIconSize / 2 - token.paddingXXS,
+      insetInlineStart: 0,
+      width: '100%',
+
+      '&::after': {
+        display: 'inline-block',
+        width: '100%',
+        height: token.lineWidth,
+        background: token.colorSplit,
+        borderRadius: token.lineWidth,
+        transition: `background ${motionDurationSlow}`,
+        content: '""',
+      },
+    },
+    [`${stepsItemCls}-title`]: {
+      position: 'relative',
+      display: 'inline-block',
+      paddingInlineEnd: token.padding,
+      color: token.colorText,
+      fontSize: token.fontSizeLG,
+      lineHeight: `${token.stepsTitleLineHeight}px`,
+
+      '&::after': {
+        position: 'absolute',
+        top: token.stepsTitleLineHeight / 2,
+        insetInlineStart: '100%',
+        display: 'block',
+        width: 9999,
+        height: token.lineWidth,
+        background: token.processTailColor,
+        content: '""',
+      },
+    },
+    [`${stepsItemCls}-subtitle`]: {
+      display: 'inline',
+      marginInlineStart: token.marginXS,
+      color: token.colorTextDescription,
+      fontWeight: 'normal',
+      fontSize: token.fontSize,
+    },
+    [`${stepsItemCls}-description`]: {
+      color: token.colorTextDescription,
+      fontSize: token.fontSize,
+    },
+    ...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
+    ...genStepsItemStatusStyle(StepItemStatusEnum.process, token),
+    [`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
+      fontWeight: token.fontWeightStrong,
+    },
+    ...genStepsItemStatusStyle(StepItemStatusEnum.finish, token),
+    ...genStepsItemStatusStyle(StepItemStatusEnum.error, token),
+    [`${stepsItemCls}${componentCls}-next-error > ${componentCls}-item-title::after`]: {
+      background: token.colorError,
+    },
+    [`${stepsItemCls}-disabled`]: {
+      cursor: 'not-allowed',
+    },
+  };
+};
+
+// ============================= Clickable ===========================
+const genStepsClickableStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls, motionDurationSlow } = token;
+
+  return {
+    [`& ${componentCls}-item`]: {
+      [`&:not(${componentCls}-item-active)`]: {
+        [`& > ${componentCls}-item-container[role='button']`]: {
+          cursor: 'pointer',
+          [`${componentCls}-item`]: {
+            [`&-title, &-subtitle, &-description, &-icon ${componentCls}-icon`]: {
+              transition: `color ${motionDurationSlow}`,
+            },
+          },
+
+          '&:hover': {
+            [`${componentCls}-item`]: {
+              [`&-title, &-subtitle, &-description`]: {
+                color: token.colorPrimary,
+              },
+            },
+          },
+        },
+
+        [`&:not(${componentCls}-item-process)`]: {
+          [`& > ${componentCls}-item-container[role='button']:hover`]: {
+            [`${componentCls}-item`]: {
+              '&-icon': {
+                borderColor: token.colorPrimary,
+
+                [`${componentCls}-icon`]: {
+                  color: token.colorPrimary,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+    [`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
+      [`${componentCls}-item`]: {
+        paddingInlineStart: token.padding,
+        whiteSpace: 'nowrap',
+
+        '&:first-child': {
+          paddingInlineStart: 0,
+        },
+        [`&:last-child ${componentCls}-item-title`]: {
+          paddingInlineEnd: 0,
+        },
+        '&-tail': {
+          display: 'none',
+        },
+        '&-description': {
+          maxWidth: token.descriptionWidth,
+          whiteSpace: 'normal',
+        },
+      },
+    },
+  };
+};
+
+const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls } = token; // .ant-steps
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      display: 'flex',
+      width: '100%',
+      fontSize: 0,
+      textAlign: 'initial',
+      // single Item
+      ...genStepsItemStyle(token),
+      // Clickable
+      ...genStepsClickableStyle(token),
+      // custom-icon
+      ...genStepsCustomIconStyle(token),
+      // small
+      ...genStepsSmallStyle(token),
+      // vertical
+      ...genStepsVerticalStyle(token),
+      // label-placement
+      ...genStepsLabelPlacementStyle(token),
+      // progress-dot
+      ...genStepsProgressDotStyle(token),
+      // nav
+      ...genStepsNavStyle(token),
+      // rtl
+      ...genStepsRTLStyle(token),
+      // progress
+      ...genStepsProgressStyle(token),
+      // inline
+      ...genStepsInlineStyle(token),
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Steps',
+  token => {
+    const {
+      wireframe,
+      colorTextDisabled,
+      fontSizeHeading3,
+      fontSize,
+      controlHeight,
+      controlHeightLG,
+      colorTextLightSolid,
+      colorText,
+      colorPrimary,
+      colorTextLabel,
+      colorTextDescription,
+      colorTextQuaternary,
+      colorFillContent,
+      controlItemBgActive,
+      colorError,
+      colorBgContainer,
+      colorBorderSecondary,
+    } = token;
+
+    const stepsIconSize = token.controlHeight;
+    const processTailColor = token.colorSplit;
+
+    const stepsToken = mergeToken<StepsToken>(token, {
+      // Steps variable default.less
+      processTailColor,
+      stepsNavArrowColor: colorTextDisabled,
+      stepsIconSize,
+      stepsIconCustomSize: stepsIconSize,
+      stepsIconCustomTop: 0,
+      stepsIconCustomFontSize: controlHeightLG / 2,
+      stepsIconTop: -0.5, // magic for ui experience
+      stepsIconFontSize: fontSize,
+      stepsTitleLineHeight: controlHeight,
+      stepsSmallIconSize: fontSizeHeading3,
+      stepsDotSize: controlHeight / 4,
+      stepsCurrentDotSize: controlHeightLG / 4,
+      stepsNavContentMaxWidth: 'auto',
+      // Steps component less variable
+      processIconColor: colorTextLightSolid,
+      processTitleColor: colorText,
+      processDescriptionColor: colorText,
+      processIconBgColor: colorPrimary,
+      processIconBorderColor: colorPrimary,
+      processDotColor: colorPrimary,
+      waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
+      waitTitleColor: colorTextDescription,
+      waitDescriptionColor: colorTextDescription,
+      waitTailColor: processTailColor,
+      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,
+      errorDescriptionColor: colorError,
+      errorTailColor: processTailColor,
+      errorIconBgColor: colorError,
+      errorIconBorderColor: colorError,
+      errorDotColor: colorError,
+      stepsNavActiveColor: colorPrimary,
+      stepsProgressSize: controlHeightLG,
+      // Steps inline variable
+      inlineDotSize: 6,
+      inlineTitleColor: colorTextQuaternary,
+      inlineTailColor: colorBorderSecondary,
+    });
+
+    return [genStepsStyle(stepsToken)];
+  },
+  {
+    descriptionWidth: 140,
+  },
+);

components/steps/style/inline.ts

@@ -0,0 +1,124 @@
+import type { CSSObject } from '../../_util/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 titleStyle = {
+    [`${componentCls}-item-container ${componentCls}-item-content ${componentCls}-item-title`]: {
+      color: inlineTitleColor,
+    },
+  };
+
+  return {
+    [`&${componentCls}-inline`]: {
+      width: 'auto',
+      display: 'inline-flex',
+
+      [`${componentCls}-item`]: {
+        flex: 'none',
+
+        '&-container': {
+          padding: `${containerPaddingTop}px ${token.paddingXXS}px 0`,
+          margin: `0 ${token.marginXXS / 2}px`,
+          borderRadius: token.borderRadiusSM,
+          cursor: 'pointer',
+          transition: `background-color ${token.motionDurationMid}`,
+          '&:hover': {
+            background: token.controlItemBgHover,
+          },
+          [`&[role='button']:hover`]: {
+            opacity: 1,
+          },
+        },
+
+        '&-icon': {
+          width: inlineDotSize,
+          height: inlineDotSize,
+          marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
+          [`> ${componentCls}-icon`]: {
+            top: 0,
+          },
+          [`${componentCls}-icon-dot`]: {
+            borderRadius: token.fontSizeSM / 4,
+          },
+        },
+
+        '&-content': {
+          width: 'auto',
+          marginTop: token.marginXS - token.lineWidth,
+        },
+        '&-title': {
+          color: inlineTitleColor,
+          fontSize: token.fontSizeSM,
+          lineHeight: token.lineHeightSM,
+          fontWeight: 'normal',
+          marginBottom: token.marginXXS / 2,
+        },
+        '&-description': {
+          display: 'none',
+        },
+
+        '&-tail': {
+          marginInlineStart: 0,
+          top: containerPaddingTop + inlineDotSize / 2,
+          transform: `translateY(-50%)`,
+          '&:after': {
+            width: '100%',
+            height: token.lineWidth,
+            borderRadius: 0,
+            marginInlineStart: 0,
+            background: inlineTailColor,
+          },
+        },
+
+        [`&:first-child ${componentCls}-item-tail`]: {
+          width: '50%',
+          marginInlineStart: '50%',
+        },
+        [`&:last-child ${componentCls}-item-tail`]: {
+          display: 'block',
+          width: '50%',
+        },
+
+        '&-wait': {
+          [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
+            backgroundColor: token.colorBorderBg,
+            border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
+          },
+          ...titleStyle,
+        },
+        '&-finish': {
+          [`${componentCls}-item-tail::after`]: {
+            backgroundColor: inlineTailColor,
+          },
+          [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
+            backgroundColor: inlineTailColor,
+            border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
+          },
+          ...titleStyle,
+        },
+        '&-error': titleStyle,
+        '&-active, &-process': {
+          [`${componentCls}-item-icon`]: {
+            width: inlineDotSize,
+            height: inlineDotSize,
+            marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
+            top: 0,
+          },
+          ...titleStyle,
+        },
+
+        [`&:not(${componentCls}-item-active) > ${componentCls}-item-container[role='button']:hover`]:
+          {
+            [`${componentCls}-item-title`]: {
+              color: inlineTitleColor,
+            },
+          },
+      },
+    },
+  };
+};
+
+export default genStepsInlineStyle;

components/steps/style/label-placement.less

@@ -1,45 +0,0 @@
-.@{steps-prefix-cls}-label-vertical {
-  .@{steps-prefix-cls}-item {
-    overflow: visible;
-
-    &-tail {
-      margin-left: 58px;
-      padding: 3.5px 24px;
-    }
-
-    &-content {
-      display: block;
-      width: ((@steps-icon-size / 2) + 42px) * 2;
-      margin-top: 8px;
-      text-align: center;
-    }
-
-    &-icon {
-      display: inline-block;
-      margin-left: 42px;
-    }
-
-    &-title {
-      padding-right: 0;
-      padding-left: 0;
-
-      &::after {
-        display: none;
-      }
-    }
-
-    &-subtitle {
-      display: block;
-      margin-bottom: 4px;
-      margin-left: 0;
-      line-height: @line-height-base;
-    }
-  }
-  &.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
-    .@{steps-prefix-cls}-item {
-      &-icon {
-        margin-left: 46px;
-      }
-    }
-  }
-}

components/steps/style/label-placement.ts

@@ -0,0 +1,56 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token;
+
+  return {
+    [`&${componentCls}-label-vertical`]: {
+      [`${componentCls}-item`]: {
+        overflow: 'visible',
+
+        '&-tail': {
+          marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
+          padding: `${token.paddingXXS}px ${token.paddingLG}px`,
+        },
+
+        '&-content': {
+          display: 'block',
+          width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
+          marginTop: token.marginSM,
+          textAlign: 'center',
+        },
+
+        '&-icon': {
+          display: 'inline-block',
+          marginInlineStart: token.controlHeightLG,
+        },
+
+        '&-title': {
+          paddingInlineEnd: 0,
+          paddingInlineStart: 0,
+
+          '&::after': {
+            display: 'none',
+          },
+        },
+
+        '&-subtitle': {
+          display: 'block',
+          marginBottom: token.marginXXS,
+          marginInlineStart: 0,
+          lineHeight,
+        },
+      },
+      [`&${componentCls}-small:not(${componentCls}-dot)`]: {
+        [`${componentCls}-item`]: {
+          '&-icon': {
+            marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2,
+          },
+        },
+      },
+    },
+  };
+};
+export default genStepsLabelPlacementStyle;

components/steps/style/nav.less

@@ -1,134 +0,0 @@
-.@{steps-prefix-cls}-navigation {
-  padding-top: 12px;
-
-  &.@{steps-prefix-cls}-small {
-    .@{steps-prefix-cls}-item {
-      &-container {
-        margin-left: -12px;
-      }
-    }
-  }
-
-  .@{steps-prefix-cls}-item {
-    overflow: visible;
-    text-align: center;
-
-    &-container {
-      display: inline-block;
-      height: 100%;
-      margin-left: -16px;
-      padding-bottom: 12px;
-      text-align: left;
-      transition: opacity 0.3s;
-
-      .@{steps-prefix-cls}-item-content {
-        max-width: @steps-nav-content-max-width;
-      }
-
-      .@{steps-prefix-cls}-item-title {
-        max-width: 100%;
-        padding-right: 0;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        &::after {
-          display: none;
-        }
-      }
-    }
-
-    &:not(.@{steps-prefix-cls}-item-active) {
-      .@{steps-prefix-cls}-item-container[role='button'] {
-        cursor: pointer;
-
-        &:hover {
-          opacity: 0.85;
-        }
-      }
-    }
-
-    &:last-child {
-      flex: 1;
-
-      &::after {
-        display: none;
-      }
-    }
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      left: 100%;
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      margin-top: -14px;
-      margin-left: -2px;
-      border: 1px solid @steps-nav-arrow-color;
-      border-bottom: none;
-      border-left: none;
-      transform: rotate(45deg);
-      content: '';
-    }
-
-    &::before {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      display: inline-block;
-      width: 0;
-      height: 2px;
-      background-color: @steps-nav-active-color;
-      transition: width 0.3s, left 0.3s;
-      transition-timing-function: ease-out;
-      content: '';
-    }
-  }
-
-  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active::before {
-    left: 0;
-    width: 100%;
-  }
-}
-
-.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
-  > .@{steps-prefix-cls}-item {
-    margin-right: 0 !important;
-
-    &::before {
-      display: none;
-    }
-    &.@{steps-prefix-cls}-item-active::before {
-      top: 0;
-      right: 0;
-      left: unset;
-      display: block;
-      width: 3px;
-      height: calc(100% - 24px);
-    }
-
-    &::after {
-      position: relative;
-      top: -2px;
-      left: 50%;
-      display: block;
-      width: 8px;
-      height: 8px;
-      margin-bottom: 8px;
-      text-align: center;
-      transform: rotate(135deg);
-    }
-    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-      visibility: hidden;
-    }
-  }
-}
-
-.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-horizontal {
-  > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
-    visibility: hidden;
-  }
-}

components/steps/style/nav.ts

@@ -0,0 +1,146 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import { textEllipsis } from '../../_style';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    stepsNavContentMaxWidth,
+    stepsNavArrowColor,
+    stepsNavActiveColor,
+    motionDurationSlow,
+  } = token;
+
+  return {
+    [`&${componentCls}-navigation`]: {
+      paddingTop: token.paddingSM,
+
+      [`&${componentCls}-small`]: {
+        [`${componentCls}-item`]: {
+          '&-container': {
+            marginInlineStart: -token.marginSM,
+          },
+        },
+      },
+
+      [`${componentCls}-item`]: {
+        overflow: 'visible',
+        textAlign: 'center',
+
+        '&-container': {
+          display: 'inline-block',
+          height: '100%',
+          marginInlineStart: -token.margin,
+          paddingBottom: token.paddingSM,
+          textAlign: 'start',
+          transition: `opacity ${motionDurationSlow}`,
+
+          [`${componentCls}-item-content`]: {
+            maxWidth: stepsNavContentMaxWidth,
+          },
+
+          [`${componentCls}-item-title`]: {
+            maxWidth: '100%',
+            paddingInlineEnd: 0,
+            ...textEllipsis,
+
+            '&::after': {
+              display: 'none',
+            },
+          },
+        },
+
+        [`&:not(${componentCls}-item-active)`]: {
+          [`${componentCls}-item-container[role='button']`]: {
+            cursor: 'pointer',
+
+            '&:hover': {
+              opacity: 0.85,
+            },
+          },
+        },
+
+        '&:last-child': {
+          flex: 1,
+
+          '&::after': {
+            display: 'none',
+          },
+        },
+
+        '&::after': {
+          position: 'absolute',
+          top: `calc(50% - ${token.paddingSM / 2}px)`,
+          insetInlineStart: '100%',
+          display: 'inline-block',
+          width: token.fontSizeIcon,
+          height: token.fontSizeIcon,
+          borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
+          borderBottom: 'none',
+          borderInlineStart: 'none',
+          borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
+          transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
+          content: '""',
+        },
+
+        '&::before': {
+          position: 'absolute',
+          bottom: 0,
+          insetInlineStart: '50%',
+          display: 'inline-block',
+          width: 0,
+          height: token.lineWidthBold,
+          backgroundColor: stepsNavActiveColor,
+          transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
+          transitionTimingFunction: 'ease-out',
+          content: '""',
+        },
+      },
+
+      [`${componentCls}-item${componentCls}-item-active::before`]: {
+        insetInlineStart: 0,
+        width: '100%',
+      },
+    },
+
+    [`&${componentCls}-navigation${componentCls}-vertical`]: {
+      [`> ${componentCls}-item`]: {
+        marginInlineEnd: 0,
+
+        '&::before': {
+          display: 'none',
+        },
+        [`&${componentCls}-item-active::before`]: {
+          top: 0,
+          insetInlineEnd: 0,
+          insetInlineStart: 'unset',
+          display: 'block',
+          width: token.lineWidth * 3,
+          height: `calc(100% - ${token.marginLG}px)`,
+        },
+
+        '&::after': {
+          position: 'relative',
+          insetInlineStart: '50%',
+          display: 'block',
+          width: token.controlHeight * 0.25,
+          height: token.controlHeight * 0.25,
+          marginBottom: token.marginXS,
+          textAlign: 'center',
+          transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
+        },
+        [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
+          visibility: 'hidden',
+        },
+      },
+    },
+
+    [`&${componentCls}-navigation${componentCls}-horizontal`]: {
+      [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
+        visibility: 'hidden',
+      },
+    },
+  };
+};
+export default genStepsNavStyle;

components/steps/style/progress-dot.less

@@ -1,113 +0,0 @@
-.@{steps-prefix-cls}-dot,
-.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
-  .@{steps-prefix-cls}-item {
-    &-title {
-      line-height: @line-height-base;
-    }
-
-    &-tail {
-      top: @steps-dot-top;
-      width: 100%;
-      margin: 0 0 0 (@steps-description-max-width / 2);
-      padding: 0;
-
-      &::after {
-        width: ~'calc(100% - 20px)';
-        height: 3px;
-        margin-left: 12px;
-      }
-    }
-    &:first-child .@{steps-prefix-cls}-icon-dot {
-      left: 2px;
-    }
-
-    &-icon {
-      width: @steps-dot-size;
-      height: @steps-dot-size;
-      margin-left: 67px;
-      padding-right: 0;
-      line-height: @steps-dot-size;
-      background: transparent;
-      border: 0;
-
-      .@{steps-prefix-cls}-icon-dot {
-        position: relative;
-        float: left;
-        width: 100%;
-        height: 100%;
-        border-radius: 100px;
-        transition: all 0.3s;
-
-        /* expand hover area */
-        &::after {
-          position: absolute;
-          top: -12px;
-          left: -26px;
-          width: 60px;
-          height: 32px;
-          background: fade(@black, 0.1%);
-          content: '';
-        }
-      }
-    }
-
-    &-content {
-      width: @steps-description-max-width;
-    }
-    &-process .@{steps-prefix-cls}-item-icon {
-      position: relative;
-      top: -1px;
-      width: @steps-current-dot-size;
-      height: @steps-current-dot-size;
-      line-height: @steps-current-dot-size;
-      background: none;
-    }
-    &-process .@{steps-prefix-cls}-icon {
-      &:first-child .@{steps-prefix-cls}-icon-dot {
-        left: 0;
-      }
-    }
-  }
-}
-
-.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
-  .@{steps-prefix-cls}-item-icon {
-    margin-top: 13px;
-    margin-left: 0;
-    background: none;
-  }
-
-  // https://github.com/ant-design/ant-design/issues/18354
-  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-    top: 6.5px;
-    left: -9px;
-    margin: 0;
-    padding: 22px 0 4px;
-  }
-
-  &.@{steps-prefix-cls}-small {
-    .@{steps-prefix-cls}-item-icon {
-      margin-top: 10px;
-    }
-
-    .@{steps-prefix-cls}-item
-      > .@{steps-prefix-cls}-item-container
-      > .@{steps-prefix-cls}-item-tail {
-      top: 3.5px;
-    }
-  }
-
-  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
-    left: 0;
-  }
-  .@{steps-prefix-cls}-item-content {
-    width: inherit;
-  }
-  .@{steps-prefix-cls}-item-process
-    .@{steps-prefix-cls}-item-container
-    .@{steps-prefix-cls}-item-icon
-    .@{steps-prefix-cls}-icon-dot {
-    top: -1px;
-    left: -1px;
-  }
-}

components/steps/style/progress-dot.ts

@@ -0,0 +1,133 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    descriptionWidth,
+    lineHeight,
+    stepsCurrentDotSize,
+    stepsDotSize,
+    motionDurationSlow,
+  } = token;
+
+  return {
+    [`&${componentCls}-dot, &${componentCls}-dot${componentCls}-small`]: {
+      [`${componentCls}-item`]: {
+        '&-title': {
+          lineHeight,
+        },
+
+        '&-tail': {
+          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% - ${token.marginSM * 2}px)`,
+            height: token.lineWidth * 3,
+            marginInlineStart: token.marginSM,
+          },
+        },
+        '&-icon': {
+          width: stepsDotSize,
+          height: stepsDotSize,
+          marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
+          paddingInlineEnd: 0,
+          lineHeight: `${stepsDotSize}px`,
+          background: 'transparent',
+          border: 0,
+
+          [`${componentCls}-icon-dot`]: {
+            position: 'relative',
+            float: 'left',
+            width: '100%',
+            height: '100%',
+            borderRadius: 100, // very large number
+            transition: `all ${motionDurationSlow}`,
+
+            /* expand hover area */
+            '&::after': {
+              position: 'absolute',
+              top: -token.marginSM,
+              insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
+              width: token.controlHeightLG * 1.5,
+              height: token.controlHeight,
+              background: 'transparent',
+              content: '""',
+            },
+          },
+        },
+
+        '&-content': {
+          width: descriptionWidth,
+        },
+        [`&-process ${componentCls}-item-icon`]: {
+          position: 'relative',
+          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,
+          },
+        },
+      },
+    },
+    [`&${componentCls}-vertical${componentCls}-dot`]: {
+      [`${componentCls}-item-icon`]: {
+        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: (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: (token.controlHeightSM - stepsDotSize) / 2,
+        },
+        [`${componentCls}-item-process ${componentCls}-item-icon`]: {
+          marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2,
+        },
+
+        [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
+          top: (token.controlHeightSM - stepsDotSize) / 2,
+        },
+      },
+
+      [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
+        insetInlineStart: 0,
+      },
+      [`${componentCls}-item-content`]: {
+        width: 'inherit',
+      },
+    },
+  };
+};
+
+export default genStepsProgressDotStyle;

components/steps/style/progress.less

@@ -1,28 +0,0 @@
-@progress-prefix-cls: ~'@{ant-prefix}-progress';
-
-.@{steps-prefix-cls}-with-progress {
-  .@{steps-prefix-cls}-item {
-    padding-top: 4px;
-
-    .@{steps-prefix-cls}-item-tail {
-      top: 4px !important;
-    }
-  }
-
-  &.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child {
-    padding-bottom: 4px;
-    padding-left: 4px;
-  }
-
-  .@{steps-prefix-cls}-item-icon {
-    position: relative;
-
-    .@{progress-prefix-cls} {
-      position: absolute;
-      top: -5px;
-      right: -5px;
-      bottom: -5px;
-      left: -5px;
-    }
-  }
-}

components/steps/style/progress.ts

@@ -0,0 +1,60 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { antCls, componentCls } = token;
+
+  return {
+    [`&${componentCls}-with-progress`]: {
+      [`${componentCls}-item`]: {
+        paddingTop: token.paddingXXS,
+
+        [`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]:
+          {
+            color: token.processIconColor,
+          },
+      },
+
+      [`&${componentCls}-vertical > ${componentCls}-item `]: {
+        paddingInlineStart: token.paddingXXS,
+        [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
+          top: token.marginXXS,
+          insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS,
+        },
+      },
+
+      [`&, &${componentCls}-small`]: {
+        [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
+          paddingBottom: token.paddingXXS,
+          paddingInlineStart: token.paddingXXS,
+        },
+      },
+
+      [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
+        {
+          insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS,
+        },
+
+      [`&${componentCls}-label-vertical`]: {
+        [`${componentCls}-item ${componentCls}-item-tail`]: {
+          top: token.margin - 2 * token.lineWidth,
+        },
+      },
+
+      [`${componentCls}-item-icon`]: {
+        position: 'relative',
+
+        [`${antCls}-progress`]: {
+          position: 'absolute',
+          insetBlockStart:
+            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
+          insetInlineStart:
+            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
+        },
+      },
+    },
+  };
+};
+
+export default genStepsProgressStyle;

components/steps/style/rtl.less

@@ -1,271 +0,0 @@
-.@{steps-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-}
-
-.@{steps-prefix-cls}-item {
-  &-icon {
-    .@{steps-prefix-cls}.@{steps-prefix-cls}-rtl & {
-      margin-right: 0;
-      margin-left: 8px;
-    }
-  }
-
-  &-tail {
-    .@{steps-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
-  }
-
-  &-title {
-    .@{steps-prefix-cls}-rtl & {
-      padding-right: 0;
-      padding-left: 16px;
-    }
-
-    .@{steps-prefix-cls}-item-subtitle {
-      .@{steps-prefix-cls}-rtl & {
-        float: left;
-        margin-right: 8px;
-        margin-left: 0;
-      }
-    }
-
-    &::after {
-      .@{steps-prefix-cls}-rtl & {
-        right: 100%;
-        left: auto;
-      }
-    }
-  }
-}
-
-.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
-  .@{steps-prefix-cls}-item {
-    .@{steps-prefix-cls}-rtl& {
-      padding-right: 16px;
-      padding-left: 0;
-    }
-
-    &:first-child {
-      .@{steps-prefix-cls}-rtl& {
-        padding-right: 0;
-      }
-    }
-
-    &:last-child .@{steps-prefix-cls}-item-title {
-      .@{steps-prefix-cls}-rtl& {
-        padding-left: 0;
-      }
-    }
-  }
-}
-
-// custom-icon
-.@{steps-prefix-cls}-item-custom {
-  .@{steps-prefix-cls}-item-icon {
-    > .@{steps-prefix-cls}-icon {
-      .@{steps-prefix-cls}-rtl & {
-        right: 0.5px;
-        left: auto;
-      }
-    }
-  }
-}
-
-// nav
-.@{steps-prefix-cls}-navigation {
-  &.@{steps-prefix-cls}-small {
-    .@{steps-prefix-cls}-item {
-      &-container {
-        .@{steps-prefix-cls}-rtl& {
-          margin-right: -12px;
-          margin-left: 0;
-        }
-      }
-    }
-  }
-
-  .@{steps-prefix-cls}-item {
-    &-container {
-      .@{steps-prefix-cls}-rtl& {
-        margin-right: -16px;
-        margin-left: 0;
-        text-align: right;
-      }
-
-      .@{steps-prefix-cls}-item-title {
-        .@{steps-prefix-cls}-rtl& {
-          padding-left: 0;
-        }
-      }
-    }
-
-    &::after {
-      .@{steps-prefix-cls}-rtl& {
-        right: 100%;
-        left: auto;
-        margin-right: -2px;
-        margin-left: 0;
-        transform: rotate(225deg);
-      }
-    }
-  }
-}
-
-// small
-.@{steps-prefix-cls}-small {
-  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
-    .@{steps-prefix-cls}-item {
-    .@{steps-prefix-cls}-rtl& {
-      padding-right: 12px;
-      padding-left: 0;
-    }
-
-    &:first-child {
-      .@{steps-prefix-cls}-rtl& {
-        padding-right: 0;
-      }
-    }
-  }
-
-  .@{steps-prefix-cls}-item-title {
-    .@{steps-prefix-cls}-rtl& {
-      padding-right: 0;
-      padding-left: 12px;
-    }
-  }
-}
-
-// vertical
-.@{steps-prefix-cls}-vertical {
-  > .@{steps-prefix-cls}-item {
-    .@{steps-prefix-cls}-item-icon {
-      .@{steps-prefix-cls}-rtl& {
-        float: right;
-        margin-right: 0;
-        margin-left: @steps-vertical-icon-width;
-      }
-    }
-  }
-
-  > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
-    .@{steps-prefix-cls}-rtl& {
-      right: @steps-vertical-tail-width;
-      left: auto;
-    }
-  }
-
-  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
-    .@{steps-prefix-cls}-item-tail {
-      .@{steps-prefix-cls}-rtl& {
-        right: @steps-vertical-tail-width-sm;
-        left: auto;
-      }
-    }
-  }
-}
-
-// label
-.@{steps-prefix-cls}-label-vertical {
-  .@{steps-prefix-cls}-item {
-    &-title {
-      .@{steps-prefix-cls}-rtl& {
-        padding-left: 0;
-      }
-    }
-  }
-}
-
-// progress-dot
-.@{steps-prefix-cls}-dot,
-.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
-  .@{steps-prefix-cls}-item {
-    &-tail {
-      .@{steps-prefix-cls}-rtl& {
-        margin: 0 (@steps-description-max-width / 2) 0 0;
-      }
-
-      &::after {
-        .@{steps-prefix-cls}-rtl& {
-          margin-right: 12px;
-          margin-left: 0;
-        }
-      }
-    }
-
-    &:first-child .@{steps-prefix-cls}-icon-dot {
-      .@{steps-prefix-cls}-rtl& {
-        right: 2px;
-        left: auto;
-      }
-    }
-
-    &-icon {
-      .@{steps-prefix-cls}-rtl& {
-        margin-right: 67px;
-        margin-left: 0;
-      }
-
-      .@{steps-prefix-cls}-icon-dot {
-        .@{steps-prefix-cls}-rtl& {
-          float: right;
-        }
-
-        /* expand hover area */
-        &::after {
-          .@{steps-prefix-cls}-rtl& {
-            right: -26px;
-            left: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
-.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
-  .@{steps-prefix-cls}-item-icon {
-    .@{steps-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 16px;
-    }
-  }
-
-  // https://github.com/ant-design/ant-design/issues/18354
-  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-    .@{steps-prefix-cls}-rtl& {
-      right: -9px;
-      left: auto;
-    }
-  }
-
-  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
-    .@{steps-prefix-cls}-rtl& {
-      right: 0;
-      left: auto;
-    }
-  }
-
-  .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
-    .@{steps-prefix-cls}-rtl& {
-      right: -2px;
-      left: auto;
-    }
-  }
-}
-
-// RTL Steps with progress
-.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
-  .@{steps-prefix-cls}-item:first-child {
-    padding-right: 4px;
-    padding-left: 0;
-    &.@{steps-prefix-cls}-item-active {
-      padding-right: 4px;
-    }
-  }
-}

components/steps/style/rtl.ts

@@ -0,0 +1,47 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`&${componentCls}-rtl`]: {
+      direction: 'rtl',
+
+      [`${componentCls}-item`]: {
+        '&-subtitle': {
+          float: 'left',
+        },
+      },
+
+      // nav
+      [`&${componentCls}-navigation`]: {
+        [`${componentCls}-item::after`]: {
+          transform: 'rotate(-45deg)',
+        },
+      },
+
+      // vertical
+      [`&${componentCls}-vertical`]: {
+        [`> ${componentCls}-item`]: {
+          '&::after': {
+            transform: 'rotate(225deg)',
+          },
+          [`${componentCls}-item-icon`]: {
+            float: 'right',
+          },
+        },
+      },
+
+      // progress-dot
+      [`&${componentCls}-dot`]: {
+        [`${componentCls}-item-icon ${componentCls}-icon-dot, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot`]:
+          {
+            float: 'right',
+          },
+      },
+    },
+  };
+};
+export default genStepsRTLStyle;

components/steps/style/small.less

@@ -1,48 +0,0 @@
-.@{steps-prefix-cls}-small {
-  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
-    .@{steps-prefix-cls}-item {
-    padding-left: 12px;
-
-    &:first-child {
-      padding-left: 0;
-    }
-  }
-  .@{steps-prefix-cls}-item-icon {
-    width: @steps-small-icon-size;
-    height: @steps-small-icon-size;
-    margin: @steps-small-icon-margin;
-    font-size: @font-size-sm;
-    line-height: @steps-small-icon-size;
-    text-align: center;
-    border-radius: @steps-small-icon-size;
-  }
-  .@{steps-prefix-cls}-item-title {
-    padding-right: 12px;
-    font-size: @font-size-base;
-    line-height: @steps-small-icon-size;
-
-    &::after {
-      top: (@steps-small-icon-size / 2);
-    }
-  }
-  .@{steps-prefix-cls}-item-description {
-    color: @text-color-secondary;
-    font-size: @font-size-base;
-  }
-  .@{steps-prefix-cls}-item-tail {
-    top: 8px;
-  }
-  .@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
-    width: inherit;
-    height: inherit;
-    line-height: inherit;
-    background: none;
-    border: 0;
-    border-radius: 0;
-    > .@{steps-prefix-cls}-icon {
-      font-size: @steps-small-icon-size;
-      line-height: @steps-small-icon-size;
-      transform: none;
-    }
-  }
-}

components/steps/style/small.ts

@@ -0,0 +1,68 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    stepsSmallIconSize,
+    // stepsSmallIconMargin,
+    fontSizeSM,
+    fontSize,
+    colorTextDescription,
+  } = token;
+
+  return {
+    [`&${componentCls}-small`]: {
+      [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
+        paddingInlineStart: token.paddingSM,
+        '&:first-child': {
+          paddingInlineStart: 0,
+        },
+      },
+
+      [`${componentCls}-item-icon`]: {
+        width: stepsSmallIconSize,
+        height: stepsSmallIconSize,
+        // margin: stepsSmallIconMargin,
+        marginTop: 0,
+        marginBottom: 0,
+        marginInline: `0 ${token.marginXS}px`,
+        fontSize: fontSizeSM,
+        lineHeight: `${stepsSmallIconSize}px`,
+        textAlign: 'center',
+        borderRadius: stepsSmallIconSize,
+      },
+      [`${componentCls}-item-title`]: {
+        paddingInlineEnd: token.paddingSM,
+        fontSize,
+        lineHeight: `${stepsSmallIconSize}px`,
+
+        '&::after': {
+          top: stepsSmallIconSize / 2,
+        },
+      },
+      [`${componentCls}-item-description`]: {
+        color: colorTextDescription,
+        fontSize,
+      },
+      [`${componentCls}-item-tail`]: {
+        top: stepsSmallIconSize / 2 - token.paddingXXS,
+      },
+      [`${componentCls}-item-custom ${componentCls}-item-icon`]: {
+        width: 'inherit',
+        height: 'inherit',
+        lineHeight: 'inherit',
+        background: 'none',
+        border: 0,
+        borderRadius: 0,
+        [`> ${componentCls}-icon`]: {
+          fontSize: stepsSmallIconSize,
+          lineHeight: `${stepsSmallIconSize}px`,
+          transform: 'none',
+        },
+      },
+    },
+  };
+};
+export default genStepsSmallStyle;

components/steps/style/vertical.less

@@ -1,73 +0,0 @@
-.@{steps-prefix-cls}-vertical {
-  display: flex;
-  flex-direction: column;
-
-  > .@{steps-prefix-cls}-item {
-    display: block;
-    flex: 1 0 auto;
-    padding-left: 0;
-    overflow: visible;
-
-    .@{steps-prefix-cls}-item-icon {
-      float: left;
-      margin-right: @steps-vertical-icon-width;
-    }
-
-    .@{steps-prefix-cls}-item-content {
-      display: block;
-      min-height: 48px;
-      overflow: hidden;
-    }
-
-    .@{steps-prefix-cls}-item-title {
-      line-height: @steps-icon-size;
-    }
-
-    .@{steps-prefix-cls}-item-description {
-      padding-bottom: 12px;
-    }
-  }
-
-  > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
-    position: absolute;
-    top: 0;
-    left: @steps-vertical-tail-width;
-    width: 1px;
-    height: 100%;
-    padding: @steps-icon-size + 6px 0 6px;
-
-    &::after {
-      width: 1px;
-      height: 100%;
-    }
-  }
-
-  > .@{steps-prefix-cls}-item:not(:last-child)
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
-    display: block;
-  }
-
-  > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-content
-    > .@{steps-prefix-cls}-item-title {
-    &::after {
-      display: none;
-    }
-  }
-
-  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
-    .@{steps-prefix-cls}-item-tail {
-      position: absolute;
-      top: 0;
-      left: @steps-vertical-tail-width-sm;
-      padding: @steps-small-icon-size + 6px 0 6px;
-    }
-    .@{steps-prefix-cls}-item-title {
-      line-height: @steps-small-icon-size;
-    }
-  }
-}

components/steps/style/vertical.ts

@@ -0,0 +1,72 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls, stepsSmallIconSize, stepsIconSize } = token;
+
+  return {
+    [`&${componentCls}-vertical`]: {
+      display: 'flex',
+      flexDirection: 'column',
+
+      [`> ${componentCls}-item`]: {
+        display: 'block',
+        flex: '1 0 auto',
+        paddingInlineStart: 0,
+        overflow: 'visible',
+
+        [`${componentCls}-item-icon`]: {
+          float: 'left',
+          marginInlineEnd: token.margin,
+        },
+        [`${componentCls}-item-content`]: {
+          display: 'block',
+          minHeight: token.controlHeight * 1.5,
+          overflow: 'hidden',
+        },
+        [`${componentCls}-item-title`]: {
+          lineHeight: `${stepsIconSize}px`,
+        },
+        [`${componentCls}-item-description`]: {
+          paddingBottom: token.paddingSM,
+        },
+      },
+      [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
+        position: 'absolute',
+        top: 0,
+        insetInlineStart: token.stepsIconSize / 2 - token.lineWidth,
+        width: token.lineWidth,
+        height: '100%',
+        padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
+
+        '&::after': {
+          width: token.lineWidth,
+          height: '100%',
+        },
+      },
+      [`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]:
+        {
+          display: 'block',
+        },
+      [` > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-content > ${componentCls}-item-title`]:
+        {
+          '&::after': {
+            display: 'none',
+          },
+        },
+      [`&${componentCls}-small ${componentCls}-item-container`]: {
+        [`${componentCls}-item-tail`]: {
+          position: 'absolute',
+          top: 0,
+          insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth,
+          padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
+        },
+        [`${componentCls}-item-title`]: {
+          lineHeight: `${stepsSmallIconSize}px`,
+        },
+      },
+    },
+  };
+};
+export default genStepsVerticalStyle;

components/style.ts

@@ -32,7 +32,7 @@ import './cascader/style';
 // import './modal/style';
 // import './alert/style';
 import './time-picker/style';
-import './steps/style';
+// import './steps/style';
 // import './breadcrumb/style';
 import './calendar/style';
 // import './date-picker/style';

components/theme/interface/components.ts

@@ -36,7 +36,7 @@ import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/st
 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 StepsComponentToken } from '../../steps/style';
 // import type { ComponentToken as TableComponentToken } from '../../table/style';
 // import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
 import type { ComponentToken as TagComponentToken } from '../../tag/style';
@@ -103,7 +103,7 @@ export interface ComponentTokenMap {
   Transfer?: TransferComponentToken;
   //   Tabs?: TabsComponentToken;
   //   Calendar?: CalendarComponentToken;
-  //   Steps?: StepsComponentToken;
+  Steps?: StepsComponentToken;
   Menu?: MenuComponentToken;
   Modal?: ModalComponentToken;
   Message?: MessageComponentToken;