@uiw/codemirror-theme-duotone - npm Package Compare versions

Comparing version 4.17.1 to 4.18.0

cjs/index.d.ts

@@ -0,2 +1,5 @@
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const duotoneLightInit: (options?: CreateThemeOptions) => import("@codemirror/state").Extension;
 export declare const duotoneLight: import("@codemirror/state").Extension;
+export declare const duotoneDarkInit: (options?: CreateThemeOptions) => import("@codemirror/state").Extension;
 export declare const duotoneDark: import("@codemirror/state").Extension;

cjs/index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.duotoneLight = exports.duotoneDark = void 0;
+exports.duotoneLightInit = exports.duotoneLight = exports.duotoneDarkInit = exports.duotoneDark = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _highlight = require("@lezer/highlight");
@@ -15,76 +18,98 @@ var _codemirrorThemes = require("@uiw/codemirror-themes");
 
-var duotoneLight = (0, _codemirrorThemes.createTheme)({
-  theme: 'light',
-  settings: {
-    background: '#faf8f5',
-    foreground: '#b29762',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: '#faf8f5',
-    gutterForeground: '#cdc4b1',
-    lineHighlight: '#EFEFEF'
-  },
-  styles: [{
-    tag: [_highlight.tags.comment, _highlight.tags.bracket],
-    color: '#b6ad9a'
-  }, {
-    tag: [_highlight.tags.atom, _highlight.tags.number, _highlight.tags.keyword, _highlight.tags.link, _highlight.tags.attributeName, _highlight.tags.quote],
-    color: '#063289'
-  }, {
-    tag: [_highlight.tags.emphasis, _highlight.tags.heading, _highlight.tags.tagName, _highlight.tags.propertyName, _highlight.tags.variableName],
-    color: '#2d2006'
-  }, {
-    tag: [_highlight.tags.typeName, _highlight.tags.url, _highlight.tags.string],
-    color: '#896724'
-  }, {
-    tag: [_highlight.tags.operator, _highlight.tags.string],
-    color: '#1659df'
-  }, {
-    tag: [_highlight.tags.propertyName],
-    color: '#b29762'
-  }, {
-    tag: [_highlight.tags.unit, _highlight.tags.punctuation],
-    color: '#063289'
-  }]
-});
+var duotoneLightInit = function duotoneLightInit(options) {
+  var _ref = options || {},
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'light' : _ref$theme,
+    _ref$settings = _ref.settings,
+    settings = _ref$settings === void 0 ? {} : _ref$settings,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? [] : _ref$styles;
+  return (0, _codemirrorThemes.createTheme)({
+    theme: theme,
+    settings: (0, _objectSpread2["default"])({
+      background: '#faf8f5',
+      foreground: '#b29762',
+      caret: '#93abdc',
+      selection: '#e3dcce',
+      selectionMatch: '#e3dcce',
+      gutterBackground: '#faf8f5',
+      gutterForeground: '#cdc4b1',
+      lineHighlight: '#EFEFEF'
+    }, settings),
+    styles: [{
+      tag: [_highlight.tags.comment, _highlight.tags.bracket],
+      color: '#b6ad9a'
+    }, {
+      tag: [_highlight.tags.atom, _highlight.tags.number, _highlight.tags.keyword, _highlight.tags.link, _highlight.tags.attributeName, _highlight.tags.quote],
+      color: '#063289'
+    }, {
+      tag: [_highlight.tags.emphasis, _highlight.tags.heading, _highlight.tags.tagName, _highlight.tags.propertyName, _highlight.tags.variableName],
+      color: '#2d2006'
+    }, {
+      tag: [_highlight.tags.typeName, _highlight.tags.url, _highlight.tags.string],
+      color: '#896724'
+    }, {
+      tag: [_highlight.tags.operator, _highlight.tags.string],
+      color: '#1659df'
+    }, {
+      tag: [_highlight.tags.propertyName],
+      color: '#b29762'
+    }, {
+      tag: [_highlight.tags.unit, _highlight.tags.punctuation],
+      color: '#063289'
+    }].concat((0, _toConsumableArray2["default"])(styles))
+  });
+};
+exports.duotoneLightInit = duotoneLightInit;
+var duotoneLight = duotoneLightInit();
 exports.duotoneLight = duotoneLight;
-var duotoneDark = (0, _codemirrorThemes.createTheme)({
-  theme: 'dark',
-  settings: {
-    background: '#2a2734',
-    foreground: '#6c6783',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: '#2a2734',
-    gutterForeground: '#545167',
-    lineHighlight: '#36334280'
-  },
-  styles: [{
-    tag: [_highlight.tags.comment, _highlight.tags.bracket],
-    color: '#6c6783'
-  }, {
-    tag: [_highlight.tags.atom, _highlight.tags.number, _highlight.tags.keyword, _highlight.tags.link, _highlight.tags.attributeName, _highlight.tags.quote],
-    color: '#ffcc99'
-  }, {
-    tag: [_highlight.tags.emphasis, _highlight.tags.heading, _highlight.tags.tagName, _highlight.tags.propertyName, _highlight.tags.className, _highlight.tags.variableName],
-    color: '#eeebff'
-  }, {
-    tag: [_highlight.tags.typeName, _highlight.tags.url],
-    color: '#7a63ee'
-  }, {
-    tag: _highlight.tags.operator,
-    color: '#ffad5c'
-  }, {
-    tag: _highlight.tags.string,
-    color: '#ffb870'
-  }, {
-    tag: [_highlight.tags.propertyName],
-    color: '#9a86fd'
-  }, {
-    tag: [_highlight.tags.unit, _highlight.tags.punctuation],
-    color: '#e09142'
-  }]
-});
+var duotoneDarkInit = function duotoneDarkInit(options) {
+  var _ref2 = options || {},
+    _ref2$theme = _ref2.theme,
+    theme = _ref2$theme === void 0 ? 'light' : _ref2$theme,
+    _ref2$settings = _ref2.settings,
+    settings = _ref2$settings === void 0 ? {} : _ref2$settings,
+    _ref2$styles = _ref2.styles,
+    styles = _ref2$styles === void 0 ? [] : _ref2$styles;
+  return (0, _codemirrorThemes.createTheme)({
+    theme: theme,
+    settings: (0, _objectSpread2["default"])({
+      background: '#2a2734',
+      foreground: '#6c6783',
+      caret: '#ffad5c',
+      selection: 'rgba(255, 255, 255, 0.1)',
+      gutterBackground: '#2a2734',
+      gutterForeground: '#545167',
+      lineHighlight: '#36334280'
+    }, settings),
+    styles: [{
+      tag: [_highlight.tags.comment, _highlight.tags.bracket],
+      color: '#6c6783'
+    }, {
+      tag: [_highlight.tags.atom, _highlight.tags.number, _highlight.tags.keyword, _highlight.tags.link, _highlight.tags.attributeName, _highlight.tags.quote],
+      color: '#ffcc99'
+    }, {
+      tag: [_highlight.tags.emphasis, _highlight.tags.heading, _highlight.tags.tagName, _highlight.tags.propertyName, _highlight.tags.className, _highlight.tags.variableName],
+      color: '#eeebff'
+    }, {
+      tag: [_highlight.tags.typeName, _highlight.tags.url],
+      color: '#7a63ee'
+    }, {
+      tag: _highlight.tags.operator,
+      color: '#ffad5c'
+    }, {
+      tag: _highlight.tags.string,
+      color: '#ffb870'
+    }, {
+      tag: [_highlight.tags.propertyName],
+      color: '#9a86fd'
+    }, {
+      tag: [_highlight.tags.unit, _highlight.tags.punctuation],
+      color: '#e09142'
+    }].concat((0, _toConsumableArray2["default"])(styles))
+  });
+};
+exports.duotoneDarkInit = duotoneDarkInit;
+var duotoneDark = duotoneDarkInit();
 exports.duotoneDark = duotoneDark;
 //# sourceMappingURL=index.js.map

esm/index.d.ts

@@ -0,2 +1,5 @@
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const duotoneLightInit: (options?: CreateThemeOptions) => import("@codemirror/state").Extension;
 export declare const duotoneLight: import("@codemirror/state").Extension;
+export declare const duotoneDarkInit: (options?: CreateThemeOptions) => import("@codemirror/state").Extension;
 export declare const duotoneDark: import("@codemirror/state").Extension;

esm/index.js

@@ -0,1 +1,2 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
@@ -8,74 +9,90 @@ * @name duotone
 import { createTheme } from '@uiw/codemirror-themes';
-export var duotoneLight = createTheme({
-  theme: 'light',
-  settings: {
-    background: '#faf8f5',
-    foreground: '#b29762',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: '#faf8f5',
-    gutterForeground: '#cdc4b1',
-    lineHighlight: '#EFEFEF'
-  },
-  styles: [{
-    tag: [t.comment, t.bracket],
-    color: '#b6ad9a'
-  }, {
-    tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote],
-    color: '#063289'
-  }, {
-    tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName],
-    color: '#2d2006'
-  }, {
-    tag: [t.typeName, t.url, t.string],
-    color: '#896724'
-  }, {
-    tag: [t.operator, t.string],
-    color: '#1659df'
-  }, {
-    tag: [t.propertyName],
-    color: '#b29762'
-  }, {
-    tag: [t.unit, t.punctuation],
-    color: '#063289'
-  }]
-});
-export var duotoneDark = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#2a2734',
-    foreground: '#6c6783',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: '#2a2734',
-    gutterForeground: '#545167',
-    lineHighlight: '#36334280'
-  },
-  styles: [{
-    tag: [t.comment, t.bracket],
-    color: '#6c6783'
-  }, {
-    tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote],
-    color: '#ffcc99'
-  }, {
-    tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName],
-    color: '#eeebff'
-  }, {
-    tag: [t.typeName, t.url],
-    color: '#7a63ee'
-  }, {
-    tag: t.operator,
-    color: '#ffad5c'
-  }, {
-    tag: t.string,
-    color: '#ffb870'
-  }, {
-    tag: [t.propertyName],
-    color: '#9a86fd'
-  }, {
-    tag: [t.unit, t.punctuation],
-    color: '#e09142'
-  }]
-});
+export var duotoneLightInit = options => {
+  var {
+    theme = 'light',
+    settings = {},
+    styles = []
+  } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: _extends({
+      background: '#faf8f5',
+      foreground: '#b29762',
+      caret: '#93abdc',
+      selection: '#e3dcce',
+      selectionMatch: '#e3dcce',
+      gutterBackground: '#faf8f5',
+      gutterForeground: '#cdc4b1',
+      lineHighlight: '#EFEFEF'
+    }, settings),
+    styles: [{
+      tag: [t.comment, t.bracket],
+      color: '#b6ad9a'
+    }, {
+      tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote],
+      color: '#063289'
+    }, {
+      tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName],
+      color: '#2d2006'
+    }, {
+      tag: [t.typeName, t.url, t.string],
+      color: '#896724'
+    }, {
+      tag: [t.operator, t.string],
+      color: '#1659df'
+    }, {
+      tag: [t.propertyName],
+      color: '#b29762'
+    }, {
+      tag: [t.unit, t.punctuation],
+      color: '#063289'
+    }, ...styles]
+  });
+};
+export var duotoneLight = duotoneLightInit();
+export var duotoneDarkInit = options => {
+  var {
+    theme = 'light',
+    settings = {},
+    styles = []
+  } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: _extends({
+      background: '#2a2734',
+      foreground: '#6c6783',
+      caret: '#ffad5c',
+      selection: 'rgba(255, 255, 255, 0.1)',
+      gutterBackground: '#2a2734',
+      gutterForeground: '#545167',
+      lineHighlight: '#36334280'
+    }, settings),
+    styles: [{
+      tag: [t.comment, t.bracket],
+      color: '#6c6783'
+    }, {
+      tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote],
+      color: '#ffcc99'
+    }, {
+      tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName],
+      color: '#eeebff'
+    }, {
+      tag: [t.typeName, t.url],
+      color: '#7a63ee'
+    }, {
+      tag: t.operator,
+      color: '#ffad5c'
+    }, {
+      tag: t.string,
+      color: '#ffb870'
+    }, {
+      tag: [t.propertyName],
+      color: '#9a86fd'
+    }, {
+      tag: [t.unit, t.punctuation],
+      color: '#e09142'
+    }, ...styles]
+  });
+};
+export var duotoneDark = duotoneDarkInit();
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uiw/codemirror-theme-duotone",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "description": "Theme duotone for CodeMirror.",
@@ -24,3 +24,3 @@ "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/light",
   "dependencies": {
-    "@uiw/codemirror-themes": "4.17.1"
+    "@uiw/codemirror-themes": "4.18.0"
   },
@@ -27,0 +27,0 @@ "keywords": [

README.md

@@ -23,2 +23,26 @@ <!--rehype:ignore:start-->
 
+```jsx
+import { duotoneLight, duotoneLightInit, duotoneDark, duotoneDarkInit } from '@uiw/codemirror-theme-duotone';
+
+<CodeMirror theme={duotoneLight} />
+<CodeMirror
+  theme={duotoneLightInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const duotoneLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const duotoneLight: import('@codemirror/state').Extension;
+export declare const duotoneDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const duotoneDark: import('@codemirror/state').Extension;
+```
+
 ## Usage
@@ -25,0 +49,0 @@

src/index.ts

@@ -7,48 +7,62 @@ /**
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const duotoneLight = createTheme({
-  theme: 'light',
-  settings: {
-    background: '#faf8f5',
-    foreground: '#b29762',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: '#faf8f5',
-    gutterForeground: '#cdc4b1',
-    lineHighlight: '#EFEFEF',
-  },
-  styles: [
-    { tag: [t.comment, t.bracket], color: '#b6ad9a' },
-    { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' },
-    { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' },
-    { tag: [t.typeName, t.url, t.string], color: '#896724' },
-    { tag: [t.operator, t.string], color: '#1659df' },
-    { tag: [t.propertyName], color: '#b29762' },
-    { tag: [t.unit, t.punctuation], color: '#063289' },
-  ],
-});
+export const duotoneLightInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#faf8f5',
+      foreground: '#b29762',
+      caret: '#93abdc',
+      selection: '#e3dcce',
+      selectionMatch: '#e3dcce',
+      gutterBackground: '#faf8f5',
+      gutterForeground: '#cdc4b1',
+      lineHighlight: '#EFEFEF',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.comment, t.bracket], color: '#b6ad9a' },
+      { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' },
+      { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' },
+      { tag: [t.typeName, t.url, t.string], color: '#896724' },
+      { tag: [t.operator, t.string], color: '#1659df' },
+      { tag: [t.propertyName], color: '#b29762' },
+      { tag: [t.unit, t.punctuation], color: '#063289' },
+      ...styles,
+    ],
+  });
+};
 
-export const duotoneDark = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#2a2734',
-    foreground: '#6c6783',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: '#2a2734',
-    gutterForeground: '#545167',
-    lineHighlight: '#36334280',
-  },
-  styles: [
-    { tag: [t.comment, t.bracket], color: '#6c6783' },
-    { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' },
-    { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' },
-    { tag: [t.typeName, t.url], color: '#7a63ee' },
-    { tag: t.operator, color: '#ffad5c' },
-    { tag: t.string, color: '#ffb870' },
-    { tag: [t.propertyName], color: '#9a86fd' },
-    { tag: [t.unit, t.punctuation], color: '#e09142' },
-  ],
-});
+export const duotoneLight = duotoneLightInit();
+
+export const duotoneDarkInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#2a2734',
+      foreground: '#6c6783',
+      caret: '#ffad5c',
+      selection: 'rgba(255, 255, 255, 0.1)',
+      gutterBackground: '#2a2734',
+      gutterForeground: '#545167',
+      lineHighlight: '#36334280',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.comment, t.bracket], color: '#6c6783' },
+      { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' },
+      { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' },
+      { tag: [t.typeName, t.url], color: '#7a63ee' },
+      { tag: t.operator, color: '#ffad5c' },
+      { tag: t.string, color: '#ffb870' },
+      { tag: [t.propertyName], color: '#9a86fd' },
+      { tag: [t.unit, t.punctuation], color: '#e09142' },
+      ...styles,
+    ],
+  });
+};
+
+export const duotoneDark = duotoneDarkInit();

No alert changes

Improved metrics

Total package byte prevSize

26202

increased by30.24%

Lines of code

280

increased by27.27%

Number of lines in readme file

102

increased by30.77%

Dependency changes

• + Added@uiw/codemirror-themes@4.18.0(transitive)

• - Removed@uiw/codemirror-themes@4.17.1(transitive)

• Updated@uiw/codemirror-themes@4.18.0