From 494d81df5e20380c2925fa278410eaa121be01c1 Mon Sep 17 00:00:00 2001
From: Dan Braun <brauny_13@hotmail.com>
Date: Wed, 8 Feb 2023 15:04:48 +0000
Subject: [PATCH] Fix white text on white background bug

---
 react/src/utils/getTokenBackgroundColor.ts            | 6 ++++--
 react/src/utils/tests/getTokenBackgroundColor.test.ts | 6 ++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/react/src/utils/getTokenBackgroundColor.ts b/react/src/utils/getTokenBackgroundColor.ts
index 7bdc00f..8d0480b 100644
--- a/react/src/utils/getTokenBackgroundColor.ts
+++ b/react/src/utils/getTokenBackgroundColor.ts
@@ -16,8 +16,10 @@ export function getTokenBackgroundColor(
   negativeColor: AnyColor = "red",
   positiveColor: AnyColor = "blue"
 ): Colord {
-  // original_color.mix("white", x) interpolates between original_color and white, with x being the ratio of white. So x=0 is original_color, x=1 is white. Clamp at 0 to avoid negative values.
-  if (value > 0) {
+  // original_color.mix("white", x) interpolates between original_color and
+  // white, with x being the ratio of white. So x=0 is original_color, x=1 is
+  // white. Clamp at 0 to avoid negative values.
+  if (value >= 0) {
     return colord(positiveColor).mix(
       colord("white"),
       Math.min(Math.max(1 - value / max, 0), 1)
diff --git a/react/src/utils/tests/getTokenBackgroundColor.test.ts b/react/src/utils/tests/getTokenBackgroundColor.test.ts
index 83aa6e2..3d3e64c 100644
--- a/react/src/utils/tests/getTokenBackgroundColor.test.ts
+++ b/react/src/utils/tests/getTokenBackgroundColor.test.ts
@@ -22,4 +22,10 @@ describe("getBackgroundColor", () => {
     const hsl = res.toHsl();
     expect(hsl.l).toBeCloseTo(100);
   });
+
+  it("Check that 0 returns a brightness of 1", () => {
+    // If the brightness is <0.6, the text will be white and invisible
+    const res = getTokenBackgroundColor(0, 0, 1);
+    expect(res.brightness()).toBeCloseTo(1);
+  });
 });