Skip to content

Commit 97f0b67

Browse files
pomberpomber
authored
Merge pull request #27 from code-hike/theme-colors-api
Extract theme colors to `getThemeColors`
2 parents 8b97837 + cbfa216 commit 97f0b67

23 files changed

+1161
-1540
lines changed

‎.changeset/eleven-countries-cheer.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@code-hike/lighter": minor
3+
---
4+
5+
Extract theme colors to a different function
6+
7+
Breaking Changes:
8+
9+
- `highlightWithScopes` removed, use `highlight` instead
10+
- `annotatedHighlight` removed, use `highlight` instead
11+
- `colors` removed from `highlight` result, now `style` is returned instead (only with `style.background` and `style.color` properties, the rest of the colors are returned by `getThemeColors` function)

‎lib/dist/browser.esm.mjs

+145-88
Original file line numberDiff line numberDiff line change
@@ -86,52 +86,18 @@ function transparent(color, opacity) {
8686
return objectToHex({ r, g, b, a: a * opacity });
8787
}
8888

89-
function getThemeColors(theme) {
90-
return Object.assign({ colorScheme: theme.type === "from-css" ? "var(--ch-0)" : theme.type }, getColors(theme));
91-
}
92-
const colorNamesToKeys = {
93-
background: "editor.background",
94-
foreground: "editor.foreground",
95-
lineNumberForeground: "editorLineNumber.foreground",
96-
selectionBackground: "editor.selectionBackground",
97-
editorBackground: "editor.background",
98-
editorGroupHeaderBackground: "editorGroupHeader.tabsBackground",
99-
activeTabBackground: "tab.activeBackground",
100-
activeTabForeground: "tab.activeForeground",
101-
tabBorder: "tab.border",
102-
activeTabBorder: "tab.activeBorder",
103-
inactiveTabBackground: "tab.inactiveBackground",
104-
inactiveTabForeground: "tab.inactiveForeground",
105-
diffInsertedTextBackground: "diffEditor.insertedTextBackground",
106-
diffInsertedLineBackground: "diffEditor.insertedLineBackground",
107-
diffRemovedTextBackground: "diffEditor.removedTextBackground",
108-
diffRemovedLineBackground: "diffEditor.removedLineBackground",
109-
iconForeground: "icon.foreground",
110-
sideBarBackground: "sideBar.background",
111-
sideBarForeground: "sideBar.foreground",
112-
sideBarBorder: "sideBar.border",
113-
listSelectionBackground: "list.inactiveSelectionBackground",
114-
listSelectionForeground: "list.inactiveSelectionForeground",
115-
listHoverBackground: "list.hoverBackground",
116-
listHoverForeground: "list.hoverForeground",
117-
tabsBorder: "editorGroupHeader.tabsBorder",
118-
activeTabTopBorder: "tab.activeBorderTop",
119-
hoverTabBackground: "tab.hoverBackground",
120-
hoverTabForeground: "tab.hoverForeground",
121-
};
122-
function getColors(theme) {
123-
const colors = {};
124-
for (const key in colorNamesToKeys) {
125-
colors[key] = getColor(theme, colorNamesToKeys[key]);
126-
}
127-
return colors;
89+
function getColorScheme(theme) {
90+
return theme.type === "from-css" ? "var(--ch-0)" : theme.type;
12891
}
12992
function getColor(theme, name) {
13093
const colors = theme.colors || {};
13194
if (colors[name]) {
13295
return colors[name];
13396
}
13497
const defaultColors = defaults[name];
98+
if (!defaultColors) {
99+
throw new Error(`Unknown theme color key: ${name}`);
100+
}
135101
if (typeof defaultColors === "string") {
136102
return getColor(theme, defaultColors);
137103
}
@@ -152,11 +118,7 @@ function getDefault(theme, defaults) {
152118
// keys from : https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs
153119
const contrastBorder = "#6FC3DF";
154120
const defaults = {
155-
"editor.foreground": {
156-
dark: "#bbbbbb",
157-
light: "#333333",
158-
hc: "#ffffff",
159-
},
121+
"editor.foreground": { dark: "#bbbbbb", light: "#333333", hc: "#ffffff" },
160122
"editorLineNumber.foreground": {
161123
dark: "#858585",
162124
light: "#237893",
@@ -167,25 +129,13 @@ const defaults = {
167129
dark: "#264F78",
168130
hc: "#f3f518",
169131
},
170-
"editor.background": {
171-
light: "#fffffe",
172-
dark: "#1E1E1E",
173-
hc: "#000000",
174-
},
175-
"editorGroupHeader.tabsBackground": {
176-
dark: "#252526",
177-
light: "#F3F3F3",
178-
hc: undefined,
179-
},
132+
"editor.background": { light: "#fffffe", dark: "#1E1E1E", hc: "#000000" },
133+
"editorGroupHeader.tabsBackground": { dark: "#252526", light: "#F3F3F3" },
180134
"tab.activeBackground": "editor.background",
181135
"tab.activeForeground": { dark: "#ffffff", light: "#333333", hc: "#ffffff" },
182136
"tab.border": { dark: "#252526", light: "#F3F3F3", hc: contrastBorder },
183137
"tab.activeBorder": "tab.activeBackground",
184-
"tab.inactiveBackground": {
185-
dark: "#2D2D2D",
186-
light: "#ECECEC",
187-
hc: undefined,
188-
},
138+
"tab.inactiveBackground": { dark: "#2D2D2D", light: "#ECECEC" },
189139
"tab.inactiveForeground": {
190140
dark: [transparent, "tab.activeForeground", 0.5],
191141
light: [transparent, "tab.activeForeground", 0.5],
@@ -194,35 +144,52 @@ const defaults = {
194144
"diffEditor.insertedTextBackground": {
195145
dark: "#9ccc2c33",
196146
light: "#9ccc2c40",
197-
hc: undefined,
198-
},
199-
"diffEditor.removedTextBackground": {
200-
dark: "#ff000033",
201-
light: "#ff000033",
202-
hc: undefined,
203147
},
148+
"diffEditor.removedTextBackground": { dark: "#ff000033", light: "#ff000033" },
204149
"diffEditor.insertedLineBackground": {
205150
dark: "#9bb95533",
206151
light: "#9bb95533",
207-
hc: undefined,
208-
},
209-
"diffEditor.removedLineBackground": {
210-
dark: "#ff000033",
211-
light: "#ff000033",
212-
hc: undefined,
213152
},
153+
"diffEditor.removedLineBackground": { dark: "#ff000033", light: "#ff000033" },
214154
"icon.foreground": { dark: "#C5C5C5", light: "#424242", hc: "#FFFFFF" },
215155
"sideBar.background": { dark: "#252526", light: "#F3F3F3", hc: "#000000" },
216156
"sideBar.foreground": "editor.foreground",
217157
"sideBar.border": "sideBar.background",
218158
"list.inactiveSelectionBackground": { dark: "#37373D", light: "#E4E6F1" },
219-
"list.inactiveSelectionForeground": { dark: undefined, light: undefined },
159+
"list.inactiveSelectionForeground": {},
220160
"list.hoverBackground": { dark: "#2A2D2E", light: "#F0F0F0" },
221-
"list.hoverForeground": { dark: undefined, light: undefined },
161+
"list.hoverForeground": {},
222162
"editorGroupHeader.tabsBorder": { hc: contrastBorder },
223163
"tab.activeBorderTop": { hc: contrastBorder },
224164
"tab.hoverBackground": "tab.inactiveBackground",
225165
"tab.hoverForeground": "tab.inactiveForeground",
166+
"editor.rangeHighlightBackground": { dark: "#ffffff0b", light: "#fdff0033" },
167+
"editor.infoForeground": { dark: "#3794FF", light: "#1a85ff", hc: "#3794FF" },
168+
"input.border": { hc: contrastBorder },
169+
"input.background": { dark: "#3C3C3C", light: "#fffffe", hc: "#000000" },
170+
"input.foreground": "editor.foreground",
171+
"editor.lineHighlightBackground": {},
172+
focusBorder: { light: "#0090F1", dark: "#007FD4", hc: contrastBorder },
173+
"editorGroup.border": {
174+
dark: "#444444",
175+
light: "#E7E7E7",
176+
hc: contrastBorder,
177+
},
178+
"list.activeSelectionBackground": {
179+
dark: "#094771",
180+
light: "#0060C0",
181+
hc: "#000000",
182+
},
183+
"list.activeSelectionForeground": {
184+
dark: "#fffffe",
185+
light: "#fffffe",
186+
hc: "#fffffe",
187+
},
188+
// this aren't from vscode, they are specific to lighter
189+
"lighter.inlineBackground": {
190+
dark: [transparent, "editor.background", 0.9],
191+
light: [transparent, "editor.background", 0.9],
192+
},
226193
};
227194

228195
const promiseCache = new Map();
@@ -269,10 +236,19 @@ function toFinalTheme(theme) {
269236
if (!theme) {
270237
return undefined;
271238
}
272-
const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {}, colorNames: theme.colorNames });
273-
const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
239+
const settings = theme.settings || theme.tokenColors || [];
240+
const finalTheme = {
241+
name: theme.name || "unknown-theme",
242+
type: getThemeType(theme),
243+
foreground: "",
244+
background: "",
245+
settings,
246+
colors: theme.colors || {},
247+
colorNames: theme.colorNames,
248+
};
249+
const globalSetting = settings.find((s) => !s.scope);
274250
if (globalSetting) {
275-
const { foreground, background } = globalSetting.settings || {};
251+
const { foreground, background } = (globalSetting === null || globalSetting === void 0 ? void 0 : globalSetting.settings) || {};
276252
const newColors = {};
277253
if (foreground && !finalTheme.colors["editor.foreground"]) {
278254
newColors["editor.foreground"] = foreground;
@@ -283,6 +259,8 @@ function toFinalTheme(theme) {
283259
if (Object.keys(newColors).length > 0) {
284260
finalTheme.colors = Object.assign(Object.assign({}, finalTheme.colors), newColors);
285261
}
262+
finalTheme.foreground = foreground;
263+
finalTheme.background = background;
286264
}
287265
if (!globalSetting) {
288266
finalTheme.settings = [
@@ -295,6 +273,10 @@ function toFinalTheme(theme) {
295273
...finalTheme.settings,
296274
];
297275
}
276+
finalTheme.background =
277+
finalTheme.background || getColor(finalTheme, "editor.background");
278+
finalTheme.foreground =
279+
finalTheme.foreground || getColor(finalTheme, "editor.foreground");
298280
if (theme.type === "from-css" && !finalTheme.colorNames) {
299281
const colorNames = {};
300282
let counter = 0;
@@ -321,7 +303,7 @@ function toFinalTheme(theme) {
321303
}
322304
return finalTheme;
323305
}
324-
function getColorScheme(theme) {
306+
function getThemeType(theme) {
325307
var _a;
326308
if (theme.type === "from-css") {
327309
return "from-css";
@@ -369,6 +351,73 @@ class UnknownThemeError extends Error {
369351
super(`Unknown theme: ${theme}`);
370352
this.theme = theme;
371353
}
354+
}
355+
function getAllThemeColors(theme) {
356+
const c = (key) => {
357+
if (key === "colorScheme") {
358+
return getColorScheme(theme);
359+
}
360+
if (key === "foreground") {
361+
return theme.foreground;
362+
}
363+
if (key === "background") {
364+
return theme.background;
365+
}
366+
return getColor(theme, key);
367+
};
368+
return {
369+
colorScheme: c("colorScheme"),
370+
foreground: c("foreground"),
371+
background: c("background"),
372+
lighter: {
373+
inlineBackground: c("lighter.inlineBackground"),
374+
},
375+
editor: {
376+
background: c("editor.background"),
377+
foreground: c("editor.foreground"),
378+
lineHighlightBackground: c("editor.lineHighlightBackground"),
379+
rangeHighlightBackground: c("editor.rangeHighlightBackground"),
380+
infoForeground: c("editor.infoForeground"),
381+
selectionBackground: c("editor.selectionBackground"),
382+
},
383+
focusBorder: c("focusBorder"),
384+
tab: {
385+
activeBackground: c("tab.activeBackground"),
386+
activeForeground: c("tab.activeForeground"),
387+
inactiveBackground: c("tab.inactiveBackground"),
388+
inactiveForeground: c("tab.inactiveForeground"),
389+
border: c("tab.border"),
390+
activeBorder: c("tab.activeBorder"),
391+
},
392+
editorGroup: {
393+
border: c("editorGroup.border"),
394+
},
395+
editorGroupHeader: {
396+
tabsBackground: c("editorGroupHeader.tabsBackground"),
397+
},
398+
editorLineNumber: {
399+
foreground: c("editorLineNumber.foreground"),
400+
},
401+
input: {
402+
background: c("input.background"),
403+
foreground: c("input.foreground"),
404+
border: c("input.border"),
405+
},
406+
icon: {
407+
foreground: c("icon.foreground"),
408+
},
409+
sideBar: {
410+
background: c("sideBar.background"),
411+
foreground: c("sideBar.foreground"),
412+
border: c("sideBar.border"),
413+
},
414+
list: {
415+
activeSelectionBackground: c("list.activeSelectionBackground"),
416+
activeSelectionForeground: c("list.activeSelectionForeground"),
417+
hoverBackground: c("list.hoverBackground"),
418+
hoverForeground: c("list.hoverForeground"),
419+
},
420+
};
372421
}
373422

374423
// generated by lib/utils/3.update-languages-data.mjs
@@ -2723,6 +2772,8 @@ const COMMENT = "#010";
27232772
const commentsTheme = {
27242773
name: "comments",
27252774
type: "light",
2775+
foreground: "",
2776+
background: "",
27262777
colors: {},
27272778
settings: [
27282779
{ settings: { foreground: "#000" } },
@@ -3131,25 +3182,23 @@ function highlightSync(code, lang, themeOrThemeName = "dark-plus", config = {})
31313182
return {
31323183
lines: applyAnnotations(lines, annotations),
31333184
lang: langId,
3134-
colors: getThemeColors(theme),
3185+
style: {
3186+
color: theme.foreground,
3187+
background: theme.background,
3188+
},
31353189
};
31363190
}
31373191
else {
31383192
return {
31393193
lines: lines,
31403194
lang: langId,
3141-
colors: getThemeColors(theme),
3195+
style: {
3196+
color: theme.foreground,
3197+
background: theme.background,
3198+
},
31423199
};
31433200
}
31443201
}
3145-
/** @deprecated use highlight instead */
3146-
async function highlightWithScopes(code, alias, themeOrThemeName = "dark-plus") {
3147-
return highlight(code, alias, themeOrThemeName, { scopes: true });
3148-
}
3149-
/** @deprecated use highlight instead */
3150-
async function annotatedHighlight(code, alias, themeOrThemeName = "dark-plus", annotations = []) {
3151-
return highlight(code, alias, themeOrThemeName, { annotations });
3152-
}
31533202
async function extractAnnotations(code, lang, annotationNames = []) {
31543203
if (annotationNames.length === 0) {
31553204
return { code, annotations: [] };
@@ -3158,6 +3207,14 @@ async function extractAnnotations(code, lang, annotationNames = []) {
31583207
const { grammar } = getGrammar(lang);
31593208
const { newCode, annotations } = extractCommentsFromCode(code, grammar, annotationNames);
31603209
return { code: newCode, annotations };
3210+
}
3211+
async function getThemeColors(themeOrThemeName) {
3212+
if (!themeOrThemeName) {
3213+
throw new Error("Syntax highlighter error: undefined theme");
3214+
}
3215+
await preload([], themeOrThemeName);
3216+
const theme = getTheme(themeOrThemeName);
3217+
return getAllThemeColors(theme);
31613218
}
31623219

3163-
export { LANG_NAMES, THEME_NAMES, UnknownLanguageError, UnknownThemeError, annotatedHighlight, extractAnnotations, highlight, highlightSync, highlightWithScopes, preload };
3220+
export { LANG_NAMES, THEME_NAMES, UnknownLanguageError, UnknownThemeError, extractAnnotations, getThemeColors, highlight, highlightSync, preload };

0 commit comments

Comments
 (0)