@veracity/vui/dist/utils/styles.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import colors_default from "../theme/foundations/colors.js";

//#region src/utils/styles.ts
/** Concatenates individual className arguments and returns a single string. */
function cs(...classNames) {
	return classNames.filter(Boolean).join(" ");
}
/** Parses HSL color code. */
function parseHSL(color) {
	const res = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec?.(color)?.slice?.(1);
	return {
		h: Number(res?.[0]) || 0,
		s: Number(res?.[1]) || 0,
		l: Number(res?.[2]) || 0
	};
}
/** Converts hex color value to rgb with optional alpha property. */
function hexToRGBA(hex, alpha) {
	let hexStr = hex;
	if (hexStr.charAt(0) === "#") hexStr = hexStr.slice(1);
	if (hexStr.length < 4) hexStr = hexStr.split("").map((char) => char + char).join("");
	const r = parseInt(hexStr.slice(0, 2), 16);
	const g = parseInt(hexStr.slice(2, 4), 16);
	const b = parseInt(hexStr.slice(4, 6), 16);
	return alpha !== void 0 ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
}
function vuiColorToRGBA(color, alpha) {
	if (!color.includes(".")) return "transparent";
	const [colorName, shade] = color.split(".");
	const x = parseHSL(colors_default[colorName][shade]);
	return HSLToRGBA(x.h, x.s, x.l, alpha || shade === "main" ? 1 : parseInt(shade));
}
/** Converts hsl color value to rgb with optional alpha property. */
function HSLToRGBA(h, s, l, alpha) {
	s /= 100;
	l /= 100;
	const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
	let r = 0, g = 0, b = 0;
	if (0 <= h && h < 60) {
		r = c;
		g = x;
		b = 0;
	} else if (60 <= h && h < 120) {
		r = x;
		g = c;
		b = 0;
	} else if (120 <= h && h < 180) {
		r = 0;
		g = c;
		b = x;
	} else if (180 <= h && h < 240) {
		r = 0;
		g = x;
		b = c;
	} else if (240 <= h && h < 300) {
		r = x;
		g = 0;
		b = c;
	} else if (300 <= h && h < 360) {
		r = c;
		g = 0;
		b = x;
	}
	r = Math.round((r + m) * 255);
	g = Math.round((g + m) * 255);
	b = Math.round((b + m) * 255);
	return alpha !== void 0 ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
}
/** Styling to add ellipsis for long texts. */
const ellipsisOverflow = {
	overflow: "hidden",
	textOverflow: "ellipsis",
	whiteSpace: "nowrap"
};

//#endregion
export { HSLToRGBA, cs, ellipsisOverflow, hexToRGBA, parseHSL, vuiColorToRGBA };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=styles.js.map