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

package/dist/splitter/style/index.js

@@ -1,5 +1,5 @@
 import { resetComponent } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import "../../theme/internal.js";
 
 //#region src/splitter/style/index.ts
@@ -38,12 +38,12 @@ const centerStyle = {
 	transform: "translate(-50%, -50%)"
 };
 const genSplitterStyle = (token) => {
-	const { componentCls, colorFill, splitBarDraggableSize, splitBarSize, splitTriggerSize, controlItemBgHover, controlItemBgActive, controlItemBgActiveHover, prefixCls, colorPrimary } = token;
+	const { componentCls, colorFill, splitBarDraggableSize, splitBarSize, splitTriggerSize, controlItemBgHover, controlItemBgActive, controlItemBgActiveHover, colorPrimary, antCls, calc } = token;
 	const splitBarCls = `${componentCls}-bar`;
 	const splitMaskCls = `${componentCls}-mask`;
 	const splitPanelCls = `${componentCls}-panel`;
-	const halfTriggerSize = token.calc(splitTriggerSize).div(2).equal();
-	const splitterBarPreviewOffsetVar = `${prefixCls}-bar-preview-offset`;
+	const [, varRef] = genCssVar(antCls, "splitter");
+	const halfTriggerSize = calc(splitTriggerSize).div(2).equal();
 	const splitterBarPreviewStyle = {
 		position: "absolute",
 		background: token.colorPrimary,
@@ -143,7 +143,7 @@ const genSplitterStyle = (token) => {
 					...splitterBarPreviewStyle,
 					[`&${splitBarCls}-preview-active`]: {
 						display: "block",
-						transform: `translateX(var(--${splitterBarPreviewOffsetVar}))`
+						transform: `translate3d(${varRef("bar-preview-offset")}, 0, 0)`
 					}
 				},
 				[`${splitBarCls}-dragger`]: {
@@ -197,7 +197,7 @@ const genSplitterStyle = (token) => {
 					...splitterBarPreviewStyle,
 					[`&${splitBarCls}-preview-active`]: {
 						display: "block",
-						transform: `translateY(var(--${splitterBarPreviewOffsetVar}))`
+						transform: `translate3d(0, ${varRef("bar-preview-offset")}, 0)`
 					}
 				},
 				[`${splitBarCls}-dragger`]: {

package/dist/statistic/Statistic.d.ts

@@ -3,7 +3,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import "../_util/hooks/index.js";
 import { FormatConfig, valueType } from "./utils.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue363 from "vue";
+import * as vue268 from "vue";
 import { CSSProperties, SlotsType, VNodeChild } from "vue";
 
 //#region src/statistic/Statistic.d.ts
@@ -33,7 +33,7 @@ interface StatisticSlots {
   prefix: () => any;
   suffix: () => any;
 }
-declare const Statistic: vue363.DefineSetupFnComponent<StatisticRectProps, StatisticEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
+declare const Statistic: vue268.DefineSetupFnComponent<StatisticRectProps, StatisticEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
   value?: valueType;
   valueStyle?: CSSProperties;
   valueRender?: (node: any) => VNodeChild;
@@ -45,6 +45,6 @@ declare const Statistic: vue363.DefineSetupFnComponent<StatisticRectProps, Stati
   styles?: StatisticStylesType;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue363.PublicProps>;
+}, vue268.PublicProps>;
 //#endregion
 export { Statistic, StatisticClassNamesType, StatisticProps, StatisticSlots, StatisticStylesType };

package/dist/statistic/Timer.d.ts

@@ -2,7 +2,7 @@ import { VueNode } from "../_util/type.js";
 import { FormatConfig, valueType } from "./utils.js";
 import { StatisticClassNamesType, StatisticProps, StatisticSlots, StatisticStylesType } from "./Statistic.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue359 from "vue";
+import * as vue264 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/statistic/Timer.d.ts
@@ -19,10 +19,10 @@ interface StatisticTimeEmits {
   change: (value?: valueType) => void;
   [key: string]: (...args: any[]) => any;
 }
-declare const StatisticTimer: vue359.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
+declare const StatisticTimer: vue264.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
   value?: valueType;
-  valueStyle?: vue359.CSSProperties;
-  valueRender?: (node: any) => vue359.VNodeChild;
+  valueStyle?: vue264.CSSProperties;
+  valueRender?: (node: any) => vue264.VNodeChild;
   title?: VueNode;
   prefix?: VueNode;
   suffix?: VueNode;
@@ -34,6 +34,6 @@ declare const StatisticTimer: vue359.DefineSetupFnComponent<StatisticTimerProps,
   format?: string;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue359.PublicProps>;
+}, vue264.PublicProps>;
 //#endregion
 export { StatisticTimeEmits, StatisticTimer, StatisticTimerProps, TimerType };

package/dist/statistic/index.d.ts

@@ -3,13 +3,13 @@ import { FormatConfig, valueType } from "./utils.js";
 import { Statistic, StatisticClassNamesType, StatisticProps, StatisticSlots, StatisticStylesType } from "./Statistic.js";
 import { StatisticTimeEmits, StatisticTimer, StatisticTimerProps, TimerType } from "./Timer.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue183 from "vue";
+import * as vue112 from "vue";
 
 //#region src/statistic/index.d.ts
-declare const StatisticTimer$1: vue183.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, vue183.SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
+declare const StatisticTimer$1: vue112.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, vue112.SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
   value?: valueType;
-  valueStyle?: vue183.CSSProperties;
-  valueRender?: (node: any) => vue183.VNodeChild;
+  valueStyle?: vue112.CSSProperties;
+  valueRender?: (node: any) => vue112.VNodeChild;
   title?: VueNode;
   prefix?: VueNode;
   suffix?: VueNode;
@@ -21,7 +21,7 @@ declare const StatisticTimer$1: vue183.DefineSetupFnComponent<StatisticTimerProp
   format?: string;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue183.PublicProps>;
+}, vue112.PublicProps>;
 declare const _default: typeof Statistic & {
   Timer: typeof StatisticTimer;
 };

package/dist/steps/ProgressIcon.js

@@ -1,13 +1,15 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { Fragment, createTextVNode, createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
 
 //#region src/steps/ProgressIcon.tsx
 const ProgressIcon = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	return () => {
-		const { prefixCls, percent } = props;
+		const { prefixCls, rootPrefixCls, percent } = props;
 		const progressCls = `${prefixCls}-item-progress-icon`;
 		const circleCls = `${progressCls}-circle`;
-		const dashArray = `calc(var(--progress-r) * 2 * ${Math.PI * percent / 100}) 9999`;
+		const [, varRef] = genCssVar(rootPrefixCls, "cmp-steps");
+		const dashArray = `calc(${varRef("progress-radius")} * 2 * ${Math.PI * percent / 100}) 9999`;
 		return createVNode(Fragment, null, [createVNode("svg", {
 			"class": `${progressCls}-svg`,
 			"viewBox": "0 0 100 100",
@@ -34,6 +36,11 @@ const ProgressIcon = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: true,
 			default: void 0
 		},
+		rootPrefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
 		percent: {
 			type: Number,
 			required: true,

package/dist/steps/index.d.ts

@@ -1,7 +1,7 @@
 import { VueNode } from "../_util/type.js";
 import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
-import * as vue188 from "vue";
+import * as vue136 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { StepsProps } from "@v-c/steps";
 
@@ -80,8 +80,8 @@ interface StepsSlots {
   default: () => any;
   iconRender?: IconRenderType;
 }
-declare const Steps: vue188.DefineSetupFnComponent<StepsProps$1, StepsEmits, SlotsType<StepsSlots>, StepsProps$1 & {
+declare const Steps: vue136.DefineSetupFnComponent<StepsProps$1, StepsEmits, SlotsType<StepsSlots>, StepsProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue188.PublicProps>;
+}, vue136.PublicProps>;
 //#endregion
 export { Steps, StepsProps$1 as StepsProps };

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,10 +18,10 @@ 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",
 				"border",

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]: {