@fsegurai/codemirror-theme-abyss 6.0.1-alpha.0

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.
Files changed (6) hide show
  1. package/README.md +28 -0
  2. package/dist/index.cjs +96 -0
  3. package/dist/index.d.cts +8 -0
  4. package/dist/index.d.ts +8 -0
  5. package/dist/index.js +92 -0
  6. package/package.json +45 -0
package/README.md ADDED
@@ -0,0 +1,28 @@
1
+ <!-- NOTE: README.md is generated from src/README.md -->
2
+
3
+ # @fsegurai/codemirror-theme-abyss [![NPM version](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-abyss.svg)](https://www.npmjs.org/package/@fsegurai/codemirror-theme-abyss)
4
+
5
+ [ [**WEBSITE**](https://codemirror.net/6/) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/theme-one-dark/blob/main/CHANGELOG.md) ]
6
+
7
+ This package implements the Abyss theme for the
8
+ [CodeMirror](https://codemirror.net/6/) code editor.
9
+
10
+ The [project page](https://codemirror.net/6/) has more information, a
11
+ number of [examples](https://codemirror.net/6/examples/) and the
12
+ [documentation](https://codemirror.net/6/docs/).
13
+
14
+ This code is released under an
15
+ [MIT license](https://github.com/fsegurai/cm6-themes/tree/main/LICENSE).
16
+
17
+ We aim to be an inclusive, welcoming community. To make that explicit,
18
+ we have a [code of
19
+ conduct](http://contributor-covenant.org/version/1/1/0/) that applies
20
+ to communication around the project.
21
+
22
+ ## API Reference
23
+
24
+ @abyss
25
+
26
+ @abyssTheme
27
+
28
+ @abyssHighlightStyle
package/dist/index.cjs ADDED
@@ -0,0 +1,96 @@
1
+ 'use strict';
2
+
3
+ var view = require('@codemirror/view');
4
+ var language = require('@codemirror/language');
5
+ var highlight = require('@lezer/highlight');
6
+
7
+ // Abyss theme colors
8
+ const base00 = '#000c18', // Background
9
+ base01 = '#6688cc', // Foreground
10
+ base02 = '#770811', // Selection
11
+ base03 = '#181f2f', // Dropdown Background
12
+ base05 = '#ddbb88', // Cursor
13
+ base06 = '#0055ff30', // Active line
14
+ base07 = '#FFFFFF', // Another placeholder
15
+ base08 = '#225588', // Keyword, Storage
16
+ base09 = '#2277ff', // Variable, Parameter
17
+ base0A = '#384887', // Comment
18
+ base0B = '#22aa44', // String, RegExp
19
+ base0C = '#9966b8', // Function, Type
20
+ base0D = '#f280d0', // Constant, Number
21
+ base0E = '#ddbb88', // Class
22
+ base0F = '#6688cc', // Heading
23
+ base10 = '#225588', // Tag
24
+ base11 = '#ff00ff8a', // Link
25
+ invalid = '#A22D44'; // Invalid
26
+ // Define the editor theme styles for Abyss.
27
+ const abyssTheme = view.EditorView.theme({
28
+ '&': {
29
+ color: base01,
30
+ backgroundColor: base00
31
+ },
32
+ '.cm-content': {
33
+ caretColor: base05
34
+ },
35
+ '.cm-cursor, .cm-dropCursor': {
36
+ borderLeftColor: base05
37
+ },
38
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
39
+ backgroundColor: base02
40
+ },
41
+ '.cm-searchMatch': {
42
+ backgroundColor: base0C,
43
+ outline: `1px solid ${base03}`,
44
+ color: base07
45
+ },
46
+ '.cm-searchMatch.cm-searchMatch-selected': {
47
+ backgroundColor: base11,
48
+ color: base07
49
+ },
50
+ '.cm-panels': {
51
+ backgroundColor: base03,
52
+ color: base01
53
+ },
54
+ '.cm-activeLine': {
55
+ backgroundColor: base06
56
+ },
57
+ '.cm-gutters': {
58
+ backgroundColor: base03, // Assuming the dropdown background color for gutters
59
+ color: base01
60
+ },
61
+ '.cm-tooltip': {
62
+ backgroundColor: base01
63
+ }
64
+ }, { dark: true });
65
+ // Define the highlighting style for code in the Abyss theme.
66
+ const abyssHighlightStyle = language.HighlightStyle.define([
67
+ { tag: highlight.tags.keyword, color: base08, fontWeight: 'bold' },
68
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base09 },
69
+ { tag: [highlight.tags.propertyName], color: base0C },
70
+ { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted, highlight.tags.special(highlight.tags.string)], color: base0B },
71
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base0C },
72
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base0D },
73
+ { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base09 },
74
+ { tag: [highlight.tags.className], color: base0E },
75
+ { tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: base0D },
76
+ { tag: [highlight.tags.typeName], color: base0C },
77
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base08 },
78
+ { tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link], color: base0B },
79
+ { tag: [highlight.tags.meta, highlight.tags.comment], color: base0A },
80
+ { tag: highlight.tags.tagName, color: base10 },
81
+ { tag: highlight.tags.strong, fontWeight: 'bold' },
82
+ { tag: highlight.tags.emphasis, fontStyle: 'italic' },
83
+ { tag: highlight.tags.link, textDecoration: 'underline' },
84
+ { tag: highlight.tags.heading, fontWeight: 'bold', color: base0F },
85
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base09 },
86
+ { tag: highlight.tags.invalid, color: invalid, textDecoration: 'underline' }
87
+ ]);
88
+ // Extension to enable the Abyss theme (both the editor theme and the highlight style).
89
+ const abyss = [
90
+ abyssTheme,
91
+ language.syntaxHighlighting(abyssHighlightStyle)
92
+ ];
93
+
94
+ exports.abyss = abyss;
95
+ exports.abyssHighlightStyle = abyssHighlightStyle;
96
+ exports.abyssTheme = abyssTheme;
package/dist/index.d.cts ADDED
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const abyssTheme: Extension;
5
+ declare const abyssHighlightStyle: HighlightStyle;
6
+ declare const abyss: Extension;
7
+
8
+ export { abyss, abyssHighlightStyle, abyssTheme };
package/dist/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const abyssTheme: Extension;
5
+ declare const abyssHighlightStyle: HighlightStyle;
6
+ declare const abyss: Extension;
7
+
8
+ export { abyss, abyssHighlightStyle, abyssTheme };
package/dist/index.js ADDED
@@ -0,0 +1,92 @@
1
+ import { EditorView } from '@codemirror/view';
2
+ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
+ import { tags } from '@lezer/highlight';
4
+
5
+ // Abyss theme colors
6
+ const base00 = '#000c18', // Background
7
+ base01 = '#6688cc', // Foreground
8
+ base02 = '#770811', // Selection
9
+ base03 = '#181f2f', // Dropdown Background
10
+ base05 = '#ddbb88', // Cursor
11
+ base06 = '#0055ff30', // Active line
12
+ base07 = '#FFFFFF', // Another placeholder
13
+ base08 = '#225588', // Keyword, Storage
14
+ base09 = '#2277ff', // Variable, Parameter
15
+ base0A = '#384887', // Comment
16
+ base0B = '#22aa44', // String, RegExp
17
+ base0C = '#9966b8', // Function, Type
18
+ base0D = '#f280d0', // Constant, Number
19
+ base0E = '#ddbb88', // Class
20
+ base0F = '#6688cc', // Heading
21
+ base10 = '#225588', // Tag
22
+ base11 = '#ff00ff8a', // Link
23
+ invalid = '#A22D44'; // Invalid
24
+ // Define the editor theme styles for Abyss.
25
+ const abyssTheme = /*@__PURE__*/EditorView.theme({
26
+ '&': {
27
+ color: base01,
28
+ backgroundColor: base00
29
+ },
30
+ '.cm-content': {
31
+ caretColor: base05
32
+ },
33
+ '.cm-cursor, .cm-dropCursor': {
34
+ borderLeftColor: base05
35
+ },
36
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
37
+ backgroundColor: base02
38
+ },
39
+ '.cm-searchMatch': {
40
+ backgroundColor: base0C,
41
+ outline: `1px solid ${base03}`,
42
+ color: base07
43
+ },
44
+ '.cm-searchMatch.cm-searchMatch-selected': {
45
+ backgroundColor: base11,
46
+ color: base07
47
+ },
48
+ '.cm-panels': {
49
+ backgroundColor: base03,
50
+ color: base01
51
+ },
52
+ '.cm-activeLine': {
53
+ backgroundColor: base06
54
+ },
55
+ '.cm-gutters': {
56
+ backgroundColor: base03, // Assuming the dropdown background color for gutters
57
+ color: base01
58
+ },
59
+ '.cm-tooltip': {
60
+ backgroundColor: base01
61
+ }
62
+ }, { dark: true });
63
+ // Define the highlighting style for code in the Abyss theme.
64
+ const abyssHighlightStyle = /*@__PURE__*/HighlightStyle.define([
65
+ { tag: tags.keyword, color: base08, fontWeight: 'bold' },
66
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base09 },
67
+ { tag: [tags.propertyName], color: base0C },
68
+ { tag: [tags.processingInstruction, tags.string, tags.inserted, /*@__PURE__*/tags.special(tags.string)], color: base0B },
69
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base0C },
70
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base0D },
71
+ { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base09 },
72
+ { tag: [tags.className], color: base0E },
73
+ { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: base0D },
74
+ { tag: [tags.typeName], color: base0C },
75
+ { tag: [tags.operator, tags.operatorKeyword], color: base08 },
76
+ { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: base0B },
77
+ { tag: [tags.meta, tags.comment], color: base0A },
78
+ { tag: tags.tagName, color: base10 },
79
+ { tag: tags.strong, fontWeight: 'bold' },
80
+ { tag: tags.emphasis, fontStyle: 'italic' },
81
+ { tag: tags.link, textDecoration: 'underline' },
82
+ { tag: tags.heading, fontWeight: 'bold', color: base0F },
83
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base09 },
84
+ { tag: tags.invalid, color: invalid, textDecoration: 'underline' }
85
+ ]);
86
+ // Extension to enable the Abyss theme (both the editor theme and the highlight style).
87
+ const abyss = [
88
+ abyssTheme,
89
+ /*@__PURE__*/syntaxHighlighting(abyssHighlightStyle)
90
+ ];
91
+
92
+ export { abyss, abyssHighlightStyle, abyssTheme };
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@fsegurai/codemirror-theme-abyss",
3
+ "description": "Abyss theme for the CodeMirror code editor",
4
+ "version": "6.0.1-alpha.0",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "exports": {
8
+ "import": "./dist/index.js",
9
+ "require": "./dist/index.cjs"
10
+ },
11
+ "types": "dist/index.d.ts",
12
+ "module": "dist/index.js",
13
+ "sideEffects": false,
14
+ "scripts": {
15
+ "test": "cm-runtests",
16
+ "prepare": "cm-buildhelper src/index.ts"
17
+ },
18
+ "keywords": [
19
+ "editor",
20
+ "code",
21
+ "codemirror"
22
+ ],
23
+ "author": {
24
+ "name": "Fabián Segura",
25
+ "url": "https://www.fsegurai.com/"
26
+ },
27
+ "license": "MIT",
28
+ "repository": {
29
+ "type": "git",
30
+ "url": "git+https://github.com/fsegurai/codemirror-themes.git"
31
+ },
32
+ "bugs": {
33
+ "url": "https://github.com/fsegurai/codemirror-themes/issues"
34
+ },
35
+ "homepage": "https://github.com/fsegurai/codemirror-themes#readme",
36
+ "peerDependencies": {
37
+ "@lezer/highlight": "^1.0.0",
38
+ "@codemirror/language": "^6.0.0",
39
+ "@codemirror/state": "^6.0.0",
40
+ "@codemirror/view": "^6.0.0"
41
+ },
42
+ "devDependencies": {
43
+ "@codemirror/buildhelper": "^1.0.1"
44
+ }
45
+ }