@fsegurai/codemirror-theme-basic-light 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 +214 -61
- package/dist/index.d.cts +19 -8
- package/dist/index.d.ts +19 -8
- package/dist/index.js +181 -28
- 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 color palette for Basic Light theme
|
|
@@ -11,36 +111,41 @@ var codemirrorThemeUtils = require('@fsegurai/codemirror-theme-utils');
|
|
|
11
111
|
* Colors are organized by function with visual color blocks for quick reference
|
|
12
112
|
*/
|
|
13
113
|
// Text colors (dark shades)
|
|
14
|
-
const base00 = '#1c2434'
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
114
|
+
const base00 = '#1c2434', // deep navy - primary text (darker for better contrast)
|
|
115
|
+
base01 = '#2d3748', // dark slate - secondary text, cursor
|
|
116
|
+
base02 = '#4a5568', // medium slate - gutter text
|
|
117
|
+
base03 = '#718096', // steel blue - comments, panel text
|
|
18
118
|
// Background shades
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
119
|
+
base04 = '#edf2f750', // very light blue w/transparency - active line gutter
|
|
120
|
+
base05 = '#f7fafc', // off-white - tooltip background
|
|
121
|
+
base06 = '#f0f4f8', // snow-white - gutter background
|
|
22
122
|
// Primary accent colors (cool tones)
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
123
|
+
base07 = '#0c7792', // teal - links, braces (more saturated)
|
|
124
|
+
base08 = '#0369a1', // azure blue - numbers, constants (deeper)
|
|
125
|
+
base09 = '#2b6cb0', // royal blue - variables, parameters
|
|
126
|
+
base0A = '#1a365d', // deep navy - keywords, headings
|
|
27
127
|
// Secondary accent colors (warm and complementary)
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
128
|
+
base0B = '#c53030', // red - square brackets (more vibrant)
|
|
129
|
+
base0C = '#dd6b20', // orange - strings (warmer, more vibrant)
|
|
130
|
+
base0D = '#d69e2e', // amber - class names (more saturated)
|
|
131
|
+
base0E = '#2f855a', // green - operators (deeper, richer)
|
|
132
|
+
base0F = '#805ad5'; // purple - tag names (more vibrant)
|
|
33
133
|
// UI-specific colors
|
|
34
|
-
const invalid = '#e53e3e'
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
134
|
+
const invalid = '#e53e3e', // bright red - errors (more visible)
|
|
135
|
+
darkBackground = base06, // panel background
|
|
136
|
+
highlightBackground = '#ebf4ff40', // active line highlight (subtle blue)
|
|
137
|
+
background = '#ffffff', // editor background
|
|
138
|
+
tooltipBackground = base05, // tooltip background
|
|
139
|
+
selection = '#90cdf480', // selection background (clearer blue)
|
|
140
|
+
selectionMatch = '#63b3ed40', // selection match highlight
|
|
141
|
+
cursor = base01, // cursor color
|
|
142
|
+
activeBracketBg = '#0c779220', // active bracket background (transparent teal)
|
|
143
|
+
activeBracketBorder = base09;
|
|
144
|
+
// Diff/merge specific colors
|
|
145
|
+
const addedBackground = '#e6ffec60', // Light green with transparency for insertions
|
|
146
|
+
removedBackground = '#ffebe9a0', // Light red with transparency for deletions
|
|
147
|
+
addedText = '#24783b', // Dark green for added text
|
|
148
|
+
removedText = '#cf222e'; // Dark red for removed text
|
|
44
149
|
/**
|
|
45
150
|
* Enhanced editor theme styles for Basic Light
|
|
46
151
|
*/
|
|
@@ -49,17 +154,17 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
49
154
|
'&': {
|
|
50
155
|
color: base00,
|
|
51
156
|
backgroundColor: background,
|
|
52
|
-
fontSize:
|
|
53
|
-
fontFamily:
|
|
157
|
+
fontSize: generalContent.fontSize,
|
|
158
|
+
fontFamily: generalContent.fontFamily,
|
|
54
159
|
},
|
|
55
160
|
// Content and cursor
|
|
56
161
|
'.cm-content': {
|
|
57
162
|
caretColor: cursor,
|
|
58
|
-
lineHeight:
|
|
163
|
+
lineHeight: generalContent.lineHeight,
|
|
59
164
|
},
|
|
60
165
|
'.cm-cursor, .cm-dropCursor': {
|
|
61
166
|
borderLeftColor: cursor,
|
|
62
|
-
borderLeftWidth:
|
|
167
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
63
168
|
},
|
|
64
169
|
'.cm-fat-cursor': {
|
|
65
170
|
backgroundColor: `${cursor}99`,
|
|
@@ -79,7 +184,7 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
79
184
|
backgroundColor: '#63b3ed40',
|
|
80
185
|
outline: `1px solid ${base09}`,
|
|
81
186
|
color: base00,
|
|
82
|
-
borderRadius:
|
|
187
|
+
borderRadius: generalSearchField.borderRadius,
|
|
83
188
|
'& span': {
|
|
84
189
|
color: base00,
|
|
85
190
|
},
|
|
@@ -87,15 +192,15 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
87
192
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
88
193
|
backgroundColor: '#63b3ed70',
|
|
89
194
|
color: base00,
|
|
90
|
-
padding:
|
|
195
|
+
padding: generalSearchField.padding,
|
|
91
196
|
'& span': {
|
|
92
197
|
color: base00,
|
|
93
198
|
},
|
|
94
199
|
},
|
|
95
200
|
'.cm-search.cm-panel.cm-textfield': {
|
|
96
201
|
color: base02,
|
|
97
|
-
borderRadius:
|
|
98
|
-
padding:
|
|
202
|
+
borderRadius: generalSearchField.borderRadius,
|
|
203
|
+
padding: generalSearchField.padding,
|
|
99
204
|
},
|
|
100
205
|
// Panels
|
|
101
206
|
'.cm-panels': {
|
|
@@ -112,9 +217,9 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
112
217
|
'.cm-panel button': {
|
|
113
218
|
backgroundColor: darkBackground,
|
|
114
219
|
color: base02,
|
|
115
|
-
border:
|
|
116
|
-
borderRadius:
|
|
117
|
-
padding:
|
|
220
|
+
border: generalPanel.border,
|
|
221
|
+
borderRadius: generalPanel.borderRadius,
|
|
222
|
+
padding: generalPanel.padding,
|
|
118
223
|
},
|
|
119
224
|
'.cm-panel button:hover': {
|
|
120
225
|
backgroundColor: '#e2e8f0',
|
|
@@ -122,27 +227,27 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
122
227
|
// Line highlighting
|
|
123
228
|
'.cm-activeLine': {
|
|
124
229
|
backgroundColor: highlightBackground,
|
|
125
|
-
borderRadius:
|
|
230
|
+
borderRadius: generalLine.borderRadius,
|
|
126
231
|
zIndex: 1,
|
|
127
232
|
},
|
|
128
233
|
// Gutters
|
|
129
234
|
'.cm-gutters': {
|
|
130
235
|
backgroundColor: base06,
|
|
131
236
|
color: base02,
|
|
132
|
-
border:
|
|
237
|
+
border: generalGutter.border,
|
|
133
238
|
borderRight: '1px solid #e2e8f0',
|
|
134
|
-
paddingRight:
|
|
239
|
+
paddingRight: generalGutter.paddingRight,
|
|
135
240
|
},
|
|
136
241
|
'.cm-activeLineGutter': {
|
|
137
242
|
backgroundColor: base04,
|
|
138
243
|
color: base00,
|
|
139
|
-
fontWeight:
|
|
244
|
+
fontWeight: generalGutter.fontWeight,
|
|
140
245
|
},
|
|
141
246
|
'.cm-lineNumbers': {
|
|
142
|
-
fontSize:
|
|
247
|
+
fontSize: generalGutter.fontSize,
|
|
143
248
|
},
|
|
144
249
|
'.cm-foldGutter': {
|
|
145
|
-
fontSize:
|
|
250
|
+
fontSize: generalGutter.fontSize,
|
|
146
251
|
},
|
|
147
252
|
'.cm-foldGutter .cm-gutterElement': {
|
|
148
253
|
color: base02,
|
|
@@ -151,12 +256,51 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
151
256
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
152
257
|
color: base00,
|
|
153
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
|
+
},
|
|
154
298
|
// Tooltips and autocomplete
|
|
155
299
|
'.cm-tooltip': {
|
|
156
300
|
backgroundColor: tooltipBackground,
|
|
157
301
|
border: '1px solid #e2e8f0',
|
|
158
|
-
borderRadius:
|
|
159
|
-
padding:
|
|
302
|
+
borderRadius: generalTooltip.borderRadius,
|
|
303
|
+
padding: generalTooltip.padding,
|
|
160
304
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
|
161
305
|
},
|
|
162
306
|
'.cm-tooltip-autocomplete': {
|
|
@@ -165,17 +309,17 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
165
309
|
border: 'none',
|
|
166
310
|
},
|
|
167
311
|
'& > ul > li': {
|
|
168
|
-
padding:
|
|
169
|
-
lineHeight:
|
|
312
|
+
padding: generalTooltip.padding,
|
|
313
|
+
lineHeight: generalTooltip.lineHeight,
|
|
170
314
|
},
|
|
171
315
|
'& > ul > li[aria-selected]': {
|
|
172
316
|
backgroundColor: '#0c779220',
|
|
173
317
|
color: base00,
|
|
174
|
-
borderRadius:
|
|
318
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
175
319
|
},
|
|
176
320
|
'& > ul > li > span.cm-completionIcon': {
|
|
177
321
|
color: base03,
|
|
178
|
-
paddingRight:
|
|
322
|
+
paddingRight: generalTooltip.paddingRight,
|
|
179
323
|
},
|
|
180
324
|
'& > ul > li > span.cm-completionDetail': {
|
|
181
325
|
color: base03,
|
|
@@ -212,27 +356,27 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
212
356
|
'.cm-matchingBracket': {
|
|
213
357
|
backgroundColor: activeBracketBg,
|
|
214
358
|
outline: `1px solid ${activeBracketBorder}`,
|
|
215
|
-
borderRadius:
|
|
359
|
+
borderRadius: generalMatching.borderRadius,
|
|
216
360
|
},
|
|
217
361
|
'.cm-nonmatchingBracket': {
|
|
218
362
|
backgroundColor: `${invalid}20`,
|
|
219
363
|
outline: `1px solid ${invalid}`,
|
|
220
|
-
borderRadius:
|
|
364
|
+
borderRadius: generalMatching.borderRadius,
|
|
221
365
|
},
|
|
222
366
|
// Selection matches
|
|
223
367
|
'.cm-selectionMatch': {
|
|
224
368
|
backgroundColor: selectionMatch,
|
|
225
369
|
outline: `1px solid ${base09}30`,
|
|
226
|
-
borderRadius:
|
|
370
|
+
borderRadius: generalMatching.borderRadius,
|
|
227
371
|
},
|
|
228
372
|
// Fold placeholder
|
|
229
373
|
'.cm-foldPlaceholder': {
|
|
230
374
|
backgroundColor: 'transparent',
|
|
231
375
|
color: base03,
|
|
232
376
|
border: `1px dotted ${base09}50`,
|
|
233
|
-
borderRadius:
|
|
234
|
-
padding:
|
|
235
|
-
margin:
|
|
377
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
378
|
+
padding: generalPlaceholder.padding,
|
|
379
|
+
margin: generalPlaceholder.margin,
|
|
236
380
|
},
|
|
237
381
|
// Focus outline
|
|
238
382
|
'&.cm-focused': {
|
|
@@ -241,15 +385,15 @@ const basicLightTheme = view.EditorView.theme({
|
|
|
241
385
|
},
|
|
242
386
|
// Scrollbars
|
|
243
387
|
'& .cm-scroller::-webkit-scrollbar': {
|
|
244
|
-
width:
|
|
245
|
-
height:
|
|
388
|
+
width: generalScroller.width,
|
|
389
|
+
height: generalScroller.height,
|
|
246
390
|
},
|
|
247
391
|
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
248
392
|
background: base06,
|
|
249
393
|
},
|
|
250
394
|
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
251
395
|
backgroundColor: '#cbd5e0',
|
|
252
|
-
borderRadius:
|
|
396
|
+
borderRadius: generalScroller.borderRadius,
|
|
253
397
|
border: `3px solid ${base06}`,
|
|
254
398
|
},
|
|
255
399
|
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
@@ -357,7 +501,16 @@ const basicLight = [
|
|
|
357
501
|
basicLightTheme,
|
|
358
502
|
language.syntaxHighlighting(basicLightHighlightStyle),
|
|
359
503
|
];
|
|
504
|
+
/**
|
|
505
|
+
* Basic Light merge revert styles configuration
|
|
506
|
+
*/
|
|
507
|
+
const basicLightMergeStyles = {
|
|
508
|
+
backgroundColor: darkBackground,
|
|
509
|
+
borderColor: '#e2e8f0',
|
|
510
|
+
buttonColor: base02,
|
|
511
|
+
buttonHoverColor: '#e2e8f0',
|
|
512
|
+
};
|
|
360
513
|
|
|
514
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
361
515
|
exports.basicLight = basicLight;
|
|
362
|
-
exports.
|
|
363
|
-
exports.basicLightTheme = basicLightTheme;
|
|
516
|
+
exports.basicLightMergeStyles = basicLightMergeStyles;
|
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 Basic Light theme
|
|
10
|
-
*/
|
|
11
|
-
declare const basicLightHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Basic Light theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const basicLight: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Basic Light merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const basicLightMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, basicLight, basicLightMergeStyles };
|
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 Basic Light theme
|
|
10
|
-
*/
|
|
11
|
-
declare const basicLightHighlightStyle: HighlightStyle;
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
12
19
|
/**
|
|
13
20
|
* Combined Basic Light theme extension
|
|
14
21
|
*/
|
|
15
22
|
declare const basicLight: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Basic Light merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const basicLightMergeStyles: IMergeRevertStyles;
|
|
16
27
|
|
|
17
|
-
export {
|
|
28
|
+
export { applyMergeRevertStyles, basicLight, basicLightMergeStyles };
|
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 color palette for Basic Light theme
|
|
@@ -9,36 +109,41 @@ import { generalScroller, generalPlaceholder, generalMatching, generalTooltip, g
|
|
|
9
109
|
* Colors are organized by function with visual color blocks for quick reference
|
|
10
110
|
*/
|
|
11
111
|
// Text colors (dark shades)
|
|
12
|
-
const base00 = '#1c2434'
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
112
|
+
const base00 = '#1c2434', // deep navy - primary text (darker for better contrast)
|
|
113
|
+
base01 = '#2d3748', // dark slate - secondary text, cursor
|
|
114
|
+
base02 = '#4a5568', // medium slate - gutter text
|
|
115
|
+
base03 = '#718096', // steel blue - comments, panel text
|
|
16
116
|
// Background shades
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
117
|
+
base04 = '#edf2f750', // very light blue w/transparency - active line gutter
|
|
118
|
+
base05 = '#f7fafc', // off-white - tooltip background
|
|
119
|
+
base06 = '#f0f4f8', // snow-white - gutter background
|
|
20
120
|
// Primary accent colors (cool tones)
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
121
|
+
base07 = '#0c7792', // teal - links, braces (more saturated)
|
|
122
|
+
base08 = '#0369a1', // azure blue - numbers, constants (deeper)
|
|
123
|
+
base09 = '#2b6cb0', // royal blue - variables, parameters
|
|
124
|
+
base0A = '#1a365d', // deep navy - keywords, headings
|
|
25
125
|
// Secondary accent colors (warm and complementary)
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
126
|
+
base0B = '#c53030', // red - square brackets (more vibrant)
|
|
127
|
+
base0C = '#dd6b20', // orange - strings (warmer, more vibrant)
|
|
128
|
+
base0D = '#d69e2e', // amber - class names (more saturated)
|
|
129
|
+
base0E = '#2f855a', // green - operators (deeper, richer)
|
|
130
|
+
base0F = '#805ad5'; // purple - tag names (more vibrant)
|
|
31
131
|
// UI-specific colors
|
|
32
|
-
const invalid = '#e53e3e'
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
132
|
+
const invalid = '#e53e3e', // bright red - errors (more visible)
|
|
133
|
+
darkBackground = base06, // panel background
|
|
134
|
+
highlightBackground = '#ebf4ff40', // active line highlight (subtle blue)
|
|
135
|
+
background = '#ffffff', // editor background
|
|
136
|
+
tooltipBackground = base05, // tooltip background
|
|
137
|
+
selection = '#90cdf480', // selection background (clearer blue)
|
|
138
|
+
selectionMatch = '#63b3ed40', // selection match highlight
|
|
139
|
+
cursor = base01, // cursor color
|
|
140
|
+
activeBracketBg = '#0c779220', // active bracket background (transparent teal)
|
|
141
|
+
activeBracketBorder = base09;
|
|
142
|
+
// Diff/merge specific colors
|
|
143
|
+
const addedBackground = '#e6ffec60', // Light green with transparency for insertions
|
|
144
|
+
removedBackground = '#ffebe9a0', // Light red with transparency for deletions
|
|
145
|
+
addedText = '#24783b', // Dark green for added text
|
|
146
|
+
removedText = '#cf222e'; // Dark red for removed text
|
|
42
147
|
/**
|
|
43
148
|
* Enhanced editor theme styles for Basic Light
|
|
44
149
|
*/
|
|
@@ -149,6 +254,45 @@ const basicLightTheme = /*@__PURE__*/EditorView.theme({
|
|
|
149
254
|
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
150
255
|
color: base00,
|
|
151
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
|
+
},
|
|
152
296
|
// Tooltips and autocomplete
|
|
153
297
|
'.cm-tooltip': {
|
|
154
298
|
backgroundColor: tooltipBackground,
|
|
@@ -355,5 +499,14 @@ const basicLight = [
|
|
|
355
499
|
basicLightTheme,
|
|
356
500
|
/*@__PURE__*/syntaxHighlighting(basicLightHighlightStyle),
|
|
357
501
|
];
|
|
502
|
+
/**
|
|
503
|
+
* Basic Light merge revert styles configuration
|
|
504
|
+
*/
|
|
505
|
+
const basicLightMergeStyles = {
|
|
506
|
+
backgroundColor: darkBackground,
|
|
507
|
+
borderColor: '#e2e8f0',
|
|
508
|
+
buttonColor: base02,
|
|
509
|
+
buttonHoverColor: '#e2e8f0',
|
|
510
|
+
};
|
|
358
511
|
|
|
359
|
-
export {
|
|
512
|
+
export { applyMergeRevertStyles, basicLight, basicLightMergeStyles };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fsegurai/codemirror-theme-basic-light",
|
|
3
3
|
"description": "Basic Light 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"
|