@fsegurai/codemirror-theme-github-light 6.2.0-beta.3 → 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.
- package/dist/index.cjs +215 -63
- package/dist/index.d.cts +19 -8
- package/dist/index.d.ts +19 -8
- package/dist/index.js +182 -30
- package/package.json +1 -1
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 Light theme color palette
|
|
@@ -11,37 +111,41 @@ var codemirrorThemeUtils = require('@fsegurai/codemirror-theme-utils');
|
|
|
11
111
|
* Colors organized by function with visual color blocks for reference
|
|
12
112
|
*/
|
|
13
113
|
// Core UI colors
|
|
14
|
-
const base00 = '#ffffff'
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
114
|
+
const base00 = '#ffffff', // Background (GitHub light mode background)
|
|
115
|
+
base01 = '#24292e', // Foreground (main text color)
|
|
116
|
+
base02 = '#BBDFFF', // Selection - light blue
|
|
117
|
+
base03 = '#6e7781', // Comments, subdued text
|
|
118
|
+
base04 = '#f6f8fa', // Light gray (gutter, panels)
|
|
19
119
|
// Syntax highlighting colors
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
120
|
+
base05 = '#116329', // Tag names - GitHub green
|
|
121
|
+
base06 = '#6a737d', // Comments, brackets - GitHub gray
|
|
122
|
+
base07 = '#6f42c1', // Classes, properties - GitHub purple
|
|
123
|
+
base08 = '#005cc5', // Variables, attributes - GitHub blue
|
|
124
|
+
base09 = '#d73a49', // Keywords, types - GitHub red
|
|
125
|
+
base0A = '#032f62', // Strings, regexps - GitHub navy
|
|
126
|
+
base0B = '#22863a', // Names, quotes - GitHub green
|
|
127
|
+
base0C = '#e36209', // Atoms, booleans - GitHub orange
|
|
28
128
|
// Background variants
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// Link colors
|
|
33
|
-
const linkColor = '#0969da'; // Bright blue for links
|
|
34
|
-
const visitedLinkColor = '#8250df'; // Purple for visited links
|
|
129
|
+
base0D = '#f1f8ff', // Active line gutter background
|
|
130
|
+
base0E = '#e1e4e8', // Panel and tooltip border color
|
|
131
|
+
base0F = '#f8f9fa'; // Tooltip background
|
|
35
132
|
// Special states
|
|
36
|
-
const invalid = '#cb2431'
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
133
|
+
const invalid = '#cb2431', // Invalid color - error red
|
|
134
|
+
highlightBackground = '#BBDFFF20', // Line highlight (light blue and opacity)
|
|
135
|
+
tooltipBackground = base0F, // Tooltip background
|
|
136
|
+
cursor = base01, // Caret color
|
|
137
|
+
selection = base02, // Selection color
|
|
138
|
+
activeBracketBg = '#e8f0fe', // Active bracket background
|
|
139
|
+
activeBracketBorder = '#0366d6', // Active bracket border
|
|
140
|
+
diagnosticWarning = '#b08800', // Warning color
|
|
141
|
+
selectionMatch = '#79b8ff40', // Selection match background
|
|
142
|
+
linkColor = '#0969da', // Bright blue for links
|
|
143
|
+
visitedLinkColor = '#8250df'; // Purple for visited links
|
|
144
|
+
// Diff/merge specific colors
|
|
145
|
+
const addedBackground = '#e6ffec80', // GitHub light green with transparency
|
|
146
|
+
removedBackground = '#ffebe980', // GitHub light red with transparency
|
|
147
|
+
addedText = '#0f6d31', // GitHub dark green for added text
|
|
148
|
+
removedText = '#cf222e'; // GitHub red for removed text
|
|
45
149
|
/**
|
|
46
150
|
* Enhanced editor theme styles for GitHub Light
|
|
47
151
|
*/
|
|
@@ -50,17 +154,17 @@ const githubLightTheme = 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`,
|
|
@@ -80,7 +184,7 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
80
184
|
backgroundColor: '#daebff',
|
|
81
185
|
outline: `1px solid ${base08}`,
|
|
82
186
|
color: base01,
|
|
83
|
-
borderRadius:
|
|
187
|
+
borderRadius: generalSearchField.borderRadius,
|
|
84
188
|
'& span': {
|
|
85
189
|
color: base01,
|
|
86
190
|
},
|
|
@@ -88,15 +192,15 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
88
192
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
89
193
|
backgroundColor: '#79b8ff',
|
|
90
194
|
color: base00,
|
|
91
|
-
padding:
|
|
195
|
+
padding: generalSearchField.padding,
|
|
92
196
|
'& span': {
|
|
93
197
|
color: base00,
|
|
94
198
|
},
|
|
95
199
|
},
|
|
96
200
|
'.cm-search.cm-panel.cm-textfield': {
|
|
97
201
|
color: base01,
|
|
98
|
-
borderRadius:
|
|
99
|
-
padding:
|
|
202
|
+
borderRadius: generalSearchField.borderRadius,
|
|
203
|
+
padding: generalSearchField.padding,
|
|
100
204
|
},
|
|
101
205
|
// Panels
|
|
102
206
|
'.cm-panels': {
|
|
@@ -113,9 +217,9 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
113
217
|
'.cm-panel button': {
|
|
114
218
|
backgroundColor: base00,
|
|
115
219
|
color: base01,
|
|
116
|
-
border:
|
|
117
|
-
borderRadius:
|
|
118
|
-
padding:
|
|
220
|
+
border: generalPanel.border,
|
|
221
|
+
borderRadius: generalPanel.borderRadius,
|
|
222
|
+
padding: generalPanel.padding,
|
|
119
223
|
},
|
|
120
224
|
'.cm-panel button:hover': {
|
|
121
225
|
backgroundColor: '#f5f5f5',
|
|
@@ -123,27 +227,27 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
123
227
|
// Line highlighting
|
|
124
228
|
'.cm-activeLine': {
|
|
125
229
|
backgroundColor: highlightBackground,
|
|
126
|
-
borderRadius:
|
|
230
|
+
borderRadius: generalLine.borderRadius,
|
|
127
231
|
zIndex: 1,
|
|
128
232
|
},
|
|
129
233
|
// Gutters
|
|
130
234
|
'.cm-gutters': {
|
|
131
235
|
backgroundColor: base04,
|
|
132
236
|
color: base03,
|
|
133
|
-
border:
|
|
237
|
+
border: generalGutter.border,
|
|
134
238
|
borderRight: `1px solid ${base0E}`,
|
|
135
|
-
paddingRight:
|
|
239
|
+
paddingRight: generalGutter.paddingRight,
|
|
136
240
|
},
|
|
137
241
|
'.cm-activeLineGutter': {
|
|
138
242
|
backgroundColor: base0D,
|
|
139
243
|
color: base01,
|
|
140
|
-
fontWeight:
|
|
244
|
+
fontWeight: generalGutter.fontWeight,
|
|
141
245
|
},
|
|
142
246
|
'.cm-lineNumbers': {
|
|
143
|
-
fontSize:
|
|
247
|
+
fontSize: generalGutter.fontSize,
|
|
144
248
|
},
|
|
145
249
|
'.cm-foldGutter': {
|
|
146
|
-
fontSize:
|
|
250
|
+
fontSize: generalGutter.fontSize,
|
|
147
251
|
},
|
|
148
252
|
'.cm-foldGutter .cm-gutterElement': {
|
|
149
253
|
color: base03,
|
|
@@ -152,12 +256,51 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
152
256
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
153
257
|
color: base01,
|
|
154
258
|
},
|
|
259
|
+
// Diff/Merge View Styles
|
|
260
|
+
// Inserted/Added Content
|
|
261
|
+
'.cm-insertedLine': {
|
|
262
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
263
|
+
backgroundColor: addedBackground,
|
|
264
|
+
color: addedText,
|
|
265
|
+
padding: generalDiff.insertedLinePadding,
|
|
266
|
+
borderRadius: generalDiff.borderRadious,
|
|
267
|
+
},
|
|
268
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
269
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
270
|
+
backgroundColor: `${addedBackground} !important`,
|
|
271
|
+
color: addedText,
|
|
272
|
+
padding: generalDiff.insertedLinePadding,
|
|
273
|
+
borderRadius: generalDiff.borderRadious,
|
|
274
|
+
border: `1px solid ${addedText}30`,
|
|
275
|
+
},
|
|
276
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
277
|
+
background: 'transparent !important',
|
|
278
|
+
},
|
|
279
|
+
// Deleted/Removed Content
|
|
280
|
+
'.cm-deletedLine': {
|
|
281
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
282
|
+
backgroundColor: removedBackground,
|
|
283
|
+
color: removedText,
|
|
284
|
+
padding: generalDiff.insertedLinePadding,
|
|
285
|
+
borderRadius: generalDiff.borderRadious,
|
|
286
|
+
},
|
|
287
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
288
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
289
|
+
backgroundColor: `${removedBackground} !important`,
|
|
290
|
+
color: removedText,
|
|
291
|
+
padding: generalDiff.insertedLinePadding,
|
|
292
|
+
borderRadius: generalDiff.borderRadious,
|
|
293
|
+
border: `1px solid ${removedText}30`,
|
|
294
|
+
},
|
|
295
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
296
|
+
background: 'transparent !important',
|
|
297
|
+
},
|
|
155
298
|
// Tooltips and autocomplete
|
|
156
299
|
'.cm-tooltip': {
|
|
157
300
|
backgroundColor: tooltipBackground,
|
|
158
301
|
border: `1px solid ${base0E}`,
|
|
159
|
-
borderRadius:
|
|
160
|
-
padding:
|
|
302
|
+
borderRadius: generalTooltip.borderRadius,
|
|
303
|
+
padding: generalTooltip.padding,
|
|
161
304
|
boxShadow: '0 1px 5px rgba(0, 0, 0, 0.1)',
|
|
162
305
|
},
|
|
163
306
|
'.cm-tooltip-autocomplete': {
|
|
@@ -166,20 +309,20 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
166
309
|
border: 'none',
|
|
167
310
|
},
|
|
168
311
|
'& > ul > li': {
|
|
169
|
-
padding:
|
|
170
|
-
lineHeight:
|
|
312
|
+
padding: generalTooltip.padding,
|
|
313
|
+
lineHeight: generalTooltip.lineHeight,
|
|
171
314
|
},
|
|
172
315
|
'& > ul > li[aria-selected]': {
|
|
173
316
|
backgroundColor: '#0366d630',
|
|
174
317
|
color: base01,
|
|
175
|
-
borderRadius:
|
|
318
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
176
319
|
},
|
|
177
320
|
'& > ul > li:hover': {
|
|
178
321
|
backgroundColor: '#0366d615',
|
|
179
322
|
},
|
|
180
323
|
'& > ul > li > span.cm-completionIcon': {
|
|
181
324
|
color: base03,
|
|
182
|
-
paddingRight:
|
|
325
|
+
paddingRight: generalTooltip.paddingRight,
|
|
183
326
|
},
|
|
184
327
|
'& > ul > li > span.cm-completionDetail': {
|
|
185
328
|
color: base03,
|
|
@@ -216,27 +359,27 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
216
359
|
'.cm-matchingBracket': {
|
|
217
360
|
backgroundColor: activeBracketBg,
|
|
218
361
|
outline: `1px solid ${activeBracketBorder}80`,
|
|
219
|
-
borderRadius:
|
|
362
|
+
borderRadius: generalMatching.borderRadius,
|
|
220
363
|
},
|
|
221
364
|
'.cm-nonmatchingBracket': {
|
|
222
365
|
backgroundColor: '#ffeef080',
|
|
223
366
|
outline: `1px solid ${invalid}`,
|
|
224
|
-
borderRadius:
|
|
367
|
+
borderRadius: generalMatching.borderRadius,
|
|
225
368
|
},
|
|
226
369
|
// Selection matches
|
|
227
370
|
'.cm-selectionMatch': {
|
|
228
371
|
backgroundColor: selectionMatch,
|
|
229
372
|
outline: `1px solid ${base02}50`,
|
|
230
|
-
borderRadius:
|
|
373
|
+
borderRadius: generalMatching.borderRadius,
|
|
231
374
|
},
|
|
232
375
|
// Fold placeholder
|
|
233
376
|
'.cm-foldPlaceholder': {
|
|
234
377
|
backgroundColor: selectionMatch,
|
|
235
378
|
color: base03,
|
|
236
379
|
border: `1px dotted ${base0E}70`,
|
|
237
|
-
borderRadius:
|
|
238
|
-
padding:
|
|
239
|
-
margin:
|
|
380
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
381
|
+
padding: generalPlaceholder.padding,
|
|
382
|
+
margin: generalPlaceholder.margin,
|
|
240
383
|
},
|
|
241
384
|
// Focus outline
|
|
242
385
|
'&.cm-focused': {
|
|
@@ -245,15 +388,15 @@ const githubLightTheme = view.EditorView.theme({
|
|
|
245
388
|
},
|
|
246
389
|
// Scrollbars
|
|
247
390
|
'& .cm-scroller::-webkit-scrollbar': {
|
|
248
|
-
width:
|
|
249
|
-
height:
|
|
391
|
+
width: generalScroller.width,
|
|
392
|
+
height: generalScroller.height,
|
|
250
393
|
},
|
|
251
394
|
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
252
395
|
background: base0E,
|
|
253
396
|
},
|
|
254
397
|
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
255
398
|
backgroundColor: base01,
|
|
256
|
-
borderRadius:
|
|
399
|
+
borderRadius: generalScroller.borderRadius,
|
|
257
400
|
border: `3px solid ${base0E}`,
|
|
258
401
|
},
|
|
259
402
|
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
@@ -353,7 +496,16 @@ const githubLight = [
|
|
|
353
496
|
githubLightTheme,
|
|
354
497
|
language.syntaxHighlighting(githubLightHighlightStyle),
|
|
355
498
|
];
|
|
499
|
+
/**
|
|
500
|
+
* GitHub Light merge revert styles configuration
|
|
501
|
+
*/
|
|
502
|
+
const githubLightMergeStyles = {
|
|
503
|
+
backgroundColor: tooltipBackground,
|
|
504
|
+
borderColor: base0E,
|
|
505
|
+
buttonColor: base01,
|
|
506
|
+
buttonHoverColor: '#f5f5f5',
|
|
507
|
+
};
|
|
356
508
|
|
|
509
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
357
510
|
exports.githubLight = githubLight;
|
|
358
|
-
exports.
|
|
359
|
-
exports.githubLightTheme = githubLightTheme;
|
|
511
|
+
exports.githubLightMergeStyles = githubLightMergeStyles;
|
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 Light theme
|
|
10
|
-
*/
|
|
11
|
-
declare const githubLightHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined GitHub Light theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const githubLight: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* GitHub Light merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const githubLightMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, githubLight, githubLightMergeStyles };
|
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 Light theme
|
|
10
|
-
*/
|
|
11
|
-
declare const githubLightHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined GitHub Light theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const githubLight: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* GitHub Light merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const githubLightMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, githubLight, githubLightMergeStyles };
|
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 Light theme color palette
|
|
@@ -9,37 +109,41 @@ import { generalScroller, generalPlaceholder, generalMatching, generalTooltip, g
|
|
|
9
109
|
* Colors organized by function with visual color blocks for reference
|
|
10
110
|
*/
|
|
11
111
|
// Core UI colors
|
|
12
|
-
const base00 = '#ffffff'
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
112
|
+
const base00 = '#ffffff', // Background (GitHub light mode background)
|
|
113
|
+
base01 = '#24292e', // Foreground (main text color)
|
|
114
|
+
base02 = '#BBDFFF', // Selection - light blue
|
|
115
|
+
base03 = '#6e7781', // Comments, subdued text
|
|
116
|
+
base04 = '#f6f8fa', // Light gray (gutter, panels)
|
|
17
117
|
// Syntax highlighting colors
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
118
|
+
base05 = '#116329', // Tag names - GitHub green
|
|
119
|
+
base06 = '#6a737d', // Comments, brackets - GitHub gray
|
|
120
|
+
base07 = '#6f42c1', // Classes, properties - GitHub purple
|
|
121
|
+
base08 = '#005cc5', // Variables, attributes - GitHub blue
|
|
122
|
+
base09 = '#d73a49', // Keywords, types - GitHub red
|
|
123
|
+
base0A = '#032f62', // Strings, regexps - GitHub navy
|
|
124
|
+
base0B = '#22863a', // Names, quotes - GitHub green
|
|
125
|
+
base0C = '#e36209', // Atoms, booleans - GitHub orange
|
|
26
126
|
// Background variants
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
// Link colors
|
|
31
|
-
const linkColor = '#0969da'; // Bright blue for links
|
|
32
|
-
const visitedLinkColor = '#8250df'; // Purple for visited links
|
|
127
|
+
base0D = '#f1f8ff', // Active line gutter background
|
|
128
|
+
base0E = '#e1e4e8', // Panel and tooltip border color
|
|
129
|
+
base0F = '#f8f9fa'; // Tooltip background
|
|
33
130
|
// Special states
|
|
34
|
-
const invalid = '#cb2431'
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
131
|
+
const invalid = '#cb2431', // Invalid color - error red
|
|
132
|
+
highlightBackground = '#BBDFFF20', // Line highlight (light blue and opacity)
|
|
133
|
+
tooltipBackground = base0F, // Tooltip background
|
|
134
|
+
cursor = base01, // Caret color
|
|
135
|
+
selection = base02, // Selection color
|
|
136
|
+
activeBracketBg = '#e8f0fe', // Active bracket background
|
|
137
|
+
activeBracketBorder = '#0366d6', // Active bracket border
|
|
138
|
+
diagnosticWarning = '#b08800', // Warning color
|
|
139
|
+
selectionMatch = '#79b8ff40', // Selection match background
|
|
140
|
+
linkColor = '#0969da', // Bright blue for links
|
|
141
|
+
visitedLinkColor = '#8250df'; // Purple for visited links
|
|
142
|
+
// Diff/merge specific colors
|
|
143
|
+
const addedBackground = '#e6ffec80', // GitHub light green with transparency
|
|
144
|
+
removedBackground = '#ffebe980', // GitHub light red with transparency
|
|
145
|
+
addedText = '#0f6d31', // GitHub dark green for added text
|
|
146
|
+
removedText = '#cf222e'; // GitHub red for removed text
|
|
43
147
|
/**
|
|
44
148
|
* Enhanced editor theme styles for GitHub Light
|
|
45
149
|
*/
|
|
@@ -150,6 +254,45 @@ const githubLightTheme = /*@__PURE__*/EditorView.theme({
|
|
|
150
254
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
151
255
|
color: base01,
|
|
152
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}30`,
|
|
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}30`,
|
|
292
|
+
},
|
|
293
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
294
|
+
background: 'transparent !important',
|
|
295
|
+
},
|
|
153
296
|
// Tooltips and autocomplete
|
|
154
297
|
'.cm-tooltip': {
|
|
155
298
|
backgroundColor: tooltipBackground,
|
|
@@ -351,5 +494,14 @@ const githubLight = [
|
|
|
351
494
|
githubLightTheme,
|
|
352
495
|
/*@__PURE__*/syntaxHighlighting(githubLightHighlightStyle),
|
|
353
496
|
];
|
|
497
|
+
/**
|
|
498
|
+
* GitHub Light merge revert styles configuration
|
|
499
|
+
*/
|
|
500
|
+
const githubLightMergeStyles = {
|
|
501
|
+
backgroundColor: tooltipBackground,
|
|
502
|
+
borderColor: base0E,
|
|
503
|
+
buttonColor: base01,
|
|
504
|
+
buttonHoverColor: '#f5f5f5',
|
|
505
|
+
};
|
|
354
506
|
|
|
355
|
-
export {
|
|
507
|
+
export { applyMergeRevertStyles, githubLight, githubLightMergeStyles };
|
package/package.json
CHANGED