From 0b7c3a899439aabb170ab69471c24b926646735b Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Mon, 16 Nov 2020 17:06:17 -0500
Subject: [PATCH 01/11] update float precision of hue, saturation, lightness,
 and alpha

---
 src/utilities/color-transformers.ts           | 17 ++++++------
 .../tests/color-transformers.test.ts          | 27 ++++++++++++++-----
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/utilities/color-transformers.ts b/src/utilities/color-transformers.ts
index 474bf2467bd..ca43f1a2317 100644
--- a/src/utilities/color-transformers.ts
+++ b/src/utilities/color-transformers.ts
@@ -165,14 +165,15 @@ function rgbToHsbl(color: RGBAColor, type: 'b' | 'l' = 'b'): HSBLAColor {
       huePercentage = (red - green) / delta + 4;
   }
 
-  const hue = Math.round((huePercentage / 6) * 360);
+  const hue = (huePercentage / 6) * 360;
+  const clampedHue = clamp(hue, 0, 360);
 
   return {
-    hue: clamp(hue, 0, 360) || 0,
-    saturation: parseFloat(clamp(saturation, 0, 1).toFixed(2)),
+    hue: clampedHue ? parseFloat(clampedHue.toFixed(2)) : 0,
+    saturation: parseFloat(clamp(saturation, 0, 1).toFixed(4)),
     brightness: parseFloat(clamp(largestComponent, 0, 1).toFixed(4)),
-    lightness: parseFloat(lightness.toFixed(2)),
-    alpha: parseFloat(alpha.toFixed(2)),
+    lightness: parseFloat(lightness.toFixed(4)),
+    alpha: parseFloat(alpha.toFixed(4)),
   };
 }
 
@@ -281,9 +282,9 @@ function hslToObject(color: string): HSLAColor {
 
   const [hue, saturation, lightness, alpha] = colorMatch[1].split(',');
   const objColor = {
-    hue: parseInt(hue, 10),
-    saturation: parseInt(saturation, 10),
-    lightness: parseInt(lightness, 10),
+    hue: parseFloat(hue),
+    saturation: parseFloat(saturation),
+    lightness: parseFloat(lightness),
     alpha: parseFloat(alpha) || 1,
   };
   return objColor;
diff --git a/src/utilities/tests/color-transformers.test.ts b/src/utilities/tests/color-transformers.test.ts
index d03b5555f74..84b20cc4a49 100644
--- a/src/utilities/tests/color-transformers.test.ts
+++ b/src/utilities/tests/color-transformers.test.ts
@@ -131,6 +131,19 @@ describe('colorUtilities', () => {
       expect(saturation).toBe(0);
       expect(brightness).toBe(0.5294);
     });
+
+    // test for an issue where Hex colours were losing precision, due to hue rounding
+    // https://github.com/Shopify/shopify/issues/265949
+    it('returns 16.5517/0.521/0.6549 hsb value when passed rgb(167, 104, 80)', () => {
+      const {hue, saturation, brightness} = rgbToHsb({
+        red: 167,
+        green: 104,
+        blue: 80,
+      });
+      expect(hue).toBe(16.55);
+      expect(saturation).toBe(0.521);
+      expect(brightness).toBe(0.6549);
+    });
   });
 
   describe('colorToHsla', () => {
@@ -138,7 +151,7 @@ describe('colorUtilities', () => {
       expect(colorToHsla('#dddddd')).toStrictEqual({
         alpha: 1,
         hue: 0,
-        lightness: 87,
+        lightness: 86.67,
         saturation: 0,
       });
     });
@@ -146,9 +159,9 @@ describe('colorUtilities', () => {
     it('returns the hsla color for rgb', () => {
       expect(colorToHsla('rgb(132, 11, 2)')).toStrictEqual({
         alpha: 1,
-        hue: 4,
-        lightness: 26,
-        saturation: 97,
+        hue: 4.15,
+        lightness: 26.27,
+        saturation: 97.00999999999999,
       });
     });
 
@@ -164,9 +177,9 @@ describe('colorUtilities', () => {
     it('returns the hsla color for rgba', () => {
       expect(colorToHsla('rgb(132, 11, 2, 0.2)')).toStrictEqual({
         alpha: 1,
-        hue: 4,
-        lightness: 26,
-        saturation: 97,
+        hue: 4.15,
+        lightness: 26.27,
+        saturation: 97.00999999999999,
       });
     });
 

From 32e3c82c39ece26a5f04ac7a81d2c85dcbb7d1df Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Mon, 16 Nov 2020 17:24:00 -0500
Subject: [PATCH 02/11] add UNRELEASED.md entry

---
 UNRELEASED.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 44a2d18278c..df80d4f0696 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Removed `tabIndex=-1` from `Popover` when `preventAutoFocus` is true ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Fixed `Modal` header border color ([#3616](https://github.com/Shopify/polaris-react/pull/3616))
 - Fixed `Banner` `secondaryAction` only rendering if `action` is set ([#2949](https://github.com/Shopify/polaris-react/pull/2949))
+- Increased precision of hue, saturation, lightness, and alpha in HSBLA `color-transformers` (https://github.com/Shopify/polaris-react/pull/3640)
 
 ### Documentation
 

From 70dd23821f50a46778493580a0016ee1ea1c79f2 Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Mon, 16 Nov 2020 18:30:06 -0500
Subject: [PATCH 03/11] add roundNumberToDecimalPlaces for accurate rounding

---
 UNRELEASED.md                                     |  1 +
 src/utilities/roundNumberToDecimalPlaces.ts       |  5 +++++
 src/utilities/tests/roundNumberToDecimals.test.ts | 10 ++++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 src/utilities/roundNumberToDecimalPlaces.ts
 create mode 100644 src/utilities/tests/roundNumberToDecimals.test.ts

diff --git a/UNRELEASED.md b/UNRELEASED.md
index df80d4f0696..662285dfd96 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -12,6 +12,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - **`Button`:** New `role` prop for `<button />` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
 - Added `preventFocusOnClose` to `Popover` ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Added color fallback values to `focus-ring` mixin ([#3626](https://github.com/Shopify/polaris-react/pull/3626))
+- Added `roundNumberToDecimalPlaces` to accurately round numbers to a number of decimal places (https://github.com/Shopify/polaris-react/pull/3640)
 
 ### Bug fixes
 
diff --git a/src/utilities/roundNumberToDecimalPlaces.ts b/src/utilities/roundNumberToDecimalPlaces.ts
new file mode 100644
index 00000000000..3bc0b1eaebd
--- /dev/null
+++ b/src/utilities/roundNumberToDecimalPlaces.ts
@@ -0,0 +1,5 @@
+// precise rounding https://www.jacklmoore.com/notes/rounding-in-javascript/
+export function roundNumberToDecimalPlaces(value: number, decimals: number) {
+  // @ts-ignore - string concatenation represents exponential number notation
+  return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+}
diff --git a/src/utilities/tests/roundNumberToDecimals.test.ts b/src/utilities/tests/roundNumberToDecimals.test.ts
new file mode 100644
index 00000000000..a78e402eef9
--- /dev/null
+++ b/src/utilities/tests/roundNumberToDecimals.test.ts
@@ -0,0 +1,10 @@
+import {roundNumberToDecimalPlaces} from '../roundNumberToDecimalPlaces';
+
+describe('roundNumberToDecimalPlaces', () => {
+  it('rounds 1.004 to 1.00', () => {
+    expect(roundNumberToDecimalPlaces(1.004, 2)).toBe(1.0);
+  });
+  it('rounds 1.005 to 1.01', () => {
+    expect(roundNumberToDecimalPlaces(1.005, 2)).toBe(1.01);
+  });
+});

From 73aa73556b02c7e4b60eddb8185d9d0e6d1619ed Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Mon, 16 Nov 2020 18:48:10 -0500
Subject: [PATCH 04/11] improved hsbla rounding in color-transformers

---
 src/utilities/color-transformers.ts            | 17 ++++++++++-------
 src/utilities/tests/color-transformers.test.ts |  4 ++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/utilities/color-transformers.ts b/src/utilities/color-transformers.ts
index ca43f1a2317..5a80b2a089d 100644
--- a/src/utilities/color-transformers.ts
+++ b/src/utilities/color-transformers.ts
@@ -8,6 +8,7 @@ import type {
   HSLAColor,
   HSBLAColor,
 } from './color-types';
+import {roundNumberToDecimalPlaces} from './roundNumberToDecimalPlaces';
 
 export function rgbString(color: RGBColor | RGBAColor) {
   const {red, green, blue} = color;
@@ -169,11 +170,11 @@ function rgbToHsbl(color: RGBAColor, type: 'b' | 'l' = 'b'): HSBLAColor {
   const clampedHue = clamp(hue, 0, 360);
 
   return {
-    hue: clampedHue ? parseFloat(clampedHue.toFixed(2)) : 0,
-    saturation: parseFloat(clamp(saturation, 0, 1).toFixed(4)),
-    brightness: parseFloat(clamp(largestComponent, 0, 1).toFixed(4)),
-    lightness: parseFloat(lightness.toFixed(4)),
-    alpha: parseFloat(alpha.toFixed(4)),
+    hue: clampedHue ? roundNumberToDecimalPlaces(clampedHue, 2) : 0,
+    saturation: roundNumberToDecimalPlaces(clamp(saturation, 0, 1), 4),
+    brightness: roundNumberToDecimalPlaces(clamp(largestComponent, 0, 1), 4),
+    lightness: roundNumberToDecimalPlaces(lightness, 4),
+    alpha: roundNumberToDecimalPlaces(alpha, 4),
   };
 }
 
@@ -191,8 +192,10 @@ export function rgbToHsl(color: RGBAColor): HSLAColor {
     lightness: rawLightness,
     alpha = 1,
   } = rgbToHsbl(color, 'l');
-  const saturation = rawSaturation * 100;
-  const lightness = rawLightness * 100;
+
+  const saturation = roundNumberToDecimalPlaces(rawSaturation * 100, 2);
+  const lightness = roundNumberToDecimalPlaces(rawLightness * 100, 2);
+
   return {hue, saturation, lightness, alpha};
 }
 
diff --git a/src/utilities/tests/color-transformers.test.ts b/src/utilities/tests/color-transformers.test.ts
index 84b20cc4a49..bd2a16572ed 100644
--- a/src/utilities/tests/color-transformers.test.ts
+++ b/src/utilities/tests/color-transformers.test.ts
@@ -161,7 +161,7 @@ describe('colorUtilities', () => {
         alpha: 1,
         hue: 4.15,
         lightness: 26.27,
-        saturation: 97.00999999999999,
+        saturation: 97.01,
       });
     });
 
@@ -179,7 +179,7 @@ describe('colorUtilities', () => {
         alpha: 1,
         hue: 4.15,
         lightness: 26.27,
-        saturation: 97.00999999999999,
+        saturation: 97.01,
       });
     });
 

From 0a2a17560862768cdd7656f7f74f52790359829d Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Tue, 17 Nov 2020 08:57:59 -0500
Subject: [PATCH 05/11] push eslint ignore

---
 src/utilities/roundNumberToDecimalPlaces.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utilities/roundNumberToDecimalPlaces.ts b/src/utilities/roundNumberToDecimalPlaces.ts
index 3bc0b1eaebd..45552a21b55 100644
--- a/src/utilities/roundNumberToDecimalPlaces.ts
+++ b/src/utilities/roundNumberToDecimalPlaces.ts
@@ -1,5 +1,6 @@
 // precise rounding https://www.jacklmoore.com/notes/rounding-in-javascript/
 export function roundNumberToDecimalPlaces(value: number, decimals: number) {
   // @ts-ignore - string concatenation represents exponential number notation
+  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
   return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
 }

From dc99dcc9f76fec46bc85d689addf928f38261b54 Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Tue, 17 Nov 2020 09:30:14 -0500
Subject: [PATCH 06/11] make rounding function more readable/fix eslint + ts

---
 src/utilities/roundNumberToDecimalPlaces.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/utilities/roundNumberToDecimalPlaces.ts b/src/utilities/roundNumberToDecimalPlaces.ts
index 45552a21b55..693655b9965 100644
--- a/src/utilities/roundNumberToDecimalPlaces.ts
+++ b/src/utilities/roundNumberToDecimalPlaces.ts
@@ -1,6 +1,9 @@
 // precise rounding https://www.jacklmoore.com/notes/rounding-in-javascript/
 export function roundNumberToDecimalPlaces(value: number, decimals: number) {
-  // @ts-ignore - string concatenation represents exponential number notation
-  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-  return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+  const exponent: number = Number(`${value}e${decimals}`);
+  const roundedExponent = Math.round(exponent);
+  const numberWithDecimalPlaces: number = Number(
+    `${roundedExponent}e-${decimals}`,
+  );
+  return numberWithDecimalPlaces;
 }

From 87221e8f2493c54729ad6852d80a379163e60e01 Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Tue, 17 Nov 2020 09:46:58 -0500
Subject: [PATCH 07/11] remove trivially inferred type annotations

---
 src/utilities/roundNumberToDecimalPlaces.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/utilities/roundNumberToDecimalPlaces.ts b/src/utilities/roundNumberToDecimalPlaces.ts
index 693655b9965..b94e148223d 100644
--- a/src/utilities/roundNumberToDecimalPlaces.ts
+++ b/src/utilities/roundNumberToDecimalPlaces.ts
@@ -1,9 +1,7 @@
 // precise rounding https://www.jacklmoore.com/notes/rounding-in-javascript/
 export function roundNumberToDecimalPlaces(value: number, decimals: number) {
-  const exponent: number = Number(`${value}e${decimals}`);
+  const exponent = Number(`${value}e${decimals}`);
   const roundedExponent = Math.round(exponent);
-  const numberWithDecimalPlaces: number = Number(
-    `${roundedExponent}e-${decimals}`,
-  );
+  const numberWithDecimalPlaces = Number(`${roundedExponent}e-${decimals}`);
   return numberWithDecimalPlaces;
 }

From daccab18fdd2a3398c5ea9bea5f0980790ae5379 Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Tue, 17 Nov 2020 09:59:51 -0500
Subject: [PATCH 08/11] more rounding of values before being stringified

---
 src/utilities/color-transformers.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/utilities/color-transformers.ts b/src/utilities/color-transformers.ts
index 5a80b2a089d..2d0f378295d 100644
--- a/src/utilities/color-transformers.ts
+++ b/src/utilities/color-transformers.ts
@@ -246,7 +246,16 @@ export function hslToString(hslColor: HSLColor | HSLAColor | string) {
 
   const alpha = 'alpha' in hslColor ? hslColor.alpha : 1;
   const {hue, lightness, saturation} = hslColor;
-  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+  return `hsla(${roundNumberToDecimalPlaces(
+    hue,
+    2,
+  )}, ${roundNumberToDecimalPlaces(
+    saturation,
+    2,
+  )}%, ${roundNumberToDecimalPlaces(
+    lightness,
+    2,
+  )}%, ${roundNumberToDecimalPlaces(alpha, 2)})`;
 }
 
 function rgbToObject(color: string): RGBAColor {
@@ -285,10 +294,10 @@ function hslToObject(color: string): HSLAColor {
 
   const [hue, saturation, lightness, alpha] = colorMatch[1].split(',');
   const objColor = {
-    hue: parseFloat(hue),
-    saturation: parseFloat(saturation),
-    lightness: parseFloat(lightness),
-    alpha: parseFloat(alpha) || 1,
+    hue: roundNumberToDecimalPlaces(parseFloat(hue), 2),
+    saturation: roundNumberToDecimalPlaces(parseFloat(saturation), 2),
+    lightness: roundNumberToDecimalPlaces(parseFloat(lightness), 2),
+    alpha: roundNumberToDecimalPlaces(parseFloat(alpha), 2) || 1,
   };
   return objColor;
 }

From 89be2ae08d1909b7d930eb07689e2eafd6f3faf0 Mon Sep 17 00:00:00 2001
From: Mark Dimitry <mark.dimitry@shopify.com>
Date: Tue, 17 Nov 2020 10:32:59 -0500
Subject: [PATCH 09/11] update failing tests

---
 src/components/ThemeProvider/tests/ThemeProvider.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ThemeProvider/tests/ThemeProvider.test.tsx b/src/components/ThemeProvider/tests/ThemeProvider.test.tsx
index 86d3968565f..5b7780728fc 100644
--- a/src/components/ThemeProvider/tests/ThemeProvider.test.tsx
+++ b/src/components/ThemeProvider/tests/ThemeProvider.test.tsx
@@ -92,7 +92,7 @@ describe('<ThemeProvider />', () => {
     expect(themeProvider.find('div')).toHaveReactProps({
       style: expect.objectContaining({
         '--top-bar-background': '#108043',
-        '--top-bar-background-lighter': 'hsla(147, 63%, 43%, 1)',
+        '--top-bar-background-lighter': 'hsla(147.32, 62.78%, 43.24%, 1)',
         '--top-bar-color': 'rgb(255, 255, 255)',
         '--top-bar-border': 'rgb(196, 205, 213)',
       }),
@@ -127,7 +127,7 @@ describe('<ThemeProvider />', () => {
     expect(themeProvider.find('div')).toHaveReactProps({
       style: expect.objectContaining({
         '--top-bar-background': '#021123',
-        '--top-bar-background-lighter': 'hsla(213, 74%, 22%, 1)',
+        '--top-bar-background-lighter': 'hsla(212.73, 74.19%, 22.25%, 1)',
         '--top-bar-color': 'rgb(255, 255, 255)',
         '--top-bar-border': 'rgb(196, 205, 213)',
       }),

From 1a493119db3aeb95a3a388b4ccc1f18b703897f5 Mon Sep 17 00:00:00 2001
From: Mark D <mark.dimitry@shopify.com>
Date: Thu, 26 Nov 2020 15:30:54 -0500
Subject: [PATCH 10/11] Update UNRELEASED.md

Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com>
---
 UNRELEASED.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 662285dfd96..df80d4f0696 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -12,7 +12,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - **`Button`:** New `role` prop for `<button />` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
 - Added `preventFocusOnClose` to `Popover` ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Added color fallback values to `focus-ring` mixin ([#3626](https://github.com/Shopify/polaris-react/pull/3626))
-- Added `roundNumberToDecimalPlaces` to accurately round numbers to a number of decimal places (https://github.com/Shopify/polaris-react/pull/3640)
 
 ### Bug fixes
 

From ddd0952e743eaa9df4ed9de25aa1154019d03720 Mon Sep 17 00:00:00 2001
From: Mark D <mark.dimitry@shopify.com>
Date: Thu, 26 Nov 2020 15:33:05 -0500
Subject: [PATCH 11/11] Update comment in
 src/utilities/roundNumberToDecimalPlaces.ts

Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com>
---
 src/utilities/roundNumberToDecimalPlaces.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/utilities/roundNumberToDecimalPlaces.ts b/src/utilities/roundNumberToDecimalPlaces.ts
index b94e148223d..28af23589a3 100644
--- a/src/utilities/roundNumberToDecimalPlaces.ts
+++ b/src/utilities/roundNumberToDecimalPlaces.ts
@@ -1,4 +1,10 @@
-// precise rounding https://www.jacklmoore.com/notes/rounding-in-javascript/
+// Because everything is a float in JS, Number.toFixed sometimes rounds in the
+// "wrong" direction because of float imprecision. For instance:
+// `(1.005).toFixed(2)` is `1.00`, NOT `1.01` because 1.005 in floating point is
+// actually 1.004999995. By using exponentiation tricks here we can work around
+// this imprecision, so `roundNumberToDecimalPlaces(1.005)` returns the expected
+// value of `1.01`
+// See https://www.jacklmoore.com/notes/rounding-in-javascript/
 export function roundNumberToDecimalPlaces(value: number, decimals: number) {
   const exponent = Number(`${value}e${decimals}`);
   const roundedExponent = Math.round(exponent);