antdv-next 1.0.0-alpha.4 → 1.0.0-beta.1

package/dist/steps/index.js

@@ -1,4 +1,5 @@
 import { useComponentBaseConfig } from "../config-provider/context.js";
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
 import { devUseWarning, isDev } from "../_util/warning.js";
 import "../_util/hooks/index.js";
@@ -25,7 +26,7 @@ function _isSlot(s) {
 const waveEffectClassNames = { itemIcon: TARGET_CLS };
 const Steps = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
 	const internalContent = useInternalContext();
-	const { direction: rtlDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, prefixCls } = useComponentBaseConfig("steps", props);
+	const { direction: rtlDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, prefixCls, rootPrefixCls } = useComponentBaseConfig("steps", props);
 	const { size, items, responsive, type, classes, styles } = toPropsRefs(props, "size", "items", "responsive", "type", "classes", "styles");
 	const components = computed(() => {
 		return {
@@ -35,10 +36,11 @@ const Steps = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 	});
 	const itemIconCls = computed(() => `${prefixCls.value}-item-icon`);
 	const [hashId, cssVarCls] = style_default(prefixCls);
+	const [varName] = genCssVar(rootPrefixCls.value, "cmp-steps");
 	const mergedSize = useSize(size);
 	const mergedItems = computed(() => (items.value || []).filter(Boolean));
 	const breakpoint = useBreakpoint_default(responsive);
-	const xl = computed(() => breakpoint.value?.xl);
+	const xs = computed(() => breakpoint.value?.xs);
 	const mergedType = computed(() => {
 		if (type.value && type.value !== "default") return type.value;
 		if (props.progressDot) return "dot";
@@ -49,7 +51,7 @@ const Steps = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 	const mergedOrientation = computed(() => {
 		const nextOrientation = props.orientation || props.direction;
 		if (mergedType.value === "panel") return "horizontal";
-		return responsive.value && xl.value || nextOrientation === "vertical" ? "vertical" : "horizontal";
+		return responsive.value && xs.value || nextOrientation === "vertical" ? "vertical" : "horizontal";
 	});
 	const mergedTitlePlacement = computed(() => {
 		if (isDot.value || mergedOrientation.value === "vertical") return mergedOrientation.value === "vertical" ? "horizontal" : "vertical";
@@ -104,6 +106,7 @@ const Steps = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 						}();
 						numNode = createVNode(ProgressIcon_default, {
 							"prefixCls": prefixCls.value,
+							"rootPrefixCls": rootPrefixCls.value,
 							"percent": mergedPercent.value
 						}, _isSlot(numNode) ? numNode : { default: () => [_numNode] });
 					}
@@ -146,7 +149,7 @@ const Steps = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 			return createVNode(Fragment, null, [itemNode, createVNode(PanelArrow_default, { "prefixCls": prefixCls.value }, null)]);
 		} : void 0;
 		const mergedStyle = {
-			"--steps-items-offset": offset,
+			[varName("items-offset")]: `${offset}`,
 			...contextStyle.value,
 			...style
 		};

package/dist/steps/style/horizontal.js

@@ -1,20 +1,23 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/horizontal.ts
 const genHorizontalStyle = (token) => {
-	const { componentCls } = token;
+	const { componentCls, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}-horizontal`]: { [`> ${itemCls}`]: {
 		flex: "1 1 auto",
 		minWidth: token.iconSize,
 		[`${itemCls}-rail`]: {
-			"--steps-horizontal-rail-margin": "calc(var(--steps-icon-size-max) / 2 + var(--steps-item-wrapper-padding-top))",
-			"position": "static",
-			"marginTop": "var(--steps-horizontal-rail-margin)",
-			"width": "auto",
-			"borderBlockStartWidth": "var(--steps-rail-size)",
-			"flex": 1,
-			"minWidth": 0,
-			"alignSelf": "flex-start",
-			"transform": "translateY(-50%)"
+			[varName("horizontal-rail-margin")]: `calc(${varRef("icon-size-max")} / 2 + ${varRef("item-wrapper-padding-top")})`,
+			position: "static",
+			marginTop: varRef("horizontal-rail-margin"),
+			width: "auto",
+			borderBlockStartWidth: varRef("rail-size"),
+			flex: 1,
+			minWidth: 0,
+			alignSelf: "flex-start",
+			transform: "translateY(-50%)"
 		}
 	} } };
 };

package/dist/steps/style/icon.js

@@ -1,13 +1,16 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/icon.ts
 const genIconStyle = (token) => {
-	const { componentCls, customIconFontSize, motionDurationSlow } = token;
+	const { componentCls, customIconFontSize, motionDurationSlow, iconSize, lineWidth, lineType, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [componentCls]: {
-		"--steps-icon-size": token.iconSize,
-		"--steps-icon-border-width": token.lineWidth,
+		[varName("icon-size")]: iconSize,
+		[varName("icon-border-width")]: lineWidth,
 		[`${itemCls}-icon`]: {
-			width: "var(--steps-icon-size)",
-			height: "var(--steps-icon-size)",
+			width: varRef("icon-size"),
+			height: varRef("icon-size"),
 			margin: 0,
 			flex: "none",
 			display: "flex",
@@ -15,12 +18,12 @@ const genIconStyle = (token) => {
 			justifyContent: "center",
 			fontSize: token.iconFontSize,
 			fontFamily: token.fontFamily,
-			lineHeight: "var(--steps-icon-size)",
+			lineHeight: varRef("icon-size"),
 			textAlign: "center",
-			borderRadius: "var(--steps-icon-size)",
-			border: `var(--steps-icon-border-width) ${token.lineType} transparent`,
+			borderRadius: varRef("icon-size"),
+			border: `${varRef("icon-border-width")} ${lineType} transparent`,
 			transition: [
-				"background",
+				"background-color",
 				"border",
 				"color",
 				"inset",

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,35 +1,38 @@
+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,
 				"marginInline": token.calc(token.marginXXS).div(2).equal(),
 				"borderRadius": token.borderRadiusSM,
 				"cursor": "pointer",
-				"transition": `background ${token.motionDurationMid}`,
+				"transition": `background-color ${token.motionDurationMid}`,
 				"&:hover": { background: token.controlItemBgHover }
 			},
 			"&-icon": { [`${itemCls}-icon-dot`]: { "&:after": { display: "none" } } },

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-color ${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;