@fsegurai/codemirror-theme-gruvbox-light 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-gruvbox-light [![NPM version](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-gruvbox-light.svg)](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) | [**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 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
+ @gruvboxLightHighlightStyle
package/dist/index.cjs ADDED
@@ -0,0 +1,177 @@
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 dark1 = '#3c3836', dark2 = '#504945', dark3 = '#665c54', dark4 = '#7c6f64', gray_244 = '#928374', light0 = '#fbf1c7', light1 = '#ebdbb2', light3 = '#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, bg3 = light3, gray = gray_244, fg1 = dark1, fg2 = dark2, fg3 = dark3, fg4 = dark4, red = faded_red, green = faded_green, yellow = faded_yellow, blue = faded_blue, purple = faded_purple, aqua = faded_aqua, orange = faded_orange;
9
+ const invalid = red, darkBackground = bg1, highlightBackground = darkBackground, background = bg0, tooltipBackground = bg1, selection = darkBackground, cursor = orange;
10
+ /// The editor theme styles for Gruvbox Light.
11
+ const gruvboxLightTheme = view.EditorView.theme({
12
+ '&': {
13
+ color: fg1,
14
+ backgroundColor: background
15
+ },
16
+ '.cm-content': {
17
+ caretColor: cursor
18
+ },
19
+ '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
20
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
21
+ '.cm-panels': { backgroundColor: darkBackground, color: fg1 },
22
+ '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
23
+ '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
24
+ '.cm-searchMatch': {
25
+ backgroundColor: bg0,
26
+ color: yellow,
27
+ outline: `1px solid ${bg3}`
28
+ },
29
+ '.cm-searchMatch.cm-searchMatch-selected': {
30
+ backgroundColor: bg3
31
+ },
32
+ '.cm-activeLine': { backgroundColor: highlightBackground },
33
+ '.cm-selectionMatch': { backgroundColor: bg3 },
34
+ '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
35
+ outline: `1px solid ${bg3}`,
36
+ fontStyle: 'bold'
37
+ },
38
+ '&.cm-focused .cm-matchingBracket': {
39
+ backgroundColor: bg3
40
+ },
41
+ '.cm-gutters': {
42
+ backgroundColor: bg1,
43
+ color: fg3,
44
+ border: 'none'
45
+ },
46
+ '.cm-activeLineGutter': {
47
+ backgroundColor: highlightBackground
48
+ },
49
+ '.cm-foldPlaceholder': {
50
+ backgroundColor: 'transparent',
51
+ border: 'none',
52
+ color: '#ddd'
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: fg2
70
+ }
71
+ }
72
+ }, { dark: false });
73
+ /// The highlighting style for code in the Gruvbox Light theme.
74
+ const gruvboxLightHighlightStyle = language.HighlightStyle.define([
75
+ { tag: highlight.tags.keyword, color: red },
76
+ {
77
+ tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
78
+ color: aqua
79
+ },
80
+ { tag: [highlight.tags.variableName], color: blue },
81
+ { tag: [highlight.tags.function(highlight.tags.variableName)], color: green, fontStyle: 'bold' },
82
+ { tag: [highlight.tags.labelName], color: fg1 },
83
+ {
84
+ tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
85
+ color: purple
86
+ },
87
+ { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: fg1 },
88
+ { tag: [highlight.tags.brace], color: fg1 },
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: purple
96
+ },
97
+ {
98
+ tag: [highlight.tags.typeName, highlight.tags.className],
99
+ color: yellow
100
+ },
101
+ {
102
+ tag: [highlight.tags.operator, highlight.tags.operatorKeyword],
103
+ color: red
104
+ },
105
+ {
106
+ tag: [highlight.tags.tagName],
107
+ color: aqua,
108
+ fontStyle: 'bold'
109
+ },
110
+ {
111
+ tag: [highlight.tags.squareBracket],
112
+ color: orange
113
+ },
114
+ {
115
+ tag: [highlight.tags.angleBracket],
116
+ color: blue
117
+ },
118
+ {
119
+ tag: [highlight.tags.attributeName],
120
+ color: aqua
121
+ },
122
+ {
123
+ tag: [highlight.tags.regexp],
124
+ color: aqua
125
+ },
126
+ {
127
+ tag: [highlight.tags.quote],
128
+ color: gray
129
+ },
130
+ { tag: [highlight.tags.string], color: fg1 },
131
+ {
132
+ tag: highlight.tags.link,
133
+ color: fg4,
134
+ textDecoration: 'underline',
135
+ textUnderlinePosition: 'under'
136
+ },
137
+ {
138
+ tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
139
+ color: purple
140
+ },
141
+ { tag: [highlight.tags.meta], color: yellow },
142
+ { tag: [highlight.tags.comment], color: gray, fontStyle: 'italic' },
143
+ { tag: highlight.tags.strong, fontWeight: 'bold', color: orange },
144
+ { tag: highlight.tags.emphasis, fontStyle: 'italic', color: green },
145
+ { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
146
+ { tag: highlight.tags.heading, fontWeight: 'bold', color: green },
147
+ { tag: [highlight.tags.heading1, highlight.tags.heading2], fontWeight: 'bold', color: green },
148
+ {
149
+ tag: [highlight.tags.heading3, highlight.tags.heading4],
150
+ fontWeight: 'bold',
151
+ color: yellow
152
+ },
153
+ {
154
+ tag: [highlight.tags.heading5, highlight.tags.heading6],
155
+ color: yellow
156
+ },
157
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: purple },
158
+ {
159
+ tag: [highlight.tags.processingInstruction, highlight.tags.inserted],
160
+ color: blue
161
+ },
162
+ {
163
+ tag: [highlight.tags.contentSeparator],
164
+ color: red
165
+ },
166
+ { tag: highlight.tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` }
167
+ ]);
168
+ /// Extension to enable the Gruvbox Light theme (both the editor theme and
169
+ /// the highlight style).
170
+ const gruvboxLight = [
171
+ gruvboxLightTheme,
172
+ language.syntaxHighlighting(gruvboxLightHighlightStyle)
173
+ ];
174
+
175
+ exports.gruvboxLight = gruvboxLight;
176
+ exports.gruvboxLightHighlightStyle = gruvboxLightHighlightStyle;
177
+ exports.gruvboxLightTheme = gruvboxLightTheme;
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const gruvboxLightTheme: Extension;
5
+ declare const gruvboxLightHighlightStyle: HighlightStyle;
6
+ declare const gruvboxLight: Extension;
7
+
8
+ export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const gruvboxLightTheme: Extension;
5
+ declare const gruvboxLightHighlightStyle: HighlightStyle;
6
+ declare const gruvboxLight: Extension;
7
+
8
+ export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
package/dist/index.js ADDED
@@ -0,0 +1,173 @@
1
+ import { EditorView } from '@codemirror/view';
2
+ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
+ import { tags } from '@lezer/highlight';
4
+
5
+ const dark1 = '#3c3836', dark2 = '#504945', dark3 = '#665c54', dark4 = '#7c6f64', gray_244 = '#928374', light0 = '#fbf1c7', light1 = '#ebdbb2', light3 = '#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, bg3 = light3, gray = gray_244, fg1 = dark1, fg2 = dark2, fg3 = dark3, fg4 = dark4, red = faded_red, green = faded_green, yellow = faded_yellow, blue = faded_blue, purple = faded_purple, aqua = faded_aqua, orange = faded_orange;
7
+ const invalid = red, darkBackground = bg1, highlightBackground = darkBackground, background = bg0, tooltipBackground = bg1, selection = darkBackground, cursor = orange;
8
+ /// The editor theme styles for Gruvbox Light.
9
+ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
10
+ '&': {
11
+ color: fg1,
12
+ backgroundColor: background
13
+ },
14
+ '.cm-content': {
15
+ caretColor: cursor
16
+ },
17
+ '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
18
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
19
+ '.cm-panels': { backgroundColor: darkBackground, color: fg1 },
20
+ '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
21
+ '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
22
+ '.cm-searchMatch': {
23
+ backgroundColor: bg0,
24
+ color: yellow,
25
+ outline: `1px solid ${bg3}`
26
+ },
27
+ '.cm-searchMatch.cm-searchMatch-selected': {
28
+ backgroundColor: bg3
29
+ },
30
+ '.cm-activeLine': { backgroundColor: highlightBackground },
31
+ '.cm-selectionMatch': { backgroundColor: bg3 },
32
+ '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
33
+ outline: `1px solid ${bg3}`,
34
+ fontStyle: 'bold'
35
+ },
36
+ '&.cm-focused .cm-matchingBracket': {
37
+ backgroundColor: bg3
38
+ },
39
+ '.cm-gutters': {
40
+ backgroundColor: bg1,
41
+ color: fg3,
42
+ border: 'none'
43
+ },
44
+ '.cm-activeLineGutter': {
45
+ backgroundColor: highlightBackground
46
+ },
47
+ '.cm-foldPlaceholder': {
48
+ backgroundColor: 'transparent',
49
+ border: 'none',
50
+ color: '#ddd'
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: fg2
68
+ }
69
+ }
70
+ }, { dark: false });
71
+ /// The highlighting style for code in the Gruvbox Light theme.
72
+ const gruvboxLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
73
+ { tag: tags.keyword, color: red },
74
+ {
75
+ tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
76
+ color: aqua
77
+ },
78
+ { tag: [tags.variableName], color: blue },
79
+ { tag: [/*@__PURE__*/tags.function(tags.variableName)], color: green, fontStyle: 'bold' },
80
+ { tag: [tags.labelName], color: fg1 },
81
+ {
82
+ tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)],
83
+ color: purple
84
+ },
85
+ { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: fg1 },
86
+ { tag: [tags.brace], color: fg1 },
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: purple
94
+ },
95
+ {
96
+ tag: [tags.typeName, tags.className],
97
+ color: yellow
98
+ },
99
+ {
100
+ tag: [tags.operator, tags.operatorKeyword],
101
+ color: red
102
+ },
103
+ {
104
+ tag: [tags.tagName],
105
+ color: aqua,
106
+ fontStyle: 'bold'
107
+ },
108
+ {
109
+ tag: [tags.squareBracket],
110
+ color: orange
111
+ },
112
+ {
113
+ tag: [tags.angleBracket],
114
+ color: blue
115
+ },
116
+ {
117
+ tag: [tags.attributeName],
118
+ color: aqua
119
+ },
120
+ {
121
+ tag: [tags.regexp],
122
+ color: aqua
123
+ },
124
+ {
125
+ tag: [tags.quote],
126
+ color: gray
127
+ },
128
+ { tag: [tags.string], color: fg1 },
129
+ {
130
+ tag: tags.link,
131
+ color: fg4,
132
+ textDecoration: 'underline',
133
+ textUnderlinePosition: 'under'
134
+ },
135
+ {
136
+ tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)],
137
+ color: purple
138
+ },
139
+ { tag: [tags.meta], color: yellow },
140
+ { tag: [tags.comment], color: gray, fontStyle: 'italic' },
141
+ { tag: tags.strong, fontWeight: 'bold', color: orange },
142
+ { tag: tags.emphasis, fontStyle: 'italic', color: green },
143
+ { tag: tags.strikethrough, textDecoration: 'line-through' },
144
+ { tag: tags.heading, fontWeight: 'bold', color: green },
145
+ { tag: [tags.heading1, tags.heading2], fontWeight: 'bold', color: green },
146
+ {
147
+ tag: [tags.heading3, tags.heading4],
148
+ fontWeight: 'bold',
149
+ color: yellow
150
+ },
151
+ {
152
+ tag: [tags.heading5, tags.heading6],
153
+ color: yellow
154
+ },
155
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: purple },
156
+ {
157
+ tag: [tags.processingInstruction, tags.inserted],
158
+ color: blue
159
+ },
160
+ {
161
+ tag: [tags.contentSeparator],
162
+ color: red
163
+ },
164
+ { tag: tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` }
165
+ ]);
166
+ /// Extension to enable the Gruvbox Light theme (both the editor theme and
167
+ /// the highlight style).
168
+ const gruvboxLight = [
169
+ gruvboxLightTheme,
170
+ /*@__PURE__*/syntaxHighlighting(gruvboxLightHighlightStyle)
171
+ ];
172
+
173
+ export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@fsegurai/codemirror-theme-gruvbox-light",
3
+ "description": "Gruvbox Light 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
+ }