antdv-next 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/steps/style/panel.js

@@ -1,10 +1,12 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import { unit } from "@antdv-next/cssinjs";
 
 //#region src/steps/style/panel.ts
 const genPanelStyle = (token) => {
-	const { componentCls, calc, lineWidthBold, borderRadius, borderRadiusSM, motionDurationMid } = token;
+	const { componentCls, lineWidthBold, borderRadius, borderRadiusSM, motionDurationMid, paddingXS, lineType, paddingSM, antCls, calc } = token;
 	const itemCls = `${componentCls}-item`;
-	const borderStyle = `${unit(lineWidthBold)} ${token.lineType} var(--steps-panel-border-color)`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
+	const borderStyle = `${unit(lineWidthBold)} ${lineType} ${varRef("panel-border-color")}`;
 	return { [`${componentCls}${componentCls}-panel`]: [
 		{
 			[`${itemCls}-rail`]: { display: "none" },
@@ -18,17 +20,17 @@ const genPanelStyle = (token) => {
 		},
 		{
 			"&": {
-				"--steps-panel-padding": token.paddingSM,
-				"--steps-item-border-radius": borderRadius,
+				[varName("panel-padding")]: paddingSM,
+				[varName("item-border-radius")]: borderRadius,
 				[itemCls]: {
-					"--steps-panel-bg-color": "var(--steps-item-icon-bg-color)",
-					"--steps-panel-border-color": "var(--steps-item-icon-border-color)",
-					"--steps-panel-active-bg-color": "var(--steps-item-icon-active-bg-color)",
-					"--steps-panel-active-border-color": "var(--steps-item-icon-active-border-color)",
-					"--steps-panel-title-height": `calc(var(--steps-title-font-size) * var(--steps-title-line-height))`,
-					"--steps-item-base-height": calc("var(--steps-panel-padding)").mul(2).add("var(--steps-icon-size)").add("var(--steps-panel-title-height)").equal(),
-					"--steps-item-base-width": "calc(var(--steps-item-base-height) * 0.7071)",
-					"transition": `background ${motionDurationMid}`
+					[varName("panel-bg-color")]: varRef("item-icon-bg-color"),
+					[varName("panel-border-color")]: varRef("item-icon-border-color"),
+					[varName("panel-active-bg-color")]: varRef("item-icon-active-bg-color"),
+					[varName("panel-active-border-color")]: varRef("item-icon-active-border-color"),
+					[varName("panel-title-height")]: `calc(${varRef("title-font-size")} * ${varRef("title-line-height")})`,
+					[varName("item-base-height")]: calc(varRef("panel-padding")).mul(2).add(varRef("icon-size")).add(varRef("panel-title-height")).equal(),
+					[varName("item-base-width")]: `calc(${varRef("item-base-height")} * 0.7071)`,
+					transition: `background ${motionDurationMid}`
 				}
 			},
 			[`${itemCls}-icon`]: { display: "none" },
@@ -39,12 +41,12 @@ const genPanelStyle = (token) => {
 				insetInlineStart: "100%",
 				zIndex: 1,
 				height: calc(lineWidthBold).mul(2).add("100%").equal(),
-				width: "var(--steps-item-base-width)",
+				width: varRef("item-base-width"),
 				overflow: "visible",
 				strokeLinecap: "round",
 				path: {
-					fill: "var(--steps-panel-bg-color)",
-					stroke: "var(--steps-panel-border-color)",
+					fill: varRef("panel-bg-color"),
+					stroke: varRef("panel-border-color"),
 					strokeWidth: lineWidthBold,
 					vectorEffect: "non-scaling-stroke",
 					transition: `fill ${motionDurationMid}`
@@ -52,42 +54,42 @@ const genPanelStyle = (token) => {
 			},
 			[`${itemCls}:last-child ${componentCls}-panel-arrow`]: { display: "none" },
 			[itemCls]: {
-				"padding": "var(--steps-panel-padding)",
-				"background": "var(--steps-panel-bg-color)",
+				"padding": varRef("panel-padding"),
+				"background": varRef("panel-bg-color"),
 				"position": "relative",
 				"borderBlock": borderStyle,
-				"&:not(:first-child)": { paddingInlineStart: `calc(var(--steps-panel-padding) + var(--steps-item-base-width))` },
+				"&:not(:first-child)": { paddingInlineStart: `calc(${varRef("panel-padding")} + ${varRef("item-base-width")})` },
 				"&:first-child": {
 					borderInlineStart: borderStyle,
-					borderStartStartRadius: "var(--steps-item-border-radius)",
-					borderEndStartRadius: "var(--steps-item-border-radius)"
+					borderStartStartRadius: varRef("item-border-radius"),
+					borderEndStartRadius: varRef("item-border-radius")
 				},
 				"&:last-child": {
 					borderInlineEnd: borderStyle,
-					borderStartEndRadius: "var(--steps-item-border-radius)",
-					borderEndEndRadius: "var(--steps-item-border-radius)"
+					borderStartEndRadius: varRef("item-border-radius"),
+					borderEndEndRadius: varRef("item-border-radius")
 				},
 				"&-active": {
-					background: "var(--steps-panel-active-bg-color)",
-					borderColor: "var(--steps-panel-active-border-color)",
+					background: varRef("panel-active-bg-color"),
+					borderColor: varRef("panel-active-border-color"),
 					[`${componentCls}-panel-arrow`]: { path: {
-						fill: "var(--steps-panel-active-bg-color)",
-						stroke: "var(--steps-panel-active-border-color)"
+						fill: varRef("panel-active-bg-color"),
+						stroke: varRef("panel-active-border-color")
 					} },
-					[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: { color: "var(--steps-item-icon-active-text-color)" }
+					[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: { color: varRef("item-icon-active-text-color") }
 				}
 			}
 		},
 		{ [`&${componentCls}-small`]: {
-			"--steps-panel-padding": token.paddingXS,
-			"--steps-item-border-radius": borderRadiusSM
+			[varName("panel-padding")]: paddingXS,
+			[varName("item-border-radius")]: borderRadiusSM
 		} },
 		{ [`&${componentCls}-filled`]: { [itemCls]: { "&:not(:first-child)": { clipPath: `polygon(${[
 			`${unit(lineWidthBold)} 0`,
-			"calc(100% + var(--steps-item-base-width)) 0",
-			"calc(100% + var(--steps-item-base-width)) 100%",
+			`calc(100% + ${varRef("item-base-width")}) 0`,
+			`calc(100% + ${varRef("item-base-width")}) 100%`,
 			`${unit(lineWidthBold)} 100%`,
-			`calc(var(--steps-item-base-width) + ${unit(lineWidthBold)}) 50%`
+			`calc(${varRef("item-base-width")} + ${unit(lineWidthBold)}) 50%`
 		].join(",")})` } } } },
 		{ [`&${componentCls}-outlined`]: { [`${componentCls}-panel-arrow`]: {
 			top: calc(lineWidthBold).div(2).mul(-1).equal(),

package/dist/steps/style/progress-dot.js

@@ -1,16 +1,18 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import { getItemWithWidthStyle } from "./util.js";
 
 //#region src/steps/style/progress-dot.ts
 const genDotStyle = (token) => {
-	const { componentCls, iconSize, dotSize, dotCurrentSize, marginXXS, lineWidthBold, fontSizeSM } = token;
+	const { componentCls, iconSize, dotSize, dotCurrentSize, marginXXS, lineWidthBold, fontSizeSM, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}${componentCls}-dot`]: {
-		"--steps-icon-size-active": dotCurrentSize,
-		"--steps-icon-size": dotSize,
-		"--steps-dot-icon-size": dotSize,
-		"--steps-dot-icon-border-width": token.lineWidthBold,
-		"--steps-rail-size": lineWidthBold,
-		"--steps-icon-border-width": lineWidthBold,
+		[varName("icon-size-active")]: dotCurrentSize,
+		[varName("icon-size")]: dotSize,
+		[varName("dot-icon-size")]: dotSize,
+		[varName("dot-icon-border-width")]: lineWidthBold,
+		[varName("rail-size")]: lineWidthBold,
+		[varName("icon-border-width")]: lineWidthBold,
 		[`${itemCls}-custom ${itemCls}-icon`]: { fontSize: fontSizeSM },
 		[`${itemCls}-icon`]: {
 			"position": "relative",
@@ -28,7 +30,7 @@ const genDotStyle = (token) => {
 				transform: "translate(-50%, -50%)"
 			}
 		},
-		[`${itemCls}-active ${itemCls}-icon`]: { "--steps-icon-size": "var(--steps-icon-size-active)" },
+		[`${itemCls}-active ${itemCls}-icon`]: { [varName("icon-size")]: varRef("icon-size-active") },
 		[`&${componentCls}-horizontal`]: { [`&, &${componentCls}-small`]: getItemWithWidthStyle(token, marginXXS) }
 	} };
 };

package/dist/steps/style/progress.js

@@ -1,68 +1,39 @@
-import { unit } from "@antdv-next/cssinjs";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 
 //#region src/steps/style/progress.ts
 const genStepsProgressStyle = (token) => {
-	const { calc, antCls, componentCls, iconSize, iconSizeSM, lineWidthBold, paddingXXS } = token;
+	const { calc, antCls, componentCls, lineWidthBold, motionDurationSlow } = token;
 	const itemCls = `${componentCls}-item`;
-	const progressSize = token.calc(iconSize).add(token.calc(lineWidthBold).mul(4).equal()).equal();
-	const progressSizeSM = token.calc(iconSizeSM).add(token.calc(token.lineWidth).mul(4).equal()).equal();
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	const enhanceSize = calc(lineWidthBold).add(lineWidthBold).equal();
-	return {
-		[`${componentCls}${componentCls}-with-progress`]: {
-			"--steps-item-wrapper-padding-top": enhanceSize,
-			[`${itemCls}${itemCls}-process`]: { [`${itemCls}-icon`]: { position: "relative" } },
-			[`${itemCls}-progress-icon`]: {
-				"&-svg": {
-					"--steps-svg-size": calc(enhanceSize).mul(2).add(`var(--steps-icon-size)`).equal(),
-					"--icon-size-ptg-unitless": `calc(100 / tan(atan2(var(--steps-svg-size),1px)))`,
-					"fontSize": `var(--steps-svg-size)`,
-					"lineHeight": `var(--icon-size-ptg-unitless)`,
-					"position": "absolute",
-					"inset": calc(enhanceSize).mul(-1).equal(),
-					"width": "auto",
-					"height": "auto"
-				},
-				"&-circle": {
-					"lineHeight": `var(--icon-size-ptg-unitless)`,
-					"strokeWidth": calc(`var(--icon-size-ptg-unitless)`).mul(lineWidthBold).equal(),
-					"--progress-r": calc(`var(--steps-svg-size)`).sub(lineWidthBold).mul(`var(--icon-size-ptg-unitless)`).div(2).equal(),
-					"r": `var(--progress-r)`,
-					"fill": "none",
-					"cx": 50,
-					"cy": 50,
-					"transition": `all ${token.motionDurationSlow} ease-in-out`,
-					"&-rail": { stroke: token.colorSplit },
-					"&-ptg": { stroke: token.colorPrimary }
-				}
-			}
-		},
-		[`&${componentCls}-with-progress11`]: {
-			[itemCls]: {
-				paddingTop: paddingXXS,
-				paddingInlineStart: paddingXXS
-			},
-			[`${itemCls}-icon`]: {
-				position: "relative",
-				[`${antCls}-progress`]: {
-					"position": "absolute",
-					"left": {
-						_skip_check_: true,
-						value: "50%"
-					},
-					"top": "50%",
-					"transform": "translate(-50%, -50%)",
-					"&-body": {
-						width: `${unit(progressSize)} !important`,
-						height: `${unit(progressSize)} !important`
-					}
-				}
+	return { [`${componentCls}${componentCls}-with-progress`]: {
+		[varName("item-wrapper-padding-top")]: enhanceSize,
+		[`${itemCls}${itemCls}-process`]: { [`${itemCls}-icon`]: { position: "relative" } },
+		[`${itemCls}-progress-icon`]: {
+			"&-svg": {
+				[varName("svg-size")]: calc(enhanceSize).mul(2).add(varRef("icon-size")).equal(),
+				[varName("icon-size-ptg-unitless")]: `calc(100 / tan(atan2(${varRef("svg-size")}, 1px)))`,
+				fontSize: varRef("svg-size"),
+				lineHeight: varRef("icon-size-ptg-unitless"),
+				position: "absolute",
+				inset: calc(enhanceSize).mul(-1).equal(),
+				width: "auto",
+				height: "auto"
 			},
-			[`&${componentCls}-small`]: { [`${itemCls}-icon ${antCls}-progress-body`]: {
-				width: `${unit(progressSizeSM)} !important`,
-				height: `${unit(progressSizeSM)} !important`
-			} }
+			"&-circle": {
+				"lineHeight": varRef("icon-size-ptg-unitless"),
+				"strokeWidth": calc(varRef("icon-size-ptg-unitless")).mul(lineWidthBold).equal(),
+				[varName("progress-radius")]: calc(varRef("svg-size")).sub(lineWidthBold).mul(varRef("icon-size-ptg-unitless")).div(2).equal(),
+				"r": varRef("progress-radius"),
+				"fill": "none",
+				"cx": 50,
+				"cy": 50,
+				"transition": `all ${motionDurationSlow} ease-in-out`,
+				"&-rail": { stroke: token.colorSplit },
+				"&-ptg": { stroke: token.colorPrimary }
+			}
 		}
-	};
+	} };
 };
 var progress_default = genStepsProgressStyle;
 

package/dist/steps/style/rtl.js

@@ -1,20 +1,22 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import { unit } from "@antdv-next/cssinjs";
 
 //#region src/steps/style/rtl.ts
 const genRTLStyle = (token) => {
-	const { componentCls, lineWidthBold } = token;
+	const { componentCls, lineWidthBold, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}${componentCls}-rtl`]: {
 		direction: "rtl",
 		[`&${componentCls}-navigation${componentCls}-horizontal`]: { [`${itemCls}:after`]: { transform: "translateY(-50%) rotate(-45deg)" } },
 		[`&${componentCls}-panel`]: {
 			[`${componentCls}-panel-arrow`]: { transform: `scaleX(-1)` },
 			[`&${componentCls}-filled`]: { [itemCls]: { "&:not(:first-child)": { clipPath: `polygon(${[
-				`calc(0px - var(--steps-item-base-width)) 0px`,
+				`calc(0px - ${varRef("item-base-width")}) 0px`,
 				`calc(100% - ${unit(lineWidthBold)}) 0px`,
-				`calc(100% - var(--steps-item-base-width) - ${unit(lineWidthBold)}) 50%`,
+				`calc(100% - ${varRef("item-base-width")} - ${unit(lineWidthBold)}) 50%`,
 				`calc(100% - ${unit(lineWidthBold)}) 100%`,
-				`calc(0px - var(--steps-item-base-width)) 100%`
+				`calc(0px - ${varRef("item-base-width")}) 100%`
 			].join(",")})` } } }
 		}
 	} };

package/dist/steps/style/small.js

@@ -1,16 +1,18 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import { getItemWithWidthStyle } from "./util.js";
 
 //#region src/steps/style/small.ts
 const genSmallStyle = (token) => {
-	const { componentCls, iconSizeSM, fontSize, lineHeight, marginXS } = token;
+	const { componentCls, iconSizeSM, fontSize, lineHeight, marginXS, fontHeight, marginSM, paddingXS, antCls } = token;
+	const [varName] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}${componentCls}-small`]: {
-		"--steps-icon-size": iconSizeSM,
-		"--steps-title-horizontal-item-margin": token.marginSM,
-		"--steps-title-vertical-row-gap": token.paddingXS,
-		"--steps-title-font-size": fontSize,
-		"--steps-title-line-height": lineHeight,
-		"--steps-title-horizontal-rail-margin": token.marginXS,
-		"--steps-title-horizontal-title-height": token.fontHeight,
+		[varName("icon-size")]: iconSizeSM,
+		[varName("title-horizontal-item-margin")]: marginSM,
+		[varName("title-vertical-row-gap")]: paddingXS,
+		[varName("title-font-size")]: fontSize,
+		[varName("title-line-height")]: lineHeight,
+		[varName("title-horizontal-rail-margin")]: marginXS,
+		[varName("title-horizontal-title-height")]: fontHeight,
 		[`&${componentCls}-horizontal${componentCls}-title-vertical`]: getItemWithWidthStyle(token, marginXS)
 	} };
 };

package/dist/steps/style/status.js

@@ -1,64 +1,67 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/status.ts
 const STATUS_WAIT = "wait";
 const STATUS_PROCESS = "process";
 const STATUS_FINISH = "finish";
 const STATUS_ERROR = "error";
 const genStatusStyle = (token) => {
-	const { componentCls, colorTextDisabled, colorTextLightSolid, colorPrimary, colorTextLabel, colorError, colorText, colorTextDescription, colorBgContainer, colorPrimaryHover } = token;
+	const { componentCls, colorTextDisabled, colorTextLightSolid, colorPrimary, colorTextLabel, colorError, colorErrorHover, colorErrorBgFilledHover, colorFillTertiary, colorErrorBg, colorPrimaryBgHover, colorPrimaryBg, colorText, colorTextDescription, colorBgContainer, colorPrimaryHover, lineType, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [componentCls]: [
 		{
 			[itemCls]: {
-				"--steps-item-solid-line-color": "#000",
-				"--steps-item-title-color": "#000",
-				"--steps-item-content-color": "#000",
-				"--steps-item-subtitle-color": "var(--steps-item-content-color)",
-				"--steps-item-icon-custom-color": "#000",
-				"--steps-item-icon-bg-color": "#000",
-				"--steps-item-icon-border-color": "#000",
-				"--steps-item-icon-text-color": "#fff",
-				"--steps-item-icon-dot-color": "#000",
-				"--steps-item-icon-dot-bg-color": "var(--steps-item-icon-dot-color)",
-				"--steps-item-icon-dot-border-color": "var(--steps-item-icon-dot-color)",
-				"--steps-item-text-hover-color": "#000",
-				"--steps-item-icon-bg-hover-color": `var(--steps-item-icon-bg-color)`,
-				"--steps-item-icon-border-hover-color": `var(--steps-item-icon-border-color)`,
-				"--steps-item-icon-text-hover-color": `var(--steps-item-icon-text-color)`,
-				"--steps-item-content-active-color": `var(--steps-item-content-color)`,
-				"--steps-item-icon-active-bg-color": "var(--steps-item-icon-bg-color)",
-				"--steps-item-icon-active-border-color": "var(--steps-item-icon-border-color)",
-				"--steps-item-icon-active-text-color": "var(--steps-item-icon-text-color)",
-				"--steps-item-process-rail-line-style": token.lineType
+				[varName("item-solid-line-color")]: "#000",
+				[varName("item-title-color")]: "#000",
+				[varName("item-content-color")]: "#000",
+				[varName("item-subtitle-color")]: varRef("item-content-color"),
+				[varName("item-icon-custom-color")]: "#000",
+				[varName("item-icon-bg-color")]: "#000",
+				[varName("item-icon-border-color")]: "#000",
+				[varName("item-icon-text-color")]: "#fff",
+				[varName("item-icon-dot-color")]: "#000",
+				[varName("item-icon-dot-bg-color")]: varRef("item-icon-dot-color"),
+				[varName("item-icon-dot-border-color")]: varRef("item-icon-dot-color"),
+				[varName("item-text-hover-color")]: "#000",
+				[varName("item-icon-bg-hover-color")]: varRef("item-icon-bg-color"),
+				[varName("item-icon-border-hover-color")]: varRef("item-icon-border-color"),
+				[varName("item-icon-text-hover-color")]: varRef("item-icon-text-color"),
+				[varName("item-content-active-color")]: varRef("item-content-color"),
+				[varName("item-icon-active-bg-color")]: varRef("item-icon-bg-color"),
+				[varName("item-icon-active-border-color")]: varRef("item-icon-border-color"),
+				[varName("item-icon-active-text-color")]: varRef("item-icon-text-color"),
+				[varName("item-process-rail-line-style")]: lineType
 			},
-			[`${itemCls}-rail`]: { borderColor: `var(--steps-item-solid-line-color)` },
-			[`${itemCls}-custom ${itemCls}-icon`]: { color: `var(--steps-item-icon-custom-color)` },
-			[`${itemCls}-title`]: { color: `var(--steps-item-title-color)` },
-			[`${itemCls}-subtitle`]: { color: `var(--steps-item-subtitle-color)` },
-			[`${itemCls}-content`]: { color: `var(--steps-item-content-color)` },
+			[`${itemCls}-rail`]: { borderColor: varRef("item-solid-line-color") },
+			[`${itemCls}-custom ${itemCls}-icon`]: { color: varRef("item-icon-custom-color") },
+			[`${itemCls}-title`]: { color: varRef("item-title-color") },
+			[`${itemCls}-subtitle`]: { color: varRef("item-subtitle-color") },
+			[`${itemCls}-content`]: { color: varRef("item-content-color") },
 			[`${itemCls}-active ${itemCls}-icon`]: {},
-			[`${itemCls}-active ${itemCls}-content`]: { color: `var(--steps-item-content-active-color)` },
-			[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-title, ${itemCls}-content`]: { color: `var(--steps-item-text-hover-color)` } },
+			[`${itemCls}-active ${itemCls}-content`]: { color: varRef("item-content-active-color") },
+			[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-title, ${itemCls}-content`]: { color: varRef("item-text-hover-color") } },
 			[`&:not(${componentCls}-dot)`]: { [`${itemCls}:not(${itemCls}-custom)`]: {
 				[`${itemCls}-icon`]: {
-					background: `var(--steps-item-icon-bg-color)`,
-					borderColor: `var(--steps-item-icon-border-color)`,
-					color: `var(--steps-item-icon-text-color)`
+					background: varRef("item-icon-bg-color"),
+					borderColor: varRef("item-icon-border-color"),
+					color: varRef("item-icon-text-color")
 				},
 				[`&[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-icon`]: {
-					background: `var(--steps-item-icon-bg-hover-color)`,
-					borderColor: `var(--steps-item-icon-border-hover-color)`,
-					color: `var(--steps-item-icon-text-hover-color)`
+					background: varRef("item-icon-bg-hover-color"),
+					borderColor: varRef("item-icon-border-hover-color"),
+					color: varRef("item-icon-text-hover-color")
 				} },
 				[`&${itemCls}-active`]: { [`${itemCls}-icon`]: {
-					background: `var(--steps-item-icon-active-bg-color)`,
-					borderColor: `var(--steps-item-icon-active-border-color)`,
-					color: `var(--steps-item-icon-active-text-color)`
+					background: varRef("item-icon-active-bg-color"),
+					borderColor: varRef("item-icon-active-border-color"),
+					color: varRef("item-icon-active-text-color")
 				} }
 			} },
 			[`&${componentCls}-dot`]: { [`${itemCls}-icon`]: {
-				background: `var(--steps-item-icon-dot-bg-color)`,
-				borderColor: `var(--steps-item-icon-dot-border-color)`,
-				color: `var(--steps-item-icon-dot-color)`,
+				background: varRef("item-icon-dot-bg-color"),
+				borderColor: varRef("item-icon-dot-border-color"),
+				color: varRef("item-icon-dot-color"),
 				[`&${itemCls}-icon-dot-custom`]: {
 					background: "transparent",
 					border: "none"
@@ -67,111 +70,111 @@ const genStatusStyle = (token) => {
 		},
 		{
 			[`${itemCls}-${STATUS_WAIT}`]: {
-				"--steps-item-icon-custom-color": colorTextDisabled,
-				"--steps-item-title-color": colorTextDescription,
-				"--steps-item-content-color": colorTextDescription,
-				"--steps-item-content-active-color": colorText,
-				"--steps-item-text-hover-color": colorPrimaryHover
+				[varName("item-icon-custom-color")]: colorTextDisabled,
+				[varName("item-title-color")]: colorTextDescription,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
 			},
-			[`${itemCls}-rail-${STATUS_WAIT}`]: { "--steps-item-solid-line-color": colorTextDisabled },
+			[`${itemCls}-rail-${STATUS_WAIT}`]: { [varName("item-solid-line-color")]: colorTextDisabled },
 			[`${itemCls}-${STATUS_PROCESS}`]: {
-				"--steps-item-icon-custom-color": colorPrimary,
-				"--steps-item-title-color": colorText,
-				"--steps-item-content-color": colorTextDescription,
-				"--steps-item-content-active-color": colorText,
-				"--steps-item-text-hover-color": colorPrimaryHover
+				[varName("item-icon-custom-color")]: colorPrimary,
+				[varName("item-title-color")]: colorText,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
 			},
 			[`${itemCls}-rail-${STATUS_PROCESS}`]: {
-				"--steps-item-solid-line-color": colorPrimary,
-				"--steps-rail-line-style": "var(--steps-item-process-rail-line-style)"
+				[varName("item-solid-line-color")]: colorPrimary,
+				[varName("rail-line-style")]: varRef("item-process-rail-line-style")
 			},
 			[`${itemCls}-${STATUS_FINISH}`]: {
-				"--steps-item-icon-custom-color": colorPrimary,
-				"--steps-item-title-color": colorText,
-				"--steps-item-content-color": colorTextDescription,
-				"--steps-item-content-active-color": colorText,
-				"--steps-item-text-hover-color": colorPrimaryHover
+				[varName("item-icon-custom-color")]: colorPrimary,
+				[varName("item-title-color")]: colorText,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
 			},
-			[`${itemCls}-rail-${STATUS_FINISH}`]: { "--steps-item-solid-line-color": colorPrimary },
+			[`${itemCls}-rail-${STATUS_FINISH}`]: { [varName("item-solid-line-color")]: colorPrimary },
 			[`${itemCls}-${STATUS_ERROR}`]: {
-				"--steps-item-icon-custom-color": colorError,
-				"--steps-item-title-color": colorError,
-				"--steps-item-content-color": colorError,
-				"--steps-item-content-active-color": colorError,
-				"--steps-item-text-hover-color": token.colorErrorHover
+				[varName("item-icon-custom-color")]: colorError,
+				[varName("item-title-color")]: colorError,
+				[varName("item-content-color")]: colorError,
+				[varName("item-content-active-color")]: colorError,
+				[varName("item-text-hover-color")]: colorErrorHover
 			},
-			[`${itemCls}-rail-${STATUS_ERROR}`]: { "--steps-item-solid-line-color": colorError }
+			[`${itemCls}-rail-${STATUS_ERROR}`]: { [varName("item-solid-line-color")]: colorError }
 		},
 		{ [`&${componentCls}-filled`]: {
-			[itemCls]: { "--steps-item-icon-dot-border-color": "transparent" },
+			[itemCls]: { [varName("item-icon-dot-border-color")]: "transparent" },
 			[`${itemCls}-${STATUS_WAIT}`]: {
-				"--steps-item-icon-bg-color": token.colorFillTertiary,
-				"--steps-item-icon-border-color": "transparent",
-				"--steps-item-icon-text-color": colorTextLabel,
-				"--steps-item-icon-dot-bg-color": colorTextDisabled,
-				"--steps-item-icon-bg-hover-color": token.colorPrimaryBgHover,
-				"--steps-item-icon-border-hover-color": "transparent",
-				"--steps-item-icon-text-hover-color": colorPrimary,
-				"--steps-item-icon-active-bg-color": colorPrimary,
-				"--steps-item-icon-active-border-color": "transparent",
-				"--steps-item-icon-active-text-color": colorTextLightSolid
+				[varName("item-icon-bg-color")]: colorFillTertiary,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorTextLabel,
+				[varName("item-icon-dot-bg-color")]: colorTextDisabled,
+				[varName("item-icon-bg-hover-color")]: colorPrimaryBgHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorPrimary,
+				[varName("item-icon-active-bg-color")]: colorPrimary,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
 			},
 			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
-				"--steps-item-icon-bg-color": token.colorPrimaryBg,
-				"--steps-item-icon-border-color": "transparent",
-				"--steps-item-icon-text-color": colorPrimary,
-				"--steps-item-icon-dot-bg-color": colorPrimary,
-				"--steps-item-icon-bg-hover-color": token.colorPrimaryBgHover,
-				"--steps-item-icon-border-hover-color": "transparent",
-				"--steps-item-icon-text-hover-color": colorPrimary,
-				"--steps-item-icon-active-bg-color": colorPrimary,
-				"--steps-item-icon-active-border-color": "transparent",
-				"--steps-item-icon-active-text-color": colorTextLightSolid
+				[varName("item-icon-bg-color")]: colorPrimaryBg,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorPrimary,
+				[varName("item-icon-dot-bg-color")]: colorPrimary,
+				[varName("item-icon-bg-hover-color")]: colorPrimaryBgHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorPrimary,
+				[varName("item-icon-active-bg-color")]: colorPrimary,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
 			},
 			[`${itemCls}-${STATUS_ERROR}`]: {
-				"--steps-item-icon-bg-color": token.colorErrorBg,
-				"--steps-item-icon-border-color": "transparent",
-				"--steps-item-icon-text-color": colorError,
-				"--steps-item-icon-dot-bg-color": colorError,
-				"--steps-item-icon-bg-hover-color": token.colorErrorBgFilledHover,
-				"--steps-item-icon-border-hover-color": "transparent",
-				"--steps-item-icon-text-hover-color": colorError,
-				"--steps-item-icon-active-bg-color": colorError,
-				"--steps-item-icon-active-border-color": "transparent",
-				"--steps-item-icon-active-text-color": colorTextLightSolid
+				[varName("item-icon-bg-color")]: colorErrorBg,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorError,
+				[varName("item-icon-dot-bg-color")]: colorError,
+				[varName("item-icon-bg-hover-color")]: colorErrorBgFilledHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorError,
+				[varName("item-icon-active-bg-color")]: colorError,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
 			}
 		} },
 		{ [`&${componentCls}-outlined`]: {
-			[itemCls]: { "--steps-item-icon-dot-bg-color": "transparent" },
+			[itemCls]: { [varName("item-icon-dot-bg-color")]: "transparent" },
 			[`${itemCls}-${STATUS_WAIT}`]: {
-				"--steps-item-icon-bg-color": colorBgContainer,
-				"--steps-item-icon-border-color": colorTextDisabled,
-				"--steps-item-icon-text-color": colorTextDisabled,
-				"--steps-item-icon-dot-color": colorTextDisabled,
-				"--steps-item-icon-bg-hover-color": "transparent",
-				"--steps-item-icon-border-hover-color": colorPrimaryHover,
-				"--steps-item-icon-text-hover-color": colorPrimaryHover,
-				"--steps-item-icon-active-bg-color": token.colorFillTertiary
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorTextDisabled,
+				[varName("item-icon-text-color")]: colorTextDisabled,
+				[varName("item-icon-dot-color")]: colorTextDisabled,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-text-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-active-bg-color")]: colorFillTertiary
 			},
 			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
-				"--steps-item-icon-bg-color": colorBgContainer,
-				"--steps-item-icon-border-color": colorPrimary,
-				"--steps-item-icon-text-color": colorPrimary,
-				"--steps-item-icon-dot-color": colorPrimary,
-				"--steps-item-icon-bg-hover-color": "transparent",
-				"--steps-item-icon-border-hover-color": token.colorPrimaryHover,
-				"--steps-item-icon-text-hover-color": token.colorPrimaryHover,
-				"--steps-item-icon-active-bg-color": token.colorPrimaryBg
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorPrimary,
+				[varName("item-icon-text-color")]: colorPrimary,
+				[varName("item-icon-dot-color")]: colorPrimary,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-text-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-active-bg-color")]: colorPrimaryBg
 			},
 			[`${itemCls}-${STATUS_ERROR}`]: {
-				"--steps-item-icon-bg-color": colorBgContainer,
-				"--steps-item-icon-border-color": colorError,
-				"--steps-item-icon-text-color": colorError,
-				"--steps-item-icon-dot-color": colorError,
-				"--steps-item-icon-bg-hover-color": "transparent",
-				"--steps-item-icon-border-hover-color": token.colorErrorHover,
-				"--steps-item-icon-text-hover-color": token.colorErrorHover,
-				"--steps-item-icon-active-bg-color": token.colorErrorBg
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorError,
+				[varName("item-icon-text-color")]: colorError,
+				[varName("item-icon-dot-color")]: colorError,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorErrorHover,
+				[varName("item-icon-text-hover-color")]: colorErrorHover,
+				[varName("item-icon-active-bg-color")]: colorErrorBg
 			}
 		} }
 	] };