shiki-themes - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

dist/index.d.ts

 import { IShikiTheme } from './loadTheme';
 import { TTheme } from './types';
 export * from './types';
-export declare const materialThemes: string[];
-export declare const niceThemes: string[];
 export declare function getTheme(t: TTheme): IShikiTheme;
 export { loadTheme, IShikiTheme } from './loadTheme';

dist/index.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var fs = require("fs");
+exports.getTheme = void 0;
 var path = require("path");
 var loadTheme_1 = require("./loadTheme");
-var vscThemes = [
-    'abyss',
-    'dark_plus',
-    'dark_vs',
-    'hc_black',
-    'kimbie_dark',
-    'light_plus',
-    'light_vs',
+__exportStar(require("./types"), exports);
+var themes = [
+    'dark-plus',
+    'light-plus',
     'monokai',
-    'monokai_dimmed',
-    'quietlight',
-    'red',
-    'solarized_dark',
-    'solarized_light'
-];
-exports.materialThemes = [
-    'Material-Theme-Darker-High-Contrast',
-    'Material-Theme-Darker',
-    'Material-Theme-Default-High-Contrast',
-    'Material-Theme-Default',
-    'Material-Theme-Lighter-High-Contrast',
-    'Material-Theme-Lighter',
-    'Material-Theme-Ocean-High-Contrast',
-    'Material-Theme-Ocean',
-    'Material-Theme-Palenight-High-Contrast',
-    'Material-Theme-Palenight',
-];
-exports.niceThemes = [
+    'solarized-dark',
+    'solarized-light',
+    'material-theme-darker',
+    'material-theme-default',
+    'material-theme-lighter',
+    'material-theme-ocean',
+    'material-theme-palenight',
+    'github-dark',
+    'github-light',
     'nord',
     'min-light',
-    'min-dark',
-    'white',
-    'white-night',
-    'zeit',
+    'min-dark'
 ];
-function mapF(subdir) {
-    return function (n) {
-        var p = fs.existsSync(path.resolve(__dirname, "../data/" + subdir + "/" + n + ".json"))
-            ? path.resolve(__dirname, "../data/" + subdir + "/" + n + ".json")
-            : path.resolve(__dirname, "../data/" + subdir + "/" + n + ".tmTheme");
-        return loadTheme_1.loadTheme(p);
-    };
+var allThemes = {};
+for (var _i = 0, themes_1 = themes; _i < themes_1.length; _i++) {
+    var theme = themes_1[_i];
+    allThemes[theme] = loadTheme_1.loadTheme(path.resolve(__dirname, '../data', theme + ".json"));
 }
 function getTheme(t) {
-    if (vscThemes.includes(t)) {
-        return mapF('vscode')(t);
+    if (t in allThemes) {
+        return allThemes[t];
     }
-    if (exports.materialThemes.includes(t)) {
-        return mapF('material')(t);
-    }
-    if (exports.niceThemes.includes(t)) {
-        return mapF('nice')(t);
-    }
     throw Error("No theme " + t + " found");
@@ -63,2 +47,3 @@ }
 var loadTheme_2 = require("./loadTheme");
-exports.loadTheme = loadTheme_2.loadTheme;
+Object.defineProperty(exports, "loadTheme", { enumerable: true, get: function () { return loadTheme_2.loadTheme; } });
+//# sourceMappingURL=index.js.map

dist/loadTheme.d.ts

@@ -16,4 +16,8 @@ import { IRawTheme, IRawThemeSetting } from 'vscode-textmate';
     /**
-     * @description text background color
+     * @description text default foreground color
      */
+    fg: string;
+    /**
+     * @description text default background color
+     */
     bg: string;
@@ -20,0 +24,0 @@ /**

dist/loadTheme.js

@@ -14,2 +14,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTheme = void 0;
 var fs = require("fs");
@@ -28,3 +29,3 @@ var path = require("path");
 function toShikiTheme(rawTheme) {
-    var shikiTheme = __assign({}, rawTheme, { bg: getThemeBg(rawTheme) });
+    var shikiTheme = __assign(__assign({}, rawTheme), getThemeDefaultColors(rawTheme));
     if (rawTheme.include) {
@@ -63,11 +64,42 @@ shikiTheme.include = rawTheme.include;
 exports.loadTheme = loadTheme;
-function getThemeBg(theme) {
+/**
+ * https://github.com/microsoft/vscode/blob/f7f05dee53fb33fe023db2e06e30a89d3094488f/src/vs/platform/theme/common/colorRegistry.ts#L258-L268
+ */
+var editorBackground = { light: '#fffffe', dark: '#1E1E1E' };
+var editorForeground = { light: '#333333', dark: '#BBBBBB' };
+function getThemeDefaultColors(theme) {
+    var _a, _b;
+    var fg = editorForeground.dark;
+    var bg = editorBackground.dark;
+    if (theme.type === 'light') {
+        fg = editorForeground.light;
+        bg = editorBackground.light;
+    }
+    /**
+     * Theme might contain a global `tokenColor` without `name` or `scope`
+     * Used as default value for foreground/background
+     */
+    var settings = theme.settings ? theme.settings : theme.tokenColors;
+    var globalSetting = settings
+        ? settings.find(function (s) {
+            return !s.name && !s.scope;
+        })
+        : undefined;
+    if ((_a = globalSetting === null || globalSetting === void 0 ? void 0 : globalSetting.settings) === null || _a === void 0 ? void 0 : _a.foreground) {
+        fg = globalSetting.settings.foreground;
+    }
+    if ((_b = globalSetting === null || globalSetting === void 0 ? void 0 : globalSetting.settings) === null || _b === void 0 ? void 0 : _b.background) {
+        bg = globalSetting.settings.background;
+    }
+    if (theme.colors && theme.colors['editor.foreground']) {
+        fg = theme.colors['editor.foreground'];
+    }
     if (theme.colors && theme.colors['editor.background']) {
-        return theme.colors['editor.background'];
+        bg = theme.colors['editor.background'];
     }
-    var settings = theme.settings ? theme.settings : theme.tokenColors;
-    var globalSetting = settings.find(function (s) {
-        return !s.name && !s.scope;
-    });
-    return globalSetting ? globalSetting.settings.background : null;
+    return {
+        fg: fg,
+        bg: bg
+    };
 }
+//# sourceMappingURL=loadTheme.js.map

dist/plist.js

@@ -6,2 +6,3 @@ /*---------------------------------------------------------
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.parse = exports.parseWithLocation = void 0;
 function parseWithLocation(content, filename, locationKeyName) {
@@ -478,1 +479,2 @@ return _parse(content, filename, locationKeyName);
 }
+//# sourceMappingURL=plist.js.map

dist/types.d.ts

@@ -1,4 +0,4 @@
-export declare type TVSCode = 'abyss' | 'dark_plus' | 'dark_vs' | 'hc_black' | 'kimbie_dark' | 'light_plus' | 'light_vs' | 'monokai' | 'monokai_dimmed' | 'quietlight' | 'red' | 'solarized_dark' | 'solarized_light';
-export declare type TMaterial = 'Material-Theme-Darker-High-Contrast' | 'Material-Theme-Darker' | 'Material-Theme-Default-High-Contrast' | 'Material-Theme-Default' | 'Material-Theme-Lighter-High-Contrast' | 'Material-Theme-Lighter' | 'Material-Theme-Ocean-High-Contrast' | 'Material-Theme-Ocean' | 'Material-Theme-Palenight-High-Contrast' | 'Material-Theme-Palenight';
-export declare type TNice = 'nord' | 'min-light' | 'min-dark' | 'white' | 'white-night' | 'zeit';
+export declare type TVSCode = 'dark-plus' | 'light-plus' | 'monokai' | 'solarized-dark' | 'solarized-light';
+export declare type TMaterial = 'material-theme-darker' | 'material-theme-default' | 'material-theme-lighter' | 'material-theme-ocean' | 'material-theme-palenight';
+export declare type TNice = 'nord' | 'min-light' | 'min-dark';
 export declare type TTheme = TVSCode | TMaterial | TNice;

dist/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package.json

 {
   "name": "shiki-themes",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Themes for shiki",
@@ -21,3 +21,3 @@ "keywords": [
   },
-  "gitHead": "dace29c2bf8cd5fec38814e141ada34d636df1c0"
+  "gitHead": "94df180bb5f893350403913747742d17fb1e9af4"
 }

README.md

@@ -12,4 +12,2 @@ # shiki-themes
 - [min](https://github.com/misolori/min-theme)
-- [white](https://github.com/arthurwhite/white-theme-vscode)
-- [zeit](http://zeit-theme.now.sh)
 
@@ -20,35 +18,16 @@ ## Literal Values
 export type TVSCode =
-  | 'abyss'
-  | 'dark_plus'
-  | 'dark_vs'
-  | 'hc_black'
-  | 'kimbie_dark'
-  | 'light_plus'
-  | 'light_vs'
+  | 'dark-plus'
+  | 'light-plus'
   | 'monokai'
-  | 'monokai_dimmed'
-  | 'quietlight'
-  | 'red'
-  | 'solarized_dark'
-  | 'solarized_light'
+  | 'solarized-dark'
+  | 'solarized-light'
 
 export type TMaterial =
-  | 'Material-Theme-Darker-High-Contrast'
-  | 'Material-Theme-Darker'
-  | 'Material-Theme-Default-High-Contrast'
-  | 'Material-Theme-Default'
-  | 'Material-Theme-Lighter-High-Contrast'
-  | 'Material-Theme-Lighter'
-  | 'Material-Theme-Ocean-High-Contrast'
-  | 'Material-Theme-Ocean'
-  | 'Material-Theme-Palenight-High-Contrast'
-  | 'Material-Theme-Palenight'
+  | 'material-theme-darker'
+  | 'material-theme-default'
+  | 'material-theme-lighter'
+  | 'material-theme-ocean'
+  | 'material-theme-palenight'
 
-export type TNice =
-  | 'nord'
-  | 'min-light'
-  | 'min-dark'
-  | 'white'
-  | 'white-night'
-  | 'zeit'
+export type TNice = 'nord' | 'min-light' | 'min-dark'
 
@@ -68,2 +47,14 @@ export type TTheme = TVSCode | TMaterial | TNice
 })
-```
+```
+
+## Add
+
+First, please open an issue to discuss including a new theme.
+
+Here are the places you need to change:
+
+- [/scripts/pullThemesFromGitHub.js](/scripts/pullThemesFromGitHub.js)
+- `yarn update:themes`
+- [./src/index.ts](./src/index.ts)
+- [./src/types.ts](./src/types.ts)
+- [Literal Values](./README.md#literal-values)

src/index.ts

@@ -1,68 +0,37 @@
-import * as fs from 'fs'
 import * as path from 'path'
+
 import { loadTheme, IShikiTheme } from './loadTheme'
-import { TTheme } from './types';
+import { TTheme } from './types'
+
 export * from './types'
 
-const vscThemes = [
-  'abyss',
-  'dark_plus',
-  'dark_vs',
-  'hc_black',
-  'kimbie_dark',
-  'light_plus',
-  'light_vs',
+const themes = [
+  'dark-plus',
+  'light-plus',
   'monokai',
-  'monokai_dimmed',
-  'quietlight',
-  'red',
-  'solarized_dark',
-  'solarized_light'
-]
-
-export const materialThemes = [
-  'Material-Theme-Darker-High-Contrast',
-  'Material-Theme-Darker',
-  'Material-Theme-Default-High-Contrast',
-  'Material-Theme-Default',
-  'Material-Theme-Lighter-High-Contrast',
-  'Material-Theme-Lighter',
-  'Material-Theme-Ocean-High-Contrast',
-  'Material-Theme-Ocean',
-  'Material-Theme-Palenight-High-Contrast',
-  'Material-Theme-Palenight',
-]
-
-export const niceThemes = [
+  'solarized-dark',
+  'solarized-light',
+  'material-theme-darker',
+  'material-theme-default',
+  'material-theme-lighter',
+  'material-theme-ocean',
+  'material-theme-palenight',
+  'github-dark',
+  'github-light',
   'nord',
   'min-light',
-  'min-dark',
-  'white',
-  'white-night',
-  'zeit',
+  'min-dark'
 ]
 
-function mapF(subdir: string) {
-  return n => {
-    const p = fs.existsSync(path.resolve(__dirname, `../data/${subdir}/${n}.json`))
-      ? path.resolve(__dirname, `../data/${subdir}/${n}.json`)
-      : path.resolve(__dirname, `../data/${subdir}/${n}.tmTheme`)
+const allThemes = {}
 
-    return loadTheme(p)
-  }
+for (let theme of themes) {
+  allThemes[theme] = loadTheme(path.resolve(__dirname, '../data', `${theme}.json`))
 }
 
 export function getTheme(t: TTheme): IShikiTheme {
-  if (vscThemes.includes(t)) {
-    return mapF('vscode')(t)
+  if (t in allThemes) {
+    return allThemes[t]
   }
 
-  if (materialThemes.includes(t)) {
-    return mapF('material')(t)
-  }
-
-  if (niceThemes.includes(t)) {
-    return mapF('nice')(t)
-  }
-
   throw Error(`No theme ${t} found`)
@@ -69,0 +38,0 @@ }

src/loadTheme.ts

@@ -6,3 +6,3 @@ import { IRawTheme, IRawThemeSetting } from 'vscode-textmate'
 import { parse as plistParse } from './plist'
-import * as JSON5 from 'json5';
+import * as JSON5 from 'json5'
 
@@ -23,3 +23,3 @@ function loadJSONTheme(themePath: string): IRawTheme {
     ...rawTheme,
-    bg: getThemeBg(rawTheme)
+    ...getThemeDefaultColors(rawTheme)
   }
@@ -71,3 +71,3 @@
    */
-  name?: string;
+  name?: string
 
@@ -77,10 +77,15 @@ /**
    */
-  settings: IRawThemeSetting[];
+  settings: IRawThemeSetting[]
 
   /**
-   * @description text background color
+   * @description text default foreground color
    */
-  bg: string;
+  fg: string
 
   /**
+   * @description text default background color
+   */
+  bg: string
+
+  /**
    * @description relative path of included theme
@@ -91,13 +96,46 @@ */
 
-function getThemeBg(theme: IRawTheme): string {
-  if ((<any>theme).colors && (<any>theme).colors['editor.background']) {
-    return (<any>theme).colors['editor.background']
+/**
+ * https://github.com/microsoft/vscode/blob/f7f05dee53fb33fe023db2e06e30a89d3094488f/src/vs/platform/theme/common/colorRegistry.ts#L258-L268
+ */
+const editorBackground = { light: '#fffffe', dark: '#1E1E1E' }
+const editorForeground = { light: '#333333', dark: '#BBBBBB' }
+
+function getThemeDefaultColors(theme: IRawTheme & { type?: string }): { fg: string; bg: string } {
+  let fg = editorForeground.dark
+  let bg = editorBackground.dark
+
+  if (theme.type === 'light') {
+    fg = editorForeground.light
+    bg = editorBackground.light
   }
+
+  /**
+   * Theme might contain a global `tokenColor` without `name` or `scope`
+   * Used as default value for foreground/background
+   */
   let settings = theme.settings ? theme.settings : (<any>theme).tokenColors
+  const globalSetting = settings
+    ? settings.find(s => {
+        return !s.name && !s.scope
+      })
+    : undefined
 
-  const globalSetting = settings.find(s => {
-    return !s.name && !s.scope
-  })
+  if (globalSetting?.settings?.foreground) {
+    fg = globalSetting.settings.foreground
+  }
+  if (globalSetting?.settings?.background) {
+    bg = globalSetting.settings.background
+  }
 
-  return globalSetting ? globalSetting.settings.background : null
+  if ((<any>theme).colors && (<any>theme).colors['editor.foreground']) {
+    fg = (<any>theme).colors['editor.foreground']
+  }
+  if ((<any>theme).colors && (<any>theme).colors['editor.background']) {
+    bg = (<any>theme).colors['editor.background']
+  }
+
+  return {
+    fg,
+    bg
+  }
 }

src/plist.ts

@@ -150,3 +150,3 @@ /*---------------------------------------------------------
   const dictState = {
-    enterDict: function() {
+    enterDict: function () {
       if (curKey === null) {
@@ -167,3 +167,3 @@ return fail('missing <key>')
     },
-    enterArray: function() {
+    enterArray: function () {
       if (curKey === null) {
@@ -180,3 +180,3 @@ return fail('missing <key>')
   const arrState = {
-    enterDict: function() {
+    enterDict: function () {
       let newDict: any = {}
@@ -193,3 +193,3 @@ if (locationKeyName !== null) {
     },
-    enterArray: function() {
+    enterArray: function () {
       let newArr: any[] = []
@@ -356,9 +356,9 @@ cur.push(newArr)
     return str
-      .replace(/&#([0-9]+);/g, function(_: string, m0: string) {
+      .replace(/&#([0-9]+);/g, function (_: string, m0: string) {
         return (<any>String).fromCodePoint(parseInt(m0, 10))
       })
-      .replace(/&#x([0-9a-f]+);/g, function(_: string, m0: string) {
+      .replace(/&#x([0-9a-f]+);/g, function (_: string, m0: string) {
         return (<any>String).fromCodePoint(parseInt(m0, 16))
       })
-      .replace(/&amp;|&lt;|&gt;|&quot;|&apos;/g, function(_: string) {
+      .replace(/&amp;|&lt;|&gt;|&quot;|&apos;/g, function (_: string) {
         switch (_) {
@@ -365,0 +365,0 @@ case '&amp;':

src/types.ts

@@ -1,36 +0,12 @@
-export type TVSCode =
-  | 'abyss'
-  | 'dark_plus'
-  | 'dark_vs'
-  | 'hc_black'
-  | 'kimbie_dark'
-  | 'light_plus'
-  | 'light_vs'
-  | 'monokai'
-  | 'monokai_dimmed'
-  | 'quietlight'
-  | 'red'
-  | 'solarized_dark'
-  | 'solarized_light'
+export type TVSCode = 'dark-plus' | 'light-plus' | 'monokai' | 'solarized-dark' | 'solarized-light'
 
 export type TMaterial =
-  | 'Material-Theme-Darker-High-Contrast'
-  | 'Material-Theme-Darker'
-  | 'Material-Theme-Default-High-Contrast'
-  | 'Material-Theme-Default'
-  | 'Material-Theme-Lighter-High-Contrast'
-  | 'Material-Theme-Lighter'
-  | 'Material-Theme-Ocean-High-Contrast'
-  | 'Material-Theme-Ocean'
-  | 'Material-Theme-Palenight-High-Contrast'
-  | 'Material-Theme-Palenight'
+  | 'material-theme-darker'
+  | 'material-theme-default'
+  | 'material-theme-lighter'
+  | 'material-theme-ocean'
+  | 'material-theme-palenight'
 
-export type TNice =
-  | 'nord'
-  | 'min-light'
-  | 'min-dark'
-  | 'white'
-  | 'white-night'
-  | 'zeit'
+export type TNice = 'nord' | 'min-light' | 'min-dark'
 
-export type TTheme = TVSCode | TMaterial | TNice
+export type TTheme = TVSCode | TMaterial | TNice

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-75%

Worsened metrics

Total package byte prevSize

481690

decreased by-4%

Number of package files

35

decreased by-32.69%

Lines of code

10530

decreased by-26.33%

Number of lines in readme file

57

decreased by-13.64%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes