Merge pull request #25 from code-hike/from-css

Themes with CSS custom properties

Author: pomber

.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.cjs.js

@@ -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;
 };