@pierre/vscode-icons 0.0.1

package/.github/workflows/publish.yml

@@ -0,0 +1,62 @@
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  package:
+    name: Publish to VS Marketplace & Open VSX
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build theme
+        run: npm run build
+
+      - name: Rename package for extension publishing
+        run: jq '.name = "pierre-vscode-icons"' package.json > tmp.json && mv tmp.json package.json
+
+      - name: Publish to VS Marketplace
+        env:
+          VSCE_PAT: ${{ secrets.VSCE_PAT }}
+        run: npx @vscode/vsce publish --pat $VSCE_PAT
+
+      - name: Publish to Open VSX
+        env:
+          OVSX_PAT: ${{ secrets.OPEN_VSX_TOKEN }}
+        run: npx ovsx publish --pat $OVSX_PAT
+
+  npm:
+    name: Publish to npm
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Publish to npm
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm publish --access public --provenance

package/.oxfmtrc.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": []
+}

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Icon Theme Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "preLaunchTask": "build icon theme",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "${workspaceFolder}"
+      ]
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,11 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build icon theme",
+      "type": "shell",
+      "command": "npm run build",
+      "problemMatcher": []
+    }
+  ]
+}

package/.vscodeignore

@@ -0,0 +1,11 @@
+.vscode/**
+.github/
+.gitignore
+node_modules/
+package-lock.json
+scripts/
+svgs/
+svgo.config.js
+test/
+.oxfmtrc.json
+*.vsix

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 The Pierre Computer Company
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# Pierre Icons for VS Code
+
+File icon theme for VS Code with three tiers and per-icon palette colors.
+
+## Themes
+
+The extension ships three icon themes, each building on the last:
+
+- **Pierre Icons (Minimal)** -- file, folder, text, and image icons only. Monochrome.
+- **Pierre Icons** -- adds language icons (JS, TS, CSS, HTML, Python, Go, Rust, Ruby, Swift, Bash, Markdown) plus font, SVG, JSON, and git. Monochrome.
+- **Pierre Icons (Complete)** -- adds framework, tooling, and config icons (React, Vue, Svelte, Astro, Docker, Tailwind, ESLint, Prettier, npm, Vite, webpack, and more). Uses per-icon colors from the [Pierre palette](https://github.com/pierrecomputer/theme).
+
+## Color system
+
+Colors come from the Pierre palette, using level `400` for dark themes and `600` for light themes -- the same scale used for syntax tokens in the [Pierre color theme](https://github.com/pierrecomputer/theme).
+
+Minimal and default tiers are monochrome (gray `400` / `800`). The complete tier applies per-icon colors, with two modes:
+
+- **Single color** (`color(hue)`) -- one palette hue for all paths. Duo-tone icons get visual weight from the `opacity` attribute baked into the SVG's background path.
+- **Dual color** (`duoColor(fg, bg)`) -- separate palette hues for foreground and background paths. Requires SVG paths to have `class="fg"` and `class="bg"` attributes (set in Figma). The build injects a `<style>` block to override bg fills via CSS.
+
+## Build
+
+```bash
+npm run build
+```
+
+This reads source SVGs from `svgs/`, optimizes them with SVGO, stamps dark/light fill colors, and writes the output to `icons/`. Three theme JSON files are generated: `theme-minimal.json`, `theme-default.json`, and `theme-complete.json`.
+
+For development, watch mode rebuilds on SVG changes:
+
+```bash
+npm run watch
+```
+
+## Load locally
+
+### Run from source (VS Code)
+
+1. Open this folder in VS Code.
+2. Run `npm run build`.
+3. Press `F5` to launch an Extension Development Host.
+4. Choose one of the Pierre Icons themes from **File Icon Theme**.
+
+### Package a VSIX
+
+```bash
+npm run package
+```
+
+Then install the generated `.vsix` in VS Code or Cursor.
+
+## Adding icons
+
+1. Add or update SVGs in `svgs/`. For duo-tone icons, use `class="bg"` and `class="fg"` on paths.
+2. Add an entry to the appropriate tier array in `scripts/build-icon-theme.mjs`:
+
+```js
+// Single color
+{ name: "react", color: color(palette.cyan), fileExtensions: ["jsx", "tsx"] }
+
+// Dual color (fg + bg)
+{ name: "lang-python", color: duoColor(palette.blue, palette.yellow), fileExtensions: ["py"] }
+
+// Monochrome (no color property)
+{ name: "font", fileExtensions: ["ttf", "otf", "woff", "woff2"] }
+```
+
+3. Run `npm run build`.

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@pierre/vscode-icons",
+  "displayName": "Pierre VS Code Icons",
+  "description": "File icon theme for VS Code backed by source SVGs.",
+  "version": "0.0.1",
+  "publisher": "pierrecomputer",
+  "license": "MIT",
+  "type": "module",
+  "icon": "icon.png",
+  "galleryBanner": {
+    "color": "#141415",
+    "theme": "dark"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pierrecomputer/vscode-icons"
+  },
+  "bugs": {
+    "url": "https://github.com/pierrecomputer/vscode-icons/issues"
+  },
+  "engines": {
+    "vscode": "^1.90.0"
+  },
+  "categories": [
+    "Themes"
+  ],
+  "keywords": [
+    "icons",
+    "pierre",
+    "file-icons",
+    "icon-theme"
+  ],
+  "scripts": {
+    "build": "node scripts/build-icon-theme.mjs",
+    "watch": "node scripts/watch-svgs.mjs",
+    "package": "npm run build && node scripts/package-vsix.mjs",
+    "lint": "oxlint scripts/",
+    "format": "oxfmt scripts/",
+    "format:check": "oxfmt --check scripts/"
+  },
+  "contributes": {
+    "iconThemes": [
+      {
+        "id": "pierre-icons-minimal",
+        "label": "Pierre Icons (Minimal)",
+        "path": "./icons/theme-minimal.json"
+      },
+      {
+        "id": "pierre-icons",
+        "label": "Pierre Icons",
+        "path": "./icons/theme-default.json"
+      },
+      {
+        "id": "pierre-icons-complete",
+        "label": "Pierre Icons (Complete)",
+        "path": "./icons/theme-complete.json"
+      }
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@vscode/vsce": "^3.2.2",
+    "oxfmt": "^0.41.0",
+    "oxlint": "^1.56.0",
+    "svgo": "^4.0.1"
+  }
+}

package/scripts/build-icon-theme.mjs

@@ -0,0 +1,170 @@
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { optimize } from "svgo";
+import { SVGOConfig } from "../svgo.config.js";
+import { fill } from "./palette.mjs";
+import minimal from "./themes/minimal.mjs";
+import defaults from "./themes/default.mjs";
+import complete from "./themes/complete.mjs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, "..");
+const iconOutputDir = path.join(rootDir, "icons");
+const svgDir = path.join(rootDir, "svgs");
+
+const tiers = {
+  minimal,
+  default: [...minimal, ...defaults],
+  complete: [...minimal, ...defaults, ...complete],
+};
+
+// ---------------------------------------------------------------------------
+// SVG generation — read source, optimize, stamp dark/light fills
+// ---------------------------------------------------------------------------
+
+function normalizeSvg(svg) {
+  return svg.replaceAll("#6c6c71", "currentColor");
+}
+
+function applyOpacity(svg, opacity) {
+  if (!opacity || opacity === 1) return svg;
+  return svg.replace("<svg", `<svg opacity="${opacity}"`);
+}
+
+function applyBgStyle(svg, bgColor) {
+  return svg.replace(">", `><style>.bg{fill:${bgColor}}</style>`);
+}
+
+function optimizeSvg(raw) {
+  return normalizeSvg(optimize(raw, SVGOConfig).data);
+}
+
+async function generateSvgPair(name, { opacity } = {}) {
+  const srcPath = path.join(svgDir, `${name}.svg`);
+  const raw = await readFile(srcPath, "utf8");
+  const optimized = optimizeSvg(raw);
+
+  const darkSvg = applyOpacity(optimized.replaceAll("currentColor", fill.dark), opacity);
+  const lightSvg = applyOpacity(optimized.replaceAll("currentColor", fill.light), opacity);
+
+  await writeFile(path.join(iconOutputDir, `${name}.svg`), darkSvg);
+  await writeFile(path.join(iconOutputDir, `${name}-light.svg`), lightSvg);
+}
+
+async function generateColoredSvg(name, iconColor, { opacity } = {}) {
+  const srcPath = path.join(svgDir, `${name}.svg`);
+  const raw = await readFile(srcPath, "utf8");
+  const optimized = optimizeSvg(raw);
+
+  let darkSvg, lightSvg;
+
+  if (iconColor.fg) {
+    darkSvg = applyBgStyle(
+      optimized.replaceAll("currentColor", iconColor.fg.dark),
+      iconColor.bg.dark,
+    );
+    lightSvg = applyBgStyle(
+      optimized.replaceAll("currentColor", iconColor.fg.light),
+      iconColor.bg.light,
+    );
+  } else {
+    darkSvg = optimized.replaceAll("currentColor", iconColor.dark);
+    lightSvg = optimized.replaceAll("currentColor", iconColor.light);
+  }
+
+  darkSvg = applyOpacity(darkSvg, opacity);
+  lightSvg = applyOpacity(lightSvg, opacity);
+
+  await writeFile(path.join(iconOutputDir, `${name}-color.svg`), darkSvg);
+  await writeFile(path.join(iconOutputDir, `${name}-color-light.svg`), lightSvg);
+}
+
+// ---------------------------------------------------------------------------
+// Theme builders
+// ---------------------------------------------------------------------------
+
+function buildTheme(icons, { colored = false } = {}) {
+  const iconDefinitions = {};
+  const fileExtensions = {};
+  const lightFileExtensions = {};
+  const fileNames = {};
+  const lightFileNames = {};
+
+  for (const { name, color: iconColor, fileExtensions: exts, fileNames: names } of icons) {
+    const hasColor = colored && iconColor;
+    const darkPath = hasColor ? `./${name}-color.svg` : `./${name}.svg`;
+    const lightPath = hasColor ? `./${name}-color-light.svg` : `./${name}-light.svg`;
+    iconDefinitions[name] = { iconPath: darkPath };
+    iconDefinitions[`${name}_light`] = { iconPath: lightPath };
+
+    if (exts) {
+      for (const ext of exts) {
+        fileExtensions[ext] = name;
+        lightFileExtensions[ext] = `${name}_light`;
+      }
+    }
+    if (names) {
+      for (const fn of names) {
+        fileNames[fn] = name;
+        lightFileNames[fn] = `${name}_light`;
+      }
+    }
+  }
+
+  const theme = {
+    iconDefinitions,
+    file: "file-duo",
+    folder: "folder-duo",
+    folderExpanded: "folder-open-duo",
+    fileExtensions,
+    light: {
+      file: "file-duo_light",
+      folder: "folder-duo_light",
+      folderExpanded: "folder-open-duo_light",
+      fileExtensions: lightFileExtensions,
+    },
+  };
+
+  if (Object.keys(fileNames).length > 0) {
+    theme.fileNames = fileNames;
+    theme.light.fileNames = lightFileNames;
+  }
+
+  return theme;
+}
+
+// ---------------------------------------------------------------------------
+// Build
+// ---------------------------------------------------------------------------
+
+await mkdir(iconOutputDir, { recursive: true });
+
+const allIcons = new Map();
+for (const icons of Object.values(tiers)) {
+  for (const icon of icons) {
+    allIcons.set(icon.name, icon);
+  }
+}
+await Promise.all(
+  [...allIcons.values()].map((i) => generateSvgPair(i.name, { opacity: i.opacity })),
+);
+
+const coloredIcons = [...allIcons.values()].filter((i) => i.color);
+await Promise.all(
+  coloredIcons.map((i) => generateColoredSvg(i.name, i.color, { opacity: i.opacity })),
+);
+
+const tierOptions = {
+  minimal: { colored: false },
+  default: { colored: false },
+  complete: { colored: true },
+};
+
+for (const [name, icons] of Object.entries(tiers)) {
+  const theme = buildTheme(icons, tierOptions[name]);
+  const out = path.join(iconOutputDir, `theme-${name}.json`);
+  await writeFile(out, `${JSON.stringify(theme, null, 2)}\n`);
+  console.log(`Wrote ${path.relative(rootDir, out)}`);
+}

package/scripts/package-vsix.mjs

@@ -0,0 +1,25 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, "..");
+const pkgPath = path.join(rootDir, "package.json");
+
+const original = readFileSync(pkgPath, "utf-8");
+const pkg = JSON.parse(original);
+
+const originalName = pkg.name;
+pkg.name = "pierre-vscode-icons";
+
+console.log(`Temporarily renaming package: ${originalName} → ${pkg.name}\n`);
+
+try {
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+  execSync("npx @vscode/vsce package", { stdio: "inherit", cwd: rootDir });
+} finally {
+  writeFileSync(pkgPath, original);
+  console.log(`\nRestored package name: ${originalName}`);
+}

package/scripts/palette.mjs

@@ -0,0 +1,31 @@
+export const palette = {
+  gray: {
+    400: "#adadb1",
+    500: "#8E8E95",
+    600: "#84848A",
+    700: "#79797F",
+    800: "#6C6C71",
+  },
+  red: { 400: "#ff6762", 600: "#d52c36" },
+  orange: { 400: "#ffa359", 600: "#d47628" },
+  yellow: { 400: "#ffd452", 600: "#d5a910" },
+  green: { 400: "#5ecc71", 600: "#199f43" },
+  mint: { 400: "#61d5c0", 600: "#16a994" },
+  teal: { 400: "#64d1db", 600: "#17a5af" },
+  cyan: { 400: "#68cdf2", 600: "#1ca1c7" },
+  blue: { 400: "#69b1ff", 600: "#1a85d4" },
+  indigo: { 400: "#9d6afb", 600: "#693acf" },
+  purple: { 400: "#d568ea", 600: "#a631be" },
+  pink: { 400: "#ff678d", 600: "#d32a61" },
+  brown: { 400: "#c3987b", 600: "#956b4f" },
+};
+
+export const fill = { dark: palette.gray[400], light: palette.gray[800] };
+
+export function color(hue) {
+  return { dark: hue[400], light: hue[600] };
+}
+
+export function duoColor(fg, bg) {
+  return { fg: color(fg), bg: color(bg) };
+}