Make text of light tags legible

src/tags/helpers/Tag.scss

@@ -1,5 +1,9 @@
 .tag {
   color: #fff;
+
+  &.light-generated-bg {
+    color: #000;
+  }
 }
 
 .tag:not(:last-child) {

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}
   >

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];
+  };
 }