added thememaker / chart themes

Author: mackenziebowes

pnpm-lock.yaml

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

tools/theme-maker/.gitignore

@@ -0,0 +1,15 @@
+# theme-maker
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.5. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

tools/theme-maker/README.md

@@ -0,0 +1 @@
+console.log("Hello via Bun!");

tools/theme-maker/bun.lock

@@ -0,0 +1,17 @@
+{
+  "name": "theme-maker",
+  "module": "index.ts",
+  "type": "module",
+  "private": true,
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@cantoo/color-blindness": "^1.0.5",
+    "@types/chroma-js": "^3.1.2",
+    "chroma-js": "^3.2.0"
+  }
+}

tools/theme-maker/index.ts

@@ -0,0 +1,40 @@
+import chroma, { type Color } from "chroma-js";
+import { createPalettes } from "../lib/testing";
+
+const paletteAudit = (colors: string[]) => {
+  const conflicts = [];
+  const THRESHOLD = 6;
+  const thirdOfList = Math.floor(colors.length / 3);
+  for (let i = 0; i < thirdOfList; i++) {
+    for (let j = colors.length - 1; j >= colors.length - thirdOfList; j--) {
+      const distance = chroma.deltaE(colors[i]!, colors[j]!);
+      if (distance < THRESHOLD) {
+        conflicts.push({
+          pair: [colors[i], colors[j]],
+          indices: [i, j],
+          distance: distance,
+        });
+        continue;
+      }
+    }
+  }
+  return conflicts;
+};
+
+export const divergingAudit = (palette: string[]) => {
+  const simulatedPalettes = createPalettes(palette);
+
+  const results = Object.entries(simulatedPalettes).map(
+    ([type, simPalette]) => {
+      return {
+        visionType: type,
+        conflicts: paletteAudit(simPalette),
+      };
+    },
+  );
+  results.push({
+    visionType: "trichromacy",
+    conflicts: paletteAudit(palette),
+  });
+  return results;
+};

tools/theme-maker/package.json

@@ -0,0 +1,19 @@
+export function line(content: string, depth: number): string {
+  return `\n${"\t".repeat(depth)}${content}`;
+}
+
+export class FileBuilder {
+  private lines: string[] = [];
+
+  addLine(content: string, depth: number = 0): void {
+    this.lines.push(`${"\t".repeat(depth)}${content}`);
+  }
+
+  addEmptyLine(): void {
+    this.lines.push("");
+  }
+
+  build(): string {
+    return this.lines.join("\n");
+  }
+}

tools/theme-maker/src/charts/diverging/testing.ts

@@ -0,0 +1,34 @@
+import chroma, { type Color } from "chroma-js";
+import {
+  protanopia,
+  protanomaly,
+  deuteranopia,
+  deuteranomaly,
+  tritanopia,
+  tritanomaly,
+} from "@cantoo/color-blindness";
+
+export const createPalettes = (palette: string[]) => {
+  const protanopiaPalette: string[] = [];
+  const protanomalyPalette: string[] = [];
+  const deuteranopiaPalette: string[] = [];
+  const deuteranomalyPalette: string[] = [];
+  const tritanopiaPalette: string[] = [];
+  const tritanomalyPalette: string[] = [];
+  palette.forEach((color) => {
+    protanopiaPalette.push(protanopia(color));
+    protanomalyPalette.push(protanomaly(color));
+    deuteranopiaPalette.push(deuteranopia(color));
+    deuteranomalyPalette.push(deuteranomaly(color));
+    tritanopiaPalette.push(tritanopia(color));
+    tritanomalyPalette.push(tritanomaly(color));
+  });
+  return {
+    protanopia: protanopiaPalette,
+    protanomaly: protanomalyPalette,
+    deuteranopia: deuteranopiaPalette,
+    deuteranomaly: deuteranomalyPalette,
+    tritanopia: tritanopiaPalette,
+    tritanomaly: tritanomalyPalette,
+  };
+};

tools/theme-maker/src/charts/lib/file-builder.ts

@@ -0,0 +1,39 @@
+import chroma from "chroma-js";
+import { createPalettes } from "../lib/testing";
+
+const paletteAudit = (colors: string[]) => {
+  const conflicts = [];
+  const THRESHOLD = 10; // Standard JND (Just Noticeable Difference) for accessibility is ~15-20
+  for (let i = 0; i < colors.length; i++) {
+    for (let j = i + 1; j < colors.length; j++) {
+      const distance = chroma.deltaE(colors[i]!, colors[j]!);
+      if (distance < THRESHOLD) {
+        conflicts.push({
+          pair: [colors[i], colors[j]],
+          indices: [i, j],
+          distance: distance,
+        });
+        continue;
+      }
+    }
+  }
+  return conflicts;
+};
+
+export const qualitativeAudit = (palette: string[]) => {
+  const simulatedPalettes = createPalettes(palette);
+
+  const results = Object.entries(simulatedPalettes).map(
+    ([type, simPalette]) => {
+      return {
+        visionType: type,
+        conflicts: paletteAudit(simPalette),
+      };
+    },
+  );
+  results.push({
+    visionType: "trichromacy",
+    conflicts: paletteAudit(palette),
+  });
+  return results;
+};