@trishchuk/coolors-mcp 1.0.0 → 1.1.0

package/src/session.ts

@@ -6,7 +6,7 @@ import {
   ListToolsRequestSchema,
   McpError,
 } from "@modelcontextprotocol/sdk/types.js";
-import { EventEmitter } from "events";
+import { EventEmitter } from "node:events";
 import { StrictEventEmitter } from "strict-event-emitter-types";
 import { toJsonSchema } from "xsschema";
 
@@ -99,9 +99,17 @@ export class CoolorsMCPSession extends (EventEmitter as {
         args = parsed.value;
       }
 
+      const noop = () => {};
+      const context = {
+        client: { version: this.#server.getClientVersion() },
+        log: { debug: noop, error: noop, info: noop, warn: noop },
+        reportProgress: async () => {},
+        session: undefined,
+        streamContent: async () => {},
+      };
       const result = await tool.execute(
         args as Parameters<typeof tool.execute>[0],
-        {} as CoolorsMCPSessionAuth,
+        context as Parameters<typeof tool.execute>[1],
       );
 
       if (typeof result === "string") {

package/src/theme/matcher.ts

@@ -256,7 +256,7 @@ function calculateHctDistance(color1: HCT, color2: HCT): number {
  * Calculate multi-factor match score
  */
 function calculateMatchScore(
-  inputHct: HCT,
+  _inputHct: HCT,
   candidate: ThemeVariable,
   distance: number,
   weights: { accessibility: number; perceptual: number; semantic: number },

package/src/theme/refactor.ts

@@ -165,7 +165,7 @@ export function refactorCss(
 
   const replacements: ColorReplacement[] = [];
   const warnings: RefactoringWarning[] = [];
-  let refactoredCss = css;
+  let refactoredCss: string;
   let totalColors = 0;
   let replacedColors = 0;
   let totalConfidence = 0;

package/src/theme/types.ts

@@ -142,11 +142,14 @@ export interface ThemeVariable {
  * Collection of theme variables organized by role
  */
 export interface ThemeVariables {
+  background?: ThemeVariable[];
   custom?: Record<string, ThemeVariable[]>;
   error?: ThemeVariable[];
   neutral?: ThemeVariable[];
+  outline?: ThemeVariable[];
   primary?: ThemeVariable[];
   secondary?: ThemeVariable[];
+  shadow?: ThemeVariable[];
   surface?: ThemeVariable[];
   tertiary?: ThemeVariable[];
 }

package/src/tools/__tests__/cohesion.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  analyzePaletteConsistencyTool,
+  generateSemanticPaletteTool,
+  generateStateColorsTool,
+  generateTonalScaleTool,
+} from "../cohesion.tools.js";
+
+describe("generateTonalScaleTool", () => {
+  it("generates 11 stops by default", async () => {
+    const result = (await generateTonalScaleTool.execute({
+      seed: "#6750a4",
+    })) as string;
+    expect(result).toContain("| 50 |");
+    expect(result).toContain("| 500 |");
+    expect(result).toContain("| 950 |");
+    expect(result.match(/^\| \d+ \|/gm)?.length ?? 0).toBeGreaterThanOrEqual(
+      11,
+    );
+  });
+
+  it("emits CSS custom properties with the given prefix", async () => {
+    const result = (await generateTonalScaleTool.execute({
+      name: "brand",
+      seed: "#6750a4",
+    })) as string;
+    expect(result).toContain("--brand-50:");
+    expect(result).toContain("--brand-950:");
+  });
+
+  it("rejects invalid colors", async () => {
+    const result = await generateTonalScaleTool.execute({ seed: "nope" });
+    expect(result).toMatch(/Invalid color format/);
+  });
+});
+
+describe("generateStateColorsTool", () => {
+  it("produces all expected interaction states", async () => {
+    const result = (await generateStateColorsTool.execute({
+      base: "#6750a4",
+    })) as string;
+    for (const state of [
+      "base",
+      "hover",
+      "active",
+      "pressed",
+      "focus",
+      "disabled",
+      "selected",
+    ]) {
+      expect(result).toContain(`| ${state} |`);
+    }
+  });
+});
+
+describe("analyzePaletteConsistencyTool", () => {
+  it("returns a cohesion score for a small palette", async () => {
+    const result = (await analyzePaletteConsistencyTool.execute({
+      colors: ["#6750a4", "#7f67be", "#a48dc8"],
+    })) as string;
+    expect(result).toContain("Overall cohesion");
+  });
+
+  it("flags outliers", async () => {
+    const result = (await analyzePaletteConsistencyTool.execute({
+      colors: ["#6750a4", "#7f67be", "#a48dc8", "#ff0000"],
+    })) as string;
+    expect(result).toMatch(/outlier/i);
+  });
+
+  it("requires at least 2 colors", async () => {
+    const result = await analyzePaletteConsistencyTool.execute({
+      colors: ["#6750a4"],
+    });
+    expect(result).toMatch(/at least 2/i);
+  });
+});
+
+describe("generateSemanticPaletteTool", () => {
+  it("returns all 7 semantic roles", async () => {
+    const result = (await generateSemanticPaletteTool.execute({
+      brand: "#6750a4",
+    })) as string;
+    for (const role of [
+      "primary",
+      "secondary",
+      "tertiary",
+      "success",
+      "warning",
+      "error",
+      "info",
+    ]) {
+      expect(result).toContain(`--color-${role}:`);
+    }
+  });
+});

package/src/tools/__tests__/color-blindness.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+
+import { simulateCvd } from "../../color/color-blindness.js";
+import {
+  checkPaletteAccessibilityTool,
+  simulateColorBlindnessTool,
+} from "../color-blindness.tool.js";
+
+describe("simulateCvd", () => {
+  it("achromatopsia collapses to grayscale", () => {
+    const r = simulateCvd({ b: 70, g: 80, r: 230 }, "achromatopsia");
+    expect(r.r).toBe(r.g);
+    expect(r.g).toBe(r.b);
+  });
+
+  it("protanopia shifts pure red toward yellow/olive", () => {
+    const r = simulateCvd({ b: 0, g: 0, r: 255 }, "protanopia");
+    // Protanopes lose long-wavelength sensitivity → red becomes dark/yellow-ish.
+    expect(r.r).toBeLessThan(255);
+    expect(r.g).toBeGreaterThan(0);
+  });
+});
+
+describe("simulateColorBlindnessTool", () => {
+  it("returns a row per color", async () => {
+    const result = (await simulateColorBlindnessTool.execute({
+      colors: ["#e63946", "#2a9d8f"],
+      types: ["protanopia"],
+    })) as string;
+    expect(result).toContain("#e63946");
+    expect(result).toContain("#2a9d8f");
+    expect(result).toContain("protanopia");
+  });
+});
+
+describe("checkPaletteAccessibilityTool", () => {
+  it("audits a 3-color palette across CVD types", async () => {
+    const result = (await checkPaletteAccessibilityTool.execute({
+      colors: ["#000000", "#888888", "#ffffff"],
+    })) as string;
+    expect(result).toContain("Palette Accessibility Audit");
+    expect(result).toContain("protanopia");
+    expect(result).toContain("Summary");
+  });
+});

package/src/tools/__tests__/color-conversion.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+
+import { colorConversionTool } from "../color-conversion.tool.js";
+
+describe("colorConversionTool", () => {
+  // Regression: previously multiplied by 255 again, producing rgb(26265, ...).
+  it("converts hex to rgb without re-scaling", async () => {
+    const result = await colorConversionTool.execute({
+      color: "#6750a4",
+      to: "rgb",
+    });
+    expect(result).toBe("rgb(103, 80, 164)");
+  });
+
+  it("converts hex to hex (round-trip)", async () => {
+    const result = await colorConversionTool.execute({
+      color: "#6750a4",
+      to: "hex",
+    });
+    expect(result).toBe("#6750a4");
+  });
+
+  it("converts hex to hsl", async () => {
+    const result = await colorConversionTool.execute({
+      color: "#6750a4",
+      to: "hsl",
+    });
+    expect(result).toMatch(/^hsl\(\d+, \d+%, \d+%\)$/);
+  });
+
+  it("rejects invalid colors", async () => {
+    const result = await colorConversionTool.execute({
+      color: "not-a-color",
+      to: "rgb",
+    });
+    expect(result).toMatch(/Invalid color format/);
+  });
+});

package/src/tools/__tests__/contrast-checker.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+
+import { apcaContrast } from "../../color/apca.js";
+import { contrastCheckerTool } from "../contrast-checker.tool.js";
+
+describe("apcaContrast", () => {
+  // Reference values from Myndex/SAPC-APCA test vectors
+  it("matches reference: #888 on #fff ≈ 63", () => {
+    const lc = apcaContrast(
+      { b: 0x88, g: 0x88, r: 0x88 },
+      { b: 255, g: 255, r: 255 },
+    );
+    expect(lc).toBeCloseTo(63.06, 1);
+  });
+
+  it("matches reference: #000 on #fff ≈ 106", () => {
+    const lc = apcaContrast({ b: 0, g: 0, r: 0 }, { b: 255, g: 255, r: 255 });
+    expect(lc).toBeCloseTo(106.04, 1);
+  });
+
+  it("matches reference: #fff on #000 ≈ -107", () => {
+    const lc = apcaContrast({ b: 255, g: 255, r: 255 }, { b: 0, g: 0, r: 0 });
+    expect(lc).toBeCloseTo(-107.28, 1);
+  });
+});
+
+describe("contrastCheckerTool", () => {
+  it("returns WCAG block by default", async () => {
+    const result = await contrastCheckerTool.execute({
+      background: "#ffffff",
+      foreground: "#000000",
+    });
+    expect(result).toContain("WCAG 2.x");
+    expect(result).toContain("21.00:1");
+  });
+
+  it("returns APCA when requested", async () => {
+    const result = await contrastCheckerTool.execute({
+      algorithm: "apca",
+      background: "#ffffff",
+      foreground: "#000000",
+    });
+    expect(result).toContain("APCA");
+    expect(result).toContain("Lc:");
+  });
+
+  it("returns both when algorithm=both", async () => {
+    const result = await contrastCheckerTool.execute({
+      algorithm: "both",
+      background: "#ffffff",
+      foreground: "#000000",
+    });
+    expect(result).toContain("WCAG 2.x");
+    expect(result).toContain("APCA");
+  });
+});

package/src/tools/__tests__/palette-export.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+
+import { exportPaletteTool } from "../palette-export.tool.js";
+
+describe("exportPaletteTool", () => {
+  it("exports CSS custom properties", async () => {
+    const result = (await exportPaletteTool.execute({
+      colors: ["#6750a4", "#ff6b6b"],
+      format: "css",
+      names: ["primary", "danger"],
+    })) as string;
+    expect(result).toContain("--primary: #6750a4;");
+    expect(result).toContain("--danger: #ff6b6b;");
+  });
+
+  it("exports SCSS variables", async () => {
+    const result = (await exportPaletteTool.execute({
+      colors: ["#6750a4"],
+      format: "scss",
+      names: ["primary"],
+    })) as string;
+    expect(result).toContain("$primary: #6750a4;");
+  });
+
+  it("exports Tailwind config snippet", async () => {
+    const result = (await exportPaletteTool.execute({
+      colors: ["#fef3c7", "#fde68a"],
+      format: "tailwind",
+      prefix: "amber",
+    })) as string;
+    expect(result).toContain("tailwind.config.js");
+    expect(result).toContain('"amber"');
+  });
+
+  it("exports W3C design tokens", async () => {
+    const result = (await exportPaletteTool.execute({
+      colors: ["#6750a4"],
+      format: "tokens",
+      names: ["primary"],
+    })) as string;
+    const parsed = JSON.parse(result);
+    expect(parsed.color.primary.$type).toBe("color");
+    expect(parsed.color.primary.$value).toBe("#6750a4");
+  });
+
+  it("rejects mismatched names length", async () => {
+    const result = await exportPaletteTool.execute({
+      colors: ["#000", "#fff"],
+      format: "css",
+      names: ["only-one"],
+    });
+    expect(result).toMatch(/length/);
+  });
+});

package/src/tools/adjust-color.tool.ts

@@ -0,0 +1,80 @@
+/**
+ * Color Adjust / Mix Tool
+ * Exposes the lighten/darken/saturate/desaturate/grayscale/invert/mix utilities
+ * via MCP.
+ */
+
+import { z } from "zod";
+
+import {
+  darken,
+  desaturate,
+  invertColor,
+  lighten,
+  mixColors,
+  parseColor,
+  rgbToHex,
+  saturate,
+  toGrayscale,
+} from "../color/index.js";
+
+const OPS = [
+  "lighten",
+  "darken",
+  "saturate",
+  "desaturate",
+  "grayscale",
+  "invert",
+  "mix",
+] as const;
+
+export const adjustColorTool = {
+  description:
+    "Adjust a color: lighten, darken, saturate, desaturate, grayscale, invert, or mix with a second color. Amount is 0-100 (percent) for lighten/darken/saturate/desaturate, 0-1 for mix weight.",
+  execute: async (args: {
+    amount?: number;
+    color: string;
+    operation: (typeof OPS)[number];
+    with?: string;
+  }) => {
+    const rgb = parseColor(args.color);
+    if (!rgb) return `Invalid color format: ${args.color}`;
+
+    switch (args.operation) {
+      case "darken":
+        return rgbToHex(darken(rgb, args.amount ?? 10));
+      case "desaturate":
+        return rgbToHex(desaturate(rgb, args.amount ?? 10));
+      case "grayscale":
+        return rgbToHex(toGrayscale(rgb));
+      case "invert":
+        return rgbToHex(invertColor(rgb));
+      case "lighten":
+        return rgbToHex(lighten(rgb, args.amount ?? 10));
+      case "mix": {
+        if (!args.with) return "Error: 'with' is required for mix operation";
+        const other = parseColor(args.with);
+        if (!other) return `Invalid color format: ${args.with}`;
+        const weight = args.amount ?? 0.5;
+        if (weight < 0 || weight > 1) {
+          return "Error: mix amount must be between 0 and 1";
+        }
+        return rgbToHex(mixColors(rgb, other, weight));
+      }
+      case "saturate":
+        return rgbToHex(saturate(rgb, args.amount ?? 10));
+    }
+  },
+  name: "adjust_color",
+  parameters: z.object({
+    amount: z
+      .number()
+      .optional()
+      .describe(
+        "Amount of change. For lighten/darken/saturate/desaturate: 0-100 (percent). For mix: 0-1 (weight of first color). Default 10 / 0.5.",
+      ),
+    color: z.string().describe("Color to adjust (hex, rgb, hsl)"),
+    operation: z.enum(OPS).describe("Adjustment operation"),
+    with: z.string().optional().describe("Second color (only for mix)"),
+  }),
+};