@fsegurai/codemirror-theme-gruvbox-light 6.2.0-beta.4 → 6.2.0-beta.5

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 (5) hide show
  1. package/dist/index.cjs +292 -162
  2. package/dist/index.d.cts +19 -8
  3. package/dist/index.d.ts +19 -8
  4. package/dist/index.js +259 -129
  5. package/package.json +2 -3
package/dist/index.cjs CHANGED
@@ -3,7 +3,107 @@
3
3
  var view = require('@codemirror/view');
4
4
  var language = require('@codemirror/language');
5
5
  var highlight = require('@lezer/highlight');
6
- var codemirrorThemeUtils = require('@fsegurai/codemirror-theme-utils');
6
+
7
+ // Helper module for styling options
8
+ const generalContent = {
9
+ fontSize: '14px',
10
+ fontFamily: 'JetBrains Mono, Consolas, monospace',
11
+ lineHeight: '1.6',
12
+ };
13
+ const generalCursor = {
14
+ borderLeftWidth: '2px',
15
+ };
16
+ const generalDiff = {
17
+ insertedTextDecoration: 'none',
18
+ deletedTextDecoration: 'line-through',
19
+ insertedLinePadding: '1px 3px',
20
+ borderRadious: '3px'};
21
+ const generalGutter = {
22
+ border: 'none',
23
+ paddingRight: '8px',
24
+ fontSize: '0.9em',
25
+ fontWeight: '500',
26
+ };
27
+ const generalPanel = {
28
+ border: 'none',
29
+ borderRadius: '4px',
30
+ padding: '2px 10px',
31
+ };
32
+ const generalLine = {
33
+ borderRadius: '2px',
34
+ };
35
+ const generalMatching = {
36
+ borderRadius: '2px',
37
+ };
38
+ const generalPlaceholder = {
39
+ borderRadius: '4px',
40
+ padding: '0 5px',
41
+ margin: '0 2px',
42
+ };
43
+ const generalScroller = {
44
+ width: '12px',
45
+ height: '12px',
46
+ borderRadius: '6px',
47
+ };
48
+ const generalSearchField = {
49
+ borderRadius: '4px',
50
+ padding: '2px 6px',
51
+ };
52
+ const generalTooltip = {
53
+ borderRadius: '4px',
54
+ borderRadiusSelected: '3px',
55
+ lineHeight: '1.3',
56
+ padding: '4px 8px',
57
+ paddingRight: '8px',
58
+ };
59
+ /**
60
+ * Function to apply merge revert styles for a theme
61
+ * @param styles Styles for the merge revert buttons
62
+ * @param styles.backgroundColor Background color of the revert area
63
+ * @param styles.borderColor Border color of the revert area
64
+ * @param styles.buttonColor Color of the revert buttons
65
+ * @param styles.buttonHoverColor Hover color of the revert buttons
66
+ */
67
+ function applyMergeRevertStyles(styles) {
68
+ // Create a stylesheet
69
+ const styleEl = document.createElement('style');
70
+ styleEl.id = 'cm-merge-revert-styles';
71
+ // Define CSS with the theme-specific values
72
+ styleEl.textContent = `
73
+ .cm-merge-revert {
74
+ display: flex;
75
+ flex-direction: column;
76
+ align-items: center;
77
+ justify-content: flex-start;
78
+ padding: 4px;
79
+ background-color: ${styles.backgroundColor};
80
+ border-left: 1px solid ${styles.borderColor};
81
+ border-right: 1px solid ${styles.borderColor};
82
+ width: 32px;
83
+ }
84
+
85
+ .cm-merge-revert button {
86
+ width: 100%;
87
+ height: auto;
88
+ background-color: transparent;
89
+ border: none;
90
+ color: ${styles.buttonColor};
91
+ cursor: pointer;
92
+ margin: 0 auto;
93
+ font-size: 20px;
94
+ }
95
+
96
+ .cm-merge-revert button:hover {
97
+ background-color: ${styles.buttonHoverColor};
98
+ }
99
+ `;
100
+ // Remove any existing merge styles
101
+ const existingStyle = document.getElementById('cm-merge-revert-styles');
102
+ if (existingStyle)
103
+ existingStyle.remove();
104
+ // Add the new styles
105
+ document.head.appendChild(styleEl);
106
+ }
7
107
 
8
108
  /**
9
109
  * Enhanced Gruvbox Light theme color definitions
@@ -11,85 +111,67 @@ var codemirrorThemeUtils = require('@fsegurai/codemirror-theme-utils');
11
111
  * Colors organized by function with visual color blocks
12
112
  */
13
113
  // 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
114
+ const base00 = '#3c3836', // Main foreground (text)
115
+ base01 = '#504945', // Secondary foreground
116
+ base02 = '#665c54', // Tertiary foreground
117
+ base03 = '#7c6f64', // Quaternary foreground
118
+ base04 = '#928374', // Comments, invisibles, line highlighting
19
119
  // 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)
120
+ base05 = '#fbf1c7', // Main background
121
+ base06 = '#ebdbb2', // Secondary background
122
+ base07 = '#d5c4a1', // Tertiary background (not defined above)
123
+ base08 = '#bdae93', // Quaternary background
124
+ base09 = '#a89984', // Quinary background (not defined above)
25
125
  // 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;
126
+ base0A = '#9d0006', // Keywords, storage, operator
127
+ base0B = '#79740e', // Strings, tag attributes
128
+ base0C = '#b57614', // Functions, tag names
129
+ base0D = '#076678', // Variables
130
+ base0E = '#8f3f71', // Numbers, special constants
131
+ base0F = '#427b58', // Types
132
+ base10 = '#af3a03'; // Cursor, constants
51
133
  // 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
134
+ const invalid = base0A, darkBackground = base06, highlightBackground = '#ffc42e25', // Line highlight with transparency
135
+ background = base05, tooltipBackground = base06, selection = darkBackground, selectionMatch = '#ffc42e40', // Selection match background
136
+ cursor = base10, // Cursor color
137
+ activeBracketBg = '#d5c4a180', // Active bracket background
138
+ activeBracketBorder = base10, // Active bracket border
139
+ diagnosticWarning = base0C, // Warning color
140
+ linkColor = base0D, // Link color
141
+ visitedLinkColor = base0E; // Visited link color
142
+ // Diff/merge specific colors
143
+ const addedBackground = '#d8e5bc80', // Light base0B with transparency for insertions
144
+ removedBackground = '#f7cfcf80', // Light base0A with transparency for deletions
145
+ addedText = '#79740e', // Gruvbox base0B for added text
146
+ removedText = '#9d0006'; // Gruvbox base0A for removed text
65
147
  /**
66
148
  * Enhanced editor theme styles for Gruvbox Light
67
149
  */
68
150
  const gruvboxLightTheme = view.EditorView.theme({
69
151
  // Base editor styles
70
152
  '&': {
71
- color: fg0,
153
+ color: base00,
72
154
  backgroundColor: background,
73
- fontSize: codemirrorThemeUtils.generalContent.fontSize,
74
- fontFamily: codemirrorThemeUtils.generalContent.fontFamily,
155
+ fontSize: generalContent.fontSize,
156
+ fontFamily: generalContent.fontFamily,
75
157
  },
76
158
  // Content and cursor
77
159
  '.cm-content': {
78
160
  caretColor: cursor,
79
- lineHeight: codemirrorThemeUtils.generalContent.lineHeight,
161
+ lineHeight: generalContent.lineHeight,
80
162
  },
81
163
  '.cm-cursor, .cm-dropCursor': {
82
164
  borderLeftColor: cursor,
83
- borderLeftWidth: codemirrorThemeUtils.generalCursor.borderLeftWidth,
165
+ borderLeftWidth: generalCursor.borderLeftWidth,
84
166
  },
85
167
  '.cm-fat-cursor': {
86
168
  backgroundColor: `${cursor}99`,
87
- color: bg0,
169
+ color: base05,
88
170
  },
89
171
  // Selection
90
172
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
91
173
  backgroundColor: selection,
92
- color: fg0,
174
+ color: base00,
93
175
  },
94
176
  // Make sure selection appears above active line
95
177
  '.cm-selectionLayer': {
@@ -98,86 +180,125 @@ const gruvboxLightTheme = view.EditorView.theme({
98
180
  // Search functionality
99
181
  '.cm-searchMatch': {
100
182
  backgroundColor: '#ffc42e80',
101
- outline: `1px solid ${orange}`,
102
- color: fg0,
103
- borderRadius: codemirrorThemeUtils.generalSearchField.borderRadius,
183
+ outline: `1px solid ${base10}`,
184
+ color: base00,
185
+ borderRadius: generalSearchField.borderRadius,
104
186
  '& span': {
105
- color: fg0,
187
+ color: base00,
106
188
  },
107
189
  },
108
190
  '.cm-searchMatch.cm-searchMatch-selected': {
109
- backgroundColor: orange,
110
- color: bg0,
111
- padding: codemirrorThemeUtils.generalSearchField.padding,
191
+ backgroundColor: base10,
192
+ color: base05,
193
+ padding: generalSearchField.padding,
112
194
  '& span': {
113
- color: bg0,
195
+ color: base05,
114
196
  },
115
197
  },
116
198
  '.cm-search.cm-panel.cm-textfield': {
117
- color: fg0,
118
- borderRadius: codemirrorThemeUtils.generalSearchField.borderRadius,
119
- padding: codemirrorThemeUtils.generalSearchField.padding,
199
+ color: base00,
200
+ borderRadius: generalSearchField.borderRadius,
201
+ padding: generalSearchField.padding,
120
202
  },
121
203
  // Panels
122
204
  '.cm-panels': {
123
- backgroundColor: bg1,
124
- color: fg1,
205
+ backgroundColor: base06,
206
+ color: base01,
125
207
  borderRadius: '0 0 4px 4px',
126
208
  },
127
209
  '.cm-panels.cm-panels-top': {
128
- borderBottom: `1px solid ${bg3}`,
210
+ borderBottom: `1px solid ${base08}`,
129
211
  },
130
212
  '.cm-panels.cm-panels-bottom': {
131
- borderTop: `1px solid ${bg3}`,
213
+ borderTop: `1px solid ${base08}`,
132
214
  },
133
215
  '.cm-panel button': {
134
- backgroundColor: bg0,
135
- color: fg0,
136
- border: codemirrorThemeUtils.generalPanel.border,
137
- borderRadius: codemirrorThemeUtils.generalPanel.borderRadius,
138
- padding: codemirrorThemeUtils.generalPanel.padding,
216
+ backgroundColor: base05,
217
+ color: base00,
218
+ border: generalPanel.border,
219
+ borderRadius: generalPanel.borderRadius,
220
+ padding: generalPanel.padding,
139
221
  },
140
222
  '.cm-panel button:hover': {
141
- backgroundColor: light2,
223
+ backgroundColor: base07,
142
224
  },
143
225
  // Line highlighting
144
226
  '.cm-activeLine': {
145
227
  backgroundColor: highlightBackground,
146
- borderRadius: codemirrorThemeUtils.generalLine.borderRadius,
228
+ borderRadius: generalLine.borderRadius,
147
229
  zIndex: 1,
148
230
  },
149
231
  // Gutters
150
232
  '.cm-gutters': {
151
- backgroundColor: bg1,
152
- color: fg3,
153
- border: codemirrorThemeUtils.generalGutter.border,
154
- borderRight: `1px solid ${bg3}`,
155
- paddingRight: codemirrorThemeUtils.generalGutter.paddingRight,
233
+ backgroundColor: base06,
234
+ color: base03,
235
+ border: generalGutter.border,
236
+ borderRight: `1px solid ${base08}`,
237
+ paddingRight: generalGutter.paddingRight,
156
238
  },
157
239
  '.cm-activeLineGutter': {
158
- backgroundColor: bg2,
159
- color: fg0,
160
- fontWeight: codemirrorThemeUtils.generalGutter.fontWeight,
240
+ backgroundColor: base07,
241
+ color: base00,
242
+ fontWeight: generalGutter.fontWeight,
161
243
  },
162
244
  '.cm-lineNumbers': {
163
- fontSize: codemirrorThemeUtils.generalGutter.fontSize,
245
+ fontSize: generalGutter.fontSize,
164
246
  },
165
247
  '.cm-foldGutter': {
166
- fontSize: codemirrorThemeUtils.generalGutter.fontSize,
248
+ fontSize: generalGutter.fontSize,
167
249
  },
168
250
  '.cm-foldGutter .cm-gutterElement': {
169
- color: fg3,
251
+ color: base03,
170
252
  cursor: 'pointer',
171
253
  },
172
254
  '.cm-foldGutter .cm-gutterElement:hover': {
173
- color: fg0,
255
+ color: base00,
256
+ },
257
+ // Diff/Merge View Styles
258
+ // Inserted/Added Content
259
+ '.cm-insertedLine': {
260
+ textDecoration: generalDiff.insertedTextDecoration,
261
+ backgroundColor: addedBackground,
262
+ color: addedText,
263
+ padding: generalDiff.insertedLinePadding,
264
+ borderRadius: generalDiff.borderRadious,
265
+ },
266
+ 'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
267
+ textDecoration: generalDiff.insertedTextDecoration,
268
+ backgroundColor: `${addedBackground} !important`,
269
+ color: addedText,
270
+ padding: generalDiff.insertedLinePadding,
271
+ borderRadius: generalDiff.borderRadious,
272
+ border: `1px solid ${addedText}40`,
273
+ },
274
+ 'ins.cm-insertedLine .cm-changedText': {
275
+ background: 'transparent !important',
276
+ },
277
+ // Deleted/Removed Content
278
+ '.cm-deletedLine': {
279
+ textDecoration: generalDiff.deletedTextDecoration,
280
+ backgroundColor: removedBackground,
281
+ color: removedText,
282
+ padding: generalDiff.insertedLinePadding,
283
+ borderRadius: generalDiff.borderRadious,
284
+ },
285
+ 'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
286
+ textDecoration: generalDiff.deletedTextDecoration,
287
+ backgroundColor: `${removedBackground} !important`,
288
+ color: removedText,
289
+ padding: generalDiff.insertedLinePadding,
290
+ borderRadius: generalDiff.borderRadious,
291
+ border: `1px solid ${removedText}40`,
292
+ },
293
+ 'del .cm-deletedText, del .cm-changedText': {
294
+ background: 'transparent !important',
174
295
  },
175
296
  // Tooltips and autocomplete
176
297
  '.cm-tooltip': {
177
298
  backgroundColor: tooltipBackground,
178
- border: `1px solid ${bg3}`,
179
- borderRadius: codemirrorThemeUtils.generalTooltip.borderRadius,
180
- padding: codemirrorThemeUtils.generalTooltip.padding,
299
+ border: `1px solid ${base08}`,
300
+ borderRadius: generalTooltip.borderRadius,
301
+ padding: generalTooltip.padding,
181
302
  boxShadow: '0 1px 5px rgba(0, 0, 0, 0.1)',
182
303
  },
183
304
  '.cm-tooltip-autocomplete': {
@@ -186,23 +307,23 @@ const gruvboxLightTheme = view.EditorView.theme({
186
307
  border: 'none',
187
308
  },
188
309
  '& > ul > li': {
189
- padding: codemirrorThemeUtils.generalTooltip.padding,
190
- lineHeight: codemirrorThemeUtils.generalTooltip.lineHeight,
310
+ padding: generalTooltip.padding,
311
+ lineHeight: generalTooltip.lineHeight,
191
312
  },
192
313
  '& > ul > li[aria-selected]': {
193
- backgroundColor: orange + '30',
194
- color: fg0,
195
- borderRadius: codemirrorThemeUtils.generalTooltip.borderRadiusSelected,
314
+ backgroundColor: base10 + '30',
315
+ color: base00,
316
+ borderRadius: generalTooltip.borderRadiusSelected,
196
317
  },
197
318
  '& > ul > li:hover': {
198
- backgroundColor: orange + '15',
319
+ backgroundColor: base10 + '15',
199
320
  },
200
321
  '& > ul > li > span.cm-completionIcon': {
201
- color: fg3,
202
- paddingRight: codemirrorThemeUtils.generalTooltip.paddingRight,
322
+ color: base03,
323
+ paddingRight: generalTooltip.paddingRight,
203
324
  },
204
325
  '& > ul > li > span.cm-completionDetail': {
205
- color: fg3,
326
+ color: base03,
206
327
  fontStyle: 'italic',
207
328
  },
208
329
  },
@@ -236,53 +357,53 @@ const gruvboxLightTheme = view.EditorView.theme({
236
357
  '.cm-matchingBracket': {
237
358
  backgroundColor: activeBracketBg,
238
359
  outline: `1px solid ${activeBracketBorder}`,
239
- borderRadius: codemirrorThemeUtils.generalMatching.borderRadius,
360
+ borderRadius: generalMatching.borderRadius,
240
361
  },
241
362
  '.cm-nonmatchingBracket': {
242
363
  backgroundColor: '#fb492740',
243
364
  outline: `1px solid ${invalid}`,
244
- borderRadius: codemirrorThemeUtils.generalMatching.borderRadius,
365
+ borderRadius: generalMatching.borderRadius,
245
366
  },
246
367
  // Selection matches
247
368
  '.cm-selectionMatch': {
248
369
  backgroundColor: selectionMatch,
249
- outline: `1px solid ${bg3}`,
250
- borderRadius: codemirrorThemeUtils.generalMatching.borderRadius,
370
+ outline: `1px solid ${base08}`,
371
+ borderRadius: generalMatching.borderRadius,
251
372
  },
252
373
  // Fold placeholder
253
374
  '.cm-foldPlaceholder': {
254
375
  backgroundColor: 'transparent',
255
- color: fg2,
256
- border: `1px dotted ${bg3}`,
257
- borderRadius: codemirrorThemeUtils.generalPlaceholder.borderRadius,
258
- padding: codemirrorThemeUtils.generalPlaceholder.padding,
259
- margin: codemirrorThemeUtils.generalPlaceholder.margin,
376
+ color: base02,
377
+ border: `1px dotted ${base08}`,
378
+ borderRadius: generalPlaceholder.borderRadius,
379
+ padding: generalPlaceholder.padding,
380
+ margin: generalPlaceholder.margin,
260
381
  },
261
382
  // Focus outline
262
383
  '&.cm-focused': {
263
384
  outline: 'none',
264
- boxShadow: `0 0 0 2px ${bg0}, 0 0 0 3px ${orange}40`,
385
+ boxShadow: `0 0 0 2px ${base05}, 0 0 0 3px ${base10}40`,
265
386
  },
266
387
  // Scrollbars
267
388
  '& .cm-scroller::-webkit-scrollbar': {
268
- width: codemirrorThemeUtils.generalScroller.width,
269
- height: codemirrorThemeUtils.generalScroller.height,
389
+ width: generalScroller.width,
390
+ height: generalScroller.height,
270
391
  },
271
392
  '& .cm-scroller::-webkit-scrollbar-track': {
272
- background: bg0,
393
+ background: base05,
273
394
  },
274
395
  '& .cm-scroller::-webkit-scrollbar-thumb': {
275
- backgroundColor: bg3,
276
- borderRadius: codemirrorThemeUtils.generalScroller.borderRadius,
277
- border: `3px solid ${bg0}`,
396
+ backgroundColor: base08,
397
+ borderRadius: generalScroller.borderRadius,
398
+ border: `3px solid ${base05}`,
278
399
  },
279
400
  '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
280
- backgroundColor: bg4,
401
+ backgroundColor: base09,
281
402
  },
282
403
  // Ghost text
283
404
  '.cm-ghostText': {
284
405
  opacity: '0.5',
285
- color: gray,
406
+ color: base04,
286
407
  },
287
408
  }, { dark: false });
288
409
  /**
@@ -290,50 +411,50 @@ const gruvboxLightTheme = view.EditorView.theme({
290
411
  */
291
412
  const gruvboxLightHighlightStyle = language.HighlightStyle.define([
292
413
  // 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' },
414
+ { tag: highlight.tags.keyword, color: base0A, fontWeight: 'bold' },
415
+ { tag: highlight.tags.controlKeyword, color: base0A, fontWeight: 'bold' },
416
+ { tag: highlight.tags.moduleKeyword, color: base0A, fontWeight: 'bold' },
296
417
  // 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' },
418
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base0D },
419
+ { tag: [highlight.tags.variableName], color: base0D },
420
+ { tag: [highlight.tags.propertyName], color: base0F, fontStyle: 'normal' },
300
421
  // 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' },
422
+ { tag: [highlight.tags.typeName], color: base0F },
423
+ { tag: [highlight.tags.className], color: base0C, fontStyle: 'italic' },
424
+ { tag: [highlight.tags.namespace], color: base0D, fontStyle: 'italic' },
304
425
  // 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 },
426
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base00 },
427
+ { tag: [highlight.tags.bracket], color: base04 },
428
+ { tag: [highlight.tags.brace], color: base04 },
429
+ { tag: [highlight.tags.punctuation], color: base04 },
309
430
  // 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 },
431
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base0C },
432
+ { tag: [highlight.tags.definition(highlight.tags.variableName)], color: base0D },
312
433
  // Constants and literals
313
- { tag: highlight.tags.number, color: purple },
314
- { tag: highlight.tags.changed, color: purple },
434
+ { tag: highlight.tags.number, color: base0E },
435
+ { tag: highlight.tags.changed, color: base0E },
315
436
  { 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 },
437
+ { tag: highlight.tags.modifier, color: base0E, fontStyle: 'italic' },
438
+ { tag: highlight.tags.self, color: base0E },
439
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base10 },
440
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base10 },
320
441
  // 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 },
442
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base0B },
443
+ { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base0B },
444
+ { tag: highlight.tags.string, color: base0B },
324
445
  // Punctuation and structure
325
- { tag: highlight.tags.definition(highlight.tags.typeName), color: aqua, fontWeight: 'bold' },
446
+ { tag: highlight.tags.definition(highlight.tags.typeName), color: base0F, fontWeight: 'bold' },
326
447
  // 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 },
448
+ { tag: highlight.tags.meta, color: base04 },
449
+ { tag: highlight.tags.comment, fontStyle: 'italic', color: base04 },
450
+ { tag: highlight.tags.docComment, fontStyle: 'italic', color: base04 },
330
451
  // HTML/XML elements
331
- { tag: [highlight.tags.tagName], color: red },
332
- { tag: [highlight.tags.attributeName], color: yellow },
452
+ { tag: [highlight.tags.tagName], color: base0A },
453
+ { tag: [highlight.tags.attributeName], color: base0C },
333
454
  // 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 },
455
+ { tag: [highlight.tags.heading], fontWeight: 'bold', color: base0C },
456
+ { tag: [highlight.tags.strong], fontWeight: 'bold', color: base0C },
457
+ { tag: [highlight.tags.emphasis], fontStyle: 'italic', color: base0B },
337
458
  // Links and URLs
338
459
  {
339
460
  tag: [highlight.tags.link],
@@ -351,20 +472,20 @@ const gruvboxLightHighlightStyle = language.HighlightStyle.define([
351
472
  // Special states
352
473
  {
353
474
  tag: [highlight.tags.invalid],
354
- color: fg0,
475
+ color: base00,
355
476
  textDecoration: 'underline wavy',
356
477
  borderBottom: `1px wavy ${invalid}`,
357
478
  },
358
479
  { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
359
480
  // Enhanced syntax highlighting
360
- { tag: highlight.tags.constant(highlight.tags.name), color: orange },
481
+ { tag: highlight.tags.constant(highlight.tags.name), color: base10 },
361
482
  { tag: highlight.tags.deleted, color: invalid },
362
- { tag: highlight.tags.squareBracket, color: gray },
363
- { tag: highlight.tags.angleBracket, color: gray },
483
+ { tag: highlight.tags.squareBracket, color: base04 },
484
+ { tag: highlight.tags.angleBracket, color: base04 },
364
485
  // Additional specific styles
365
- { tag: highlight.tags.monospace, color: fg0 },
366
- { tag: [highlight.tags.contentSeparator], color: blue },
367
- { tag: highlight.tags.quote, color: gray },
486
+ { tag: highlight.tags.monospace, color: base00 },
487
+ { tag: [highlight.tags.contentSeparator], color: base0D },
488
+ { tag: highlight.tags.quote, color: base04 },
368
489
  ]);
369
490
  /**
370
491
  * Combined Gruvbox Light theme extension
@@ -373,7 +494,16 @@ const gruvboxLight = [
373
494
  gruvboxLightTheme,
374
495
  language.syntaxHighlighting(gruvboxLightHighlightStyle),
375
496
  ];
497
+ /**
498
+ * Gruvbox Light merge revert styles configuration
499
+ */
500
+ const gruvboxLightMergeStyles = {
501
+ backgroundColor: tooltipBackground,
502
+ borderColor: base08,
503
+ buttonColor: base00,
504
+ buttonHoverColor: base07,
505
+ };
376
506
 
507
+ exports.applyMergeRevertStyles = applyMergeRevertStyles;
377
508
  exports.gruvboxLight = gruvboxLight;
378
- exports.gruvboxLightHighlightStyle = gruvboxLightHighlightStyle;
379
- exports.gruvboxLightTheme = gruvboxLightTheme;
509
+ exports.gruvboxLightMergeStyles = gruvboxLightMergeStyles;
package/dist/index.d.cts CHANGED
@@ -1,17 +1,28 @@
1
1
  import { Extension } from '@codemirror/state';
2
- import { HighlightStyle } from '@codemirror/language';
3
2
 
3
+ interface IMergeRevertStyles {
4
+ backgroundColor: string;
5
+ borderColor: string;
6
+ buttonColor: string;
7
+ buttonHoverColor: string;
8
+ }
4
9
  /**
5
- * Enhanced editor theme styles for Gruvbox Light
10
+ * Function to apply merge revert styles for a theme
11
+ * @param styles Styles for the merge revert buttons
12
+ * @param styles.backgroundColor Background color of the revert area
13
+ * @param styles.borderColor Border color of the revert area
14
+ * @param styles.buttonColor Color of the revert buttons
15
+ * @param styles.buttonHoverColor Hover color of the revert buttons
6
16
  */
7
- declare const gruvboxLightTheme: Extension;
8
- /**
9
- * Enhanced syntax highlighting for Gruvbox Light theme
10
- */
11
- declare const gruvboxLightHighlightStyle: HighlightStyle;
17
+ declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
18
+
12
19
  /**
13
20
  * Combined Gruvbox Light theme extension
14
21
  */
15
22
  declare const gruvboxLight: Extension;
23
+ /**
24
+ * Gruvbox Light merge revert styles configuration
25
+ */
26
+ declare const gruvboxLightMergeStyles: IMergeRevertStyles;
16
27
 
17
- export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
28
+ export { applyMergeRevertStyles, gruvboxLight, gruvboxLightMergeStyles };
package/dist/index.d.ts CHANGED
@@ -1,17 +1,28 @@
1
1
  import { Extension } from '@codemirror/state';
2
- import { HighlightStyle } from '@codemirror/language';
3
2
 
3
+ interface IMergeRevertStyles {
4
+ backgroundColor: string;
5
+ borderColor: string;
6
+ buttonColor: string;
7
+ buttonHoverColor: string;
8
+ }
4
9
  /**
5
- * Enhanced editor theme styles for Gruvbox Light
10
+ * Function to apply merge revert styles for a theme
11
+ * @param styles Styles for the merge revert buttons
12
+ * @param styles.backgroundColor Background color of the revert area
13
+ * @param styles.borderColor Border color of the revert area
14
+ * @param styles.buttonColor Color of the revert buttons
15
+ * @param styles.buttonHoverColor Hover color of the revert buttons
6
16
  */
7
- declare const gruvboxLightTheme: Extension;
8
- /**
9
- * Enhanced syntax highlighting for Gruvbox Light theme
10
- */
11
- declare const gruvboxLightHighlightStyle: HighlightStyle;
17
+ declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
18
+
12
19
  /**
13
20
  * Combined Gruvbox Light theme extension
14
21
  */
15
22
  declare const gruvboxLight: Extension;
23
+ /**
24
+ * Gruvbox Light merge revert styles configuration
25
+ */
26
+ declare const gruvboxLightMergeStyles: IMergeRevertStyles;
16
27
 
17
- export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
28
+ export { applyMergeRevertStyles, gruvboxLight, gruvboxLightMergeStyles };
package/dist/index.js CHANGED
@@ -1,7 +1,107 @@
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 '@fsegurai/codemirror-theme-utils';
4
+
5
+ // Helper module for styling options
6
+ const generalContent = {
7
+ fontSize: '14px',
8
+ fontFamily: 'JetBrains Mono, Consolas, monospace',
9
+ lineHeight: '1.6',
10
+ };
11
+ const generalCursor = {
12
+ borderLeftWidth: '2px',
13
+ };
14
+ const generalDiff = {
15
+ insertedTextDecoration: 'none',
16
+ deletedTextDecoration: 'line-through',
17
+ insertedLinePadding: '1px 3px',
18
+ borderRadious: '3px'};
19
+ const generalGutter = {
20
+ border: 'none',
21
+ paddingRight: '8px',
22
+ fontSize: '0.9em',
23
+ fontWeight: '500',
24
+ };
25
+ const generalPanel = {
26
+ border: 'none',
27
+ borderRadius: '4px',
28
+ padding: '2px 10px',
29
+ };
30
+ const generalLine = {
31
+ borderRadius: '2px',
32
+ };
33
+ const generalMatching = {
34
+ borderRadius: '2px',
35
+ };
36
+ const generalPlaceholder = {
37
+ borderRadius: '4px',
38
+ padding: '0 5px',
39
+ margin: '0 2px',
40
+ };
41
+ const generalScroller = {
42
+ width: '12px',
43
+ height: '12px',
44
+ borderRadius: '6px',
45
+ };
46
+ const generalSearchField = {
47
+ borderRadius: '4px',
48
+ padding: '2px 6px',
49
+ };
50
+ const generalTooltip = {
51
+ borderRadius: '4px',
52
+ borderRadiusSelected: '3px',
53
+ lineHeight: '1.3',
54
+ padding: '4px 8px',
55
+ paddingRight: '8px',
56
+ };
57
+ /**
58
+ * Function to apply merge revert styles for a theme
59
+ * @param styles Styles for the merge revert buttons
60
+ * @param styles.backgroundColor Background color of the revert area
61
+ * @param styles.borderColor Border color of the revert area
62
+ * @param styles.buttonColor Color of the revert buttons
63
+ * @param styles.buttonHoverColor Hover color of the revert buttons
64
+ */
65
+ function applyMergeRevertStyles(styles) {
66
+ // Create a stylesheet
67
+ const styleEl = document.createElement('style');
68
+ styleEl.id = 'cm-merge-revert-styles';
69
+ // Define CSS with the theme-specific values
70
+ styleEl.textContent = `
71
+ .cm-merge-revert {
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ justify-content: flex-start;
76
+ padding: 4px;
77
+ background-color: ${styles.backgroundColor};
78
+ border-left: 1px solid ${styles.borderColor};
79
+ border-right: 1px solid ${styles.borderColor};
80
+ width: 32px;
81
+ }
82
+
83
+ .cm-merge-revert button {
84
+ width: 100%;
85
+ height: auto;
86
+ background-color: transparent;
87
+ border: none;
88
+ color: ${styles.buttonColor};
89
+ cursor: pointer;
90
+ margin: 0 auto;
91
+ font-size: 20px;
92
+ }
93
+
94
+ .cm-merge-revert button:hover {
95
+ background-color: ${styles.buttonHoverColor};
96
+ }
97
+ `;
98
+ // Remove any existing merge styles
99
+ const existingStyle = document.getElementById('cm-merge-revert-styles');
100
+ if (existingStyle)
101
+ existingStyle.remove();
102
+ // Add the new styles
103
+ document.head.appendChild(styleEl);
104
+ }
5
105
 
6
106
  /**
7
107
  * Enhanced Gruvbox Light theme color definitions
@@ -9,64 +109,46 @@ import { generalScroller, generalPlaceholder, generalMatching, generalTooltip, g
9
109
  * Colors organized by function with visual color blocks
10
110
  */
11
111
  // 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
112
+ const base00 = '#3c3836', // Main foreground (text)
113
+ base01 = '#504945', // Secondary foreground
114
+ base02 = '#665c54', // Tertiary foreground
115
+ base03 = '#7c6f64', // Quaternary foreground
116
+ base04 = '#928374', // Comments, invisibles, line highlighting
17
117
  // 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)
118
+ base05 = '#fbf1c7', // Main background
119
+ base06 = '#ebdbb2', // Secondary background
120
+ base07 = '#d5c4a1', // Tertiary background (not defined above)
121
+ base08 = '#bdae93', // Quaternary background
122
+ base09 = '#a89984', // Quinary background (not defined above)
23
123
  // 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;
124
+ base0A = '#9d0006', // Keywords, storage, operator
125
+ base0B = '#79740e', // Strings, tag attributes
126
+ base0C = '#b57614', // Functions, tag names
127
+ base0D = '#076678', // Variables
128
+ base0E = '#8f3f71', // Numbers, special constants
129
+ base0F = '#427b58', // Types
130
+ base10 = '#af3a03'; // Cursor, constants
49
131
  // 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
132
+ const invalid = base0A, darkBackground = base06, highlightBackground = '#ffc42e25', // Line highlight with transparency
133
+ background = base05, tooltipBackground = base06, selection = darkBackground, selectionMatch = '#ffc42e40', // Selection match background
134
+ cursor = base10, // Cursor color
135
+ activeBracketBg = '#d5c4a180', // Active bracket background
136
+ activeBracketBorder = base10, // Active bracket border
137
+ diagnosticWarning = base0C, // Warning color
138
+ linkColor = base0D, // Link color
139
+ visitedLinkColor = base0E; // Visited link color
140
+ // Diff/merge specific colors
141
+ const addedBackground = '#d8e5bc80', // Light base0B with transparency for insertions
142
+ removedBackground = '#f7cfcf80', // Light base0A with transparency for deletions
143
+ addedText = '#79740e', // Gruvbox base0B for added text
144
+ removedText = '#9d0006'; // Gruvbox base0A for removed text
63
145
  /**
64
146
  * Enhanced editor theme styles for Gruvbox Light
65
147
  */
66
148
  const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
67
149
  // Base editor styles
68
150
  '&': {
69
- color: fg0,
151
+ color: base00,
70
152
  backgroundColor: background,
71
153
  fontSize: generalContent.fontSize,
72
154
  fontFamily: generalContent.fontFamily,
@@ -82,12 +164,12 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
82
164
  },
83
165
  '.cm-fat-cursor': {
84
166
  backgroundColor: `${cursor}99`,
85
- color: bg0,
167
+ color: base05,
86
168
  },
87
169
  // Selection
88
170
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
89
171
  backgroundColor: selection,
90
- color: fg0,
172
+ color: base00,
91
173
  },
92
174
  // Make sure selection appears above active line
93
175
  '.cm-selectionLayer': {
@@ -96,47 +178,47 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
96
178
  // Search functionality
97
179
  '.cm-searchMatch': {
98
180
  backgroundColor: '#ffc42e80',
99
- outline: `1px solid ${orange}`,
100
- color: fg0,
181
+ outline: `1px solid ${base10}`,
182
+ color: base00,
101
183
  borderRadius: generalSearchField.borderRadius,
102
184
  '& span': {
103
- color: fg0,
185
+ color: base00,
104
186
  },
105
187
  },
106
188
  '.cm-searchMatch.cm-searchMatch-selected': {
107
- backgroundColor: orange,
108
- color: bg0,
189
+ backgroundColor: base10,
190
+ color: base05,
109
191
  padding: generalSearchField.padding,
110
192
  '& span': {
111
- color: bg0,
193
+ color: base05,
112
194
  },
113
195
  },
114
196
  '.cm-search.cm-panel.cm-textfield': {
115
- color: fg0,
197
+ color: base00,
116
198
  borderRadius: generalSearchField.borderRadius,
117
199
  padding: generalSearchField.padding,
118
200
  },
119
201
  // Panels
120
202
  '.cm-panels': {
121
- backgroundColor: bg1,
122
- color: fg1,
203
+ backgroundColor: base06,
204
+ color: base01,
123
205
  borderRadius: '0 0 4px 4px',
124
206
  },
125
207
  '.cm-panels.cm-panels-top': {
126
- borderBottom: `1px solid ${bg3}`,
208
+ borderBottom: `1px solid ${base08}`,
127
209
  },
128
210
  '.cm-panels.cm-panels-bottom': {
129
- borderTop: `1px solid ${bg3}`,
211
+ borderTop: `1px solid ${base08}`,
130
212
  },
131
213
  '.cm-panel button': {
132
- backgroundColor: bg0,
133
- color: fg0,
214
+ backgroundColor: base05,
215
+ color: base00,
134
216
  border: generalPanel.border,
135
217
  borderRadius: generalPanel.borderRadius,
136
218
  padding: generalPanel.padding,
137
219
  },
138
220
  '.cm-panel button:hover': {
139
- backgroundColor: light2,
221
+ backgroundColor: base07,
140
222
  },
141
223
  // Line highlighting
142
224
  '.cm-activeLine': {
@@ -146,15 +228,15 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
146
228
  },
147
229
  // Gutters
148
230
  '.cm-gutters': {
149
- backgroundColor: bg1,
150
- color: fg3,
231
+ backgroundColor: base06,
232
+ color: base03,
151
233
  border: generalGutter.border,
152
- borderRight: `1px solid ${bg3}`,
234
+ borderRight: `1px solid ${base08}`,
153
235
  paddingRight: generalGutter.paddingRight,
154
236
  },
155
237
  '.cm-activeLineGutter': {
156
- backgroundColor: bg2,
157
- color: fg0,
238
+ backgroundColor: base07,
239
+ color: base00,
158
240
  fontWeight: generalGutter.fontWeight,
159
241
  },
160
242
  '.cm-lineNumbers': {
@@ -164,16 +246,55 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
164
246
  fontSize: generalGutter.fontSize,
165
247
  },
166
248
  '.cm-foldGutter .cm-gutterElement': {
167
- color: fg3,
249
+ color: base03,
168
250
  cursor: 'pointer',
169
251
  },
170
252
  '.cm-foldGutter .cm-gutterElement:hover': {
171
- color: fg0,
253
+ color: base00,
254
+ },
255
+ // Diff/Merge View Styles
256
+ // Inserted/Added Content
257
+ '.cm-insertedLine': {
258
+ textDecoration: generalDiff.insertedTextDecoration,
259
+ backgroundColor: addedBackground,
260
+ color: addedText,
261
+ padding: generalDiff.insertedLinePadding,
262
+ borderRadius: generalDiff.borderRadious,
263
+ },
264
+ 'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
265
+ textDecoration: generalDiff.insertedTextDecoration,
266
+ backgroundColor: `${addedBackground} !important`,
267
+ color: addedText,
268
+ padding: generalDiff.insertedLinePadding,
269
+ borderRadius: generalDiff.borderRadious,
270
+ border: `1px solid ${addedText}40`,
271
+ },
272
+ 'ins.cm-insertedLine .cm-changedText': {
273
+ background: 'transparent !important',
274
+ },
275
+ // Deleted/Removed Content
276
+ '.cm-deletedLine': {
277
+ textDecoration: generalDiff.deletedTextDecoration,
278
+ backgroundColor: removedBackground,
279
+ color: removedText,
280
+ padding: generalDiff.insertedLinePadding,
281
+ borderRadius: generalDiff.borderRadious,
282
+ },
283
+ 'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
284
+ textDecoration: generalDiff.deletedTextDecoration,
285
+ backgroundColor: `${removedBackground} !important`,
286
+ color: removedText,
287
+ padding: generalDiff.insertedLinePadding,
288
+ borderRadius: generalDiff.borderRadious,
289
+ border: `1px solid ${removedText}40`,
290
+ },
291
+ 'del .cm-deletedText, del .cm-changedText': {
292
+ background: 'transparent !important',
172
293
  },
173
294
  // Tooltips and autocomplete
174
295
  '.cm-tooltip': {
175
296
  backgroundColor: tooltipBackground,
176
- border: `1px solid ${bg3}`,
297
+ border: `1px solid ${base08}`,
177
298
  borderRadius: generalTooltip.borderRadius,
178
299
  padding: generalTooltip.padding,
179
300
  boxShadow: '0 1px 5px rgba(0, 0, 0, 0.1)',
@@ -188,19 +309,19 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
188
309
  lineHeight: generalTooltip.lineHeight,
189
310
  },
190
311
  '& > ul > li[aria-selected]': {
191
- backgroundColor: orange + '30',
192
- color: fg0,
312
+ backgroundColor: base10 + '30',
313
+ color: base00,
193
314
  borderRadius: generalTooltip.borderRadiusSelected,
194
315
  },
195
316
  '& > ul > li:hover': {
196
- backgroundColor: orange + '15',
317
+ backgroundColor: base10 + '15',
197
318
  },
198
319
  '& > ul > li > span.cm-completionIcon': {
199
- color: fg3,
320
+ color: base03,
200
321
  paddingRight: generalTooltip.paddingRight,
201
322
  },
202
323
  '& > ul > li > span.cm-completionDetail': {
203
- color: fg3,
324
+ color: base03,
204
325
  fontStyle: 'italic',
205
326
  },
206
327
  },
@@ -244,14 +365,14 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
244
365
  // Selection matches
245
366
  '.cm-selectionMatch': {
246
367
  backgroundColor: selectionMatch,
247
- outline: `1px solid ${bg3}`,
368
+ outline: `1px solid ${base08}`,
248
369
  borderRadius: generalMatching.borderRadius,
249
370
  },
250
371
  // Fold placeholder
251
372
  '.cm-foldPlaceholder': {
252
373
  backgroundColor: 'transparent',
253
- color: fg2,
254
- border: `1px dotted ${bg3}`,
374
+ color: base02,
375
+ border: `1px dotted ${base08}`,
255
376
  borderRadius: generalPlaceholder.borderRadius,
256
377
  padding: generalPlaceholder.padding,
257
378
  margin: generalPlaceholder.margin,
@@ -259,7 +380,7 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
259
380
  // Focus outline
260
381
  '&.cm-focused': {
261
382
  outline: 'none',
262
- boxShadow: `0 0 0 2px ${bg0}, 0 0 0 3px ${orange}40`,
383
+ boxShadow: `0 0 0 2px ${base05}, 0 0 0 3px ${base10}40`,
263
384
  },
264
385
  // Scrollbars
265
386
  '& .cm-scroller::-webkit-scrollbar': {
@@ -267,20 +388,20 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
267
388
  height: generalScroller.height,
268
389
  },
269
390
  '& .cm-scroller::-webkit-scrollbar-track': {
270
- background: bg0,
391
+ background: base05,
271
392
  },
272
393
  '& .cm-scroller::-webkit-scrollbar-thumb': {
273
- backgroundColor: bg3,
394
+ backgroundColor: base08,
274
395
  borderRadius: generalScroller.borderRadius,
275
- border: `3px solid ${bg0}`,
396
+ border: `3px solid ${base05}`,
276
397
  },
277
398
  '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
278
- backgroundColor: bg4,
399
+ backgroundColor: base09,
279
400
  },
280
401
  // Ghost text
281
402
  '.cm-ghostText': {
282
403
  opacity: '0.5',
283
- color: gray,
404
+ color: base04,
284
405
  },
285
406
  }, { dark: false });
286
407
  /**
@@ -288,50 +409,50 @@ const gruvboxLightTheme = /*@__PURE__*/EditorView.theme({
288
409
  */
289
410
  const gruvboxLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
290
411
  // 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' },
412
+ { tag: tags.keyword, color: base0A, fontWeight: 'bold' },
413
+ { tag: tags.controlKeyword, color: base0A, fontWeight: 'bold' },
414
+ { tag: tags.moduleKeyword, color: base0A, fontWeight: 'bold' },
294
415
  // 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' },
416
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base0D },
417
+ { tag: [tags.variableName], color: base0D },
418
+ { tag: [tags.propertyName], color: base0F, fontStyle: 'normal' },
298
419
  // 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' },
420
+ { tag: [tags.typeName], color: base0F },
421
+ { tag: [tags.className], color: base0C, fontStyle: 'italic' },
422
+ { tag: [tags.namespace], color: base0D, fontStyle: 'italic' },
302
423
  // 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 },
424
+ { tag: [tags.operator, tags.operatorKeyword], color: base00 },
425
+ { tag: [tags.bracket], color: base04 },
426
+ { tag: [tags.brace], color: base04 },
427
+ { tag: [tags.punctuation], color: base04 },
307
428
  // Functions and parameters
308
- { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: yellow },
309
- { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: blue },
429
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base0C },
430
+ { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: base0D },
310
431
  // Constants and literals
311
- { tag: tags.number, color: purple },
312
- { tag: tags.changed, color: purple },
432
+ { tag: tags.number, color: base0E },
433
+ { tag: tags.changed, color: base0E },
313
434
  { 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 },
435
+ { tag: tags.modifier, color: base0E, fontStyle: 'italic' },
436
+ { tag: tags.self, color: base0E },
437
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base10 },
438
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base10 },
318
439
  // 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 },
440
+ { tag: [tags.processingInstruction, tags.inserted], color: base0B },
441
+ { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: base0B },
442
+ { tag: tags.string, color: base0B },
322
443
  // Punctuation and structure
323
- { tag: /*@__PURE__*/tags.definition(tags.typeName), color: aqua, fontWeight: 'bold' },
444
+ { tag: /*@__PURE__*/tags.definition(tags.typeName), color: base0F, fontWeight: 'bold' },
324
445
  // 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 },
446
+ { tag: tags.meta, color: base04 },
447
+ { tag: tags.comment, fontStyle: 'italic', color: base04 },
448
+ { tag: tags.docComment, fontStyle: 'italic', color: base04 },
328
449
  // HTML/XML elements
329
- { tag: [tags.tagName], color: red },
330
- { tag: [tags.attributeName], color: yellow },
450
+ { tag: [tags.tagName], color: base0A },
451
+ { tag: [tags.attributeName], color: base0C },
331
452
  // 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 },
453
+ { tag: [tags.heading], fontWeight: 'bold', color: base0C },
454
+ { tag: [tags.strong], fontWeight: 'bold', color: base0C },
455
+ { tag: [tags.emphasis], fontStyle: 'italic', color: base0B },
335
456
  // Links and URLs
336
457
  {
337
458
  tag: [tags.link],
@@ -349,20 +470,20 @@ const gruvboxLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
349
470
  // Special states
350
471
  {
351
472
  tag: [tags.invalid],
352
- color: fg0,
473
+ color: base00,
353
474
  textDecoration: 'underline wavy',
354
475
  borderBottom: `1px wavy ${invalid}`,
355
476
  },
356
477
  { tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
357
478
  // Enhanced syntax highlighting
358
- { tag: /*@__PURE__*/tags.constant(tags.name), color: orange },
479
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: base10 },
359
480
  { tag: tags.deleted, color: invalid },
360
- { tag: tags.squareBracket, color: gray },
361
- { tag: tags.angleBracket, color: gray },
481
+ { tag: tags.squareBracket, color: base04 },
482
+ { tag: tags.angleBracket, color: base04 },
362
483
  // Additional specific styles
363
- { tag: tags.monospace, color: fg0 },
364
- { tag: [tags.contentSeparator], color: blue },
365
- { tag: tags.quote, color: gray },
484
+ { tag: tags.monospace, color: base00 },
485
+ { tag: [tags.contentSeparator], color: base0D },
486
+ { tag: tags.quote, color: base04 },
366
487
  ]);
367
488
  /**
368
489
  * Combined Gruvbox Light theme extension
@@ -371,5 +492,14 @@ const gruvboxLight = [
371
492
  gruvboxLightTheme,
372
493
  /*@__PURE__*/syntaxHighlighting(gruvboxLightHighlightStyle),
373
494
  ];
495
+ /**
496
+ * Gruvbox Light merge revert styles configuration
497
+ */
498
+ const gruvboxLightMergeStyles = {
499
+ backgroundColor: tooltipBackground,
500
+ borderColor: base08,
501
+ buttonColor: base00,
502
+ buttonHoverColor: base07,
503
+ };
374
504
 
375
- export { gruvboxLight, gruvboxLightHighlightStyle, gruvboxLightTheme };
505
+ export { applyMergeRevertStyles, gruvboxLight, gruvboxLightMergeStyles };
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.2.0-beta.4",
4
+ "version": "6.2.0-beta.5",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "exports": {
@@ -36,8 +36,7 @@
36
36
  "@lezer/highlight": "^1.0.0",
37
37
  "@codemirror/language": "^6.0.0",
38
38
  "@codemirror/state": "^6.0.0",
39
- "@codemirror/view": "^6.0.0",
40
- "@fsegurai/codemirror-theme-utils": "6.2.0-beta.3"
39
+ "@codemirror/view": "^6.0.0"
41
40
  },
42
41
  "devDependencies": {
43
42
  "@codemirror/buildhelper": "^1.0.2"