vscode-bauhaus-theme 1.0.1

package/samples/ansi.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+# Print the 16 ANSI colors as text and as backgrounds.
+for style in 3 9; do
+  for n in 0 1 2 3 4 5 6 7; do printf "\033[${style}${n}m %-8s\033[0m" "$style$n"; done; echo
+done
+for n in 0 1 2 3 4 5 6 7; do printf "\033[4${n}m %-8s\033[0m" "4$n"; done; echo

package/samples/sample.css

@@ -0,0 +1,15 @@
+:root {
+  --red: #95171d;
+}
+
+.editor > #main:hover::before,
+a[href^="https"] {
+  color: var(--red);
+  margin: 0 auto 1.5rem;
+  font-family: "Futura", sans-serif !important;
+  transition: opacity 200ms ease-in-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  body { background: rgb(34 34 34 / 90%); }
+}

package/samples/sample.diff

@@ -0,0 +1,7 @@
+--- a/colors.json
++++ b/colors.json
+@@ -1,3 +1,3 @@
+ {
+-  "red": "#95171d",
++  "red": "#e0615b",
+   "blue": "#30436a"

package/samples/sample.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Bauhaus</title>
+    <link rel="stylesheet" href="sample.css" />
+  </head>
+  <body class="editor">
+    <!-- Comment -->
+    <main id="main" data-theme="dark">
+      <h1>Form follows function</h1>
+      <a href="https://bauhaus.de">Link &amp; entity</a>
+      <button type="button" disabled>Submit</button>
+    </main>
+    <script type="module">
+      document.querySelector("#main").hidden = false;
+    </script>
+  </body>
+</html>

package/samples/sample.json

@@ -0,0 +1,11 @@
+{
+  "name": "bauhaus",
+  "version": 1,
+  "enabled": true,
+  "hues": {
+    "primary": {
+      "red": { "hex": "#95171d", "alpha": null }
+    }
+  },
+  "list": [1, 2.5, "three"]
+}

package/samples/sample.md

@@ -0,0 +1,19 @@
+# Heading 1
+
+## Heading 2
+
+Paragraph with **bold**, _italic_, ~~strike~~, `inline code` and a [link](https://bauhaus.de).
+
+> Less is more.
+
+- List item
+- [ ] Task
+
+> [!WARNING]
+> Alert block.
+
+```js
+const form = (fn) => fn;
+```
+
+---

package/samples/sample.py

@@ -0,0 +1,19 @@
+from dataclasses import dataclass
+import re
+
+HEX = re.compile(r"^#([0-9a-f]{6})$", re.I)
+
+
+@dataclass(frozen=True)
+class Color:
+    """A color with a hex value."""
+
+    name: str
+    hex: str = "#000000"
+
+    def luminance(self, gamma: float = 2.4) -> float:
+        r, g, b = (int(self.hex[i : i + 2], 16) / 255 for i in (1, 3, 5))
+        return 0.2126 * r**gamma + 0.7152 * g + 0.0722 * b if self else None
+
+
+print(f"{Color('red', '#95171d').luminance():.3f}", True, None)

package/samples/sample.ts

@@ -0,0 +1,35 @@
+import { readFile } from "node:fs/promises";
+import type { Palette } from "./types";
+
+/**
+ * Load a palette from disk.
+ * @param path Relative path.
+ */
+@sealed
+export class PaletteLoader<T extends Palette> implements Loader {
+  static readonly DEFAULT_PATH = "./colors.json";
+  #cache = new Map<string, T>();
+
+  constructor(private readonly root: string) {}
+
+  async load(path = PaletteLoader.DEFAULT_PATH): Promise<T | undefined> {
+    if (this.#cache.has(path)) return this.#cache.get(path);
+    try {
+      const json = JSON.parse(await readFile(`${this.root}/${path}`, "utf8"));
+      const ratio = (json.contrast ?? 4.5) * 2 + 0x1f;
+      for (const [key, value] of Object.entries(json)) {
+        if (!/^#[0-9a-f]{6}$/i.test(value as string)) throw new Error(`Invalid ${key}`);
+      }
+      this.#cache.set(path, json);
+      return ratio > 0 ? json : null;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+enum Mode { Dark = "dark", Light = "light" }
+const loader = new PaletteLoader(process.cwd());
+export default loader;
+// @ts-expect-error deprecated API
+loader.legacyLoad();

package/scripts/build.js

@@ -0,0 +1,158 @@
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
+
+import reference from "../reference/theme-colors.json" with { type: "json" };
+import { accents } from "../src/accents.js";
+import { contrast } from "../src/color.js";
+import { palettes } from "../src/palettes.js";
+import { roles, semanticTokenColors, tokenColors } from "../src/syntax.js";
+import { workbench } from "../src/workbench.js";
+
+const root = new URL("../", import.meta.url);
+const writeJson = (path, data) =>
+  writeFile(new URL(path, root), `${JSON.stringify(data, null, 2)}\n`);
+const capitalize = (s) => s[0].toUpperCase() + s.slice(1);
+
+const AA = 4.5;
+const grade = (ratio) =>
+  ratio >= 7 ? "AAA" : ratio >= AA ? "AA" : ratio >= 3 ? "AA large" : "fail";
+
+// Validation
+const known = new Set(reference.keys);
+const translucent = new Set(reference.translucent);
+function validate(name, colors) {
+  const errors = Object.entries(colors).flatMap(([key, value]) => [
+    ...(known.has(key) ? [] : [`unknown key ${key}`]),
+    ...(translucent.has(key) &&
+    !/^#[0-9a-f]{6}(?![fF]{2})[0-9a-f]{2}$/i.test(value)
+      ? [`${key} must not be opaque (${value})`]
+      : []),
+  ]);
+  if (errors.length) throw new Error(`${name}:\n  ${errors.join("\n  ")}`);
+}
+
+// Themes
+await rm(new URL("themes", root), { recursive: true, force: true });
+await mkdir(new URL("themes", root));
+
+// Other accent styles are documented as color customizations over the default one.
+const DEFAULT_ACCENT = "tricolor";
+
+const themes = [];
+const customizations = {};
+for (const palette of palettes) {
+  const label = `Bauhaus ${capitalize(palette.type)}`;
+  const path = `themes/bauhaus-${palette.id}.json`;
+  const colors = workbench(palette, accents[DEFAULT_ACCENT].accent(palette));
+  validate(label, colors);
+  await writeJson(path, {
+    $schema: "vscode://schemas/color-theme",
+    name: label,
+    type: palette.type,
+    semanticHighlighting: true,
+    colors,
+    tokenColors: tokenColors(palette),
+    semanticTokenColors: semanticTokenColors(palette),
+  });
+  themes.push({
+    label,
+    uiTheme: palette.type === "dark" ? "vs-dark" : "vs",
+    path: `./${path}`,
+  });
+
+  for (const [id, { accent }] of Object.entries(accents)) {
+    if (id === DEFAULT_ACCENT) continue;
+    const variant = workbench(palette, accent(palette));
+    (customizations[id] ??= {})[`[${label}]`] = Object.fromEntries(
+      Object.entries(variant).filter(([key, value]) => colors[key] !== value),
+    );
+  }
+}
+
+const pkg = JSON.parse(await readFile(new URL("package.json", root)));
+pkg.contributes.themes = themes;
+await writeJson("package.json", pkg);
+
+// Palettes and contrast report
+const report = palettes.map((palette) => {
+  const syntax = Object.entries(roles(palette)).map(([role, color]) => {
+    const ratio = contrast(color, palette.bg.editor);
+    return { role, color, ratio: +ratio.toFixed(2), grade: grade(ratio) };
+  });
+  const fills = Object.entries(palette.fill).map(([hue, color]) => {
+    const ratio = contrast(color, palette.onFill[hue]);
+    return {
+      hue,
+      color,
+      text: palette.onFill[hue],
+      ratio: +ratio.toFixed(2),
+      grade: grade(ratio),
+    };
+  });
+  return { ...palette, syntax, fills };
+});
+await writeJson("palettes.json", report);
+
+const markdown = report
+  .map(
+    ({ type, bg, fg, ink, bright, syntax, fills }) => `### ${capitalize(type)}
+
+| Surface | Color |
+| --- | --- |
+${Object.entries({ ...bg, "fg.default": fg.default, "fg.muted": fg.muted })
+  .map(([key, color]) => `| ${key} | \`${color}\` |`)
+  .join("\n")}
+
+| Hue | Ink | Bright (terminal) |
+| --- | --- | --- |
+${Object.keys(ink)
+  .map((hue) => `| ${hue} | \`${ink[hue]}\` | \`${bright[hue]}\` |`)
+  .join("\n")}
+
+| Syntax role | Color | Contrast on editor | WCAG 2.0 |
+| --- | --- | --- | --- |
+${syntax.map(({ role, color, ratio, grade }) => `| ${role} | \`${color}\` | ${ratio}:1 | ${grade} |`).join("\n")}
+
+| Fill | Text | Contrast | WCAG 2.0 |
+| --- | --- | --- | --- |
+${fills.map(({ hue, color, text, ratio, grade }) => `| ${hue} \`${color}\` | \`${text}\` | ${ratio}:1 | ${grade} |`).join("\n")}
+`,
+  )
+  .join("\n");
+
+const accentsMarkdown = Object.entries(customizations)
+  .map(
+    ([id, colors]) => `### ${accents[id].name}
+
+\`\`\`json
+${JSON.stringify({ "workbench.colorCustomizations": colors }, null, 2)}
+\`\`\`
+`,
+  )
+  .join("\n");
+
+const replaceSection = (text, name, content) =>
+  text.replace(
+    new RegExp(`(<!-- ${name}:start -->\n)[\\s\\S]*(<!-- ${name}:end -->)`),
+    `$1\n${content}\n$2`,
+  );
+
+const readmeUrl = new URL("README.md", root);
+const readme = await readFile(readmeUrl, "utf8");
+await writeFile(
+  readmeUrl,
+  replaceSection(
+    replaceSection(readme, "palettes", markdown),
+    "accents",
+    accentsMarkdown,
+  ),
+);
+
+for (const { type, syntax } of report) {
+  const failing = syntax.filter(({ ratio }) => ratio < AA);
+  console.log(
+    `${capitalize(type)}: ${failing.length ? `below AA → ${failing.map(({ role, ratio }) => `${role} ${ratio}`).join(", ")}` : "all syntax roles ≥ AA"}`,
+  );
+}
+console.log(
+  `${themes.length} themes written, validated against theme color reference approved ${reference.approved}`,
+);

package/scripts/icon.js

@@ -0,0 +1,13 @@
+import { readFile, writeFile } from "node:fs/promises";
+
+import { Resvg } from "@resvg/resvg-js";
+
+const SIZE = 256;
+
+const root = new URL("./", import.meta.url);
+const svg = await readFile(new URL("icon.svg", root));
+const png = new Resvg(svg, { fitTo: { mode: "width", value: SIZE } })
+  .render()
+  .asPng();
+await writeFile(new URL("../icon.png", root), png);
+console.log(`icon.png written (${SIZE}px)`);

package/scripts/icon.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
+  <!-- Dark theme window: paper outline keeps it visible on dark backgrounds -->
+  <g transform="translate(8 8)">
+    <rect width="80" height="80" rx="10" fill="#2b2119" stroke="#f2f2f2" stroke-width="2"/>
+    <circle cx="13" cy="13" r="5" fill="#95171d"/>
+    <circle cx="27" cy="13" r="5" fill="#cb9820"/>
+    <circle cx="41" cy="13" r="5" fill="#30436a"/>
+    <rect x="8" y="30" width="50" height="10" fill="#30436a"/>
+    <rect x="18" y="46" width="40" height="10" fill="#95171d"/>
+    <rect x="18" y="62" width="24" height="10" fill="#cb9820"/>
+  </g>
+  <!-- Light theme window -->
+  <g transform="translate(40 40)">
+    <rect width="80" height="80" rx="10" fill="#f2f2f2" stroke="#2b2119" stroke-width="2"/>
+    <circle cx="13" cy="13" r="5" fill="#95171d"/>
+    <circle cx="27" cy="13" r="5" fill="#cb9820"/>
+    <circle cx="41" cy="13" r="5" fill="#30436a"/>
+    <!-- Fold marker opening an indented block -->
+    <polygon points="8,30 22,30 15,40" fill="#cb9820"/>
+    <rect x="28" y="30" width="44" height="10" fill="#30436a"/>
+    <rect x="38" y="46" width="34" height="10" fill="#95171d"/>
+    <rect x="38" y="62" width="20" height="10" fill="#cb9820"/>
+  </g>
+</svg>

package/scripts/reference.js

@@ -0,0 +1,26 @@
+// Snapshot the official theme color reference so the build can validate keys offline.
+import { writeFile } from "node:fs/promises";
+
+const SOURCE =
+  "https://raw.githubusercontent.com/microsoft/vscode-docs/main/api/references/theme-color.md";
+
+const markdown = await (await fetch(SOURCE)).text();
+const entries = [...markdown.matchAll(/^- `([A-Za-z0-9.]+)`:(.*)$/gm)];
+
+const reference = {
+  source: SOURCE,
+  approved: markdown.match(/^DateApproved: (.+)$/m)?.[1],
+  keys: [...new Set(entries.map(([, key]) => key))].sort(),
+  translucent: entries
+    .filter(([, , description]) => /not be opaque/i.test(description))
+    .map(([, key]) => key)
+    .sort(),
+};
+
+await writeFile(
+  new URL("../reference/theme-colors.json", import.meta.url),
+  `${JSON.stringify(reference, null, 2)}\n`,
+);
+console.log(
+  `${reference.keys.length} keys (${reference.translucent.length} translucent), approved ${reference.approved}`,
+);

package/src/accents.js

@@ -0,0 +1,86 @@
+/** @typedef {import("./palettes.js").Palette} Palette */
+
+/**
+ * @typedef {object} Pair
+ * @property {string} background
+ * @property {string} foreground
+ */
+
+/**
+ * @typedef {object} ActiveItems
+ * @property {string} tab Active editor tab line.
+ * @property {Pair} activity Active activity bar item block.
+ * @property {Pair} panel Active panel tab block.
+ */
+
+/**
+ * @typedef {object} Accent
+ * @property {string} focus Focus border, cursor, progress, links.
+ * @property {ActiveItems} active
+ * @property {Pair} statusBar
+ * @property {Pair} debugging
+ * @property {Pair} noFolder
+ * @property {Pair} remote
+ * @property {Pair} badge
+ * @property {Pair} button
+ */
+
+const fill = (p, hue) => ({
+  background: p.fill[hue],
+  foreground: p.onFill[hue],
+});
+const chrome = (p) => ({ background: p.bg.chrome, foreground: p.fg.muted });
+const active = (p, activity, panel = activity) => ({
+  tab: p.ink.red,
+  activity: fill(p, activity),
+  panel: fill(p, panel),
+});
+
+/**
+ * @typedef {object} AccentStyle
+ * @property {string} name
+ * @property {function(Palette): Accent} accent
+ */
+
+/** @type {Object<string, AccentStyle>} */
+export const accents = {
+  blocks: {
+    name: "Blocks",
+    accent: (p) => ({
+      focus: p.ink.red,
+      active: active(p, "red"),
+      statusBar: fill(p, "red"),
+      debugging: fill(p, "yellow"),
+      noFolder: fill(p, "blue"),
+      remote: fill(p, "blue"),
+      badge: fill(p, "red"),
+      button: fill(p, "red"),
+    }),
+  },
+  restrained: {
+    name: "Restrained",
+    accent: (p) => ({
+      focus: p.ink.red,
+      active: active(p, "red"),
+      statusBar: chrome(p),
+      debugging: fill(p, "red"),
+      noFolder: chrome(p),
+      remote: fill(p, "red"),
+      badge: fill(p, "red"),
+      button: fill(p, "red"),
+    }),
+  },
+  tricolor: {
+    name: "Tricolor",
+    accent: (p) => ({
+      focus: p.ink.red,
+      active: active(p, "yellow", "blue"),
+      statusBar: fill(p, "blue"),
+      debugging: fill(p, "red"),
+      noFolder: fill(p, "green"),
+      remote: fill(p, "yellow"),
+      badge: fill(p, "red"),
+      button: fill(p, "red"),
+    }),
+  },
+};

package/src/color.js

@@ -0,0 +1,162 @@
+import {
+  create,
+  fromHex,
+  fromOklab,
+  fromOklch as colorFromOklch,
+  toHex,
+  toLinear,
+  toOklab,
+  toOklch as colorToOklch,
+} from "pex-color";
+
+const parse = (hex) => fromHex(create(), hex);
+const format = (color) => toHex(color).toLowerCase();
+const lerp = (a, b, t) => a + (b - a) * t;
+
+/**
+ * WCAG 2.0 relative luminance.
+ *
+ * @param {string} hex
+ * @returns {number}
+ */
+export function luminance(hex) {
+  // WCAG 2.0's 0.03928 linearization threshold and sRGB's 0.04045 give the same result on 8-bit channels.
+  const [r, g, b] = toLinear(parse(hex));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * WCAG 2.0 contrast ratio between two opaque colors.
+ *
+ * @param {string} a
+ * @param {string} b
+ * @returns {number} From 1 to 21.
+ */
+export function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/**
+ * Convert to OKLCH.
+ *
+ * @param {string} hex
+ * @returns {[number, number, number]} Lightness, chroma, hue in turns.
+ */
+export const toOklch = (hex) => colorToOklch(parse(hex)).slice(0, 3);
+
+// Tolerance applies to linear values: gamma encoding would make it ~13x stricter near 0.
+const inGamut = (color) =>
+  toLinear(color)
+    .slice(0, 3)
+    .every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+
+/**
+ * Convert from OKLCH, reducing chroma until the color fits in sRGB.
+ *
+ * @param {[number, number, number]} lch Lightness, chroma, hue in turns.
+ * @returns {string}
+ */
+export function fromOklch([L, C, H]) {
+  const color = create();
+  while (!inGamut(colorFromOklch(color, L, C, H))) C = Math.max(0, C - 0.002);
+  return format(color);
+}
+
+/**
+ * Interpolate two colors in OKLab.
+ *
+ * @param {string} a
+ * @param {string} b
+ * @param {number} [t=0.5]
+ * @returns {string}
+ */
+export function mix(a, b, t = 0.5) {
+  const [La, Aa, Ba] = toOklab(parse(a));
+  const [Lb, Ab, Bb] = toOklab(parse(b));
+  return format(
+    fromOklab(create(), lerp(La, Lb, t), lerp(Aa, Ab, t), lerp(Ba, Bb, t)),
+  );
+}
+
+/**
+ * Interpolate two colors in OKLCH along the shortest hue arc. Unlike OKLab
+ * mixing, distant hues keep their chroma (blue + green gives cyan, not grey).
+ *
+ * @param {string} a
+ * @param {string} b
+ * @param {number} [t=0.5]
+ * @returns {string}
+ */
+export function mixHue(a, b, t = 0.5) {
+  const [La, Ca, Ha] = toOklch(a);
+  const [Lb, Cb, Hb] = toOklch(b);
+  const dH = ((((Hb - Ha) % 1) + 1.5) % 1) - 0.5;
+  return fromOklch([lerp(La, Lb, t), lerp(Ca, Cb, t), Ha + dH * t]);
+}
+
+/**
+ * Shift OKLCH lightness (hue kept) until the color reaches a contrast target
+ * against every background.
+ *
+ * @param {string} hex
+ * @param {string | string[]} backgrounds All on the same side of the lightness
+ *   scale.
+ * @param {number} target WCAG ratio: 3 (large text, UI), 4.5 (AA), 7 (AAA).
+ * @param {object} [options]
+ * @param {boolean} [options.exact=false] Closest passing color to the
+ *   backgrounds, even if the source already passes. Otherwise the source is
+ *   returned unchanged when passing.
+ * @param {number} [options.chroma=1] Chroma scale, clamped to the sRGB gamut.
+ * @returns {string}
+ */
+export function fit(
+  hex,
+  backgrounds,
+  target,
+  { exact = false, chroma = 1 } = {},
+) {
+  const bgs = [backgrounds].flat();
+  const [L0, C0, H] = toOklch(hex);
+  const C = C0 * chroma;
+  const direction = Math.max(...bgs.map(luminance)) < 0.18 ? 1 : -1;
+  const bgLightness = bgs.map((bg) => toOklch(bg)[0]);
+  const L = exact ? (direction > 0 ? Math.min : Math.max)(...bgLightness) : L0;
+  for (let step = 0; step <= 1000; step++) {
+    const candidate = fromOklch([
+      Math.min(1, Math.max(0, L + direction * step * 0.001)),
+      C,
+      H,
+    ]);
+    if (Math.min(...bgs.map((bg) => contrast(candidate, bg))) >= target)
+      return candidate;
+  }
+  throw new Error(
+    `Cannot reach ${target}:1 for ${hex} against ${bgs.join(", ")}`,
+  );
+}
+
+/**
+ * Pick the candidate with the highest contrast against a background.
+ *
+ * @param {string} bg
+ * @param {string[]} candidates
+ * @returns {string}
+ */
+export const mostContrasted = (bg, candidates) =>
+  candidates.reduce((best, c) =>
+    contrast(c, bg) > contrast(best, bg) ? c : best,
+  );
+
+/**
+ * Set the alpha channel.
+ *
+ * @param {string} hex
+ * @param {number} opacity From 0 to 1.
+ * @returns {string} #RRGGBBAA, or #RRGGBB when opaque.
+ */
+export function alpha(hex, opacity) {
+  const color = parse(hex);
+  color[3] = opacity;
+  return format(color);
+}