@fsegurai/codemirror-theme-github-dark 6.2.0-beta.4 → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +216 -64
- package/dist/index.d.cts +19 -8
- package/dist/index.d.ts +19 -8
- package/dist/index.js +183 -31
- package/package.json +4 -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
|
-
|
|
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 GitHub Dark theme color definitions
|
|
@@ -11,37 +111,41 @@ var codemirrorThemeUtils = require('@fsegurai/codemirror-theme-utils');
|
|
|
11
111
|
* Colors are organized by function with visual color blocks
|
|
12
112
|
*/
|
|
13
113
|
// Core UI colors
|
|
14
|
-
const base00 = '#0d1117'
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
114
|
+
const base00 = '#0d1117', // Background (GitHub dark mode background)
|
|
115
|
+
base01 = '#c9d1d9', // Foreground (main text color)
|
|
116
|
+
base02 = '#264F78', // Selection - brighter blue for better visibility
|
|
117
|
+
base03 = '#8b949e', // Comment and Bracket color
|
|
118
|
+
base04 = '#ffffff', // Caret color (pure white for better visibility,
|
|
19
119
|
// Syntax highlighting colors
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
120
|
+
base05 = '#7ee787', // TagName, Name, Quote - signature GitHub green
|
|
121
|
+
base06 = '#d2a8ff', // ClassName, PropertyName - GitHub purple
|
|
122
|
+
base07 = '#79c0ff', // VariableName, Number - GitHub blue
|
|
123
|
+
base08 = '#ff7b72', // Keyword, TypeName - GitHub red
|
|
124
|
+
base09 = '#a5d6ff', // String, Meta, Regexp - lighter blue
|
|
125
|
+
base0A = '#2c333a', // Panel button hover
|
|
126
|
+
base0B = '#3c444d', // Deleted background color
|
|
127
|
+
base0C = '#ffab70', // Atom, Bool - GitHub orange
|
|
28
128
|
// Background variants
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
//
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
129
|
+
base0D = '#161b22', // Gutter background (slightly darker than the editor)
|
|
130
|
+
base0E = '#30363d', // Panel and tooltip border color
|
|
131
|
+
base0F = '#21262d'; // Active line gutter background
|
|
132
|
+
// UI-specific colors
|
|
133
|
+
const invalid = '#f97583', // Invalid color - error red
|
|
134
|
+
highlightBackground = '#2d333b1a', // Line highlight (GitHub selection color)
|
|
135
|
+
tooltipBackground = '#21262d', // Tooltip background
|
|
136
|
+
cursor = base04, // Caret color
|
|
137
|
+
selection = base02, // Selection color
|
|
138
|
+
activeBracketBg = '#3a587a75', // Active bracket background
|
|
139
|
+
activeBracketBorder = '#4d90fe', // Active bracket border
|
|
140
|
+
diagnosticWarning = '#d29922', // Warning color
|
|
141
|
+
selectionMatch = '#3a587a55', // Selection match background
|
|
142
|
+
linkColor = '#58a6ff', // Bright blue for links (GitHub link color)
|
|
143
|
+
visitedLinkColor = '#bc8cff'; // Light purple for visited links
|
|
144
|
+
// Diff/merge specific colors
|
|
145
|
+
const addedBackground = '#2ea04350', // GitHub green with transparency
|
|
146
|
+
removedBackground = '#f8514940', // GitHub red with transparency
|
|
147
|
+
addedText = '#7ee787', // GitHub green for added text
|
|
148
|
+
removedText = '#ff7b72'; // GitHub red for removed text
|
|
45
149
|
/**
|
|
46
150
|
* Enhanced editor theme styles for GitHub Dark
|
|
47
151
|
*/
|
|
@@ -50,17 +154,17 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
50
154
|
'&': {
|
|
51
155
|
color: base01,
|
|
52
156
|
backgroundColor: base00,
|
|
53
|
-
fontSize:
|
|
54
|
-
fontFamily:
|
|
157
|
+
fontSize: generalContent.fontSize,
|
|
158
|
+
fontFamily: generalContent.fontFamily,
|
|
55
159
|
},
|
|
56
160
|
// Content and cursor
|
|
57
161
|
'.cm-content': {
|
|
58
162
|
caretColor: cursor,
|
|
59
|
-
lineHeight:
|
|
163
|
+
lineHeight: generalContent.lineHeight,
|
|
60
164
|
},
|
|
61
165
|
'.cm-cursor, .cm-dropCursor': {
|
|
62
166
|
borderLeftColor: cursor,
|
|
63
|
-
borderLeftWidth:
|
|
167
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
64
168
|
},
|
|
65
169
|
'.cm-fat-cursor': {
|
|
66
170
|
backgroundColor: `${cursor}99`,
|
|
@@ -79,7 +183,7 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
79
183
|
backgroundColor: '#3a587a',
|
|
80
184
|
outline: `1px solid ${base07}`,
|
|
81
185
|
color: base01,
|
|
82
|
-
borderRadius:
|
|
186
|
+
borderRadius: generalSearchField.borderRadius,
|
|
83
187
|
'& span': {
|
|
84
188
|
color: base01,
|
|
85
189
|
},
|
|
@@ -87,15 +191,15 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
87
191
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
88
192
|
backgroundColor: activeBracketBorder,
|
|
89
193
|
color: base04,
|
|
90
|
-
padding:
|
|
194
|
+
padding: generalSearchField.padding,
|
|
91
195
|
'& span': {
|
|
92
196
|
color: base04,
|
|
93
197
|
},
|
|
94
198
|
},
|
|
95
199
|
'.cm-search.cm-panel.cm-textfield': {
|
|
96
200
|
color: base01,
|
|
97
|
-
borderRadius:
|
|
98
|
-
padding:
|
|
201
|
+
borderRadius: generalSearchField.borderRadius,
|
|
202
|
+
padding: generalSearchField.padding,
|
|
99
203
|
},
|
|
100
204
|
// Panels
|
|
101
205
|
'.cm-panels': {
|
|
@@ -112,9 +216,9 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
112
216
|
'.cm-panel button': {
|
|
113
217
|
backgroundColor: tooltipBackground,
|
|
114
218
|
color: base01,
|
|
115
|
-
border:
|
|
116
|
-
borderRadius:
|
|
117
|
-
padding:
|
|
219
|
+
border: generalPanel.border,
|
|
220
|
+
borderRadius: generalPanel.borderRadius,
|
|
221
|
+
padding: generalPanel.padding,
|
|
118
222
|
},
|
|
119
223
|
'.cm-panel button:hover': {
|
|
120
224
|
backgroundColor: base0A,
|
|
@@ -122,27 +226,27 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
122
226
|
// Line highlighting
|
|
123
227
|
'.cm-activeLine': {
|
|
124
228
|
backgroundColor: highlightBackground,
|
|
125
|
-
borderRadius:
|
|
229
|
+
borderRadius: generalLine.borderRadius,
|
|
126
230
|
zIndex: 1,
|
|
127
231
|
},
|
|
128
232
|
// Gutters
|
|
129
233
|
'.cm-gutters': {
|
|
130
234
|
backgroundColor: base0D,
|
|
131
235
|
color: base03,
|
|
132
|
-
border:
|
|
236
|
+
border: generalGutter.border,
|
|
133
237
|
borderRight: '1px solid #30363d',
|
|
134
|
-
paddingRight:
|
|
238
|
+
paddingRight: generalGutter.paddingRight,
|
|
135
239
|
},
|
|
136
240
|
'.cm-activeLineGutter': {
|
|
137
241
|
backgroundColor: base0F,
|
|
138
242
|
color: base01,
|
|
139
|
-
fontWeight:
|
|
243
|
+
fontWeight: generalGutter.fontWeight,
|
|
140
244
|
},
|
|
141
245
|
'.cm-lineNumbers': {
|
|
142
|
-
fontSize:
|
|
246
|
+
fontSize: generalGutter.fontSize,
|
|
143
247
|
},
|
|
144
248
|
'.cm-foldGutter': {
|
|
145
|
-
fontSize:
|
|
249
|
+
fontSize: generalGutter.fontSize,
|
|
146
250
|
},
|
|
147
251
|
'.cm-foldGutter .cm-gutterElement': {
|
|
148
252
|
color: base03,
|
|
@@ -151,12 +255,51 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
151
255
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
152
256
|
color: base01,
|
|
153
257
|
},
|
|
258
|
+
// Diff/Merge View Styles
|
|
259
|
+
// Inserted/Added Content
|
|
260
|
+
'.cm-insertedLine': {
|
|
261
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
262
|
+
backgroundColor: addedBackground,
|
|
263
|
+
color: addedText,
|
|
264
|
+
padding: generalDiff.insertedLinePadding,
|
|
265
|
+
borderRadius: generalDiff.borderRadious,
|
|
266
|
+
},
|
|
267
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
268
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
269
|
+
backgroundColor: `${addedBackground} !important`,
|
|
270
|
+
color: addedText,
|
|
271
|
+
padding: generalDiff.insertedLinePadding,
|
|
272
|
+
borderRadius: generalDiff.borderRadious,
|
|
273
|
+
border: `1px solid ${addedText}40`,
|
|
274
|
+
},
|
|
275
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
276
|
+
background: 'transparent !important',
|
|
277
|
+
},
|
|
278
|
+
// Deleted/Removed Content
|
|
279
|
+
'.cm-deletedLine': {
|
|
280
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
281
|
+
backgroundColor: removedBackground,
|
|
282
|
+
color: removedText,
|
|
283
|
+
padding: generalDiff.insertedLinePadding,
|
|
284
|
+
borderRadius: generalDiff.borderRadious,
|
|
285
|
+
},
|
|
286
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
287
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
288
|
+
backgroundColor: `${removedBackground} !important`,
|
|
289
|
+
color: removedText,
|
|
290
|
+
padding: generalDiff.insertedLinePadding,
|
|
291
|
+
borderRadius: generalDiff.borderRadious,
|
|
292
|
+
border: `1px solid ${removedText}40`,
|
|
293
|
+
},
|
|
294
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
295
|
+
background: 'transparent !important',
|
|
296
|
+
},
|
|
154
297
|
// Tooltips and autocomplete
|
|
155
298
|
'.cm-tooltip': {
|
|
156
299
|
backgroundColor: tooltipBackground,
|
|
157
300
|
border: `1px solid ${base0E}`,
|
|
158
|
-
borderRadius:
|
|
159
|
-
padding:
|
|
301
|
+
borderRadius: generalTooltip.borderRadius,
|
|
302
|
+
padding: generalTooltip.padding,
|
|
160
303
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
161
304
|
},
|
|
162
305
|
'.cm-tooltip-autocomplete': {
|
|
@@ -165,17 +308,17 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
165
308
|
border: 'none',
|
|
166
309
|
},
|
|
167
310
|
'& > ul > li': {
|
|
168
|
-
padding:
|
|
169
|
-
lineHeight:
|
|
311
|
+
padding: generalTooltip.padding,
|
|
312
|
+
lineHeight: generalTooltip.lineHeight,
|
|
170
313
|
},
|
|
171
314
|
'& > ul > li[aria-selected]': {
|
|
172
315
|
backgroundColor: selection,
|
|
173
316
|
color: base04,
|
|
174
|
-
borderRadius:
|
|
317
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
175
318
|
},
|
|
176
319
|
'& > ul > li > span.cm-completionIcon': {
|
|
177
320
|
color: base03,
|
|
178
|
-
paddingRight:
|
|
321
|
+
paddingRight: generalTooltip.paddingRight,
|
|
179
322
|
},
|
|
180
323
|
'& > ul > li > span.cm-completionDetail': {
|
|
181
324
|
color: base03,
|
|
@@ -212,27 +355,27 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
212
355
|
'.cm-matchingBracket': {
|
|
213
356
|
backgroundColor: activeBracketBg,
|
|
214
357
|
outline: `1px solid ${activeBracketBorder}`,
|
|
215
|
-
borderRadius:
|
|
358
|
+
borderRadius: generalMatching.borderRadius,
|
|
216
359
|
},
|
|
217
360
|
'.cm-nonmatchingBracket': {
|
|
218
361
|
backgroundColor: '#f9758340',
|
|
219
362
|
outline: `1px solid ${invalid}`,
|
|
220
|
-
borderRadius:
|
|
363
|
+
borderRadius: generalMatching.borderRadius,
|
|
221
364
|
},
|
|
222
365
|
// Selection matches
|
|
223
366
|
'.cm-selectionMatch': {
|
|
224
367
|
backgroundColor: selectionMatch,
|
|
225
368
|
outline: `1px solid ${base02}50`,
|
|
226
|
-
borderRadius:
|
|
369
|
+
borderRadius: generalMatching.borderRadius,
|
|
227
370
|
},
|
|
228
371
|
// Fold placeholder
|
|
229
372
|
'.cm-foldPlaceholder': {
|
|
230
373
|
backgroundColor: tooltipBackground,
|
|
231
374
|
color: base03,
|
|
232
375
|
border: `1px dotted ${base0E}70`,
|
|
233
|
-
borderRadius:
|
|
234
|
-
padding:
|
|
235
|
-
margin:
|
|
376
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
377
|
+
padding: generalPlaceholder.padding,
|
|
378
|
+
margin: generalPlaceholder.margin,
|
|
236
379
|
},
|
|
237
380
|
// Focus outline
|
|
238
381
|
'&.cm-focused': {
|
|
@@ -241,15 +384,15 @@ const githubDarkTheme = view.EditorView.theme({
|
|
|
241
384
|
},
|
|
242
385
|
// Scrollbars
|
|
243
386
|
'& .cm-scroller::-webkit-scrollbar': {
|
|
244
|
-
width:
|
|
245
|
-
height:
|
|
387
|
+
width: generalScroller.width,
|
|
388
|
+
height: generalScroller.height,
|
|
246
389
|
},
|
|
247
390
|
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
248
391
|
background: base0D,
|
|
249
392
|
},
|
|
250
393
|
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
251
394
|
backgroundColor: base0E,
|
|
252
|
-
borderRadius:
|
|
395
|
+
borderRadius: generalScroller.borderRadius,
|
|
253
396
|
border: `3px solid ${base0D}`,
|
|
254
397
|
},
|
|
255
398
|
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
@@ -338,7 +481,16 @@ const githubDark = [
|
|
|
338
481
|
githubDarkTheme,
|
|
339
482
|
language.syntaxHighlighting(githubDarkHighlightStyle),
|
|
340
483
|
];
|
|
484
|
+
/**
|
|
485
|
+
* GitHub Dark merge revert styles configuration
|
|
486
|
+
*/
|
|
487
|
+
const githubDarkMergeStyles = {
|
|
488
|
+
backgroundColor: tooltipBackground,
|
|
489
|
+
borderColor: base0E,
|
|
490
|
+
buttonColor: base01,
|
|
491
|
+
buttonHoverColor: base0A,
|
|
492
|
+
};
|
|
341
493
|
|
|
494
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
342
495
|
exports.githubDark = githubDark;
|
|
343
|
-
exports.
|
|
344
|
-
exports.githubDarkTheme = githubDarkTheme;
|
|
496
|
+
exports.githubDarkMergeStyles = githubDarkMergeStyles;
|
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
|
-
*
|
|
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
|
|
8
|
-
|
|
9
|
-
* Enhanced syntax highlighting for GitHub Dark theme
|
|
10
|
-
*/
|
|
11
|
-
declare const githubDarkHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined GitHub Dark theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const githubDark: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* GitHub Dark merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const githubDarkMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, githubDark, githubDarkMergeStyles };
|
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
|
-
*
|
|
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
|
|
8
|
-
|
|
9
|
-
* Enhanced syntax highlighting for GitHub Dark theme
|
|
10
|
-
*/
|
|
11
|
-
declare const githubDarkHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined GitHub Dark theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const githubDark: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* GitHub Dark merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const githubDarkMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, githubDark, githubDarkMergeStyles };
|
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
|
-
|
|
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 GitHub Dark theme color definitions
|
|
@@ -9,37 +109,41 @@ import { generalScroller, generalPlaceholder, generalMatching, generalTooltip, g
|
|
|
9
109
|
* Colors are organized by function with visual color blocks
|
|
10
110
|
*/
|
|
11
111
|
// Core UI colors
|
|
12
|
-
const base00 = '#0d1117'
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
112
|
+
const base00 = '#0d1117', // Background (GitHub dark mode background)
|
|
113
|
+
base01 = '#c9d1d9', // Foreground (main text color)
|
|
114
|
+
base02 = '#264F78', // Selection - brighter blue for better visibility
|
|
115
|
+
base03 = '#8b949e', // Comment and Bracket color
|
|
116
|
+
base04 = '#ffffff', // Caret color (pure white for better visibility,
|
|
17
117
|
// Syntax highlighting colors
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
118
|
+
base05 = '#7ee787', // TagName, Name, Quote - signature GitHub green
|
|
119
|
+
base06 = '#d2a8ff', // ClassName, PropertyName - GitHub purple
|
|
120
|
+
base07 = '#79c0ff', // VariableName, Number - GitHub blue
|
|
121
|
+
base08 = '#ff7b72', // Keyword, TypeName - GitHub red
|
|
122
|
+
base09 = '#a5d6ff', // String, Meta, Regexp - lighter blue
|
|
123
|
+
base0A = '#2c333a', // Panel button hover
|
|
124
|
+
base0B = '#3c444d', // Deleted background color
|
|
125
|
+
base0C = '#ffab70', // Atom, Bool - GitHub orange
|
|
26
126
|
// Background variants
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
//
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
//
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
127
|
+
base0D = '#161b22', // Gutter background (slightly darker than the editor)
|
|
128
|
+
base0E = '#30363d', // Panel and tooltip border color
|
|
129
|
+
base0F = '#21262d'; // Active line gutter background
|
|
130
|
+
// UI-specific colors
|
|
131
|
+
const invalid = '#f97583', // Invalid color - error red
|
|
132
|
+
highlightBackground = '#2d333b1a', // Line highlight (GitHub selection color)
|
|
133
|
+
tooltipBackground = '#21262d', // Tooltip background
|
|
134
|
+
cursor = base04, // Caret color
|
|
135
|
+
selection = base02, // Selection color
|
|
136
|
+
activeBracketBg = '#3a587a75', // Active bracket background
|
|
137
|
+
activeBracketBorder = '#4d90fe', // Active bracket border
|
|
138
|
+
diagnosticWarning = '#d29922', // Warning color
|
|
139
|
+
selectionMatch = '#3a587a55', // Selection match background
|
|
140
|
+
linkColor = '#58a6ff', // Bright blue for links (GitHub link color)
|
|
141
|
+
visitedLinkColor = '#bc8cff'; // Light purple for visited links
|
|
142
|
+
// Diff/merge specific colors
|
|
143
|
+
const addedBackground = '#2ea04350', // GitHub green with transparency
|
|
144
|
+
removedBackground = '#f8514940', // GitHub red with transparency
|
|
145
|
+
addedText = '#7ee787', // GitHub green for added text
|
|
146
|
+
removedText = '#ff7b72'; // GitHub red for removed text
|
|
43
147
|
/**
|
|
44
148
|
* Enhanced editor theme styles for GitHub Dark
|
|
45
149
|
*/
|
|
@@ -149,6 +253,45 @@ const githubDarkTheme = /*@__PURE__*/EditorView.theme({
|
|
|
149
253
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
150
254
|
color: base01,
|
|
151
255
|
},
|
|
256
|
+
// Diff/Merge View Styles
|
|
257
|
+
// Inserted/Added Content
|
|
258
|
+
'.cm-insertedLine': {
|
|
259
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
260
|
+
backgroundColor: addedBackground,
|
|
261
|
+
color: addedText,
|
|
262
|
+
padding: generalDiff.insertedLinePadding,
|
|
263
|
+
borderRadius: generalDiff.borderRadious,
|
|
264
|
+
},
|
|
265
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
266
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
267
|
+
backgroundColor: `${addedBackground} !important`,
|
|
268
|
+
color: addedText,
|
|
269
|
+
padding: generalDiff.insertedLinePadding,
|
|
270
|
+
borderRadius: generalDiff.borderRadious,
|
|
271
|
+
border: `1px solid ${addedText}40`,
|
|
272
|
+
},
|
|
273
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
274
|
+
background: 'transparent !important',
|
|
275
|
+
},
|
|
276
|
+
// Deleted/Removed Content
|
|
277
|
+
'.cm-deletedLine': {
|
|
278
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
279
|
+
backgroundColor: removedBackground,
|
|
280
|
+
color: removedText,
|
|
281
|
+
padding: generalDiff.insertedLinePadding,
|
|
282
|
+
borderRadius: generalDiff.borderRadious,
|
|
283
|
+
},
|
|
284
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
285
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
286
|
+
backgroundColor: `${removedBackground} !important`,
|
|
287
|
+
color: removedText,
|
|
288
|
+
padding: generalDiff.insertedLinePadding,
|
|
289
|
+
borderRadius: generalDiff.borderRadious,
|
|
290
|
+
border: `1px solid ${removedText}40`,
|
|
291
|
+
},
|
|
292
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
293
|
+
background: 'transparent !important',
|
|
294
|
+
},
|
|
152
295
|
// Tooltips and autocomplete
|
|
153
296
|
'.cm-tooltip': {
|
|
154
297
|
backgroundColor: tooltipBackground,
|
|
@@ -336,5 +479,14 @@ const githubDark = [
|
|
|
336
479
|
githubDarkTheme,
|
|
337
480
|
/*@__PURE__*/syntaxHighlighting(githubDarkHighlightStyle),
|
|
338
481
|
];
|
|
482
|
+
/**
|
|
483
|
+
* GitHub Dark merge revert styles configuration
|
|
484
|
+
*/
|
|
485
|
+
const githubDarkMergeStyles = {
|
|
486
|
+
backgroundColor: tooltipBackground,
|
|
487
|
+
borderColor: base0E,
|
|
488
|
+
buttonColor: base01,
|
|
489
|
+
buttonHoverColor: base0A,
|
|
490
|
+
};
|
|
339
491
|
|
|
340
|
-
export {
|
|
492
|
+
export { applyMergeRevertStyles, githubDark, githubDarkMergeStyles };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fsegurai/codemirror-theme-github-dark",
|
|
3
3
|
"description": "GitHub Dark theme for the CodeMirror code editor",
|
|
4
|
-
"version": "6.2.0
|
|
4
|
+
"version": "6.2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
7
|
"exports": {
|
|
@@ -17,6 +17,8 @@
|
|
|
17
17
|
},
|
|
18
18
|
"keywords": [
|
|
19
19
|
"editor",
|
|
20
|
+
"diff",
|
|
21
|
+
"diff-editor",
|
|
20
22
|
"code",
|
|
21
23
|
"codemirror",
|
|
22
24
|
"theme",
|
|
@@ -36,8 +38,7 @@
|
|
|
36
38
|
"@lezer/highlight": "^1.0.0",
|
|
37
39
|
"@codemirror/language": "^6.0.0",
|
|
38
40
|
"@codemirror/state": "^6.0.0",
|
|
39
|
-
"@codemirror/view": "^6.0.0"
|
|
40
|
-
"@fsegurai/codemirror-theme-utils": "6.2.0-beta.3"
|
|
41
|
+
"@codemirror/view": "^6.0.0"
|
|
41
42
|
},
|
|
42
43
|
"devDependencies": {
|
|
43
44
|
"@codemirror/buildhelper": "^1.0.2"
|