Address major concerns from v0.1.0 release

extension.toml

@@ -1,6 +1,6 @@
 id = "github-theme"
 name = "Github Theme"
-version = "0.1.0"
+version = "0.1.1"
 schema_version = 1
 authors = ["Pyae Sone Aung <pyaesoneaungrgn@gmail.com>", "Clay Tercek"]
 description = "GitHub themes for Zed"

src/theme.js

@@ -18,8 +18,44 @@ export function getTheme({ themeKey, name, type }) {
     return themeKey.startsWith('light') ? tokens[lightTokenName] : tokens[darkTokenName]
   }
 
+
+  /**
+   * @param {string} tokenName
+   * @param {number} alphaValue
+   */
+  const alpha = (tokenName, alphaValue) => {
+    const baseToken = tokens[tokenName];
+    if (!baseToken) {
+      console.warn(`Token '${tokenName}' not found in theme '${themeKey}'`)
+      return null;
+    }
+
+    const hexAlpha = Math.round(alphaValue * 255).toString(16).padStart(2, '0');
+
+    // Remove the '#' if present
+    let color = baseToken.replace('#', '');
+
+    // If it's already an 8-digit HEXA, replace the last two characters
+    if (color.length === 8) {
+      color = color.slice(0, 6) + hexAlpha;
+    }
+    // If it's a 6-digit HEX, append the new alpha
+    else if (color.length === 6) {
+      color += hexAlpha;
+    }
+    // If it's a 3-digit HEX, expand it and append the new alpha
+    else if (color.length === 3) {
+      color = color.split('').map(char => char + char).join('') + hexAlpha;
+    }
+    else {
+      console.warn(`Invalid color format for token '${tokenName}': ${baseToken}`);
+      return baseToken;
+    }
+
+    return '#' + color;
+  }
+
   return {
-    "$schema": "https://zed.dev/schema/themes/v0.1.0.json",
     appearance: type,
     name,
     style: {
@@ -50,8 +86,8 @@ export function getTheme({ themeKey, name, type }) {
       "editor.active_line_number": tokens['fgColor/default'],
       "editor.active_wrap_guide": tokens['borderColor/muted'],
       "editor.background": tokens['bgColor/default'],
-      "editor.document_highlight.read_background": tokens['bgColor/accent-muted'],
-      "editor.document_highlight.write_background": tokens['bgColor/accent-emphasis'],
+      "editor.document_highlight.read_background": alpha("fgColor/accent", 0.3),
+      "editor.document_highlight.write_background": alpha("fgColor/accent", 0.2),
       "editor.foreground": tokens['fgColor/default'],
       "editor.gutter.background": tokens['bgColor/default'],
       "editor.highlighted_line.background": tokens['bgColor/neutral-muted'],
@@ -78,6 +114,10 @@ export function getTheme({ themeKey, name, type }) {
       "ghost_element.hover": tokens['bgColor/default'],
       "ghost_element.selected": tokens['bgColor/neutral-muted'],
 
+      "hidden": tokens['fgColor/disabled'],
+      "hidden.background": tokens['bgColor/disabled'],
+      "hidden.border": tokens['borderColor/disabled'],
+
       "hint": tokens['fgColor/muted'],
       "hint.background": tokens['bgColor/muted'],
       "hint.border": tokens['borderColor/muted'],
@@ -90,7 +130,7 @@ export function getTheme({ themeKey, name, type }) {
       "icon.disabled": tokens['fgColor/disabled'],
       "icon.placeholder": tokens['fgColor/fgColor/placeholder'],
 
-      "ignored": tokens['fgColor/disabled'],
+      "ignored": tokens['fgColor/muted'],
       "ignored.background": tokens['bgColor/disabled'],
       "ignored.border": tokens['borderColor/disabled'],
 
@@ -122,7 +162,7 @@ export function getTheme({ themeKey, name, type }) {
       "scrollbar.track.border": tokens['borderColor/transparent'],
       "scrollbar_thumb.background": tokens['bgColor/neutal-muted'],
 
-      "search.match_background": tokens['bgColor/attention-muted'],
+      "search.match_background": alpha("base/color/yellow/1", 0.3),
 
       "status_bar.background": tokens['bgColor/inset'],
 
@@ -163,13 +203,13 @@ export function getTheme({ themeKey, name, type }) {
 
       "terminal.background": tokens['bgColor/inset'],
       "terminal.bright_foreground": tokens['fgColor/onEmphasis'],
-      "terminal.dim_foreground": tokens['fgColor/default'],
-      "terminal.foreground": tokens['fgColor/muted'],
+      "terminal.dim_foreground": tokens['fgColor/muted'],
+      "terminal.foreground": tokens['fgColor/default'],
 
       "text": tokens['fgColor/default'],
       "text.accent": tokens['fgColor/accent'],
       "text.disabled": tokens['fgColor/disabled'],
-      "text.muted": tokens['fgColor/muted'],
+      "text.muted": tokens['fgColor/default'],
       "text.placeholder": tokens['fgColor/placeholder'],
 
       "title_bar.background": tokens['bgColor/inset'],
@@ -194,9 +234,9 @@ export function getTheme({ themeKey, name, type }) {
           "teal",
           "red"
         ].map(color => ({
-          "cursor": tokens[`data/${color}/color`],
-          "background": tokens[`data/${color}/color/muted`],
-          "border": tokens[`data/${color}/color/muted`]
+          "cursor": tokens[`data/${color}/color/emphasis`],
+          "background": tokens[`data/${color}/color/emphasis`],
+          "selection": alpha(`data/${color}/color/emphasis`, 0.4)
         })),
 
       "syntax": {
@@ -266,7 +306,7 @@ export function getTheme({ themeKey, name, type }) {
           "font_weight": null
         },
         "hint": {
-          "color": "fgColor/muted",
+          "color": tokens["fgColor/muted"],
           "font_style": null,
           "font_weight": 700
         },
@@ -296,12 +336,12 @@ export function getTheme({ themeKey, name, type }) {
           "font_weight": null
         },
         "operator": {
-          "color": "fgColor/default",
+          "color": tokens["fgColor/default"],
           "font_style": null,
           "font_weight": null
         },
         "predictive": {
-          "color": "fgColor/placeholder",
+          "color": tokens["fgColor/placeholder"],
           "font_style": "italic",
           "font_weight": null
         },
@@ -311,7 +351,7 @@ export function getTheme({ themeKey, name, type }) {
           "font_weight": null
         },
         "primary": {
-          "color": "fgColor/default",
+          "color": tokens["fgColor/default"],
           "font_style": null,
           "font_weight": null
         },
@@ -321,17 +361,17 @@ export function getTheme({ themeKey, name, type }) {
           "font_weight": null
         },
         "punctuation": {
-          "color": "fgColor/default",
+          "color": tokens["fgColor/default"],
           "font_style": null,
           "font_weight": null
         },
         "punctuation.bracket": {
-          "color": "fgColor/default",
+          "color": tokens["fgColor/default"],
           "font_style": null,
           "font_weight": null
         },
         "punctuation.delimiter": {
-          "color": "fgColor/default",
+          "color": tokens["fgColor/default"],
           "font_style": null,
           "font_weight": null
         },
@@ -352,8 +392,8 @@ export function getTheme({ themeKey, name, type }) {
         },
         "string.escape": {
           "color": lightDark("base/color/green/6", "base/color/green/1"),
-          "font_style": "bold",
-          "font_weight": null
+          "font_style": null,
+          "font_weight": 700
         },
         "string.regex": {
           "color": lightDark("base/color/blue/8", "base/color/blue/1"),
@@ -391,7 +431,7 @@ export function getTheme({ themeKey, name, type }) {
           "font_weight": null
         },
         "variable": {
-          "color": lightDark("base/color/orange/6", "base/color/orange/2"),
+          "color": tokens["fgColor/default"],
           "font_style": null,
           "font_weight": null
         },
@@ -408,4 +448,4 @@ export function getTheme({ themeKey, name, type }) {
       }
     }
   }
-}
+}