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

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

package/dist/steps/style/util.js

@@ -1,3 +1,5 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/util.ts
 function withoutVar(cssVar) {
 	return (cssVar || "--ant-not-exist").replace(/var\((.*)\)/, "$1");
@@ -7,14 +9,15 @@ function withoutVar(cssVar) {
 * This should be multiple since will conflict with other `rail` styles.
 */
 function getItemWithWidthStyle(token, marginSize, optionalStyle) {
-	const { calc, componentCls, descriptionMaxWidth } = token;
+	const { calc, componentCls, descriptionMaxWidth, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`@container style(${withoutVar(descriptionMaxWidth)})`]: [{
-		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).equal() },
+		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).equal() },
 		[`${itemCls}-rail`]: {
 			width: "auto",
-			insetInlineStart: calc(descriptionMaxWidth).add(`var(--steps-icon-size)`).div(2).add(marginSize).equal(),
-			insetInlineEnd: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).sub(marginSize).mul(-1).equal()
+			insetInlineStart: calc(descriptionMaxWidth).add(varRef("icon-size")).div(2).add(marginSize).equal(),
+			insetInlineEnd: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).sub(marginSize).mul(-1).equal()
 		}
 	}, optionalStyle] };
 }

package/dist/steps/style/vertical.js

@@ -1,24 +1,27 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/vertical.ts
 const genVerticalStyle = (token) => {
-	const { componentCls, calc } = token;
+	const { componentCls, marginXXS, paddingSM, controlHeight, antCls, calc } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}-vertical`]: {
-		"--steps-vertical-rail-margin": calc(token.marginXXS).mul(1.5).equal(),
-		"flexDirection": "column",
-		"alignItems": "stretch",
+		[varName("vertical-rail-margin")]: calc(marginXXS).mul(1.5).equal(),
+		flexDirection: "column",
+		alignItems: "stretch",
 		[`> ${itemCls}`]: {
-			"minHeight": calc(token.controlHeight).mul(1.5).equal(),
-			"paddingBottom": token.paddingSM,
+			"minHeight": calc(controlHeight).mul(1.5).equal(),
+			"paddingBottom": paddingSM,
 			"&:last-child": { paddingBottom: 0 },
-			[`${itemCls}-icon`]: { marginInlineStart: "calc((var(--steps-icon-size-max) - var(--steps-icon-size)) / 2)" },
+			[`${itemCls}-icon`]: { marginInlineStart: `calc((${varRef("icon-size-max")} - ${varRef("icon-size")}) / 2)` },
 			[`${itemCls}-rail`]: {
-				"--steps-rail-offset": calc("var(--steps-heading-height)").sub("var(--steps-icon-size)").div(2).equal(),
-				"borderInlineStartWidth": "var(--steps-rail-size)",
-				"position": "absolute",
-				"top": calc(`var(--steps-icon-size)`).add("var(--steps-item-wrapper-padding-top)").add("var(--steps-rail-offset)").add("var(--steps-vertical-rail-margin)").equal(),
-				"insetInlineStart": calc(`var(--steps-icon-size-max)`).div(2).equal(),
-				"bottom": calc("var(--steps-vertical-rail-margin)").sub("var(--steps-rail-offset)").equal(),
-				"marginInlineStart": `calc(var(--steps-rail-size) / -2)`
+				[varName("rail-offset")]: calc(varRef("heading-height")).sub(varRef("icon-size")).div(2).equal(),
+				borderInlineStartWidth: varRef("rail-size"),
+				position: "absolute",
+				top: calc(varRef("icon-size")).add(varRef("item-wrapper-padding-top")).add(varRef("rail-offset")).add(varRef("vertical-rail-margin")).equal(),
+				insetInlineStart: calc(varRef("icon-size-max")).div(2).equal(),
+				bottom: calc(varRef("vertical-rail-margin")).sub(varRef("rail-offset")).equal(),
+				marginInlineStart: `calc(${varRef("rail-size")} / -2)`
 			}
 		}
 	} };

package/dist/style/placementArrow.js

@@ -1,3 +1,4 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { genRoundedArrow } from "./roundedArrow.js";
 import { unit } from "@antdv-next/cssinjs";
 
@@ -16,7 +17,8 @@ function isInject(valid, code) {
 	return code;
 }
 function getArrowStyle(token, colorBg, options) {
-	const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal } = token;
+	const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal, antCls } = token;
+	const [varName] = genCssVar(antCls, "tooltip");
 	const { arrowDistance = 0, arrowPlacement = {
 		left: true,
 		right: true,
@@ -48,14 +50,14 @@ function getArrowStyle(token, colorBg, options) {
 				transform: "translateX(-50%) translateY(100%) rotate(180deg)"
 			},
 			"&-placement-topLeft": {
-				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[varName("arrow-offset-horizontal")]: arrowOffsetHorizontal,
 				[`> ${componentCls}-arrow`]: { left: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
 				} }
 			},
 			"&-placement-topRight": {
-				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[varName("arrow-offset-horizontal")]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 				[`> ${componentCls}-arrow`]: { right: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
@@ -79,14 +81,14 @@ function getArrowStyle(token, colorBg, options) {
 				transform: `translateX(-50%) translateY(-100%)`
 			},
 			"&-placement-bottomLeft": {
-				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[varName("arrow-offset-horizontal")]: arrowOffsetHorizontal,
 				[`> ${componentCls}-arrow`]: { left: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
 				} }
 			},
 			"&-placement-bottomRight": {
-				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[varName("arrow-offset-horizontal")]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 				[`> ${componentCls}-arrow`]: { right: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal

package/dist/switch/index.d.ts

@@ -2,7 +2,7 @@ import { VueNode } from "../_util/type.js";
 import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue190 from "vue";
+import * as vue173 from "vue";
 import { SlotsType } from "vue";
 import { SwitchChangeEventHandler, SwitchClickEventHandler } from "@v-c/switch";
 
@@ -47,8 +47,8 @@ interface SwitchSlots {
   checkedChildren: () => any;
   unCheckedChildren: () => any;
 }
-declare const Switch: vue190.DefineSetupFnComponent<SwitchProps, SwitchEmits, SlotsType<SwitchSlots>, SwitchProps & {
+declare const Switch: vue173.DefineSetupFnComponent<SwitchProps, SwitchEmits, SlotsType<SwitchSlots>, SwitchProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue190.PublicProps>;
+}, vue173.PublicProps>;
 //#endregion
 export { Switch, SwitchEmits, SwitchProps, SwitchSize, SwitchSlots };

package/dist/table/Column.d.ts

@@ -1,6 +1,6 @@
 import { AnyObject, EmptyEmit } from "../_util/type.js";
 import { ColumnType } from "./interface.js";
-import * as vue220 from "vue";
+import * as vue383 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/table/Column.d.ts
@@ -13,8 +13,8 @@ interface ColumnSlots {
 /**
  * Syntactic sugar for `columns` prop. HOC will not work on this.
  */
-declare const Column: vue220.DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject> & {
+declare const Column: vue383.DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue220.PublicProps>;
+}, vue383.PublicProps>;
 //#endregion
 export { Column, ColumnProps };

package/dist/table/ColumnGroup.d.ts

@@ -1,7 +1,7 @@
 import { AnyObject, EmptyEmit } from "../_util/type.js";
 import { ColumnType } from "./interface.js";
 import { ColumnProps } from "./Column.js";
-import * as vue224 from "vue";
+import * as vue381 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/table/ColumnGroup.d.ts
@@ -14,8 +14,8 @@ interface ColumnGroupSlots {
 /**
  * Syntactic sugar for `columns` prop. HOC will not work on this.
  */
-declare const ColumnGroup: vue224.DefineSetupFnComponent<ColumnGroupProps<AnyObject>, EmptyEmit, SlotsType<ColumnGroupSlots>, ColumnGroupProps<AnyObject> & {
+declare const ColumnGroup: vue381.DefineSetupFnComponent<ColumnGroupProps<AnyObject>, EmptyEmit, SlotsType<ColumnGroupSlots>, ColumnGroupProps<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue224.PublicProps>;
+}, vue381.PublicProps>;
 //#endregion
 export { ColumnGroup };

package/dist/table/InternalTable.js

@@ -1,4 +1,4 @@
-import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useComponentBaseConfig, useConfig } from "../config-provider/context.js";
 import useToken from "../theme/useToken.js";
 import "../theme/internal.js";
 import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
@@ -11,8 +11,8 @@ import { useSize } from "../config-provider/hooks/useSize.js";
 import config_provider_default from "../config-provider/index.js";
 import en_US_default from "../locale/en_US.js";
 import useLocale_default from "../locale/useLocale.js";
-import { useBreakpoint } from "../grid/hooks/useBreakpoint.js";
 import { DefaultRenderEmpty } from "../config-provider/defaultRenderEmpty.js";
+import { useBreakpoint } from "../grid/hooks/useBreakpoint.js";
 import spin_default from "../spin/index.js";
 import pagination_default from "../pagination/index.js";
 import useSelection from "./hooks/useSelection.js";
@@ -40,7 +40,8 @@ function resolvePanelRender(slots, props, key) {
 	if (slots[key] || props[key]) return (data) => getSlotPropsFnRun(slots, props, key, true, data);
 }
 const InternalTable = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs, expose }) => {
-	const { prefixCls, direction, getPrefixCls, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, renderEmpty, getPopupContainer: contextGetPopupContainer, virtual: contextVirtual } = useComponentBaseConfig("table", props);
+	const { prefixCls, direction, getPrefixCls, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, renderEmpty, getPopupContainer: contextGetPopupContainer, virtual: contextVirtual, bodyCell: contextBodyCell, headerCell: contextHeaderCell } = useComponentBaseConfig("table", props, ["bodyCell", "headerCell"]);
+	const configCtx = useConfig();
 	const { classes, styles } = toPropsRefs(props, "classes", "styles");
 	const mergedSize = useSize(computed(() => props.size));
 	const mergedProps = computed(() => {
@@ -236,6 +237,21 @@ const InternalTable = /* @__PURE__ */ defineComponent((props, { slots, emit, att
 			default: return padding * 2 + fontHeight + lineWidth;
 		}
 	});
+	const renderHeaderCell = (ctx) => {
+		const node = getSlotPropsFnRun(slots, props, "headerCell", true, ctx);
+		if (node === null || node === void 0) {
+			if (contextHeaderCell.value) return contextHeaderCell.value(ctx);
+		}
+		return node;
+	};
+	const renderBodyCell = (ctx) => {
+		const node = getSlotPropsFnRun(slots, props, "bodyCell", true, ctx);
+		if (node === null || node === void 0) {
+			if (contextBodyCell.value) return contextBodyCell.value(ctx);
+			else if (configCtx.value?.transformCellText) return configCtx.value.transformCellText(ctx);
+		}
+		return node;
+	};
 	return () => {
 		const columnTitlePropsFn = () => {
 			const mergedFilters = {};
@@ -248,8 +264,6 @@ const InternalTable = /* @__PURE__ */ defineComponent((props, { slots, emit, att
 			};
 		};
 		const [transformTitleColumns] = useTitleColumns(columnTitlePropsFn());
-		const renderHeaderCell = (ctx) => getSlotPropsFnRun(slots, props, "headerCell", true, ctx);
-		const renderBodyCell = (ctx) => getSlotPropsFnRun(slots, props, "bodyCell", true, ctx);
 		const renderExpandedRow = slots.expandedRowRender ? (record, index, indent, expanded) => getSlotPropsFnRun(slots, props, "expandedRowRender", true, {
 			record,
 			index,
@@ -261,7 +275,7 @@ const InternalTable = /* @__PURE__ */ defineComponent((props, { slots, emit, att
 			if (spinProps.value?.spinning && rawData.value === EMPTY_LIST) return null;
 			if (slots.emptyText) return getSlotPropsFnRun(slots, props, "emptyText");
 			if (typeof locale?.emptyText !== "undefined") return locale?.emptyText;
-			return renderEmpty?.("Table") || createVNode(DefaultRenderEmpty, { "componentName": "Table" }, null);
+			return renderEmpty?.value?.("Table") || createVNode(DefaultRenderEmpty, { "componentName": "Table" }, null);
 		};
 		const mergedEmptyNode = mergedEmptyNodeFn();
 		const mergedGetPopupContainer = props.getPopupContainer || contextGetPopupContainer;