From 683b34f44f326f25696a6e097d296340fd7dad49 Mon Sep 17 00:00:00 2001
From: f3rnando0 <contasuch123@gmail.com>
Date: Wed, 4 Sep 2024 09:48:26 -0300
Subject: [PATCH 1/3] fix: rearranged color parsing and conversion functions to
 use chroma-js methods

---
 packages/eui/src/services/color/hex_to_hsv.ts | 21 ++++++---
 packages/eui/src/services/color/hex_to_rgb.ts | 28 +++++------
 packages/eui/src/services/color/hsv_to_hex.ts | 17 +++++--
 packages/eui/src/services/color/hsv_to_rgb.ts | 26 +++++------
 .../eui/src/services/color/is_valid_hex.ts    |  3 ++
 packages/eui/src/services/color/rgb_to_hex.ts | 35 ++++++++------
 packages/eui/src/services/color/rgb_to_hsv.ts | 46 +++++++------------
 7 files changed, 90 insertions(+), 86 deletions(-)

diff --git a/packages/eui/src/services/color/hex_to_hsv.ts b/packages/eui/src/services/color/hex_to_hsv.ts
index 2b6dcd09e04..986585167a3 100644
--- a/packages/eui/src/services/color/hex_to_hsv.ts
+++ b/packages/eui/src/services/color/hex_to_hsv.ts
@@ -6,11 +6,20 @@
  * Side Public License, v 1.
  */
 
-import { hexToRgb } from './hex_to_rgb';
-import { rgbToHsv } from './rgb_to_hsv';
-import { HEX, HSV } from './color_types';
+import type { HEX, HSV } from "./color_types";
+import { hex, valid } from "chroma-js";
 
-export function hexToHsv(hex: HEX): HSV {
-  const [r, g, b] = hexToRgb(hex);
-  return rgbToHsv({ r, g, b });
+export function hexToHsv(hexCode: HEX): HSV {
+	//Create a new chroma-js color from hexCode provided
+	const color = hex(hexCode);
+
+	//If color valid convert from HEX to HSV
+	if (valid(color)) {
+		const [h, s, v] = color.hsv();
+
+		return { h, s, v };
+	}
+
+	// fallback to prevent errors
+	return { h: Number.NaN, s: Number.NaN, v: Number.NaN };
 }
diff --git a/packages/eui/src/services/color/hex_to_rgb.ts b/packages/eui/src/services/color/hex_to_rgb.ts
index 036a745cf73..4344cbc26fe 100644
--- a/packages/eui/src/services/color/hex_to_rgb.ts
+++ b/packages/eui/src/services/color/hex_to_rgb.ts
@@ -9,23 +9,19 @@
 // Convert hexadecimal color into an array of RGB integer values
 // Modified from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 
-import { rgbDef } from './color_types';
+import type { rgbDef } from "./color_types";
+import { hex, valid } from "chroma-js";
 
-export function hexToRgb(hex: string): rgbDef {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(
-    shorthandRegex,
-    (m, r1, g1, b1) => r1 + r1 + g1 + g1 + b1 + b1
-  );
+export function hexToRgb(hexCode: string): rgbDef {
+	//Create a new chroma-js color from hexCode provided
+	const color = hex(hexCode);
 
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
+	//If color valid convert from HEX to RGB
+	if (valid(color)) {
+		const rgb = color.rgb();
+		return rgb;
+	}
 
-  if (result) {
-    const [, r, g, b] = result;
-    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
-  }
-
-  // fallback to prevent errors
-  return [0, 0, 0];
+	// fallback to prevent errors
+	return [0, 0, 0];
 }
diff --git a/packages/eui/src/services/color/hsv_to_hex.ts b/packages/eui/src/services/color/hsv_to_hex.ts
index 050c53d947d..ba7985e5dd1 100644
--- a/packages/eui/src/services/color/hsv_to_hex.ts
+++ b/packages/eui/src/services/color/hsv_to_hex.ts
@@ -6,11 +6,18 @@
  * Side Public License, v 1.
  */
 
-import { hsvToRgb } from './hsv_to_rgb';
-import { rgbToHex } from './rgb_to_hex';
-import { HEX, HSV } from './color_types';
+import type { HEX, HSV } from "./color_types";
+import { hsv, valid } from "chroma-js";
 
 export function hsvToHex({ h, s, v }: HSV): HEX {
-  const { r, g, b } = hsvToRgb({ h, s, v });
-  return rgbToHex(`rgb(${r}, ${g}, ${b})`);
+	//Create a new chroma-js color from HSV provided
+	const color = hsv(h, s, v);
+
+	//If color valid convert HSV to HEX
+	if (valid(color)) {
+		return color.hex();
+	}
+
+	// fallback to prevent errors
+	return "";
 }
diff --git a/packages/eui/src/services/color/hsv_to_rgb.ts b/packages/eui/src/services/color/hsv_to_rgb.ts
index 26d1e13df26..b0cd7097f53 100644
--- a/packages/eui/src/services/color/hsv_to_rgb.ts
+++ b/packages/eui/src/services/color/hsv_to_rgb.ts
@@ -6,23 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { HSV, RGB } from './color_types';
+import type { HSV, RGB } from "./color_types";
+import { hsv, valid } from "chroma-js";
 
 export function hsvToRgb({ h, s, v }: HSV): RGB {
-  h /= 60;
+	//Create a new chroma-js color from HSV provided
+	const color = hsv(h, s, v);
 
-  const fn = (n: number) => {
-    const k = (n + h) % 6;
-    return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
-  };
+	//If color valid convert HSV to RGB
+	if (valid(color)) {
+		const [r, g, b] = color.rgb();
+		return { r, g, b };
+	}
 
-  const r = fn(5);
-  const g = fn(3);
-  const b = fn(1);
-
-  return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255),
-  };
+	// fallback to prevent errors
+	return { r: 0, g: 0, b: 0 };
 }
diff --git a/packages/eui/src/services/color/is_valid_hex.ts b/packages/eui/src/services/color/is_valid_hex.ts
index c253cb72a0e..6a833bc7f13 100644
--- a/packages/eui/src/services/color/is_valid_hex.ts
+++ b/packages/eui/src/services/color/is_valid_hex.ts
@@ -6,6 +6,9 @@
  * Side Public License, v 1.
  */
 
+// Using chroma.js valid function wasn't appropriate as hex strings without # at the start are considered valids
+// A verification for # at the start could be a solution, but I let you guys decide this
+
 export function isValidHex(hex: string): boolean {
   return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex);
 }
diff --git a/packages/eui/src/services/color/rgb_to_hex.ts b/packages/eui/src/services/color/rgb_to_hex.ts
index 6629697943f..2e9c14539e1 100644
--- a/packages/eui/src/services/color/rgb_to_hex.ts
+++ b/packages/eui/src/services/color/rgb_to_hex.ts
@@ -6,21 +6,28 @@
  * Side Public License, v 1.
  */
 
-function asHex(value: string): string {
-  const hex = parseInt(value, 10).toString(16);
-  return hex.length === 1 ? `0${hex}` : hex;
-}
+import { rgb, valid } from "chroma-js";
+
+export function rgbToHex(rgbString: string): string {
+	const withoutWhitespace = rgbString.replace(/\s+/g, "");
+	const rgbMatch = withoutWhitespace.match(
+		/^rgba?\((\d+),(\d+),(\d+)(?:,(?:1(?:\.0*)?|0(?:\.\d+)?))?\)$/i,
+	);
+	if (!rgbMatch) {
+		return "";
+	}
+
+	//Automatically converts rgb constants to number as chroma don't take strings
+	const [, r, g, b] = rgbMatch.map(Number);
 
-export function rgbToHex(rgb: string): string {
-  const withoutWhitespace = rgb.replace(/\s+/g, '');
-  const rgbMatch = withoutWhitespace.match(
-    /^rgba?\((\d+),(\d+),(\d+)(?:,(?:1(?:\.0*)?|0(?:\.\d+)?))?\)$/i
-  );
-  if (!rgbMatch) {
-    return '';
-  }
+	//Create a new chroma-js color from RGB provided
+	const color = rgb(r, g, b);
 
-  const [, r, g, b] = rgbMatch;
+	//If color valid convert RGB to HEX
+	if (valid(color)) {
+		return color.hex();
+	}
 
-  return `#${asHex(r)}${asHex(g)}${asHex(b)}`;
+	// fallback to prevent errors
+	return "";
 }
diff --git a/packages/eui/src/services/color/rgb_to_hsv.ts b/packages/eui/src/services/color/rgb_to_hsv.ts
index 78e7d6ba8bc..32d0cd3427a 100644
--- a/packages/eui/src/services/color/rgb_to_hsv.ts
+++ b/packages/eui/src/services/color/rgb_to_hsv.ts
@@ -6,36 +6,22 @@
  * Side Public License, v 1.
  */
 
-import { HSV, RGB } from './color_types';
+import type { HSV, RGB } from "./color_types";
+import { rgb, valid } from "chroma-js";
 
 export function rgbToHsv({ r, g, b }: RGB): HSV {
-  r /= 255;
-  g /= 255;
-  b /= 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const delta = max - min;
-  let hue;
-  const value = max;
-  const saturation = max === 0 ? 0 : delta / max;
-  switch (max) {
-    case min:
-    default:
-      hue = 0;
-      break;
-    case r:
-      hue = (g - b) / delta + (g < b ? 6 : 0);
-      break;
-    case g:
-      hue = (b - r) / delta + 2;
-      break;
-    case b:
-      hue = (r - g) / delta + 4;
-      break;
-  }
-  return {
-    h: hue * 60,
-    s: saturation,
-    v: value,
-  };
+	//Create a new chroma-js color from RGB provided
+	const color = rgb(r, g, b);
+
+	//If color valid convert RGB to HSV
+	if (valid(color)) {
+		let [h, s, v] = color.hsv();
+
+		h = Number.isNaN(h) ? 0 : h;
+
+		return { h, s, v };
+	}
+
+	// fallback to prevent errors
+	return { h: Number.NaN, s: Number.NaN, v: Number.NaN };
 }

From 0c13db8092e2782f96a3febbefcac1dc9018a811 Mon Sep 17 00:00:00 2001
From: foolish8932 <contasuch123@gmail.com>
Date: Wed, 4 Sep 2024 15:36:27 -0300
Subject: [PATCH 2/3] chore: added changelog file for PR #8000

---
 packages/eui/changelogs/upcoming/8000.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/8000.md

diff --git a/packages/eui/changelogs/upcoming/8000.md b/packages/eui/changelogs/upcoming/8000.md
new file mode 100644
index 00000000000..399d3414ccf
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8000.md
@@ -0,0 +1,10 @@
+- Updated color parsing and conversion methods to use chroma-js
+
+- Methods changed
+  - hexToHsv
+  - hexToRgb
+  - hsvToHex
+  - hsvToRgb
+  - rgbToHex
+  - rgbToHsv
+

From 1f778f21107de58f627baaeaab69fd737e67e302 Mon Sep 17 00:00:00 2001
From: foolish8932 <contasuch123@gmail.com>
Date: Wed, 4 Sep 2024 15:49:34 -0300
Subject: [PATCH 3/3] fix: formatted to prettier rules

---
 packages/eui/src/services/color/hex_to_hsv.ts | 22 ++++++------
 packages/eui/src/services/color/hex_to_rgb.ts | 22 ++++++------
 packages/eui/src/services/color/hsv_to_hex.ts | 20 +++++------
 packages/eui/src/services/color/hsv_to_rgb.ts | 22 ++++++------
 packages/eui/src/services/color/rgb_to_hex.ts | 36 +++++++++----------
 packages/eui/src/services/color/rgb_to_hsv.ts | 24 ++++++-------
 6 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/packages/eui/src/services/color/hex_to_hsv.ts b/packages/eui/src/services/color/hex_to_hsv.ts
index 986585167a3..47500804416 100644
--- a/packages/eui/src/services/color/hex_to_hsv.ts
+++ b/packages/eui/src/services/color/hex_to_hsv.ts
@@ -6,20 +6,20 @@
  * Side Public License, v 1.
  */
 
-import type { HEX, HSV } from "./color_types";
-import { hex, valid } from "chroma-js";
+import type { HEX, HSV } from './color_types';
+import { hex, valid } from 'chroma-js';
 
 export function hexToHsv(hexCode: HEX): HSV {
-	//Create a new chroma-js color from hexCode provided
-	const color = hex(hexCode);
+  //Create a new chroma-js color from hexCode provided
+  const color = hex(hexCode);
 
-	//If color valid convert from HEX to HSV
-	if (valid(color)) {
-		const [h, s, v] = color.hsv();
+  //If color valid convert from HEX to HSV
+  if (valid(color)) {
+    const [h, s, v] = color.hsv();
 
-		return { h, s, v };
-	}
+    return { h, s, v };
+  }
 
-	// fallback to prevent errors
-	return { h: Number.NaN, s: Number.NaN, v: Number.NaN };
+  // fallback to prevent errors
+  return { h: Number.NaN, s: Number.NaN, v: Number.NaN };
 }
diff --git a/packages/eui/src/services/color/hex_to_rgb.ts b/packages/eui/src/services/color/hex_to_rgb.ts
index 4344cbc26fe..045710f5236 100644
--- a/packages/eui/src/services/color/hex_to_rgb.ts
+++ b/packages/eui/src/services/color/hex_to_rgb.ts
@@ -9,19 +9,19 @@
 // Convert hexadecimal color into an array of RGB integer values
 // Modified from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 
-import type { rgbDef } from "./color_types";
-import { hex, valid } from "chroma-js";
+import type { rgbDef } from './color_types';
+import { hex, valid } from 'chroma-js';
 
 export function hexToRgb(hexCode: string): rgbDef {
-	//Create a new chroma-js color from hexCode provided
-	const color = hex(hexCode);
+  //Create a new chroma-js color from hexCode provided
+  const color = hex(hexCode);
 
-	//If color valid convert from HEX to RGB
-	if (valid(color)) {
-		const rgb = color.rgb();
-		return rgb;
-	}
+  //If color valid convert from HEX to RGB
+  if (valid(color)) {
+    const rgb = color.rgb();
+    return rgb;
+  }
 
-	// fallback to prevent errors
-	return [0, 0, 0];
+  // fallback to prevent errors
+  return [0, 0, 0];
 }
diff --git a/packages/eui/src/services/color/hsv_to_hex.ts b/packages/eui/src/services/color/hsv_to_hex.ts
index ba7985e5dd1..e1fe2c63065 100644
--- a/packages/eui/src/services/color/hsv_to_hex.ts
+++ b/packages/eui/src/services/color/hsv_to_hex.ts
@@ -6,18 +6,18 @@
  * Side Public License, v 1.
  */
 
-import type { HEX, HSV } from "./color_types";
-import { hsv, valid } from "chroma-js";
+import type { HEX, HSV } from './color_types';
+import { hsv, valid } from 'chroma-js';
 
 export function hsvToHex({ h, s, v }: HSV): HEX {
-	//Create a new chroma-js color from HSV provided
-	const color = hsv(h, s, v);
+  //Create a new chroma-js color from HSV provided
+  const color = hsv(h, s, v);
 
-	//If color valid convert HSV to HEX
-	if (valid(color)) {
-		return color.hex();
-	}
+  //If color valid convert HSV to HEX
+  if (valid(color)) {
+    return color.hex();
+  }
 
-	// fallback to prevent errors
-	return "";
+  // fallback to prevent errors
+  return '';
 }
diff --git a/packages/eui/src/services/color/hsv_to_rgb.ts b/packages/eui/src/services/color/hsv_to_rgb.ts
index b0cd7097f53..377f5a0c810 100644
--- a/packages/eui/src/services/color/hsv_to_rgb.ts
+++ b/packages/eui/src/services/color/hsv_to_rgb.ts
@@ -6,19 +6,19 @@
  * Side Public License, v 1.
  */
 
-import type { HSV, RGB } from "./color_types";
-import { hsv, valid } from "chroma-js";
+import type { HSV, RGB } from './color_types';
+import { hsv, valid } from 'chroma-js';
 
 export function hsvToRgb({ h, s, v }: HSV): RGB {
-	//Create a new chroma-js color from HSV provided
-	const color = hsv(h, s, v);
+  //Create a new chroma-js color from HSV provided
+  const color = hsv(h, s, v);
 
-	//If color valid convert HSV to RGB
-	if (valid(color)) {
-		const [r, g, b] = color.rgb();
-		return { r, g, b };
-	}
+  //If color valid convert HSV to RGB
+  if (valid(color)) {
+    const [r, g, b] = color.rgb();
+    return { r, g, b };
+  }
 
-	// fallback to prevent errors
-	return { r: 0, g: 0, b: 0 };
+  // fallback to prevent errors
+  return { r: 0, g: 0, b: 0 };
 }
diff --git a/packages/eui/src/services/color/rgb_to_hex.ts b/packages/eui/src/services/color/rgb_to_hex.ts
index 2e9c14539e1..f18ec741f96 100644
--- a/packages/eui/src/services/color/rgb_to_hex.ts
+++ b/packages/eui/src/services/color/rgb_to_hex.ts
@@ -6,28 +6,28 @@
  * Side Public License, v 1.
  */
 
-import { rgb, valid } from "chroma-js";
+import { rgb, valid } from 'chroma-js';
 
 export function rgbToHex(rgbString: string): string {
-	const withoutWhitespace = rgbString.replace(/\s+/g, "");
-	const rgbMatch = withoutWhitespace.match(
-		/^rgba?\((\d+),(\d+),(\d+)(?:,(?:1(?:\.0*)?|0(?:\.\d+)?))?\)$/i,
-	);
-	if (!rgbMatch) {
-		return "";
-	}
+  const withoutWhitespace = rgbString.replace(/\s+/g, '');
+  const rgbMatch = withoutWhitespace.match(
+    /^rgba?\((\d+),(\d+),(\d+)(?:,(?:1(?:\.0*)?|0(?:\.\d+)?))?\)$/i
+  );
+  if (!rgbMatch) {
+    return '';
+  }
 
-	//Automatically converts rgb constants to number as chroma don't take strings
-	const [, r, g, b] = rgbMatch.map(Number);
+  //Automatically converts rgb constants to number as chroma don't take strings
+  const [, r, g, b] = rgbMatch.map(Number);
 
-	//Create a new chroma-js color from RGB provided
-	const color = rgb(r, g, b);
+  //Create a new chroma-js color from RGB provided
+  const color = rgb(r, g, b);
 
-	//If color valid convert RGB to HEX
-	if (valid(color)) {
-		return color.hex();
-	}
+  //If color valid convert RGB to HEX
+  if (valid(color)) {
+    return color.hex();
+  }
 
-	// fallback to prevent errors
-	return "";
+  // fallback to prevent errors
+  return '';
 }
diff --git a/packages/eui/src/services/color/rgb_to_hsv.ts b/packages/eui/src/services/color/rgb_to_hsv.ts
index 32d0cd3427a..25ebdad05cc 100644
--- a/packages/eui/src/services/color/rgb_to_hsv.ts
+++ b/packages/eui/src/services/color/rgb_to_hsv.ts
@@ -6,22 +6,22 @@
  * Side Public License, v 1.
  */
 
-import type { HSV, RGB } from "./color_types";
-import { rgb, valid } from "chroma-js";
+import type { HSV, RGB } from './color_types';
+import { rgb, valid } from 'chroma-js';
 
 export function rgbToHsv({ r, g, b }: RGB): HSV {
-	//Create a new chroma-js color from RGB provided
-	const color = rgb(r, g, b);
+  //Create a new chroma-js color from RGB provided
+  const color = rgb(r, g, b);
 
-	//If color valid convert RGB to HSV
-	if (valid(color)) {
-		let [h, s, v] = color.hsv();
+  //If color valid convert RGB to HSV
+  if (valid(color)) {
+    let [h, s, v] = color.hsv();
 
-		h = Number.isNaN(h) ? 0 : h;
+    h = Number.isNaN(h) ? 0 : h;
 
-		return { h, s, v };
-	}
+    return { h, s, v };
+  }
 
-	// fallback to prevent errors
-	return { h: Number.NaN, s: Number.NaN, v: Number.NaN };
+  // fallback to prevent errors
+  return { h: Number.NaN, s: Number.NaN, v: Number.NaN };
 }