@fsegurai/codemirror-theme-cobalt2 6.0.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.js ADDED
@@ -0,0 +1,598 @@
1
+ import { EditorView } from '@codemirror/view';
2
+ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
+ import { tags } from '@lezer/highlight';
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
+ borderRadius: '4px',
27
+ padding: '2px 10px',
28
+ };
29
+ const generalLine = {
30
+ borderRadius: '2px',
31
+ };
32
+ const generalMatching = {
33
+ borderRadius: '2px',
34
+ };
35
+ const generalPlaceholder = {
36
+ borderRadius: '4px',
37
+ padding: '0 5px',
38
+ margin: '0 2px',
39
+ };
40
+ const generalScroller = {
41
+ width: '12px',
42
+ height: '12px',
43
+ borderRadius: '6px',
44
+ };
45
+ const generalSearchField = {
46
+ borderRadius: '4px',
47
+ padding: '2px 6px',
48
+ };
49
+ const generalTooltip = {
50
+ borderRadius: '4px',
51
+ borderRadiusSelected: '3px',
52
+ lineHeight: '1.3',
53
+ padding: '4px 8px',
54
+ paddingRight: '8px',
55
+ };
56
+ /**
57
+ * Function to apply merge revert styles for a theme
58
+ * @param styles Styles for the merge revert buttons
59
+ * @param styles.backgroundColor Background color of the revert area
60
+ * @param styles.borderColor Border color of the revert area
61
+ * @param styles.buttonColor Color of the revert buttons
62
+ * @param styles.buttonHoverColor Hover color of the revert buttons
63
+ */
64
+ function applyMergeRevertStyles(styles) {
65
+ // Create a stylesheet
66
+ const styleEl = document.createElement('style');
67
+ styleEl.id = 'cm-merge-revert-styles';
68
+ // Define CSS with the theme-specific values
69
+ styleEl.textContent = `
70
+ .cm-merge-revert {
71
+ display: flex;
72
+ flex-direction: column;
73
+ align-items: center;
74
+ justify-content: flex-start;
75
+ padding: 4px;
76
+ background-color: ${styles.backgroundColor};
77
+ border-left: 1px solid ${styles.borderColor};
78
+ border-right: 1px solid ${styles.borderColor};
79
+ width: 32px;
80
+ }
81
+
82
+ .cm-merge-revert button {
83
+ width: 100%;
84
+ height: auto;
85
+ background-color: transparent;
86
+ border: none;
87
+ color: ${styles.buttonColor};
88
+ cursor: pointer;
89
+ margin: 0 auto;
90
+ font-size: 20px;
91
+ }
92
+
93
+ .cm-merge-revert button:hover {
94
+ background-color: ${styles.buttonHoverColor};
95
+ }
96
+ `;
97
+ // Remove any existing merge styles
98
+ const existingStyle = document.getElementById('cm-merge-revert-styles');
99
+ if (existingStyle)
100
+ existingStyle.remove();
101
+ // Add the new styles
102
+ document.head.appendChild(styleEl);
103
+ }
104
+
105
+ /**
106
+ * Cobalt2 theme color palette
107
+ * ---------------------------------------------------------------------
108
+ * Colors are organized by function with visual color blocks for quick reference
109
+ */
110
+ // Base colors from the original Cobalt2 theme (exact match)
111
+ const background = '#193549', // Main editor background
112
+ foreground = '#fff', // Main text color (exact from original)
113
+ cursor = '#ffc600', // Cursor color (bright yellow)
114
+ selection = '#0050A4', // Selection background
115
+ selectionInactive = '#003b8b', // Inactive selection
116
+ selectionHighlight = '#0050A480', // Selection highlights (with transparency)
117
+ lineHighlight = '#99eeff33', // The current line highlights
118
+ // UI backgrounds (exact from original)
119
+ darkBackground = '#122738', // Sidebar, panels, gutter
120
+ panelBackground = '#15232d', // Panel background
121
+ gutterBackground = '#12273866', // Gutter background with transparency
122
+ // Searches and finds colors (exact from original)
123
+ findMatchCurrent = '#FF720066', // Currently found item
124
+ findMatchOther = '#CAD40F66', // Other found items
125
+ hoverHighlight = '#ffc60033', // Hover highlight
126
+ // Word highlights (exact from original)
127
+ wordHighlight = '#ffffff21', // Word highlight background
128
+ // Accent colors from tokenColors (exact from original)
129
+ blue = '#0088ff', // Comments, links
130
+ cyan = '#80fcff', // Special keywords, module exports
131
+ lightBlue = '#9effff', // Meta, variables, properties
132
+ yellow = '#ffc600', // Entities, storage, functions
133
+ orange = '#ff9d00', // Keywords, support functions
134
+ pink = '#ff628c', // Constants, deleted text
135
+ hotPink = '#fb94ff', // Language variables, storage.type.function
136
+ lightPink = '#FF68B8', // Types, interfaces (semantic)
137
+ green = '#3ad900', // Template strings
138
+ lightGreen = '#a5ff90', // Regular strings, markup inserted
139
+ red = '#f44542', // Invalid, errors
140
+ errorRed = '#A22929', // Error foreground
141
+ // Additional colors from the original palette
142
+ gray = '#aaa', // Comments, secondary text
143
+ lightGray = '#e1efff', // Punctuation, variables
144
+ darkGray = '#0d3a58', // Borders, inactive elements
145
+ parameterYellow = '#ffee80', // Parameters, template expressions
146
+ stringQuotes = '#92fc79', // String quotes (special)
147
+ supportTeal = '#80ffbb'; // Support classes, TypeScript types
148
+ // Diff/merge specific colors (exact from original)
149
+ const addedBackground = '#3ad90033', // Light green with transparency for insertions
150
+ removedBackground = '#ee3a4333', // Light red with transparency for deletions
151
+ addedText = lightGreen, // Green for added text
152
+ removedText = pink; // Pink for removed text
153
+ /**
154
+ * Enhanced editor theme styles for Cobalt2
155
+ */
156
+ const cobalt2Theme = /*@__PURE__*/EditorView.theme({
157
+ // Base editor styles
158
+ '&': {
159
+ color: foreground,
160
+ backgroundColor: background,
161
+ fontSize: generalContent.fontSize,
162
+ fontFamily: generalContent.fontFamily,
163
+ },
164
+ // Content and cursor
165
+ '.cm-content': {
166
+ caretColor: cursor,
167
+ lineHeight: generalContent.lineHeight,
168
+ },
169
+ '.cm-cursor, .cm-dropCursor': {
170
+ borderLeftColor: cursor,
171
+ borderLeftWidth: generalCursor.borderLeftWidth,
172
+ },
173
+ '.cm-fat-cursor': {
174
+ backgroundColor: `${cursor}99`,
175
+ color: background,
176
+ },
177
+ // Selection
178
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
179
+ backgroundColor: selection,
180
+ color: foreground,
181
+ },
182
+ // Make sure selection appears above active line
183
+ '.cm-selectionLayer': {
184
+ zIndex: 100,
185
+ },
186
+ '.cm-activeLine .cm-selectionBackground': {
187
+ backgroundColor: `${selection}DD`,
188
+ border: `1px solid ${cyan}40`,
189
+ borderRadius: '2px',
190
+ },
191
+ '&.cm-focused .cm-activeLine .cm-selectionBackground': {
192
+ backgroundColor: `${selection}FF`,
193
+ border: `1px solid ${cyan}60`,
194
+ boxShadow: `0 0 3px ${cyan}30`,
195
+ },
196
+ '&:not(.cm-focused) .cm-selectionBackground': {
197
+ backgroundColor: selectionInactive,
198
+ },
199
+ '&:not(.cm-focused) .cm-activeLine .cm-selectionBackground': {
200
+ backgroundColor: `${selectionInactive}CC`,
201
+ border: `1px solid ${darkGray}80`,
202
+ },
203
+ // Search functionality
204
+ '.cm-searchMatch': {
205
+ backgroundColor: findMatchCurrent,
206
+ outline: `1px solid ${orange}`,
207
+ color: foreground,
208
+ borderRadius: generalSearchField.borderRadius,
209
+ },
210
+ '.cm-searchMatch.cm-searchMatch-selected': {
211
+ backgroundColor: findMatchOther,
212
+ color: foreground,
213
+ },
214
+ '.cm-search.cm-panel.cm-textfield': {
215
+ color: yellow,
216
+ backgroundColor: background,
217
+ border: `1px solid ${darkGray}`,
218
+ borderRadius: generalSearchField.borderRadius,
219
+ padding: generalSearchField.padding,
220
+ },
221
+ // Panels
222
+ '.cm-panels': {
223
+ backgroundColor: darkBackground,
224
+ color: gray,
225
+ borderRadius: '4px',
226
+ },
227
+ '.cm-panels.cm-panels-top': {
228
+ borderBottom: `1px solid ${yellow}`,
229
+ },
230
+ '.cm-panels.cm-panels-bottom': {
231
+ borderTop: `1px solid ${yellow}`,
232
+ },
233
+ '.cm-panel button': {
234
+ backgroundColor: blue,
235
+ color: foreground,
236
+ border: `1px solid ${darkGray}`,
237
+ borderRadius: generalPanel.borderRadius,
238
+ padding: generalPanel.padding,
239
+ },
240
+ '.cm-panel button:hover': {
241
+ backgroundColor: orange,
242
+ color: foreground,
243
+ },
244
+ // Line highlighting
245
+ '.cm-activeLine': {
246
+ backgroundColor: lineHighlight,
247
+ borderRadius: generalLine.borderRadius,
248
+ },
249
+ // Gutters
250
+ '.cm-gutters': {
251
+ backgroundColor: gutterBackground,
252
+ color: gray,
253
+ border: generalGutter.border,
254
+ borderRight: `1px solid ${darkGray}`,
255
+ paddingRight: generalGutter.paddingRight,
256
+ },
257
+ '.cm-activeLineGutter': {
258
+ backgroundColor: 'transparent',
259
+ color: foreground,
260
+ fontWeight: generalGutter.fontWeight,
261
+ },
262
+ '.cm-lineNumbers': {
263
+ fontSize: generalGutter.fontSize,
264
+ color: gray,
265
+ },
266
+ '.cm-foldGutter': {
267
+ fontSize: generalGutter.fontSize,
268
+ },
269
+ '.cm-foldGutter .cm-gutterElement': {
270
+ color: gray,
271
+ cursor: 'pointer',
272
+ },
273
+ '.cm-foldGutter .cm-gutterElement:hover': {
274
+ color: yellow,
275
+ },
276
+ // Diff/Merge View Styles
277
+ // Inserted/Added Content
278
+ '.cm-insertedLine': {
279
+ textDecoration: generalDiff.insertedTextDecoration,
280
+ backgroundColor: addedBackground,
281
+ color: addedText,
282
+ padding: generalDiff.insertedLinePadding,
283
+ borderRadius: generalDiff.borderRadious,
284
+ },
285
+ 'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
286
+ textDecoration: generalDiff.insertedTextDecoration,
287
+ backgroundColor: `${addedBackground} !important`,
288
+ color: addedText,
289
+ padding: generalDiff.insertedLinePadding,
290
+ borderRadius: generalDiff.borderRadious,
291
+ border: `1px solid ${addedText}30`,
292
+ },
293
+ 'ins.cm-insertedLine .cm-changedText': {
294
+ background: 'transparent !important',
295
+ },
296
+ // Deleted/Removed Content
297
+ '.cm-deletedLine': {
298
+ textDecoration: generalDiff.deletedTextDecoration,
299
+ backgroundColor: removedBackground,
300
+ color: removedText,
301
+ padding: generalDiff.insertedLinePadding,
302
+ borderRadius: generalDiff.borderRadious,
303
+ },
304
+ 'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
305
+ textDecoration: generalDiff.deletedTextDecoration,
306
+ backgroundColor: `${removedBackground} !important`,
307
+ color: removedText,
308
+ padding: generalDiff.insertedLinePadding,
309
+ borderRadius: generalDiff.borderRadious,
310
+ border: `1px solid ${removedText}30`,
311
+ },
312
+ 'del .cm-deletedText, del .cm-changedText': {
313
+ background: 'transparent !important',
314
+ },
315
+ // Tooltips and autocomplete
316
+ '.cm-tooltip': {
317
+ backgroundColor: panelBackground,
318
+ border: `1px solid ${darkGray}`,
319
+ borderRadius: generalTooltip.borderRadius,
320
+ padding: generalTooltip.padding,
321
+ boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
322
+ color: gray, // Tooltip text color from the original
323
+ },
324
+ '.cm-tooltip-autocomplete': {
325
+ '& > ul': {
326
+ backgroundColor: panelBackground,
327
+ border: 'none',
328
+ },
329
+ '& > ul > li': {
330
+ padding: generalTooltip.padding,
331
+ lineHeight: generalTooltip.lineHeight,
332
+ color: gray,
333
+ },
334
+ '& > ul > li[aria-selected]': {
335
+ backgroundColor: background,
336
+ color: yellow,
337
+ borderRadius: generalTooltip.borderRadiusSelected,
338
+ },
339
+ '& > ul > li > span.cm-completionIcon': {
340
+ color: blue,
341
+ paddingRight: generalTooltip.paddingRight,
342
+ },
343
+ '& > ul > li > span.cm-completionDetail': {
344
+ color: gray,
345
+ fontStyle: 'italic',
346
+ },
347
+ },
348
+ // Diagnostics styling
349
+ '.cm-diagnostic': {
350
+ '&-error': {
351
+ borderLeft: `3px solid ${errorRed}`,
352
+ },
353
+ '&-warning': {
354
+ borderLeft: `3px solid ${yellow}`,
355
+ },
356
+ '&-info': {
357
+ borderLeft: `3px solid ${blue}`,
358
+ },
359
+ },
360
+ '.cm-lintPoint-error': {
361
+ borderBottom: `2px wavy ${errorRed}`,
362
+ },
363
+ '.cm-lintPoint-warning': {
364
+ borderBottom: `2px wavy ${yellow}`,
365
+ },
366
+ // Matching brackets
367
+ '.cm-matchingBracket': {
368
+ backgroundColor: darkGray,
369
+ outline: `1px solid ${cursor}80`,
370
+ borderRadius: generalMatching.borderRadius,
371
+ },
372
+ '.cm-nonmatchingBracket': {
373
+ backgroundColor: `${errorRed}20`,
374
+ outline: `1px solid ${errorRed}`,
375
+ borderRadius: generalMatching.borderRadius,
376
+ },
377
+ // Selection matches
378
+ '.cm-selectionMatch': {
379
+ backgroundColor: selectionHighlight,
380
+ borderRadius: generalMatching.borderRadius,
381
+ },
382
+ '.cm-hoverHighlight': {
383
+ backgroundColor: hoverHighlight,
384
+ },
385
+ '.cm-wordHighlight': {
386
+ backgroundColor: wordHighlight,
387
+ borderRadius: generalMatching.borderRadius,
388
+ },
389
+ // Fold placeholder
390
+ '.cm-foldPlaceholder': {
391
+ backgroundColor: 'transparent',
392
+ color: gray,
393
+ border: `1px dotted ${blue}50`,
394
+ borderRadius: generalPlaceholder.borderRadius,
395
+ padding: generalPlaceholder.padding,
396
+ margin: generalPlaceholder.margin,
397
+ },
398
+ // Focus outline
399
+ '&.cm-focused': {
400
+ outline: 'none',
401
+ },
402
+ // Scrollbars - exact from original
403
+ '& .cm-scroller::-webkit-scrollbar': {
404
+ width: generalScroller.width,
405
+ height: generalScroller.height,
406
+ },
407
+ '& .cm-scroller::-webkit-scrollbar-track': {
408
+ background: darkBackground,
409
+ },
410
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
411
+ backgroundColor: '#406179cc',
412
+ borderRadius: generalScroller.borderRadius,
413
+ border: `3px solid ${darkBackground}`,
414
+ },
415
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
416
+ backgroundColor: '#437da3cc',
417
+ },
418
+ // Ghost text
419
+ '.cm-ghostText': {
420
+ opacity: '0.5',
421
+ color: gray,
422
+ },
423
+ // Whitespace characters
424
+ '.cm-specialChar': {
425
+ color: '#ffffff52',
426
+ },
427
+ // Indent guides
428
+ '.cm-indentGuide': {
429
+ borderLeft: '1px solid #3B5364',
430
+ },
431
+ }, { dark: true });
432
+ /**
433
+ * Enhanced syntax highlighting for the Cobalt2 theme
434
+ */
435
+ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
436
+ // Keywords and control flow
437
+ { tag: tags.keyword, color: orange },
438
+ { tag: tags.controlKeyword, color: orange },
439
+ { tag: tags.operatorKeyword, color: orange },
440
+ { tag: tags.moduleKeyword, color: cyan },
441
+ { tag: tags.definitionKeyword, color: hotPink },
442
+ // Variables - Enhanced for better distinction
443
+ { tag: tags.variableName, color: foreground },
444
+ { tag: /*@__PURE__*/tags.definition(tags.variableName), color: foreground },
445
+ { tag: /*@__PURE__*/tags.local(tags.variableName), color: foreground },
446
+ // Classes and types
447
+ { tag: tags.typeName, color: lightPink, fontStyle: 'italic' },
448
+ { tag: tags.className, color: lightPink, fontStyle: 'italic' },
449
+ { tag: tags.namespace, color: lightPink, fontStyle: 'italic' },
450
+ { tag: tags.macroName, color: lightPink, fontStyle: 'italic' },
451
+ { tag: /*@__PURE__*/tags.standard(tags.tagName), color: supportTeal },
452
+ { tag: /*@__PURE__*/tags.standard(tags.propertyName), color: supportTeal },
453
+ // Operators and punctuation
454
+ { tag: tags.operator, color: lightGray },
455
+ { tag: tags.derefOperator, color: lightGray },
456
+ { tag: tags.arithmeticOperator, color: lightGray },
457
+ { tag: tags.logicOperator, color: lightGray },
458
+ { tag: tags.bitwiseOperator, color: lightGray },
459
+ { tag: tags.compareOperator, color: lightGray },
460
+ { tag: tags.updateOperator, color: lightGray },
461
+ { tag: tags.punctuation, color: lightGray },
462
+ { tag: tags.bracket, color: lightGray },
463
+ { tag: tags.brace, color: lightGray },
464
+ { tag: tags.squareBracket, color: lightGray },
465
+ { tag: tags.paren, color: yellow },
466
+ { tag: tags.angleBracket, color: lightGray },
467
+ { tag: [tags.operator, tags.punctuation], color: lightGray },
468
+ // Functions
469
+ { tag: /*@__PURE__*/tags.function(tags.variableName), color: yellow },
470
+ { tag: /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName)), color: yellow },
471
+ { tag: /*@__PURE__*/tags.function(tags.propertyName), color: yellow },
472
+ { tag: [tags.moduleKeyword, /*@__PURE__*/tags.special(tags.keyword)], color: cyan },
473
+ { tag: [tags.definitionKeyword], color: hotPink },
474
+ // Comments
475
+ { tag: tags.comment, color: blue, fontStyle: 'italic' },
476
+ { tag: tags.docComment, color: blue, fontStyle: 'italic' },
477
+ { tag: tags.lineComment, color: blue, fontStyle: 'italic' },
478
+ { tag: tags.blockComment, color: blue, fontStyle: 'italic' },
479
+ // Storage and function keywords
480
+ { tag: tags.modifier, color: yellow, fontStyle: 'italic' },
481
+ // Special variables and exports
482
+ { tag: /*@__PURE__*/tags.special(tags.variableName), color: cyan },
483
+ // Properties
484
+ { tag: tags.propertyName, color: lightBlue },
485
+ { tag: /*@__PURE__*/tags.definition(tags.propertyName), color: lightBlue },
486
+ // Constants
487
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: pink },
488
+ { tag: /*@__PURE__*/tags.standard(tags.name), color: pink },
489
+ { tag: tags.number, color: pink },
490
+ { tag: tags.integer, color: pink },
491
+ { tag: tags.float, color: pink },
492
+ { tag: tags.bool, color: pink },
493
+ { tag: tags.atom, color: pink },
494
+ { tag: tags.null, color: pink },
495
+ // Strings
496
+ { tag: tags.string, color: lightGreen },
497
+ { tag: /*@__PURE__*/tags.special(tags.string), color: green },
498
+ { tag: tags.regexp, color: lightGreen },
499
+ // String quotes
500
+ { tag: tags.quote, color: stringQuotes },
501
+ // Parameters
502
+ { tag: /*@__PURE__*/tags.definition(/*@__PURE__*/tags.function(tags.variableName)), color: parameterYellow },
503
+ // HTML/XML elements
504
+ { tag: tags.tagName, color: lightBlue },
505
+ { tag: tags.attributeName, color: yellow, fontStyle: 'italic' },
506
+ { tag: tags.attributeValue, color: lightGreen },
507
+ // Special language constructs
508
+ { tag: tags.self, color: hotPink },
509
+ // Meta and annotations
510
+ { tag: tags.meta, color: lightBlue },
511
+ { tag: tags.annotation, color: yellow, fontStyle: 'italic' },
512
+ { tag: tags.processingInstruction, color: yellow },
513
+ { tag: tags.heading, color: yellow, fontWeight: 'bold' },
514
+ { tag: tags.heading1, color: yellow, fontWeight: 'bold' },
515
+ { tag: tags.heading2, color: yellow, fontWeight: 'bold' },
516
+ { tag: tags.heading3, color: yellow, fontWeight: 'bold' },
517
+ { tag: tags.heading4, color: yellow, fontWeight: 'bold' },
518
+ { tag: tags.heading5, color: yellow, fontWeight: 'bold' },
519
+ { tag: tags.heading6, color: yellow, fontWeight: 'bold' },
520
+ { tag: tags.contentSeparator, color: yellow },
521
+ { tag: tags.strong, color: lightBlue, fontWeight: 'bold' },
522
+ { tag: tags.emphasis, color: lightBlue, fontStyle: 'italic' },
523
+ { tag: tags.list, color: yellow },
524
+ { tag: tags.quote, color: lightBlue, fontStyle: 'italic' },
525
+ // Code blocks and inline code - Enhanced styling
526
+ { tag: tags.monospace, color: lightBlue },
527
+ { tag: /*@__PURE__*/tags.special(tags.monospace), color: green },
528
+ { tag: tags.strikethrough, color: gray, textDecoration: 'line-through' },
529
+ // Links and URLs
530
+ { tag: tags.link, color: blue },
531
+ { tag: tags.url, color: lightBlue },
532
+ // Special states
533
+ { tag: tags.invalid, color: red },
534
+ { tag: tags.deleted, color: pink },
535
+ { tag: tags.inserted, color: lightGreen },
536
+ { tag: tags.changed, color: yellow },
537
+ // Module system - exports, require, module should be cyan
538
+ { tag: /*@__PURE__*/tags.special(tags.keyword), color: cyan }, // Special keywords like exports
539
+ // Function declarations and expressions - function keyword should be magenta
540
+ { tag: tags.definitionKeyword, color: hotPink }, // function, class, etc.
541
+ // Method names and function assignments - yellow
542
+ { tag: /*@__PURE__*/tags.function(tags.propertyName), color: yellow }, // obj.method, exports.functionName
543
+ // Arrow functions and anonymous functions
544
+ { tag: /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName)), color: yellow },
545
+ // Object property access - cyan for special objects like exports
546
+ { tag: /*@__PURE__*/tags.special(tags.propertyName), color: cyan }, // exports.something
547
+ // Language-specific: CSS
548
+ { tag: tags.unit, color: parameterYellow }, // CSS units
549
+ // Enhanced code block syntax highlighting for better JavaScript support
550
+ // ====================================================================
551
+ // JavaScript/TypeScript keywords in code blocks
552
+ { tag: [tags.controlKeyword, tags.keyword], color: orange }, // return, if, else, etc.
553
+ // Variables in code blocks - white for better readability
554
+ { tag: [tags.variableName, /*@__PURE__*/tags.local(tags.variableName)], color: foreground },
555
+ // Functions in code blocks - yellow
556
+ {
557
+ tag: [/*@__PURE__*/tags.function(tags.variableName), /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName))],
558
+ color: yellow,
559
+ },
560
+ // Strings in code blocks
561
+ { tag: [tags.string, /*@__PURE__*/tags.special(tags.string)], color: lightGreen },
562
+ // Numbers in code blocks
563
+ { tag: [tags.number, tags.integer, tags.float], color: pink },
564
+ // Comments in code blocks
565
+ {
566
+ tag: [tags.comment, tags.lineComment, tags.blockComment],
567
+ color: blue,
568
+ fontStyle: 'italic',
569
+ },
570
+ // HTML/XML in code blocks
571
+ { tag: [tags.tagName, tags.angleBracket], color: lightBlue },
572
+ { tag: [tags.attributeName], color: yellow, fontStyle: 'italic' },
573
+ { tag: [tags.attributeValue], color: lightGreen },
574
+ { tag: [tags.propertyName], color: lightBlue },
575
+ { tag: [tags.className], color: lightPink, fontStyle: 'italic' },
576
+ { tag: [/*@__PURE__*/tags.standard(tags.propertyName)], color: supportTeal },
577
+ // Entity names
578
+ { tag: tags.labelName, color: yellow },
579
+ { tag: tags.escape, color: yellow },
580
+ ]);
581
+ /**
582
+ * Combined Cobalt2 theme extension
583
+ */
584
+ const cobalt2 = [
585
+ cobalt2Theme,
586
+ /*@__PURE__*/syntaxHighlighting(cobalt2HighlightStyle),
587
+ ];
588
+ /**
589
+ * Cobalt2 merge revert styles configuration
590
+ */
591
+ const cobalt2MergeStyles = {
592
+ backgroundColor: panelBackground,
593
+ borderColor: darkGray,
594
+ buttonColor: gray,
595
+ buttonHoverColor: darkGray,
596
+ };
597
+
598
+ export { applyMergeRevertStyles, cobalt2, cobalt2MergeStyles };
package/package.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "name": "@fsegurai/codemirror-theme-cobalt2",
3
+ "description": "Cobalt2 theme for the CodeMirror editor",
4
+ "version": "6.0.0",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "exports": {
8
+ "import": "./dist/index.js",
9
+ "require": "./dist/index.cjs"
10
+ },
11
+ "types": "dist/index.d.ts",
12
+ "module": "dist/index.js",
13
+ "sideEffects": false,
14
+ "scripts": {
15
+ "test": "cm-runtests",
16
+ "prepare": "cm-buildhelper src/index.ts"
17
+ },
18
+ "keywords": [
19
+ "editor",
20
+ "diff",
21
+ "diff-editor",
22
+ "code",
23
+ "codemirror",
24
+ "theme",
25
+ "themes",
26
+ "syntax",
27
+ "highlight",
28
+ "cobalt2"
29
+ ],
30
+ "author": {
31
+ "name": "Fabián Segura",
32
+ "url": "https://www.fsegurai.com/"
33
+ },
34
+ "license": "MIT",
35
+ "peerDependencies": {
36
+ "@lezer/highlight": "^1.0.0",
37
+ "@codemirror/language": "^6.0.0",
38
+ "@codemirror/state": "^6.0.0",
39
+ "@codemirror/view": "^6.0.0"
40
+ },
41
+ "devDependencies": {
42
+ "@codemirror/buildhelper": "^1.0.2"
43
+ },
44
+ "repository": {
45
+ "type": "git",
46
+ "url": "git+https://github.com/fsegurai/codemirror-themes.git"
47
+ },
48
+ "bugs": {
49
+ "url": "https://github.com/fsegurai/codemirror-themes/issues"
50
+ },
51
+ "homepage": "https://github.com/fsegurai/codemirror-themes#readme"
52
+ }