@pierre/theme 0.0.23 → 0.0.25

package/.github/workflows/publish.yml

@@ -56,6 +56,12 @@ jobs:
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build theme
+        run: npm run build
+
       - name: Publish to npm
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/test.yml

@@ -44,6 +44,20 @@ jobs:
           fi
           echo "✅ All theme files generated successfully"
 
+      - name: Verify ESM wrapper modules exist
+        run: |
+          for theme in pierre-dark pierre-light pierre-dark-vibrant pierre-light-vibrant; do
+            if [ ! -f "dist/${theme}.mjs" ]; then
+              echo "❌ dist/${theme}.mjs not generated"
+              exit 1
+            fi
+          done
+          if [ ! -f "dist/index.mjs" ]; then
+            echo "❌ dist/index.mjs not generated"
+            exit 1
+          fi
+          echo "✅ All ESM wrapper modules generated successfully"
+
       - name: Check file sizes
         run: |
           light_size=$(wc -c < themes/pierre-light.json)

package/.vscodeignore

@@ -7,3 +7,4 @@
 /package-lock.json
 /src/
 /build/
+/dist/

package/README.md

@@ -11,6 +11,30 @@ OPEN POSITIONS: [Systems Engineer](https://pierre.computer/careers/systems-engin
 
 ~~~
 
-Overview: 
- - Light and dark themes for Visual Studio Code, Cursor, Zed, and Shiki. 
+Overview:
+ - Light and dark themes for Visual Studio Code, Cursor, Zed, and Shiki.
  - Built for [Diffs.com](https://diffs.com)
+
+~~~
+
+Usage:
+
+ VS Code / Cursor:
+  1. Install "Pierre Theme" from the Extensions marketplace
+  2. Cmd+Shift+P > "Color Theme" > select Pierre Light or Pierre Dark
+
+ Shiki / npm:
+  npm install @pierre/theme
+
+  import pierreDark from '@pierre/theme/pierre-dark'
+  import pierreLight from '@pierre/theme/pierre-light'
+
+  Available themes:
+   - @pierre/theme/pierre-dark
+   - @pierre/theme/pierre-light
+   - @pierre/theme/pierre-dark-vibrant   (Display P3)
+   - @pierre/theme/pierre-light-vibrant  (Display P3)
+
+ Zed:
+  Install "Pierre" from the Zed extension registry
+```

package/package.json

@@ -2,7 +2,7 @@
   "name": "@pierre/theme",
   "displayName": "Pierre Theme",
   "description": "Pierre theme for Shiki, VS Code, and more",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "publisher": "pierrecomputer",
   "icon": "icon.png",
   "galleryBanner": {
@@ -47,7 +47,8 @@
     "build": "ts-node src/build.ts",
     "test": "npm run build && ts-node src/test.ts",
     "start": "nodemon --watch src --ext ts --exec npm run build",
-    "package": "ts-node src/package-vsix.ts"
+    "package": "ts-node src/package-vsix.ts",
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@vscode/vsce": "^3.2.2",
@@ -55,6 +56,15 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3"
   },
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./pierre-dark": "./dist/pierre-dark.mjs",
+    "./pierre-light": "./dist/pierre-light.mjs",
+    "./pierre-dark-vibrant": "./dist/pierre-dark-vibrant.mjs",
+    "./pierre-light-vibrant": "./dist/pierre-light-vibrant.mjs",
+    "./themes/*": "./themes/*"
+  },
   "publishConfig": {
     "access": "public"
   }

package/src/build.ts

@@ -37,3 +37,24 @@ const zedTheme = makeZedThemeFamily("Pierre", "pierrecomputer", [
 
 writeFileSync("zed/themes/pierre.json", JSON.stringify(zedTheme, null, 2), "utf8");
 console.log("Wrote zed/themes/pierre.json");
+
+// ============================================
+// ESM wrapper modules (for npm / Shiki consumers)
+// ============================================
+mkdirSync("dist", { recursive: true });
+
+const themeNames: string[] = [];
+
+for (const { file, theme } of vscodeThemes) {
+  const name = file.replace("themes/", "").replace(".json", "");
+  themeNames.push(name);
+  const json = JSON.stringify(theme);
+  const escaped = json.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  const mjs = `export default Object.freeze(JSON.parse('${escaped}'))\n`;
+  writeFileSync(`dist/${name}.mjs`, mjs, "utf8");
+  console.log("Wrote", `dist/${name}.mjs`);
+}
+
+const indexMjs = `export const themeNames = ${JSON.stringify(themeNames)}\n`;
+writeFileSync("dist/index.mjs", indexMjs, "utf8");
+console.log("Wrote dist/index.mjs");

package/src/palette.ts

@@ -277,7 +277,7 @@ export const light: Roles = {
     namespace: yellow["600"],
     decorator: blue["500"],
     escape: cyan["600"],
-    invalid: "#ffffff",
+    invalid: gray["1040"],
     tag: red["600"],
     attribute: mint["600"]
   },
@@ -354,7 +354,7 @@ export const dark: Roles = {
     namespace: yellow["500"],
     decorator: blue["400"],
     escape: cyan["400"],
-    invalid: "#ffffff",
+    invalid: gray["020"],
     tag: red["400"],
     attribute: mint["400"]
   },

package/themes/pierre-dark-vibrant.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     }
   ],

package/themes/pierre-dark.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     }
   ],

package/themes/pierre-light-vibrant.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     }
   ],

package/themes/pierre-light.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     }
   ],

package/zed/extension.toml

@@ -1,7 +1,7 @@
 id = "pierre-theme"
 name = "Pierre"
 description = "A warm, orange-accented color theme with light and dark variants"
-version = "0.0.23"
+version = "0.0.25"
 schema_version = 1
 authors = ["pierrecomputer"]
 repository = "https://github.com/pierrecomputer/pierre-theme"

package/color-comparison.html

@@ -1,234 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pierre Theme - Display P3 Color Comparison</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            max-width: 1200px;
-            margin: 40px auto;
-            padding: 20px;
-            background: #141415;
-            color: #fbfbfb;
-        }
-        h1 { text-align: center; margin-bottom: 40px; }
-        .comparison-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-            margin: 40px 0;
-        }
-        .color-card {
-            background: #1f1f21;
-            border-radius: 12px;
-            padding: 20px;
-            border: 1px solid #39393c;
-        }
-        .color-card h3 {
-            margin-top: 0;
-            color: #fbfbfb;
-        }
-        .color-swatch {
-            height: 100px;
-            border-radius: 8px;
-            margin: 10px 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
-            font-family: 'Monaco', 'Courier New', monospace;
-            font-size: 12px;
-            color: white;
-            text-shadow: 0 0 2px rgba(0,0,0,0.5);
-        }
-
-        .label {
-            font-size: 12px;
-            color: #adadb1;
-            margin-bottom: 5px;
-            margin-top: 15px;
-        }
-        .hex-value {
-            font-family: 'Monaco', 'Courier New', monospace;
-            font-size: 11px;
-            color: #c6c6c8;
-            margin-top: 5px;
-            word-break: break-all;
-        }
-        .info {
-            background: #2e2e30;
-            padding: 20px;
-            border-radius: 8px;
-            margin: 20px 0;
-            border-left: 4px solid color(display-p3 0.340 0.734 0.360);
-        }
-        .info h3 {
-            margin-top: 0;
-        }
-        .p3-notice {
-            text-align: center;
-            padding: 15px;
-            background: #39393c;
-            border-radius: 8px;
-            margin: 20px 0;
-        }
-        .supports { color: color(display-p3 0.340 0.734 0.360); }
-        .no-support { color: #ff6762; }
-
-        code {
-            background: #2e2e30;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-size: 13px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Pierre Theme: Display P3 Color Comparison</h1>
-
-    <div class="p3-notice" id="p3-status">
-        Checking Display P3 support...
-    </div>
-
-    <div class="info">
-        <h3>About Display P3 Enhanced Colors</h3>
-        <p>Display P3 is a wider color gamut that can display ~25% more colors than standard sRGB. The Pierre Vibrant themes use CSS <code>color(display-p3 r g b)</code> format with <strong>enhanced saturation</strong> to fully utilize the P3 color space.</p>
-        <p><strong>Enhancement:</strong> Colors are boosted by 15-30% saturation (depending on original saturation) and 5% luminance for highly saturated colors. This pushes colors into the wider P3 gamut that isn't available in sRGB.</p>
-        <p><strong>Important:</strong> To see the difference, you need a P3-capable display (most Macs from 2015+, iPhones, iPads).</p>
-    </div>
-
-    <div class="comparison-grid">
-        <div class="color-card">
-            <h3>Blue</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #008cff;">
-                #008cff
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.267653 0.570512 1.000000);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.267653 0.570512 1.000000)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Green</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #0dbe4e;">
-                #0dbe4e
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.298067 0.776115 0.322484);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.298067 0.776115 0.322484)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Red</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #ff2e3f;">
-                #ff2e3f
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 1.000000 0.250216 0.262337);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 1.000000 0.250216 0.262337)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Purple</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #c635e4;">
-                #c635e4
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.770871 0.230698 0.945253);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.770871 0.230698 0.945253)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Pink</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #fc2b73;">
-                #fc2b73
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.995522 0.233444 0.460772);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.995522 0.233444 0.460772)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Orange</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #fe8c2c;">
-                #fe8c2c
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 1.000000 0.598672 0.265916);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 1.000000 0.598672 0.265916)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Cyan</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #08c0ef;">
-                #08c0ef
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.327292 0.790977 0.995660);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.327292 0.790977 0.995660)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Teal</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #00c5d2;">
-                #00c5d2
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.342284 0.816699 0.877157);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.342284 0.816699 0.877157)</div>
-        </div>
-    </div>
-
-    <div class="info">
-        <h3>Browser Support</h3>
-        <p>CSS <code>color(display-p3 ...)</code> is supported in:</p>
-        <ul>
-            <li>Safari 10+ (macOS and iOS)</li>
-            <li>Chrome 111+</li>
-            <li>Firefox 113+</li>
-            <li>Edge 111+</li>
-        </ul>
-        <p>Browsers without P3 support will automatically fall back to the closest sRGB color.</p>
-    </div>
-
-    <script>
-        // Check for P3 support
-        const supportsP3 = window.matchMedia('(color-gamut: p3)').matches;
-        const statusEl = document.getElementById('p3-status');
-
-        if (supportsP3) {
-            statusEl.innerHTML = '<span class="supports">✓</span> Your display supports Display P3! You should see more vibrant colors in the P3 swatches above. Compare the top and bottom colors in each card.';
-            statusEl.style.borderLeft = '4px solid color(display-p3 0.340 0.734 0.360)';
-        } else {
-            statusEl.innerHTML = '<span class="no-support">✗</span> Your display does not support Display P3, or your browser doesn\'t support the color(display-p3) syntax. The P3 colors will appear similar to the standard sRGB colors.';
-            statusEl.style.borderLeft = '4px solid #ff6762';
-        }
-    </script>
-</body>
-</html>