@digdir/designsystemet 1.13.2 → 1.14.0

package/dist/src/colors/utils.js

@@ -1,157 +1,244 @@
-// src/colors/utils.ts
 import chroma from "chroma-js";
 import Colorjs from "colorjs.io";
 import { Hsluv } from "hsluv";
-var hexToCssHsl = (hex, valuesOnly = false) => {
-  const [h, s, l] = chroma(hex).hsl();
-  const hRounded = Math.round(h);
-  const sRounded = Math.round(s * 100);
-  const lRounded = Math.round(l * 100);
-  const cssString = `${hRounded},${sRounded}%,${lRounded}%`;
-  return valuesOnly ? cssString : `hsl(${cssString})`;
-};
-var hexToHSL = (hex) => {
-  const [h, s, l] = chroma(hex).hsl();
-  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
-};
-var hexToHsluv = (hex) => {
-  const conv = new Hsluv();
-  conv.hex = hex;
-  conv.hexToHsluv();
-  return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
-};
-var hslArrToCss = (HSL) => {
-  return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
-};
-var HSLToHex = (h, s, l) => {
-  return chroma.hsl(h, s / 100, l / 100).hex();
-};
-var hexToRgb = (hex, type = "255") => {
-  const rgb = chroma(hex).rgb();
-  return {
-    r: type === "255" ? rgb[0] : rgb[0] / 255,
-    g: type === "255" ? rgb[1] : rgb[1] / 255,
-    b: type === "255" ? rgb[2] : rgb[2] / 255
-  };
-};
-var getContrastFromHex = (color1, color2) => {
-  const lum1 = chroma(color1).luminance();
-  const lum2 = chroma(color2).luminance();
-  return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
-};
-var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
-  const conv = new Hsluv();
-  conv.hex = mainColor;
-  conv.hexToHsluv();
-  conv.hsluv_l = lightness;
-  conv.hsluvToHex();
-  const lightMainColor = conv.hex;
-  const lum1 = chroma(lightMainColor).luminance();
-  const lum2 = chroma(backgroundColor).luminance();
-  const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
-  return ratio;
-};
-var areColorsContrasting = (color1, color2, type = "aa") => {
-  const contrast = getContrastFromHex(color1, color2);
-  if (contrast !== null) {
-    if (type === "aaa") {
-      return contrast >= 7;
-    }
-    if (type === "aa") {
-      return contrast >= 4.5;
-    }
-    return contrast >= 3;
-  }
-  return false;
-};
-var isHexColor = (hex) => {
-  return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
-};
-var getLuminanceFromLightness = (lightness) => {
-  const conv = new Hsluv();
-  conv.hsluv_l = lightness;
-  conv.hsluvToHex();
-  return chroma(conv.hex).luminance();
-};
-var getLuminanceFromColor = (color) => {
-  return chroma(color).luminance();
-};
-var getLightnessFromHex = (hex) => {
-  const conv = new Hsluv();
-  conv.hex = hex;
-  conv.hexToHsluv();
-  return conv.hsluv_l;
-};
-var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
-  const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
-  const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
-  const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
-  const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
-  if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
-    return true;
-  }
-  if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
-    return true;
-  }
-  return false;
-};
-var convertToHex = (color) => {
-  if (!color) {
-    return "#000000";
-  }
-  if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
-    return color;
-  }
-  return chroma(color).hex();
-};
-var rgbToHex = (rgb) => {
-  return `#${[rgb.r, rgb.g, rgb.b].map((x) => {
-    const hex = Math.round(x * 255).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  }).join("")}`;
-};
-var convertColor = (cssColor, format) => {
-  const color = new Colorjs(cssColor);
-  switch (format) {
-    case "rgb":
-    case "rgba":
-      return color.toString({
-        format: {
-          name: format,
-          coords: ["<number>[0, 255]", "<number>[0, 255]", "<number>[0, 255]"]
-        },
-        precision: 3
-      });
-    case "hex":
-      return color.toString({ format, precision: 3 });
-    case "hct":
-      return color.to(format).toString({
-        format: {
-          name: format,
-          coords: ["<number>", "<number>", "<number>"]
-        },
-        precision: 3
-      });
-    default:
-      return color.to(format).toString({ precision: 3 });
-  }
-};
-export {
-  HSLToHex,
-  areColorsContrasting,
-  canTextBeUsedOnColors,
-  convertColor,
-  convertToHex,
-  getContrastFromHex,
-  getContrastFromLightness,
-  getLightnessFromHex,
-  getLuminanceFromColor,
-  getLuminanceFromLightness,
-  hexToCssHsl,
-  hexToHSL,
-  hexToHsluv,
-  hexToRgb,
-  hslArrToCss,
-  isHexColor,
-  rgbToHex
-};
+//#region src/colors/utils.ts
+/**
+* Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'
+*
+* @param hex A hex color string
+* @param valuesOnly If true, only the values are returned
+* @returns A CSS HSL string
+*/
+const hexToCssHsl = (hex, valuesOnly = false) => {
+	const [h, s, l] = chroma(hex).hsl();
+	const cssString = `${Math.round(h)},${Math.round(s * 100)}%,${Math.round(l * 100)}%`;
+	return valuesOnly ? cssString : `hsl(${cssString})`;
+};
+/**
+* Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'
+*
+* @param H A Hex color string
+* @returns HSL values in an array
+*/
+const hexToHSL = (hex) => {
+	const [h, s, l] = chroma(hex).hsl();
+	return [
+		Math.round(h),
+		Math.round(s * 100),
+		Math.round(l * 100)
+	];
+};
+/**
+* Converts a HEX color '#xxxxxx' into an array of HSLuv values '[h,s,l]'
+*
+* @param hex A hex color string
+* @returns
+*/
+const hexToHsluv = (hex) => {
+	const conv = new Hsluv();
+	conv.hex = hex;
+	conv.hexToHsluv();
+	return [
+		conv.hsluv_h,
+		conv.hsluv_s,
+		conv.hsluv_l
+	];
+};
+/**
+* Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'
+*
+* @param HSL A HSL number array '[h,s,l]'
+* @returns A hex color string
+*/
+const hslArrToCss = (HSL) => {
+	return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
+};
+/**
+* Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'
+*
+* @param h The HSL hue
+* @param s The HSL saturation
+* @param l The HSL lightness
+* @returns HEX color string
+*/
+const HSLToHex = (h, s, l) => {
+	return chroma.hsl(h, s / 100, l / 100).hex();
+};
+/**
+* Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'
+*
+* @param hex A hex color string
+* @param type The type of RGB values to return
+* @returns RGB values in an array
+*/
+const hexToRgb = (hex, type = "255") => {
+	const rgb = chroma(hex).rgb();
+	return {
+		r: type === "255" ? rgb[0] : rgb[0] / 255,
+		g: type === "255" ? rgb[1] : rgb[1] / 255,
+		b: type === "255" ? rgb[2] : rgb[2] / 255
+	};
+};
+/**
+* Get the contrast ratio between two HEX colors
+*
+* @param color1 The first color to compare
+* @param color2 The second color to compare
+* @returns
+*/
+const getContrastFromHex = (color1, color2) => {
+	const lum1 = chroma(color1).luminance();
+	const lum2 = chroma(color2).luminance();
+	return (Math.max(lum1, lum2) + .05) / (Math.min(lum1, lum2) + .05);
+};
+/**
+* Get the contrast ratio between two colors at a specific lightness
+*
+* @param lightness The lightness value
+* @param mainColor The main color
+* @param backgroundColor The background color
+* @returns The contrast ratio
+*/
+const getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
+	const conv = new Hsluv();
+	conv.hex = mainColor;
+	conv.hexToHsluv();
+	conv.hsluv_l = lightness;
+	conv.hsluvToHex();
+	const lightMainColor = conv.hex;
+	const lum1 = chroma(lightMainColor).luminance();
+	const lum2 = chroma(backgroundColor).luminance();
+	return (Math.max(lum1, lum2) + .05) / (Math.min(lum1, lum2) + .05);
+};
+/**
+* Check if two colors have enough contrast to be used together
+*
+* @param color1 The first color
+* @param color2 The second color
+* @returns If the colors have enough contrast
+*/
+const areColorsContrasting = (color1, color2, type = "aa") => {
+	const contrast = getContrastFromHex(color1, color2);
+	if (contrast !== null) {
+		if (type === "aaa") return contrast >= 7;
+		if (type === "aa") return contrast >= 4.5;
+		return contrast >= 3;
+	}
+	return false;
+};
+/**
+* Check if aa string value is a HEX color
+*
+* @param hex The hex color
+*/
+const isHexColor = (hex) => {
+	return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
+};
+/**
+* Get the luminance value from a lightness value
+*
+* @param lightness The lightness value
+*/
+const getLuminanceFromLightness = (lightness) => {
+	const conv = new Hsluv();
+	conv.hsluv_l = lightness;
+	conv.hsluvToHex();
+	return chroma(conv.hex).luminance();
+};
+/**
+* Get the relative luminance from any valid css color
+*
+* @param color
+*/
+const getLuminanceFromColor = (color) => {
+	return chroma(color).luminance();
+};
+/**
+* Get the HSLuv lightness from a HEX color
+*
+* @param hex The hex color
+*/
+const getLightnessFromHex = (hex) => {
+	const conv = new Hsluv();
+	conv.hex = hex;
+	conv.hexToHsluv();
+	return conv.hsluv_l;
+};
+/**
+*
+* This function checks if white or black text can be used on 2 different colors at 4.5:1 contrast.
+*
+* @param baseDefaultColor Base default color
+* @param baseActiveColor Base active color
+*/
+const canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
+	const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
+	const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
+	const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
+	const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
+	if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) return true;
+	if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) return true;
+	return false;
+};
+/**
+* Converts a color to a HEX color
+*
+* @param color
+* @returns
+*/
+const convertToHex = (color) => {
+	if (!color) return "#000000";
+	if (/^#[0-9A-Fa-f]{6}$/.test(color)) return color;
+	return chroma(color).hex();
+};
+const rgbToHex = (rgb) => {
+	return `#${[
+		rgb.r,
+		rgb.g,
+		rgb.b
+	].map((x) => {
+		const hex = Math.round(x * 255).toString(16);
+		return hex.length === 1 ? "0" + hex : hex;
+	}).join("")}`;
+};
+/**
+* Convert a color to a different format
+*
+* @param cssColor Any valid css color
+* @param format Color space/format supported here https://colorjs.io/docs/spaces
+*/
+const convertColor = (cssColor, format) => {
+	const color = new Colorjs(cssColor);
+	switch (format) {
+		case "rgb":
+		case "rgba": return color.toString({
+			format: {
+				name: format,
+				coords: [
+					"<number>[0, 255]",
+					"<number>[0, 255]",
+					"<number>[0, 255]"
+				]
+			},
+			precision: 3
+		});
+		case "hex": return color.toString({
+			format,
+			precision: 3
+		});
+		case "hct": return color.to(format).toString({
+			format: {
+				name: format,
+				coords: [
+					"<number>",
+					"<number>",
+					"<number>"
+				]
+			},
+			precision: 3
+		});
+		default: return color.to(format).toString({ precision: 3 });
+	}
+};
+//#endregion
+export { HSLToHex, areColorsContrasting, canTextBeUsedOnColors, convertColor, convertToHex, getContrastFromHex, getContrastFromLightness, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex };