@fsegurai/codemirror-theme-catppuccin-mocha 6.0.0 → 6.0.1

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 fsegurai
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <p align="center">
2
- <img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.png">
2
+ <img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.svg">
3
3
  </p>
4
4
 
5
5
  <p align="center">
@@ -31,6 +31,7 @@
31
31
  - [Installation](#installation)
32
32
  - [@fsegurai/codemirror-theme-catppuccin-mocha](#@fsegurai/codemirror-theme-catppuccin-mocha)
33
33
  - [Using Theme](#using-theme)
34
+ - [More Resources](#more-resources)
34
35
  - [Available Themes](#available-themes)
35
36
  - [Demo Application](#demo-application)
36
37
  - [License](#license)
@@ -89,6 +90,7 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
89
90
  | High Contrast Light | [@fsegurai/codemirror-theme-high-contrast-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-high-contrast-light) |
90
91
  | Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-material-dark) |
91
92
  | Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-material-light) |
93
+ | Material Ocean | [@fsegurai/codemirror-theme-material-ocean](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-ocean) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-material-ocean) |
92
94
  | Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-monokai) |
93
95
  | Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-nord) |
94
96
  | Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-palenight) |
package/dist/index.cjs CHANGED
@@ -17,7 +17,7 @@ const generalDiff = {
17
17
  insertedTextDecoration: 'none',
18
18
  deletedTextDecoration: 'line-through',
19
19
  insertedLinePadding: '1px 3px',
20
- borderRadious: '3px'};
20
+ borderRadius: '3px'};
21
21
  const generalGutter = {
22
22
  border: 'none',
23
23
  paddingRight: '8px',
@@ -243,14 +243,14 @@ const catppuccinMochaTheme = view.EditorView.theme({
243
243
  backgroundColor: addedBackground,
244
244
  color: addedText,
245
245
  padding: generalDiff.insertedLinePadding,
246
- borderRadius: generalDiff.borderRadious,
246
+ borderRadius: generalDiff.borderRadius,
247
247
  },
248
248
  'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
249
249
  textDecoration: generalDiff.insertedTextDecoration,
250
250
  backgroundColor: `${addedBackground} !important`,
251
251
  color: addedText,
252
252
  padding: generalDiff.insertedLinePadding,
253
- borderRadius: generalDiff.borderRadious,
253
+ borderRadius: generalDiff.borderRadius,
254
254
  border: `1px solid ${addedText}40`,
255
255
  },
256
256
  'ins.cm-insertedLine .cm-changedText': {
@@ -261,14 +261,14 @@ const catppuccinMochaTheme = view.EditorView.theme({
261
261
  backgroundColor: removedBackground,
262
262
  color: removedText,
263
263
  padding: generalDiff.insertedLinePadding,
264
- borderRadius: generalDiff.borderRadious,
264
+ borderRadius: generalDiff.borderRadius,
265
265
  },
266
266
  'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
267
267
  textDecoration: generalDiff.deletedTextDecoration,
268
268
  backgroundColor: `${removedBackground} !important`,
269
269
  color: removedText,
270
270
  padding: generalDiff.insertedLinePadding,
271
- borderRadius: generalDiff.borderRadious,
271
+ borderRadius: generalDiff.borderRadius,
272
272
  border: `1px solid ${removedText}40`,
273
273
  },
274
274
  'del .cm-deletedText, del .cm-changedText': {
package/dist/index.js CHANGED
@@ -15,7 +15,7 @@ const generalDiff = {
15
15
  insertedTextDecoration: 'none',
16
16
  deletedTextDecoration: 'line-through',
17
17
  insertedLinePadding: '1px 3px',
18
- borderRadious: '3px'};
18
+ borderRadius: '3px'};
19
19
  const generalGutter = {
20
20
  border: 'none',
21
21
  paddingRight: '8px',
@@ -241,14 +241,14 @@ const catppuccinMochaTheme = /*@__PURE__*/EditorView.theme({
241
241
  backgroundColor: addedBackground,
242
242
  color: addedText,
243
243
  padding: generalDiff.insertedLinePadding,
244
- borderRadius: generalDiff.borderRadious,
244
+ borderRadius: generalDiff.borderRadius,
245
245
  },
246
246
  'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
247
247
  textDecoration: generalDiff.insertedTextDecoration,
248
248
  backgroundColor: `${addedBackground} !important`,
249
249
  color: addedText,
250
250
  padding: generalDiff.insertedLinePadding,
251
- borderRadius: generalDiff.borderRadious,
251
+ borderRadius: generalDiff.borderRadius,
252
252
  border: `1px solid ${addedText}40`,
253
253
  },
254
254
  'ins.cm-insertedLine .cm-changedText': {
@@ -259,14 +259,14 @@ const catppuccinMochaTheme = /*@__PURE__*/EditorView.theme({
259
259
  backgroundColor: removedBackground,
260
260
  color: removedText,
261
261
  padding: generalDiff.insertedLinePadding,
262
- borderRadius: generalDiff.borderRadious,
262
+ borderRadius: generalDiff.borderRadius,
263
263
  },
264
264
  'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
265
265
  textDecoration: generalDiff.deletedTextDecoration,
266
266
  backgroundColor: `${removedBackground} !important`,
267
267
  color: removedText,
268
268
  padding: generalDiff.insertedLinePadding,
269
- borderRadius: generalDiff.borderRadious,
269
+ borderRadius: generalDiff.borderRadius,
270
270
  border: `1px solid ${removedText}40`,
271
271
  },
272
272
  'del .cm-deletedText, del .cm-changedText': {
package/package.json CHANGED
@@ -1,20 +1,16 @@
1
1
  {
2
2
  "name": "@fsegurai/codemirror-theme-catppuccin-mocha",
3
+ "version": "6.0.1",
3
4
  "description": "Catppuccin Mocha theme for the CodeMirror editor",
4
- "version": "6.0.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
+ "module": "dist/index.js",
8
+ "types": "dist/index.d.ts",
7
9
  "exports": {
8
10
  "import": "./dist/index.js",
9
11
  "require": "./dist/index.cjs"
10
12
  },
11
- "types": "dist/index.d.ts",
12
- "module": "dist/index.js",
13
13
  "sideEffects": false,
14
- "scripts": {
15
- "test": "cm-runtests",
16
- "prepare": "cm-buildhelper src/index.ts"
17
- },
18
14
  "keywords": [
19
15
  "editor",
20
16
  "diff",
@@ -36,6 +32,10 @@
36
32
  "url": "https://www.fsegurai.com/"
37
33
  },
38
34
  "license": "MIT",
35
+ "scripts": {
36
+ "pkg:build": "cm-buildhelper src/index.ts",
37
+ "pkg:test": "cm-runtests"
38
+ },
39
39
  "peerDependencies": {
40
40
  "@lezer/highlight": "^1.0.0",
41
41
  "@codemirror/language": "^6.0.0",
package/src/index.ts DELETED
@@ -1,472 +0,0 @@
1
- import { EditorView } from '@codemirror/view';
2
- import { Extension } from '@codemirror/state';
3
- import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
4
- import { tags as t } from '@lezer/highlight';
5
-
6
- import {
7
- applyMergeRevertStyles,
8
- generalContent,
9
- generalCursor,
10
- generalDiff,
11
- generalGutter,
12
- generalLine,
13
- generalMatching,
14
- generalPanel,
15
- generalPlaceholder,
16
- generalScroller,
17
- generalSearchField,
18
- generalTooltip,
19
- IMergeRevertStyles,
20
- } from './utils';
21
-
22
- /**
23
- * Catppuccin Mocha theme color definitions
24
- * ----------------------------------------
25
- * A soothing pastel theme with warm tones
26
- */
27
-
28
- // Base colors (Mocha variant)
29
- const base00 = '#1e1e2e', // Background - dark navy
30
- base01 = '#313244', // Selection background
31
- base02 = '#45475a', // Comments
32
- base03 = '#585b70', // Dark grey
33
- base04 = '#cdd6f4', // Foreground - light blue
34
- base05 = '#f5e0dc', // Light foreground
35
-
36
- // Catppuccin Mocha colors
37
- rosewater = '#f5e0dc',
38
- flamingo = '#f2cdcd',
39
- pink = '#f5c2e7',
40
- mauve = '#cba6f7',
41
- red = '#f38ba8',
42
- maroon = '#eba0ac',
43
- peach = '#fab387',
44
- yellow = '#f9e2af',
45
- green = '#a6e3a1',
46
- teal = '#94e2d5',
47
- sky = '#89dceb',
48
- sapphire = '#74c7ec',
49
- blue = '#89b4fa',
50
- lavender = '#b4befe';
51
-
52
- // UI specific colors
53
- const invalid = '#f38ba8',
54
- darkBackground = '#181825',
55
- background = base00,
56
- tooltipBackground = base01,
57
- selectionMatch = '#45475a80',
58
- cursor = rosewater,
59
- activeBracketBg = '#45475a55',
60
- activeBracketBorder = lavender,
61
- diagnosticWarning = yellow,
62
- linkColor = blue,
63
- visitedLinkColor = mauve;
64
-
65
- // Diff/merge specific colors
66
- const addedBackground = '#a6e3a140',
67
- removedBackground = '#f38ba840',
68
- addedText = green,
69
- removedText = red;
70
-
71
- /**
72
- * Enhanced editor theme styles for Catppuccin Mocha
73
- */
74
- const catppuccinMochaTheme = EditorView.theme(
75
- {
76
- // Base editor styles
77
- '&': {
78
- color: base04,
79
- backgroundColor: background,
80
- fontSize: generalContent.fontSize,
81
- fontFamily: generalContent.fontFamily,
82
- },
83
-
84
- // Content and cursor
85
- '.cm-content': {
86
- caretColor: cursor,
87
- lineHeight: generalContent.lineHeight,
88
- },
89
- '.cm-cursor, .cm-dropCursor': {
90
- borderLeftColor: cursor,
91
- borderLeftWidth: generalCursor.borderLeftWidth,
92
- },
93
- '.cm-fat-cursor': {
94
- backgroundColor: `${cursor}99`,
95
- color: background,
96
- },
97
-
98
- // Selection
99
- '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
100
- {
101
- backgroundColor: '#585b7080',
102
- outline: `1px solid ${mauve}`,
103
- },
104
-
105
- // Make sure selection appears above active line
106
- '.cm-selectionLayer': {
107
- zIndex: 100,
108
- },
109
-
110
- // Search functionality
111
- '.cm-searchMatch': {
112
- backgroundColor: '#89b4fa40',
113
- outline: `1px solid ${sapphire}`,
114
- color: base04,
115
- borderRadius: generalSearchField.borderRadius,
116
-
117
- '& span': {
118
- color: base04,
119
- },
120
- },
121
- '.cm-searchMatch.cm-searchMatch-selected': {
122
- backgroundColor: blue,
123
- color: base00,
124
- padding: generalSearchField.padding,
125
-
126
- '& span': {
127
- color: base00,
128
- },
129
- },
130
- '.cm-search.cm-panel.cm-textfield': {
131
- color: base04,
132
- borderRadius: generalSearchField.borderRadius,
133
- padding: generalSearchField.padding,
134
- },
135
-
136
- // Panels
137
- '.cm-panels': {
138
- backgroundColor: darkBackground,
139
- color: base04,
140
- borderRadius: '4px',
141
- },
142
- '.cm-panels.cm-panels-top': {
143
- borderBottom: `1px solid ${base02}`,
144
- },
145
- '.cm-panels.cm-panels-bottom': {
146
- borderTop: `1px solid ${base02}`,
147
- },
148
- '.cm-panel button': {
149
- backgroundColor: tooltipBackground,
150
- color: base04,
151
- border: generalPanel.border,
152
- borderRadius: generalPanel.borderRadius,
153
- padding: generalPanel.padding,
154
- },
155
- '.cm-panel button:hover': {
156
- backgroundColor: base01,
157
- },
158
-
159
- // Line highlighting
160
- '.cm-activeLine': {
161
- backgroundColor: '#3a3a5266',
162
- borderRadius: generalLine.borderRadius,
163
- borderLeft: `2px solid ${lavender}`,
164
- zIndex: 1,
165
- },
166
-
167
- // Gutters
168
- '.cm-gutters': {
169
- backgroundColor: darkBackground,
170
- color: base02,
171
- border: generalGutter.border,
172
- borderRight: `1px solid ${base01}`,
173
- paddingRight: generalGutter.paddingRight,
174
- },
175
- '.cm-activeLineGutter': {
176
- backgroundColor: base01,
177
- color: base04,
178
- fontWeight: generalGutter.fontWeight,
179
- },
180
- '.cm-lineNumbers': {
181
- fontSize: generalGutter.fontSize,
182
- lineHeight: generalGutter.lineHeight,
183
- },
184
- '.cm-foldGutter': {
185
- fontSize: generalGutter.fontSize,
186
- lineHeight: generalGutter.lineHeight,
187
- },
188
- '.cm-foldGutter .cm-gutterElement': {
189
- color: base02,
190
- cursor: 'pointer',
191
- },
192
- '.cm-foldGutter .cm-gutterElement:hover': {
193
- color: base04,
194
- },
195
-
196
- // Diff/Merge View Styles
197
- '.cm-insertedLine': {
198
- textDecoration: generalDiff.insertedTextDecoration,
199
- backgroundColor: addedBackground,
200
- color: addedText,
201
- padding: generalDiff.insertedLinePadding,
202
- borderRadius: generalDiff.borderRadious,
203
- },
204
- 'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
205
- textDecoration: generalDiff.insertedTextDecoration,
206
- backgroundColor: `${addedBackground} !important`,
207
- color: addedText,
208
- padding: generalDiff.insertedLinePadding,
209
- borderRadius: generalDiff.borderRadious,
210
- border: `1px solid ${addedText}40`,
211
- },
212
- 'ins.cm-insertedLine .cm-changedText': {
213
- background: 'transparent !important',
214
- },
215
-
216
- '.cm-deletedLine': {
217
- textDecoration: generalDiff.deletedTextDecoration,
218
- backgroundColor: removedBackground,
219
- color: removedText,
220
- padding: generalDiff.insertedLinePadding,
221
- borderRadius: generalDiff.borderRadious,
222
- },
223
- 'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
224
- textDecoration: generalDiff.deletedTextDecoration,
225
- backgroundColor: `${removedBackground} !important`,
226
- color: removedText,
227
- padding: generalDiff.insertedLinePadding,
228
- borderRadius: generalDiff.borderRadious,
229
- border: `1px solid ${removedText}40`,
230
- },
231
- 'del .cm-deletedText, del .cm-changedText': {
232
- background: 'transparent !important',
233
- },
234
-
235
- // Tooltips and autocomplete
236
- '.cm-tooltip': {
237
- backgroundColor: tooltipBackground,
238
- border: `1px solid ${base02}`,
239
- borderRadius: generalTooltip.borderRadius,
240
- padding: generalTooltip.padding,
241
- boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
242
- },
243
- '.cm-tooltip-autocomplete': {
244
- '& > ul': {
245
- backgroundColor: tooltipBackground,
246
- border: 'none',
247
- },
248
- '& > ul > li': {
249
- padding: generalTooltip.padding,
250
- lineHeight: generalTooltip.lineHeight,
251
- },
252
- '& > ul > li[aria-selected]': {
253
- backgroundColor: base01,
254
- color: base05,
255
- borderRadius: generalTooltip.borderRadiusSelected,
256
- },
257
- '& > ul > li > span.cm-completionIcon': {
258
- color: base02,
259
- paddingRight: generalTooltip.paddingRight,
260
- },
261
- '& > ul > li > span.cm-completionDetail': {
262
- color: base02,
263
- fontStyle: 'italic',
264
- },
265
- },
266
- '.cm-tooltip .cm-tooltip-arrow:before': {
267
- borderTopColor: 'transparent',
268
- borderBottomColor: 'transparent',
269
- },
270
- '.cm-tooltip .cm-tooltip-arrow:after': {
271
- borderTopColor: tooltipBackground,
272
- borderBottomColor: tooltipBackground,
273
- },
274
-
275
- // Diagnostics styling
276
- '.cm-diagnostic': {
277
- '&-error': {
278
- borderLeft: `3px solid ${red}`,
279
- },
280
- '&-warning': {
281
- borderLeft: `3px solid ${diagnosticWarning}`,
282
- },
283
- '&-info': {
284
- borderLeft: `3px solid ${linkColor}`,
285
- },
286
- },
287
- '.cm-lintPoint-error': {
288
- borderBottom: `2px wavy ${red}`,
289
- },
290
- '.cm-lintPoint-warning': {
291
- borderBottom: `2px wavy ${diagnosticWarning}`,
292
- },
293
-
294
- // Matching brackets
295
- '.cm-matchingBracket': {
296
- backgroundColor: activeBracketBg,
297
- outline: `1px solid ${activeBracketBorder}`,
298
- borderRadius: generalMatching.borderRadius,
299
- },
300
- '.cm-nonmatchingBracket': {
301
- backgroundColor: `${red}40`,
302
- outline: `1px solid ${invalid}`,
303
- borderRadius: generalMatching.borderRadius,
304
- },
305
-
306
- // Selection matches
307
- '.cm-selectionMatch': {
308
- backgroundColor: selectionMatch,
309
- outline: `1px solid ${base01}50`,
310
- borderRadius: generalMatching.borderRadius,
311
- },
312
-
313
- // Fold placeholder
314
- '.cm-foldPlaceholder': {
315
- backgroundColor: tooltipBackground,
316
- color: base02,
317
- border: `1px dotted ${base02}70`,
318
- borderRadius: generalPlaceholder.borderRadius,
319
- padding: generalPlaceholder.padding,
320
- margin: generalPlaceholder.margin,
321
- },
322
-
323
- // Focus outline
324
- '&.cm-focused': {
325
- outline: 'none',
326
- boxShadow: `0 0 0 2px ${background}, 0 0 0 3px ${lavender}40`,
327
- },
328
-
329
- // Scrollbars
330
- '& .cm-scroller::-webkit-scrollbar': {
331
- width: generalScroller.width,
332
- height: generalScroller.height,
333
- },
334
- '& .cm-scroller::-webkit-scrollbar-track': {
335
- background: darkBackground,
336
- },
337
- '& .cm-scroller::-webkit-scrollbar-thumb': {
338
- backgroundColor: base01,
339
- borderRadius: generalScroller.borderRadius,
340
- border: `3px solid ${darkBackground}`,
341
- },
342
- '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
343
- backgroundColor: base02,
344
- },
345
-
346
- // Ghost text
347
- '.cm-ghostText': {
348
- opacity: '0.5',
349
- color: base02,
350
- },
351
- },
352
- { dark: true },
353
- );
354
-
355
- /**
356
- * Enhanced syntax highlighting for Catppuccin Mocha theme
357
- */
358
- const catppuccinMochaHighlightStyle = HighlightStyle.define([
359
- // Keywords and control flow
360
- { tag: t.keyword, color: mauve, fontWeight: 'bold' },
361
- { tag: t.controlKeyword, color: mauve, fontWeight: 'bold' },
362
- { tag: t.moduleKeyword, color: mauve, fontWeight: 'bold' },
363
-
364
- // Names and variables
365
- { tag: [t.name, t.deleted, t.character, t.macroName], color: base04 },
366
- { tag: [t.variableName], color: base04 },
367
- { tag: [t.propertyName], color: blue, fontStyle: 'normal' },
368
-
369
- // Classes and types
370
- { tag: [t.typeName], color: yellow },
371
- { tag: [t.className], color: yellow, fontStyle: 'italic' },
372
- { tag: [t.namespace], color: peach, fontStyle: 'italic' },
373
-
374
- // Operators and punctuation
375
- { tag: [t.operator, t.operatorKeyword], color: sky },
376
- { tag: [t.bracket], color: base03 },
377
- { tag: [t.brace], color: teal },
378
- { tag: [t.punctuation], color: base03 },
379
-
380
- // Functions and parameters
381
- { tag: [t.function(t.variableName), t.labelName], color: blue },
382
- { tag: [t.definition(t.function(t.variableName))], color: blue },
383
- { tag: [t.definition(t.variableName)], color: peach },
384
-
385
- // Constants and literals
386
- { tag: t.number, color: peach },
387
- { tag: t.changed, color: yellow },
388
- { tag: t.annotation, color: red, fontStyle: 'italic' },
389
- { tag: t.modifier, color: mauve, fontStyle: 'italic' },
390
- { tag: t.self, color: red },
391
- { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: peach },
392
- { tag: [t.atom, t.bool, t.special(t.variableName)], color: peach },
393
-
394
- // Strings and regex
395
- { tag: [t.processingInstruction, t.inserted], color: green },
396
- { tag: [t.special(t.string), t.regexp], color: pink },
397
- { tag: t.string, color: green },
398
-
399
- // Punctuation and structure
400
- { tag: t.definition(t.typeName), color: yellow, fontWeight: 'bold' },
401
- { tag: [t.definition(t.name), t.separator], color: flamingo },
402
-
403
- // Comments and documentation
404
- { tag: t.meta, color: base02 },
405
- { tag: t.comment, fontStyle: 'italic', color: base02 },
406
- { tag: t.docComment, fontStyle: 'italic', color: base02 },
407
-
408
- // HTML/XML elements
409
- { tag: [t.tagName], color: pink },
410
- { tag: [t.attributeName], color: yellow },
411
-
412
- // Markdown and text formatting
413
- { tag: [t.heading], fontWeight: 'bold', color: mauve },
414
- { tag: [t.strong], fontWeight: 'bold', color: maroon },
415
- { tag: [t.emphasis], fontStyle: 'italic', color: pink },
416
-
417
- // Links and URLs
418
- {
419
- tag: [t.link],
420
- color: visitedLinkColor,
421
- fontWeight: '500',
422
- textDecoration: 'underline',
423
- textUnderlinePosition: 'under',
424
- },
425
- {
426
- tag: [t.url],
427
- color: linkColor,
428
- textDecoration: 'underline',
429
- textUnderlineOffset: '2px',
430
- },
431
-
432
- // Special states
433
- {
434
- tag: [t.invalid],
435
- color: red,
436
- textDecoration: 'underline wavy',
437
- borderBottom: `1px wavy ${red}`,
438
- },
439
- { tag: [t.strikethrough], color: red, textDecoration: 'line-through' },
440
-
441
- // Enhanced syntax highlighting
442
- { tag: t.constant(t.name), color: peach },
443
- { tag: t.deleted, color: red },
444
- { tag: t.squareBracket, color: maroon },
445
- { tag: t.angleBracket, color: sky },
446
-
447
- // Additional specific styles
448
- { tag: t.monospace, color: teal, fontStyle: 'italic' },
449
- { tag: [t.contentSeparator], color: sapphire },
450
- { tag: t.quote, color: lavender },
451
- ]);
452
-
453
- /**
454
- * Combined Catppuccin Mocha theme extension
455
- */
456
- const catppuccinMocha: Extension = [
457
- catppuccinMochaTheme,
458
- syntaxHighlighting(catppuccinMochaHighlightStyle),
459
- ];
460
-
461
- /**
462
- * Catppuccin Mocha merge revert styles configuration
463
- */
464
- const catppuccinMochaMergeStyles: IMergeRevertStyles = {
465
- backgroundColor: darkBackground,
466
- borderColor: base02,
467
- buttonColor: base04,
468
- buttonHoverColor: base01,
469
- };
470
-
471
- export { catppuccinMocha, catppuccinMochaMergeStyles, applyMergeRevertStyles };
472
-
package/src/utils.ts DELETED
@@ -1,126 +0,0 @@
1
- // Helper module for styling options
2
- export const generalContent = {
3
- fontSize: '14px',
4
- fontFamily: 'JetBrains Mono, Consolas, monospace',
5
- lineHeight: '1.6',
6
- };
7
-
8
- export const generalCursor = {
9
- borderLeftWidth: '2px',
10
- };
11
-
12
- export const generalDiff = {
13
- insertedTextDecoration: 'none',
14
- deletedTextDecoration: 'line-through',
15
- insertedLinePadding: '1px 3px',
16
- borderRadious: '3px',
17
- ins_del_linePadding: '1px 3px',
18
- };
19
-
20
- export const generalGutter = {
21
- border: 'none',
22
- paddingRight: '8px',
23
- fontSize: '0.9em',
24
- fontWeight: '500',
25
- lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
26
- };
27
-
28
- export const generalPanel = {
29
- border: 'none',
30
- borderRadius: '4px',
31
- padding: '2px 10px',
32
- };
33
-
34
- export const generalLine = {
35
- borderRadius: '2px',
36
- };
37
-
38
- export const generalMatching = {
39
- borderRadius: '2px',
40
- };
41
-
42
- export const generalPlaceholder = {
43
- borderRadius: '4px',
44
- padding: '0 5px',
45
- margin: '0 2px',
46
- };
47
-
48
- export const generalScroller = {
49
- width: '12px',
50
- height: '12px',
51
- borderRadius: '6px',
52
- };
53
-
54
- export const generalSearchField = {
55
- borderRadius: '4px',
56
- padding: '2px 6px',
57
- };
58
-
59
- export const generalTooltip = {
60
- borderRadius: '4px',
61
- borderRadiusSelected: '3px',
62
- lineHeight: '1.3',
63
- padding: '4px 8px',
64
- paddingRight: '8px',
65
- };
66
-
67
- //---------------------------------------
68
-
69
- // Interface for merge revert styling options
70
- export interface IMergeRevertStyles {
71
- backgroundColor: string
72
- borderColor: string
73
- buttonColor: string
74
- buttonHoverColor: string
75
- }
76
-
77
- /**
78
- * Function to apply merge revert styles for a theme
79
- * @param styles Styles for the merge revert buttons
80
- * @param styles.backgroundColor Background color of the revert area
81
- * @param styles.borderColor Border color of the revert area
82
- * @param styles.buttonColor Color of the revert buttons
83
- * @param styles.buttonHoverColor Hover color of the revert buttons
84
- */
85
- export function applyMergeRevertStyles(styles: IMergeRevertStyles) {
86
- // Create a stylesheet
87
- const styleEl = document.createElement('style');
88
- styleEl.id = 'cm-merge-revert-styles';
89
-
90
- // Define CSS with the theme-specific values
91
- styleEl.textContent = `
92
- .cm-merge-revert {
93
- display: flex;
94
- flex-direction: column;
95
- align-items: center;
96
- justify-content: flex-start;
97
- padding: 4px;
98
- background-color: ${styles.backgroundColor};
99
- border-left: 1px solid ${styles.borderColor};
100
- border-right: 1px solid ${styles.borderColor};
101
- width: 32px;
102
- }
103
-
104
- .cm-merge-revert button {
105
- width: 100%;
106
- height: auto;
107
- background-color: transparent;
108
- border: none;
109
- color: ${styles.buttonColor};
110
- cursor: pointer;
111
- margin: 0 auto;
112
- font-size: 20px;
113
- }
114
-
115
- .cm-merge-revert button:hover {
116
- background-color: ${styles.buttonHoverColor};
117
- }
118
- `;
119
-
120
- // Remove any existing merge styles
121
- const existingStyle = document.getElementById('cm-merge-revert-styles');
122
- if (existingStyle) existingStyle.remove();
123
-
124
- // Add the new styles
125
- document.head.appendChild(styleEl);
126
- }