@fsegurai/codemirror-theme-andromeda 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 +189 -36
- package/dist/index.d.cts +19 -8
- package/dist/index.d.ts +19 -8
- package/dist/index.js +156 -3
- 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 Andromeda theme color palette
|
|
@@ -30,7 +130,12 @@ base0F = '#3c94ff', // New color for attributes and links
|
|
|
30
130
|
invalid = '#ff3162', // Invalid (more visible red)
|
|
31
131
|
// UI-specific colors
|
|
32
132
|
darkBackground = '#242830', selectionBackground = base02, selectionForeground = '#ffffff', highlightBackground = '#30343d40', tooltipBackground = '#1f232d', // Darker tooltip for better contrast
|
|
33
|
-
cursor = base04, activeBracketBg = '#db45a230', activeBracketBorder = base05
|
|
133
|
+
cursor = base04, activeBracketBg = '#db45a230', activeBracketBorder = base05,
|
|
134
|
+
// Diff/merge specific colors
|
|
135
|
+
addedBackground = '#0f3a2440', // Dark green with transparency for insertions
|
|
136
|
+
removedBackground = '#78112230', // Dark red with transparency for deletions
|
|
137
|
+
addedText = base08, // Using string color for added text for consistency
|
|
138
|
+
removedText = '#ff5d7a'; // Bright red for removed text
|
|
34
139
|
/**
|
|
35
140
|
* Enhanced editor theme styles for Andromeda
|
|
36
141
|
*/
|
|
@@ -39,17 +144,17 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
39
144
|
'&': {
|
|
40
145
|
color: base01,
|
|
41
146
|
backgroundColor: base00,
|
|
42
|
-
fontSize:
|
|
43
|
-
fontFamily:
|
|
147
|
+
fontSize: generalContent.fontSize,
|
|
148
|
+
fontFamily: generalContent.fontFamily,
|
|
44
149
|
},
|
|
45
150
|
// Content and cursor
|
|
46
151
|
'.cm-content': {
|
|
47
152
|
caretColor: cursor,
|
|
48
|
-
lineHeight:
|
|
153
|
+
lineHeight: generalContent.lineHeight,
|
|
49
154
|
},
|
|
50
155
|
'.cm-cursor, .cm-dropCursor': {
|
|
51
156
|
borderLeftColor: cursor,
|
|
52
|
-
borderLeftWidth:
|
|
157
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
53
158
|
},
|
|
54
159
|
'.cm-fat-cursor': {
|
|
55
160
|
backgroundColor: `${cursor}99`,
|
|
@@ -69,7 +174,7 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
69
174
|
backgroundColor: '#db45a230',
|
|
70
175
|
outline: `1px solid ${base05}30`,
|
|
71
176
|
color: base01,
|
|
72
|
-
borderRadius:
|
|
177
|
+
borderRadius: generalSearchField.borderRadius,
|
|
73
178
|
'& span': {
|
|
74
179
|
color: base01,
|
|
75
180
|
},
|
|
@@ -77,15 +182,15 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
77
182
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
78
183
|
backgroundColor: '#db45a280',
|
|
79
184
|
color: base01,
|
|
80
|
-
padding:
|
|
185
|
+
padding: generalSearchField.padding,
|
|
81
186
|
'& span': {
|
|
82
187
|
color: base01,
|
|
83
188
|
},
|
|
84
189
|
},
|
|
85
190
|
'.cm-search.cm-panel.cm-textfield': {
|
|
86
191
|
color: base06,
|
|
87
|
-
borderRadius:
|
|
88
|
-
padding:
|
|
192
|
+
borderRadius: generalSearchField.borderRadius,
|
|
193
|
+
padding: generalSearchField.padding,
|
|
89
194
|
},
|
|
90
195
|
// Panels
|
|
91
196
|
'.cm-panels': {
|
|
@@ -101,9 +206,9 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
101
206
|
'.cm-panel button': {
|
|
102
207
|
backgroundColor: darkBackground,
|
|
103
208
|
color: base06,
|
|
104
|
-
border:
|
|
105
|
-
borderRadius:
|
|
106
|
-
padding:
|
|
209
|
+
border: generalPanel.border,
|
|
210
|
+
borderRadius: generalPanel.borderRadius,
|
|
211
|
+
padding: generalPanel.padding,
|
|
107
212
|
},
|
|
108
213
|
'.cm-panel button:hover': {
|
|
109
214
|
backgroundColor: '#343946',
|
|
@@ -111,27 +216,27 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
111
216
|
// Line highlighting
|
|
112
217
|
'.cm-activeLine': {
|
|
113
218
|
backgroundColor: highlightBackground,
|
|
114
|
-
borderRadius:
|
|
219
|
+
borderRadius: generalLine.borderRadius,
|
|
115
220
|
zIndex: 1,
|
|
116
221
|
},
|
|
117
222
|
// Gutters
|
|
118
223
|
'.cm-gutters': {
|
|
119
224
|
backgroundColor: darkBackground,
|
|
120
225
|
color: '#748099',
|
|
121
|
-
border:
|
|
226
|
+
border: generalGutter.border,
|
|
122
227
|
borderRight: '1px solid #33384550',
|
|
123
|
-
paddingRight:
|
|
228
|
+
paddingRight: generalGutter.paddingRight,
|
|
124
229
|
},
|
|
125
230
|
'.cm-activeLineGutter': {
|
|
126
231
|
backgroundColor: highlightBackground,
|
|
127
232
|
color: base01,
|
|
128
|
-
fontWeight:
|
|
233
|
+
fontWeight: generalGutter.fontWeight,
|
|
129
234
|
},
|
|
130
235
|
'.cm-lineNumbers': {
|
|
131
|
-
fontSize:
|
|
236
|
+
fontSize: generalGutter.fontSize,
|
|
132
237
|
},
|
|
133
238
|
'.cm-foldGutter': {
|
|
134
|
-
fontSize:
|
|
239
|
+
fontSize: generalGutter.fontSize,
|
|
135
240
|
},
|
|
136
241
|
'.cm-foldGutter .cm-gutterElement': {
|
|
137
242
|
color: '#748099',
|
|
@@ -140,12 +245,51 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
140
245
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
141
246
|
color: base01,
|
|
142
247
|
},
|
|
248
|
+
// Diff/Merge View Styles
|
|
249
|
+
// Inserted/Added Content
|
|
250
|
+
'.cm-insertedLine': {
|
|
251
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
252
|
+
backgroundColor: addedBackground,
|
|
253
|
+
color: addedText,
|
|
254
|
+
padding: generalDiff.insertedLinePadding,
|
|
255
|
+
borderRadius: generalDiff.borderRadious,
|
|
256
|
+
},
|
|
257
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
258
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
259
|
+
backgroundColor: `${addedBackground} !important`,
|
|
260
|
+
color: addedText,
|
|
261
|
+
padding: generalDiff.insertedLinePadding,
|
|
262
|
+
borderRadius: generalDiff.borderRadious,
|
|
263
|
+
border: `1px solid ${addedText}40`,
|
|
264
|
+
},
|
|
265
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
266
|
+
background: 'transparent !important',
|
|
267
|
+
},
|
|
268
|
+
// Deleted/Removed Content
|
|
269
|
+
'.cm-deletedLine': {
|
|
270
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
271
|
+
backgroundColor: removedBackground,
|
|
272
|
+
color: removedText,
|
|
273
|
+
padding: generalDiff.insertedLinePadding,
|
|
274
|
+
borderRadius: generalDiff.borderRadious,
|
|
275
|
+
},
|
|
276
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
277
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
278
|
+
backgroundColor: `${removedBackground} !important`,
|
|
279
|
+
color: removedText,
|
|
280
|
+
padding: generalDiff.insertedLinePadding,
|
|
281
|
+
borderRadius: generalDiff.borderRadious,
|
|
282
|
+
border: `1px solid ${removedText}40`,
|
|
283
|
+
},
|
|
284
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
285
|
+
background: 'transparent !important',
|
|
286
|
+
},
|
|
143
287
|
// Tooltips and autocomplete
|
|
144
288
|
'.cm-tooltip': {
|
|
145
289
|
backgroundColor: tooltipBackground,
|
|
146
290
|
border: '1px solid #3a3e4c',
|
|
147
|
-
borderRadius:
|
|
148
|
-
padding:
|
|
291
|
+
borderRadius: generalTooltip.borderRadius,
|
|
292
|
+
padding: generalTooltip.padding,
|
|
149
293
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
150
294
|
},
|
|
151
295
|
'.cm-tooltip-autocomplete': {
|
|
@@ -154,17 +298,17 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
154
298
|
border: 'none',
|
|
155
299
|
},
|
|
156
300
|
'& > ul > li': {
|
|
157
|
-
padding:
|
|
158
|
-
lineHeight:
|
|
301
|
+
padding: generalTooltip.padding,
|
|
302
|
+
lineHeight: generalTooltip.lineHeight,
|
|
159
303
|
},
|
|
160
304
|
'& > ul > li[aria-selected]': {
|
|
161
305
|
backgroundColor: '#db45a240',
|
|
162
306
|
color: base01,
|
|
163
|
-
borderRadius:
|
|
307
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
164
308
|
},
|
|
165
309
|
'& > ul > li > span.cm-completionIcon': {
|
|
166
310
|
color: '#748099',
|
|
167
|
-
paddingRight:
|
|
311
|
+
paddingRight: generalTooltip.paddingRight,
|
|
168
312
|
},
|
|
169
313
|
'& > ul > li > span.cm-completionDetail': {
|
|
170
314
|
color: '#748099',
|
|
@@ -201,27 +345,27 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
201
345
|
'.cm-matchingBracket': {
|
|
202
346
|
backgroundColor: activeBracketBg,
|
|
203
347
|
outline: `1px solid ${activeBracketBorder}50`,
|
|
204
|
-
borderRadius:
|
|
348
|
+
borderRadius: generalMatching.borderRadius,
|
|
205
349
|
},
|
|
206
350
|
'.cm-nonmatchingBracket': {
|
|
207
351
|
backgroundColor: '#ff405030',
|
|
208
352
|
outline: `1px solid ${invalid}`,
|
|
209
|
-
borderRadius:
|
|
353
|
+
borderRadius: generalMatching.borderRadius,
|
|
210
354
|
},
|
|
211
355
|
// Selection matches
|
|
212
356
|
'.cm-selectionMatch': {
|
|
213
357
|
backgroundColor: '#db45a240',
|
|
214
358
|
outline: `1px solid ${base05}50`,
|
|
215
|
-
borderRadius:
|
|
359
|
+
borderRadius: generalMatching.borderRadius,
|
|
216
360
|
},
|
|
217
361
|
// Fold placeholder
|
|
218
362
|
'.cm-foldPlaceholder': {
|
|
219
363
|
backgroundColor: 'transparent',
|
|
220
364
|
color: base02,
|
|
221
365
|
border: `1px dotted ${base05}70`,
|
|
222
|
-
borderRadius:
|
|
223
|
-
padding:
|
|
224
|
-
margin:
|
|
366
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
367
|
+
padding: generalPlaceholder.padding,
|
|
368
|
+
margin: generalPlaceholder.margin,
|
|
225
369
|
},
|
|
226
370
|
// Focus outline
|
|
227
371
|
'&.cm-focused': {
|
|
@@ -230,15 +374,15 @@ const andromedaTheme = view.EditorView.theme({
|
|
|
230
374
|
},
|
|
231
375
|
// Scrollbars
|
|
232
376
|
'& .cm-scroller::-webkit-scrollbar': {
|
|
233
|
-
width:
|
|
234
|
-
height:
|
|
377
|
+
width: generalScroller.width,
|
|
378
|
+
height: generalScroller.height,
|
|
235
379
|
},
|
|
236
380
|
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
237
381
|
background: darkBackground,
|
|
238
382
|
},
|
|
239
383
|
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
240
384
|
backgroundColor: '#3b4151',
|
|
241
|
-
borderRadius:
|
|
385
|
+
borderRadius: generalScroller.borderRadius,
|
|
242
386
|
border: `3px solid ${darkBackground}`,
|
|
243
387
|
},
|
|
244
388
|
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
@@ -323,7 +467,16 @@ const andromeda = [
|
|
|
323
467
|
andromedaTheme,
|
|
324
468
|
language.syntaxHighlighting(andromedaHighlightStyle),
|
|
325
469
|
];
|
|
470
|
+
/**
|
|
471
|
+
* Andromeda merge revert styles configuration
|
|
472
|
+
*/
|
|
473
|
+
const andromedaMergeStyles = {
|
|
474
|
+
backgroundColor: darkBackground,
|
|
475
|
+
borderColor: '#3a3e4c',
|
|
476
|
+
buttonColor: base06,
|
|
477
|
+
buttonHoverColor: '#343946',
|
|
478
|
+
};
|
|
326
479
|
|
|
327
480
|
exports.andromeda = andromeda;
|
|
328
|
-
exports.
|
|
329
|
-
exports.
|
|
481
|
+
exports.andromedaMergeStyles = andromedaMergeStyles;
|
|
482
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
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 the Andromeda theme
|
|
10
|
-
*/
|
|
11
|
-
declare const andromedaHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Andromeda theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const andromeda: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Andromeda merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const andromedaMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export { andromeda,
|
|
28
|
+
export { andromeda, andromedaMergeStyles, applyMergeRevertStyles };
|
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 the Andromeda theme
|
|
10
|
-
*/
|
|
11
|
-
declare const andromedaHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Andromeda theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const andromeda: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Andromeda merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const andromedaMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export { andromeda,
|
|
28
|
+
export { andromeda, andromedaMergeStyles, applyMergeRevertStyles };
|
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 Andromeda theme color palette
|
|
@@ -28,7 +128,12 @@ base0F = '#3c94ff', // New color for attributes and links
|
|
|
28
128
|
invalid = '#ff3162', // Invalid (more visible red)
|
|
29
129
|
// UI-specific colors
|
|
30
130
|
darkBackground = '#242830', selectionBackground = base02, selectionForeground = '#ffffff', highlightBackground = '#30343d40', tooltipBackground = '#1f232d', // Darker tooltip for better contrast
|
|
31
|
-
cursor = base04, activeBracketBg = '#db45a230', activeBracketBorder = base05
|
|
131
|
+
cursor = base04, activeBracketBg = '#db45a230', activeBracketBorder = base05,
|
|
132
|
+
// Diff/merge specific colors
|
|
133
|
+
addedBackground = '#0f3a2440', // Dark green with transparency for insertions
|
|
134
|
+
removedBackground = '#78112230', // Dark red with transparency for deletions
|
|
135
|
+
addedText = base08, // Using string color for added text for consistency
|
|
136
|
+
removedText = '#ff5d7a'; // Bright red for removed text
|
|
32
137
|
/**
|
|
33
138
|
* Enhanced editor theme styles for Andromeda
|
|
34
139
|
*/
|
|
@@ -138,6 +243,45 @@ const andromedaTheme = /*@__PURE__*/EditorView.theme({
|
|
|
138
243
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
139
244
|
color: base01,
|
|
140
245
|
},
|
|
246
|
+
// Diff/Merge View Styles
|
|
247
|
+
// Inserted/Added Content
|
|
248
|
+
'.cm-insertedLine': {
|
|
249
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
250
|
+
backgroundColor: addedBackground,
|
|
251
|
+
color: addedText,
|
|
252
|
+
padding: generalDiff.insertedLinePadding,
|
|
253
|
+
borderRadius: generalDiff.borderRadious,
|
|
254
|
+
},
|
|
255
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
256
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
257
|
+
backgroundColor: `${addedBackground} !important`,
|
|
258
|
+
color: addedText,
|
|
259
|
+
padding: generalDiff.insertedLinePadding,
|
|
260
|
+
borderRadius: generalDiff.borderRadious,
|
|
261
|
+
border: `1px solid ${addedText}40`,
|
|
262
|
+
},
|
|
263
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
264
|
+
background: 'transparent !important',
|
|
265
|
+
},
|
|
266
|
+
// Deleted/Removed Content
|
|
267
|
+
'.cm-deletedLine': {
|
|
268
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
269
|
+
backgroundColor: removedBackground,
|
|
270
|
+
color: removedText,
|
|
271
|
+
padding: generalDiff.insertedLinePadding,
|
|
272
|
+
borderRadius: generalDiff.borderRadious,
|
|
273
|
+
},
|
|
274
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
275
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
276
|
+
backgroundColor: `${removedBackground} !important`,
|
|
277
|
+
color: removedText,
|
|
278
|
+
padding: generalDiff.insertedLinePadding,
|
|
279
|
+
borderRadius: generalDiff.borderRadious,
|
|
280
|
+
border: `1px solid ${removedText}40`,
|
|
281
|
+
},
|
|
282
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
283
|
+
background: 'transparent !important',
|
|
284
|
+
},
|
|
141
285
|
// Tooltips and autocomplete
|
|
142
286
|
'.cm-tooltip': {
|
|
143
287
|
backgroundColor: tooltipBackground,
|
|
@@ -321,5 +465,14 @@ const andromeda = [
|
|
|
321
465
|
andromedaTheme,
|
|
322
466
|
/*@__PURE__*/syntaxHighlighting(andromedaHighlightStyle),
|
|
323
467
|
];
|
|
468
|
+
/**
|
|
469
|
+
* Andromeda merge revert styles configuration
|
|
470
|
+
*/
|
|
471
|
+
const andromedaMergeStyles = {
|
|
472
|
+
backgroundColor: darkBackground,
|
|
473
|
+
borderColor: '#3a3e4c',
|
|
474
|
+
buttonColor: base06,
|
|
475
|
+
buttonHoverColor: '#343946',
|
|
476
|
+
};
|
|
324
477
|
|
|
325
|
-
export { andromeda,
|
|
478
|
+
export { andromeda, andromedaMergeStyles, applyMergeRevertStyles };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fsegurai/codemirror-theme-andromeda",
|
|
3
3
|
"description": "Andromeda 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",
|
|
@@ -34,8 +36,7 @@
|
|
|
34
36
|
"@lezer/highlight": "^1.0.0",
|
|
35
37
|
"@codemirror/language": "^6.0.0",
|
|
36
38
|
"@codemirror/state": "^6.0.0",
|
|
37
|
-
"@codemirror/view": "^6.0.0"
|
|
38
|
-
"@fsegurai/codemirror-theme-utils": "6.2.0-beta.3"
|
|
39
|
+
"@codemirror/view": "^6.0.0"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
42
|
"@codemirror/buildhelper": "^1.0.2"
|