Skip to content

Commit

Permalink
Merge pull request #13 from claytercek/main
Browse files Browse the repository at this point in the history 
Address major concerns from v0.1.0 release
  • Loading branch information
@PyaeSoneAungRgn
PyaeSoneAungRgn authored Sep 23, 2024
2 parents 1b5eb13 + 2c94508 commit 3f62fd7
Show file tree
Hide file tree
Showing 3 changed files with 450 additions and 329 deletions.
2 changes: 1 addition & 1 deletion extension.toml
View file
Original file line number Diff line number Diff line change
@@ -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 <[email protected]>", "Clay Tercek"]
description = "GitHub themes for Zed"
Expand Down
84 changes: 62 additions & 22 deletions src/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],

Expand Down Expand Up @@ -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'],

Expand Down Expand Up @@ -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'],
Expand All @@ -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": {
Expand Down Expand Up @@ -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
},
Expand Down Expand Up @@ -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
},
Expand All @@ -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
},
Expand All @@ -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
},
Expand All @@ -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"),
Expand Down Expand Up @@ -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
},
Expand All @@ -408,4 +448,4 @@ export function getTheme({ themeKey, name, type }) {
}
}
}
}
}
Loading

0 comments on commit 3f62fd7

Please sign in to comment.