Merge pull request #51 from danbraunai/token-background-fix

Fix white text on white background bug
TransformerLensOrg · Feb 8, 2023 · db9e65e · db9e65e
2 parents bb760a9 + 494d81d
commit db9e65e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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);
+  });
 });