@digdir/designsystemet 0.1.0-alpha.10 → 0.1.0-alpha.12

package/dist/src/colors/colorUtils.js

@@ -0,0 +1,210 @@
+// src/colors/colorUtils.ts
+import { Hsluv } from "hsluv";
+import chroma from "chroma-js";
+var hexToCssHsl = (hex, valuesOnly = false) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let cssString = "";
+  if (result) {
+    r = parseInt(result[1], 16);
+    g = parseInt(result[2], 16);
+    b = parseInt(result[3], 16);
+  }
+  r /= 255, g /= 255, b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h, s, l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+  }
+  h = Math.round(h ? h * 360 : 0);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+  cssString = h + "," + s + "%," + l + "%";
+  cssString = !valuesOnly ? "hsl(" + cssString + ")" : cssString;
+  return cssString;
+};
+var hexToHSL = (H) => {
+  let r = 0, g = 0, b = 0;
+  if (H.length == 4) {
+    r = parseInt("0x" + H[1] + H[1]);
+    g = parseInt("0x" + H[2] + H[2]);
+    b = parseInt("0x" + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = parseInt("0x" + H[1] + H[2]);
+    g = parseInt("0x" + H[3] + H[4]);
+    b = parseInt("0x" + H[5] + H[6]);
+  }
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  let h = 0, s = 0, l = 0;
+  const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
+  if (delta == 0) h = 0;
+  else if (cmax == r) h = (g - b) / delta % 6;
+  else if (cmax == g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return [h, s, l];
+};
+var hslArrToCss = (HSL) => {
+  return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
+};
+var HSLToHex = (h, s, l) => {
+  s /= 100;
+  l /= 100;
+  let r = 0, g = 0, b = 0;
+  const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
+  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 = parseInt(Math.round((r + m) * 255).toString(16), 16);
+  g = parseInt(Math.round((g + m) * 255).toString(16), 16);
+  b = parseInt(Math.round((b + m) * 255).toString(16), 16);
+  if (r.toString().length == 1) r = parseInt("0" + r.toString(), 10);
+  if (g.toString().length == 1) g = parseInt("0" + g.toString(), 10);
+  if (b.toString().length == 1) b = parseInt("0" + b.toString(), 10);
+  return "#" + r + g + b;
+};
+var hexToRgb = (hex) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+};
+var luminanceFromRgb = (r, g, b) => {
+  const a = [Number(r), Number(g), Number(b)].map(function(v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+var luminanceFromHex = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (rgb) {
+    const r = rgb.r.toString();
+    const g = rgb.g.toString();
+    const b = rgb.b.toString();
+    return luminanceFromRgb(r, g, b);
+  }
+  return 2;
+};
+var getRatioFromLum = (lum1, lum2) => {
+  if (lum1 !== null && lum2 !== null) {
+    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+  } else {
+    return -1;
+  }
+};
+var getHslLightessFromHex = (hex) => {
+  return chroma(hex).hsl()[2];
+};
+var getHslSaturationFromHex = (hex) => {
+  return chroma(hex).hsl()[1];
+};
+var getLightnessFromHex = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return Number(conv.hsluv_l.toFixed(0));
+};
+var getContrastFromHex = (color1, color2) => {
+  const lum1 = luminanceFromHex(color1);
+  const lum2 = luminanceFromHex(color2);
+  if (lum1 !== null && lum2 !== null) {
+    return getRatioFromLum(lum1, lum2);
+  }
+  return -1;
+};
+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 = luminanceFromHex(lightMainColor);
+  const lum2 = luminanceFromHex(backgroundColor);
+  const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);
+  return ratio;
+};
+var areColorsContrasting = (color1, color2, type = "text") => {
+  const contrast = getContrastFromHex(color1, color2);
+  if (contrast !== null) {
+    if (type === "text") {
+      return contrast >= 4.5;
+    } else {
+      return contrast >= 3;
+    }
+  }
+  return false;
+};
+var isHexColor = (hex) => {
+  return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
+};
+export {
+  HSLToHex,
+  areColorsContrasting,
+  getContrastFromHex,
+  getContrastFromLightness,
+  getHslLightessFromHex,
+  getHslSaturationFromHex,
+  getLightnessFromHex,
+  getRatioFromLum,
+  hexToCssHsl,
+  hexToHSL,
+  hexToRgb,
+  hslArrToCss,
+  isHexColor,
+  luminanceFromHex,
+  luminanceFromRgb
+};
+//# sourceMappingURL=colorUtils.js.map

package/dist/src/colors/colorUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/colors/colorUtils.ts"],"sourcesContent":["import type { CssColor } from '@adobe/leonardo-contrast-colors';\nimport { Hsluv } from 'hsluv';\nimport chroma from 'chroma-js';\n\n/**\n * Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'\n *\n * @param hex A hex color string\n * @param valuesOnly If true, only the values are returned\n * @returns A CSS HSL string\n */\nexport const hexToCssHsl = (hex: string, valuesOnly = false) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  let cssString = '';\n  if (result) {\n    r = parseInt(result[1], 16);\n    g = parseInt(result[2], 16);\n    b = parseInt(result[3], 16);\n  }\n  (r /= 255), (g /= 255), (b /= 255);\n  const max = Math.max(r, g, b),\n    min = Math.min(r, g, b);\n  let h,\n    s,\n    l = (max + min) / 2;\n  if (max == min) {\n    h = s = 0; // achromatic\n  } else {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n  }\n\n  h = Math.round(h ? h * 360 : 0);\n  s = Math.round(s * 100);\n  l = Math.round(l * 100);\n\n  cssString = h + ',' + s + '%,' + l + '%';\n  cssString = !valuesOnly ? 'hsl(' + cssString + ')' : cssString;\n\n  return cssString;\n};\n\n/**\n * Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'\n *\n * @param H A Hex color string\n * @returns HSL values in an array\n */\nexport const hexToHSL = (H: string) => {\n  // Convert hex to RGB first\n  let r = 0,\n    g = 0,\n    b = 0;\n  if (H.length == 4) {\n    r = parseInt('0x' + H[1] + H[1]);\n    g = parseInt('0x' + H[2] + H[2]);\n    b = parseInt('0x' + H[3] + H[3]);\n  } else if (H.length == 7) {\n    r = parseInt('0x' + H[1] + H[2]);\n    g = parseInt('0x' + H[3] + H[4]);\n    b = parseInt('0x' + H[5] + H[6]);\n  }\n  // Then to HSL\n  r /= 255;\n  g /= 255;\n  b /= 255;\n  let h = 0,\n    s = 0,\n    l = 0;\n  const cmin = Math.min(r, g, b),\n    cmax = Math.max(r, g, b),\n    delta = cmax - cmin;\n\n  if (delta == 0) h = 0;\n  else if (cmax == r) h = ((g - b) / delta) % 6;\n  else if (cmax == g) h = (b - r) / delta + 2;\n  else h = (r - g) / delta + 4;\n\n  h = Math.round(h * 60);\n\n  if (h < 0) h += 360;\n\n  l = (cmax + cmin) / 2;\n  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n  s = +(s * 100).toFixed(1);\n  l = +(l * 100).toFixed(1);\n\n  return [h, s, l];\n};\n\n/**\n * Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'\n *\n * @param HSL A HSL number array '[h,s,l]'\n * @returns A hex color string\n */\nexport const hslArrToCss = (HSL: number[]) => {\n  return 'hsl(' + HSL[0] + ',' + HSL[1] + '%,' + HSL[2] + '%)';\n};\n\n/**\n * Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'\n *\n * @param h The HSL hue\n * @param s The HSL saturation\n * @param l The HSL lightness\n * @returns HEX color string\n */\nexport const HSLToHex = (h: number, s: number, l: number) => {\n  s /= 100;\n  l /= 100;\n\n  let r = 0,\n    g = 0,\n    b = 0;\n  const c = (1 - Math.abs(2 * l - 1)) * s,\n    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),\n    m = l - c / 2;\n\n  if (0 <= h && h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (60 <= h && h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (120 <= h && h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (180 <= h && h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (240 <= h && h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else if (300 <= h && h < 360) {\n    r = c;\n    g = 0;\n    b = x;\n  }\n  // Having obtained RGB, convert channels to hex\n  r = parseInt(Math.round((r + m) * 255).toString(16), 16);\n  g = parseInt(Math.round((g + m) * 255).toString(16), 16);\n  b = parseInt(Math.round((b + m) * 255).toString(16), 16);\n\n  // Prepend 0s, if necessary\n  if (r.toString().length == 1) r = parseInt('0' + r.toString(), 10);\n  if (g.toString().length == 1) g = parseInt('0' + g.toString(), 10);\n  if (b.toString().length == 1) b = parseInt('0' + b.toString(), 10);\n\n  return '#' + r + g + b;\n};\n\n/**\n * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'\n *\n * @param hex A hex color string\n * @returns RGB values in an array\n */\nexport const hexToRgb = (hex: string) => {\n  const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n  hex = hex.replace(shorthandRegex, function (m, r: string, g: string, b: string) {\n    return r + r + g + g + b + b;\n  });\n\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result\n    ? {\n        r: parseInt(result[1], 16),\n        g: parseInt(result[2], 16),\n        b: parseInt(result[3], 16),\n      }\n    : null;\n};\n\n/**\n * Get the luminance of an RGB color\n *\n * @param r RGB red value\n * @param G RGB green value\n * @param b RGB blue value\n * @returns\n */\nexport const luminanceFromRgb = (r: string, g: string, b: string) => {\n  const a = [Number(r), Number(g), Number(b)].map(function (v) {\n    v /= 255;\n    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n  });\n  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;\n};\n\n/**\n * Get the luminance of a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const luminanceFromHex = (hex: CssColor) => {\n  const rgb = hexToRgb(hex);\n  if (rgb) {\n    const r = rgb.r.toString();\n    const g = rgb.g.toString();\n    const b = rgb.b.toString();\n    return luminanceFromRgb(r, g, b);\n  }\n  return 2;\n};\n\n/**\n * Get the contrast ratio between two luminance values\n *\n * @param lum1 The first luminance value\n * @param lum2 The second luminance value\n * @returns\n */\nexport const getRatioFromLum = (lum1: number, lum2: number) => {\n  if (lum1 !== null && lum2 !== null) {\n    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);\n  } else {\n    return -1;\n  }\n};\n\n/**\n * Get the HSL lightness from a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const getHslLightessFromHex = (hex: CssColor) => {\n  return chroma(hex).hsl()[2];\n};\n\nexport const getHslSaturationFromHex = (hex: CssColor) => {\n  return chroma(hex).hsl()[1];\n};\n\n/**\n * Get the HSLuv lightness from a HEX color\n *\n * @param hex A hex color string\n * @returns\n */\nexport const getLightnessFromHex = (hex: string) => {\n  const conv = new Hsluv();\n  conv.hex = hex;\n  conv.hexToHsluv();\n  return Number(conv.hsluv_l.toFixed(0));\n};\n\n/**\n * Get the contrast ratio between two HEX colors\n *\n * @param {CssColor} color1 The first color\n * @param {CssColor} color2 The second color\n * @returns\n */\nexport const getContrastFromHex = (color1: CssColor, color2: CssColor) => {\n  const lum1 = luminanceFromHex(color1);\n  const lum2 = luminanceFromHex(color2);\n  if (lum1 !== null && lum2 !== null) {\n    return getRatioFromLum(lum1, lum2);\n  }\n  return -1;\n};\n\n/**\n * Get the contrast ratio between two colors at a specific lightness\n *\n * @param lightness The lightness value\n * @param mainColor The main color\n * @param backgroundColor The background color\n * @returns The contrast ratio\n */\nexport const getContrastFromLightness = (lightness: number, mainColor: CssColor, backgroundColor: CssColor) => {\n  const conv = new Hsluv();\n  conv.hex = mainColor;\n  conv.hexToHsluv();\n  conv.hsluv_l = lightness;\n  conv.hsluvToHex();\n  const lightMainColor = conv.hex;\n  const lum1 = luminanceFromHex(lightMainColor as CssColor);\n  const lum2 = luminanceFromHex(backgroundColor);\n  const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);\n\n  return ratio;\n};\n\n/**\n * Maps the numbers from [start1 - end1] to the range [start2 - end2], maintaining the proportionality between the numbers in the ranges using lineaer interpolation.\n */\n// const mapRange = (value: number, start1: number, end1: number, start2: number, end2: number) => {\n//   return start2 + ((value - start1) * (end2 - start2)) / (end1 - start1);\n// };\n\n/**\n * Check if two colors have enough contrast to be used together\n *\n * @param {CssColor} color1 The first color\n * @param {CssColor} color2 The second color\n * @returns {boolean} If the colors have enough contrast\n */\nexport const areColorsContrasting = (color1: CssColor, color2: CssColor, type: 'text' | 'decorative' = 'text') => {\n  const contrast = getContrastFromHex(color1, color2);\n  if (contrast !== null) {\n    if (type === 'text') {\n      return contrast >= 4.5;\n    } else {\n      return contrast >= 3;\n    }\n  }\n  return false;\n};\n\n/**\n * Check if aa string value is a HEX color\n *\n * @param {string} hex The string to check\n * @returns {boolean} If the string is a HEX color\n */\nexport const isHexColor = (hex: string) => {\n  return typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex));\n};\n"],"mappings":"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","names":[]}

package/dist/src/colors/index.js

@@ -0,0 +1,451 @@
+// src/colors/colorUtils.ts
+import { Hsluv } from "hsluv";
+import chroma from "chroma-js";
+var hexToCssHsl = (hex, valuesOnly = false) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let cssString = "";
+  if (result) {
+    r = parseInt(result[1], 16);
+    g = parseInt(result[2], 16);
+    b = parseInt(result[3], 16);
+  }
+  r /= 255, g /= 255, b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h, s, l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+  }
+  h = Math.round(h ? h * 360 : 0);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+  cssString = h + "," + s + "%," + l + "%";
+  cssString = !valuesOnly ? "hsl(" + cssString + ")" : cssString;
+  return cssString;
+};
+var hexToHSL = (H) => {
+  let r = 0, g = 0, b = 0;
+  if (H.length == 4) {
+    r = parseInt("0x" + H[1] + H[1]);
+    g = parseInt("0x" + H[2] + H[2]);
+    b = parseInt("0x" + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = parseInt("0x" + H[1] + H[2]);
+    g = parseInt("0x" + H[3] + H[4]);
+    b = parseInt("0x" + H[5] + H[6]);
+  }
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  let h = 0, s = 0, l = 0;
+  const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
+  if (delta == 0) h = 0;
+  else if (cmax == r) h = (g - b) / delta % 6;
+  else if (cmax == g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return [h, s, l];
+};
+var hslArrToCss = (HSL) => {
+  return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
+};
+var HSLToHex = (h, s, l) => {
+  s /= 100;
+  l /= 100;
+  let r = 0, g = 0, b = 0;
+  const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
+  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 = parseInt(Math.round((r + m) * 255).toString(16), 16);
+  g = parseInt(Math.round((g + m) * 255).toString(16), 16);
+  b = parseInt(Math.round((b + m) * 255).toString(16), 16);
+  if (r.toString().length == 1) r = parseInt("0" + r.toString(), 10);
+  if (g.toString().length == 1) g = parseInt("0" + g.toString(), 10);
+  if (b.toString().length == 1) b = parseInt("0" + b.toString(), 10);
+  return "#" + r + g + b;
+};
+var hexToRgb = (hex) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+};
+var luminanceFromRgb = (r, g, b) => {
+  const a = [Number(r), Number(g), Number(b)].map(function(v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+var luminanceFromHex = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (rgb) {
+    const r = rgb.r.toString();
+    const g = rgb.g.toString();
+    const b = rgb.b.toString();
+    return luminanceFromRgb(r, g, b);
+  }
+  return 2;
+};
+var getRatioFromLum = (lum1, lum2) => {
+  if (lum1 !== null && lum2 !== null) {
+    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+  } else {
+    return -1;
+  }
+};
+var getHslLightessFromHex = (hex) => {
+  return chroma(hex).hsl()[2];
+};
+var getHslSaturationFromHex = (hex) => {
+  return chroma(hex).hsl()[1];
+};
+var getLightnessFromHex = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return Number(conv.hsluv_l.toFixed(0));
+};
+var getContrastFromHex = (color1, color2) => {
+  const lum1 = luminanceFromHex(color1);
+  const lum2 = luminanceFromHex(color2);
+  if (lum1 !== null && lum2 !== null) {
+    return getRatioFromLum(lum1, lum2);
+  }
+  return -1;
+};
+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 = luminanceFromHex(lightMainColor);
+  const lum2 = luminanceFromHex(backgroundColor);
+  const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);
+  return ratio;
+};
+var areColorsContrasting = (color1, color2, type = "text") => {
+  const contrast = getContrastFromHex(color1, color2);
+  if (contrast !== null) {
+    if (type === "text") {
+      return contrast >= 4.5;
+    } else {
+      return contrast >= 3;
+    }
+  }
+  return false;
+};
+var isHexColor = (hex) => {
+  return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
+};
+
+// src/colors/themeUtils.ts
+import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
+import { Hsluv as Hsluv2 } from "hsluv";
+var blueBaseColor = "#0A71C0";
+var greenBaseColor = "#078D19";
+var orangeBaseColor = "#CA5C21";
+var purpleBaseColor = "#663299";
+var redBaseColor = "#C01B1B";
+var yellowBaseColor = "#EABF28";
+var generateThemeColor = (color, mode, contrastMode = "aa") => {
+  const leoBackgroundColor = new BackgroundColor({
+    name: "backgroundColor",
+    colorKeys: ["#ffffff"],
+    ratios: [1]
+  });
+  let colorLightness = getLightnessFromHex(color);
+  if (mode === "dark" || mode === "contrast") {
+    color = getBaseColor(color);
+    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
+  }
+  const multiplier = colorLightness <= 30 ? -8 : 8;
+  const baseDefaultContrast = getContrastFromLightness(colorLightness, color, leoBackgroundColor.colorKeys[0]);
+  const baseHoverContrast = getContrastFromLightness(
+    colorLightness - multiplier,
+    color,
+    leoBackgroundColor.colorKeys[0]
+  );
+  const baseActiveContrast = getContrastFromLightness(
+    colorLightness - multiplier * 2,
+    color,
+    leoBackgroundColor.colorKeys[0]
+  );
+  const textSubLightLightness = contrastMode === "aa" ? 42 : 30;
+  const textDefLightLightness = contrastMode === "aa" ? 20 : 17;
+  const textSubDarkLightness = contrastMode === "aa" ? 65 : 78;
+  const textDefDarkLightness = contrastMode === "aa" ? 89 : 93;
+  let lightnessScale = [];
+  if (mode === "light") {
+    lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
+  } else if (mode === "dark") {
+    lightnessScale = [10, 14, 20, 26, 32, 35, 47, 77, textSubDarkLightness, textDefDarkLightness];
+  } else {
+    lightnessScale = [1, 6, 14, 20, 26, 58, 70, 82, 80, 95];
+  }
+  const getColorContrasts = (color2, lightnessScale2, backgroundColor) => {
+    return lightnessScale2.map((lightness) => getContrastFromLightness(lightness, color2, backgroundColor));
+  };
+  return new Color({
+    name: "color",
+    colorKeys: [color],
+    ratios: [
+      ...getColorContrasts(color, lightnessScale.slice(0, 8), leoBackgroundColor.colorKeys[0]),
+      baseDefaultContrast,
+      baseHoverContrast,
+      baseActiveContrast,
+      ...getColorContrasts(color, lightnessScale.slice(8), leoBackgroundColor.colorKeys[0])
+    ]
+  });
+};
+var generateScaleForColor = (color, mode, contrastMode = "aa") => {
+  const themeColor = generateThemeColor(color, mode, contrastMode);
+  const leoBackgroundColor = new BackgroundColor({
+    name: "backgroundColor",
+    colorKeys: ["#ffffff"],
+    ratios: [1]
+  });
+  const theme = new Theme({
+    colors: [themeColor],
+    backgroundColor: leoBackgroundColor,
+    lightness: 100
+  });
+  const outputArray = [];
+  for (let i = 0; i < theme.contrastColorValues.length; i++) {
+    outputArray.push({
+      hex: theme.contrastColorValues[i],
+      number: i + 1,
+      name: getColorNameFromNumber(i + 1)
+    });
+  }
+  outputArray.push({
+    hex: calculateContrastOneColor(theme.contrastColorValues[8]),
+    number: 14,
+    name: getColorNameFromNumber(14)
+  });
+  outputArray.push({
+    hex: calculateContrastTwoColor(theme.contrastColorValues[8]),
+    number: 15,
+    name: getColorNameFromNumber(15)
+  });
+  if (mode === "light") {
+    outputArray[8].hex = color;
+  }
+  return outputArray;
+};
+var generateThemeForColor = (color, contrastMode = "aa") => {
+  const lightScale = generateScaleForColor(color, "light", contrastMode);
+  const darkScale = generateScaleForColor(color, "dark", contrastMode);
+  const contrastScale = generateScaleForColor(color, "contrast", contrastMode);
+  return {
+    light: lightScale,
+    dark: darkScale,
+    contrast: contrastScale
+  };
+};
+var generateGlobalColors = ({ contrastMode = "aa" }) => {
+  const blueTheme = generateThemeForColor(blueBaseColor, contrastMode);
+  const greenTheme = generateThemeForColor(greenBaseColor, contrastMode);
+  const orangeTheme = generateThemeForColor(orangeBaseColor, contrastMode);
+  const purpleTheme = generateThemeForColor(purpleBaseColor, contrastMode);
+  const redTheme = generateThemeForColor(redBaseColor, contrastMode);
+  const yellowTheme = generateThemeForColor(yellowBaseColor, contrastMode);
+  return {
+    blue: blueTheme,
+    green: greenTheme,
+    orange: orangeTheme,
+    purple: purpleTheme,
+    red: redTheme,
+    yellow: yellowTheme
+  };
+};
+var generateColorTheme = ({ colors, contrastMode = "aa" }) => {
+  const accentTheme = generateThemeForColor(colors.accent, contrastMode);
+  const neutralTheme = generateThemeForColor(colors.neutral, contrastMode);
+  const brand1Theme = generateThemeForColor(colors.brand1, contrastMode);
+  const brand2Theme = generateThemeForColor(colors.brand2, contrastMode);
+  const brand3Theme = generateThemeForColor(colors.brand3, contrastMode);
+  return {
+    accent: accentTheme,
+    neutral: neutralTheme,
+    brand1: brand1Theme,
+    brand2: brand2Theme,
+    brand3: brand3Theme
+  };
+};
+var calculateContrastOneColor = (baseColor) => {
+  const contrastWhite = getContrastFromHex(baseColor, "#ffffff");
+  const contrastBlack = getContrastFromHex(baseColor, "#000000");
+  const lightness = contrastWhite >= contrastBlack ? 100 : 0;
+  return lightness === 0 ? "#000000" : "#ffffff";
+};
+var calculateContrastTwoColor = (color) => {
+  const contrastWhite = getContrastFromHex(color, "#ffffff");
+  const contrastBlack = getContrastFromHex(color, "#000000");
+  const lightness = getLightnessFromHex(color);
+  const doubleALightnessModifier = lightness <= 40 ? 60 : lightness >= 60 ? 60 : 50;
+  let targetLightness = 0;
+  const contrastDirection = contrastWhite >= contrastBlack ? "lighten" : "darken";
+  targetLightness = contrastDirection === "lighten" ? lightness + doubleALightnessModifier : lightness - doubleALightnessModifier;
+  return createColorWithLightness(color, targetLightness);
+};
+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;
+  } else if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
+    return true;
+  }
+  return false;
+};
+var createColorWithLightness = (color, lightness) => {
+  const leoBackgroundColor = new BackgroundColor({
+    name: "backgroundColor",
+    colorKeys: ["#ffffff"],
+    ratios: [1]
+  });
+  const colors = new Color({
+    name: "color",
+    colorKeys: [color],
+    ratios: [getContrastFromLightness(lightness, color, "#ffffff")]
+  });
+  const theme = new Theme({
+    colors: [colors],
+    backgroundColor: leoBackgroundColor,
+    lightness: 100
+  });
+  return theme.contrastColorValues[0];
+};
+var getColorNumberFromName = (name) => {
+  const colorMap = {
+    "Background Subtle": 1,
+    "Background Default": 2,
+    "Surface Default": 3,
+    "Surface Hover": 4,
+    "Surface Active": 5,
+    "Border Subtle": 6,
+    "Border Default": 7,
+    "Border Strong": 8,
+    "Base Default": 9,
+    "Base Hover": 10,
+    "Base Active": 11,
+    "Text Subtle": 12,
+    "Text Default": 13
+  };
+  return colorMap[name];
+};
+var getColorNameFromNumber = (number) => {
+  const colorMap = {
+    1: "Background Subtle",
+    2: "Background Default",
+    3: "Surface Default",
+    4: "Surface Hover",
+    5: "Surface Active",
+    6: "Border Subtle",
+    7: "Border Default",
+    8: "Border Strong",
+    9: "Base Default",
+    10: "Base Hover",
+    11: "Base Active",
+    12: "Text Subtle",
+    13: "Text Default",
+    14: "Contrast Default",
+    15: "Contrast Subtle"
+  };
+  return colorMap[number];
+};
+var getBaseColor = (color) => {
+  const conv = new Hsluv2();
+  conv.hex = color;
+  conv.hexToHsluv();
+  conv.hsluvToHex();
+  return conv.hex;
+};
+var getCssVariable = (colorType, colorNumber) => {
+  return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
+};
+export {
+  HSLToHex,
+  areColorsContrasting,
+  calculateContrastOneColor,
+  calculateContrastTwoColor,
+  canTextBeUsedOnColors,
+  createColorWithLightness,
+  generateColorTheme,
+  generateGlobalColors,
+  generateScaleForColor,
+  generateThemeForColor,
+  getBaseColor,
+  getColorNameFromNumber,
+  getColorNumberFromName,
+  getContrastFromHex,
+  getContrastFromLightness,
+  getCssVariable,
+  getHslLightessFromHex,
+  getHslSaturationFromHex,
+  getLightnessFromHex,
+  getRatioFromLum,
+  hexToCssHsl,
+  hexToHSL,
+  hexToRgb,
+  hslArrToCss,
+  isHexColor,
+  luminanceFromHex,
+  luminanceFromRgb
+};
+//# sourceMappingURL=index.js.map