antdv-next 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/button/style/index.mjs

@@ -0,0 +1,138 @@
+import { genFocusStyle, resetIcon } from "../../style/index.mjs";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.mjs";
+import { mergeToken } from "../../theme/internal.mjs";
+import group_default from "./group.mjs";
+import { prepareComponentToken, prepareToken } from "./token.mjs";
+import variant_default from "./variant.mjs";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/button/style/index.ts
+const genSharedButtonStyle = (token) => {
+	const { componentCls, iconCls, fontWeight, opacityLoading, motionDurationSlow, motionEaseInOut, iconGap, calc } = token;
+	return { [componentCls]: {
+		"outline": "none",
+		"position": "relative",
+		"display": "inline-flex",
+		"gap": iconGap,
+		"alignItems": "center",
+		"justifyContent": "center",
+		fontWeight,
+		"whiteSpace": "nowrap",
+		"textAlign": "center",
+		"backgroundImage": "none",
+		"cursor": "pointer",
+		"transition": `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
+		"userSelect": "none",
+		"touchAction": "manipulation",
+		"&:disabled > *": { pointerEvents: "none" },
+		[`${componentCls}-icon > svg`]: resetIcon(),
+		"> a": { color: "currentColor" },
+		"&:not(:disabled)": genFocusStyle(token),
+		[`&${componentCls}-two-chinese-chars::first-letter`]: { letterSpacing: "0.34em" },
+		[`&${componentCls}-two-chinese-chars > *:not(${iconCls})`]: {
+			marginInlineEnd: "-0.34em",
+			letterSpacing: "0.34em"
+		},
+		[`&${componentCls}-icon-only`]: {
+			paddingInline: 0,
+			[`&${componentCls}-compact-item`]: { flex: "none" }
+		},
+		[`&${componentCls}-loading`]: {
+			opacity: opacityLoading,
+			cursor: "default"
+		},
+		[`${componentCls}-loading-icon`]: { transition: [
+			"width",
+			"opacity",
+			"margin"
+		].map((transition) => `${transition} ${motionDurationSlow} ${motionEaseInOut}`).join(",") },
+		[`&:not(${componentCls}-icon-end)`]: { [`${componentCls}-loading-icon-motion`]: {
+			"&-appear-start, &-enter-start": { marginInlineEnd: calc(iconGap).mul(-1).equal() },
+			"&-appear-active, &-enter-active": { marginInlineEnd: 0 },
+			"&-leave-start": { marginInlineEnd: 0 },
+			"&-leave-active": { marginInlineEnd: calc(iconGap).mul(-1).equal() }
+		} },
+		"&-icon-end": {
+			flexDirection: "row-reverse",
+			[`${componentCls}-loading-icon-motion`]: {
+				"&-appear-start, &-enter-start": { marginInlineStart: calc(iconGap).mul(-1).equal() },
+				"&-appear-active, &-enter-active": { marginInlineStart: 0 },
+				"&-leave-start": { marginInlineStart: 0 },
+				"&-leave-active": { marginInlineStart: calc(iconGap).mul(-1).equal() }
+			}
+		}
+	} };
+};
+const genCircleButtonStyle = (token) => ({
+	minWidth: token.controlHeight,
+	paddingInline: 0,
+	borderRadius: "50%"
+});
+function genButtonStyle(token, prefixCls = "") {
+	const { componentCls, controlHeight, fontSize, borderRadius, buttonPaddingHorizontal, iconCls, buttonPaddingVertical, buttonIconOnlyFontSize } = token;
+	return [
+		{ [prefixCls]: {
+			fontSize,
+			height: controlHeight,
+			padding: `${unit(buttonPaddingVertical)} ${unit(buttonPaddingHorizontal)}`,
+			borderRadius,
+			[`&${componentCls}-icon-only`]: {
+				width: controlHeight,
+				[iconCls]: { fontSize: buttonIconOnlyFontSize }
+			}
+		} },
+		{ [`${componentCls}${componentCls}-circle${prefixCls}`]: genCircleButtonStyle(token) },
+		{ [`${componentCls}${componentCls}-round${prefixCls}`]: {
+			borderRadius: token.controlHeight,
+			[`&:not(${componentCls}-icon-only)`]: { paddingInline: token.buttonPaddingHorizontal }
+		} }
+	];
+}
+const genSizeBaseButtonStyle = (token) => {
+	return genButtonStyle(mergeToken(token, { fontSize: token.contentFontSize }), token.componentCls);
+};
+const genSizeSmallButtonStyle = (token) => {
+	return genButtonStyle(mergeToken(token, {
+		controlHeight: token.controlHeightSM,
+		fontSize: token.contentFontSizeSM,
+		padding: token.paddingXS,
+		buttonPaddingHorizontal: token.paddingInlineSM,
+		buttonPaddingVertical: 0,
+		borderRadius: token.borderRadiusSM,
+		buttonIconOnlyFontSize: token.onlyIconSizeSM
+	}), `${token.componentCls}-sm`);
+};
+const genSizeLargeButtonStyle = (token) => {
+	return genButtonStyle(mergeToken(token, {
+		controlHeight: token.controlHeightLG,
+		fontSize: token.contentFontSizeLG,
+		buttonPaddingHorizontal: token.paddingInlineLG,
+		buttonPaddingVertical: 0,
+		borderRadius: token.borderRadiusLG,
+		buttonIconOnlyFontSize: token.onlyIconSizeLG
+	}), `${token.componentCls}-lg`);
+};
+const genBlockButtonStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: { [`&${componentCls}-block`]: { width: "100%" } } };
+};
+var style_default = genStyleHooks("Button", (token) => {
+	const buttonToken = prepareToken(token);
+	return [
+		genSharedButtonStyle(buttonToken),
+		genSizeBaseButtonStyle(buttonToken),
+		genSizeSmallButtonStyle(buttonToken),
+		genSizeLargeButtonStyle(buttonToken),
+		genBlockButtonStyle(buttonToken),
+		variant_default(buttonToken),
+		group_default(buttonToken)
+	];
+}, prepareComponentToken, { unitless: {
+	fontWeight: true,
+	contentLineHeight: true,
+	contentLineHeightSM: true,
+	contentLineHeightLG: true
+} });
+
+//#endregion
+export { style_default as default };

package/dist/button/style/token.d.mts

@@ -0,0 +1,234 @@
+import "../../theme/internal.mjs";
+import { CSSProperties } from "vue";
+
+//#region src/button/style/token.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 文字字重
+   * @descEN Font weight of text
+   */
+  fontWeight: CSSProperties['fontWeight'];
+  /**
+   * @desc 图标文字间距
+   * @descEN Gap between icon and text
+   */
+  iconGap: CSSProperties['gap'];
+  /**
+   * @desc 默认按钮阴影
+   * @descEN Shadow of default button
+   */
+  defaultShadow: string;
+  /**
+   * @desc 主要按钮阴影
+   * @descEN Shadow of primary button
+   */
+  primaryShadow: string;
+  /**
+   * @desc 危险按钮阴影
+   * @descEN Shadow of danger button
+   */
+  dangerShadow: string;
+  /**
+   * @desc 主要按钮文本颜色
+   * @descEN Text color of primary button
+   */
+  primaryColor: string;
+  /**
+   * @desc 默认按钮文本颜色
+   * @descEN Text color of default button
+   */
+  defaultColor: string;
+  /**
+   * @desc 默认按钮背景色
+   * @descEN Background color of default button
+   */
+  defaultBg: string;
+  /**
+   * @desc 默认按钮边框颜色
+   * @descEN Border color of default button
+   */
+  defaultBorderColor: string;
+  /**
+   * @desc 危险按钮文本颜色
+   * @descEN Text color of danger button
+   */
+  dangerColor: string;
+  /**
+   * @desc 默认按钮悬浮态背景色
+   * @descEN Background color of default button when hover
+   */
+  defaultHoverBg: string;
+  /**
+   * @desc 默认按钮悬浮态文本颜色
+   * @descEN Text color of default button when hover
+   */
+  defaultHoverColor: string;
+  /**
+   * @desc 默认按钮悬浮态边框颜色
+   * @descEN Border color of default button
+   */
+  defaultHoverBorderColor: string;
+  /**
+   * @desc 默认按钮激活态背景色
+   * @descEN Background color of default button when active
+   */
+  defaultActiveBg: string;
+  /**
+   * @desc 默认按钮激活态文字颜色
+   * @descEN Text color of default button when active
+   */
+  defaultActiveColor: string;
+  /**
+   * @desc 默认按钮激活态边框颜色
+   * @descEN Border color of default button when active
+   */
+  defaultActiveBorderColor: string;
+  /**
+   * @deprecated use `colorBorderDisabled` instead
+   * @desc 禁用状态边框颜色
+   * @descEN Border color of disabled button
+   */
+  borderColorDisabled: string;
+  /**
+   * @desc 默认幽灵按钮文本颜色
+   * @descEN Text color of default ghost button
+   */
+  defaultGhostColor: string;
+  /**
+   * @desc 幽灵按钮背景色
+   * @descEN Background color of ghost button
+   */
+  ghostBg: string;
+  /**
+   * @desc 默认幽灵按钮边框颜色
+   * @descEN Border color of default ghost button
+   */
+  defaultGhostBorderColor: string;
+  /**
+   * @desc 主要填充按钮的浅色背景颜色
+   * @descEN Background color of primary filled button
+   */
+  /**
+   * @desc 默认实心按钮的文本色
+   * @descEN Default text color for solid buttons.
+   */
+  solidTextColor: string;
+  /**
+   * @desc 默认文本按钮的文本色
+   * @descEN Default text color for text buttons
+   */
+  textTextColor: string;
+  /**
+   * @desc 默认文本按钮悬浮态文本颜色
+   * @descEN Default text color for text buttons on hover
+   */
+  textTextHoverColor: string;
+  /**
+   * @desc 默认文本按钮激活态文字颜色
+   * @descEN Default text color for text buttons on active
+   */
+  textTextActiveColor: string;
+  /**
+   * @desc 按钮横向内间距
+   * @descEN Horizontal padding of button
+   */
+  paddingInline: CSSProperties['paddingInline'];
+  /**
+   * @desc 大号按钮横向内间距
+   * @descEN Horizontal padding of large button
+   */
+  paddingInlineLG: CSSProperties['paddingInline'];
+  /**
+   * @desc 小号按钮横向内间距
+   * @descEN Horizontal padding of small button
+   */
+  paddingInlineSM: CSSProperties['paddingInline'];
+  /**
+   * @desc 按钮纵向内间距
+   * @descEN Vertical padding of button
+   */
+  paddingBlock: CSSProperties['paddingBlock'];
+  /**
+   * @desc 大号按钮纵向内间距
+   * @descEN Vertical padding of large button
+   */
+  paddingBlockLG: CSSProperties['paddingBlock'];
+  /**
+   * @desc 小号按钮纵向内间距
+   * @descEN Vertical padding of small button
+   */
+  paddingBlockSM: CSSProperties['paddingBlock'];
+  /**
+   * @desc 只有图标的按钮图标尺寸
+   * @descEN Icon size of button which only contains icon
+   */
+  onlyIconSize: number | string;
+  /**
+   * @desc 大号只有图标的按钮图标尺寸
+   * @descEN Icon size of large button which only contains icon
+   */
+  onlyIconSizeLG: number | string;
+  /**
+   * @desc 小号只有图标的按钮图标尺寸
+   * @descEN Icon size of small button which only contains icon
+   */
+  onlyIconSizeSM: number | string;
+  /**
+   * @desc 按钮组边框颜色
+   * @descEN Border color of button group
+   */
+  groupBorderColor: string;
+  /**
+   * @desc 链接按钮悬浮态背景色
+   * @descEN Background color of link button when hover
+   */
+  linkHoverBg: string;
+  /**
+   * @desc 文本按钮悬浮态背景色
+   * @descEN Background color of text button when hover
+   */
+  textHoverBg: string;
+  /**
+   * @desc 按钮内容字体大小
+   * @descEN Font size of button content
+   */
+  contentFontSize: number;
+  /**
+   * @desc 大号按钮内容字体大小
+   * @descEN Font size of large button content
+   */
+  contentFontSizeLG: number;
+  /**
+   * @desc 小号按钮内容字体大小
+   * @descEN Font size of small button content
+   */
+  contentFontSizeSM: number;
+  /**
+   * @desc 按钮内容字体行高
+   * @descEN Line height of button content
+   */
+  contentLineHeight: number;
+  /**
+   * @desc 大号按钮内容字体行高
+   * @descEN Line height of large button content
+   */
+  contentLineHeightLG: number;
+  /**
+   * @desc 小号按钮内容字体行高
+   * @descEN Line height of small button content
+   */
+  contentLineHeightSM: number;
+  /**
+   * @desc type='default' 禁用状态下的背景颜色
+   * @descE background color when type='default' is disabled
+   */
+  defaultBgDisabled: string;
+  /**
+   * @desc type='dashed' 禁用状态下的背景颜色
+   * @descE background color when type='dashed' is disabled
+   */
+  dashedBgDisabled: string;
+}
+//#endregion
+export { ComponentToken };

package/dist/button/style/token.mjs

@@ -0,0 +1,84 @@
+import { PresetColors } from "../../theme/interface/presetColors.mjs";
+import { getLineHeight } from "../../theme/themes/shared/genFontSizes.mjs";
+import getAlphaColor_default from "../../theme/util/getAlphaColor.mjs";
+import { mergeToken } from "../../theme/internal.mjs";
+import { AggregationColor } from "../../color-picker/color.mjs";
+import { isBright } from "../../color-picker/components/ColorPresets.mjs";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/button/style/token.ts
+const prepareToken = (token) => {
+	const { paddingInline, onlyIconSize, borderColorDisabled } = token;
+	return mergeToken(token, {
+		buttonPaddingHorizontal: paddingInline,
+		buttonPaddingVertical: 0,
+		buttonIconOnlyFontSize: onlyIconSize,
+		colorBorderDisabled: borderColorDisabled
+	});
+};
+const prepareComponentToken = (token) => {
+	const contentFontSize = token.contentFontSize ?? token.fontSize;
+	const contentFontSizeSM = token.contentFontSizeSM ?? token.fontSize;
+	const contentFontSizeLG = token.contentFontSizeLG ?? token.fontSizeLG;
+	const contentLineHeight = token.contentLineHeight ?? getLineHeight(contentFontSize);
+	const contentLineHeightSM = token.contentLineHeightSM ?? getLineHeight(contentFontSizeSM);
+	const contentLineHeightLG = token.contentLineHeightLG ?? getLineHeight(contentFontSizeLG);
+	const solidTextColor = isBright(new AggregationColor(token.colorBgSolid), "#fff") ? "#000" : "#fff";
+	const shadowColorTokens = PresetColors.reduce((prev, colorKey) => ({
+		...prev,
+		[`${colorKey}ShadowColor`]: `0 ${unit(token.controlOutlineWidth)} 0 ${getAlphaColor_default(token[`${colorKey}1`], token.colorBgContainer)}`
+	}), {});
+	const defaultBgDisabled = token.colorBgContainerDisabled;
+	const dashedBgDisabled = token.colorBgContainerDisabled;
+	return {
+		...shadowColorTokens,
+		fontWeight: 400,
+		iconGap: token.marginXS,
+		defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+		primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+		dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+		primaryColor: token.colorTextLightSolid,
+		dangerColor: token.colorTextLightSolid,
+		borderColorDisabled: token.colorBorderDisabled,
+		defaultGhostColor: token.colorBgContainer,
+		ghostBg: "transparent",
+		defaultGhostBorderColor: token.colorBgContainer,
+		paddingInline: token.paddingContentHorizontal - token.lineWidth,
+		paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
+		paddingInlineSM: 8 - token.lineWidth,
+		onlyIconSize: "inherit",
+		onlyIconSizeSM: "inherit",
+		onlyIconSizeLG: "inherit",
+		groupBorderColor: token.colorPrimaryHover,
+		linkHoverBg: "transparent",
+		textTextColor: token.colorText,
+		textTextHoverColor: token.colorText,
+		textTextActiveColor: token.colorText,
+		textHoverBg: token.colorFillTertiary,
+		defaultColor: token.colorText,
+		defaultBg: token.colorBgContainer,
+		defaultBorderColor: token.colorBorder,
+		defaultBorderColorDisabled: token.colorBorder,
+		defaultHoverBg: token.colorBgContainer,
+		defaultHoverColor: token.colorPrimaryHover,
+		defaultHoverBorderColor: token.colorPrimaryHover,
+		defaultActiveBg: token.colorBgContainer,
+		defaultActiveColor: token.colorPrimaryActive,
+		defaultActiveBorderColor: token.colorPrimaryActive,
+		solidTextColor,
+		contentFontSize,
+		contentFontSizeSM,
+		contentFontSizeLG,
+		contentLineHeight,
+		contentLineHeightSM,
+		contentLineHeightLG,
+		paddingBlock: Math.max((token.controlHeight - contentFontSize * contentLineHeight) / 2 - token.lineWidth, 0),
+		paddingBlockSM: Math.max((token.controlHeightSM - contentFontSizeSM * contentLineHeightSM) / 2 - token.lineWidth, 0),
+		paddingBlockLG: Math.max((token.controlHeightLG - contentFontSizeLG * contentLineHeightLG) / 2 - token.lineWidth, 0),
+		defaultBgDisabled,
+		dashedBgDisabled
+	};
+};
+
+//#endregion
+export { prepareComponentToken, prepareToken };

package/dist/button/style/variant.mjs

@@ -0,0 +1,190 @@
+import { PresetColors } from "../../theme/interface/presetColors.mjs";
+import { genCssVar } from "../../theme/util/genStyleUtils.mjs";
+
+//#region src/button/style/variant.ts
+const genVariantStyle = (token) => {
+	const { componentCls, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "btn");
+	return { [componentCls]: [
+		{
+			[varName("border-width")]: "1px",
+			[varName("border-color")]: "#000",
+			[varName("border-color-hover")]: varRef("border-color"),
+			[varName("border-color-active")]: varRef("border-color"),
+			[varName("border-color-disabled")]: varRef("border-color"),
+			[varName("border-style")]: "solid",
+			[varName("text-color")]: "#000",
+			[varName("text-color-hover")]: varRef("text-color"),
+			[varName("text-color-active")]: varRef("text-color"),
+			[varName("text-color-disabled")]: varRef("text-color"),
+			[varName("bg-color")]: "#ddd",
+			[varName("bg-color-hover")]: varRef("bg-color"),
+			[varName("bg-color-active")]: varRef("bg-color"),
+			[varName("bg-color-disabled")]: token.colorBgContainerDisabled,
+			[varName("bg-color-container")]: token.colorBgContainer,
+			[varName("shadow")]: "none"
+		},
+		{
+			border: [
+				varRef("border-width"),
+				varRef("border-style"),
+				varRef("border-color")
+			].join(" "),
+			color: varRef("text-color"),
+			backgroundColor: varRef("bg-color"),
+			[`&:not(:disabled):not(${componentCls}-disabled)`]: {
+				"&:hover": {
+					border: [
+						varRef("border-width"),
+						varRef("border-style"),
+						varRef("border-color-hover")
+					].join(" "),
+					color: varRef("text-color-hover"),
+					backgroundColor: varRef("bg-color-hover")
+				},
+				"&:active": {
+					border: [
+						varRef("border-width"),
+						varRef("border-style"),
+						varRef("border-color-active")
+					].join(" "),
+					color: varRef("text-color-active"),
+					backgroundColor: varRef("bg-color-active")
+				}
+			}
+		},
+		{
+			[`&${componentCls}-variant-solid`]: {
+				[varName("solid-bg-color")]: varRef("color-base"),
+				[varName("solid-bg-color-hover")]: varRef("color-hover"),
+				[varName("solid-bg-color-active")]: varRef("color-active"),
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: token.colorTextLightSolid,
+				[varName("bg-color")]: varRef("solid-bg-color"),
+				[varName("bg-color-hover")]: varRef("solid-bg-color-hover"),
+				[varName("bg-color-active")]: varRef("solid-bg-color-active"),
+				boxShadow: varRef("shadow")
+			},
+			[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+				[varName("border-color")]: varRef("color-base"),
+				[varName("border-color-hover")]: varRef("color-hover"),
+				[varName("border-color-active")]: varRef("color-active"),
+				[varName("bg-color")]: varRef("bg-color-container"),
+				[varName("text-color")]: varRef("color-base"),
+				[varName("text-color-hover")]: varRef("color-hover"),
+				[varName("text-color-active")]: varRef("color-active"),
+				boxShadow: varRef("shadow")
+			},
+			[`&${componentCls}-variant-dashed`]: {
+				[varName("border-style")]: "dashed",
+				[varName("bg-color-disabled")]: token.dashedBgDisabled
+			},
+			[`&${componentCls}-variant-filled`]: {
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: varRef("color-base"),
+				[varName("bg-color")]: varRef("color-light"),
+				[varName("bg-color-hover")]: varRef("color-light-hover"),
+				[varName("bg-color-active")]: varRef("color-light-active")
+			},
+			[`&${componentCls}-variant-text, &${componentCls}-variant-link`]: {
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: varRef("color-base"),
+				[varName("text-color-hover")]: varRef("color-hover"),
+				[varName("text-color-active")]: varRef("color-active"),
+				[varName("bg-color")]: "transparent",
+				[varName("bg-color-hover")]: "transparent",
+				[varName("bg-color-active")]: "transparent",
+				[`&:disabled, &${token.componentCls}-disabled`]: {
+					background: "transparent",
+					borderColor: "transparent"
+				}
+			},
+			[`&${componentCls}-variant-text`]: {
+				[varName("bg-color-hover")]: varRef("color-light"),
+				[varName("bg-color-active")]: varRef("color-light-active")
+			}
+		},
+		{
+			[`&${componentCls}-variant-link`]: {
+				[varName("color-base")]: token.colorLink,
+				[varName("color-hover")]: token.colorLinkHover,
+				[varName("color-active")]: token.colorLinkActive
+			},
+			[`&${componentCls}-color-primary`]: {
+				[varName("color-base")]: token.colorPrimary,
+				[varName("color-hover")]: token.colorPrimaryHover,
+				[varName("color-active")]: token.colorPrimaryActive,
+				[varName("color-light")]: token.colorPrimaryBg,
+				[varName("color-light-hover")]: token.colorPrimaryBgHover,
+				[varName("color-light-active")]: token.colorPrimaryBorder,
+				[varName("shadow")]: token.primaryShadow
+			},
+			[`&${componentCls}-color-dangerous`]: {
+				[varName("color-base")]: token.colorError,
+				[varName("color-hover")]: token.colorErrorHover,
+				[varName("color-active")]: token.colorErrorActive,
+				[varName("color-light")]: token.colorErrorBg,
+				[varName("color-light-hover")]: token.colorErrorBgFilledHover,
+				[varName("color-light-active")]: token.colorErrorBgActive,
+				[varName("shadow")]: token.dangerShadow
+			},
+			[`&${componentCls}-color-default`]: {
+				[varName("solid-bg-color")]: token.colorBgSolid,
+				[varName("solid-bg-color-hover")]: token.colorBgSolidHover,
+				[varName("solid-bg-color-active")]: token.colorBgSolidActive,
+				[varName("color-base")]: token.defaultBorderColor,
+				[varName("color-hover")]: token.defaultHoverBorderColor,
+				[varName("color-active")]: token.defaultActiveBorderColor,
+				[varName("color-light")]: token.colorFillTertiary,
+				[varName("color-light-hover")]: token.colorFillSecondary,
+				[varName("color-light-active")]: token.colorFill,
+				[varName("text-color")]: token.colorText,
+				[varName("text-color-hover")]: token.defaultHoverBorderColor,
+				[varName("text-color-active")]: token.defaultActiveBorderColor,
+				[varName("shadow")]: token.defaultShadow,
+				[`&${componentCls}-variant-solid`]: { [varName("text-color")]: token.solidTextColor },
+				[`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: {
+					[varName("text-color-hover")]: varRef("text-color"),
+					[varName("text-color-active")]: varRef("text-color")
+				},
+				[`&${componentCls}-background-ghost`]: { [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+					[varName("text-color")]: token.defaultGhostColor,
+					[varName("border-color")]: token.defaultGhostBorderColor
+				} }
+			}
+		},
+		PresetColors.map((colorKey) => {
+			const darkColor = token[`${colorKey}6`];
+			const lightColor = token[`${colorKey}1`];
+			const hoverColor = token[`${colorKey}5`];
+			const lightHoverColor = token[`${colorKey}2`];
+			const lightActiveColor = token[`${colorKey}3`];
+			const activeColor = token[`${colorKey}7`];
+			const shadowColor = token[`${colorKey}ShadowColor`];
+			return { [`&${componentCls}-color-${colorKey}`]: {
+				[varName("color-base")]: darkColor,
+				[varName("color-hover")]: hoverColor,
+				[varName("color-active")]: activeColor,
+				[varName("color-light")]: lightColor,
+				[varName("color-light-hover")]: lightHoverColor,
+				[varName("color-light-active")]: lightActiveColor,
+				[varName("shadow")]: shadowColor
+			} };
+		}),
+		{ [`&:disabled, &${token.componentCls}-disabled`]: {
+			cursor: "not-allowed",
+			borderColor: token.colorBorderDisabled,
+			background: varRef("bg-color-disabled"),
+			color: token.colorTextDisabled,
+			boxShadow: "none"
+		} },
+		{ [`&${componentCls}-background-ghost`]: {
+			[varName("bg-color")]: "transparent",
+			[varName("shadow")]: "none"
+		} }
+	] };
+};
+var variant_default = genVariantStyle;
+
+//#endregion
+export { variant_default as default };