@fsegurai/codemirror-theme-gruvbox-light 6.1.3 → 6.2.0-beta

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 -28
  2. package/dist/index.cjs +308 -112
  3. package/dist/index.d.cts +6 -7
  4. package/dist/index.d.ts +6 -7
  5. package/dist/index.js +308 -112
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,10 +1,10 @@
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.png">
2
+ <img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/public/codemirror-themes.png">
3
3
  </p>
4
4
 
5
5
  <p align="center">
6
6
  <a href="https://github.com/fsegurai/codemirror-themes">
7
- <img src="https://img.shields.io/azure-devops/build/fsegurai/Libraries%2520NodeJs/15/main?label=Build%20Status&"
7
+ <img src="https://img.shields.io/azure-devops/build/fsegurai/Libraries%2520NodeJs/16/main?label=Build%20Status&"
8
8
  alt="Test Status">
9
9
  </a>
10
10
  <a href="https://www.npmjs.org/package/@fsegurai/codemirror-theme-gruvbox-light">
@@ -69,32 +69,32 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
69
69
 
70
70
  ### Available Themes
71
71
 
72
- - [All - Bundle](./packages/bundle)
73
- - [Abcdef](./packages/abcdef)
74
- - [Abyss](./packages/abyss)
75
- - [Android Studio](./packages/android-studio)
76
- - [Andromeda](./packages/andromeda)
77
- - [Basic Dark](./packages/basic-dark)
78
- - [Basic Light](./packages/basic-light)
79
- - [Forest](./packages/forest)
80
- - [GitHub Dark](./packages/github-dark)
81
- - [GitHub Light](./packages/github-light)
82
- - [Gruvbox Dark](./packages/gruvbox-dark)
83
- - [Gruvbox Light](./packages/gruvbox-light)
84
- - [Material Dark](./packages/material-dark)
85
- - [Material Light](./packages/material-light)
86
- - [Monokai](./packages/monokai)
87
- - [Nord](./packages/nord)
88
- - [Palenight](./packages/palenight)
89
- - [Solarized Dark](./packages/solarized-dark)
90
- - [Solarized Light](./packages/solarized-light)
91
- - [Tokyo Night Day](./packages/tokyo-night-day)
92
- - [Tokyo Night Storm](./packages/tokyo-night-storm)
93
- - [Volcano](./packages/volcano)
94
- - [VS Code Dark](./packages/vscode-dark)
95
- - [VS Code Light](./packages/vscode-light)
96
-
97
- For a full list, see the [<code>@fsegurai/codemirror-theme-bundle</code>](https://github.com/fsegurai/codemirror-themes/tree/main/packages/bundle) directory or the online demo.
72
+ | Theme | Package | Version |
73
+ |-------------------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|
74
+ | All - Bundle | [@fsegurai/codemirror-theme-bundle](https://www.npmjs.com/package/@fsegurai/codemirror-theme-bundle) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-bundle) |
75
+ | Abcdef | [@fsegurai/codemirror-theme-abcdef](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abcdef) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-abcdef) |
76
+ | Abyss | [@fsegurai/codemirror-theme-abyss](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abyss) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-abyss) |
77
+ | Android Studio | [@fsegurai/codemirror-theme-android-studio](https://www.npmjs.com/package/@fsegurai/codemirror-theme-android-studio) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-android-studio) |
78
+ | Andromeda | [@fsegurai/codemirror-theme-andromeda](https://www.npmjs.com/package/@fsegurai/codemirror-theme-andromeda) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-andromeda) |
79
+ | Basic Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-basic-light) |
80
+ | Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-basic-dark) |
81
+ | Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-forest) |
82
+ | GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-github-light) |
83
+ | GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-github-dark) |
84
+ | Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-gruvbox-light) |
85
+ | Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-gruvbox-dark) |
86
+ | Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-material-light) |
87
+ | Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-material-dark) |
88
+ | Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-monokai) |
89
+ | Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-nord) |
90
+ | Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-palenight) |
91
+ | Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-solarized-light) |
92
+ | Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-solarized-dark) |
93
+ | Tokyo Night Storm | [@fsegurai/codemirror-theme-tokyo-night-storm](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-storm) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-tokyo-night-storm) |
94
+ | Tokyo Night Day | [@fsegurai/codemirror-theme-tokyo-night-day](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-day) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-tokyo-night-day) |
95
+ | Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-volcano) |
96
+ | VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-vscode-dark) |
97
+ | VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-vscode-light) |
98
98
 
99
99
  ### Demo Application
100
100
 
package/dist/index.cjs CHANGED
@@ -3,59 +3,208 @@
3
3
  var view = require('@codemirror/view');
4
4
  var language = require('@codemirror/language');
5
5
  var highlight = require('@lezer/highlight');
6
+ var _utils = require('@utils');
6
7
 
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
- const invalid = red, darkBackground = bg1, highlightBackground = '#ffc42e52', background = bg0, tooltipBackground = bg1, selection = darkBackground, selectionMatch = '#ffc42e', cursor = orange;
10
8
  /**
11
- The editor theme styles for Gruvbox Light.
12
- */
9
+ * Enhanced Gruvbox Light theme color definitions
10
+ * --------------------------------------------
11
+ * Colors organized by function with visual color blocks
12
+ */
13
+ // Gruvbox base colors
14
+ const dark0 = '#3c3836'; // Main foreground (text)
15
+ const dark1 = '#504945'; // Secondary foreground
16
+ const dark2 = '#665c54'; // Tertiary foreground
17
+ const dark3 = '#7c6f64'; // Quaternary foreground
18
+ const gray_244 = '#928374'; // Comments, invisibles, line highlighting
19
+ // Light/background shades
20
+ const light0 = '#fbf1c7'; // Main background
21
+ const light1 = '#ebdbb2'; // Secondary background
22
+ const light2 = '#d5c4a1'; // Tertiary background (not defined above)
23
+ const light3 = '#bdae93'; // Quaternary background
24
+ const light4 = '#a89984'; // Quinary background (not defined above)
25
+ // Accent colors
26
+ const faded_red = '#9d0006'; // Keywords, storage, operator
27
+ const faded_green = '#79740e'; // Strings, tag attributes
28
+ const faded_yellow = '#b57614'; // Functions, tag names
29
+ const faded_blue = '#076678'; // Variables
30
+ const faded_purple = '#8f3f71'; // Numbers, special constants
31
+ const faded_aqua = '#427b58'; // Types
32
+ const faded_orange = '#af3a03'; // Cursor, constants
33
+ // Simplified naming
34
+ const bg0 = light0;
35
+ const bg1 = light1;
36
+ const bg2 = light2;
37
+ const bg3 = light3;
38
+ const bg4 = light4;
39
+ const gray = gray_244;
40
+ const fg0 = dark0;
41
+ const fg1 = dark1;
42
+ const fg2 = dark2;
43
+ const fg3 = dark3;
44
+ const red = faded_red;
45
+ const green = faded_green;
46
+ const yellow = faded_yellow;
47
+ const blue = faded_blue;
48
+ const purple = faded_purple;
49
+ const aqua = faded_aqua;
50
+ const orange = faded_orange;
51
+ // UI specific colors
52
+ const invalid = red;
53
+ const darkBackground = bg1;
54
+ const highlightBackground = '#ffc42e25'; // Line highlight with transparency
55
+ const background = bg0;
56
+ const tooltipBackground = bg1;
57
+ const selection = darkBackground;
58
+ const selectionMatch = '#ffc42e40'; // Selection match background
59
+ const cursor = orange; // Cursor color
60
+ const activeBracketBg = '#d5c4a180'; // Active bracket background
61
+ const activeBracketBorder = orange; // Active bracket border
62
+ const diagnosticWarning = yellow; // Warning color
63
+ const linkColor = blue; // Link color
64
+ const visitedLinkColor = purple; // Visited link color
65
+ /**
66
+ * Enhanced editor theme styles for Gruvbox Light
67
+ */
13
68
  const gruvboxLightTheme = view.EditorView.theme({
69
+ // Base editor styles
14
70
  '&': {
15
71
  color: fg0,
16
72
  backgroundColor: background,
73
+ fontSize: _utils.generalContent.fontSize,
74
+ fontFamily: _utils.generalContent.fontFamily,
17
75
  },
76
+ // Content and cursor
18
77
  '.cm-content': {
19
78
  caretColor: cursor,
79
+ lineHeight: _utils.generalContent.lineHeight,
80
+ },
81
+ '.cm-cursor, .cm-dropCursor': {
82
+ borderLeftColor: cursor,
83
+ borderLeftWidth: _utils.generalCursor.borderLeftWidth,
84
+ },
85
+ '.cm-fat-cursor': {
86
+ backgroundColor: `${cursor}99`,
87
+ color: bg0,
88
+ },
89
+ // Selection
90
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
91
+ backgroundColor: selection,
92
+ color: fg0,
20
93
  },
21
- '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
22
- '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
23
- '.cm-panels': { backgroundColor: darkBackground, color: fg0 },
24
- '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
25
- '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
94
+ // Make sure selection appears above active line
95
+ '.cm-selectionLayer': {
96
+ zIndex: 100,
97
+ },
98
+ // Search functionality
26
99
  '.cm-searchMatch': {
27
- backgroundColor: highlightBackground,
28
- color: yellow,
29
- outline: `1px solid ${bg2}`,
100
+ backgroundColor: '#ffc42e80',
101
+ outline: `1px solid ${orange}`,
102
+ color: fg0,
103
+ borderRadius: _utils.generalSearchField.borderRadius,
104
+ '& span': {
105
+ color: fg0,
106
+ },
30
107
  },
31
108
  '.cm-searchMatch.cm-searchMatch-selected': {
32
- backgroundColor: selectionMatch,
109
+ backgroundColor: orange,
110
+ color: bg0,
111
+ padding: _utils.generalSearchField.padding,
112
+ '& span': {
113
+ color: bg0,
114
+ },
33
115
  },
34
- '.cm-activeLine': { backgroundColor: highlightBackground },
35
- '.cm-selectionMatch': { backgroundColor: bg2 },
36
- '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
37
- outline: `1px solid ${bg2}`,
38
- fontStyle: 'bold',
116
+ '.cm-search.cm-panel.cm-textfield': {
117
+ color: fg0,
118
+ borderRadius: _utils.generalSearchField.borderRadius,
119
+ padding: _utils.generalSearchField.padding,
39
120
  },
40
- '&.cm-focused .cm-matchingBracket': {
41
- backgroundColor: bg2,
121
+ // Panels
122
+ '.cm-panels': {
123
+ backgroundColor: bg1,
124
+ color: fg1,
125
+ borderRadius: '0 0 4px 4px',
126
+ },
127
+ '.cm-panels.cm-panels-top': {
128
+ borderBottom: `1px solid ${bg3}`,
42
129
  },
130
+ '.cm-panels.cm-panels-bottom': {
131
+ borderTop: `1px solid ${bg3}`,
132
+ },
133
+ '.cm-panel button': {
134
+ backgroundColor: bg0,
135
+ color: fg0,
136
+ border: _utils.generalPanel.border,
137
+ borderRadius: _utils.generalPanel.borderRadius,
138
+ padding: _utils.generalPanel.padding,
139
+ },
140
+ '.cm-panel button:hover': {
141
+ backgroundColor: light2,
142
+ },
143
+ // Line highlighting
144
+ '.cm-activeLine': {
145
+ backgroundColor: highlightBackground,
146
+ borderRadius: _utils.generalLine.borderRadius,
147
+ zIndex: 1,
148
+ },
149
+ // Gutters
43
150
  '.cm-gutters': {
44
151
  backgroundColor: bg1,
45
- color: fg2,
46
- border: 'none',
152
+ color: fg3,
153
+ border: _utils.generalGutter.border,
154
+ borderRight: `1px solid ${bg3}`,
155
+ paddingRight: _utils.generalGutter.paddingRight,
47
156
  },
48
157
  '.cm-activeLineGutter': {
49
- backgroundColor: selectionMatch,
158
+ backgroundColor: bg2,
159
+ color: fg0,
160
+ fontWeight: _utils.generalGutter.fontWeight,
50
161
  },
51
- '.cm-foldPlaceholder': {
52
- backgroundColor: 'transparent',
53
- border: 'none',
54
- color: '#ddd',
162
+ '.cm-lineNumbers': {
163
+ fontSize: _utils.generalGutter.fontSize,
55
164
  },
165
+ '.cm-foldGutter': {
166
+ fontSize: _utils.generalGutter.fontSize,
167
+ },
168
+ '.cm-foldGutter .cm-gutterElement': {
169
+ color: fg3,
170
+ cursor: 'pointer',
171
+ },
172
+ '.cm-foldGutter .cm-gutterElement:hover': {
173
+ color: fg0,
174
+ },
175
+ // Tooltips and autocomplete
56
176
  '.cm-tooltip': {
57
- border: 'none',
58
177
  backgroundColor: tooltipBackground,
178
+ border: `1px solid ${bg3}`,
179
+ borderRadius: _utils.generalTooltip.borderRadius,
180
+ padding: _utils.generalTooltip.padding,
181
+ boxShadow: '0 1px 5px rgba(0, 0, 0, 0.1)',
182
+ },
183
+ '.cm-tooltip-autocomplete': {
184
+ '& > ul': {
185
+ backgroundColor: tooltipBackground,
186
+ border: 'none',
187
+ },
188
+ '& > ul > li': {
189
+ padding: _utils.generalTooltip.padding,
190
+ lineHeight: _utils.generalTooltip.lineHeight,
191
+ },
192
+ '& > ul > li[aria-selected]': {
193
+ backgroundColor: orange + '30',
194
+ color: fg0,
195
+ borderRadius: _utils.generalTooltip.borderRadiusSelected,
196
+ },
197
+ '& > ul > li:hover': {
198
+ backgroundColor: orange + '15',
199
+ },
200
+ '& > ul > li > span.cm-completionIcon': {
201
+ color: fg3,
202
+ paddingRight: _utils.generalTooltip.paddingRight,
203
+ },
204
+ '& > ul > li > span.cm-completionDetail': {
205
+ color: fg3,
206
+ fontStyle: 'italic',
207
+ },
59
208
  },
60
209
  '.cm-tooltip .cm-tooltip-arrow:before': {
61
210
  borderTopColor: 'transparent',
@@ -65,114 +214,161 @@ const gruvboxLightTheme = view.EditorView.theme({
65
214
  borderTopColor: tooltipBackground,
66
215
  borderBottomColor: tooltipBackground,
67
216
  },
68
- '.cm-tooltip-autocomplete': {
69
- '& > ul > li[aria-selected]': {
70
- backgroundColor: highlightBackground,
71
- color: fg1,
217
+ // Diagnostics styling
218
+ '.cm-diagnostic': {
219
+ '&-error': {
220
+ borderLeft: `3px solid ${invalid}`,
221
+ },
222
+ '&-warning': {
223
+ borderLeft: `3px solid ${diagnosticWarning}`,
224
+ },
225
+ '&-info': {
226
+ borderLeft: `3px solid ${linkColor}`,
72
227
  },
73
228
  },
74
- }, { dark: false });
75
- /**
76
- The highlighting style for code in the Gruvbox Light theme.
77
- */
78
- const gruvboxLightHighlightStyle = language.HighlightStyle.define([
79
- { tag: highlight.tags.keyword, color: red },
80
- {
81
- tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
82
- color: aqua,
229
+ '.cm-lintPoint-error': {
230
+ borderBottom: `2px wavy ${invalid}`,
83
231
  },
84
- { tag: [highlight.tags.variableName], color: blue },
85
- { tag: [highlight.tags.function(highlight.tags.variableName)], color: green, fontStyle: 'bold' },
86
- { tag: [highlight.tags.labelName], color: fg0 },
87
- {
88
- tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
89
- color: purple,
232
+ '.cm-lintPoint-warning': {
233
+ borderBottom: `2px wavy ${diagnosticWarning}`,
90
234
  },
91
- { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: fg0 },
92
- { tag: [highlight.tags.brace], color: fg0 },
93
- {
94
- tag: [highlight.tags.annotation],
95
- color: invalid,
235
+ // Matching brackets
236
+ '.cm-matchingBracket': {
237
+ backgroundColor: activeBracketBg,
238
+ outline: `1px solid ${activeBracketBorder}`,
239
+ borderRadius: _utils.generalMatching.borderRadius,
96
240
  },
97
- {
98
- tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
99
- color: purple,
241
+ '.cm-nonmatchingBracket': {
242
+ backgroundColor: '#fb492740',
243
+ outline: `1px solid ${invalid}`,
244
+ borderRadius: _utils.generalMatching.borderRadius,
100
245
  },
101
- {
102
- tag: [highlight.tags.typeName, highlight.tags.className],
103
- color: yellow,
246
+ // Selection matches
247
+ '.cm-selectionMatch': {
248
+ backgroundColor: selectionMatch,
249
+ outline: `1px solid ${bg3}`,
250
+ borderRadius: _utils.generalMatching.borderRadius,
104
251
  },
105
- {
106
- tag: [highlight.tags.operator, highlight.tags.operatorKeyword],
107
- color: red,
252
+ // Fold placeholder
253
+ '.cm-foldPlaceholder': {
254
+ backgroundColor: 'transparent',
255
+ color: fg2,
256
+ border: `1px dotted ${bg3}`,
257
+ borderRadius: _utils.generalPlaceholder.borderRadius,
258
+ padding: _utils.generalPlaceholder.padding,
259
+ margin: _utils.generalPlaceholder.margin,
108
260
  },
109
- {
110
- tag: [highlight.tags.tagName],
111
- color: aqua,
112
- fontStyle: 'bold',
261
+ // Focus outline
262
+ '&.cm-focused': {
263
+ outline: 'none',
264
+ boxShadow: `0 0 0 2px ${bg0}, 0 0 0 3px ${orange}40`,
113
265
  },
114
- {
115
- tag: [highlight.tags.squareBracket],
116
- color: orange,
266
+ // Scrollbars
267
+ '& .cm-scroller::-webkit-scrollbar': {
268
+ width: _utils.generalScroller.width,
269
+ height: _utils.generalScroller.height,
117
270
  },
118
- {
119
- tag: [highlight.tags.angleBracket],
120
- color: blue,
271
+ '& .cm-scroller::-webkit-scrollbar-track': {
272
+ background: bg0,
121
273
  },
122
- {
123
- tag: [highlight.tags.attributeName],
124
- color: aqua,
274
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
275
+ backgroundColor: bg3,
276
+ borderRadius: _utils.generalScroller.borderRadius,
277
+ border: `3px solid ${bg0}`,
125
278
  },
126
- {
127
- tag: [highlight.tags.regexp],
128
- color: aqua,
279
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
280
+ backgroundColor: bg4,
129
281
  },
130
- {
131
- tag: [highlight.tags.quote],
282
+ // Ghost text
283
+ '.cm-ghostText': {
284
+ opacity: '0.5',
132
285
  color: gray,
133
286
  },
134
- { tag: [highlight.tags.string], color: fg0 },
287
+ }, { dark: false });
288
+ /**
289
+ * Enhanced syntax highlighting for Gruvbox Light theme
290
+ */
291
+ const gruvboxLightHighlightStyle = language.HighlightStyle.define([
292
+ // Keywords and control flow
293
+ { tag: highlight.tags.keyword, color: red, fontWeight: 'bold' },
294
+ { tag: highlight.tags.controlKeyword, color: red, fontWeight: 'bold' },
295
+ { tag: highlight.tags.moduleKeyword, color: red, fontWeight: 'bold' },
296
+ // Names and variables
297
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: blue },
298
+ { tag: [highlight.tags.variableName], color: blue },
299
+ { tag: [highlight.tags.propertyName], color: aqua, fontStyle: 'normal' },
300
+ // Classes and types
301
+ { tag: [highlight.tags.typeName], color: aqua },
302
+ { tag: [highlight.tags.className], color: yellow, fontStyle: 'italic' },
303
+ { tag: [highlight.tags.namespace], color: blue, fontStyle: 'italic' },
304
+ // Operators and punctuation
305
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: fg0 },
306
+ { tag: [highlight.tags.bracket], color: gray },
307
+ { tag: [highlight.tags.brace], color: gray },
308
+ { tag: [highlight.tags.punctuation], color: gray },
309
+ // Functions and parameters
310
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: yellow },
311
+ { tag: [highlight.tags.definition(highlight.tags.variableName)], color: blue },
312
+ // Constants and literals
313
+ { tag: highlight.tags.number, color: purple },
314
+ { tag: highlight.tags.changed, color: purple },
315
+ { tag: highlight.tags.annotation, color: invalid, fontStyle: 'italic' },
316
+ { tag: highlight.tags.modifier, color: purple, fontStyle: 'italic' },
317
+ { tag: highlight.tags.self, color: purple },
318
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: orange },
319
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: orange },
320
+ // Strings and regex
321
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: green },
322
+ { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: green },
323
+ { tag: highlight.tags.string, color: green },
324
+ // Punctuation and structure
325
+ { tag: highlight.tags.definition(highlight.tags.typeName), color: aqua, fontWeight: 'bold' },
326
+ // Comments and documentation
327
+ { tag: highlight.tags.meta, color: gray },
328
+ { tag: highlight.tags.comment, fontStyle: 'italic', color: gray },
329
+ { tag: highlight.tags.docComment, fontStyle: 'italic', color: gray },
330
+ // HTML/XML elements
331
+ { tag: [highlight.tags.tagName], color: red },
332
+ { tag: [highlight.tags.attributeName], color: yellow },
333
+ // Markdown and text formatting
334
+ { tag: [highlight.tags.heading], fontWeight: 'bold', color: yellow },
335
+ { tag: [highlight.tags.strong], fontWeight: 'bold', color: yellow },
336
+ { tag: [highlight.tags.emphasis], fontStyle: 'italic', color: green },
337
+ // Links and URLs
135
338
  {
136
- tag: highlight.tags.link,
137
- color: fg3,
339
+ tag: [highlight.tags.link],
340
+ color: visitedLinkColor,
341
+ fontWeight: '500',
138
342
  textDecoration: 'underline',
139
343
  textUnderlinePosition: 'under',
140
344
  },
141
345
  {
142
- tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
143
- color: purple,
144
- },
145
- { tag: [highlight.tags.meta], color: yellow },
146
- { tag: [highlight.tags.comment], color: gray, fontStyle: 'italic' },
147
- { tag: highlight.tags.strong, fontWeight: 'bold', color: orange },
148
- { tag: highlight.tags.emphasis, fontStyle: 'italic', color: green },
149
- { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
150
- { tag: highlight.tags.heading, fontWeight: 'bold', color: green },
151
- { tag: [highlight.tags.heading1, highlight.tags.heading2], fontWeight: 'bold', color: green },
152
- {
153
- tag: [highlight.tags.heading3, highlight.tags.heading4],
154
- fontWeight: 'bold',
155
- color: yellow,
156
- },
157
- {
158
- tag: [highlight.tags.heading5, highlight.tags.heading6],
159
- color: yellow,
160
- },
161
- { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: purple },
162
- {
163
- tag: [highlight.tags.processingInstruction, highlight.tags.inserted],
164
- color: blue,
346
+ tag: [highlight.tags.url],
347
+ color: linkColor,
348
+ textDecoration: 'underline',
349
+ textUnderlineOffset: '2px',
165
350
  },
351
+ // Special states
166
352
  {
167
- tag: [highlight.tags.contentSeparator],
168
- color: red,
353
+ tag: [highlight.tags.invalid],
354
+ color: fg0,
355
+ textDecoration: 'underline wavy',
356
+ borderBottom: `1px wavy ${invalid}`,
169
357
  },
170
- { tag: highlight.tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` },
358
+ { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
359
+ // Enhanced syntax highlighting
360
+ { tag: highlight.tags.constant(highlight.tags.name), color: orange },
361
+ { tag: highlight.tags.deleted, color: invalid },
362
+ { tag: highlight.tags.squareBracket, color: gray },
363
+ { tag: highlight.tags.angleBracket, color: gray },
364
+ // Additional specific styles
365
+ { tag: highlight.tags.monospace, color: fg0 },
366
+ { tag: [highlight.tags.contentSeparator], color: blue },
367
+ { tag: highlight.tags.quote, color: gray },
171
368
  ]);
172
369
  /**
173
- Extension to enable the Gruvbox Light theme (both the editor theme and
174
- the highlight style).
175
- */
370
+ * Combined Gruvbox Light theme extension
371
+ */
176
372
  const gruvboxLight = [
177
373
  gruvboxLightTheme,
178
374
  language.syntaxHighlighting(gruvboxLightHighlightStyle),
package/dist/index.d.cts CHANGED
@@ -2,17 +2,16 @@ import { Extension } from '@codemirror/state';
2
2
  import { HighlightStyle } from '@codemirror/language';
3
3
 
4
4
  /**
5
- The editor theme styles for Gruvbox Light.
6
- */
5
+ * Enhanced editor theme styles for Gruvbox Light
6
+ */
7
7
  declare const gruvboxLightTheme: Extension;
8
8
  /**
9
- The highlighting style for code in the Gruvbox Light theme.
10
- */
9
+ * Enhanced syntax highlighting for Gruvbox Light theme
10
+ */
11
11
  declare const gruvboxLightHighlightStyle: HighlightStyle;
12
12
  /**
13
- Extension to enable the Gruvbox Light theme (both the editor theme and
14
- the highlight style).
15
- */
13
+ * Combined Gruvbox Light theme extension
14
+ */
16
15
  declare const gruvboxLight: Extension;
17
16
 
18
17
  export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
package/dist/index.d.ts CHANGED
@@ -2,17 +2,16 @@ import { Extension } from '@codemirror/state';
2
2
  import { HighlightStyle } from '@codemirror/language';
3
3
 
4
4
  /**
5
- The editor theme styles for Gruvbox Light.
6
- */
5
+ * Enhanced editor theme styles for Gruvbox Light
6
+ */
7
7
  declare const gruvboxLightTheme: Extension;
8
8
  /**
9
- The highlighting style for code in the Gruvbox Light theme.
10
- */
9
+ * Enhanced syntax highlighting for Gruvbox Light theme
10
+ */
11
11
  declare const gruvboxLightHighlightStyle: HighlightStyle;
12
12
  /**
13
- Extension to enable the Gruvbox Light theme (both the editor theme and
14
- the highlight style).
15
- */
13
+ * Combined Gruvbox Light theme extension
14
+ */
16
15
  declare const gruvboxLight: Extension;
17
16
 
18
17
  export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
package/dist/index.js CHANGED
@@ -1,59 +1,208 @@
1
1
  import { EditorView } from '@codemirror/view';
2
2
  import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
3
  import { tags } from '@lezer/highlight';
4
+ import { generalScroller, generalPlaceholder, generalMatching, generalTooltip, generalGutter, generalLine, generalPanel, generalSearchField, generalCursor, generalContent } from '@utils';
4
5
 
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
- const invalid = red, darkBackground = bg1, highlightBackground = '#ffc42e52', background = bg0, tooltipBackground = bg1, selection = darkBackground, selectionMatch = '#ffc42e', cursor = orange;
8
6
  /**
9
- The editor theme styles for Gruvbox Light.
10
- */
7
+ * Enhanced Gruvbox Light theme color definitions
8
+ * --------------------------------------------
9
+ * Colors organized by function with visual color blocks
10
+ */
11
+ // Gruvbox base colors
12
+ const dark0 = '#3c3836'; // Main foreground (text)
13
+ const dark1 = '#504945'; // Secondary foreground
14
+ const dark2 = '#665c54'; // Tertiary foreground
15
+ const dark3 = '#7c6f64'; // Quaternary foreground
16
+ const gray_244 = '#928374'; // Comments, invisibles, line highlighting
17
+ // Light/background shades
18
+ const light0 = '#fbf1c7'; // Main background
19
+ const light1 = '#ebdbb2'; // Secondary background
20
+ const light2 = '#d5c4a1'; // Tertiary background (not defined above)
21
+ const light3 = '#bdae93'; // Quaternary background
22
+ const light4 = '#a89984'; // Quinary background (not defined above)
23
+ // Accent colors
24
+ const faded_red = '#9d0006'; // Keywords, storage, operator
25
+ const faded_green = '#79740e'; // Strings, tag attributes
26
+ const faded_yellow = '#b57614'; // Functions, tag names
27
+ const faded_blue = '#076678'; // Variables
28
+ const faded_purple = '#8f3f71'; // Numbers, special constants
29
+ const faded_aqua = '#427b58'; // Types
30
+ const faded_orange = '#af3a03'; // Cursor, constants
31
+ // Simplified naming
32
+ const bg0 = light0;
33
+ const bg1 = light1;
34
+ const bg2 = light2;
35
+ const bg3 = light3;
36
+ const bg4 = light4;
37
+ const gray = gray_244;
38
+ const fg0 = dark0;
39
+ const fg1 = dark1;
40
+ const fg2 = dark2;
41
+ const fg3 = dark3;
42
+ const red = faded_red;
43
+ const green = faded_green;
44
+ const yellow = faded_yellow;
45
+ const blue = faded_blue;
46
+ const purple = faded_purple;
47
+ const aqua = faded_aqua;
48
+ const orange = faded_orange;
49
+ // UI specific colors
50
+ const invalid = red;
51
+ const darkBackground = bg1;
52
+ const highlightBackground = '#ffc42e25'; // Line highlight with transparency
53
+ const background = bg0;
54
+ const tooltipBackground = bg1;
55
+ const selection = darkBackground;
56
+ const selectionMatch = '#ffc42e40'; // Selection match background
57
+ const cursor = orange; // Cursor color
58
+ const activeBracketBg = '#d5c4a180'; // Active bracket background
59
+ const activeBracketBorder = orange; // Active bracket border
60
+ const diagnosticWarning = yellow; // Warning color
61
+ const linkColor = blue; // Link color
62
+ const visitedLinkColor = purple; // Visited link color
63
+ /**
64
+ * Enhanced editor theme styles for Gruvbox Light
65
+ */
11
66
  const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
67
+ // Base editor styles
12
68
  '&': {
13
69
  color: fg0,
14
70
  backgroundColor: background,
71
+ fontSize: generalContent.fontSize,
72
+ fontFamily: generalContent.fontFamily,
15
73
  },
74
+ // Content and cursor
16
75
  '.cm-content': {
17
76
  caretColor: cursor,
77
+ lineHeight: generalContent.lineHeight,
78
+ },
79
+ '.cm-cursor, .cm-dropCursor': {
80
+ borderLeftColor: cursor,
81
+ borderLeftWidth: generalCursor.borderLeftWidth,
82
+ },
83
+ '.cm-fat-cursor': {
84
+ backgroundColor: `${cursor}99`,
85
+ color: bg0,
86
+ },
87
+ // Selection
88
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
89
+ backgroundColor: selection,
90
+ color: fg0,
18
91
  },
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: fg0 },
22
- '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
23
- '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
92
+ // Make sure selection appears above active line
93
+ '.cm-selectionLayer': {
94
+ zIndex: 100,
95
+ },
96
+ // Search functionality
24
97
  '.cm-searchMatch': {
25
- backgroundColor: highlightBackground,
26
- color: yellow,
27
- outline: `1px solid ${bg2}`,
98
+ backgroundColor: '#ffc42e80',
99
+ outline: `1px solid ${orange}`,
100
+ color: fg0,
101
+ borderRadius: generalSearchField.borderRadius,
102
+ '& span': {
103
+ color: fg0,
104
+ },
28
105
  },
29
106
  '.cm-searchMatch.cm-searchMatch-selected': {
30
- backgroundColor: selectionMatch,
107
+ backgroundColor: orange,
108
+ color: bg0,
109
+ padding: generalSearchField.padding,
110
+ '& span': {
111
+ color: bg0,
112
+ },
31
113
  },
32
- '.cm-activeLine': { backgroundColor: highlightBackground },
33
- '.cm-selectionMatch': { backgroundColor: bg2 },
34
- '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
35
- outline: `1px solid ${bg2}`,
36
- fontStyle: 'bold',
114
+ '.cm-search.cm-panel.cm-textfield': {
115
+ color: fg0,
116
+ borderRadius: generalSearchField.borderRadius,
117
+ padding: generalSearchField.padding,
37
118
  },
38
- '&.cm-focused .cm-matchingBracket': {
39
- backgroundColor: bg2,
119
+ // Panels
120
+ '.cm-panels': {
121
+ backgroundColor: bg1,
122
+ color: fg1,
123
+ borderRadius: '0 0 4px 4px',
124
+ },
125
+ '.cm-panels.cm-panels-top': {
126
+ borderBottom: `1px solid ${bg3}`,
40
127
  },
128
+ '.cm-panels.cm-panels-bottom': {
129
+ borderTop: `1px solid ${bg3}`,
130
+ },
131
+ '.cm-panel button': {
132
+ backgroundColor: bg0,
133
+ color: fg0,
134
+ border: generalPanel.border,
135
+ borderRadius: generalPanel.borderRadius,
136
+ padding: generalPanel.padding,
137
+ },
138
+ '.cm-panel button:hover': {
139
+ backgroundColor: light2,
140
+ },
141
+ // Line highlighting
142
+ '.cm-activeLine': {
143
+ backgroundColor: highlightBackground,
144
+ borderRadius: generalLine.borderRadius,
145
+ zIndex: 1,
146
+ },
147
+ // Gutters
41
148
  '.cm-gutters': {
42
149
  backgroundColor: bg1,
43
- color: fg2,
44
- border: 'none',
150
+ color: fg3,
151
+ border: generalGutter.border,
152
+ borderRight: `1px solid ${bg3}`,
153
+ paddingRight: generalGutter.paddingRight,
45
154
  },
46
155
  '.cm-activeLineGutter': {
47
- backgroundColor: selectionMatch,
156
+ backgroundColor: bg2,
157
+ color: fg0,
158
+ fontWeight: generalGutter.fontWeight,
48
159
  },
49
- '.cm-foldPlaceholder': {
50
- backgroundColor: 'transparent',
51
- border: 'none',
52
- color: '#ddd',
160
+ '.cm-lineNumbers': {
161
+ fontSize: generalGutter.fontSize,
53
162
  },
163
+ '.cm-foldGutter': {
164
+ fontSize: generalGutter.fontSize,
165
+ },
166
+ '.cm-foldGutter .cm-gutterElement': {
167
+ color: fg3,
168
+ cursor: 'pointer',
169
+ },
170
+ '.cm-foldGutter .cm-gutterElement:hover': {
171
+ color: fg0,
172
+ },
173
+ // Tooltips and autocomplete
54
174
  '.cm-tooltip': {
55
- border: 'none',
56
175
  backgroundColor: tooltipBackground,
176
+ border: `1px solid ${bg3}`,
177
+ borderRadius: generalTooltip.borderRadius,
178
+ padding: generalTooltip.padding,
179
+ boxShadow: '0 1px 5px rgba(0, 0, 0, 0.1)',
180
+ },
181
+ '.cm-tooltip-autocomplete': {
182
+ '& > ul': {
183
+ backgroundColor: tooltipBackground,
184
+ border: 'none',
185
+ },
186
+ '& > ul > li': {
187
+ padding: generalTooltip.padding,
188
+ lineHeight: generalTooltip.lineHeight,
189
+ },
190
+ '& > ul > li[aria-selected]': {
191
+ backgroundColor: orange + '30',
192
+ color: fg0,
193
+ borderRadius: generalTooltip.borderRadiusSelected,
194
+ },
195
+ '& > ul > li:hover': {
196
+ backgroundColor: orange + '15',
197
+ },
198
+ '& > ul > li > span.cm-completionIcon': {
199
+ color: fg3,
200
+ paddingRight: generalTooltip.paddingRight,
201
+ },
202
+ '& > ul > li > span.cm-completionDetail': {
203
+ color: fg3,
204
+ fontStyle: 'italic',
205
+ },
57
206
  },
58
207
  '.cm-tooltip .cm-tooltip-arrow:before': {
59
208
  borderTopColor: 'transparent',
@@ -63,114 +212,161 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
63
212
  borderTopColor: tooltipBackground,
64
213
  borderBottomColor: tooltipBackground,
65
214
  },
66
- '.cm-tooltip-autocomplete': {
67
- '& > ul > li[aria-selected]': {
68
- backgroundColor: highlightBackground,
69
- color: fg1,
215
+ // Diagnostics styling
216
+ '.cm-diagnostic': {
217
+ '&-error': {
218
+ borderLeft: `3px solid ${invalid}`,
219
+ },
220
+ '&-warning': {
221
+ borderLeft: `3px solid ${diagnosticWarning}`,
222
+ },
223
+ '&-info': {
224
+ borderLeft: `3px solid ${linkColor}`,
70
225
  },
71
226
  },
72
- }, { dark: false });
73
- /**
74
- The highlighting style for code in the Gruvbox Light theme.
75
- */
76
- const gruvboxLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
77
- { tag: tags.keyword, color: red },
78
- {
79
- tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
80
- color: aqua,
227
+ '.cm-lintPoint-error': {
228
+ borderBottom: `2px wavy ${invalid}`,
81
229
  },
82
- { tag: [tags.variableName], color: blue },
83
- { tag: [/*@__PURE__*/tags.function(tags.variableName)], color: green, fontStyle: 'bold' },
84
- { tag: [tags.labelName], color: fg0 },
85
- {
86
- tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)],
87
- color: purple,
230
+ '.cm-lintPoint-warning': {
231
+ borderBottom: `2px wavy ${diagnosticWarning}`,
88
232
  },
89
- { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: fg0 },
90
- { tag: [tags.brace], color: fg0 },
91
- {
92
- tag: [tags.annotation],
93
- color: invalid,
233
+ // Matching brackets
234
+ '.cm-matchingBracket': {
235
+ backgroundColor: activeBracketBg,
236
+ outline: `1px solid ${activeBracketBorder}`,
237
+ borderRadius: generalMatching.borderRadius,
94
238
  },
95
- {
96
- tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
97
- color: purple,
239
+ '.cm-nonmatchingBracket': {
240
+ backgroundColor: '#fb492740',
241
+ outline: `1px solid ${invalid}`,
242
+ borderRadius: generalMatching.borderRadius,
98
243
  },
99
- {
100
- tag: [tags.typeName, tags.className],
101
- color: yellow,
244
+ // Selection matches
245
+ '.cm-selectionMatch': {
246
+ backgroundColor: selectionMatch,
247
+ outline: `1px solid ${bg3}`,
248
+ borderRadius: generalMatching.borderRadius,
102
249
  },
103
- {
104
- tag: [tags.operator, tags.operatorKeyword],
105
- color: red,
250
+ // Fold placeholder
251
+ '.cm-foldPlaceholder': {
252
+ backgroundColor: 'transparent',
253
+ color: fg2,
254
+ border: `1px dotted ${bg3}`,
255
+ borderRadius: generalPlaceholder.borderRadius,
256
+ padding: generalPlaceholder.padding,
257
+ margin: generalPlaceholder.margin,
106
258
  },
107
- {
108
- tag: [tags.tagName],
109
- color: aqua,
110
- fontStyle: 'bold',
259
+ // Focus outline
260
+ '&.cm-focused': {
261
+ outline: 'none',
262
+ boxShadow: `0 0 0 2px ${bg0}, 0 0 0 3px ${orange}40`,
111
263
  },
112
- {
113
- tag: [tags.squareBracket],
114
- color: orange,
264
+ // Scrollbars
265
+ '& .cm-scroller::-webkit-scrollbar': {
266
+ width: generalScroller.width,
267
+ height: generalScroller.height,
115
268
  },
116
- {
117
- tag: [tags.angleBracket],
118
- color: blue,
269
+ '& .cm-scroller::-webkit-scrollbar-track': {
270
+ background: bg0,
119
271
  },
120
- {
121
- tag: [tags.attributeName],
122
- color: aqua,
272
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
273
+ backgroundColor: bg3,
274
+ borderRadius: generalScroller.borderRadius,
275
+ border: `3px solid ${bg0}`,
123
276
  },
124
- {
125
- tag: [tags.regexp],
126
- color: aqua,
277
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
278
+ backgroundColor: bg4,
127
279
  },
128
- {
129
- tag: [tags.quote],
280
+ // Ghost text
281
+ '.cm-ghostText': {
282
+ opacity: '0.5',
130
283
  color: gray,
131
284
  },
132
- { tag: [tags.string], color: fg0 },
285
+ }, { dark: false });
286
+ /**
287
+ * Enhanced syntax highlighting for Gruvbox Light theme
288
+ */
289
+ const gruvboxLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
290
+ // Keywords and control flow
291
+ { tag: tags.keyword, color: red, fontWeight: 'bold' },
292
+ { tag: tags.controlKeyword, color: red, fontWeight: 'bold' },
293
+ { tag: tags.moduleKeyword, color: red, fontWeight: 'bold' },
294
+ // Names and variables
295
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: blue },
296
+ { tag: [tags.variableName], color: blue },
297
+ { tag: [tags.propertyName], color: aqua, fontStyle: 'normal' },
298
+ // Classes and types
299
+ { tag: [tags.typeName], color: aqua },
300
+ { tag: [tags.className], color: yellow, fontStyle: 'italic' },
301
+ { tag: [tags.namespace], color: blue, fontStyle: 'italic' },
302
+ // Operators and punctuation
303
+ { tag: [tags.operator, tags.operatorKeyword], color: fg0 },
304
+ { tag: [tags.bracket], color: gray },
305
+ { tag: [tags.brace], color: gray },
306
+ { tag: [tags.punctuation], color: gray },
307
+ // Functions and parameters
308
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: yellow },
309
+ { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: blue },
310
+ // Constants and literals
311
+ { tag: tags.number, color: purple },
312
+ { tag: tags.changed, color: purple },
313
+ { tag: tags.annotation, color: invalid, fontStyle: 'italic' },
314
+ { tag: tags.modifier, color: purple, fontStyle: 'italic' },
315
+ { tag: tags.self, color: purple },
316
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: orange },
317
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: orange },
318
+ // Strings and regex
319
+ { tag: [tags.processingInstruction, tags.inserted], color: green },
320
+ { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: green },
321
+ { tag: tags.string, color: green },
322
+ // Punctuation and structure
323
+ { tag: /*@__PURE__*/tags.definition(tags.typeName), color: aqua, fontWeight: 'bold' },
324
+ // Comments and documentation
325
+ { tag: tags.meta, color: gray },
326
+ { tag: tags.comment, fontStyle: 'italic', color: gray },
327
+ { tag: tags.docComment, fontStyle: 'italic', color: gray },
328
+ // HTML/XML elements
329
+ { tag: [tags.tagName], color: red },
330
+ { tag: [tags.attributeName], color: yellow },
331
+ // Markdown and text formatting
332
+ { tag: [tags.heading], fontWeight: 'bold', color: yellow },
333
+ { tag: [tags.strong], fontWeight: 'bold', color: yellow },
334
+ { tag: [tags.emphasis], fontStyle: 'italic', color: green },
335
+ // Links and URLs
133
336
  {
134
- tag: tags.link,
135
- color: fg3,
337
+ tag: [tags.link],
338
+ color: visitedLinkColor,
339
+ fontWeight: '500',
136
340
  textDecoration: 'underline',
137
341
  textUnderlinePosition: 'under',
138
342
  },
139
343
  {
140
- tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)],
141
- color: purple,
142
- },
143
- { tag: [tags.meta], color: yellow },
144
- { tag: [tags.comment], color: gray, fontStyle: 'italic' },
145
- { tag: tags.strong, fontWeight: 'bold', color: orange },
146
- { tag: tags.emphasis, fontStyle: 'italic', color: green },
147
- { tag: tags.strikethrough, textDecoration: 'line-through' },
148
- { tag: tags.heading, fontWeight: 'bold', color: green },
149
- { tag: [tags.heading1, tags.heading2], fontWeight: 'bold', color: green },
150
- {
151
- tag: [tags.heading3, tags.heading4],
152
- fontWeight: 'bold',
153
- color: yellow,
154
- },
155
- {
156
- tag: [tags.heading5, tags.heading6],
157
- color: yellow,
158
- },
159
- { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: purple },
160
- {
161
- tag: [tags.processingInstruction, tags.inserted],
162
- color: blue,
344
+ tag: [tags.url],
345
+ color: linkColor,
346
+ textDecoration: 'underline',
347
+ textUnderlineOffset: '2px',
163
348
  },
349
+ // Special states
164
350
  {
165
- tag: [tags.contentSeparator],
166
- color: red,
351
+ tag: [tags.invalid],
352
+ color: fg0,
353
+ textDecoration: 'underline wavy',
354
+ borderBottom: `1px wavy ${invalid}`,
167
355
  },
168
- { tag: tags.invalid, color: orange, borderBottom: `1px dotted ${invalid}` },
356
+ { tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
357
+ // Enhanced syntax highlighting
358
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: orange },
359
+ { tag: tags.deleted, color: invalid },
360
+ { tag: tags.squareBracket, color: gray },
361
+ { tag: tags.angleBracket, color: gray },
362
+ // Additional specific styles
363
+ { tag: tags.monospace, color: fg0 },
364
+ { tag: [tags.contentSeparator], color: blue },
365
+ { tag: tags.quote, color: gray },
169
366
  ]);
170
367
  /**
171
- Extension to enable the Gruvbox Light theme (both the editor theme and
172
- the highlight style).
173
- */
368
+ * Combined Gruvbox Light theme extension
369
+ */
174
370
  const gruvboxLight = [
175
371
  gruvboxLightTheme,
176
372
  /*@__PURE__*/syntaxHighlighting(gruvboxLightHighlightStyle),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fsegurai/codemirror-theme-gruvbox-light",
3
3
  "description": "Gruvbox Light theme for the CodeMirror code editor",
4
- "version": "6.1.3",
4
+ "version": "6.2.0-beta",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "exports": {