@zboson/ui 0.0.0-stage → 0.0.1

package/dist/color-picker/style/index.js

@@ -0,0 +1,174 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { genCompactItemStyle } from "../../style/compact-item.js";
+import genColorBlockStyle from "./color-block.js";
+import genInputStyle from "./input.js";
+import genPickerStyle from "./picker.js";
+import genPresetsStyle from "./presets.js";
+import genSliderStyle from "./slider.js";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/index.ts
+function genActiveStyle(token, borderColor, outlineColor) {
+	return {
+		borderInlineEndWidth: token.lineWidth,
+		borderColor,
+		boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${outlineColor}`,
+		outline: 0
+	};
+}
+const genRtlStyle = (token) => {
+	const { componentCls } = token;
+	return { "&-rtl": {
+		[`${componentCls}-presets-color`]: { "&::after": { direction: "ltr" } },
+		[`${componentCls}-clear`]: { "&::after": { direction: "ltr" } }
+	} };
+};
+function genClearStyle(token, size, extraStyle) {
+	const { componentCls, borderRadiusSM, lineWidth, lineType, colorSplit, colorBorder, red6 } = token;
+	return { [`${componentCls}-clear`]: {
+		width: size,
+		height: size,
+		borderRadius: borderRadiusSM,
+		border: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+		position: "relative",
+		overflow: "hidden",
+		cursor: "inherit",
+		userSelect: "none",
+		transition: `all ${token.motionDurationFast}`,
+		...extraStyle,
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			insetInlineEnd: token.calc(lineWidth).mul(-1).equal(),
+			top: token.calc(lineWidth).mul(-1).equal(),
+			display: "block",
+			width: 40,
+			height: 2,
+			transformOrigin: `calc(100% - 1px) 1px`,
+			transform: "rotate(-45deg)",
+			backgroundColor: red6
+		},
+		[`&:not(${componentCls}-clear-disabled):hover`]: { borderColor: colorBorder }
+	} };
+}
+const genStatusStyle = (token) => {
+	const { componentCls, colorError, colorWarning, colorErrorHover, colorWarningHover, colorErrorOutline, colorWarningOutline } = token;
+	return {
+		[`&${componentCls}-status-error`]: {
+			borderColor: colorError,
+			[`&:not(${componentCls}-trigger-disabled):hover`]: { borderColor: colorErrorHover },
+			[`&${componentCls}-trigger-active`]: { ...genActiveStyle(token, colorError, colorErrorOutline) }
+		},
+		[`&${componentCls}-status-warning`]: {
+			borderColor: colorWarning,
+			[`&:not(${componentCls}-trigger-disabled):hover`]: { borderColor: colorWarningHover },
+			[`&${componentCls}-trigger-active`]: { ...genActiveStyle(token, colorWarning, colorWarningOutline) }
+		}
+	};
+};
+const genSizeStyle = (token) => {
+	const { componentCls, controlHeightLG, controlHeightSM, controlHeight, controlHeightXS, borderRadius, borderRadiusSM, borderRadiusXS, borderRadiusLG, fontSizeLG } = token;
+	return {
+		[`&${componentCls}-lg`]: {
+			minWidth: controlHeightLG,
+			minHeight: controlHeightLG,
+			borderRadius: borderRadiusLG,
+			[`${componentCls}-color-block, ${componentCls}-clear`]: {
+				width: controlHeight,
+				height: controlHeight,
+				borderRadius
+			},
+			[`${componentCls}-trigger-text`]: { fontSize: fontSizeLG }
+		},
+		[`&${componentCls}-sm`]: {
+			minWidth: controlHeightSM,
+			minHeight: controlHeightSM,
+			borderRadius: borderRadiusSM,
+			[`${componentCls}-color-block, ${componentCls}-clear`]: {
+				width: controlHeightXS,
+				height: controlHeightXS,
+				borderRadius: borderRadiusXS
+			},
+			[`${componentCls}-trigger-text`]: { lineHeight: unit(controlHeightXS) }
+		}
+	};
+};
+const genColorPickerStyle = (token) => {
+	const { antCls, componentCls, colorPickerWidth, colorPrimary, motionDurationMid, colorBgElevated, colorTextDisabled, colorText, colorBgContainerDisabled, borderRadius, marginXS, marginSM, controlHeight, controlHeightSM, colorPickerPresetColorSize, colorPickerPreviewSize, lineWidth, lineType, colorBorder, paddingXXS, fontSize, colorPrimaryHover, controlOutline } = token;
+	return [{ [componentCls]: {
+		[`${componentCls}-inner`]: {
+			"&-content": {
+				display: "flex",
+				flexDirection: "column",
+				width: colorPickerWidth,
+				[`& > ${antCls}-divider`]: { margin: `${unit(marginSM)} 0 ${unit(marginXS)}` }
+			},
+			[`${componentCls}-panel`]: { ...genPickerStyle(token) },
+			...genSliderStyle(token),
+			...genColorBlockStyle(token, colorPickerPreviewSize),
+			...genInputStyle(token),
+			...genPresetsStyle(token),
+			...genClearStyle(token, colorPickerPresetColorSize, { marginInlineStart: "auto" }),
+			[`${componentCls}-operation`]: {
+				display: "flex",
+				justifyContent: "space-between",
+				marginBottom: marginXS
+			}
+		},
+		"&-trigger": {
+			minWidth: controlHeight,
+			minHeight: controlHeight,
+			borderRadius,
+			border: `${unit(lineWidth)} ${lineType} ${colorBorder}`,
+			cursor: "pointer",
+			display: "inline-flex",
+			alignItems: "flex-start",
+			justifyContent: "center",
+			transition: `all ${motionDurationMid}`,
+			background: colorBgElevated,
+			padding: token.calc(paddingXXS).sub(lineWidth).equal(),
+			[`${componentCls}-trigger-text`]: {
+				marginInlineStart: marginXS,
+				marginInlineEnd: token.calc(marginXS).sub(token.calc(paddingXXS).sub(lineWidth)).equal(),
+				fontSize,
+				color: colorText,
+				alignSelf: "center",
+				"&-cell": {
+					"&:not(:last-child):after": { content: "\", \"" },
+					"&-inactive": { color: colorTextDisabled }
+				}
+			},
+			[`&:not(${componentCls}-trigger-disabled):hover`]: { borderColor: colorPrimaryHover },
+			[`&${componentCls}-trigger-active`]: { ...genActiveStyle(token, colorPrimary, controlOutline) },
+			"&-disabled": {
+				color: colorTextDisabled,
+				background: colorBgContainerDisabled,
+				cursor: "not-allowed",
+				[`${componentCls}-trigger-text`]: { color: colorTextDisabled }
+			},
+			...genClearStyle(token, controlHeightSM),
+			...genColorBlockStyle(token, controlHeightSM),
+			...genStatusStyle(token),
+			...genSizeStyle(token)
+		},
+		...genRtlStyle(token)
+	} }, genCompactItemStyle(token, { focusElCls: `${componentCls}-trigger-active` })];
+};
+var style_default = genStyleHooks("ColorPicker", (token) => {
+	const { colorTextQuaternary, marginSM } = token;
+	const colorPickerSliderHeight = 8;
+	const colorPickerToken = mergeToken(token, {
+		colorPickerWidth: 234,
+		colorPickerHandlerSize: 16,
+		colorPickerHandlerSizeSM: 12,
+		colorPickerAlphaInputWidth: 44,
+		colorPickerInputNumberHandleWidth: 16,
+		colorPickerPresetColorSize: 24,
+		colorPickerInsetShadow: `inset 0 0 1px 0 ${colorTextQuaternary}`,
+		colorPickerSliderHeight,
+		colorPickerPreviewSize: token.calc(colorPickerSliderHeight).mul(2).add(marginSM).equal()
+	});
+	return genColorPickerStyle(colorPickerToken);
+});
+//#endregion
+export { style_default as default, genActiveStyle };

package/dist/color-picker/style/input.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/input.d.ts
+declare const genInputStyle: GenerateStyle<ColorPickerToken, CSSObject>;
+//#endregion
+export { genInputStyle as default };

package/dist/color-picker/style/input.js

@@ -0,0 +1,63 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/input.ts
+const genInputStyle = (token) => {
+	const { componentCls, antCls, fontSizeSM, lineHeightSM, colorPickerAlphaInputWidth, marginXXS, paddingXXS, controlHeightSM, marginXS, paddingXS, colorTextPlaceholder, colorPickerInputNumberHandleWidth, lineWidth } = token;
+	return { [`${componentCls}-input-container`]: {
+		display: "flex",
+		[`${componentCls}-steppers${antCls}-input-number`]: {
+			fontSize: fontSizeSM,
+			lineHeight: lineHeightSM,
+			padding: 0,
+			[`${antCls}-input-number-input`]: {
+				paddingInlineStart: paddingXXS,
+				paddingInlineEnd: 0
+			},
+			[`${antCls}-input-number-actions`]: { width: colorPickerInputNumberHandleWidth }
+		},
+		[`${componentCls}-steppers${componentCls}-alpha-input`]: {
+			flex: `0 0 ${unit(colorPickerAlphaInputWidth)}`,
+			marginInlineStart: marginXXS
+		},
+		[`${componentCls}-format-select${antCls}-select`]: {
+			marginInlineEnd: marginXS,
+			width: "auto",
+			"&-single": {
+				padding: 0,
+				border: 0,
+				fontSize: fontSizeSM,
+				lineHeight: unit(controlHeightSM),
+				[`${antCls}-select-content`]: { marginInlineEnd: marginXXS },
+				[`${antCls}-select-item-option-content`]: {
+					fontSize: fontSizeSM,
+					lineHeight: lineHeightSM
+				},
+				[`${antCls}-select-dropdown`]: { [`${antCls}-select-item`]: { minHeight: "auto" } }
+			}
+		},
+		[`${componentCls}-input`]: {
+			gap: marginXXS,
+			alignItems: "center",
+			flex: 1,
+			width: 0,
+			[`${componentCls}-hsb-input,${componentCls}-rgb-input`]: {
+				height: controlHeightSM,
+				display: "flex",
+				gap: marginXXS,
+				alignItems: "center"
+			},
+			[`${componentCls}-steppers`]: { flex: 1 },
+			[`${componentCls}-hex-input${antCls}-input-affix-wrapper`]: {
+				flex: 1,
+				padding: `0 ${unit(paddingXS)}`,
+				[`${antCls}-input`]: {
+					fontSize: fontSizeSM,
+					textTransform: "uppercase",
+					lineHeight: unit(token.calc(controlHeightSM).sub(token.calc(lineWidth).mul(2)).equal())
+				},
+				[`${antCls}-input-prefix`]: { color: colorTextPlaceholder }
+			}
+		}
+	} };
+};
+//#endregion
+export { genInputStyle as default };

package/dist/color-picker/style/picker.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/picker.d.ts
+declare const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject>;
+//#endregion
+export { genPickerStyle as default };

package/dist/color-picker/style/picker.js

@@ -0,0 +1,33 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/picker.ts
+const genPickerStyle = (token) => {
+	const { componentCls, controlHeightLG, borderRadiusSM, colorPickerInsetShadow, marginSM, colorBgElevated, colorFillSecondary, lineWidthBold, colorPickerHandlerSize } = token;
+	return {
+		userSelect: "none",
+		[`${componentCls}-select`]: {
+			[`${componentCls}-palette`]: {
+				minHeight: token.calc(controlHeightLG).mul(4).equal(),
+				overflow: "hidden",
+				borderRadius: borderRadiusSM
+			},
+			[`${componentCls}-saturation`]: {
+				position: "absolute",
+				borderRadius: "inherit",
+				boxShadow: colorPickerInsetShadow,
+				inset: 0
+			},
+			marginBottom: marginSM
+		},
+		[`${componentCls}-handler`]: {
+			width: colorPickerHandlerSize,
+			height: colorPickerHandlerSize,
+			border: `${unit(lineWidthBold)} solid ${colorBgElevated}`,
+			position: "relative",
+			borderRadius: "50%",
+			cursor: "pointer",
+			boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`
+		}
+	};
+};
+//#endregion
+export { genPickerStyle as default };

package/dist/color-picker/style/presets.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/presets.d.ts
+declare const genPresetsStyle: GenerateStyle<ColorPickerToken, CSSObject>;
+//#endregion
+export { genPresetsStyle as default };

package/dist/color-picker/style/presets.js

@@ -0,0 +1,81 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/presets.ts
+const genPresetsStyle = (token) => {
+	const { componentCls, antCls, colorTextQuaternary, paddingXXS, colorPickerPresetColorSize, fontSizeSM, colorText, lineHeightSM, lineWidth, borderRadius, colorFill, colorWhite, marginXXS, paddingXS, fontHeightSM } = token;
+	return { [`${componentCls}-presets`]: {
+		[`${antCls}-collapse-item > ${antCls}-collapse-header`]: {
+			padding: 0,
+			[`${antCls}-collapse-expand-icon`]: {
+				height: fontHeightSM,
+				color: colorTextQuaternary,
+				paddingInlineEnd: paddingXXS
+			}
+		},
+		[`${antCls}-collapse`]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: marginXXS
+		},
+		[`${antCls}-collapse-item > ${antCls}-collapse-panel > ${antCls}-collapse-body`]: { padding: `${unit(paddingXS)} 0` },
+		"&-label": {
+			fontSize: fontSizeSM,
+			color: colorText,
+			lineHeight: lineHeightSM
+		},
+		"&-items": {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: token.calc(marginXXS).mul(1.5).equal(),
+			[`${componentCls}-presets-color`]: {
+				position: "relative",
+				cursor: "pointer",
+				width: colorPickerPresetColorSize,
+				height: colorPickerPresetColorSize,
+				"&::before": {
+					content: "\"\"",
+					pointerEvents: "none",
+					width: token.calc(colorPickerPresetColorSize).add(token.calc(lineWidth).mul(4)).equal(),
+					height: token.calc(colorPickerPresetColorSize).add(token.calc(lineWidth).mul(4)).equal(),
+					position: "absolute",
+					top: token.calc(lineWidth).mul(-2).equal(),
+					insetInlineStart: token.calc(lineWidth).mul(-2).equal(),
+					borderRadius,
+					border: `${unit(lineWidth)} solid transparent`,
+					transition: `border-color ${token.motionDurationMid} ${token.motionEaseInBack}`
+				},
+				"&:hover::before": { borderColor: colorFill },
+				"&::after": {
+					boxSizing: "border-box",
+					position: "absolute",
+					top: "50%",
+					insetInlineStart: "21.5%",
+					display: "table",
+					width: token.calc(colorPickerPresetColorSize).div(13).mul(5).equal(),
+					height: token.calc(colorPickerPresetColorSize).div(13).mul(8).equal(),
+					border: `${unit(token.lineWidthBold)} solid ${token.colorWhite}`,
+					borderTop: 0,
+					borderInlineStart: 0,
+					transform: "rotate(45deg) scale(0) translate(-50%,-50%)",
+					opacity: 0,
+					content: "\"\"",
+					transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`
+				},
+				[`&${componentCls}-presets-color-checked`]: {
+					"&::after": {
+						opacity: 1,
+						borderColor: colorWhite,
+						transform: "rotate(45deg) scale(1) translate(-50%,-50%)",
+						transition: `transform ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`
+					},
+					[`&${componentCls}-presets-color-bright`]: { "&::after": { borderColor: "rgba(0, 0, 0, 0.45)" } }
+				}
+			}
+		},
+		"&-empty": {
+			fontSize: fontSizeSM,
+			color: colorTextQuaternary
+		}
+	} };
+};
+//#endregion
+export { genPresetsStyle as default };

package/dist/color-picker/style/slider.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/slider.d.ts
+declare const genSliderStyle: GenerateStyle<ColorPickerToken, CSSObject>;
+//#endregion
+export { genSliderStyle as default };

package/dist/color-picker/style/slider.js

@@ -0,0 +1,78 @@
+import { getTransBg } from "./color-block.js";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/color-picker/style/slider.ts
+const genSliderStyle = (token) => {
+	const { componentCls, colorPickerInsetShadow, colorBgElevated, colorFillSecondary, lineWidthBold, colorPickerHandlerSizeSM, colorPickerSliderHeight, marginSM, marginXS } = token;
+	const handleInnerSize = token.calc(colorPickerHandlerSizeSM).sub(token.calc(lineWidthBold).mul(2).equal()).equal();
+	const handleHoverSize = token.calc(colorPickerHandlerSizeSM).add(token.calc(lineWidthBold).mul(2).equal()).equal();
+	const activeHandleStyle = { "&:after": {
+		transform: "scale(1)",
+		boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${token.colorPrimaryActive}`
+	} };
+	return {
+		[`${componentCls}-slider`]: [getTransBg(unit(colorPickerSliderHeight), token.colorFillSecondary), {
+			margin: 0,
+			padding: 0,
+			height: colorPickerSliderHeight,
+			borderRadius: token.calc(colorPickerSliderHeight).div(2).equal(),
+			"&-rail": {
+				height: colorPickerSliderHeight,
+				borderRadius: token.calc(colorPickerSliderHeight).div(2).equal(),
+				boxShadow: colorPickerInsetShadow
+			},
+			[`& ${componentCls}-slider-handle`]: {
+				width: handleInnerSize,
+				height: handleInnerSize,
+				top: 0,
+				borderRadius: "100%",
+				"&:before": {
+					display: "block",
+					position: "absolute",
+					background: "transparent",
+					left: {
+						_skip_check_: true,
+						value: "50%"
+					},
+					top: "50%",
+					transform: "translate(-50%, -50%)",
+					width: handleHoverSize,
+					height: handleHoverSize,
+					borderRadius: "100%"
+				},
+				"&:after": {
+					width: colorPickerHandlerSizeSM,
+					height: colorPickerHandlerSizeSM,
+					border: `${unit(lineWidthBold)} solid ${colorBgElevated}`,
+					boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`,
+					outline: "none",
+					insetInlineStart: token.calc(lineWidthBold).mul(-1).equal(),
+					top: token.calc(lineWidthBold).mul(-1).equal(),
+					background: "transparent",
+					transition: "none"
+				},
+				"&:focus": activeHandleStyle
+			}
+		}],
+		[`${componentCls}-slider-container`]: {
+			display: "flex",
+			gap: marginSM,
+			marginBottom: marginSM,
+			[`${componentCls}-slider-group`]: {
+				flex: 1,
+				flexDirection: "column",
+				justifyContent: "space-between",
+				display: "flex",
+				"&-disabled-alpha": { justifyContent: "center" }
+			}
+		},
+		[`${componentCls}-gradient-slider`]: {
+			marginBottom: marginXS,
+			[`& ${componentCls}-slider-handle`]: {
+				"&:after": { transform: "scale(0.8)" },
+				"&-active, &:focus": activeHandleStyle
+			}
+		}
+	};
+};
+//#endregion
+export { genSliderStyle as default };

package/dist/color-picker/util.d.ts

@@ -0,0 +1,19 @@
+import { AggregationColor } from "./color.js";
+import { ColorValueFormatType, ColorValueType } from "./interface.js";
+import { ColorGenInput } from "@v-c/color-picker";
+//#region src/color-picker/util.d.ts
+declare function generateColor(color: ColorGenInput<AggregationColor> | Exclude<ColorValueType, null>): AggregationColor;
+declare function formatColorValue(color: AggregationColor, valueFormat?: ColorValueFormatType): Exclude<ColorValueType, null>;
+declare const getRoundNumber: (value: number) => number;
+declare const getColorAlpha: (color: AggregationColor) => number;
+/** Return the color whose `alpha` is 1 */
+declare function genAlphaColor(color: AggregationColor, alpha?: number): AggregationColor;
+/**
+ * Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
+ */
+declare function getGradientPercentColor(colors: {
+  percent: number;
+  color: string;
+}[], percent: number): string;
+//#endregion
+export { formatColorValue, genAlphaColor, generateColor, getColorAlpha, getGradientPercentColor, getRoundNumber };

package/dist/color-picker/util.js

@@ -0,0 +1,70 @@
+import { AggregationColor } from "./color.js";
+import { Color } from "@v-c/color-picker";
+//#region src/color-picker/util.ts
+function generateColor(color) {
+	if (color instanceof AggregationColor) return color;
+	return new AggregationColor(color);
+}
+function formatSingleColorValue(color, valueFormat) {
+	if (typeof valueFormat === "function") return valueFormat(color);
+	switch (valueFormat) {
+		case "hex": return color.toHexString();
+		case "hsb": return color.toHsbString();
+		default: return color.toRgbString();
+	}
+}
+function formatColorValue(color, valueFormat) {
+	if (!valueFormat) return color;
+	if (color.isGradient()) return color.getColors().map(({ color: itemColor, percent }) => ({
+		color: formatSingleColorValue(itemColor, valueFormat),
+		percent
+	}));
+	return formatSingleColorValue(color, valueFormat);
+}
+const getRoundNumber = (value) => Math.round(Number(value || 0));
+const getColorAlpha = (color) => getRoundNumber(color.toHsb().a * 100);
+/** Return the color whose `alpha` is 1 */
+function genAlphaColor(color, alpha) {
+	const rgba = color.toRgb();
+	if (!rgba.r && !rgba.g && !rgba.b) {
+		const hsba = color.toHsb();
+		hsba.a = alpha || 1;
+		return generateColor(hsba);
+	}
+	rgba.a = alpha || 1;
+	return generateColor(rgba);
+}
+/**
+* Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
+*/
+function getGradientPercentColor(colors, percent) {
+	const filledColors = [
+		{
+			percent: 0,
+			color: colors[0].color
+		},
+		...colors,
+		{
+			percent: 100,
+			color: colors[colors.length - 1].color
+		}
+	];
+	for (let i = 0; i < filledColors.length - 1; i += 1) {
+		const startPtg = filledColors[i].percent;
+		const endPtg = filledColors[i + 1].percent;
+		const startColor = filledColors[i].color;
+		const endColor = filledColors[i + 1].color;
+		if (startPtg <= percent && percent <= endPtg) {
+			const dist = endPtg - startPtg;
+			if (dist === 0) return startColor;
+			const ratio = (percent - startPtg) / dist * 100;
+			const startRcColor = new Color(startColor);
+			const endRcColor = new Color(endColor);
+			return startRcColor.mix(endRcColor, ratio).toRgbString();
+		}
+	}
+	/* istanbul ignore next */
+	return "";
+}
+//#endregion
+export { formatColorValue, genAlphaColor, generateColor, getColorAlpha, getGradientPercentColor, getRoundNumber };