Migrate to @primer/primitives v11.3.2 + breaking changes analysis

.github/workflows/diff.yml

@@ -9,12 +9,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v6
 
       - name: Set up node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 22
 
       - name: Create comment (if necessary)
         uses: actions/github-script@v5
@@ -43,18 +43,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v6
 
       - name: Checkout base branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v6
         with:
           ref: ${{ github.base_ref }}
           path: base
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 22
 
       - name: Install dependencies
         run: yarn

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0

BREAKING_CHANGES_ANALYSIS.md

@@ -0,0 +1,137 @@
+# Breaking Changes Analysis: Direct @primer/primitives v11 Usage
+
+## Overview
+
+This document compares the current backward-compatible approach vs. a simplified breaking-change approach for migrating to @primer/primitives v11.3.2.
+
+## Current Approach (Backward Compatible)
+
+### src/colors.js: 341 lines
+- Imports @primer/primitives v11 themes
+- **Transform function (~260 lines)**: Converts flat v11 structure to nested v7 structure
+- Complex switch statements mapping:
+  - `fgColor-default` → `fg.default`
+  - `bgColor-accent-emphasis` → `accent.emphasis`
+  - `display-blue-scale-6` → `scale.blue[6]`
+  - `button-primary-bgColor-rest` → `btn.primary.bg`
+  - etc.
+
+### src/theme.js: Unchanged
+- Uses nested structure: `color.fg.default`, `color.accent.emphasis`, `scale.blue[6]`
+- ~200+ color references unchanged
+- No migration needed
+
+### Pros
+✅ No breaking changes for theme.js
+✅ Maintains v7 naming conventions
+✅ Easier migration path
+
+### Cons
+❌ 260+ lines of transformation code
+❌ Harder to maintain
+❌ Indirection makes debugging harder
+❌ Not using primitives structure directly
+
+## Proposed Approach (Breaking Changes - Major Version)
+
+### src/colors.js: 80 lines (~77% reduction)
+```javascript
+function getColors(theme) {
+  switch(theme) {
+    case "light": return lightColors;
+    case "dark": return darkColors;
+    // ... simple mapping, no transformation
+  }
+}
+
+function getColor(colors, key) {
+  return colors[key]?.value || '';
+}
+
+function getScaleColor(colors, colorName, index) {
+  return colors[`display-${colorName}-scale-${index}`]?.value || '';
+}
+```
+
+### src/theme.js: Requires updates
+Update ~200+ color references:
+- **Before**: `color.fg.default`
+- **After**: `c('fgColor-default')`
+
+- **Before**: `color.accent.emphasis`
+- **After**: `c('bgColor-accent-emphasis')`
+
+- **Before**: `scale.blue[6]`
+- **After**: `scale('blue', 6)`
+
+- **Before**: `color.btn.primary.bg`
+- **After**: `c('button-primary-bgColor-rest')`
+
+### Pros
+✅ **261 fewer lines of code** (~77% reduction in colors.js)
+✅ Simpler, cleaner codebase
+✅ Direct use of @primer/primitives structure
+✅ Easier to update when primitives change
+✅ No complex transformation logic
+✅ Better aligned with Primer design system
+
+### Cons
+❌ Breaking change in how colors are accessed
+❌ Need to update ~200+ color references in theme.js
+❌ Longer key names (more verbose)
+❌ One-time migration effort
+
+## Migration Mapping Guide
+
+| Old (v7 nested) | New (v11 flat) |
+|-----------------|----------------|
+| `color.fg.default` | `c('fgColor-default')` |
+| `color.fg.muted` | `c('fgColor-muted')` |
+| `color.fg.subtle` | `c('fgColor-subtle')` |
+| `color.fg.onEmphasis` | `c('fgColor-onEmphasis')` |
+| `color.accent.fg` | `c('fgColor-accent')` |
+| `color.accent.emphasis` | `c('bgColor-accent-emphasis')` |
+| `color.accent.muted` | `c('bgColor-accent-muted')` |
+| `color.danger.fg` | `c('fgColor-danger')` |
+| `color.danger.emphasis` | `c('bgColor-danger-emphasis')` |
+| `color.canvas.default` | `c('bgColor-default')` |
+| `color.canvas.overlay` | `c('bgColor-overlay')` |
+| `color.canvas.inset` | `c('bgColor-inset')` |
+| `color.border.default` | `c('borderColor-default')` |
+| `color.border.muted` | `c('borderColor-muted')` |
+| `color.btn.primary.bg` | `c('button-primary-bgColor-rest')` |
+| `color.btn.primary.hoverBg` | `c('button-primary-bgColor-hover')` |
+| `color.btn.primary.text` | `c('button-primary-fgColor-rest')` |
+| `color.ansi.black` | `c('color-ansi-black')` |
+| `scale.blue[6]` | `scale('blue', 6)` |
+| `scale.gray[4]` | `scale('gray', 4)` |
+
+## Recommendation
+
+**For a major version bump (v7.0.0)**: Use the simplified approach
+
+### Reasoning:
+1. **Simpler codebase**: 261 fewer lines to maintain
+2. **Direct alignment**: Uses @primer/primitives structure as-is
+3. **Future-proof**: Easier to update when primitives evolve
+4. **Clean break**: Major version allows breaking changes
+5. **One-time cost**: Migration effort is one-time, maintenance savings are ongoing
+
+### Migration Steps:
+1. Replace `src/colors.js` with simplified 80-line version
+2. Update `src/theme.js` helper functions to use new accessors
+3. Update all ~200 color references in theme.js
+4. Test all 16 themes
+5. Update documentation
+6. Bump to v7.0.0
+
+## Code Size Comparison
+
+| File | Current Lines | Simplified Lines | Reduction |
+|------|--------------|------------------|-----------|
+| src/colors.js | 341 | 80 | 261 lines (77%) |
+| **Total savings** | | | **~260 lines** |
+
+## Conclusion
+
+The breaking-change approach is **significantly simpler** and **better aligned** with the Primer design system. Since this is already a major version bump, embracing the breaking changes results in a cleaner, more maintainable codebase.

README.md

@@ -8,12 +8,19 @@
 2. Click on the "Install" button.
 3. Then [select a theme](https://code.visualstudio.com/docs/getstarted/themes#_selecting-the-color-theme). The GitHub themes try to match the themes available in [github.com's settings](https://github.com/settings/appearance):
     - `GitHub Light Default`
-    - `GitHub Light High Contrast` ✨ new ✨
-    - `GitHub Light Colorblind` ✨ new ✨
+    - `GitHub Light High Contrast`
+    - `GitHub Light Colorblind (Beta)`
+    - `GitHub Light Colorblind High Contrast (Beta)` ✨ new ✨
+    - `GitHub Light Tritanopia (Beta)` ✨ new ✨
+    - `GitHub Light Tritanopia High Contrast (Beta)` ✨ new ✨
     - `GitHub Dark Default`
     - `GitHub Dark High Contrast`
-    - `GitHub Dark Colorblind` ✨ new ✨
+    - `GitHub Dark Colorblind (Beta)`
+    - `GitHub Dark Colorblind High Contrast (Beta)` ✨ new ✨
+    - `GitHub Dark Tritanopia (Beta)` ✨ new ✨
+    - `GitHub Dark Tritanopia High Contrast (Beta)` ✨ new ✨
     - `GitHub Dark Dimmed`
+    - `GitHub Dark Dimmed High Contrast` ✨ new ✨
 
 Additionally, there are also two older themes. **Note**: They might not get updated frequently and are kept for legacy reasons:
 

package.json

@@ -18,7 +18,7 @@
     "url": "https://github.com/primer/github-vscode-theme/issues"
   },
   "engines": {
-    "vscode": "^1.43.0"
+    "vscode": "^1.108.1"
   },
   "categories": [
     "Themes"
@@ -48,6 +48,21 @@
         "uiTheme": "vs",
         "path": "./themes/light-colorblind.json"
       },
+      {
+        "label": "GitHub Light Colorblind High Contrast (Beta)",
+        "uiTheme": "hc-light",
+        "path": "./themes/light-colorblind-high-contrast.json"
+      },
+      {
+        "label": "GitHub Light Tritanopia (Beta)",
+        "uiTheme": "vs",
+        "path": "./themes/light-tritanopia.json"
+      },
+      {
+        "label": "GitHub Light Tritanopia High Contrast (Beta)",
+        "uiTheme": "hc-light",
+        "path": "./themes/light-tritanopia-high-contrast.json"
+      },
       {
         "label": "GitHub Dark Default",
         "uiTheme": "vs-dark",
@@ -63,11 +78,31 @@
         "uiTheme": "vs-dark",
         "path": "./themes/dark-colorblind.json"
       },
+      {
+        "label": "GitHub Dark Colorblind High Contrast (Beta)",
+        "uiTheme": "hc-black",
+        "path": "./themes/dark-colorblind-high-contrast.json"
+      },
+      {
+        "label": "GitHub Dark Tritanopia (Beta)",
+        "uiTheme": "vs-dark",
+        "path": "./themes/dark-tritanopia.json"
+      },
+      {
+        "label": "GitHub Dark Tritanopia High Contrast (Beta)",
+        "uiTheme": "hc-black",
+        "path": "./themes/dark-tritanopia-high-contrast.json"
+      },
       {
         "label": "GitHub Dark Dimmed",
         "uiTheme": "vs-dark",
         "path": "./themes/dark-dimmed.json"
       },
+      {
+        "label": "GitHub Dark Dimmed High Contrast",
+        "uiTheme": "hc-black",
+        "path": "./themes/dark-dimmed-high-contrast.json"
+      },
       {
         "label": "GitHub Light",
         "uiTheme": "vs",
@@ -83,11 +118,11 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.1",
     "@changesets/cli": "^2.17.0",
-    "@primer/primitives": "7.10.0",
+    "@primer/primitives": "11.3.2",
+    "@vscode/vsce": "^3.7.1",
     "chroma-js": "^2.1.2",
     "color": "^3.1.2",
-    "nodemon": "^2.0.3",
-    "vsce": "^1.100.1"
+    "nodemon": "^3.1.11"
   },
   "scripts": {
     "start": "nodemon --watch src src/index.js",

src/colors-simple.js

@@ -0,0 +1,80 @@
+const lightColors = require("@primer/primitives/dist/docs/functional/themes/light.json");
+const lightHighContrastColors = require("@primer/primitives/dist/docs/functional/themes/light-high-contrast.json");
+const lightColorblindColors = require("@primer/primitives/dist/docs/functional/themes/light-colorblind.json");
+const lightColorblindHighContrastColors = require("@primer/primitives/dist/docs/functional/themes/light-colorblind-high-contrast.json");
+const lightTritanopiaColors = require("@primer/primitives/dist/docs/functional/themes/light-tritanopia.json");
+const lightTritanopiaHighContrastColors = require("@primer/primitives/dist/docs/functional/themes/light-tritanopia-high-contrast.json");
+const darkColors = require("@primer/primitives/dist/docs/functional/themes/dark.json");
+const darkHighContrastColors = require("@primer/primitives/dist/docs/functional/themes/dark-high-contrast.json");
+const darkColorblindColors = require("@primer/primitives/dist/docs/functional/themes/dark-colorblind.json");
+const darkColorblindHighContrastColors = require("@primer/primitives/dist/docs/functional/themes/dark-colorblind-high-contrast.json");
+const darkTritanopiaColors = require("@primer/primitives/dist/docs/functional/themes/dark-tritanopia.json");
+const darkTritanopiaHighContrastColors = require("@primer/primitives/dist/docs/functional/themes/dark-tritanopia-high-contrast.json");
+const dimmedColors = require("@primer/primitives/dist/docs/functional/themes/dark-dimmed.json");
+const dimmedHighContrastColors = require("@primer/primitives/dist/docs/functional/themes/dark-dimmed-high-contrast.json");
+
+/**
+ * Get color primitives for a given theme
+ * Returns the raw @primer/primitives v11 structure (flat keys with .value property)
+ */
+function getColors(theme) {
+  switch(theme) {
+    case "light":
+      return lightColors;
+    case "light_high_contrast":
+      return lightHighContrastColors;
+    case "light_colorblind":
+      return lightColorblindColors;
+    case "light_colorblind_high_contrast":
+      return lightColorblindHighContrastColors;
+    case "light_tritanopia":
+      return lightTritanopiaColors;
+    case "light_tritanopia_high_contrast":
+      return lightTritanopiaHighContrastColors;
+    case "dark":
+      return darkColors;
+    case "dark_high_contrast":
+      return darkHighContrastColors;
+    case "dark_colorblind":
+      return darkColorblindColors;
+    case "dark_colorblind_high_contrast":
+      return darkColorblindHighContrastColors;
+    case "dark_tritanopia":
+      return darkTritanopiaColors;
+    case "dark_tritanopia_high_contrast":
+      return darkTritanopiaHighContrastColors;
+    case "dark_dimmed":
+      return dimmedColors;
+    case "dark_dimmed_high_contrast":
+      return dimmedHighContrastColors;
+    default:
+      throw new Error(`Colors are missing for value: ${theme}`);
+  }
+}
+
+/**
+ * Helper to get a color value from primitives
+ * @param {Object} colors - The primitives object
+ * @param {string} key - The color key (e.g., 'fgColor-default')
+ * @returns {string} The hex color value
+ */
+function getColor(colors, key) {
+  return colors[key]?.value || '';
+}
+
+/**
+ * Helper to get scale color (e.g., blue[6])
+ * @param {Object} colors - The primitives object
+ * @param {string} colorName - The color name (e.g., 'blue')
+ * @param {number} index - The scale index (0-9)
+ * @returns {string} The hex color value
+ */
+function getScaleColor(colors, colorName, index) {
+  return colors[`display-${colorName}-scale-${index}`]?.value || '';
+}
+
+module.exports = {
+  getColors,
+  getColor,
+  getScaleColor,
+};