@fsegurai/codemirror-theme-abyss 6.2.2 → 6.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +48 -41
- package/dist/index.cjs +8 -5
- package/dist/index.js +8 -5
- package/package.json +7 -7
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 fsegurai
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.
|
|
2
|
+
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.svg">
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
@@ -29,10 +29,11 @@
|
|
|
29
29
|
### Table of contents
|
|
30
30
|
|
|
31
31
|
- [Installation](#installation)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
- [@fsegurai/codemirror-theme-abyss](#@fsegurai/codemirror-theme-abyss)
|
|
33
|
+
- [Using Theme](#using-theme)
|
|
34
|
+
- [More Resources](#more-resources)
|
|
35
|
+
- [Available Themes](#available-themes)
|
|
36
|
+
- [Demo Application](#demo-application)
|
|
36
37
|
- [License](#license)
|
|
37
38
|
|
|
38
39
|
## Installation
|
|
@@ -42,17 +43,17 @@
|
|
|
42
43
|
To add `@fsegurai/codemirror-theme-abyss` along with CodeMirror 6 to your `package.json` use the following commands.
|
|
43
44
|
|
|
44
45
|
```bash
|
|
45
|
-
|
|
46
|
+
bun install @fsegurai/codemirror-theme-abyss codemirror@^6.0.0 --save
|
|
46
47
|
```
|
|
47
48
|
|
|
48
|
-
|
|
49
|
+
## Using Theme
|
|
49
50
|
|
|
50
51
|
Import the respective theme from the package and apply it to your CodeMirror instance as shown below.
|
|
51
52
|
|
|
52
53
|
```javascript
|
|
53
54
|
import { EditorView, basicSetup } from 'codemirror'
|
|
54
55
|
import { markdown } from '@codemirror/lang-markdown'
|
|
55
|
-
import { abyss } from '@fsegurai/codemirror-theme-
|
|
56
|
+
import { abyss } from '@fsegurai/codemirror-theme-abyss'
|
|
56
57
|
|
|
57
58
|
let editor = new EditorView({
|
|
58
59
|
doc: '# Hello World',
|
|
@@ -69,44 +70,50 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
|
|
|
69
70
|
|
|
70
71
|
### Available Themes
|
|
71
72
|
|
|
72
|
-
| Theme
|
|
73
|
-
|
|
74
|
-
| All - Bundle
|
|
75
|
-
| Abcdef
|
|
76
|
-
| Abyss
|
|
77
|
-
| Android Studio
|
|
78
|
-
| Andromeda
|
|
79
|
-
| Basic
|
|
80
|
-
| Basic
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
| GitHub Dark
|
|
85
|
-
|
|
|
86
|
-
| Gruvbox Dark
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
73
|
+
| Theme | Package | Version |
|
|
74
|
+
|---------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
|
|
75
|
+
| All - Bundle | [@fsegurai/codemirror-theme-bundle](https://www.npmjs.com/package/@fsegurai/codemirror-theme-bundle) |  |
|
|
76
|
+
| Abcdef | [@fsegurai/codemirror-theme-abcdef](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abcdef) |  |
|
|
77
|
+
| Abyss | [@fsegurai/codemirror-theme-abyss](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abyss) |  |
|
|
78
|
+
| Android Studio | [@fsegurai/codemirror-theme-android-studio](https://www.npmjs.com/package/@fsegurai/codemirror-theme-android-studio) |  |
|
|
79
|
+
| Andromeda | [@fsegurai/codemirror-theme-andromeda](https://www.npmjs.com/package/@fsegurai/codemirror-theme-andromeda) |  |
|
|
80
|
+
| Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) |  |
|
|
81
|
+
| Basic Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) |  |
|
|
82
|
+
| Catppuccin Mocha | [@fsegurai/codemirror-theme-catppuccin-mocha](https://www.npmjs.com/package/@fsegurai/codemirror-theme-catppuccin-mocha) |  |
|
|
83
|
+
| Cobalt2 | [@fsegurai/codemirror-theme-cobalt](https://www.npmjs.com/package/@fsegurai/codemirror-theme-cobalt2) |  |
|
|
84
|
+
| Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) |  |
|
|
85
|
+
| GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) |  |
|
|
86
|
+
| GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) |  |
|
|
87
|
+
| Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) |  |
|
|
88
|
+
| Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) |  |
|
|
89
|
+
| High Contrast Dark | [@fsegurai/codemirror-theme-high-contrast-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-dark) |  |
|
|
90
|
+
| High Contrast Light | [@fsegurai/codemirror-theme-high-contrast-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-light) |  |
|
|
91
|
+
| Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) |  |
|
|
92
|
+
| Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) |  |
|
|
93
|
+
| Material Ocean | [@fsegurai/codemirror-theme-material-ocean](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-ocean) |  |
|
|
94
|
+
| Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) |  |
|
|
95
|
+
| Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) |  |
|
|
96
|
+
| Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) |  |
|
|
97
|
+
| Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) |  |
|
|
98
|
+
| Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) |  |
|
|
99
|
+
| Synthwave 84 | [@fsegurai/codemirror-theme-synthwave-84](https://www.npmjs.com/package/@fsegurai/codemirror-theme-synthwave-84) |  |
|
|
100
|
+
| Tokyo Night Day | [@fsegurai/codemirror-theme-tokyo-night-day](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-day) |  |
|
|
101
|
+
| Tokyo Night Storm | [@fsegurai/codemirror-theme-tokyo-night-storm](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-storm) |  |
|
|
102
|
+
| Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) |  |
|
|
103
|
+
| VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) |  |
|
|
104
|
+
| VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) |  |
|
|
105
|
+
|
|
106
|
+
## Demo Application
|
|
107
|
+
|
|
108
|
+
To see all themes in action, check out the
|
|
109
|
+
demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
|
|
103
110
|
|
|
104
111
|
To set up the demo locally:
|
|
105
112
|
|
|
106
113
|
```bash
|
|
107
114
|
git clone https://github.com/fsegurai/codemirror-themes.git
|
|
108
|
-
|
|
109
|
-
|
|
115
|
+
bun install
|
|
116
|
+
bun start
|
|
110
117
|
```
|
|
111
118
|
|
|
112
119
|
This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
|
package/dist/index.cjs
CHANGED
|
@@ -17,12 +17,13 @@ const generalDiff = {
|
|
|
17
17
|
insertedTextDecoration: 'none',
|
|
18
18
|
deletedTextDecoration: 'line-through',
|
|
19
19
|
insertedLinePadding: '1px 3px',
|
|
20
|
-
|
|
20
|
+
borderRadius: '3px'};
|
|
21
21
|
const generalGutter = {
|
|
22
22
|
border: 'none',
|
|
23
23
|
paddingRight: '8px',
|
|
24
24
|
fontSize: '0.9em',
|
|
25
25
|
fontWeight: '500',
|
|
26
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
26
27
|
};
|
|
27
28
|
const generalPanel = {
|
|
28
29
|
border: 'none',
|
|
@@ -223,9 +224,11 @@ const abyssTheme = view.EditorView.theme({
|
|
|
223
224
|
},
|
|
224
225
|
'.cm-lineNumbers': {
|
|
225
226
|
fontSize: generalGutter.fontSize,
|
|
227
|
+
lineHeight: generalGutter.lineHeight,
|
|
226
228
|
},
|
|
227
229
|
'.cm-foldGutter': {
|
|
228
230
|
fontSize: generalGutter.fontSize,
|
|
231
|
+
lineHeight: generalGutter.lineHeight,
|
|
229
232
|
},
|
|
230
233
|
'.cm-foldGutter .cm-gutterElement': {
|
|
231
234
|
color: '#5f7e97',
|
|
@@ -241,14 +244,14 @@ const abyssTheme = view.EditorView.theme({
|
|
|
241
244
|
backgroundColor: addedBackground,
|
|
242
245
|
color: addedText,
|
|
243
246
|
padding: generalDiff.insertedLinePadding,
|
|
244
|
-
borderRadius: generalDiff.
|
|
247
|
+
borderRadius: generalDiff.borderRadius,
|
|
245
248
|
},
|
|
246
249
|
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
247
250
|
textDecoration: generalDiff.insertedTextDecoration,
|
|
248
251
|
backgroundColor: `${addedBackground} !important`,
|
|
249
252
|
color: addedText,
|
|
250
253
|
padding: generalDiff.insertedLinePadding,
|
|
251
|
-
borderRadius: generalDiff.
|
|
254
|
+
borderRadius: generalDiff.borderRadius,
|
|
252
255
|
border: `1px solid ${addedText}40`,
|
|
253
256
|
},
|
|
254
257
|
'ins.cm-insertedLine .cm-changedText': {
|
|
@@ -260,14 +263,14 @@ const abyssTheme = view.EditorView.theme({
|
|
|
260
263
|
backgroundColor: removedBackground,
|
|
261
264
|
color: removedText,
|
|
262
265
|
padding: generalDiff.insertedLinePadding,
|
|
263
|
-
borderRadius: generalDiff.
|
|
266
|
+
borderRadius: generalDiff.borderRadius,
|
|
264
267
|
},
|
|
265
268
|
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
266
269
|
textDecoration: generalDiff.deletedTextDecoration,
|
|
267
270
|
backgroundColor: `${removedBackground} !important`,
|
|
268
271
|
color: removedText,
|
|
269
272
|
padding: generalDiff.insertedLinePadding,
|
|
270
|
-
borderRadius: generalDiff.
|
|
273
|
+
borderRadius: generalDiff.borderRadius,
|
|
271
274
|
border: `1px solid ${removedText}40`,
|
|
272
275
|
},
|
|
273
276
|
'del .cm-deletedText, del .cm-changedText': {
|
package/dist/index.js
CHANGED
|
@@ -15,12 +15,13 @@ const generalDiff = {
|
|
|
15
15
|
insertedTextDecoration: 'none',
|
|
16
16
|
deletedTextDecoration: 'line-through',
|
|
17
17
|
insertedLinePadding: '1px 3px',
|
|
18
|
-
|
|
18
|
+
borderRadius: '3px'};
|
|
19
19
|
const generalGutter = {
|
|
20
20
|
border: 'none',
|
|
21
21
|
paddingRight: '8px',
|
|
22
22
|
fontSize: '0.9em',
|
|
23
23
|
fontWeight: '500',
|
|
24
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
24
25
|
};
|
|
25
26
|
const generalPanel = {
|
|
26
27
|
border: 'none',
|
|
@@ -221,9 +222,11 @@ const abyssTheme = /*@__PURE__*/EditorView.theme({
|
|
|
221
222
|
},
|
|
222
223
|
'.cm-lineNumbers': {
|
|
223
224
|
fontSize: generalGutter.fontSize,
|
|
225
|
+
lineHeight: generalGutter.lineHeight,
|
|
224
226
|
},
|
|
225
227
|
'.cm-foldGutter': {
|
|
226
228
|
fontSize: generalGutter.fontSize,
|
|
229
|
+
lineHeight: generalGutter.lineHeight,
|
|
227
230
|
},
|
|
228
231
|
'.cm-foldGutter .cm-gutterElement': {
|
|
229
232
|
color: '#5f7e97',
|
|
@@ -239,14 +242,14 @@ const abyssTheme = /*@__PURE__*/EditorView.theme({
|
|
|
239
242
|
backgroundColor: addedBackground,
|
|
240
243
|
color: addedText,
|
|
241
244
|
padding: generalDiff.insertedLinePadding,
|
|
242
|
-
borderRadius: generalDiff.
|
|
245
|
+
borderRadius: generalDiff.borderRadius,
|
|
243
246
|
},
|
|
244
247
|
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
245
248
|
textDecoration: generalDiff.insertedTextDecoration,
|
|
246
249
|
backgroundColor: `${addedBackground} !important`,
|
|
247
250
|
color: addedText,
|
|
248
251
|
padding: generalDiff.insertedLinePadding,
|
|
249
|
-
borderRadius: generalDiff.
|
|
252
|
+
borderRadius: generalDiff.borderRadius,
|
|
250
253
|
border: `1px solid ${addedText}40`,
|
|
251
254
|
},
|
|
252
255
|
'ins.cm-insertedLine .cm-changedText': {
|
|
@@ -258,14 +261,14 @@ const abyssTheme = /*@__PURE__*/EditorView.theme({
|
|
|
258
261
|
backgroundColor: removedBackground,
|
|
259
262
|
color: removedText,
|
|
260
263
|
padding: generalDiff.insertedLinePadding,
|
|
261
|
-
borderRadius: generalDiff.
|
|
264
|
+
borderRadius: generalDiff.borderRadius,
|
|
262
265
|
},
|
|
263
266
|
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
264
267
|
textDecoration: generalDiff.deletedTextDecoration,
|
|
265
268
|
backgroundColor: `${removedBackground} !important`,
|
|
266
269
|
color: removedText,
|
|
267
270
|
padding: generalDiff.insertedLinePadding,
|
|
268
|
-
borderRadius: generalDiff.
|
|
271
|
+
borderRadius: generalDiff.borderRadius,
|
|
269
272
|
border: `1px solid ${removedText}40`,
|
|
270
273
|
},
|
|
271
274
|
'del .cm-deletedText, del .cm-changedText': {
|
package/package.json
CHANGED
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fsegurai/codemirror-theme-abyss",
|
|
3
|
+
"version": "6.2.4",
|
|
3
4
|
"description": "Abyss theme for the CodeMirror editor",
|
|
4
|
-
"version": "6.2.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
|
+
"module": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
7
9
|
"exports": {
|
|
8
10
|
"import": "./dist/index.js",
|
|
9
11
|
"require": "./dist/index.cjs"
|
|
10
12
|
},
|
|
11
|
-
"types": "dist/index.d.ts",
|
|
12
|
-
"module": "dist/index.js",
|
|
13
13
|
"sideEffects": false,
|
|
14
|
-
"scripts": {
|
|
15
|
-
"test": "cm-runtests",
|
|
16
|
-
"prepare": "cm-buildhelper src/index.ts"
|
|
17
|
-
},
|
|
18
14
|
"keywords": [
|
|
19
15
|
"editor",
|
|
20
16
|
"diff",
|
|
@@ -32,6 +28,10 @@
|
|
|
32
28
|
"url": "https://www.fsegurai.com/"
|
|
33
29
|
},
|
|
34
30
|
"license": "MIT",
|
|
31
|
+
"scripts": {
|
|
32
|
+
"pkg:build": "cm-buildhelper src/index.ts",
|
|
33
|
+
"pkg:test": "cm-runtests"
|
|
34
|
+
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@lezer/highlight": "^1.0.0",
|
|
37
37
|
"@codemirror/language": "^6.0.0",
|