Add debug utils for logging colorful strings

Author: bvaughn

lib/utils/colors/getContrastColor.ts

@@ -0,0 +1,47 @@
+export function getContrastColor(hex: string) {
+  switch (hex.length) {
+    case 3: {
+      hex =
+        hex.charAt(0) +
+        hex.charAt(0) +
+        hex.charAt(1) +
+        hex.charAt(1) +
+        hex.charAt(2) +
+        hex.charAt(2);
+      break;
+    }
+    case 4: {
+      hex =
+        hex.charAt(1) +
+        hex.charAt(1) +
+        hex.charAt(2) +
+        hex.charAt(2) +
+        hex.charAt(3) +
+        hex.charAt(3);
+      break;
+    }
+    case 6: {
+      break;
+    }
+    case 7: {
+      hex = hex.substring(1);
+      break;
+    }
+    default: {
+      throw Error(`Invalid hex value: "${hex}"`);
+    }
+  }
+
+  const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!rgb) {
+    throw Error(`Invalid hex value: "${hex}"`);
+  }
+
+  const red = parseInt(rgb[1], 16);
+  const green = parseInt(rgb[2], 16);
+  const blue = parseInt(rgb[3], 16);
+
+  const brightness = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+
+  return brightness >= 128 ? "black" : "white";
+}

lib/utils/colors/stringToColor.ts

@@ -0,0 +1,13 @@
+export function stringToColor(string: string) {
+  let hash = 0;
+  string.split("").forEach((char) => {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += value.toString(16).padStart(2, "0");
+  }
+  return color;
+}

lib/utils/debug.ts

@@ -0,0 +1,13 @@
+import { getContrastColor } from "./colors/getContrastColor";
+import { stringToColor } from "./colors/stringToColor";
+
+export function debug(namespace: string, ...args: unknown[]) {
+  const backgroundColor = stringToColor(namespace);
+  const color = getContrastColor(backgroundColor);
+
+  console.log(
+    `%c ${namespace} `,
+    `background-color: ${backgroundColor}; color: ${color};`,
+    ...args
+  );
+}