Merge pull request #42 from xscriptor/dev

Xscriptor Themes update

Author: xscriptor

ROADMAP.md

@@ -1,18 +1,18 @@
 ## Phase 1 · Repository foundation (already done) <!-- phase:foundation -->
 
-- [/] Consolidate monorepo structure with packages in `extensions/`, `themes/`, and `ui-mods/` (#5)
-- [/] Publish root documentation: `README.md`, `CONTRIBUTING.md`, `SECURITY.md`, `CODE_OF_CONDUCT.md`, `SUPPORT.md`, `CHANGELOG.md` (#6)
-- [/] Normalize package `README.md` files to GitHub-compatible HTML format (#7)
-- [/] Define initial visual identity and previews in `assets/` and theme folders (#8)
-- [/] Keep per-package licensing strategy (`MIT` for tooling and dedicated licenses for themes) (#9)
+- [x] Consolidate monorepo structure with packages in `extensions/`, `themes/`, and `ui-mods/` (#5)
+- [x] Publish root documentation: `README.md`, `CONTRIBUTING.md`, `SECURITY.md`, `CODE_OF_CONDUCT.md`, `SUPPORT.md`, `CHANGELOG.md` (#6)
+- [x] Normalize package `README.md` files to GitHub-compatible HTML format (#7)
+- [x] Define initial visual identity and previews in `assets/` and theme folders (#8)
+- [x] Keep per-package licensing strategy (`MIT` for tooling and dedicated licenses for themes) (#9)
 
 ## Phase 2 · Governance and automation <!-- phase:automation -->
 
-- [ ] Integrate `xgh/github-roadmap-sync` into the main repo flow (`.github/scripts/sync_roadmap.py`) (#10)
-- [ ] Create `roadmap-sync.yml` workflow to sync `ROADMAP.md` with GitHub Issues (#11)
-- [ ] Define phase label convention and create baseline labels on GitHub (#12)
-- [ ] Run local `--dry-run` with authenticated `gh` and validate duplicate prevention (#13)
-- [ ] Document roadmap sync usage in root documentation (#14)
+- [x] Integrate `xgh/github-roadmap-sync` into the main repo flow (`.github/scripts/sync_roadmap.py`) (#10)
+- [x] Create `roadmap-sync.yml` workflow to sync `ROADMAP.md` with GitHub Issues (#11)
+- [x] Define phase label convention and create baseline labels on GitHub (#12)
+- [x] Run local `--dry-run` with authenticated `gh` and validate duplicate prevention (#13)
+- [x] Document roadmap sync usage in root documentation (#14)
 
 ## Phase 3 · Theme quality <!-- phase:themes-quality -->
 
@@ -25,20 +25,20 @@
 
 ## Phase 4 · Versioning and releases <!-- phase:releases -->
 
-- [ ] Define semantic versioning strategy for `xglass`, `x-dark-colors`, and `xscriptor-themes` (#21)
-- [ ] Bump version in `extensions/xglass/package.json` with matching changelog notes (#22)
-- [ ] Bump version in `themes/x-dark-colors/package.json` with matching changelog notes (#23)
-- [ ] Bump version in `themes/xscriptor-themes/package.json` with matching changelog notes (#24)
-- [ ] Standardize release notes per package (highlights, breaking changes, migrations) (#25)
-- [ ] Prepare pipeline/manual process to package `.vsix` for each package (#26)
+- [x] Define semantic versioning strategy for `xglass`, `x-dark-colors`, and `xscriptor-themes` (#21)
+- [x] Bump version in `extensions/xglass/package.json` with matching changelog notes (#22)
+- [x] Bump version in `themes/x-dark-colors/package.json` with matching changelog notes (#23)
+- [x] Bump version in `themes/xscriptor-themes/package.json` with matching changelog notes (#24)
+- [x] Standardize release notes per package (highlights, breaking changes, migrations) (#25)
+- [x] Prepare pipeline/manual process to package `.vsix` for each package (#26)
 
 ## Phase 5 · XGlass functional improvements <!-- phase:xglass-improvements -->
 
-- [ ] Review `xglass.alpha` and `xglass.step` defaults based on real usage feedback (#27)
-- [ ] Add clearer validation and error messages for Linux/X11 environments (#28)
-- [ ] Improve behavior in compositors that ignore opacity (#29)
-- [ ] Review keybindings for potential conflicts with common shortcuts (#30)
-- [ ] Expand platform-specific troubleshooting documentation (#31)
+- [x] Review `xglass.alpha` and `xglass.step` defaults based on real usage feedback (#27)
+- [x] Add clearer validation and error messages for Linux/X11 environments (#28)
+- [x] Improve behavior in compositors that ignore opacity (#29)
+- [x] Review keybindings for potential conflicts with common shortcuts (#30)
+- [x] Expand platform-specific troubleshooting documentation (#31)
 
 ## Phase 6 · UI Mods and UX improvements <!-- phase:ui-mods -->
 

themes/xscriptor-themes/CHANGELOG.md

@@ -8,6 +8,10 @@ All important modifications to this VSCode theme collection will be documented i
 - Tokio theme: Fixed tab bar background color to match tab panel color (#191919 instead of #0a0a0a)
 - Tokio & X themes: Refined tab styling with transparent borders and golden icon colors
 
+### Changed
+- Rebuilt Product Icon Theme from scratch as `x` using a custom SVG set (16x16, filled shapes) with an integrated X marker on every glyph
+- Added local generation pipeline with Node + Fantasticon, plus HTML preview, and replaced previous default product icon theme mapping
+
 ## [1.1.0] - 2026-04-01
 ### Added
 - Enhanced visual hierarchy with bracket pair guides (6 nesting levels) using palette colors

themes/xscriptor-themes/README.md

@@ -66,23 +66,11 @@
 </ol>
 
 <ul>
-  <li><code>Xscriptor Product Icons</code> (glyph variant)</li>
-  <li><code>Xscriptor Product Icons Text (1 Letter)</code></li>
-  <li><code>Xscriptor Product Icons Numbers</code></li>
+  <li><code>x Product Icons</code> (glyph variant)</li>
 </ul>
 
 <pre><code>{
-  "workbench.productIconTheme": "xscriptor-product-icons"
-}
-</code></pre>
-
-<pre><code>{
-  "workbench.productIconTheme": "xscriptor-product-icons-text"
-}
-</code></pre>
-
-<pre><code>{
-  "workbench.productIconTheme": "xscriptor-product-icons-numbers"
+  "workbench.productIconTheme": "x-product-icons"
 }
 </code></pre>
 

themes/xscriptor-themes/docs/product-icon-generation.md

@@ -0,0 +1,85 @@
+<h1>Product Icon Generation Guide</h1>
+
+<p>
+  This document explains how the Xscriptor Themes Product Icon Theme is generated,
+  how the SVG source set is structured, and what to do if you need to rebuild the
+  font and the theme files from scratch.
+</p>
+
+<h2>Menu</h2>
+<ul>
+  <li><a href="#overview">Overview</a></li>
+  <li><a href="#source-model">Source Model</a></li>
+  <li><a href="#build-pipeline">Build Pipeline</a></li>
+  <li><a href="#rebuild-steps">Rebuild Steps</a></li>
+  <li><a href="#output-artifacts">Output Artifacts</a></li>
+  <li><a href="#notes">Notes</a></li>
+</ul>
+
+<h2 id="overview">Overview</h2>
+<p>
+  The repository generates a custom Product Icon Theme from codicon-inspired SVG
+  sources. The build process keeps the icons single-color, converts them into a
+  font, and writes a VS Code Product Icon Theme JSON file that maps each VS Code
+  icon identifier to a glyph in that font.
+</p>
+
+<h2 id="source-model">Source Model</h2>
+<p>
+  The source icons live under <code>icons/product icons/svg-x-min/</code> and
+  <code>icons/product icons/svg-x/</code>. Each SVG is built from the codicon
+  source set and then customized with an X badge overlay. The SVGs are filled
+  shapes, not stroked outlines, so they are compatible with font conversion.
+</p>
+<p>
+  The current repository keeps the compact build as the shipped theme entry. The
+  theme definition in <code>icons/x-min-product-icon-theme.json</code> is the one
+  exposed through the extension manifest as <code>X</code>.
+</p>
+
+<h2 id="build-pipeline">Build Pipeline</h2>
+<p>
+  The generator is implemented in <code>icons/scripts/build-product-icons.mjs</code>.
+  It does the following:
+</p>
+<ol>
+  <li>Reads the codicon source SVG files from <code>@vscode/codicons</code>.</li>
+  <li>Extracts the paths from each SVG and forces filled black geometry.</li>
+  <li>Adds the custom X badge paths on top of the original icon shape.</li>
+  <li>Writes SVG output into variant folders under <code>icons/product icons/</code>.</li>
+  <li>Runs Fantasticon to convert the SVG set into WOFF fonts.</li>
+  <li>Writes the Product Icon Theme JSON file with the generated code points.</li>
+</ol>
+
+<h2 id="rebuild-steps">Rebuild Steps</h2>
+<p><strong>1. Install dependencies</strong></p>
+<pre><code>npm install</code></pre>
+
+<p><strong>2. Regenerate the product icons</strong></p>
+<pre><code>npm run build:product-icons</code></pre>
+
+<p><strong>3. Verify the output</strong></p>
+<p>
+  After the build finishes, confirm that the expected WOFF files and JSON files
+  exist in <code>icons/product icons/fonts/</code> and <code>icons/</code>.
+</p>
+
+<h2 id="output-artifacts">Output Artifacts</h2>
+<ul>
+  <li><code>icons/product icons/fonts/x-min.woff</code>: compact font build.</li>
+  <li><code>icons/x-min-product-icon-theme.json</code>: Product Icon Theme mapped to the compact build.</li>
+  <li><code>icons/product icons/svg-x-min/</code>: compact SVG source set.</li>
+  <li><code>icons/product icons/preview-x-min.html</code>: compact preview page.</li>
+  <li><code>icons/product icons/fonts/x.woff</code>: alternate generated font build.</li>
+  <li><code>icons/x-product-icon-theme.json</code>: alternate Product Icon Theme JSON.</li>
+  <li><code>icons/product icons/svg-x/</code>: alternate SVG source set.</li>
+  <li><code>icons/product icons/preview-x.html</code>: alternate preview page.</li>
+</ul>
+
+<h2 id="notes">Notes</h2>
+<ul>
+  <li>VS Code Product Icon Themes are single-color glyph fonts.</li>
+  <li>Font color is controlled by the active VS Code color theme.</li>
+  <li>If icons appear stale, reload the window after rebuilding the font.</li>
+  <li>If you want to ship a different build as the default, update the Product Icon Theme entry in <code>package.json</code> to point at the desired JSON file.</li>
+</ul>