@uiw/codemirror-themes - npm Package Compare versions

Comparing version 4.10.3 to 4.10.4

cjs/index.d.ts

@@ -22,15 +22,17 @@ import { Extension } from '@codemirror/state';
     /** Caret color. */
-    caret: string;
+    caret?: string;
     /** Selection background. */
-    selection: string;
+    selection?: string;
     /** Selection match background. */
     selectionMatch?: string;
     /** Background of highlighted lines. */
-    lineHighlight: string;
+    lineHighlight?: string;
     /** Gutter background. */
-    gutterBackground: string;
+    gutterBackground?: string;
     /** Text color inside gutter. */
-    gutterForeground: string;
+    gutterForeground?: string;
+    /** Gutter right border color. */
+    gutterBorder?: string;
 }
 export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
 export default createTheme;

cjs/index.js

@@ -21,19 +21,34 @@ "use strict";
     },
-    '.cm-content': {
+    '.cm-gutters': {}
+  };
+
+  if (settings.gutterBackground) {
+    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
+  }
+
+  if (settings.gutterForeground) {
+    themeOptions['.cm-gutters'].color = settings.gutterForeground;
+  }
+
+  if (settings.gutterBorder) {
+    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;
+  }
+
+  if (settings.caret) {
+    themeOptions['.cm-content'] = {
       caretColor: settings.caret
-    },
-    '.cm-cursor, .cm-dropCursor': {
+    };
+    themeOptions['.cm-cursor, .cm-dropCursor'] = {
       borderLeftColor: settings.caret
-    },
-    '.cm-activeLine': {
+    };
+  }
+
+  if (settings.lineHighlight) {
+    themeOptions['.cm-activeLine'] = {
       backgroundColor: settings.lineHighlight
-    },
-    '.cm-gutters': {
-      backgroundColor: settings.gutterBackground,
-      color: settings.gutterForeground
-    },
-    '.cm-activeLineGutter': {
+    };
+    themeOptions['.cm-activeLineGutter'] = {
       backgroundColor: settings.lineHighlight
-    }
-  };
+    };
+  }
 
@@ -40,0 +55,0 @@ if (settings.selection) {

esm/index.d.ts

@@ -22,15 +22,17 @@ import { Extension } from '@codemirror/state';
     /** Caret color. */
-    caret: string;
+    caret?: string;
     /** Selection background. */
-    selection: string;
+    selection?: string;
     /** Selection match background. */
     selectionMatch?: string;
     /** Background of highlighted lines. */
-    lineHighlight: string;
+    lineHighlight?: string;
     /** Gutter background. */
-    gutterBackground: string;
+    gutterBackground?: string;
     /** Text color inside gutter. */
-    gutterForeground: string;
+    gutterForeground?: string;
+    /** Gutter right border color. */
+    gutterBorder?: string;
 }
 export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
 export default createTheme;

esm/index.js

@@ -14,19 +14,34 @@ import { EditorView } from '@codemirror/view';
     },
-    '.cm-content': {
+    '.cm-gutters': {}
+  };
+
+  if (settings.gutterBackground) {
+    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
+  }
+
+  if (settings.gutterForeground) {
+    themeOptions['.cm-gutters'].color = settings.gutterForeground;
+  }
+
+  if (settings.gutterBorder) {
+    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;
+  }
+
+  if (settings.caret) {
+    themeOptions['.cm-content'] = {
       caretColor: settings.caret
-    },
-    '.cm-cursor, .cm-dropCursor': {
+    };
+    themeOptions['.cm-cursor, .cm-dropCursor'] = {
       borderLeftColor: settings.caret
-    },
-    '.cm-activeLine': {
+    };
+  }
+
+  if (settings.lineHighlight) {
+    themeOptions['.cm-activeLine'] = {
       backgroundColor: settings.lineHighlight
-    },
-    '.cm-gutters': {
-      backgroundColor: settings.gutterBackground,
-      color: settings.gutterForeground
-    },
-    '.cm-activeLineGutter': {
+    };
+    themeOptions['.cm-activeLineGutter'] = {
       backgroundColor: settings.lineHighlight
-    }
-  };
+    };
+  }
 
@@ -33,0 +48,0 @@ if (settings.selection) {

package.json

 {
   "name": "@uiw/codemirror-themes",
-  "version": "4.10.3",
+  "version": "4.10.4",
   "description": "Themes for CodeMirror.",
@@ -5,0 +5,0 @@ "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/doc",

README.md

@@ -206,2 +206,4 @@ # Custom Codemirror Themes
   gutterForeground: string;
+  /** Gutter right border color. */
+  gutterBorder: string;
 }
@@ -208,0 +210,0 @@ declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;

No alert changes

Improved metrics

Total package byte prevSize

27783

increased by12.84%

Lines of code

285

increased by14.46%

Number of lines in readme file

235

increased by0.86%

No dependency changes