From 1e03eed6c09e94ec8f9ec9cb2ccf077764716b76 Mon Sep 17 00:00:00 2001
From: Roy-Orbison <Roy-Orbison@users.noreply.github.com>
Date: Wed, 5 Jan 2022 17:36:01 +1030
Subject: [PATCH] Make text of light tags legible

---
 src/tags/helpers/Tag.scss            |  4 ++++
 src/tags/helpers/Tag.tsx             |  2 +-
 src/utils/services/ColorGenerator.ts | 18 +++++++++++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/tags/helpers/Tag.scss b/src/tags/helpers/Tag.scss
index a3a5ecec..5e0cfe7d 100644
--- a/src/tags/helpers/Tag.scss
+++ b/src/tags/helpers/Tag.scss
@@ -1,5 +1,9 @@
 .tag {
   color: #fff;
+
+  &.light-generated-bg {
+    color: #000;
+  }
 }
 
 .tag:not(:last-child) {
diff --git a/src/tags/helpers/Tag.tsx b/src/tags/helpers/Tag.tsx
index 895caded..e0dbc4ad 100644
--- a/src/tags/helpers/Tag.tsx
+++ b/src/tags/helpers/Tag.tsx
@@ -13,7 +13,7 @@ interface TagProps {
 
 const Tag: FC<TagProps> = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => (
   <span
-    className={`badge tag ${className}`}
+    className={`badge tag ${className} ${colorGenerator.isColorLightForKey(text) ? 'light-generated-bg' : ''}`}
     style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable || !onClick ? 'auto' : 'pointer' }}
     onClick={onClick}
   >
diff --git a/src/utils/services/ColorGenerator.ts b/src/utils/services/ColorGenerator.ts
index 46e988df..bbcce8ec 100644
--- a/src/utils/services/ColorGenerator.ts
+++ b/src/utils/services/ColorGenerator.ts
@@ -2,16 +2,21 @@ import { rangeOf } from '../utils';
 import LocalStorage from './LocalStorage';
 
 const HEX_COLOR_LENGTH = 6;
-const { floor, random } = Math;
+const { floor, random, sqrt, round } = Math;
 const letters = '0123456789ABCDEF';
 const buildRandomColor = () => `#${rangeOf(HEX_COLOR_LENGTH, () => letters[floor(random() * letters.length)]).join('')}`;
 const normalizeKey = (key: string) => key.toLowerCase().trim();
+const hexColorToRgbArray = (colorHex: string): number[] => (colorHex.match(/../g) || []).map(hex => parseInt(hex, 16) || 0);
+// HSP by Darel Rex Finley https://alienryderflex.com/hsp.html
+const perceivedLightness = (r: number = 0, g: number = 0, b: number = 0) => round(sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2));
 
 export default class ColorGenerator {
   private readonly colors: Record<string, string>;
+  private readonly lights: Record<string, boolean>;
 
   public constructor(private readonly storage: LocalStorage) {
     this.colors = this.storage.get<Record<string, string>>('colors') ?? {};
+    this.lights = {};
   }
 
   public readonly getColorForKey = (key: string) => {
@@ -34,4 +39,15 @@ export default class ColorGenerator {
 
     return color;
   };
+
+  public readonly isColorLightForKey = (key: string) => {
+    const colorHex = this.getColorForKey(key).substring(1);
+
+    if (this.lights[colorHex] == undefined) {
+      const rgb = hexColorToRgbArray(colorHex);
+      this.lights[colorHex] = perceivedLightness(...rgb) >= 128;
+    }
+
+    return this.lights[colorHex];
+  };
 }