@pierre/theme 0.0.18

package/src/build.ts

@@ -0,0 +1,23 @@
+// src/build.ts
+import { writeFileSync, mkdirSync } from "node:fs";
+import { light as rolesLight, dark as rolesDark } from "./palette";
+import { makeTheme } from "./theme";
+import { convertRolesToP3 } from "./color-p3";
+
+mkdirSync("themes", { recursive: true });
+
+// Convert palettes to Display P3 color space
+const rolesLightP3 = convertRolesToP3(rolesLight);
+const rolesDarkP3 = convertRolesToP3(rolesDark);
+
+const out = [
+  { file: "themes/pierre-light.json", theme: makeTheme("Pierre Light", "light", rolesLight) },
+  { file: "themes/pierre-dark.json",  theme: makeTheme("Pierre Dark",  "dark",  rolesDark)  },
+  { file: "themes/pierre-light-vibrant.json", theme: makeTheme("Pierre Light Vibrant", "light", rolesLightP3) },
+  { file: "themes/pierre-dark-vibrant.json",  theme: makeTheme("Pierre Dark Vibrant",  "dark",  rolesDarkP3)  }
+];
+
+for (const {file, theme} of out) {
+  writeFileSync(file, JSON.stringify(theme, null, 2), "utf8");
+  console.log("Wrote", file);
+}

package/src/color-p3.ts

@@ -0,0 +1,229 @@
+// src/color-p3.ts
+// Convert sRGB hex colors to CSS Display P3 color space format
+
+/**
+ * Convert hex color to RGB values (0-1 range)
+ */
+function hexToRgb01(hex: string): [number, number, number] {
+  const cleaned = hex.replace('#', '');
+  const expanded = cleaned.length === 3
+    ? cleaned.split('').map(x => x + x).join('')
+    : cleaned;
+
+  const num = parseInt(expanded, 16);
+  const r = ((num >> 16) & 255) / 255;
+  const g = ((num >> 8) & 255) / 255;
+  const b = (num & 255) / 255;
+
+  return [r, g, b];
+}
+
+/**
+ * Apply sRGB gamma correction (linearize)
+ */
+function srgbToLinear(c: number): number {
+  if (c <= 0.04045) {
+    return c / 12.92;
+  }
+  return Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+/**
+ * Remove sRGB gamma correction (to display)
+ */
+function linearToSrgb(c: number): number {
+  if (c <= 0.0031308) {
+    return c * 12.92;
+  }
+  return 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+
+/**
+ * Apply Display P3 gamma correction (same as sRGB)
+ */
+const linearToP3 = linearToSrgb;
+
+/**
+ * Convert linear sRGB to linear Display P3
+ * Using the standard conversion matrix from sRGB to P3
+ */
+function linearSrgbToLinearP3(r: number, g: number, b: number): [number, number, number] {
+  // Conversion matrix from linear sRGB to linear Display P3
+  // This matrix converts from sRGB primaries to P3 primaries via XYZ
+  const rOut = 0.82246197 * r + 0.17753803 * g + 0.00000000 * b;
+  const gOut = 0.03319420 * r + 0.96680580 * g + 0.00000000 * b;
+  const bOut = 0.01708263 * r + 0.07239744 * g + 0.91051993 * b;
+
+  return [rOut, gOut, bOut];
+}
+
+/**
+ * Format a number for CSS color function (round to reasonable precision)
+ */
+function formatColorValue(value: number): string {
+  // Clamp to 0-1 range
+  const clamped = Math.max(0, Math.min(1, value));
+  // Round to 6 decimal places for precision without being excessive
+  return clamped.toFixed(6);
+}
+
+/**
+ * Convert RGB to HSL color space
+ */
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (delta !== 0) {
+    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+
+    switch (max) {
+      case r:
+        h = ((g - b) / delta + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / delta + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / delta + 4) / 6;
+        break;
+    }
+  }
+
+  return [h, s, l];
+}
+
+/**
+ * Convert HSL to RGB color space
+ */
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1/6) return p + (q - p) * 6 * t;
+      if (t < 1/2) return q;
+      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+
+    r = hue2rgb(p, q, h + 1/3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1/3);
+  }
+
+  return [r, g, b];
+}
+
+/**
+ * Enhance colors to take advantage of P3's wider gamut
+ * Increases saturation and vibrancy for colors that can benefit from P3
+ */
+function enhanceForP3Gamut(r: number, g: number, b: number): [number, number, number] {
+  // Convert to HSL for easier saturation manipulation
+  const [h, s, l] = rgbToHsl(r, g, b);
+
+  // Only enhance colors that have some saturation and aren't too light or dark
+  // (grays and near-blacks/whites don't benefit from P3 enhancement)
+  if (s < 0.1 || l < 0.1 || l > 0.9) {
+    return [r, g, b];
+  }
+
+  // Calculate enhancement factor based on original saturation
+  // More saturated colors get more enhancement (they can handle it)
+  const saturationBoost = 0.15 + (s * 0.15); // 15-30% boost depending on saturation
+
+  // Boost saturation, but not beyond 1.0
+  let newS = s + (s * saturationBoost);
+  newS = Math.min(1.0, newS);
+
+  // For highly saturated colors, also slightly increase luminance to make them "pop"
+  // but only if they're not already too light
+  let newL = l;
+  if (s > 0.5 && l < 0.7) {
+    newL = l + (l * 0.05); // Slight 5% luminance boost for vibrant colors
+    newL = Math.min(0.9, newL);
+  }
+
+  // Convert back to RGB
+  return hslToRgb(h, newS, newL);
+}
+
+/**
+ * Convert sRGB hex color to CSS Display P3 color format with enhancement
+ * Returns: "color(display-p3 r g b)" or "color(display-p3 r g b / alpha)"
+ */
+export function srgbHexToP3Color(srgbHex: string, enhance: boolean = true): string {
+  // Handle alpha channel if present
+  const hasAlpha = srgbHex.length === 9 || (srgbHex.startsWith('#') && srgbHex.length === 9);
+  let alpha = '';
+  let colorHex = srgbHex;
+
+  if (hasAlpha) {
+    const alphaHex = srgbHex.slice(-2);
+    const alphaValue = parseInt(alphaHex, 16) / 255;
+    alpha = ` / ${formatColorValue(alphaValue)}`;
+    colorHex = srgbHex.slice(0, -2);
+  }
+
+  // Convert to linear sRGB
+  const [sR, sG, sB] = hexToRgb01(colorHex);
+  const linearSR = srgbToLinear(sR);
+  const linearSG = srgbToLinear(sG);
+  const linearSB = srgbToLinear(sB);
+
+  // Convert to linear P3
+  const [linearPR, linearPG, linearPB] = linearSrgbToLinearP3(linearSR, linearSG, linearSB);
+
+  // Apply P3 gamma to get display values
+  let pR = linearToP3(linearPR);
+  let pG = linearToP3(linearPG);
+  let pB = linearToP3(linearPB);
+
+  // Enhance colors to take advantage of P3's wider gamut
+  if (enhance) {
+    [pR, pG, pB] = enhanceForP3Gamut(pR, pG, pB);
+  }
+
+  // Format as CSS color(display-p3 ...) function
+  return `color(display-p3 ${formatColorValue(pR)} ${formatColorValue(pG)} ${formatColorValue(pB)}${alpha})`;
+}
+
+/**
+ * Convert all colors in a Roles object to Display P3
+ */
+export function convertRolesToP3<T>(obj: T): T {
+  if (typeof obj === 'string') {
+    // If it's a hex color string, convert it
+    if ((obj as string).match(/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/)) {
+      return srgbHexToP3Color(obj as string) as any;
+    }
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map(item => convertRolesToP3(item)) as any;
+  }
+
+  if (obj !== null && typeof obj === 'object') {
+    const result: any = {};
+    for (const [key, value] of Object.entries(obj as any)) {
+      result[key] = convertRolesToP3(value);
+    }
+    return result;
+  }
+
+  return obj;
+}

package/src/demo-p3.ts

@@ -0,0 +1,44 @@
+// src/demo-p3.ts
+// Demonstration of Display P3 color conversion with enhancement
+
+import { srgbHexToP3Color } from "./color-p3";
+
+console.log("Display P3 Color Conversion Demo");
+console.log("=".repeat(70));
+console.log("");
+
+const testColors = [
+  { name: "Blue", srgb: "#008cff" },
+  { name: "Green", srgb: "#0dbe4e" },
+  { name: "Red", srgb: "#ff2e3f" },
+  { name: "Purple", srgb: "#c635e4" },
+  { name: "Pink", srgb: "#fc2b73" },
+  { name: "Orange", srgb: "#fe8c2c" },
+  { name: "Cyan", srgb: "#08c0ef" },
+  { name: "Teal", srgb: "#00c5d2" }
+];
+
+console.log("Color conversions from sRGB to Enhanced Display P3:");
+console.log("(Enhanced to take advantage of P3's wider gamut)");
+console.log("");
+
+for (const { name, srgb } of testColors) {
+  const p3Basic = srgbHexToP3Color(srgb, false);
+  const p3Enhanced = srgbHexToP3Color(srgb, true);
+  console.log(`${name.padEnd(10)} ${srgb}`);
+  console.log(`${''.padEnd(10)} Basic:    ${p3Basic}`);
+  console.log(`${''.padEnd(10)} Enhanced: ${p3Enhanced}`);
+  console.log("");
+}
+
+console.log("=".repeat(70));
+console.log("");
+console.log("Enhancement Details:");
+console.log("- Saturation boost: 15-30% depending on original saturation");
+console.log("- Luminance boost: 5% for highly saturated colors");
+console.log("- Grays and near-blacks/whites are left unchanged");
+console.log("");
+console.log("These enhanced colors take full advantage of Display P3's");
+console.log("wider color gamut (~25% more colors than sRGB).");
+console.log("");
+console.log("Browser support: Safari 10+, Chrome 111+, Firefox 113+, Edge 111+");

package/src/package-vsix.ts

@@ -0,0 +1,22 @@
+import { readFileSync, writeFileSync } from "fs";
+import { execSync } from "child_process";
+import { join } from "path";
+
+const pkgPath = join(__dirname, "..", "package.json");
+const original = readFileSync(pkgPath, "utf-8");
+const pkg = JSON.parse(original);
+
+// Store original name and swap to unscoped version for VSIX
+const originalName = pkg.name;
+pkg.name = "pierre-theme";
+
+console.log(`Temporarily renaming package: ${originalName} → ${pkg.name}\n`);
+
+try {
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+  execSync("vsce package", { stdio: "inherit", cwd: join(__dirname, "..") });
+} finally {
+  // Always restore original package.json
+  writeFileSync(pkgPath, original);
+  console.log(`\nRestored package name: ${originalName}`);
+}

package/src/palette.ts

@@ -0,0 +1,379 @@
+// src/palette.ts
+
+const gray = {
+  "020":"#fbfbfb",
+  "040":"#f9f9f9",
+  "060":"#f8f8f8",
+  "080":"#f2f2f3",
+  "100":"#eeeeef",
+  "200":"#dbdbdd",
+  "300":"#c6c6c8",
+  "400":"#adadb1",
+  "500":"#8E8E95",
+  "600":"#84848A",
+  "700":"#79797F",
+  "800":"#6C6C71",
+  "900":"#4A4A4E",
+  "920":"#424245",
+  "940":"#39393c",
+  "960":"#2e2e30",
+  "980":"#1F1F21",
+  "1000":"#141415",
+  "1020":"#0B0B0C",
+  "1040":"#070707"
+};
+
+const red = {
+  "050":"#ffedea",
+  "100":"#ffdbd6",
+  "200":"#ffb7ae",
+  "300":"#ff9187",
+  "400":"#ff6762",
+  "500":"#ff2e3f",
+  "600":"#d52c36",
+  "700":"#ad292e",
+  "800":"#862425",
+  "900":"#611e1d",
+  "950":"#3e1715"
+};
+
+const orange = {
+  "050":"#fff3ea",
+  "100":"#ffe8d5",
+  "200":"#ffd1ab",
+  "300":"#ffba82",
+  "400":"#ffa359",
+  "500":"#fe8c2c",
+  "600":"#d47628",
+  "700":"#ac6023",
+  "800":"#854c1e",
+  "900":"#603819",
+  "950":"#3d2513"
+};
+
+const yellow = {
+  "050": "#fff9ea",
+  "100": "#fff4d5",
+  "200": "#ffe9ab",
+  "300": "#ffde80",
+  "400": "#ffd452",
+  "500": "#ffca00",
+  "600": "#d5a910",
+  "700": "#ac8816",
+  "800": "#856a17",
+  "900": "#604c16",
+  "950": "#3d3112"
+};
+
+const green = {
+  "050": "#edf9ed",
+  "100": "#daf3db",
+  "200": "#b4e7b7",
+  "300": "#8cda94",
+  "400": "#5ecc71",
+  "500": "#0dbe4e",
+  "600": "#199f43",
+  "700": "#1d8138",
+  "800": "#1d642e",
+  "900": "#1b4923",
+  "950": "#162f19"
+};
+
+const mint = {
+  "050": "#edfaf7",
+  "100": "#dbf5ef",
+  "200": "#b7ebdf",
+  "300": "#8fe0d0",
+  "400": "#61d5c0",
+  "500": "#00cab1",
+  "600": "#16a994",
+  "700": "#1d8978",
+  "800": "#1e6a5e",
+  "900": "#1c4d44",
+  "950": "#16312c"
+};
+
+const teal = {
+  "050": "#eef9fa",
+  "100": "#ddf4f6",
+  "200": "#b9e8ed",
+  "300": "#92dde4",
+  "400": "#64d1db",
+  "500": "#00c5d2",
+  "600": "#17a5af",
+  "700": "#1e858e",
+  "800": "#1f686e",
+  "900": "#1d4b4f",
+  "950": "#173033"
+};
+
+const cyan = {
+  "050": "#eff9fe",
+  "100": "#def2fc",
+  "200": "#bce6f9",
+  "300": "#96d9f6",
+  "400": "#68cdf2",
+  "500": "#08c0ef",
+  "600": "#1ca1c7",
+  "700": "#2182a1",
+  "800": "#22657c",
+  "900": "#1e4959",
+  "950": "#182f38"
+};
+
+const blue = {
+  "050": "#eff5ff",
+  "100": "#dfebff",
+  "200": "#bdd7ff",
+  "300": "#97c4ff",
+  "400": "#69b1ff",
+  "500": "#009fff",
+  "600": "#1a85d4",
+  "700": "#216cab",
+  "800": "#215584",
+  "900": "#1f3e5e",
+  "950": "#19283c"
+};
+
+const indigo = {
+  "050": "#f5ecff",
+  "100": "#ead9ff",
+  "200": "#d3b4fe",
+  "300": "#ba8ffd",
+  "400": "#9d6afb",
+  "500": "#7b43f8",
+  "600": "#693acf",
+  "700": "#5731a7",
+  "800": "#462981",
+  "900": "#35205c",
+  "950": "#24173a"
+};
+
+const purple = {
+  "050": "#fbedfd",
+  "100": "#f7dbfb",
+  "200": "#eeb6f6",
+  "300": "#e290f0",
+  "400": "#d568ea",
+  "500": "#c635e4",
+  "600": "#a631be",
+  "700": "#872b9a",
+  "800": "#692677",
+  "900": "#4d1f56",
+  "950": "#321736"
+};
+
+const pink = {
+  "050": "#ffedf0",
+  "100": "#ffdbe1",
+  "200": "#ffb7c4",
+  "300": "#ff91a8",
+  "400": "#ff678d",
+  "500": "#fc2b73",
+  "600": "#d32a61",
+  "700": "#aa2850",
+  "800": "#84243f",
+  "900": "#5f1e2f",
+  "950": "#3d1720"
+};
+
+const brown = {
+  "050": "#f8f2ee",
+  "100": "#f1e4dd",
+  "200": "#e3cabb",
+  "300": "#d3b19b",
+  "400": "#c3987b",
+  "500": "#b27f5c",
+  "600": "#956b4f",
+  "700": "#7a5841",
+  "800": "#5f4534",
+  "900": "#453327",
+  "950": "#2d221b"
+};
+
+export type Roles = {
+  bg: {
+    editor: string;    // main editor background (brightest in light, darkest in dark)
+    window: string;    // sidebar, activity bar, status bar, title bar, inactive tabs
+    inset: string;     // inputs, dropdowns
+    elevated: string;  // panels, hover backgrounds
+  };
+  fg: { base: string; fg1: string; fg2: string; fg3: string; fg4: string };
+  border: {
+    window: string;           // borders for sidebar, activity bar, status bar, title bar
+    editor: string;           // general editor borders
+    indentGuide: string;      // indent guide lines
+    indentGuideActive: string; // active indent guide line
+    inset: string;            // borders for inputs, dropdowns
+    elevated: string;         // borders for panels
+  };
+  accent: { primary: string; link: string; subtle: string; contrastOnAccent: string };
+  states: { merge: string, success: string; danger: string; warn: string; info: string };
+  syntax: {
+    comment: string; string: string; number: string; keyword: string;
+    regexp: string; func: string; type: string; variable: string;
+    // Extended token types
+    operator: string; punctuation: string; constant: string;
+    parameter: string; namespace: string; decorator: string;
+    escape: string; invalid: string; tag: string; attribute: string;
+  };
+  ansi: {
+    black: string; red: string; green: string; yellow: string;
+    blue: string; magenta: string; cyan: string; white: string;
+    brightBlack: string; brightRed: string; brightGreen: string; brightYellow: string;
+    brightBlue: string; brightMagenta: string; brightCyan: string; brightWhite: string;
+  };
+};
+
+export const light: Roles = {
+  bg: {
+    editor: "#ffffff",
+    window: gray["060"],
+    inset: gray["080"],
+    elevated: gray["040"]
+  },
+  fg: {
+    base: gray["1040"],
+    fg1: gray["900"],
+    fg2: gray["800"],
+    fg3: gray["600"],
+    fg4: gray["500"]
+  },
+  border: {
+    window: gray["100"],
+    editor: gray["200"],
+    indentGuide: gray["100"],
+    indentGuideActive: gray["200"],
+    inset: gray["200"],
+    elevated: gray["100"]
+  },
+  accent: {
+    primary: blue["500"],
+    link: blue["500"],
+    subtle: blue["100"],
+    contrastOnAccent: "#ffffff"
+  },
+  states: {
+    merge: indigo["500"],
+    success: mint["500"],
+    danger: red["500"],
+    warn: yellow["500"],
+    info: cyan["500"]
+  },
+  syntax: {
+    comment: gray["600"],
+    string: green["600"],
+    number: cyan["600"],
+    keyword: pink["500"],
+    regexp: teal["600"],
+    func: indigo["500"],
+    type: purple["500"],
+    variable: orange["600"],
+    // Extended token types
+    operator: cyan["500"],
+    punctuation: gray["700"],
+    constant: yellow["600"],
+    parameter: gray["700"],
+    namespace: yellow["600"],
+    decorator: blue["500"],
+    escape: cyan["600"],
+    invalid: "#ffffff",
+    tag: red["600"],
+    attribute: mint["600"]
+  },
+  ansi: {
+    black: gray["980"],
+    red: red["500"],
+    green: green["500"],
+    yellow: yellow["500"],
+    blue: blue["500"],
+    magenta: purple["500"],
+    cyan: cyan["500"],
+    white: gray["300"],
+    // make bright colors match the non-bright counterparts
+    brightBlack: gray["980"],
+    brightRed: red["500"],
+    brightGreen: green["500"],
+    brightYellow: yellow["500"],
+    brightBlue: blue["500"],
+    brightMagenta: purple["500"],
+    brightCyan: cyan["500"],
+    brightWhite: gray["300"]
+  }
+};
+
+export const dark: Roles = {
+  bg: {
+    editor: gray["1040"],
+    window: gray["1000"],
+    inset: gray["980"],
+    elevated: gray["1020"]
+  },
+  fg: {
+    base: gray["020"],
+    fg1: gray["200"],
+    fg2: gray["400"],
+    fg3: gray["600"],
+    fg4: gray["700"]
+  },
+  border: {
+    window: gray["1040"],
+    editor: gray["920"],
+    indentGuide: gray["940"],
+    indentGuideActive: gray["960"],
+    inset: gray["920"],
+    elevated: gray["960"]
+  },
+  accent: {
+    primary: blue["500"],
+    link: blue["500"],
+    subtle: blue["950"],
+    contrastOnAccent: gray["1040"]
+  },
+  states: {
+    merge: indigo["500"],
+    success: mint["500"],
+    danger: red["500"],
+    warn: yellow["500"],
+    info: cyan["500"]
+  },
+  syntax: {
+    comment: gray["600"],
+    string: green["400"],
+    number: cyan["400"],
+    keyword: pink["400"],
+    regexp: teal["400"],
+    func: indigo["400"],
+    type: purple["400"],
+    variable: orange["400"],
+    // Extended token types
+    operator: cyan["500"],
+    punctuation: gray["700"],
+    constant: yellow["400"],
+    parameter: gray["400"],
+    namespace: yellow["500"],
+    decorator: blue["400"],
+    escape: cyan["400"],
+    invalid: "#ffffff",
+    tag: red["400"],
+    attribute: mint["400"]
+  },
+  ansi: {
+    black: gray["1000"],
+    red: red["500"],
+    green: green["500"],
+    yellow: yellow["500"],
+    blue: blue["500"],
+    magenta: purple["500"],
+    cyan: cyan["500"],
+    white: gray["300"],
+    brightBlack: gray["1000"],
+    brightRed: red["500"],
+    brightGreen: green["500"],
+    brightYellow: yellow["500"],
+    brightBlue: blue["500"],
+    brightMagenta: purple["500"],
+    brightCyan: cyan["500"],
+    brightWhite: gray["300"]
+  }
+};