@ddietr/codemirror-themes - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

dist/theme/aura.js

@@ -50,5 +50,4 @@ import { EditorView } from '@codemirror/view';
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -62,3 +61,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -74,2 +73,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -76,0 +83,0 @@ '& > ul > li[aria-selected]': {

dist/theme/dracula.js

@@ -20,3 +20,3 @@ import { EditorView } from '@codemirror/view';
     parameter: '#F8F8F2',
-    function: '#8BE9FD',
+    function: '#50FA7B',
     string: '#F1FA8C',
@@ -51,5 +51,4 @@ constant: '#BD93F9',
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -63,3 +62,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -75,2 +74,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -77,0 +84,0 @@ '& > ul > li[aria-selected]': {

dist/theme/github-dark.js

@@ -18,3 +18,3 @@ import { EditorView } from '@codemirror/view';
     storage: '#f97583',
-    variable: '#d1d5da',
+    variable: '#ffab70',
     parameter: '#e1e4e8',
@@ -51,5 +51,4 @@ function: '#79b8ff',
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -63,3 +62,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -75,2 +74,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -77,0 +84,0 @@ '& > ul > li[aria-selected]': {

dist/theme/github-light.js

@@ -18,3 +18,3 @@ import { EditorView } from '@codemirror/view';
     storage: '#d73a49',
-    variable: '#444d56',
+    variable: '#e36209',
     parameter: '#24292e',
@@ -51,5 +51,4 @@ function: '#005cc5',
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -63,3 +62,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -75,2 +74,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -77,0 +84,0 @@ '& > ul > li[aria-selected]': {

dist/theme/material-dark.js

@@ -50,5 +50,4 @@ import { EditorView } from '@codemirror/view';
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -62,3 +61,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -74,2 +73,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -76,0 +83,0 @@ '& > ul > li[aria-selected]': {

dist/theme/material-light.js

@@ -50,5 +50,4 @@ import { EditorView } from '@codemirror/view';
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -62,3 +61,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -74,2 +73,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -76,0 +83,0 @@ '& > ul > li[aria-selected]': {

dist/theme/solarized-dark.js

@@ -23,3 +23,3 @@ import { EditorView } from '@codemirror/view';
     constant: '#CB4B16',
-    type: '#CB4B16',
+    type: '#b58900',
     class: '#CB4B16',
@@ -51,5 +51,4 @@ number: '#D33682',
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -63,3 +62,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -75,2 +74,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -77,0 +84,0 @@ '& > ul > li[aria-selected]': {

dist/theme/solarized-light.js

@@ -23,3 +23,3 @@ import { EditorView } from '@codemirror/view';
     constant: '#CB4B16',
-    type: '#268BD2',
+    type: '#b58900',
     class: '#268BD2',
@@ -51,5 +51,4 @@ number: '#D33682',
     '.cm-activeLine': { backgroundColor: config.activeLine },
-    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-selectionMatch': { backgroundColor: config.selection },
-    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -63,3 +62,3 @@ outline: 'none'
     },
-    '.cm-lineNumbers, .cm-gutterElement': { color: 'inherit' },
+    '.cm-activeLineGutter': { backgroundColor: config.background },
     '.cm-foldPlaceholder': {
@@ -75,2 +74,10 @@ backgroundColor: 'transparent',
     },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
     '.cm-tooltip.cm-tooltip-autocomplete': {
@@ -77,0 +84,0 @@ '& > ul > li[aria-selected]': {

package.json

 {
   "name": "@ddietr/codemirror-themes",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "license": "MIT",
@@ -28,9 +28,13 @@ "description": "",
   "scripts": {
-    "prepare": "rollup -c"
+    "prepare": "rm -rf ./dist && rollup -c",
+    "dev": "vite ./example"
   },
   "devDependencies": {
+    "@codemirror/autocomplete": "^6.3.0",
+    "@codemirror/lang-javascript": "^6.1.1",
     "@rollup/plugin-typescript": "^8.3.3",
     "rollup": "^2.75.6",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.3",
+    "vite": "^3.2.2"
   },
@@ -37,0 +41,0 @@ "dependencies": {

README.md

 # Codemirror 6 Themes
 
+Not perfect themes for cm6, generated from vscode themes.
+
+![](./screenshot.png)
+
 ## Install
@@ -20,4 +24,14 @@
 import {aura} from '@ddietr/codemirror-themes/aura'
+import {tokyoNight} from '@ddietr/codemirror-themes/tokyo-night'
+import {tokyoNightStorm} from '@ddietr/codemirror-themes/tokyo-night-storm'
+import {tokyoNightDay} from '@ddietr/codemirror-themes/tokyo-night-day'
 ```
 
+## Dev
+
+```
+# Start devserver with examples
+npm run dev
+```
+
 ## Build
@@ -24,0 +38,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

864249

increased by1237.49%

Number of package files

41

increased by7.89%

Lines of code

1604

increased by7.87%

Number of lines in readme file

43

increased by48.28%

Worsened metrics

Dev dependency count

7

increased by75%

No dependency changes