@fsegurai/codemirror-theme-gruvbox-light 6.0.3 → 6.0.6
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 +27 -27
- package/dist/index.cjs +57 -51
- package/dist/index.d.cts +10 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +57 -51
- package/package.json +45 -45
package/README.md
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
<!-- NOTE: README.md is generated from src/README.md -->
|
|
2
|
-
|
|
3
|
-
# @fsegurai/codemirror-theme-gruvbox-light [](https://www.npmjs.org/package/@fsegurai/codemirror-theme-gruvbox-light)
|
|
4
|
-
|
|
5
|
-
[ [**WEBSITE**](https://codemirror.net/6/) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**DEMO**](https://fsegurai.github.io/codemirror-themes/) ]
|
|
6
|
-
|
|
7
|
-
This package implements the Gruvbox Light 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
|
-
@gruvboxLight
|
|
25
|
-
|
|
26
|
-
@gruvboxLightTheme
|
|
27
|
-
|
|
1
|
+
<!-- NOTE: README.md is generated from src/README.md -->
|
|
2
|
+
|
|
3
|
+
# @fsegurai/codemirror-theme-gruvbox-light [](https://www.npmjs.org/package/@fsegurai/codemirror-theme-gruvbox-light)
|
|
4
|
+
|
|
5
|
+
[ [**WEBSITE**](https://codemirror.net/6/) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**DEMO**](https://fsegurai.github.io/codemirror-themes/) ]
|
|
6
|
+
|
|
7
|
+
This package implements the Gruvbox Light 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
|
+
@gruvboxLight
|
|
25
|
+
|
|
26
|
+
@gruvboxLightTheme
|
|
27
|
+
|
|
28
28
|
@gruvboxLightHighlightStyle
|
package/dist/index.cjs
CHANGED
|
@@ -4,139 +4,143 @@ var view = require('@codemirror/view');
|
|
|
4
4
|
var language = require('@codemirror/language');
|
|
5
5
|
var highlight = require('@lezer/highlight');
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
const bg0 = light0, bg1 = light1,
|
|
7
|
+
const dark0 = '#3c3836', dark1 = '#504945', dark2 = '#665c54', dark3 = '#7c6f64', gray_244 = '#928374', light0 = '#fbf1c7', light1 = '#ebdbb2', light2 = '#bdae93', faded_red = '#9d0006', faded_green = '#79740e', faded_yellow = '#b57614', faded_blue = '#076678', faded_purple = '#8f3f71', faded_aqua = '#427b58', faded_orange = '#af3a03';
|
|
8
|
+
const bg0 = light0, bg1 = light1, bg2 = light2, gray = gray_244, fg0 = dark0, fg1 = dark1, fg2 = dark2, fg3 = dark3, red = faded_red, green = faded_green, yellow = faded_yellow, blue = faded_blue, purple = faded_purple, aqua = faded_aqua, orange = faded_orange;
|
|
9
9
|
const invalid = red, darkBackground = bg1, highlightBackground = '#ffc42e52', background = bg0, tooltipBackground = bg1, selection = darkBackground, selectionMatch = '#ffc42e', cursor = orange;
|
|
10
|
-
|
|
10
|
+
/**
|
|
11
|
+
The editor theme styles for Gruvbox Light.
|
|
12
|
+
*/
|
|
11
13
|
const gruvboxLightTheme = view.EditorView.theme({
|
|
12
14
|
'&': {
|
|
13
|
-
color:
|
|
14
|
-
backgroundColor: background
|
|
15
|
+
color: fg0,
|
|
16
|
+
backgroundColor: background,
|
|
15
17
|
},
|
|
16
18
|
'.cm-content': {
|
|
17
|
-
caretColor: cursor
|
|
19
|
+
caretColor: cursor,
|
|
18
20
|
},
|
|
19
21
|
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
|
|
20
22
|
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
|
|
21
|
-
'.cm-panels': { backgroundColor: darkBackground, color:
|
|
23
|
+
'.cm-panels': { backgroundColor: darkBackground, color: fg0 },
|
|
22
24
|
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
|
|
23
25
|
'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
|
|
24
26
|
'.cm-searchMatch': {
|
|
25
27
|
backgroundColor: highlightBackground,
|
|
26
28
|
color: yellow,
|
|
27
|
-
outline: `1px solid ${
|
|
29
|
+
outline: `1px solid ${bg2}`,
|
|
28
30
|
},
|
|
29
31
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
30
|
-
backgroundColor: selectionMatch
|
|
32
|
+
backgroundColor: selectionMatch,
|
|
31
33
|
},
|
|
32
34
|
'.cm-activeLine': { backgroundColor: highlightBackground },
|
|
33
|
-
'.cm-selectionMatch': { backgroundColor:
|
|
35
|
+
'.cm-selectionMatch': { backgroundColor: bg2 },
|
|
34
36
|
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
|
35
|
-
outline: `1px solid ${
|
|
36
|
-
fontStyle: 'bold'
|
|
37
|
+
outline: `1px solid ${bg2}`,
|
|
38
|
+
fontStyle: 'bold',
|
|
37
39
|
},
|
|
38
40
|
'&.cm-focused .cm-matchingBracket': {
|
|
39
|
-
backgroundColor:
|
|
41
|
+
backgroundColor: bg2,
|
|
40
42
|
},
|
|
41
43
|
'.cm-gutters': {
|
|
42
44
|
backgroundColor: bg1,
|
|
43
|
-
color:
|
|
44
|
-
border: 'none'
|
|
45
|
+
color: fg2,
|
|
46
|
+
border: 'none',
|
|
45
47
|
},
|
|
46
48
|
'.cm-activeLineGutter': {
|
|
47
|
-
backgroundColor: selectionMatch
|
|
49
|
+
backgroundColor: selectionMatch,
|
|
48
50
|
},
|
|
49
51
|
'.cm-foldPlaceholder': {
|
|
50
52
|
backgroundColor: 'transparent',
|
|
51
53
|
border: 'none',
|
|
52
|
-
color: '#ddd'
|
|
54
|
+
color: '#ddd',
|
|
53
55
|
},
|
|
54
56
|
'.cm-tooltip': {
|
|
55
57
|
border: 'none',
|
|
56
|
-
backgroundColor: tooltipBackground
|
|
58
|
+
backgroundColor: tooltipBackground,
|
|
57
59
|
},
|
|
58
60
|
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
59
61
|
borderTopColor: 'transparent',
|
|
60
|
-
borderBottomColor: 'transparent'
|
|
62
|
+
borderBottomColor: 'transparent',
|
|
61
63
|
},
|
|
62
64
|
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
63
65
|
borderTopColor: tooltipBackground,
|
|
64
|
-
borderBottomColor: tooltipBackground
|
|
66
|
+
borderBottomColor: tooltipBackground,
|
|
65
67
|
},
|
|
66
68
|
'.cm-tooltip-autocomplete': {
|
|
67
69
|
'& > ul > li[aria-selected]': {
|
|
68
70
|
backgroundColor: highlightBackground,
|
|
69
|
-
color:
|
|
70
|
-
}
|
|
71
|
-
}
|
|
71
|
+
color: fg1,
|
|
72
|
+
},
|
|
73
|
+
},
|
|
72
74
|
}, { dark: false });
|
|
73
|
-
|
|
75
|
+
/**
|
|
76
|
+
The highlighting style for code in the Gruvbox Light theme.
|
|
77
|
+
*/
|
|
74
78
|
const gruvboxLightHighlightStyle = language.HighlightStyle.define([
|
|
75
79
|
{ tag: highlight.tags.keyword, color: red },
|
|
76
80
|
{
|
|
77
81
|
tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
|
|
78
|
-
color: aqua
|
|
82
|
+
color: aqua,
|
|
79
83
|
},
|
|
80
84
|
{ tag: [highlight.tags.variableName], color: blue },
|
|
81
85
|
{ tag: [highlight.tags.function(highlight.tags.variableName)], color: green, fontStyle: 'bold' },
|
|
82
|
-
{ tag: [highlight.tags.labelName], color:
|
|
86
|
+
{ tag: [highlight.tags.labelName], color: fg0 },
|
|
83
87
|
{
|
|
84
88
|
tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
|
|
85
|
-
color: purple
|
|
89
|
+
color: purple,
|
|
86
90
|
},
|
|
87
|
-
{ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color:
|
|
88
|
-
{ tag: [highlight.tags.brace], color:
|
|
91
|
+
{ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: fg0 },
|
|
92
|
+
{ tag: [highlight.tags.brace], color: fg0 },
|
|
89
93
|
{
|
|
90
94
|
tag: [highlight.tags.annotation],
|
|
91
|
-
color: invalid
|
|
95
|
+
color: invalid,
|
|
92
96
|
},
|
|
93
97
|
{
|
|
94
98
|
tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
|
|
95
|
-
color: purple
|
|
99
|
+
color: purple,
|
|
96
100
|
},
|
|
97
101
|
{
|
|
98
102
|
tag: [highlight.tags.typeName, highlight.tags.className],
|
|
99
|
-
color: yellow
|
|
103
|
+
color: yellow,
|
|
100
104
|
},
|
|
101
105
|
{
|
|
102
106
|
tag: [highlight.tags.operator, highlight.tags.operatorKeyword],
|
|
103
|
-
color: red
|
|
107
|
+
color: red,
|
|
104
108
|
},
|
|
105
109
|
{
|
|
106
110
|
tag: [highlight.tags.tagName],
|
|
107
111
|
color: aqua,
|
|
108
|
-
fontStyle: 'bold'
|
|
112
|
+
fontStyle: 'bold',
|
|
109
113
|
},
|
|
110
114
|
{
|
|
111
115
|
tag: [highlight.tags.squareBracket],
|
|
112
|
-
color: orange
|
|
116
|
+
color: orange,
|
|
113
117
|
},
|
|
114
118
|
{
|
|
115
119
|
tag: [highlight.tags.angleBracket],
|
|
116
|
-
color: blue
|
|
120
|
+
color: blue,
|
|
117
121
|
},
|
|
118
122
|
{
|
|
119
123
|
tag: [highlight.tags.attributeName],
|
|
120
|
-
color: aqua
|
|
124
|
+
color: aqua,
|
|
121
125
|
},
|
|
122
126
|
{
|
|
123
127
|
tag: [highlight.tags.regexp],
|
|
124
|
-
color: aqua
|
|
128
|
+
color: aqua,
|
|
125
129
|
},
|
|
126
130
|
{
|
|
127
131
|
tag: [highlight.tags.quote],
|
|
128
|
-
color: gray
|
|
132
|
+
color: gray,
|
|
129
133
|
},
|
|
130
|
-
{ tag: [highlight.tags.string], color:
|
|
134
|
+
{ tag: [highlight.tags.string], color: fg0 },
|
|
131
135
|
{
|
|
132
136
|
tag: highlight.tags.link,
|
|
133
|
-
color:
|
|
137
|
+
color: fg3,
|
|
134
138
|
textDecoration: 'underline',
|
|
135
|
-
textUnderlinePosition: 'under'
|
|
139
|
+
textUnderlinePosition: 'under',
|
|
136
140
|
},
|
|
137
141
|
{
|
|
138
142
|
tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
|
|
139
|
-
color: purple
|
|
143
|
+
color: purple,
|
|
140
144
|
},
|
|
141
145
|
{ tag: [highlight.tags.meta], color: yellow },
|
|
142
146
|
{ tag: [highlight.tags.comment], color: gray, fontStyle: 'italic' },
|
|
@@ -148,28 +152,30 @@ const gruvboxLightHighlightStyle = language.HighlightStyle.define([
|
|
|
148
152
|
{
|
|
149
153
|
tag: [highlight.tags.heading3, highlight.tags.heading4],
|
|
150
154
|
fontWeight: 'bold',
|
|
151
|
-
color: yellow
|
|
155
|
+
color: yellow,
|
|
152
156
|
},
|
|
153
157
|
{
|
|
154
158
|
tag: [highlight.tags.heading5, highlight.tags.heading6],
|
|
155
|
-
color: yellow
|
|
159
|
+
color: yellow,
|
|
156
160
|
},
|
|
157
161
|
{ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: purple },
|
|
158
162
|
{
|
|
159
163
|
tag: [highlight.tags.processingInstruction, highlight.tags.inserted],
|
|
160
|
-
color: blue
|
|
164
|
+
color: blue,
|
|
161
165
|
},
|
|
162
166
|
{
|
|
163
167
|
tag: [highlight.tags.contentSeparator],
|
|
164
|
-
color: red
|
|
168
|
+
color: red,
|
|
165
169
|
},
|
|
166
|
-
{ tag: highlight.tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` }
|
|
170
|
+
{ tag: highlight.tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` },
|
|
167
171
|
]);
|
|
168
|
-
|
|
169
|
-
|
|
172
|
+
/**
|
|
173
|
+
Extension to enable the Gruvbox Light theme (both the editor theme and
|
|
174
|
+
the highlight style).
|
|
175
|
+
*/
|
|
170
176
|
const gruvboxLight = [
|
|
171
177
|
gruvboxLightTheme,
|
|
172
|
-
language.syntaxHighlighting(gruvboxLightHighlightStyle)
|
|
178
|
+
language.syntaxHighlighting(gruvboxLightHighlightStyle),
|
|
173
179
|
];
|
|
174
180
|
|
|
175
181
|
exports.gruvboxLight = gruvboxLight;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import { Extension } from '@codemirror/state';
|
|
2
2
|
import { HighlightStyle } from '@codemirror/language';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
The editor theme styles for Gruvbox Light.
|
|
6
|
+
*/
|
|
4
7
|
declare const gruvboxLightTheme: Extension;
|
|
8
|
+
/**
|
|
9
|
+
The highlighting style for code in the Gruvbox Light theme.
|
|
10
|
+
*/
|
|
5
11
|
declare const gruvboxLightHighlightStyle: HighlightStyle;
|
|
12
|
+
/**
|
|
13
|
+
Extension to enable the Gruvbox Light theme (both the editor theme and
|
|
14
|
+
the highlight style).
|
|
15
|
+
*/
|
|
6
16
|
declare const gruvboxLight: Extension;
|
|
7
17
|
|
|
8
18
|
export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import { Extension } from '@codemirror/state';
|
|
2
2
|
import { HighlightStyle } from '@codemirror/language';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
The editor theme styles for Gruvbox Light.
|
|
6
|
+
*/
|
|
4
7
|
declare const gruvboxLightTheme: Extension;
|
|
8
|
+
/**
|
|
9
|
+
The highlighting style for code in the Gruvbox Light theme.
|
|
10
|
+
*/
|
|
5
11
|
declare const gruvboxLightHighlightStyle: HighlightStyle;
|
|
12
|
+
/**
|
|
13
|
+
Extension to enable the Gruvbox Light theme (both the editor theme and
|
|
14
|
+
the highlight style).
|
|
15
|
+
*/
|
|
6
16
|
declare const gruvboxLight: Extension;
|
|
7
17
|
|
|
8
18
|
export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
|
package/dist/index.js
CHANGED
|
@@ -2,139 +2,143 @@ import { EditorView } from '@codemirror/view';
|
|
|
2
2
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
|
3
3
|
import { tags } from '@lezer/highlight';
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
const bg0 = light0, bg1 = light1,
|
|
5
|
+
const dark0 = '#3c3836', dark1 = '#504945', dark2 = '#665c54', dark3 = '#7c6f64', gray_244 = '#928374', light0 = '#fbf1c7', light1 = '#ebdbb2', light2 = '#bdae93', faded_red = '#9d0006', faded_green = '#79740e', faded_yellow = '#b57614', faded_blue = '#076678', faded_purple = '#8f3f71', faded_aqua = '#427b58', faded_orange = '#af3a03';
|
|
6
|
+
const bg0 = light0, bg1 = light1, bg2 = light2, gray = gray_244, fg0 = dark0, fg1 = dark1, fg2 = dark2, fg3 = dark3, red = faded_red, green = faded_green, yellow = faded_yellow, blue = faded_blue, purple = faded_purple, aqua = faded_aqua, orange = faded_orange;
|
|
7
7
|
const invalid = red, darkBackground = bg1, highlightBackground = '#ffc42e52', background = bg0, tooltipBackground = bg1, selection = darkBackground, selectionMatch = '#ffc42e', cursor = orange;
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
The editor theme styles for Gruvbox Light.
|
|
10
|
+
*/
|
|
9
11
|
const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
|
|
10
12
|
'&': {
|
|
11
|
-
color:
|
|
12
|
-
backgroundColor: background
|
|
13
|
+
color: fg0,
|
|
14
|
+
backgroundColor: background,
|
|
13
15
|
},
|
|
14
16
|
'.cm-content': {
|
|
15
|
-
caretColor: cursor
|
|
17
|
+
caretColor: cursor,
|
|
16
18
|
},
|
|
17
19
|
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
|
|
18
20
|
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
|
|
19
|
-
'.cm-panels': { backgroundColor: darkBackground, color:
|
|
21
|
+
'.cm-panels': { backgroundColor: darkBackground, color: fg0 },
|
|
20
22
|
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
|
|
21
23
|
'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
|
|
22
24
|
'.cm-searchMatch': {
|
|
23
25
|
backgroundColor: highlightBackground,
|
|
24
26
|
color: yellow,
|
|
25
|
-
outline: `1px solid ${
|
|
27
|
+
outline: `1px solid ${bg2}`,
|
|
26
28
|
},
|
|
27
29
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
28
|
-
backgroundColor: selectionMatch
|
|
30
|
+
backgroundColor: selectionMatch,
|
|
29
31
|
},
|
|
30
32
|
'.cm-activeLine': { backgroundColor: highlightBackground },
|
|
31
|
-
'.cm-selectionMatch': { backgroundColor:
|
|
33
|
+
'.cm-selectionMatch': { backgroundColor: bg2 },
|
|
32
34
|
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
|
33
|
-
outline: `1px solid ${
|
|
34
|
-
fontStyle: 'bold'
|
|
35
|
+
outline: `1px solid ${bg2}`,
|
|
36
|
+
fontStyle: 'bold',
|
|
35
37
|
},
|
|
36
38
|
'&.cm-focused .cm-matchingBracket': {
|
|
37
|
-
backgroundColor:
|
|
39
|
+
backgroundColor: bg2,
|
|
38
40
|
},
|
|
39
41
|
'.cm-gutters': {
|
|
40
42
|
backgroundColor: bg1,
|
|
41
|
-
color:
|
|
42
|
-
border: 'none'
|
|
43
|
+
color: fg2,
|
|
44
|
+
border: 'none',
|
|
43
45
|
},
|
|
44
46
|
'.cm-activeLineGutter': {
|
|
45
|
-
backgroundColor: selectionMatch
|
|
47
|
+
backgroundColor: selectionMatch,
|
|
46
48
|
},
|
|
47
49
|
'.cm-foldPlaceholder': {
|
|
48
50
|
backgroundColor: 'transparent',
|
|
49
51
|
border: 'none',
|
|
50
|
-
color: '#ddd'
|
|
52
|
+
color: '#ddd',
|
|
51
53
|
},
|
|
52
54
|
'.cm-tooltip': {
|
|
53
55
|
border: 'none',
|
|
54
|
-
backgroundColor: tooltipBackground
|
|
56
|
+
backgroundColor: tooltipBackground,
|
|
55
57
|
},
|
|
56
58
|
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
57
59
|
borderTopColor: 'transparent',
|
|
58
|
-
borderBottomColor: 'transparent'
|
|
60
|
+
borderBottomColor: 'transparent',
|
|
59
61
|
},
|
|
60
62
|
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
61
63
|
borderTopColor: tooltipBackground,
|
|
62
|
-
borderBottomColor: tooltipBackground
|
|
64
|
+
borderBottomColor: tooltipBackground,
|
|
63
65
|
},
|
|
64
66
|
'.cm-tooltip-autocomplete': {
|
|
65
67
|
'& > ul > li[aria-selected]': {
|
|
66
68
|
backgroundColor: highlightBackground,
|
|
67
|
-
color:
|
|
68
|
-
}
|
|
69
|
-
}
|
|
69
|
+
color: fg1,
|
|
70
|
+
},
|
|
71
|
+
},
|
|
70
72
|
}, { dark: false });
|
|
71
|
-
|
|
73
|
+
/**
|
|
74
|
+
The highlighting style for code in the Gruvbox Light theme.
|
|
75
|
+
*/
|
|
72
76
|
const gruvboxLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
73
77
|
{ tag: tags.keyword, color: red },
|
|
74
78
|
{
|
|
75
79
|
tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
|
|
76
|
-
color: aqua
|
|
80
|
+
color: aqua,
|
|
77
81
|
},
|
|
78
82
|
{ tag: [tags.variableName], color: blue },
|
|
79
83
|
{ tag: [/*@__PURE__*/tags.function(tags.variableName)], color: green, fontStyle: 'bold' },
|
|
80
|
-
{ tag: [tags.labelName], color:
|
|
84
|
+
{ tag: [tags.labelName], color: fg0 },
|
|
81
85
|
{
|
|
82
86
|
tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)],
|
|
83
|
-
color: purple
|
|
87
|
+
color: purple,
|
|
84
88
|
},
|
|
85
|
-
{ tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color:
|
|
86
|
-
{ tag: [tags.brace], color:
|
|
89
|
+
{ tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: fg0 },
|
|
90
|
+
{ tag: [tags.brace], color: fg0 },
|
|
87
91
|
{
|
|
88
92
|
tag: [tags.annotation],
|
|
89
|
-
color: invalid
|
|
93
|
+
color: invalid,
|
|
90
94
|
},
|
|
91
95
|
{
|
|
92
96
|
tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
|
|
93
|
-
color: purple
|
|
97
|
+
color: purple,
|
|
94
98
|
},
|
|
95
99
|
{
|
|
96
100
|
tag: [tags.typeName, tags.className],
|
|
97
|
-
color: yellow
|
|
101
|
+
color: yellow,
|
|
98
102
|
},
|
|
99
103
|
{
|
|
100
104
|
tag: [tags.operator, tags.operatorKeyword],
|
|
101
|
-
color: red
|
|
105
|
+
color: red,
|
|
102
106
|
},
|
|
103
107
|
{
|
|
104
108
|
tag: [tags.tagName],
|
|
105
109
|
color: aqua,
|
|
106
|
-
fontStyle: 'bold'
|
|
110
|
+
fontStyle: 'bold',
|
|
107
111
|
},
|
|
108
112
|
{
|
|
109
113
|
tag: [tags.squareBracket],
|
|
110
|
-
color: orange
|
|
114
|
+
color: orange,
|
|
111
115
|
},
|
|
112
116
|
{
|
|
113
117
|
tag: [tags.angleBracket],
|
|
114
|
-
color: blue
|
|
118
|
+
color: blue,
|
|
115
119
|
},
|
|
116
120
|
{
|
|
117
121
|
tag: [tags.attributeName],
|
|
118
|
-
color: aqua
|
|
122
|
+
color: aqua,
|
|
119
123
|
},
|
|
120
124
|
{
|
|
121
125
|
tag: [tags.regexp],
|
|
122
|
-
color: aqua
|
|
126
|
+
color: aqua,
|
|
123
127
|
},
|
|
124
128
|
{
|
|
125
129
|
tag: [tags.quote],
|
|
126
|
-
color: gray
|
|
130
|
+
color: gray,
|
|
127
131
|
},
|
|
128
|
-
{ tag: [tags.string], color:
|
|
132
|
+
{ tag: [tags.string], color: fg0 },
|
|
129
133
|
{
|
|
130
134
|
tag: tags.link,
|
|
131
|
-
color:
|
|
135
|
+
color: fg3,
|
|
132
136
|
textDecoration: 'underline',
|
|
133
|
-
textUnderlinePosition: 'under'
|
|
137
|
+
textUnderlinePosition: 'under',
|
|
134
138
|
},
|
|
135
139
|
{
|
|
136
140
|
tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)],
|
|
137
|
-
color: purple
|
|
141
|
+
color: purple,
|
|
138
142
|
},
|
|
139
143
|
{ tag: [tags.meta], color: yellow },
|
|
140
144
|
{ tag: [tags.comment], color: gray, fontStyle: 'italic' },
|
|
@@ -146,28 +150,30 @@ const gruvboxLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
146
150
|
{
|
|
147
151
|
tag: [tags.heading3, tags.heading4],
|
|
148
152
|
fontWeight: 'bold',
|
|
149
|
-
color: yellow
|
|
153
|
+
color: yellow,
|
|
150
154
|
},
|
|
151
155
|
{
|
|
152
156
|
tag: [tags.heading5, tags.heading6],
|
|
153
|
-
color: yellow
|
|
157
|
+
color: yellow,
|
|
154
158
|
},
|
|
155
159
|
{ tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: purple },
|
|
156
160
|
{
|
|
157
161
|
tag: [tags.processingInstruction, tags.inserted],
|
|
158
|
-
color: blue
|
|
162
|
+
color: blue,
|
|
159
163
|
},
|
|
160
164
|
{
|
|
161
165
|
tag: [tags.contentSeparator],
|
|
162
|
-
color: red
|
|
166
|
+
color: red,
|
|
163
167
|
},
|
|
164
|
-
{ tag: tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` }
|
|
168
|
+
{ tag: tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` },
|
|
165
169
|
]);
|
|
166
|
-
|
|
167
|
-
|
|
170
|
+
/**
|
|
171
|
+
Extension to enable the Gruvbox Light theme (both the editor theme and
|
|
172
|
+
the highlight style).
|
|
173
|
+
*/
|
|
168
174
|
const gruvboxLight = [
|
|
169
175
|
gruvboxLightTheme,
|
|
170
|
-
/*@__PURE__*/syntaxHighlighting(gruvboxLightHighlightStyle)
|
|
176
|
+
/*@__PURE__*/syntaxHighlighting(gruvboxLightHighlightStyle),
|
|
171
177
|
];
|
|
172
178
|
|
|
173
179
|
export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
|
package/package.json
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@fsegurai/codemirror-theme-gruvbox-light",
|
|
3
|
-
"description": "Gruvbox Light theme for the CodeMirror code editor",
|
|
4
|
-
"version": "6.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.
|
|
44
|
-
}
|
|
45
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@fsegurai/codemirror-theme-gruvbox-light",
|
|
3
|
+
"description": "Gruvbox Light theme for the CodeMirror code editor",
|
|
4
|
+
"version": "6.0.6",
|
|
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.2"
|
|
44
|
+
}
|
|
45
|
+
}
|