@fsegurai/codemirror-theme-basic-dark 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.
package/README.md ADDED
@@ -0,0 +1,28 @@
1
+ <!-- NOTE: README.md is generated from src/README.md -->
2
+
3
+ # @fsegurai/codemirror-theme-basic-dark [![NPM version](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-basic-dark.svg)](https://www.npmjs.org/package/@fsegurai/codemirror-theme-basic-dark)
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 Basic Dark 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
+ @basicDark
25
+
26
+ @basicDarkTheme
27
+
28
+ @basicDarkHighlightStyle
package/dist/index.cjs ADDED
@@ -0,0 +1,178 @@
1
+ 'use strict';
2
+
3
+ var view = require('@codemirror/view');
4
+ var language = require('@codemirror/language');
5
+ var highlight = require('@lezer/highlight');
6
+
7
+ const base00 = '#2E3235', base01 = '#DDDDDD', base02 = '#B9D2FF', base03 = '#b0b0b0', base05 = '#e0e0e0', base06 = '#808080', base07 = '#000000', base08 = '#A54543', base09 = '#fc6d24', base0A = '#fda331', base0B = '#8abeb7', base0C = '#b5bd68', base0D = '#6fb3d2', base0E = '#cc99cc', base0F = '#6987AF';
8
+ const invalid = base09, darkBackground = '#292d30', highlightBackground = base02 + '30', background = base00, tooltipBackground = base01, selection = '#202325', cursor = base01;
9
+ /// The editor theme styles for Basic Dark.
10
+ const basicDarkTheme = view.EditorView.theme({
11
+ '&': {
12
+ color: base01,
13
+ backgroundColor: background
14
+ },
15
+ '.cm-content': {
16
+ caretColor: cursor
17
+ },
18
+ '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
19
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
20
+ '.cm-panels': { backgroundColor: darkBackground, color: base03 },
21
+ '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
22
+ '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
23
+ '.cm-searchMatch': {
24
+ backgroundColor: base02,
25
+ outline: `1px solid ${base03}`,
26
+ color: base07
27
+ },
28
+ '.cm-searchMatch.cm-searchMatch-selected': {
29
+ backgroundColor: base05,
30
+ color: base07
31
+ },
32
+ '.cm-activeLine': { backgroundColor: highlightBackground },
33
+ '.cm-selectionMatch': { backgroundColor: highlightBackground },
34
+ '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
35
+ outline: `1px solid ${base03}`
36
+ },
37
+ '&.cm-focused .cm-matchingBracket': {
38
+ backgroundColor: base02,
39
+ color: base07
40
+ },
41
+ '.cm-gutters': {
42
+ borderRight: `1px solid #ffffff10`,
43
+ color: base06,
44
+ backgroundColor: darkBackground
45
+ },
46
+ '.cm-activeLineGutter': {
47
+ backgroundColor: highlightBackground
48
+ },
49
+ '.cm-foldPlaceholder': {
50
+ backgroundColor: 'transparent',
51
+ border: 'none',
52
+ color: base02
53
+ },
54
+ '.cm-tooltip': {
55
+ border: 'none',
56
+ backgroundColor: tooltipBackground
57
+ },
58
+ '.cm-tooltip .cm-tooltip-arrow:before': {
59
+ borderTopColor: 'transparent',
60
+ borderBottomColor: 'transparent'
61
+ },
62
+ '.cm-tooltip .cm-tooltip-arrow:after': {
63
+ borderTopColor: tooltipBackground,
64
+ borderBottomColor: tooltipBackground
65
+ },
66
+ '.cm-tooltip-autocomplete': {
67
+ '& > ul > li[aria-selected]': {
68
+ backgroundColor: highlightBackground,
69
+ color: base03
70
+ }
71
+ }
72
+ }, { dark: true });
73
+ /// The highlighting style for code in the Basic Light theme.
74
+ const basicDarkHighlightStyle = language.HighlightStyle.define([
75
+ { tag: highlight.tags.keyword, color: base0A },
76
+ {
77
+ tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
78
+ color: base0C
79
+ },
80
+ { tag: [highlight.tags.variableName], color: base0D },
81
+ { tag: [highlight.tags.function(highlight.tags.variableName)], color: base0A },
82
+ { tag: [highlight.tags.labelName], color: base09 },
83
+ {
84
+ tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
85
+ color: base0A
86
+ },
87
+ { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base0E },
88
+ { tag: [highlight.tags.brace], color: base0E },
89
+ {
90
+ tag: [highlight.tags.annotation],
91
+ color: invalid
92
+ },
93
+ {
94
+ tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
95
+ color: base0A
96
+ },
97
+ {
98
+ tag: [highlight.tags.typeName, highlight.tags.className],
99
+ color: base0D
100
+ },
101
+ {
102
+ tag: [highlight.tags.operator, highlight.tags.operatorKeyword],
103
+ color: base0E
104
+ },
105
+ {
106
+ tag: [highlight.tags.tagName],
107
+ color: base0A
108
+ },
109
+ {
110
+ tag: [highlight.tags.squareBracket],
111
+ color: base0E
112
+ },
113
+ {
114
+ tag: [highlight.tags.angleBracket],
115
+ color: base0E
116
+ },
117
+ {
118
+ tag: [highlight.tags.attributeName],
119
+ color: base0D
120
+ },
121
+ {
122
+ tag: [highlight.tags.regexp],
123
+ color: base0A
124
+ },
125
+ {
126
+ tag: [highlight.tags.quote],
127
+ color: base01
128
+ },
129
+ { tag: [highlight.tags.string], color: base0C },
130
+ {
131
+ tag: highlight.tags.link,
132
+ color: base0F,
133
+ textDecoration: 'underline',
134
+ textUnderlinePosition: 'under'
135
+ },
136
+ {
137
+ tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
138
+ color: base0B
139
+ },
140
+ { tag: [highlight.tags.meta], color: base08 },
141
+ { tag: [highlight.tags.comment], color: base06, fontStyle: 'italic' },
142
+ { tag: highlight.tags.monospace, color: base01 },
143
+ { tag: highlight.tags.strong, fontWeight: 'bold', color: base0A },
144
+ { tag: highlight.tags.emphasis, fontStyle: 'italic', color: base0D },
145
+ { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
146
+ { tag: highlight.tags.heading, fontWeight: 'bold', color: base01 },
147
+ { tag: highlight.tags.special(highlight.tags.heading1), fontWeight: 'bold', color: base01 },
148
+ { tag: highlight.tags.heading1, fontWeight: 'bold', color: base01 },
149
+ {
150
+ tag: [highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4],
151
+ fontWeight: 'bold',
152
+ color: base01
153
+ },
154
+ {
155
+ tag: [highlight.tags.heading5, highlight.tags.heading6],
156
+ color: base01
157
+ },
158
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0B },
159
+ {
160
+ tag: [highlight.tags.processingInstruction, highlight.tags.inserted],
161
+ color: base0B
162
+ },
163
+ {
164
+ tag: [highlight.tags.contentSeparator],
165
+ color: base0D
166
+ },
167
+ { tag: highlight.tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` }
168
+ ]);
169
+ /// Extension to enable the Basic Dark theme (both the editor theme and
170
+ /// the highlight style).
171
+ const basicDark = [
172
+ basicDarkTheme,
173
+ language.syntaxHighlighting(basicDarkHighlightStyle)
174
+ ];
175
+
176
+ exports.basicDark = basicDark;
177
+ exports.basicDarkHighlightStyle = basicDarkHighlightStyle;
178
+ exports.basicDarkTheme = basicDarkTheme;
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const basicDarkTheme: Extension;
5
+ declare const basicDarkHighlightStyle: HighlightStyle;
6
+ declare const basicDark: Extension;
7
+
8
+ export { basicDark, basicDarkHighlightStyle, basicDarkTheme };
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const basicDarkTheme: Extension;
5
+ declare const basicDarkHighlightStyle: HighlightStyle;
6
+ declare const basicDark: Extension;
7
+
8
+ export { basicDark, basicDarkHighlightStyle, basicDarkTheme };
package/dist/index.js ADDED
@@ -0,0 +1,174 @@
1
+ import { EditorView } from '@codemirror/view';
2
+ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
+ import { tags } from '@lezer/highlight';
4
+
5
+ const base00 = '#2E3235', base01 = '#DDDDDD', base02 = '#B9D2FF', base03 = '#b0b0b0', base05 = '#e0e0e0', base06 = '#808080', base07 = '#000000', base08 = '#A54543', base09 = '#fc6d24', base0A = '#fda331', base0B = '#8abeb7', base0C = '#b5bd68', base0D = '#6fb3d2', base0E = '#cc99cc', base0F = '#6987AF';
6
+ const invalid = base09, darkBackground = '#292d30', highlightBackground = base02 + '30', background = base00, tooltipBackground = base01, selection = '#202325', cursor = base01;
7
+ /// The editor theme styles for Basic Dark.
8
+ const basicDarkTheme = /*@__PURE__*/EditorView.theme({
9
+ '&': {
10
+ color: base01,
11
+ backgroundColor: background
12
+ },
13
+ '.cm-content': {
14
+ caretColor: cursor
15
+ },
16
+ '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
17
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
18
+ '.cm-panels': { backgroundColor: darkBackground, color: base03 },
19
+ '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
20
+ '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
21
+ '.cm-searchMatch': {
22
+ backgroundColor: base02,
23
+ outline: `1px solid ${base03}`,
24
+ color: base07
25
+ },
26
+ '.cm-searchMatch.cm-searchMatch-selected': {
27
+ backgroundColor: base05,
28
+ color: base07
29
+ },
30
+ '.cm-activeLine': { backgroundColor: highlightBackground },
31
+ '.cm-selectionMatch': { backgroundColor: highlightBackground },
32
+ '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
33
+ outline: `1px solid ${base03}`
34
+ },
35
+ '&.cm-focused .cm-matchingBracket': {
36
+ backgroundColor: base02,
37
+ color: base07
38
+ },
39
+ '.cm-gutters': {
40
+ borderRight: `1px solid #ffffff10`,
41
+ color: base06,
42
+ backgroundColor: darkBackground
43
+ },
44
+ '.cm-activeLineGutter': {
45
+ backgroundColor: highlightBackground
46
+ },
47
+ '.cm-foldPlaceholder': {
48
+ backgroundColor: 'transparent',
49
+ border: 'none',
50
+ color: base02
51
+ },
52
+ '.cm-tooltip': {
53
+ border: 'none',
54
+ backgroundColor: tooltipBackground
55
+ },
56
+ '.cm-tooltip .cm-tooltip-arrow:before': {
57
+ borderTopColor: 'transparent',
58
+ borderBottomColor: 'transparent'
59
+ },
60
+ '.cm-tooltip .cm-tooltip-arrow:after': {
61
+ borderTopColor: tooltipBackground,
62
+ borderBottomColor: tooltipBackground
63
+ },
64
+ '.cm-tooltip-autocomplete': {
65
+ '& > ul > li[aria-selected]': {
66
+ backgroundColor: highlightBackground,
67
+ color: base03
68
+ }
69
+ }
70
+ }, { dark: true });
71
+ /// The highlighting style for code in the Basic Light theme.
72
+ const basicDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([
73
+ { tag: tags.keyword, color: base0A },
74
+ {
75
+ tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
76
+ color: base0C
77
+ },
78
+ { tag: [tags.variableName], color: base0D },
79
+ { tag: [/*@__PURE__*/tags.function(tags.variableName)], color: base0A },
80
+ { tag: [tags.labelName], color: base09 },
81
+ {
82
+ tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)],
83
+ color: base0A
84
+ },
85
+ { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base0E },
86
+ { tag: [tags.brace], color: base0E },
87
+ {
88
+ tag: [tags.annotation],
89
+ color: invalid
90
+ },
91
+ {
92
+ tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
93
+ color: base0A
94
+ },
95
+ {
96
+ tag: [tags.typeName, tags.className],
97
+ color: base0D
98
+ },
99
+ {
100
+ tag: [tags.operator, tags.operatorKeyword],
101
+ color: base0E
102
+ },
103
+ {
104
+ tag: [tags.tagName],
105
+ color: base0A
106
+ },
107
+ {
108
+ tag: [tags.squareBracket],
109
+ color: base0E
110
+ },
111
+ {
112
+ tag: [tags.angleBracket],
113
+ color: base0E
114
+ },
115
+ {
116
+ tag: [tags.attributeName],
117
+ color: base0D
118
+ },
119
+ {
120
+ tag: [tags.regexp],
121
+ color: base0A
122
+ },
123
+ {
124
+ tag: [tags.quote],
125
+ color: base01
126
+ },
127
+ { tag: [tags.string], color: base0C },
128
+ {
129
+ tag: tags.link,
130
+ color: base0F,
131
+ textDecoration: 'underline',
132
+ textUnderlinePosition: 'under'
133
+ },
134
+ {
135
+ tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)],
136
+ color: base0B
137
+ },
138
+ { tag: [tags.meta], color: base08 },
139
+ { tag: [tags.comment], color: base06, fontStyle: 'italic' },
140
+ { tag: tags.monospace, color: base01 },
141
+ { tag: tags.strong, fontWeight: 'bold', color: base0A },
142
+ { tag: tags.emphasis, fontStyle: 'italic', color: base0D },
143
+ { tag: tags.strikethrough, textDecoration: 'line-through' },
144
+ { tag: tags.heading, fontWeight: 'bold', color: base01 },
145
+ { tag: /*@__PURE__*/tags.special(tags.heading1), fontWeight: 'bold', color: base01 },
146
+ { tag: tags.heading1, fontWeight: 'bold', color: base01 },
147
+ {
148
+ tag: [tags.heading2, tags.heading3, tags.heading4],
149
+ fontWeight: 'bold',
150
+ color: base01
151
+ },
152
+ {
153
+ tag: [tags.heading5, tags.heading6],
154
+ color: base01
155
+ },
156
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0B },
157
+ {
158
+ tag: [tags.processingInstruction, tags.inserted],
159
+ color: base0B
160
+ },
161
+ {
162
+ tag: [tags.contentSeparator],
163
+ color: base0D
164
+ },
165
+ { tag: tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` }
166
+ ]);
167
+ /// Extension to enable the Basic Dark theme (both the editor theme and
168
+ /// the highlight style).
169
+ const basicDark = [
170
+ basicDarkTheme,
171
+ /*@__PURE__*/syntaxHighlighting(basicDarkHighlightStyle)
172
+ ];
173
+
174
+ export { basicDark, basicDarkHighlightStyle, basicDarkTheme };
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@fsegurai/codemirror-theme-basic-dark",
3
+ "description": "Basic Dark 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
+ }