From f4411d939322c8be0af690c18edfb6401c35f387 Mon Sep 17 00:00:00 2001
From: PCCCCCCC <zpc.excel@foxmail.com>
Date: Tue, 19 Apr 2022 11:28:06 +0800
Subject: [PATCH] Refactor:Component Steps Less to cssInJs (#35058)

* refactor: Steps cssInJs add basic structure

* refactor: change Component Steps less into cssInJs

* refactor: :recycle: steps cssInJs code formated

* style: :lipstick: change Steps cssinjs left and right into Logical Properties

* style: :lipstick: steps cssinjs add FIXME for number hardcode

* style: :lipstick: steps cssinjs dismiss useless rtl style

* style: :lipstick: step cssinjs fix the 'not compatible with RTL mode' warning and fix the style in RTL mode

* style: code formated for FIXME

* style: revert the change about _skip_check_

* style: step cssinjs margin/padding used with Logical properties

* ci: fix lint check

* style: fix the style on RTL

* style: try fix the step subtitle order on RTL mode

* style: optimization the style on RTL and dismiss duplicate styles with logical properties
---
 components/_util/theme/interface.ts           |   1 +
 components/steps/demo/nav.md                  |   6 +-
 components/steps/index.tsx                    |   9 +-
 components/steps/style/custom-icon.ts         |  48 ++
 components/steps/style/index.less             | 446 +++++++++---------
 components/steps/style/index.tsx              | 370 ++++++++++++++-
 components/steps/style/label-placement.ts     |  56 +++
 components/steps/style/nav.ts                 | 150 ++++++
 components/steps/style/progress-dot.ts        | 130 +++++
 components/steps/style/progress.ts            |  38 ++
 components/steps/style/rtl.ts                 | 214 +++++++++
 components/steps/style/small.ts               |  68 +++
 components/steps/style/vertical.ts            |  79 ++++
 .../template/Layout/DynamicTheme/Diff.tsx     |   4 +-
 .../template/Layout/DynamicTheme/index.tsx    |   1 +
 15 files changed, 1389 insertions(+), 231 deletions(-)
 create mode 100644 components/steps/style/custom-icon.ts
 create mode 100644 components/steps/style/label-placement.ts
 create mode 100644 components/steps/style/nav.ts
 create mode 100644 components/steps/style/progress-dot.ts
 create mode 100644 components/steps/style/progress.ts
 create mode 100644 components/steps/style/rtl.ts
 create mode 100644 components/steps/style/small.ts
 create mode 100644 components/steps/style/vertical.ts

diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts
index 8abca3ff12..76eb5672f0 100644
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@@ -76,6 +76,7 @@ export interface OverrideToken {
   Timeline?: TimelineComponentToken;
   Tabs?: {};
   Card?: {};
+  Steps?: {};
 }
 
 /** Final token which contains the components level override */
diff --git a/components/steps/demo/nav.md b/components/steps/demo/nav.md
index 4315867ef3..60aeaccc5c 100644
--- a/components/steps/demo/nav.md
+++ b/components/steps/demo/nav.md
@@ -90,15 +90,15 @@ export default Demo;
 ```
 
 ```css
-[data-theme='compact'] .site-navigation-steps,
-.site-navigation-steps {
+[data-theme='compact'] .site-navigation-steps.ant-steps.ant-steps-navigation,
+.site-navigation-steps.ant-steps.ant-steps-navigation {
   margin-bottom: 60px;
   box-shadow: 0px -1px 0 0 #e8e8e8 inset;
 }
 ```
 
 <style>
-[data-theme="dark"] .site-navigation-steps {
+[data-theme="dark"] .site-navigation-steps.ant-steps.ant-steps-navigation {
   border-bottom: 1px solid #303030;
   margin-bottom: 60px;
   box-shadow: none;
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 69e5a52795..442e975cfa 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 import Progress from '../progress';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
+import useStyle from './style';
 
 export interface StepsProps {
   type?: 'default' | 'navigation';
@@ -53,6 +54,9 @@ const Steps: StepsType = props => {
   );
 
   const prefixCls = getPrefixCls('steps', props.prefixCls);
+
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
   const iconPrefix = getPrefixCls('', props.iconPrefix);
   const stepsClassName = classNames(
     {
@@ -60,6 +64,7 @@ const Steps: StepsType = props => {
       [`${prefixCls}-with-progress`]: percent !== undefined,
     },
     className,
+    hashId,
   );
   const icons = {
     finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
@@ -94,7 +99,7 @@ const Steps: StepsType = props => {
     }
     return node;
   };
-  return (
+  return wrapSSR(
     <RcSteps
       icons={icons}
       {...restProps}
@@ -104,7 +109,7 @@ const Steps: StepsType = props => {
       prefixCls={prefixCls}
       iconPrefix={iconPrefix}
       className={stepsClassName}
-    />
+    />,
   );
 };
 
diff --git a/components/steps/style/custom-icon.ts b/components/steps/style/custom-icon.ts
new file mode 100644
index 0000000000..340c3ff701
--- /dev/null
+++ b/components/steps/style/custom-icon.ts
@@ -0,0 +1,48 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    stepsIconCustomTop,
+    stepsIconCustomSize,
+    stepsIconCustomFontSize,
+    processIconColor,
+  } = token;
+
+  return {
+    [`${componentCls}-item-custom`]: {
+      [`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
+        height: 'auto',
+        background: 'none',
+        border: 0, // FIXME: hardcode in v4
+        [`> ${componentCls}-icon`]: {
+          top: stepsIconCustomTop,
+          insetInlineStart: 0.5, // FIXME: hardcode in v4
+          width: stepsIconCustomSize,
+          height: stepsIconCustomSize,
+          fontSize: stepsIconCustomFontSize,
+          lineHeight: `${stepsIconCustomSize}px`,
+        },
+      },
+      [`&${componentCls}-item-process`]: {
+        [`${componentCls}-item-icon > ${componentCls}-icon`]: {
+          color: processIconColor,
+        },
+      },
+    },
+
+    // Only adjust horizontal customize icon width
+    [`&:not(${componentCls}-vertical)`]: {
+      [`${componentCls}-item-custom`]: {
+        [`${componentCls}-item-icon`]: {
+          width: 'auto',
+          background: 'none',
+        },
+      },
+    },
+  };
+};
+
+export default genStepsCustomIconStyle;
diff --git a/components/steps/style/index.less b/components/steps/style/index.less
index a57ecd1117..cdf4665624 100644
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@@ -1,255 +1,257 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
+// @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: ~'@{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();
+//.ant-steps
+// .@{steps-prefix-cls} {
+// .reset-component();
 
-  display: flex;
-  width: 100%;
-  font-size: 0;
-  text-align: initial;
-}
+// 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;
+// .@{steps-prefix-cls}-item {
+// position: relative;
+// display: inline-block;
+// flex: 1;
+// overflow: hidden;
+// vertical-align: top;
 
-  &-container {
-    outline: none;
-  }
+// &-container {
+//   outline: none;
+// }
 
-  &:last-child {
-    flex: none;
-  }
+// &:last-child {
+//   flex: none;
+// }
 
-  &:last-child > &-container > &-tail,
-  &:last-child > &-container > &-content > &-title::after {
-    display: none;
-  }
+// &:last-child > &-container > &-tail,
+// &:last-child > &-container > &-content > &-title::after {
+//   display: none;
+// }
 
-  &-icon,
-  &-content {
-    display: inline-block;
-    vertical-align: top;
-  }
+// &-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;
+// &-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;
-    }
-  }
+//   .@{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;
+// &-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: '';
-    }
-  }
+//   &::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;
+// &-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: '';
-    }
-  }
+//   &::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;
-  }
+// &-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);
+// &-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 > &-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);
+// &-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;
-  }
+// &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
+//   background: @error-icon-color;
+// }
 
-  &-disabled {
-    cursor: not-allowed;
-  }
-}
+// &-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} .@{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;
-        }
-      }
+//       .@{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;
-          }
-        }
-      }
-    }
+//       &: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;
+//     &: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}-icon {
+//               color: @primary-color;
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
 
-.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
-  .@{steps-prefix-cls}-item {
-    padding-left: 16px;
-    white-space: nowrap;
+// .@{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;
-    }
+//     &:first-child {
+//       padding-left: 0;
+//     }
+//     &:last-child .@{steps-prefix-cls}-item-title {
+//       padding-right: 0;
+//     }
 
-    &-tail {
-      display: none;
-    }
+//     &-tail {
+//       display: none;
+//     }
 
-    &-description {
-      max-width: @steps-description-max-width;
-      white-space: normal;
-    }
-  }
-}
+//     &-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;
+// .step-item-status(@status) {
+//   @icon-color: '@{status}-icon-color';
+//   @title-color: '@{status}-title-color';
+//   @description-color: '@{status}-description-color';
+//   @tail-color: '@{status}-tail-color';
 
-    &::after {
-      background-color: @@tail-color;
-    }
-  }
-  &-@{status} > &-container > &-content > &-description {
-    color: @@description-color;
-  }
-  &-@{status} > &-container > &-tail::after {
-    background-color: @@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;
 
-@import './custom-icon';
-@import './small';
-@import './vertical';
-@import './label-placement';
-@import './progress-dot';
-@import './nav';
-@import './rtl';
-@import './progress.less';
+//     &::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';
diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx
index 0052fa4ee1..66a191e468 100644
--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@@ -1,6 +1,370 @@
-import '../../style/index.less';
-import './index.less';
+// deps-lint-skip-all
+// import '../../style/index.less';
+// import './index.less';
 
 // style dependencies
 // deps-lint-skip: grid
-import '../../progress/style';
+// 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 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 genStepsRTLStyle from './rtl';
+
+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;
+  processDescriptionColor: string;
+  processIconTextColor: string;
+  waitIconColor: string;
+  waitTitleColor: string;
+  waitDescriptionColor: string;
+  waitTailColor: string;
+  finishIconColor: string;
+  finishTitleColor: string;
+  finishDescriptionColor: string;
+  finishTailColor: string;
+  errorIconColor: string;
+  errorTitleColor: string;
+  errorDescriptionColor: string;
+  errorTailColor: string;
+  stepsNavActiveColor: 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 stepsBackground = '#fff'; // FIXME: hardcode in v4
+  return {
+    [`${prefix}-${status} ${prefix}-icon`]: {
+      backgroundColor: stepsBackground,
+      borderColor: token[iconColorKey],
+      [`> ${token.componentCls}-icon`]: {
+        color: token[iconColorKey],
+        [`${token.componentCls}-icon-dot`]: {
+          background: token[iconColorKey],
+        },
+      },
+    },
+    [`${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,
+      // margin: token.stepsIconMargin,
+      marginTop: 0, // FIXME: hardcode in v4
+      marginBottom: 0, // FIXME: hardcode in v4
+      marginInline: '0 8px', // FIXME: hardcode in v4
+      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
+      borderRadius: token.stepsIconSize,
+      transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
+      [`${componentCls}-icon`]: {
+        position: 'relative',
+        top: token.stepsIconTop,
+        color: token.colorPrimary,
+        lineHeight: 1,
+      },
+    },
+    [`${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
+
+      '&::after': {
+        display: 'inline-block',
+        width: '100%', // FIXME: hardcode in v4
+        height: 1, // FIXME: hardcode in v4
+        background: token.colorSplit,
+        borderRadius: 1, // FIXME: hardcode in v4
+        transition: `background ${motionDurationSlow}`,
+        content: '""',
+      },
+    },
+    [`${stepsItemCls}-title`]: {
+      position: 'relative',
+      display: 'inline-block',
+      paddingInlineEnd: 16, // FIXME: hardcode in v4
+      color: token.colorText,
+      fontSize: token.fontSizeLG,
+      lineHeight: `${token.stepsTitleLineHeight}px`,
+
+      '&::after': {
+        position: 'absolute',
+        top: token.stepsTitleLineHeight / 2,
+        insetInlineStart: '100%', // FIXME: hardcode in v4
+        display: 'block',
+        width: 9999, // FIXME: hardcode in v4
+        height: 1, // FIXME: hardcode in v4
+        background: token.processTailColor,
+        content: '""',
+      },
+    },
+    [`${stepsItemCls}-subtitle`]: {
+      display: 'inline',
+      marginInlineStart: 8, // FIXME: hardcode in v4
+      color: token.colorTextSecondary,
+      fontWeight: 'normal',
+      fontSize: token.fontSizeBase,
+    },
+    [`${stepsItemCls}-description`]: {
+      color: token.colorTextSecondary,
+      fontSize: token.fontSizeBase,
+    },
+    ...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
+    ...genStepsItemStatusStyle(StepItemStatusEnum.process, token),
+    [`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-icon`]: {
+      background: token.processIconColor,
+
+      [`${componentCls}-icon`]: {
+        color: token.processIconTextColor,
+      },
+    },
+    [`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
+      fontWeight: 500, // FIXME: hardcode in v4
+    },
+    ...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: 16, // FIXME: hardcode in v4
+        whiteSpace: 'nowrap',
+
+        '&:first-child': {
+          paddingInlineStart: 0, // FIXME: hardcode in v4
+        },
+        [`&:last-child ${componentCls}-item-title`]: {
+          paddingInlineEnd: 0, // FIXME: hardcode in v4
+        },
+        '&-tail': {
+          display: 'none',
+        },
+        '&-description': {
+          maxWidth: token.stepsDescriptionMaxWidth,
+          whiteSpace: 'normal',
+        },
+      },
+    },
+  };
+};
+
+const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls } = token; // .ant-steps
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      display: 'flex',
+      width: '100%',
+      fontSize: 0, // FIXME: hardcode in v4
+      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),
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Steps', token => {
+  const stepsIconSize = 32; // FIXME: hardcode in v4
+  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,
+  });
+
+  return [genStepsStyle(stepsToken)];
+});
diff --git a/components/steps/style/label-placement.ts b/components/steps/style/label-placement.ts
new file mode 100644
index 0000000000..5da4dbbdf0
--- /dev/null
+++ b/components/steps/style/label-placement.ts
@@ -0,0 +1,56 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls, stepsIconSize, lineHeight } = token;
+
+  return {
+    [`&${componentCls}-label-vertical`]: {
+      [`${componentCls}-item`]: {
+        overflow: 'visible',
+
+        '&-tail': {
+          marginInlineStart: 58, // FIXME: hardcode in v4
+          padding: '3.5px 24px', // FIXME: hardcode in v4
+        },
+
+        '&-content': {
+          display: 'block',
+          width: (stepsIconSize / 2 + 42) * 2, // FIXME: hardcode in v4
+          marginTop: 8, // FIXME: hardcode in v4
+          textAlign: 'center',
+        },
+
+        '&-icon': {
+          display: 'inline-block',
+          marginInlineStart: 42, // FIXME: hardcode in v4
+        },
+
+        '&-title': {
+          paddingInlineEnd: 0, // FIXME: hardcode in v4
+          paddingInlineStart: 0, // FIXME: hardcode in v4
+
+          '&::after': {
+            display: 'none',
+          },
+        },
+
+        '&-subtitle': {
+          display: 'block',
+          marginBottom: 4, // FIXME: hardcode in v4
+          marginInlineStart: 0, // FIXME: hardcode in v4
+          lineHeight,
+        },
+      },
+      [`&${componentCls}-small:not(${componentCls}-dot)`]: {
+        [`${componentCls}-item`]: {
+          '&-icon': {
+            marginInlineStart: 46, // FIXME: hardcode in v4
+          },
+        },
+      },
+    },
+  };
+};
+export default genStepsLabelPlacementStyle;
diff --git a/components/steps/style/nav.ts b/components/steps/style/nav.ts
new file mode 100644
index 0000000000..4bb09dfcf5
--- /dev/null
+++ b/components/steps/style/nav.ts
@@ -0,0 +1,150 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    stepsNavContentMaxWidth,
+    stepsNavArrowColor,
+    stepsNavActiveColor,
+    motionDurationSlow,
+  } = token;
+
+  return {
+    [`&${componentCls}-navigation`]: {
+      paddingTop: 12, // FIXME: hardcode in v4
+
+      [`&${componentCls}-small`]: {
+        [`${componentCls}-item`]: {
+          '&-container': {
+            marginInlineStart: -12, // FIXME: hardcode in v4
+          },
+        },
+      },
+
+      [`${componentCls}-item`]: {
+        overflow: 'visible',
+        textAlign: 'center',
+
+        '&-container': {
+          display: 'inline-block',
+          height: '100%', // FIXME: hardcode in v4
+          marginInlineStart: -16, // FIXME: hardcode in v4
+          paddingBottom: 12, // FIXME: hardcode in v4
+          textAlign: 'start',
+          transition: `opacity ${motionDurationSlow}`,
+
+          [`${componentCls}-item-content`]: {
+            maxWidth: stepsNavContentMaxWidth,
+          },
+
+          [`${componentCls}-item-title`]: {
+            maxWidth: '100%', // FIXME: hardcode in v4
+            paddingInlineEnd: 0, // FIXME: hardcode in v4
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+
+            '&::after': {
+              display: 'none',
+            },
+          },
+        },
+
+        [`&:not(${componentCls}-item-active)`]: {
+          [`${componentCls}-item-container[role='button']`]: {
+            cursor: 'pointer',
+
+            '&:hover': {
+              opacity: 0.85, // FIXME: hardcode in v4
+            },
+          },
+        },
+
+        '&:last-child': {
+          flex: 1,
+
+          '&::after': {
+            display: 'none',
+          },
+        },
+
+        '&::after': {
+          position: 'absolute',
+          top: '50%',
+          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}`,
+          borderBottom: 'none',
+          borderInlineStart: 'none',
+          borderInlineEnd: `1px solid ${stepsNavArrowColor}`,
+          transform: 'rotate(45deg)',
+          content: '""',
+        },
+
+        '&::before': {
+          position: 'absolute',
+          bottom: 0, // FIXME: hardcode in v4
+          insetInlineStart: '50%',
+          display: 'inline-block',
+          width: 0, // FIXME: hardcode in v4
+          height: 2, // FIXME: hardcode in v4
+          backgroundColor: stepsNavActiveColor,
+          transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
+          transitionTimingFunction: 'ease-out',
+          content: '""',
+        },
+      },
+
+      [`${componentCls}-item${componentCls}-item-active::before`]: {
+        insetInlineStart: 0, // FIXME: hardcode in v4
+        width: '100%', // FIXME: hardcode in v4
+      },
+    },
+
+    [`&${componentCls}-navigation${componentCls}-vertical`]: {
+      [`> ${componentCls}-item`]: {
+        marginInlineEnd: '0 !important',
+
+        '&::before': {
+          display: 'none',
+        },
+        [`&${componentCls}-item-active::before`]: {
+          top: 0, // FIXME: hardcode in v4
+          insetInlineEnd: 0, // FIXME: hardcode in v4
+          insetInlineStart: 'unset',
+          display: 'block',
+          width: 3, // FIXME: hardcode in v4
+          height: 'calc(100% - 24px)',
+        },
+
+        '&::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
+          textAlign: 'center',
+          transform: '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;
diff --git a/components/steps/style/progress-dot.ts b/components/steps/style/progress-dot.ts
new file mode 100644
index 0000000000..5136b77e36
--- /dev/null
+++ b/components/steps/style/progress-dot.ts
@@ -0,0 +1,130 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    stepsDotTop,
+    stepsDescriptionMaxWidth,
+    lineHeight,
+    stepsCurrentDotSize,
+    stepsDotSize,
+    motionDurationSlow,
+  } = token;
+
+  return {
+    [`&${componentCls}-dot, &${componentCls}-dot${componentCls}-small`]: {
+      [`${componentCls}-item`]: {
+        '&-title': {
+          lineHeight,
+        },
+
+        '&-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
+
+          '&::after': {
+            width: 'calc(100% - 20px)', // FIXME: hardcode in v4
+            height: 3, // FIXME: hardcode in v4
+            marginInlineStart: 12, // FIXME: hardcode in v4
+          },
+        },
+        [`&: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
+          lineHeight: `${stepsDotSize}px`,
+          background: 'transparent',
+          border: 0, // FIXME: hardcode in v4
+
+          [`${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
+            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
+              content: '""',
+            },
+          },
+        },
+
+        '&-content': {
+          width: stepsDescriptionMaxWidth,
+        },
+        [`&-process ${componentCls}-item-icon`]: {
+          position: 'relative',
+          top: -1, // FIXME: hardcode in v4
+          width: stepsCurrentDotSize,
+          height: stepsCurrentDotSize,
+          lineHeight: `${stepsCurrentDotSize}px`,
+          background: 'none',
+        },
+        [`&-process ${componentCls}-icon`]: {
+          [`&:first-child ${componentCls}-icon-dot`]: {
+            insetInlineStart: 0, // FIXME: hardcode in v4
+          },
+        },
+      },
+    },
+    [`&${componentCls}-vertical${componentCls}-dot`]: {
+      [`${componentCls}-item-icon`]: {
+        marginTop: 13, // FIXME: hardcode in v4
+        marginInlineStart: 0, // FIXME: hardcode in v4
+        background: 'none',
+      },
+
+      // 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
+      },
+
+      [`&${componentCls}-small`]: {
+        [`${componentCls}-item-icon`]: {
+          marginTop: 10, // FIXME: hardcode in v4
+        },
+
+        [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
+          top: 3.5, // FIXME: hardcode in v4
+        },
+      },
+
+      [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
+        insetInlineStart: 0, // FIXME: hardcode in v4
+      },
+      [`${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
+        },
+    },
+  };
+};
+
+export default genStepsProgressDotStyle;
diff --git a/components/steps/style/progress.ts b/components/steps/style/progress.ts
new file mode 100644
index 0000000000..2cb2b10282
--- /dev/null
+++ b/components/steps/style/progress.ts
@@ -0,0 +1,38 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { antCls, componentCls } = token;
+
+  return {
+    [`&${componentCls}-with-progress`]: {
+      [`${componentCls}-item`]: {
+        paddingTop: 4, // FIXME: hardcode in v4
+
+        [`${componentCls}-item-tail`]: {
+          top: '4px !important', // FIXME: hardcode in v4
+        },
+      },
+
+      [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
+        paddingBottom: 4, // FIXME: hardcode in v4
+        paddingInlineStart: 4, // FIXME: hardcode in v4
+      },
+
+      [`${componentCls}-item-icon`]: {
+        position: 'relative',
+
+        [`${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
+        },
+      },
+    },
+  };
+};
+
+export default genStepsProgressStyle;
diff --git a/components/steps/style/rtl.ts b/components/steps/style/rtl.ts
new file mode 100644
index 0000000000..97b28c9363
--- /dev/null
+++ b/components/steps/style/rtl.ts
@@ -0,0 +1,214 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`&${componentCls}-rtl`]: {
+      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`]: {
+          '&::after': {
+            transform: 'rotate(225deg)',
+          },
+          [`${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,
+      // },
+      // },
+    },
+  };
+};
+export default genStepsRTLStyle;
diff --git a/components/steps/style/small.ts b/components/steps/style/small.ts
new file mode 100644
index 0000000000..d468ebd326
--- /dev/null
+++ b/components/steps/style/small.ts
@@ -0,0 +1,68 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    stepsSmallIconSize,
+    // stepsSmallIconMargin,
+    fontSizeSM,
+    fontSizeBase,
+    colorTextSecondary,
+  } = token;
+
+  return {
+    [`&${componentCls}-small`]: {
+      [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
+        paddingInlineStart: 12, // FIXME: hardcode in v4
+        '&:first-child': {
+          paddingInlineStart: 0, // FIXME: hardcode in v4
+        },
+      },
+
+      [`${componentCls}-item-icon`]: {
+        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
+        fontSize: fontSizeSM,
+        lineHeight: `${stepsSmallIconSize}px`,
+        textAlign: 'center',
+        borderRadius: stepsSmallIconSize,
+      },
+      [`${componentCls}-item-title`]: {
+        paddingInlineEnd: 12, // FIXME: hardcode in v4
+        fontSize: fontSizeBase,
+        lineHeight: `${stepsSmallIconSize}px`,
+
+        '&::after': {
+          top: stepsSmallIconSize / 2, // FIXME: hardcode in v4
+        },
+      },
+      [`${componentCls}-item-description`]: {
+        color: colorTextSecondary,
+        fontSize: fontSizeBase,
+      },
+      [`${componentCls}-item-tail`]: {
+        top: 8, // FIXME: hardcode in v4
+      },
+      [`${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
+        [`> ${componentCls}-icon`]: {
+          fontSize: stepsSmallIconSize,
+          lineHeight: `${stepsSmallIconSize}px`,
+          transform: 'none',
+        },
+      },
+    },
+  };
+};
+export default genStepsSmallStyle;
diff --git a/components/steps/style/vertical.ts b/components/steps/style/vertical.ts
new file mode 100644
index 0000000000..38d6d83b13
--- /dev/null
+++ b/components/steps/style/vertical.ts
@@ -0,0 +1,79 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../_util/theme';
+import type { StepsToken } from '.';
+
+const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const {
+    componentCls,
+    stepsSmallIconSize,
+    stepsVerticalIconWidth,
+    stepsVerticalTailWidth,
+    stepsVerticalTailWidthSm,
+    stepsIconSize,
+  } = token;
+
+  return {
+    [`&${componentCls}-vertical`]: {
+      display: 'flex',
+      flexDirection: 'column',
+
+      [`> ${componentCls}-item`]: {
+        display: 'block',
+        flex: '1 0 auto',
+        paddingInlineStart: 0, // FIXME: hardcode in v4
+        overflow: 'visible',
+
+        [`${componentCls}-item-icon`]: {
+          float: 'left',
+          marginInlineEnd: stepsVerticalIconWidth,
+        },
+        [`${componentCls}-item-content`]: {
+          display: 'block',
+          minHeight: 48, // FIXME: hardcode in v4
+          overflow: 'hidden',
+        },
+        [`${componentCls}-item-title`]: {
+          lineHeight: `${stepsIconSize}px`,
+        },
+        [`${componentCls}-item-description`]: {
+          paddingBottom: 12, // FIXME: hardcode in v4
+        },
+      },
+      [`> ${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
+
+        '&::after': {
+          width: 1, // FIXME: hardcode in v4
+          height: '100%', // FIXME: hardcode in v4
+        },
+      },
+      [`> ${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, // FIXME: hardcode in v4
+          insetInlineStart: stepsVerticalTailWidthSm,
+          padding: `${stepsSmallIconSize + 6}px 0 6px`, // FIXME: hardcode in v4
+        },
+        [`${componentCls}-item-title`]: {
+          lineHeight: `${stepsSmallIconSize}px`,
+        },
+      },
+    },
+  };
+};
+export default genStepsVerticalStyle;
diff --git a/site/theme/template/Layout/DynamicTheme/Diff.tsx b/site/theme/template/Layout/DynamicTheme/Diff.tsx
index 39d8833be3..c96608cdcd 100644
--- a/site/theme/template/Layout/DynamicTheme/Diff.tsx
+++ b/site/theme/template/Layout/DynamicTheme/Diff.tsx
@@ -16,7 +16,9 @@ const Diff: FC<DiffProps> = ({ show }) => {
       title="master-diff"
       style={{
         position: 'absolute',
-        width: '100vw',
+        width: document.body.scrollWidth,
+        // width: `calc(100vw - 15px)`,
+        // width: '100vw',
         height: document.body.scrollHeight,
         top: 0,
         left: 0,
diff --git a/site/theme/template/Layout/DynamicTheme/index.tsx b/site/theme/template/Layout/DynamicTheme/index.tsx
index 8a70dbd9d1..6f13aae5bd 100644
--- a/site/theme/template/Layout/DynamicTheme/index.tsx
+++ b/site/theme/template/Layout/DynamicTheme/index.tsx
@@ -44,6 +44,7 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
           boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)',
           padding: '8px 16px 8px 12px',
           cursor: 'pointer',
+          zIndex: 1,
         }}
         onClick={() => setVisible(true)}
       >