@fsegurai/codemirror-theme-abyss 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 +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 +3 -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
|
// Base colors - Ocean depths
|
|
9
109
|
const base00 = '#000c18', // - Background (deep ocean blue)
|
|
@@ -27,7 +127,12 @@ base11 = '#66ecd4', // - URLs (brighter teal)
|
|
|
27
127
|
// UI elements
|
|
28
128
|
invalid = '#ff5370', darkBackground = '#0a1422', // Darker background for better contrast
|
|
29
129
|
highlightBackground = '#0055ff15', tooltipBackground = '#05101d', // Darker tooltip for better contrast
|
|
30
|
-
cursor = base04, selection = base02, activeBracketBg = '#0a5999b0', activeBracketBorder = base0F
|
|
130
|
+
cursor = base04, selection = base02, activeBracketBg = '#0a5999b0', activeBracketBorder = base0F,
|
|
131
|
+
// Diff/merge specific colors
|
|
132
|
+
addedBackground = '#0e4e1d50', // Dark green with transparency for insertions
|
|
133
|
+
removedBackground = '#78112240', // Dark red with transparency for deletions
|
|
134
|
+
addedText = '#4ce660', // Bright green for added text (matching string color)
|
|
135
|
+
removedText = '#ff6b7d'; // Bright red for removed text
|
|
31
136
|
/**
|
|
32
137
|
* Enhanced editor theme styles for Abyss
|
|
33
138
|
*/
|
|
@@ -36,17 +141,17 @@ const abyssTheme = view.EditorView.theme({
|
|
|
36
141
|
'&': {
|
|
37
142
|
color: base01,
|
|
38
143
|
backgroundColor: base00,
|
|
39
|
-
fontSize:
|
|
40
|
-
fontFamily:
|
|
144
|
+
fontSize: generalContent.fontSize,
|
|
145
|
+
fontFamily: generalContent.fontFamily,
|
|
41
146
|
},
|
|
42
147
|
// Content and cursor
|
|
43
148
|
'.cm-content': {
|
|
44
149
|
caretColor: cursor,
|
|
45
|
-
lineHeight:
|
|
150
|
+
lineHeight: generalContent.lineHeight,
|
|
46
151
|
},
|
|
47
152
|
'.cm-cursor, .cm-dropCursor': {
|
|
48
153
|
borderLeftColor: cursor,
|
|
49
|
-
borderLeftWidth:
|
|
154
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
50
155
|
},
|
|
51
156
|
'.cm-fat-cursor': {
|
|
52
157
|
backgroundColor: `${cursor}99`,
|
|
@@ -60,7 +165,7 @@ const abyssTheme = view.EditorView.theme({
|
|
|
60
165
|
'.cm-searchMatch': {
|
|
61
166
|
backgroundColor: '#155ab380',
|
|
62
167
|
outline: `1px solid ${base08}`,
|
|
63
|
-
borderRadius:
|
|
168
|
+
borderRadius: generalSearchField.borderRadius,
|
|
64
169
|
'& span': {
|
|
65
170
|
color: base06,
|
|
66
171
|
},
|
|
@@ -68,15 +173,15 @@ const abyssTheme = view.EditorView.theme({
|
|
|
68
173
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
69
174
|
backgroundColor: '#2a6ac080',
|
|
70
175
|
color: base06,
|
|
71
|
-
padding:
|
|
176
|
+
padding: generalSearchField.padding,
|
|
72
177
|
'& span': {
|
|
73
178
|
color: base06,
|
|
74
179
|
},
|
|
75
180
|
},
|
|
76
181
|
'.cm-search.cm-panel.cm-textfield': {
|
|
77
182
|
color: base01,
|
|
78
|
-
borderRadius:
|
|
79
|
-
padding:
|
|
183
|
+
borderRadius: generalSearchField.borderRadius,
|
|
184
|
+
padding: generalSearchField.padding,
|
|
80
185
|
},
|
|
81
186
|
// Panels
|
|
82
187
|
'.cm-panels': {
|
|
@@ -92,9 +197,9 @@ const abyssTheme = view.EditorView.theme({
|
|
|
92
197
|
'.cm-panel button': {
|
|
93
198
|
backgroundColor: darkBackground,
|
|
94
199
|
color: base01,
|
|
95
|
-
border:
|
|
96
|
-
borderRadius:
|
|
97
|
-
padding:
|
|
200
|
+
border: generalPanel.border,
|
|
201
|
+
borderRadius: generalPanel.borderRadius,
|
|
202
|
+
padding: generalPanel.padding,
|
|
98
203
|
},
|
|
99
204
|
'.cm-panel button:hover': {
|
|
100
205
|
backgroundColor: '#0a3555',
|
|
@@ -102,25 +207,25 @@ const abyssTheme = view.EditorView.theme({
|
|
|
102
207
|
// Line highlighting
|
|
103
208
|
'.cm-activeLine': {
|
|
104
209
|
backgroundColor: highlightBackground,
|
|
105
|
-
borderRadius:
|
|
210
|
+
borderRadius: generalLine.borderRadius,
|
|
106
211
|
},
|
|
107
212
|
// Gutters
|
|
108
213
|
'.cm-gutters': {
|
|
109
214
|
backgroundColor: darkBackground,
|
|
110
215
|
color: '#5f7e97',
|
|
111
|
-
border:
|
|
112
|
-
paddingRight:
|
|
216
|
+
border: generalGutter.border,
|
|
217
|
+
paddingRight: generalGutter.paddingRight,
|
|
113
218
|
},
|
|
114
219
|
'.cm-activeLineGutter': {
|
|
115
220
|
backgroundColor: highlightBackground,
|
|
116
221
|
color: base01,
|
|
117
|
-
fontWeight:
|
|
222
|
+
fontWeight: generalGutter.fontWeight,
|
|
118
223
|
},
|
|
119
224
|
'.cm-lineNumbers': {
|
|
120
|
-
fontSize:
|
|
225
|
+
fontSize: generalGutter.fontSize,
|
|
121
226
|
},
|
|
122
227
|
'.cm-foldGutter': {
|
|
123
|
-
fontSize:
|
|
228
|
+
fontSize: generalGutter.fontSize,
|
|
124
229
|
},
|
|
125
230
|
'.cm-foldGutter .cm-gutterElement': {
|
|
126
231
|
color: '#5f7e97',
|
|
@@ -129,27 +234,66 @@ const abyssTheme = view.EditorView.theme({
|
|
|
129
234
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
130
235
|
color: base01,
|
|
131
236
|
},
|
|
237
|
+
// Diff/Merge View Styles
|
|
238
|
+
// Inserted/Added Content
|
|
239
|
+
'.cm-insertedLine': {
|
|
240
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
241
|
+
backgroundColor: addedBackground,
|
|
242
|
+
color: addedText,
|
|
243
|
+
padding: generalDiff.insertedLinePadding,
|
|
244
|
+
borderRadius: generalDiff.borderRadious,
|
|
245
|
+
},
|
|
246
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
247
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
248
|
+
backgroundColor: `${addedBackground} !important`,
|
|
249
|
+
color: addedText,
|
|
250
|
+
padding: generalDiff.insertedLinePadding,
|
|
251
|
+
borderRadius: generalDiff.borderRadious,
|
|
252
|
+
border: `1px solid ${addedText}40`,
|
|
253
|
+
},
|
|
254
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
255
|
+
background: 'transparent !important',
|
|
256
|
+
},
|
|
257
|
+
// Deleted/Removed Content
|
|
258
|
+
'.cm-deletedLine': {
|
|
259
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
260
|
+
backgroundColor: removedBackground,
|
|
261
|
+
color: removedText,
|
|
262
|
+
padding: generalDiff.insertedLinePadding,
|
|
263
|
+
borderRadius: generalDiff.borderRadious,
|
|
264
|
+
},
|
|
265
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
266
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
267
|
+
backgroundColor: `${removedBackground} !important`,
|
|
268
|
+
color: removedText,
|
|
269
|
+
padding: generalDiff.insertedLinePadding,
|
|
270
|
+
borderRadius: generalDiff.borderRadious,
|
|
271
|
+
border: `1px solid ${removedText}40`,
|
|
272
|
+
},
|
|
273
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
274
|
+
background: 'transparent !important',
|
|
275
|
+
},
|
|
132
276
|
// Tooltips and autocomplete
|
|
133
277
|
'.cm-tooltip': {
|
|
134
278
|
backgroundColor: tooltipBackground,
|
|
135
279
|
border: '1px solid #084671',
|
|
136
|
-
borderRadius:
|
|
137
|
-
padding:
|
|
280
|
+
borderRadius: generalTooltip.borderRadius,
|
|
281
|
+
padding: generalTooltip.padding,
|
|
138
282
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
|
|
139
283
|
},
|
|
140
284
|
'.cm-tooltip-autocomplete': {
|
|
141
285
|
'& > ul > li': {
|
|
142
|
-
padding:
|
|
143
|
-
lineHeight:
|
|
286
|
+
padding: generalTooltip.padding,
|
|
287
|
+
lineHeight: generalTooltip.lineHeight,
|
|
144
288
|
},
|
|
145
289
|
'& > ul > li[aria-selected]': {
|
|
146
290
|
backgroundColor: '#084671',
|
|
147
291
|
color: '#e0edff',
|
|
148
|
-
borderRadius:
|
|
292
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
149
293
|
},
|
|
150
294
|
'& > ul > li > span.cm-completionIcon': {
|
|
151
295
|
color: '#5f7e97',
|
|
152
|
-
paddingRight:
|
|
296
|
+
paddingRight: generalTooltip.paddingRight,
|
|
153
297
|
},
|
|
154
298
|
'& > ul > li > span.cm-completionDetail': {
|
|
155
299
|
color: '#5f7e97',
|
|
@@ -186,18 +330,18 @@ const abyssTheme = view.EditorView.theme({
|
|
|
186
330
|
'.cm-matchingBracket': {
|
|
187
331
|
backgroundColor: activeBracketBg,
|
|
188
332
|
outline: `1px solid ${activeBracketBorder}`,
|
|
189
|
-
borderRadius:
|
|
333
|
+
borderRadius: generalMatching.borderRadius,
|
|
190
334
|
},
|
|
191
335
|
'.cm-nonmatchingBracket': {
|
|
192
336
|
backgroundColor: '#780e1e80',
|
|
193
337
|
outline: `1px solid ${invalid}`,
|
|
194
|
-
borderRadius:
|
|
338
|
+
borderRadius: generalMatching.borderRadius,
|
|
195
339
|
},
|
|
196
340
|
// Selection matches
|
|
197
341
|
'.cm-selectionMatch': {
|
|
198
342
|
backgroundColor: '#155ab340',
|
|
199
343
|
outline: `1px solid ${base08}`,
|
|
200
|
-
borderRadius:
|
|
344
|
+
borderRadius: generalMatching.borderRadius,
|
|
201
345
|
},
|
|
202
346
|
// Fold placeholder
|
|
203
347
|
'.cm-foldPlaceholder': {
|
|
@@ -205,9 +349,9 @@ const abyssTheme = view.EditorView.theme({
|
|
|
205
349
|
color: '#5f7e97',
|
|
206
350
|
fontStyle: 'italic',
|
|
207
351
|
border: `1px dotted ${activeBracketBorder}`,
|
|
208
|
-
borderRadius:
|
|
209
|
-
padding:
|
|
210
|
-
margin:
|
|
352
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
353
|
+
padding: generalPlaceholder.padding,
|
|
354
|
+
margin: generalPlaceholder.margin,
|
|
211
355
|
},
|
|
212
356
|
// Focus outline
|
|
213
357
|
'&.cm-focused': {
|
|
@@ -216,15 +360,15 @@ const abyssTheme = view.EditorView.theme({
|
|
|
216
360
|
},
|
|
217
361
|
// Scrollbars
|
|
218
362
|
'& .cm-scroller::-webkit-scrollbar': {
|
|
219
|
-
width:
|
|
220
|
-
height:
|
|
363
|
+
width: generalScroller.width,
|
|
364
|
+
height: generalScroller.height,
|
|
221
365
|
},
|
|
222
366
|
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
223
367
|
background: darkBackground,
|
|
224
368
|
},
|
|
225
369
|
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
226
370
|
backgroundColor: '#5f7e97',
|
|
227
|
-
borderRadius:
|
|
371
|
+
borderRadius: generalScroller.borderRadius,
|
|
228
372
|
border: `3px solid ${darkBackground}`,
|
|
229
373
|
},
|
|
230
374
|
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
@@ -313,7 +457,16 @@ const abyss = [
|
|
|
313
457
|
abyssTheme,
|
|
314
458
|
language.syntaxHighlighting(abyssHighlightStyle),
|
|
315
459
|
];
|
|
460
|
+
/**
|
|
461
|
+
* Abyss merge revert styles configuration
|
|
462
|
+
*/
|
|
463
|
+
const abyssMergeStyles = {
|
|
464
|
+
backgroundColor: darkBackground,
|
|
465
|
+
borderColor: '#084671',
|
|
466
|
+
buttonColor: base01,
|
|
467
|
+
buttonHoverColor: '#0a3555',
|
|
468
|
+
};
|
|
316
469
|
|
|
317
470
|
exports.abyss = abyss;
|
|
318
|
-
exports.
|
|
319
|
-
exports.
|
|
471
|
+
exports.abyssMergeStyles = abyssMergeStyles;
|
|
472
|
+
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 Abyss theme
|
|
10
|
-
*/
|
|
11
|
-
declare const abyssHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Abyss theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const abyss: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Abyss merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const abyssMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export { abyss,
|
|
28
|
+
export { abyss, abyssMergeStyles, 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 Abyss theme
|
|
10
|
-
*/
|
|
11
|
-
declare const abyssHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Abyss theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const abyss: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Abyss merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const abyssMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export { abyss,
|
|
28
|
+
export { abyss, abyssMergeStyles, 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
|
// Base colors - Ocean depths
|
|
7
107
|
const base00 = '#000c18', // - Background (deep ocean blue)
|
|
@@ -25,7 +125,12 @@ base11 = '#66ecd4', // - URLs (brighter teal)
|
|
|
25
125
|
// UI elements
|
|
26
126
|
invalid = '#ff5370', darkBackground = '#0a1422', // Darker background for better contrast
|
|
27
127
|
highlightBackground = '#0055ff15', tooltipBackground = '#05101d', // Darker tooltip for better contrast
|
|
28
|
-
cursor = base04, selection = base02, activeBracketBg = '#0a5999b0', activeBracketBorder = base0F
|
|
128
|
+
cursor = base04, selection = base02, activeBracketBg = '#0a5999b0', activeBracketBorder = base0F,
|
|
129
|
+
// Diff/merge specific colors
|
|
130
|
+
addedBackground = '#0e4e1d50', // Dark green with transparency for insertions
|
|
131
|
+
removedBackground = '#78112240', // Dark red with transparency for deletions
|
|
132
|
+
addedText = '#4ce660', // Bright green for added text (matching string color)
|
|
133
|
+
removedText = '#ff6b7d'; // Bright red for removed text
|
|
29
134
|
/**
|
|
30
135
|
* Enhanced editor theme styles for Abyss
|
|
31
136
|
*/
|
|
@@ -127,6 +232,45 @@ const abyssTheme = /*@__PURE__*/EditorView.theme({
|
|
|
127
232
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
128
233
|
color: base01,
|
|
129
234
|
},
|
|
235
|
+
// Diff/Merge View Styles
|
|
236
|
+
// Inserted/Added Content
|
|
237
|
+
'.cm-insertedLine': {
|
|
238
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
239
|
+
backgroundColor: addedBackground,
|
|
240
|
+
color: addedText,
|
|
241
|
+
padding: generalDiff.insertedLinePadding,
|
|
242
|
+
borderRadius: generalDiff.borderRadious,
|
|
243
|
+
},
|
|
244
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
245
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
246
|
+
backgroundColor: `${addedBackground} !important`,
|
|
247
|
+
color: addedText,
|
|
248
|
+
padding: generalDiff.insertedLinePadding,
|
|
249
|
+
borderRadius: generalDiff.borderRadious,
|
|
250
|
+
border: `1px solid ${addedText}40`,
|
|
251
|
+
},
|
|
252
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
253
|
+
background: 'transparent !important',
|
|
254
|
+
},
|
|
255
|
+
// Deleted/Removed Content
|
|
256
|
+
'.cm-deletedLine': {
|
|
257
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
258
|
+
backgroundColor: removedBackground,
|
|
259
|
+
color: removedText,
|
|
260
|
+
padding: generalDiff.insertedLinePadding,
|
|
261
|
+
borderRadius: generalDiff.borderRadious,
|
|
262
|
+
},
|
|
263
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
264
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
265
|
+
backgroundColor: `${removedBackground} !important`,
|
|
266
|
+
color: removedText,
|
|
267
|
+
padding: generalDiff.insertedLinePadding,
|
|
268
|
+
borderRadius: generalDiff.borderRadious,
|
|
269
|
+
border: `1px solid ${removedText}40`,
|
|
270
|
+
},
|
|
271
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
272
|
+
background: 'transparent !important',
|
|
273
|
+
},
|
|
130
274
|
// Tooltips and autocomplete
|
|
131
275
|
'.cm-tooltip': {
|
|
132
276
|
backgroundColor: tooltipBackground,
|
|
@@ -311,5 +455,14 @@ const abyss = [
|
|
|
311
455
|
abyssTheme,
|
|
312
456
|
/*@__PURE__*/syntaxHighlighting(abyssHighlightStyle),
|
|
313
457
|
];
|
|
458
|
+
/**
|
|
459
|
+
* Abyss merge revert styles configuration
|
|
460
|
+
*/
|
|
461
|
+
const abyssMergeStyles = {
|
|
462
|
+
backgroundColor: darkBackground,
|
|
463
|
+
borderColor: '#084671',
|
|
464
|
+
buttonColor: base01,
|
|
465
|
+
buttonHoverColor: '#0a3555',
|
|
466
|
+
};
|
|
314
467
|
|
|
315
|
-
export { abyss,
|
|
468
|
+
export { abyss, abyssMergeStyles, applyMergeRevertStyles };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fsegurai/codemirror-theme-abyss",
|
|
3
3
|
"description": "Abyss theme for the CodeMirror code editor",
|
|
4
|
-
"version": "6.2.0-beta.
|
|
4
|
+
"version": "6.2.0-beta.5",
|
|
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",
|