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

package/dist/steps/style/index.js

@@ -1,5 +1,5 @@
 import { resetComponent, textEllipsis } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import { mergeToken } from "../../theme/internal.js";
 import horizontal_default from "./horizontal.js";
 import icon_default from "./icon.js";
@@ -16,20 +16,21 @@ import vertical_default from "./vertical.js";
 
 //#region src/steps/style/index.ts
 const genBasicStyle = (token) => {
-	const { componentCls } = token;
+	const { componentCls, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [componentCls]: {
-		"--steps-title-font-size": token.fontSizeLG,
-		"--steps-title-line-height": token.lineHeightLG,
-		"--steps-subtitle-font-size": token.fontSize,
-		"--steps-subtitle-line-height": token.lineHeight,
-		"--steps-item-wrapper-padding-top": "0px",
-		"--steps-rail-size": token.lineWidth,
-		"--steps-rail-line-style": token.lineType,
+		[varName("title-font-size")]: token.fontSizeLG,
+		[varName("title-line-height")]: token.lineHeightLG,
+		[varName("subtitle-font-size")]: token.fontSize,
+		[varName("subtitle-line-height")]: token.lineHeight,
+		[varName("item-wrapper-padding-top")]: "0px",
+		[varName("rail-size")]: token.lineWidth,
+		[varName("rail-line-style")]: token.lineType,
 		...resetComponent(token),
-		"display": "flex",
-		"flexWrap": "nowrap",
-		"alignItems": "flex-start",
+		display: "flex",
+		flexWrap: "nowrap",
+		alignItems: "flex-start",
 		[itemCls]: {
 			flex: "none",
 			position: "relative"
@@ -37,7 +38,7 @@ const genBasicStyle = (token) => {
 		[`${itemCls}-wrapper`]: {
 			display: "flex",
 			flexWrap: "nowrap",
-			paddingTop: `var(--steps-item-wrapper-padding-top)`
+			paddingTop: varRef("item-wrapper-padding-top")
 		},
 		[`${itemCls}-header`]: {
 			display: "flex",
@@ -46,15 +47,15 @@ const genBasicStyle = (token) => {
 		},
 		[`${itemCls}-title`]: {
 			color: token.colorText,
-			fontSize: `var(--steps-title-font-size)`,
-			lineHeight: `var(--steps-title-line-height)`,
+			fontSize: varRef("title-font-size"),
+			lineHeight: varRef("title-line-height"),
 			wordBreak: "break-word"
 		},
 		[`${itemCls}-subtitle`]: {
 			color: token.colorTextDescription,
 			fontWeight: "normal",
-			fontSize: `var(--steps-subtitle-font-size)`,
-			lineHeight: `var(--steps-subtitle-line-height)`,
+			fontSize: varRef("subtitle-font-size"),
+			lineHeight: varRef("subtitle-line-height"),
 			marginInlineStart: token.marginXS,
 			wordBreak: "break-word"
 		},
@@ -65,7 +66,7 @@ const genBasicStyle = (token) => {
 			wordBreak: "break-word"
 		},
 		[`${itemCls}-rail`]: {
-			borderStyle: "var(--steps-rail-line-style)",
+			borderStyle: varRef("rail-line-style"),
 			borderWidth: 0
 		},
 		[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content, ${itemCls}-rail`]: { transition: `all ${token.motionDurationSlow}` },

package/dist/steps/style/inline.js

@@ -1,28 +1,31 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/inline.ts
 const genInlineStyle = (token) => {
-	const { componentCls, inlineDotSize } = token;
-	const containerPaddingTop = token.calc(token.paddingXS).add(token.lineWidth).equal();
+	const { componentCls, inlineDotSize, paddingXS, lineWidth, antCls, calc } = token;
+	const containerPaddingTop = calc(paddingXS).add(lineWidth).equal();
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}-inline`]: {
-		"--steps-items-offset": "0",
-		"--steps-item-wrapper-padding-top": containerPaddingTop,
+		[varName("items-offset")]: "0",
+		[varName("item-wrapper-padding-top")]: containerPaddingTop,
 		"display": "inline-flex",
 		"&:before": {
 			content: "\"\"",
-			flex: "var(--steps-items-offset)"
+			flex: varRef("items-offset")
 		},
 		[itemCls]: {
-			"--steps-title-vertical-row-gap": token.paddingXS,
-			"--steps-icon-size": inlineDotSize,
-			"--steps-icon-size-active": inlineDotSize,
-			"--steps-title-font-size": token.fontSizeSM,
-			"--steps-title-line-height": token.lineHeightSM,
-			"--steps-item-title-color": token.colorTextSecondary,
-			"--steps-subtitle-font-size": token.fontSizeSM,
-			"--steps-subtitle-line-height": token.lineHeightSM,
-			"--steps-item-subtitle-color": token.colorTextQuaternary,
-			"--steps-rail-size": token.lineWidth,
-			"--steps-title-horizontal-rail-gap": "0px",
+			[varName("title-vertical-row-gap")]: paddingXS,
+			[varName("icon-size")]: inlineDotSize,
+			[varName("icon-size-active")]: inlineDotSize,
+			[varName("title-font-size")]: token.fontSizeSM,
+			[varName("title-line-height")]: token.lineHeightSM,
+			[varName("item-title-color")]: token.colorTextSecondary,
+			[varName("subtitle-font-size")]: token.fontSizeSM,
+			[varName("subtitle-line-height")]: token.lineHeightSM,
+			[varName("item-subtitle-color")]: token.colorTextQuaternary,
+			[varName("rail-size")]: token.lineWidth,
+			[varName("title-horizontal-rail-gap")]: "0px",
 			"flex": 1,
 			"&-wrapper": {
 				"paddingInline": token.paddingXXS,

package/dist/steps/style/label-placement.js

@@ -1,21 +1,23 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import { getItemWithWidthStyle } from "./util.js";
 
 //#region src/steps/style/label-placement.ts
 const genLabelPlacementStyle = (token) => {
-	const { componentCls, descriptionMaxWidth, marginXS, fontHeightLG, calc } = token;
+	const { componentCls, descriptionMaxWidth, marginXS, fontHeightLG, margin, paddingSM, marginXXS, antCls, calc } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return {
 		[componentCls]: {
-			"--steps-icon-size-max": "max(var(--steps-icon-size), var(--steps-icon-size-active, var(--steps-icon-size)))",
-			[`${itemCls}-icon`]: { marginBlockStart: `calc((var(--steps-heading-height) - var(--steps-icon-size)) / 2)` }
+			[varName("icon-size-max")]: `max(${varRef("icon-size")}, ${varRef("icon-size-active", varRef("icon-size"))})`,
+			[`${itemCls}-icon`]: { marginBlockStart: `calc((${varRef("heading-height")} - ${varRef("icon-size")}) / 2)` }
 		},
 		[`${componentCls}-title-horizontal`]: {
-			"--steps-title-horizontal-item-margin": token.margin,
-			"--steps-title-horizontal-rail-margin": token.margin,
-			"--steps-title-horizontal-title-height": fontHeightLG,
-			"--steps-heading-height": `max(var(--steps-icon-size), var(--steps-title-horizontal-title-height))`,
+			[varName("title-horizontal-item-margin")]: margin,
+			[varName("title-horizontal-rail-margin")]: margin,
+			[varName("title-horizontal-title-height")]: fontHeightLG,
+			[varName("heading-height")]: `max(${varRef("icon-size")}, ${varRef("title-horizontal-title-height")})`,
 			[`&${componentCls}-horizontal, &${componentCls}-horizontal-alternate`]: {
-				[`${itemCls}:not(:first-child)`]: { marginInlineStart: `var(--steps-title-horizontal-item-margin)` },
+				[`${itemCls}:not(:first-child)`]: { marginInlineStart: varRef("title-horizontal-item-margin") },
 				[`${itemCls}:last-child`]: { flex: "0 1 auto" },
 				[`${itemCls}-wrapper`]: { columnGap: token.marginXS }
 			},
@@ -23,32 +25,32 @@ const genLabelPlacementStyle = (token) => {
 				[`${itemCls}-wrapper`]: { columnGap: token.margin },
 				[`${itemCls}-empty-header`]: {
 					[`${itemCls}-header`]: { minHeight: "auto" },
-					[`${itemCls}-content`]: { marginTop: calc("var(--steps-heading-height)").sub(token.fontHeight).div(2).equal() }
+					[`${itemCls}-content`]: { marginTop: calc(varRef("heading-height")).sub(token.fontHeight).div(2).equal() }
 				}
 			},
 			[`${itemCls}-section`]: {
 				flex: 1,
 				minWidth: 0
 			},
-			[`${itemCls}-header`]: { minHeight: "var(--steps-heading-height)" },
+			[`${itemCls}-header`]: { minHeight: varRef("heading-height") },
 			[`${itemCls}-title`]: { flex: "0 1 auto" },
 			[`${itemCls}-content`]: { maxWidth: descriptionMaxWidth },
 			[`${itemCls}-subtitle`]: { flex: "0 9999 auto" },
 			[`&${componentCls}-horizontal ${itemCls}-rail`]: {
-				"--steps-item-wrapper-padding-top": "0px",
-				"flex": 1,
-				"marginInlineStart": `var(--steps-title-horizontal-rail-margin)`
+				[varName("item-wrapper-padding-top")]: "0px",
+				flex: "1 1 0%",
+				marginInlineStart: varRef("title-horizontal-rail-margin")
 			}
 		},
 		[`${componentCls}-title-vertical`]: {
-			"--steps-title-vertical-row-gap": token.paddingSM,
-			"--steps-title-horizontal-rail-gap": token.marginXXS,
-			"--steps-heading-height": "var(--steps-icon-size-max)",
+			[varName("title-vertical-row-gap")]: paddingSM,
+			[varName("title-horizontal-rail-gap")]: marginXXS,
+			[varName("heading-height")]: varRef("icon-size-max"),
 			[`> ${itemCls}`]: {
-				flex: 1,
+				flex: "1 1 0%",
 				[`${itemCls}-wrapper`]: {
 					flexDirection: "column",
-					rowGap: `var(--steps-title-vertical-row-gap)`,
+					rowGap: varRef("title-vertical-row-gap"),
 					alignItems: "center"
 				},
 				[`${itemCls}-section`]: { alignSelf: "stretch" },
@@ -64,8 +66,8 @@ const genLabelPlacementStyle = (token) => {
 				[`${itemCls}-rail`]: {
 					position: "absolute",
 					top: 0,
-					width: `calc(100% - var(--steps-icon-size) - var(--steps-title-horizontal-rail-gap) * 2)`,
-					insetInlineStart: `calc(50% + var(--steps-icon-size) / 2 + var(--steps-title-horizontal-rail-gap))`
+					width: `calc(100% - ${varRef("icon-size")} - ${varRef("title-horizontal-rail-gap")} * 2)`,
+					insetInlineStart: `calc(50% + ${varRef("icon-size")} / 2 + ${varRef("title-horizontal-rail-gap")})`
 				}
 			},
 			...getItemWithWidthStyle(token, marginXS, {

package/dist/steps/style/nav.js

@@ -1,10 +1,12 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import { unit } from "@antdv-next/cssinjs";
 
 //#region src/steps/style/nav.ts
 const genLegacyNavStyle = (token) => {
-	const { componentCls, fontSizeIcon, calc, navContentMaxWidth, navArrowColor, colorPrimary, motionDurationSlow } = token;
+	const { componentCls, fontSizeIcon, navContentMaxWidth, navArrowColor, colorPrimary, motionDurationSlow, antCls, calc } = token;
 	const itemCls = `${componentCls}-item`;
 	const stepsNavActiveColor = colorPrimary;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}${componentCls}-navigation`]: {
 		[itemCls.repeat(4)]: {
 			"display": "flex",
@@ -33,10 +35,10 @@ const genLegacyNavStyle = (token) => {
 				content: "\"\""
 			},
 			[`&${itemCls}-active`]: {
-				"--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)"
+				[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")
 			}
 		},
 		[`&${componentCls}-horizontal`]: { [itemCls]: {

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)
 	} };
 };