Themes with CSS custom properties

.changeset/purple-years-scream.md

@@ -0,0 +1,5 @@
+---
+"@code-hike/lighter": patch
+---
+
+Support css variables

lib/dist/browser.esm.mjs

@@ -87,7 +87,7 @@ function transparent(color, opacity) {
 }
 
 function getThemeColors(theme) {
-    return Object.assign({ colorScheme: theme.type }, getColors(theme));
+    return Object.assign({ colorScheme: theme.type === "from-css" ? "var(--ch-0)" : theme.type }, getColors(theme));
 }
 const colorNamesToKeys = {
     background: "editor.background",
@@ -231,7 +231,7 @@ async function preloadTheme(theme) {
     if (typeof theme === "string") {
         const name = theme;
         if (!THEME_NAMES.includes(name)) {
-            throw new UnknownThemeError$1(name);
+            throw new UnknownThemeError(name);
         }
         if (!promiseCache.has(name)) {
             const promise = reallyLoadThemeByName(name).then((theme) => {
@@ -269,7 +269,7 @@ function toFinalTheme(theme) {
     if (!theme) {
         return undefined;
     }
-    const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {} });
+    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 });
     const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
     if (globalSetting) {
         const { foreground, background } = globalSetting.settings || {};
@@ -295,10 +295,37 @@ function toFinalTheme(theme) {
             ...finalTheme.settings,
         ];
     }
+    if (theme.type === "from-css" && !finalTheme.colorNames) {
+        const colorNames = {};
+        let counter = 0;
+        finalTheme.settings = finalTheme.settings.map((s) => {
+            const setting = Object.assign(Object.assign({}, s), { settings: Object.assign({}, s.settings) });
+            const { foreground, background } = setting.settings || {};
+            if (foreground && !colorNames[foreground]) {
+                colorNames[foreground] = `#${counter.toString(16).padStart(6, "0")}`;
+                counter++;
+            }
+            if (background && !colorNames[background]) {
+                colorNames[background] = `#${counter.toString(16).padStart(6, "0")}`;
+                counter++;
+            }
+            if (foreground) {
+                setting.settings.foreground = colorNames[foreground];
+            }
+            if (background) {
+                setting.settings.background = colorNames[background];
+            }
+            return setting;
+        });
+        finalTheme.colorNames = colorNames;
+    }
     return finalTheme;
 }
 function getColorScheme(theme) {
     var _a;
+    if (theme.type === "from-css") {
+        return "from-css";
+    }
     const themeType = theme.type
         ? theme.type
         : ((_a = theme.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes("light"))
@@ -317,10 +344,12 @@ const THEME_NAMES = [
     "dracula",
     "github-dark",
     "github-dark-dimmed",
+    "github-from-css",
     "github-light",
     "light-plus",
     "material-darker",
     "material-default",
+    "material-from-css",
     "material-lighter",
     "material-ocean",
     "material-palenight",
@@ -335,7 +364,7 @@ const THEME_NAMES = [
     "solarized-dark",
     "solarized-light",
 ];
-class UnknownThemeError$1 extends Error {
+class UnknownThemeError extends Error {
     constructor(theme) {
         super(`Unknown theme: ${theme}`);
         this.theme = theme;
@@ -2582,9 +2611,18 @@ class UnknownLanguageError extends Error {
 }
 function highlightTokens(code, grammar, theme) {
     registry.setTheme(theme);
-    const colorMap = registry.getColorMap();
+    const colorMap = getColorMap(theme);
     return tokenize(code, grammar, colorMap);
 }
+function getColorMap(theme) {
+    const colorMap = registry.getColorMap();
+    if (!theme.colorNames)
+        return colorMap;
+    return colorMap.map((c) => {
+        const key = Object.keys(theme.colorNames).find((key) => theme.colorNames[key].toUpperCase() === c.toUpperCase());
+        return key || c;
+    });
+}
 function highlightTokensWithScopes(code, grammar, theme) {
     registry.setTheme(theme);
     const colorMap = registry.getColorMap();
@@ -3054,12 +3092,6 @@ function splitAnnotations(annotations) {
     };
 }
 
-class UnknownThemeError extends Error {
-    constructor(theme) {
-        super(`Unknown theme: ${theme}`);
-        this.theme = theme;
-    }
-}
 function isAnnotatedConfig(config) {
     return "annotations" in config;
 }

lib/dist/index.d.ts

@@ -18,16 +18,23 @@ type ThemeSetting = {
 };
 type FinalTheme = {
     name: string;
-    type: "dark" | "light";
+    type: "dark" | "light" | "from-css";
     settings: ThemeSetting[];
     colors: {
         [key: string]: string;
     };
+    colorNames?: {
+        [key: string]: string;
+    };
 };
-declare const THEME_NAMES: readonly ["dark-plus", "dracula-soft", "dracula", "github-dark", "github-dark-dimmed", "github-light", "light-plus", "material-darker", "material-default", "material-lighter", "material-ocean", "material-palenight", "min-dark", "min-light", "monokai", "nord", "one-dark-pro", "poimandres", "slack-dark", "slack-ochin", "solarized-dark", "solarized-light"];
+declare const THEME_NAMES: readonly ["dark-plus", "dracula-soft", "dracula", "github-dark", "github-dark-dimmed", "github-from-css", "github-light", "light-plus", "material-darker", "material-default", "material-from-css", "material-lighter", "material-ocean", "material-palenight", "min-dark", "min-light", "monokai", "nord", "one-dark-pro", "poimandres", "slack-dark", "slack-ochin", "solarized-dark", "solarized-light"];
 type NamesTuple$1 = typeof THEME_NAMES;
 type StringTheme = NamesTuple$1[number];
 type Theme = StringTheme | RawTheme;
+declare class UnknownThemeError extends Error {
+    theme: string;
+    constructor(theme: string);
+}
 
 declare const LANG_NAMES: string[];
 type NamesTuple = typeof LANG_NAMES;
@@ -64,7 +71,7 @@ declare function getThemeColors(theme: FinalTheme): {
     activeTabTopBorder: string;
     hoverTabBackground: string;
     hoverTabForeground: string;
-    colorScheme: "dark" | "light";
+    colorScheme: string;
 };
 
 type LineNumber = number;
@@ -122,10 +129,6 @@ declare class UnknownLanguageError extends Error {
     constructor(alias: string);
 }
 
-declare class UnknownThemeError extends Error {
-    theme: string;
-    constructor(theme: string);
-}
 type Config = {
     scopes?: boolean;
 };