@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/utils/color/colorFormatChannels.cjs

@@ -0,0 +1,165 @@
+const require_contrastSurfaceTextColor = require("./contrastSurfaceTextColor.cjs");
+//#region src/utils/color/colorFormatChannels.ts
+var clampByteChannel = (channelValue) => {
+	return Math.max(0, Math.min(255, Math.round(channelValue)));
+};
+var clampHueChannel = (hueValue) => {
+	const normalizedHue = hueValue % 360;
+	if (normalizedHue < 0) return normalizedHue + 360;
+	return normalizedHue;
+};
+var clampPercentChannel = (percentValue) => {
+	return Math.max(0, Math.min(100, Math.round(percentValue)));
+};
+var normalizeHexBody = (hexColor) => {
+	const hexBody = hexColor.slice(1);
+	if (hexBody.length === 3) {
+		const redChannel = hexBody[0];
+		const greenChannel = hexBody[1];
+		const blueChannel = hexBody[2];
+		if (!redChannel || !greenChannel || !blueChannel) return;
+		return `${redChannel}${redChannel}${greenChannel}${greenChannel}${blueChannel}${blueChannel}`;
+	}
+	if (hexBody.length === 6 || hexBody.length === 8) return hexBody.slice(0, 6);
+};
+var hexToRgbChannels = (hexColor) => {
+	const normalizedHexBody = normalizeHexBody(hexColor);
+	if (!normalizedHexBody) return;
+	const redChannel = Number.parseInt(normalizedHexBody.slice(0, 2), 16);
+	const greenChannel = Number.parseInt(normalizedHexBody.slice(2, 4), 16);
+	const blueChannel = Number.parseInt(normalizedHexBody.slice(4, 6), 16);
+	if (Number.isNaN(redChannel) || Number.isNaN(greenChannel) || Number.isNaN(blueChannel)) return;
+	return {
+		first: redChannel,
+		second: greenChannel,
+		third: blueChannel
+	};
+};
+var rgbChannelsToHex = (channels) => {
+	const redChannel = clampByteChannel(channels.first);
+	const greenChannel = clampByteChannel(channels.second);
+	const blueChannel = clampByteChannel(channels.third);
+	return `#${redChannel.toString(16).padStart(2, "0").toUpperCase()}${greenChannel.toString(16).padStart(2, "0").toUpperCase()}${blueChannel.toString(16).padStart(2, "0").toUpperCase()}`;
+};
+var hexToHslChannels = (hexColor) => {
+	const rgbChannels = hexToRgbChannels(hexColor);
+	if (!rgbChannels) return;
+	const normalizedRed = rgbChannels.first / 255;
+	const normalizedGreen = rgbChannels.second / 255;
+	const normalizedBlue = rgbChannels.third / 255;
+	const maxChannel = Math.max(normalizedRed, normalizedGreen, normalizedBlue);
+	const minChannel = Math.min(normalizedRed, normalizedGreen, normalizedBlue);
+	const channelDelta = maxChannel - minChannel;
+	let hueValue = 0;
+	const lightnessValue = (maxChannel + minChannel) / 2;
+	if (channelDelta !== 0) if (maxChannel === normalizedRed) hueValue = ((normalizedGreen - normalizedBlue) / channelDelta + (normalizedGreen < normalizedBlue ? 6 : 0)) * 60;
+	else if (maxChannel === normalizedGreen) hueValue = ((normalizedBlue - normalizedRed) / channelDelta + 2) * 60;
+	else hueValue = ((normalizedRed - normalizedGreen) / channelDelta + 4) * 60;
+	let saturationValue = 0;
+	if (channelDelta !== 0) saturationValue = lightnessValue > .5 ? channelDelta / (2 - maxChannel - minChannel) : channelDelta / (maxChannel + minChannel);
+	return {
+		first: Math.round(hueValue),
+		second: Math.round(saturationValue * 100),
+		third: Math.round(lightnessValue * 100)
+	};
+};
+var hslChannelsToHex = (channels) => {
+	const hueValue = clampHueChannel(channels.first);
+	const saturationValue = clampPercentChannel(channels.second) / 100;
+	const lightnessValue = clampPercentChannel(channels.third) / 100;
+	const resolveRgbChannel = (channelOffset) => {
+		const channelAngle = (hueValue + channelOffset) / 30;
+		return clampByteChannel((lightnessValue - saturationValue * Math.min(lightnessValue, 1 - lightnessValue) * Math.max(-1, Math.min(channelAngle % 2 - 1, 1))) * 255);
+	};
+	return rgbChannelsToHex({
+		first: resolveRgbChannel(0),
+		second: resolveRgbChannel(8),
+		third: resolveRgbChannel(4)
+	});
+};
+var normalizeHexInput = (hexInput) => {
+	const trimmedInput = hexInput.toUpperCase();
+	const hexBody = trimmedInput.startsWith("#") ? trimmedInput.slice(1) : trimmedInput;
+	if (!/^[0-9A-F]{3}$/.test(hexBody) && !/^[0-9A-F]{6}$/.test(hexBody)) return;
+	const hexColor = `#${hexBody}`;
+	if (!require_contrastSurfaceTextColor.isHexColor(hexColor)) return;
+	return rgbChannelsToHex(hexToRgbChannels(hexColor) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	});
+};
+var formatHexDisplayValue = (hexColor) => {
+	return hexColor.slice(1).toUpperCase();
+};
+var rgbChannelsToHsvChannels = (channels) => {
+	const normalizedRed = channels.first / 255;
+	const normalizedGreen = channels.second / 255;
+	const normalizedBlue = channels.third / 255;
+	const maxChannel = Math.max(normalizedRed, normalizedGreen, normalizedBlue);
+	const channelDelta = maxChannel - Math.min(normalizedRed, normalizedGreen, normalizedBlue);
+	let hueValue = 0;
+	if (channelDelta !== 0) {
+		if (maxChannel === normalizedRed) hueValue = (normalizedGreen - normalizedBlue) / channelDelta % 6;
+		else if (maxChannel === normalizedGreen) hueValue = (normalizedBlue - normalizedRed) / channelDelta + 2;
+		else hueValue = (normalizedRed - normalizedGreen) / channelDelta + 4;
+		hueValue = Math.round(hueValue * 60);
+		if (hueValue < 0) hueValue += 360;
+	}
+	const saturationValue = maxChannel === 0 ? 0 : channelDelta / maxChannel;
+	return {
+		hue: hueValue,
+		saturation: saturationValue,
+		value: maxChannel
+	};
+};
+var hsvChannelsToRgbChannels = (channels) => {
+	const chromaValue = channels.value * channels.saturation;
+	const hueSector = channels.hue / 60;
+	const intermediateValue = chromaValue * (1 - Math.abs(hueSector % 2 - 1));
+	const lightnessMatch = channels.value - chromaValue;
+	let redChannel = 0;
+	let greenChannel = 0;
+	let blueChannel = 0;
+	if (hueSector >= 0 && hueSector < 1) {
+		redChannel = chromaValue;
+		greenChannel = intermediateValue;
+	} else if (hueSector >= 1 && hueSector < 2) {
+		redChannel = intermediateValue;
+		greenChannel = chromaValue;
+	} else if (hueSector >= 2 && hueSector < 3) {
+		greenChannel = chromaValue;
+		blueChannel = intermediateValue;
+	} else if (hueSector >= 3 && hueSector < 4) {
+		greenChannel = intermediateValue;
+		blueChannel = chromaValue;
+	} else if (hueSector >= 4 && hueSector < 5) {
+		redChannel = intermediateValue;
+		blueChannel = chromaValue;
+	} else {
+		redChannel = chromaValue;
+		blueChannel = intermediateValue;
+	}
+	return {
+		first: clampByteChannel((redChannel + lightnessMatch) * 255),
+		second: clampByteChannel((greenChannel + lightnessMatch) * 255),
+		third: clampByteChannel((blueChannel + lightnessMatch) * 255)
+	};
+};
+var hexToHsvChannels = (hexColor) => {
+	const rgbChannels = hexToRgbChannels(hexColor);
+	if (!rgbChannels) return;
+	return rgbChannelsToHsvChannels(rgbChannels);
+};
+var hsvChannelsToHex = (channels) => {
+	return rgbChannelsToHex(hsvChannelsToRgbChannels(channels));
+};
+//#endregion
+exports.formatHexDisplayValue = formatHexDisplayValue;
+exports.hexToHslChannels = hexToHslChannels;
+exports.hexToHsvChannels = hexToHsvChannels;
+exports.hexToRgbChannels = hexToRgbChannels;
+exports.hslChannelsToHex = hslChannelsToHex;
+exports.hsvChannelsToHex = hsvChannelsToHex;
+exports.normalizeHexInput = normalizeHexInput;
+exports.rgbChannelsToHex = rgbChannelsToHex;

package/dist/utils/color/colorFormatChannels.js

@@ -0,0 +1,158 @@
+import { isHexColor } from "./contrastSurfaceTextColor.js";
+//#region src/utils/color/colorFormatChannels.ts
+var clampByteChannel = (channelValue) => {
+	return Math.max(0, Math.min(255, Math.round(channelValue)));
+};
+var clampHueChannel = (hueValue) => {
+	const normalizedHue = hueValue % 360;
+	if (normalizedHue < 0) return normalizedHue + 360;
+	return normalizedHue;
+};
+var clampPercentChannel = (percentValue) => {
+	return Math.max(0, Math.min(100, Math.round(percentValue)));
+};
+var normalizeHexBody = (hexColor) => {
+	const hexBody = hexColor.slice(1);
+	if (hexBody.length === 3) {
+		const redChannel = hexBody[0];
+		const greenChannel = hexBody[1];
+		const blueChannel = hexBody[2];
+		if (!redChannel || !greenChannel || !blueChannel) return;
+		return `${redChannel}${redChannel}${greenChannel}${greenChannel}${blueChannel}${blueChannel}`;
+	}
+	if (hexBody.length === 6 || hexBody.length === 8) return hexBody.slice(0, 6);
+};
+var hexToRgbChannels = (hexColor) => {
+	const normalizedHexBody = normalizeHexBody(hexColor);
+	if (!normalizedHexBody) return;
+	const redChannel = Number.parseInt(normalizedHexBody.slice(0, 2), 16);
+	const greenChannel = Number.parseInt(normalizedHexBody.slice(2, 4), 16);
+	const blueChannel = Number.parseInt(normalizedHexBody.slice(4, 6), 16);
+	if (Number.isNaN(redChannel) || Number.isNaN(greenChannel) || Number.isNaN(blueChannel)) return;
+	return {
+		first: redChannel,
+		second: greenChannel,
+		third: blueChannel
+	};
+};
+var rgbChannelsToHex = (channels) => {
+	const redChannel = clampByteChannel(channels.first);
+	const greenChannel = clampByteChannel(channels.second);
+	const blueChannel = clampByteChannel(channels.third);
+	return `#${redChannel.toString(16).padStart(2, "0").toUpperCase()}${greenChannel.toString(16).padStart(2, "0").toUpperCase()}${blueChannel.toString(16).padStart(2, "0").toUpperCase()}`;
+};
+var hexToHslChannels = (hexColor) => {
+	const rgbChannels = hexToRgbChannels(hexColor);
+	if (!rgbChannels) return;
+	const normalizedRed = rgbChannels.first / 255;
+	const normalizedGreen = rgbChannels.second / 255;
+	const normalizedBlue = rgbChannels.third / 255;
+	const maxChannel = Math.max(normalizedRed, normalizedGreen, normalizedBlue);
+	const minChannel = Math.min(normalizedRed, normalizedGreen, normalizedBlue);
+	const channelDelta = maxChannel - minChannel;
+	let hueValue = 0;
+	const lightnessValue = (maxChannel + minChannel) / 2;
+	if (channelDelta !== 0) if (maxChannel === normalizedRed) hueValue = ((normalizedGreen - normalizedBlue) / channelDelta + (normalizedGreen < normalizedBlue ? 6 : 0)) * 60;
+	else if (maxChannel === normalizedGreen) hueValue = ((normalizedBlue - normalizedRed) / channelDelta + 2) * 60;
+	else hueValue = ((normalizedRed - normalizedGreen) / channelDelta + 4) * 60;
+	let saturationValue = 0;
+	if (channelDelta !== 0) saturationValue = lightnessValue > .5 ? channelDelta / (2 - maxChannel - minChannel) : channelDelta / (maxChannel + minChannel);
+	return {
+		first: Math.round(hueValue),
+		second: Math.round(saturationValue * 100),
+		third: Math.round(lightnessValue * 100)
+	};
+};
+var hslChannelsToHex = (channels) => {
+	const hueValue = clampHueChannel(channels.first);
+	const saturationValue = clampPercentChannel(channels.second) / 100;
+	const lightnessValue = clampPercentChannel(channels.third) / 100;
+	const resolveRgbChannel = (channelOffset) => {
+		const channelAngle = (hueValue + channelOffset) / 30;
+		return clampByteChannel((lightnessValue - saturationValue * Math.min(lightnessValue, 1 - lightnessValue) * Math.max(-1, Math.min(channelAngle % 2 - 1, 1))) * 255);
+	};
+	return rgbChannelsToHex({
+		first: resolveRgbChannel(0),
+		second: resolveRgbChannel(8),
+		third: resolveRgbChannel(4)
+	});
+};
+var normalizeHexInput = (hexInput) => {
+	const trimmedInput = hexInput.toUpperCase();
+	const hexBody = trimmedInput.startsWith("#") ? trimmedInput.slice(1) : trimmedInput;
+	if (!/^[0-9A-F]{3}$/.test(hexBody) && !/^[0-9A-F]{6}$/.test(hexBody)) return;
+	const hexColor = `#${hexBody}`;
+	if (!isHexColor(hexColor)) return;
+	return rgbChannelsToHex(hexToRgbChannels(hexColor) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	});
+};
+var formatHexDisplayValue = (hexColor) => {
+	return hexColor.slice(1).toUpperCase();
+};
+var rgbChannelsToHsvChannels = (channels) => {
+	const normalizedRed = channels.first / 255;
+	const normalizedGreen = channels.second / 255;
+	const normalizedBlue = channels.third / 255;
+	const maxChannel = Math.max(normalizedRed, normalizedGreen, normalizedBlue);
+	const channelDelta = maxChannel - Math.min(normalizedRed, normalizedGreen, normalizedBlue);
+	let hueValue = 0;
+	if (channelDelta !== 0) {
+		if (maxChannel === normalizedRed) hueValue = (normalizedGreen - normalizedBlue) / channelDelta % 6;
+		else if (maxChannel === normalizedGreen) hueValue = (normalizedBlue - normalizedRed) / channelDelta + 2;
+		else hueValue = (normalizedRed - normalizedGreen) / channelDelta + 4;
+		hueValue = Math.round(hueValue * 60);
+		if (hueValue < 0) hueValue += 360;
+	}
+	const saturationValue = maxChannel === 0 ? 0 : channelDelta / maxChannel;
+	return {
+		hue: hueValue,
+		saturation: saturationValue,
+		value: maxChannel
+	};
+};
+var hsvChannelsToRgbChannels = (channels) => {
+	const chromaValue = channels.value * channels.saturation;
+	const hueSector = channels.hue / 60;
+	const intermediateValue = chromaValue * (1 - Math.abs(hueSector % 2 - 1));
+	const lightnessMatch = channels.value - chromaValue;
+	let redChannel = 0;
+	let greenChannel = 0;
+	let blueChannel = 0;
+	if (hueSector >= 0 && hueSector < 1) {
+		redChannel = chromaValue;
+		greenChannel = intermediateValue;
+	} else if (hueSector >= 1 && hueSector < 2) {
+		redChannel = intermediateValue;
+		greenChannel = chromaValue;
+	} else if (hueSector >= 2 && hueSector < 3) {
+		greenChannel = chromaValue;
+		blueChannel = intermediateValue;
+	} else if (hueSector >= 3 && hueSector < 4) {
+		greenChannel = intermediateValue;
+		blueChannel = chromaValue;
+	} else if (hueSector >= 4 && hueSector < 5) {
+		redChannel = intermediateValue;
+		blueChannel = chromaValue;
+	} else {
+		redChannel = chromaValue;
+		blueChannel = intermediateValue;
+	}
+	return {
+		first: clampByteChannel((redChannel + lightnessMatch) * 255),
+		second: clampByteChannel((greenChannel + lightnessMatch) * 255),
+		third: clampByteChannel((blueChannel + lightnessMatch) * 255)
+	};
+};
+var hexToHsvChannels = (hexColor) => {
+	const rgbChannels = hexToRgbChannels(hexColor);
+	if (!rgbChannels) return;
+	return rgbChannelsToHsvChannels(rgbChannels);
+};
+var hsvChannelsToHex = (channels) => {
+	return rgbChannelsToHex(hsvChannelsToRgbChannels(channels));
+};
+//#endregion
+export { formatHexDisplayValue, hexToHslChannels, hexToHsvChannels, hexToRgbChannels, hslChannelsToHex, hsvChannelsToHex, normalizeHexInput, rgbChannelsToHex };

package/dist/utils/color/colorValue.cjs

@@ -0,0 +1,31 @@
+const require_contrastSurfaceTextColor = require("./contrastSurfaceTextColor.cjs");
+//#region src/utils/color/colorValue.ts
+var isCssVariableColor = (value) => {
+	return value.startsWith("var(--");
+};
+var isCustomColor = (value) => {
+	return require_contrastSurfaceTextColor.isHexColor(value) || isCssVariableColor(value);
+};
+var resolveAccentColorPreview = (accent) => {
+	return `var(--s-ui-color-background-accent-${accent}-primary)`;
+};
+var resolveColorPreview = (value) => {
+	if (isCustomColor(value)) return value;
+	return resolveAccentColorPreview(value);
+};
+var normalizeColorValue = (value) => {
+	if (isCustomColor(value)) {
+		if (require_contrastSurfaceTextColor.isHexColor(value)) return value.toUpperCase();
+		return value;
+	}
+	return resolveAccentColorPreview(value);
+};
+var isSameColor = (first, second) => {
+	return normalizeColorValue(first) === normalizeColorValue(second);
+};
+//#endregion
+exports.isCssVariableColor = isCssVariableColor;
+exports.isCustomColor = isCustomColor;
+exports.isSameColor = isSameColor;
+exports.normalizeColorValue = normalizeColorValue;
+exports.resolveColorPreview = resolveColorPreview;

package/dist/utils/color/colorValue.js

@@ -0,0 +1,27 @@
+import { isHexColor } from "./contrastSurfaceTextColor.js";
+//#region src/utils/color/colorValue.ts
+var isCssVariableColor = (value) => {
+	return value.startsWith("var(--");
+};
+var isCustomColor = (value) => {
+	return isHexColor(value) || isCssVariableColor(value);
+};
+var resolveAccentColorPreview = (accent) => {
+	return `var(--s-ui-color-background-accent-${accent}-primary)`;
+};
+var resolveColorPreview = (value) => {
+	if (isCustomColor(value)) return value;
+	return resolveAccentColorPreview(value);
+};
+var normalizeColorValue = (value) => {
+	if (isCustomColor(value)) {
+		if (isHexColor(value)) return value.toUpperCase();
+		return value;
+	}
+	return resolveAccentColorPreview(value);
+};
+var isSameColor = (first, second) => {
+	return normalizeColorValue(first) === normalizeColorValue(second);
+};
+//#endregion
+export { isCssVariableColor, isCustomColor, isSameColor, normalizeColorValue, resolveColorPreview };

package/dist/utils/color/contrastSurfaceTextColor.cjs

@@ -0,0 +1,60 @@
+//#region src/utils/color/contrastSurfaceTextColor.ts
+var SURFACE_TEXT_DARK = "#0c1022";
+var SURFACE_TEXT_LIGHT = "#FFFFFF";
+var SURFACE_TEXT_LIGHT_LUMINANCE = 1;
+var isHexColor = (value) => {
+	return value.startsWith("#");
+};
+var normalizeHexChannel = (channelHex) => {
+	return Number.parseInt(channelHex, 16) / 255;
+};
+var parseHexColor = (hexColor) => {
+	const hexBody = hexColor.slice(1);
+	if (hexBody.length === 3) {
+		const redChannel = hexBody[0];
+		const greenChannel = hexBody[1];
+		const blueChannel = hexBody[2];
+		if (!redChannel || !greenChannel || !blueChannel) return;
+		return {
+			red: normalizeHexChannel(redChannel + redChannel),
+			green: normalizeHexChannel(greenChannel + greenChannel),
+			blue: normalizeHexChannel(blueChannel + blueChannel)
+		};
+	}
+	if (hexBody.length === 6 || hexBody.length === 8) return {
+		red: normalizeHexChannel(hexBody.slice(0, 2)),
+		green: normalizeHexChannel(hexBody.slice(2, 4)),
+		blue: normalizeHexChannel(hexBody.slice(4, 6))
+	};
+};
+var getLinearChannelValue = (channel) => {
+	if (channel <= .03928) return channel / 12.92;
+	return ((channel + .055) / 1.055) ** 2.4;
+};
+var getRelativeLuminance = (rgb) => {
+	const linearRed = getLinearChannelValue(rgb.red);
+	const linearGreen = getLinearChannelValue(rgb.green);
+	const linearBlue = getLinearChannelValue(rgb.blue);
+	return .2126 * linearRed + .7152 * linearGreen + .0722 * linearBlue;
+};
+var getContrastRatio = (firstLuminance, secondLuminance) => {
+	const lighterLuminance = Math.max(firstLuminance, secondLuminance);
+	const darkerLuminance = Math.min(firstLuminance, secondLuminance);
+	return (lighterLuminance + .05) / (darkerLuminance + .05);
+};
+var getSurfaceDarkTextLuminance = () => {
+	const rgb = parseHexColor(SURFACE_TEXT_DARK);
+	if (!rgb) return 0;
+	return getRelativeLuminance(rgb);
+};
+var getContrastingSurfaceTextColor = (backgroundHex) => {
+	const rgb = parseHexColor(backgroundHex);
+	if (!rgb) return SURFACE_TEXT_LIGHT;
+	const backgroundLuminance = getRelativeLuminance(rgb);
+	const darkTextLuminance = getSurfaceDarkTextLuminance();
+	if (getContrastRatio(SURFACE_TEXT_LIGHT_LUMINANCE, backgroundLuminance) >= getContrastRatio(darkTextLuminance, backgroundLuminance)) return SURFACE_TEXT_LIGHT;
+	return SURFACE_TEXT_DARK;
+};
+//#endregion
+exports.getContrastingSurfaceTextColor = getContrastingSurfaceTextColor;
+exports.isHexColor = isHexColor;

package/dist/utils/color/contrastSurfaceTextColor.js

@@ -0,0 +1,59 @@
+//#region src/utils/color/contrastSurfaceTextColor.ts
+var SURFACE_TEXT_DARK = "#0c1022";
+var SURFACE_TEXT_LIGHT = "#FFFFFF";
+var SURFACE_TEXT_LIGHT_LUMINANCE = 1;
+var isHexColor = (value) => {
+	return value.startsWith("#");
+};
+var normalizeHexChannel = (channelHex) => {
+	return Number.parseInt(channelHex, 16) / 255;
+};
+var parseHexColor = (hexColor) => {
+	const hexBody = hexColor.slice(1);
+	if (hexBody.length === 3) {
+		const redChannel = hexBody[0];
+		const greenChannel = hexBody[1];
+		const blueChannel = hexBody[2];
+		if (!redChannel || !greenChannel || !blueChannel) return;
+		return {
+			red: normalizeHexChannel(redChannel + redChannel),
+			green: normalizeHexChannel(greenChannel + greenChannel),
+			blue: normalizeHexChannel(blueChannel + blueChannel)
+		};
+	}
+	if (hexBody.length === 6 || hexBody.length === 8) return {
+		red: normalizeHexChannel(hexBody.slice(0, 2)),
+		green: normalizeHexChannel(hexBody.slice(2, 4)),
+		blue: normalizeHexChannel(hexBody.slice(4, 6))
+	};
+};
+var getLinearChannelValue = (channel) => {
+	if (channel <= .03928) return channel / 12.92;
+	return ((channel + .055) / 1.055) ** 2.4;
+};
+var getRelativeLuminance = (rgb) => {
+	const linearRed = getLinearChannelValue(rgb.red);
+	const linearGreen = getLinearChannelValue(rgb.green);
+	const linearBlue = getLinearChannelValue(rgb.blue);
+	return .2126 * linearRed + .7152 * linearGreen + .0722 * linearBlue;
+};
+var getContrastRatio = (firstLuminance, secondLuminance) => {
+	const lighterLuminance = Math.max(firstLuminance, secondLuminance);
+	const darkerLuminance = Math.min(firstLuminance, secondLuminance);
+	return (lighterLuminance + .05) / (darkerLuminance + .05);
+};
+var getSurfaceDarkTextLuminance = () => {
+	const rgb = parseHexColor(SURFACE_TEXT_DARK);
+	if (!rgb) return 0;
+	return getRelativeLuminance(rgb);
+};
+var getContrastingSurfaceTextColor = (backgroundHex) => {
+	const rgb = parseHexColor(backgroundHex);
+	if (!rgb) return SURFACE_TEXT_LIGHT;
+	const backgroundLuminance = getRelativeLuminance(rgb);
+	const darkTextLuminance = getSurfaceDarkTextLuminance();
+	if (getContrastRatio(SURFACE_TEXT_LIGHT_LUMINANCE, backgroundLuminance) >= getContrastRatio(darkTextLuminance, backgroundLuminance)) return SURFACE_TEXT_LIGHT;
+	return SURFACE_TEXT_DARK;
+};
+//#endregion
+export { getContrastingSurfaceTextColor, isHexColor };

package/dist/utils/color/defaultPaletteColors.cjs

@@ -0,0 +1,17 @@
+const require_types = require("./types.cjs");
+//#region src/utils/color/defaultPaletteColors.ts
+var DEFAULT_COLOR_PALETTE = [
+	require_types.EAccentColor.RED_ORANGE,
+	require_types.EAccentColor.ORANGE,
+	require_types.EAccentColor.YELLOW,
+	require_types.EAccentColor.GREEN,
+	require_types.EAccentColor.TEAL,
+	require_types.EAccentColor.CYAN,
+	require_types.EAccentColor.BLUE,
+	require_types.EAccentColor.INDIGO,
+	require_types.EAccentColor.VIOLET,
+	require_types.EAccentColor.MAGENTA,
+	require_types.EAccentColor.PINK
+];
+//#endregion
+exports.DEFAULT_COLOR_PALETTE = DEFAULT_COLOR_PALETTE;

package/dist/utils/color/defaultPaletteColors.js

@@ -0,0 +1,17 @@
+import { EAccentColor } from "./types.js";
+//#region src/utils/color/defaultPaletteColors.ts
+var DEFAULT_COLOR_PALETTE = [
+	EAccentColor.RED_ORANGE,
+	EAccentColor.ORANGE,
+	EAccentColor.YELLOW,
+	EAccentColor.GREEN,
+	EAccentColor.TEAL,
+	EAccentColor.CYAN,
+	EAccentColor.BLUE,
+	EAccentColor.INDIGO,
+	EAccentColor.VIOLET,
+	EAccentColor.MAGENTA,
+	EAccentColor.PINK
+];
+//#endregion
+export { DEFAULT_COLOR_PALETTE };

package/dist/utils/color/formatColorForDisplay.cjs

@@ -0,0 +1,45 @@
+const require_contrastSurfaceTextColor = require("./contrastSurfaceTextColor.cjs");
+const require_colorFormatChannels = require("./colorFormatChannels.cjs");
+const require_types = require("./types.cjs");
+const require_colorValue = require("./colorValue.cjs");
+//#region src/utils/color/formatColorForDisplay.ts
+var DEFAULT_COLOR_FORMATS = [
+	require_types.EColorFormat.HEX,
+	require_types.EColorFormat.RGB,
+	require_types.EColorFormat.HSL
+];
+var COLOR_FORMAT_LABELS = {
+	[require_types.EColorFormat.HEX]: "Hex",
+	[require_types.EColorFormat.RGB]: "RGB",
+	[require_types.EColorFormat.HSL]: "HSL"
+};
+var readHexFromComputedBackground = (element) => {
+	const rgbMatch = getComputedStyle(element).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (!rgbMatch) return;
+	const redChannel = Number.parseInt(rgbMatch[1] ?? "0", 10);
+	const greenChannel = Number.parseInt(rgbMatch[2] ?? "0", 10);
+	const blueChannel = Number.parseInt(rgbMatch[3] ?? "0", 10);
+	return `#${redChannel.toString(16).padStart(2, "0").toUpperCase()}${greenChannel.toString(16).padStart(2, "0").toUpperCase()}${blueChannel.toString(16).padStart(2, "0").toUpperCase()}`;
+};
+var resolveEditableHexColor = (colorValue, previewElement) => {
+	if (require_colorValue.isCustomColor(colorValue) && require_contrastSurfaceTextColor.isHexColor(colorValue)) return colorValue;
+	if (previewElement) return readHexFromComputedBackground(previewElement);
+};
+var formatColorForDisplay = (hexColor, format) => {
+	if (format === require_types.EColorFormat.HEX) return require_colorFormatChannels.formatHexDisplayValue(hexColor);
+	if (format === require_types.EColorFormat.RGB) return require_colorFormatChannels.hexToRgbChannels(hexColor) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	};
+	return require_colorFormatChannels.hexToHslChannels(hexColor) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	};
+};
+//#endregion
+exports.COLOR_FORMAT_LABELS = COLOR_FORMAT_LABELS;
+exports.DEFAULT_COLOR_FORMATS = DEFAULT_COLOR_FORMATS;
+exports.formatColorForDisplay = formatColorForDisplay;
+exports.resolveEditableHexColor = resolveEditableHexColor;

package/dist/utils/color/formatColorForDisplay.js

@@ -0,0 +1,42 @@
+import { isHexColor } from "./contrastSurfaceTextColor.js";
+import { formatHexDisplayValue, hexToHslChannels, hexToRgbChannels } from "./colorFormatChannels.js";
+import { EColorFormat } from "./types.js";
+import { isCustomColor } from "./colorValue.js";
+//#region src/utils/color/formatColorForDisplay.ts
+var DEFAULT_COLOR_FORMATS = [
+	EColorFormat.HEX,
+	EColorFormat.RGB,
+	EColorFormat.HSL
+];
+var COLOR_FORMAT_LABELS = {
+	[EColorFormat.HEX]: "Hex",
+	[EColorFormat.RGB]: "RGB",
+	[EColorFormat.HSL]: "HSL"
+};
+var readHexFromComputedBackground = (element) => {
+	const rgbMatch = getComputedStyle(element).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (!rgbMatch) return;
+	const redChannel = Number.parseInt(rgbMatch[1] ?? "0", 10);
+	const greenChannel = Number.parseInt(rgbMatch[2] ?? "0", 10);
+	const blueChannel = Number.parseInt(rgbMatch[3] ?? "0", 10);
+	return `#${redChannel.toString(16).padStart(2, "0").toUpperCase()}${greenChannel.toString(16).padStart(2, "0").toUpperCase()}${blueChannel.toString(16).padStart(2, "0").toUpperCase()}`;
+};
+var resolveEditableHexColor = (colorValue, previewElement) => {
+	if (isCustomColor(colorValue) && isHexColor(colorValue)) return colorValue;
+	if (previewElement) return readHexFromComputedBackground(previewElement);
+};
+var formatColorForDisplay = (hexColor, format) => {
+	if (format === EColorFormat.HEX) return formatHexDisplayValue(hexColor);
+	if (format === EColorFormat.RGB) return hexToRgbChannels(hexColor) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	};
+	return hexToHslChannels(hexColor) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	};
+};
+//#endregion
+export { COLOR_FORMAT_LABELS, DEFAULT_COLOR_FORMATS, formatColorForDisplay, resolveEditableHexColor };

package/dist/utils/color/parseColorFromInput.cjs

@@ -0,0 +1,34 @@
+const require_colorFormatChannels = require("./colorFormatChannels.cjs");
+const require_types = require("./types.cjs");
+//#region src/utils/color/parseColorFromInput.ts
+var parseChannelValue = (channelInput) => {
+	const parsedValue = Number.parseInt(channelInput, 10);
+	if (Number.isNaN(parsedValue)) return;
+	return parsedValue;
+};
+var parseColorFromInput = (format, inputValue) => {
+	if (format === require_types.EColorFormat.HEX) {
+		if (typeof inputValue !== "string") return;
+		return require_colorFormatChannels.normalizeHexInput(inputValue);
+	}
+	if (typeof inputValue === "string") return;
+	if (format === require_types.EColorFormat.RGB) {
+		const normalizedHex = require_colorFormatChannels.rgbChannelsToHex({
+			first: parseChannelValue(String(inputValue.first)) ?? 0,
+			second: parseChannelValue(String(inputValue.second)) ?? 0,
+			third: parseChannelValue(String(inputValue.third)) ?? 0
+		});
+		if (!require_colorFormatChannels.hexToRgbChannels(normalizedHex)) return;
+		return normalizedHex;
+	}
+	const normalizedHex = require_colorFormatChannels.hslChannelsToHex({
+		first: parseChannelValue(String(inputValue.first)) ?? 0,
+		second: parseChannelValue(String(inputValue.second)) ?? 0,
+		third: parseChannelValue(String(inputValue.third)) ?? 0
+	});
+	if (!normalizedHex) return;
+	if (!require_colorFormatChannels.hexToHslChannels(normalizedHex)) return;
+	return normalizedHex;
+};
+//#endregion
+exports.parseColorFromInput = parseColorFromInput;