@fsegurai/codemirror-theme-catppuccin-mocha 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/README.md +121 -0
- package/dist/index.cjs +489 -0
- package/dist/index.d.cts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +485 -0
- package/package.json +56 -0
- package/src/index.ts +472 -0
- package/src/utils.ts +126 -0
package/README.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
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">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
<a href="https://github.com/fsegurai/codemirror-themes">
|
|
7
|
+
<img src="https://img.shields.io/azure-devops/build/fsegurai/Libraries%2520NodeJs/16/main?label=Build%20Status&"
|
|
8
|
+
alt="Test Status">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://www.npmjs.org/package/@fsegurai/codemirror-theme-catppuccin-mocha">
|
|
11
|
+
<img src="https://img.shields.io/npm/v/@fsegurai/codemirror-theme-catppuccin-mocha.svg"
|
|
12
|
+
alt="Latest Release">
|
|
13
|
+
</a>
|
|
14
|
+
<br>
|
|
15
|
+
<img alt="GitHub contributors" src="https://img.shields.io/github/contributors/fsegurai/codemirror-themes">
|
|
16
|
+
<img alt="Dependency status for repo" src="https://img.shields.io/librariesio/github/fsegurai/codemirror-themes">
|
|
17
|
+
<a href="https://opensource.org/licenses/MIT">
|
|
18
|
+
<img alt="GitHub License" src="https://img.shields.io/github/license/fsegurai/codemirror-themes">
|
|
19
|
+
</a>
|
|
20
|
+
<br>
|
|
21
|
+
<img alt="Stars" src="https://img.shields.io/github/stars/fsegurai/codemirror-themes?style=square&labelColor=343b41"/>
|
|
22
|
+
<img alt="Forks" src="https://img.shields.io/github/forks/fsegurai/codemirror-themes?style=square&labelColor=343b41"/>
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
**A library of custom themes for CodeMirror 6.**
|
|
26
|
+
|
|
27
|
+
`@fsegurai/codemirror-theme-catppuccin-mocha` is a theme for CodeMirror 6 editor, making it visually engaging and adaptable to different coding styles and user preferences.
|
|
28
|
+
|
|
29
|
+
### Table of contents
|
|
30
|
+
|
|
31
|
+
- [Installation](#installation)
|
|
32
|
+
- [@fsegurai/codemirror-theme-catppuccin-mocha](#@fsegurai/codemirror-theme-catppuccin-mocha)
|
|
33
|
+
- [Using Theme](#using-theme)
|
|
34
|
+
- [Available Themes](#available-themes)
|
|
35
|
+
- [Demo Application](#demo-application)
|
|
36
|
+
- [License](#license)
|
|
37
|
+
|
|
38
|
+
## Installation
|
|
39
|
+
|
|
40
|
+
### @fsegurai/codemirror-theme-catppuccin-mocha
|
|
41
|
+
|
|
42
|
+
To add `@fsegurai/codemirror-theme-catppuccin-mocha` along with CodeMirror 6 to your `package.json` use the following commands.
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
bun install @fsegurai/codemirror-theme-catppuccin-mocha codemirror@^6.0.0 --save
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Using Theme
|
|
49
|
+
|
|
50
|
+
Import the respective theme from the package and apply it to your CodeMirror instance as shown below.
|
|
51
|
+
|
|
52
|
+
```javascript
|
|
53
|
+
import { EditorView, basicSetup } from 'codemirror'
|
|
54
|
+
import { markdown } from '@codemirror/lang-markdown'
|
|
55
|
+
import { catppuccinMocha } from '@fsegurai/codemirror-theme-catppuccin-mocha'
|
|
56
|
+
|
|
57
|
+
let editor = new EditorView({
|
|
58
|
+
doc: '# Hello World',
|
|
59
|
+
extensions: [
|
|
60
|
+
basicSetup,
|
|
61
|
+
markdown(),
|
|
62
|
+
catppuccinMocha
|
|
63
|
+
],
|
|
64
|
+
parent: document.body
|
|
65
|
+
})
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/) for more details about themes.
|
|
69
|
+
|
|
70
|
+
### Available Themes
|
|
71
|
+
|
|
72
|
+
| Theme | Package | Version |
|
|
73
|
+
|---------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
|
|
74
|
+
| All - Bundle | [@fsegurai/codemirror-theme-bundle](https://www.npmjs.com/package/@fsegurai/codemirror-theme-bundle) |  |
|
|
75
|
+
| Abcdef | [@fsegurai/codemirror-theme-abcdef](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abcdef) |  |
|
|
76
|
+
| Abyss | [@fsegurai/codemirror-theme-abyss](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abyss) |  |
|
|
77
|
+
| Android Studio | [@fsegurai/codemirror-theme-android-studio](https://www.npmjs.com/package/@fsegurai/codemirror-theme-android-studio) |  |
|
|
78
|
+
| Andromeda | [@fsegurai/codemirror-theme-andromeda](https://www.npmjs.com/package/@fsegurai/codemirror-theme-andromeda) |  |
|
|
79
|
+
| Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) |  |
|
|
80
|
+
| Basic Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) |  |
|
|
81
|
+
| Catppuccin Mocha | [@fsegurai/codemirror-theme-catppuccin-mocha](https://www.npmjs.com/package/@fsegurai/codemirror-theme-catppuccin-mocha) |  |
|
|
82
|
+
| Cobalt2 | [@fsegurai/codemirror-theme-cobalt](https://www.npmjs.com/package/@fsegurai/codemirror-theme-cobalt2) |  |
|
|
83
|
+
| Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) |  |
|
|
84
|
+
| GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) |  |
|
|
85
|
+
| GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) |  |
|
|
86
|
+
| Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) |  |
|
|
87
|
+
| Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) |  |
|
|
88
|
+
| High Contrast Dark | [@fsegurai/codemirror-theme-high-contrast-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-dark) |  |
|
|
89
|
+
| High Contrast Light | [@fsegurai/codemirror-theme-high-contrast-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-light) |  |
|
|
90
|
+
| Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) |  |
|
|
91
|
+
| Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) |  |
|
|
92
|
+
| Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) |  |
|
|
93
|
+
| Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) |  |
|
|
94
|
+
| Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) |  |
|
|
95
|
+
| Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) |  |
|
|
96
|
+
| Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) |  |
|
|
97
|
+
| Synthwave 84 | [@fsegurai/codemirror-theme-synthwave-84](https://www.npmjs.com/package/@fsegurai/codemirror-theme-synthwave-84) |  |
|
|
98
|
+
| Tokyo Night Day | [@fsegurai/codemirror-theme-tokyo-night-day](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-day) |  |
|
|
99
|
+
| Tokyo Night Storm | [@fsegurai/codemirror-theme-tokyo-night-storm](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-storm) |  |
|
|
100
|
+
| Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) |  |
|
|
101
|
+
| VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) |  |
|
|
102
|
+
| VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) |  |
|
|
103
|
+
|
|
104
|
+
## Demo Application
|
|
105
|
+
|
|
106
|
+
To see all themes in action, check out the
|
|
107
|
+
demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
|
|
108
|
+
|
|
109
|
+
To set up the demo locally:
|
|
110
|
+
|
|
111
|
+
```bash
|
|
112
|
+
git clone https://github.com/fsegurai/codemirror-themes.git
|
|
113
|
+
bun install
|
|
114
|
+
bun start
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
|
|
118
|
+
|
|
119
|
+
## License
|
|
120
|
+
|
|
121
|
+
Licensed under [MIT](https://opensource.org/licenses/MIT).
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,489 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var view = require('@codemirror/view');
|
|
4
|
+
var language = require('@codemirror/language');
|
|
5
|
+
var highlight = require('@lezer/highlight');
|
|
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
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
27
|
+
};
|
|
28
|
+
const generalPanel = {
|
|
29
|
+
border: 'none',
|
|
30
|
+
borderRadius: '4px',
|
|
31
|
+
padding: '2px 10px',
|
|
32
|
+
};
|
|
33
|
+
const generalLine = {
|
|
34
|
+
borderRadius: '2px',
|
|
35
|
+
};
|
|
36
|
+
const generalMatching = {
|
|
37
|
+
borderRadius: '2px',
|
|
38
|
+
};
|
|
39
|
+
const generalPlaceholder = {
|
|
40
|
+
borderRadius: '4px',
|
|
41
|
+
padding: '0 5px',
|
|
42
|
+
margin: '0 2px',
|
|
43
|
+
};
|
|
44
|
+
const generalScroller = {
|
|
45
|
+
width: '12px',
|
|
46
|
+
height: '12px',
|
|
47
|
+
borderRadius: '6px',
|
|
48
|
+
};
|
|
49
|
+
const generalSearchField = {
|
|
50
|
+
borderRadius: '4px',
|
|
51
|
+
padding: '2px 6px',
|
|
52
|
+
};
|
|
53
|
+
const generalTooltip = {
|
|
54
|
+
borderRadius: '4px',
|
|
55
|
+
borderRadiusSelected: '3px',
|
|
56
|
+
lineHeight: '1.3',
|
|
57
|
+
padding: '4px 8px',
|
|
58
|
+
paddingRight: '8px',
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Function to apply merge revert styles for a theme
|
|
62
|
+
* @param styles Styles for the merge revert buttons
|
|
63
|
+
* @param styles.backgroundColor Background color of the revert area
|
|
64
|
+
* @param styles.borderColor Border color of the revert area
|
|
65
|
+
* @param styles.buttonColor Color of the revert buttons
|
|
66
|
+
* @param styles.buttonHoverColor Hover color of the revert buttons
|
|
67
|
+
*/
|
|
68
|
+
function applyMergeRevertStyles(styles) {
|
|
69
|
+
// Create a stylesheet
|
|
70
|
+
const styleEl = document.createElement('style');
|
|
71
|
+
styleEl.id = 'cm-merge-revert-styles';
|
|
72
|
+
// Define CSS with the theme-specific values
|
|
73
|
+
styleEl.textContent = `
|
|
74
|
+
.cm-merge-revert {
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: column;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: flex-start;
|
|
79
|
+
padding: 4px;
|
|
80
|
+
background-color: ${styles.backgroundColor};
|
|
81
|
+
border-left: 1px solid ${styles.borderColor};
|
|
82
|
+
border-right: 1px solid ${styles.borderColor};
|
|
83
|
+
width: 32px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.cm-merge-revert button {
|
|
87
|
+
width: 100%;
|
|
88
|
+
height: auto;
|
|
89
|
+
background-color: transparent;
|
|
90
|
+
border: none;
|
|
91
|
+
color: ${styles.buttonColor};
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
margin: 0 auto;
|
|
94
|
+
font-size: 20px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.cm-merge-revert button:hover {
|
|
98
|
+
background-color: ${styles.buttonHoverColor};
|
|
99
|
+
}
|
|
100
|
+
`;
|
|
101
|
+
// Remove any existing merge styles
|
|
102
|
+
const existingStyle = document.getElementById('cm-merge-revert-styles');
|
|
103
|
+
if (existingStyle)
|
|
104
|
+
existingStyle.remove();
|
|
105
|
+
// Add the new styles
|
|
106
|
+
document.head.appendChild(styleEl);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Catppuccin Mocha theme color definitions
|
|
111
|
+
* ----------------------------------------
|
|
112
|
+
* A soothing pastel theme with warm tones
|
|
113
|
+
*/
|
|
114
|
+
// Base colors (Mocha variant)
|
|
115
|
+
const base00 = '#1e1e2e', // Background - dark navy
|
|
116
|
+
base01 = '#313244', // Selection background
|
|
117
|
+
base02 = '#45475a', // Comments
|
|
118
|
+
base03 = '#585b70', // Dark grey
|
|
119
|
+
base04 = '#cdd6f4', // Foreground - light blue
|
|
120
|
+
base05 = '#f5e0dc', // Light foreground
|
|
121
|
+
// Catppuccin Mocha colors
|
|
122
|
+
rosewater = '#f5e0dc', flamingo = '#f2cdcd', pink = '#f5c2e7', mauve = '#cba6f7', red = '#f38ba8', maroon = '#eba0ac', peach = '#fab387', yellow = '#f9e2af', green = '#a6e3a1', teal = '#94e2d5', sky = '#89dceb', sapphire = '#74c7ec', blue = '#89b4fa', lavender = '#b4befe';
|
|
123
|
+
// UI specific colors
|
|
124
|
+
const invalid = '#f38ba8', darkBackground = '#181825', background = base00, tooltipBackground = base01, selectionMatch = '#45475a80', cursor = rosewater, activeBracketBg = '#45475a55', activeBracketBorder = lavender, diagnosticWarning = yellow, linkColor = blue, visitedLinkColor = mauve;
|
|
125
|
+
// Diff/merge specific colors
|
|
126
|
+
const addedBackground = '#a6e3a140', removedBackground = '#f38ba840', addedText = green, removedText = red;
|
|
127
|
+
/**
|
|
128
|
+
* Enhanced editor theme styles for Catppuccin Mocha
|
|
129
|
+
*/
|
|
130
|
+
const catppuccinMochaTheme = view.EditorView.theme({
|
|
131
|
+
// Base editor styles
|
|
132
|
+
'&': {
|
|
133
|
+
color: base04,
|
|
134
|
+
backgroundColor: background,
|
|
135
|
+
fontSize: generalContent.fontSize,
|
|
136
|
+
fontFamily: generalContent.fontFamily,
|
|
137
|
+
},
|
|
138
|
+
// Content and cursor
|
|
139
|
+
'.cm-content': {
|
|
140
|
+
caretColor: cursor,
|
|
141
|
+
lineHeight: generalContent.lineHeight,
|
|
142
|
+
},
|
|
143
|
+
'.cm-cursor, .cm-dropCursor': {
|
|
144
|
+
borderLeftColor: cursor,
|
|
145
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
146
|
+
},
|
|
147
|
+
'.cm-fat-cursor': {
|
|
148
|
+
backgroundColor: `${cursor}99`,
|
|
149
|
+
color: background,
|
|
150
|
+
},
|
|
151
|
+
// Selection
|
|
152
|
+
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
|
|
153
|
+
backgroundColor: '#585b7080',
|
|
154
|
+
outline: `1px solid ${mauve}`,
|
|
155
|
+
},
|
|
156
|
+
// Make sure selection appears above active line
|
|
157
|
+
'.cm-selectionLayer': {
|
|
158
|
+
zIndex: 100,
|
|
159
|
+
},
|
|
160
|
+
// Search functionality
|
|
161
|
+
'.cm-searchMatch': {
|
|
162
|
+
backgroundColor: '#89b4fa40',
|
|
163
|
+
outline: `1px solid ${sapphire}`,
|
|
164
|
+
color: base04,
|
|
165
|
+
borderRadius: generalSearchField.borderRadius,
|
|
166
|
+
'& span': {
|
|
167
|
+
color: base04,
|
|
168
|
+
},
|
|
169
|
+
},
|
|
170
|
+
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
171
|
+
backgroundColor: blue,
|
|
172
|
+
color: base00,
|
|
173
|
+
padding: generalSearchField.padding,
|
|
174
|
+
'& span': {
|
|
175
|
+
color: base00,
|
|
176
|
+
},
|
|
177
|
+
},
|
|
178
|
+
'.cm-search.cm-panel.cm-textfield': {
|
|
179
|
+
color: base04,
|
|
180
|
+
borderRadius: generalSearchField.borderRadius,
|
|
181
|
+
padding: generalSearchField.padding,
|
|
182
|
+
},
|
|
183
|
+
// Panels
|
|
184
|
+
'.cm-panels': {
|
|
185
|
+
backgroundColor: darkBackground,
|
|
186
|
+
color: base04,
|
|
187
|
+
borderRadius: '4px',
|
|
188
|
+
},
|
|
189
|
+
'.cm-panels.cm-panels-top': {
|
|
190
|
+
borderBottom: `1px solid ${base02}`,
|
|
191
|
+
},
|
|
192
|
+
'.cm-panels.cm-panels-bottom': {
|
|
193
|
+
borderTop: `1px solid ${base02}`,
|
|
194
|
+
},
|
|
195
|
+
'.cm-panel button': {
|
|
196
|
+
backgroundColor: tooltipBackground,
|
|
197
|
+
color: base04,
|
|
198
|
+
border: generalPanel.border,
|
|
199
|
+
borderRadius: generalPanel.borderRadius,
|
|
200
|
+
padding: generalPanel.padding,
|
|
201
|
+
},
|
|
202
|
+
'.cm-panel button:hover': {
|
|
203
|
+
backgroundColor: base01,
|
|
204
|
+
},
|
|
205
|
+
// Line highlighting
|
|
206
|
+
'.cm-activeLine': {
|
|
207
|
+
backgroundColor: '#3a3a5266',
|
|
208
|
+
borderRadius: generalLine.borderRadius,
|
|
209
|
+
borderLeft: `2px solid ${lavender}`,
|
|
210
|
+
zIndex: 1,
|
|
211
|
+
},
|
|
212
|
+
// Gutters
|
|
213
|
+
'.cm-gutters': {
|
|
214
|
+
backgroundColor: darkBackground,
|
|
215
|
+
color: base02,
|
|
216
|
+
border: generalGutter.border,
|
|
217
|
+
borderRight: `1px solid ${base01}`,
|
|
218
|
+
paddingRight: generalGutter.paddingRight,
|
|
219
|
+
},
|
|
220
|
+
'.cm-activeLineGutter': {
|
|
221
|
+
backgroundColor: base01,
|
|
222
|
+
color: base04,
|
|
223
|
+
fontWeight: generalGutter.fontWeight,
|
|
224
|
+
},
|
|
225
|
+
'.cm-lineNumbers': {
|
|
226
|
+
fontSize: generalGutter.fontSize,
|
|
227
|
+
lineHeight: generalGutter.lineHeight,
|
|
228
|
+
},
|
|
229
|
+
'.cm-foldGutter': {
|
|
230
|
+
fontSize: generalGutter.fontSize,
|
|
231
|
+
lineHeight: generalGutter.lineHeight,
|
|
232
|
+
},
|
|
233
|
+
'.cm-foldGutter .cm-gutterElement': {
|
|
234
|
+
color: base02,
|
|
235
|
+
cursor: 'pointer',
|
|
236
|
+
},
|
|
237
|
+
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
238
|
+
color: base04,
|
|
239
|
+
},
|
|
240
|
+
// Diff/Merge View Styles
|
|
241
|
+
'.cm-insertedLine': {
|
|
242
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
243
|
+
backgroundColor: addedBackground,
|
|
244
|
+
color: addedText,
|
|
245
|
+
padding: generalDiff.insertedLinePadding,
|
|
246
|
+
borderRadius: generalDiff.borderRadious,
|
|
247
|
+
},
|
|
248
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
249
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
250
|
+
backgroundColor: `${addedBackground} !important`,
|
|
251
|
+
color: addedText,
|
|
252
|
+
padding: generalDiff.insertedLinePadding,
|
|
253
|
+
borderRadius: generalDiff.borderRadious,
|
|
254
|
+
border: `1px solid ${addedText}40`,
|
|
255
|
+
},
|
|
256
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
257
|
+
background: 'transparent !important',
|
|
258
|
+
},
|
|
259
|
+
'.cm-deletedLine': {
|
|
260
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
261
|
+
backgroundColor: removedBackground,
|
|
262
|
+
color: removedText,
|
|
263
|
+
padding: generalDiff.insertedLinePadding,
|
|
264
|
+
borderRadius: generalDiff.borderRadious,
|
|
265
|
+
},
|
|
266
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
267
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
268
|
+
backgroundColor: `${removedBackground} !important`,
|
|
269
|
+
color: removedText,
|
|
270
|
+
padding: generalDiff.insertedLinePadding,
|
|
271
|
+
borderRadius: generalDiff.borderRadious,
|
|
272
|
+
border: `1px solid ${removedText}40`,
|
|
273
|
+
},
|
|
274
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
275
|
+
background: 'transparent !important',
|
|
276
|
+
},
|
|
277
|
+
// Tooltips and autocomplete
|
|
278
|
+
'.cm-tooltip': {
|
|
279
|
+
backgroundColor: tooltipBackground,
|
|
280
|
+
border: `1px solid ${base02}`,
|
|
281
|
+
borderRadius: generalTooltip.borderRadius,
|
|
282
|
+
padding: generalTooltip.padding,
|
|
283
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
284
|
+
},
|
|
285
|
+
'.cm-tooltip-autocomplete': {
|
|
286
|
+
'& > ul': {
|
|
287
|
+
backgroundColor: tooltipBackground,
|
|
288
|
+
border: 'none',
|
|
289
|
+
},
|
|
290
|
+
'& > ul > li': {
|
|
291
|
+
padding: generalTooltip.padding,
|
|
292
|
+
lineHeight: generalTooltip.lineHeight,
|
|
293
|
+
},
|
|
294
|
+
'& > ul > li[aria-selected]': {
|
|
295
|
+
backgroundColor: base01,
|
|
296
|
+
color: base05,
|
|
297
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
298
|
+
},
|
|
299
|
+
'& > ul > li > span.cm-completionIcon': {
|
|
300
|
+
color: base02,
|
|
301
|
+
paddingRight: generalTooltip.paddingRight,
|
|
302
|
+
},
|
|
303
|
+
'& > ul > li > span.cm-completionDetail': {
|
|
304
|
+
color: base02,
|
|
305
|
+
fontStyle: 'italic',
|
|
306
|
+
},
|
|
307
|
+
},
|
|
308
|
+
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
309
|
+
borderTopColor: 'transparent',
|
|
310
|
+
borderBottomColor: 'transparent',
|
|
311
|
+
},
|
|
312
|
+
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
313
|
+
borderTopColor: tooltipBackground,
|
|
314
|
+
borderBottomColor: tooltipBackground,
|
|
315
|
+
},
|
|
316
|
+
// Diagnostics styling
|
|
317
|
+
'.cm-diagnostic': {
|
|
318
|
+
'&-error': {
|
|
319
|
+
borderLeft: `3px solid ${red}`,
|
|
320
|
+
},
|
|
321
|
+
'&-warning': {
|
|
322
|
+
borderLeft: `3px solid ${diagnosticWarning}`,
|
|
323
|
+
},
|
|
324
|
+
'&-info': {
|
|
325
|
+
borderLeft: `3px solid ${linkColor}`,
|
|
326
|
+
},
|
|
327
|
+
},
|
|
328
|
+
'.cm-lintPoint-error': {
|
|
329
|
+
borderBottom: `2px wavy ${red}`,
|
|
330
|
+
},
|
|
331
|
+
'.cm-lintPoint-warning': {
|
|
332
|
+
borderBottom: `2px wavy ${diagnosticWarning}`,
|
|
333
|
+
},
|
|
334
|
+
// Matching brackets
|
|
335
|
+
'.cm-matchingBracket': {
|
|
336
|
+
backgroundColor: activeBracketBg,
|
|
337
|
+
outline: `1px solid ${activeBracketBorder}`,
|
|
338
|
+
borderRadius: generalMatching.borderRadius,
|
|
339
|
+
},
|
|
340
|
+
'.cm-nonmatchingBracket': {
|
|
341
|
+
backgroundColor: `${red}40`,
|
|
342
|
+
outline: `1px solid ${invalid}`,
|
|
343
|
+
borderRadius: generalMatching.borderRadius,
|
|
344
|
+
},
|
|
345
|
+
// Selection matches
|
|
346
|
+
'.cm-selectionMatch': {
|
|
347
|
+
backgroundColor: selectionMatch,
|
|
348
|
+
outline: `1px solid ${base01}50`,
|
|
349
|
+
borderRadius: generalMatching.borderRadius,
|
|
350
|
+
},
|
|
351
|
+
// Fold placeholder
|
|
352
|
+
'.cm-foldPlaceholder': {
|
|
353
|
+
backgroundColor: tooltipBackground,
|
|
354
|
+
color: base02,
|
|
355
|
+
border: `1px dotted ${base02}70`,
|
|
356
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
357
|
+
padding: generalPlaceholder.padding,
|
|
358
|
+
margin: generalPlaceholder.margin,
|
|
359
|
+
},
|
|
360
|
+
// Focus outline
|
|
361
|
+
'&.cm-focused': {
|
|
362
|
+
outline: 'none',
|
|
363
|
+
boxShadow: `0 0 0 2px ${background}, 0 0 0 3px ${lavender}40`,
|
|
364
|
+
},
|
|
365
|
+
// Scrollbars
|
|
366
|
+
'& .cm-scroller::-webkit-scrollbar': {
|
|
367
|
+
width: generalScroller.width,
|
|
368
|
+
height: generalScroller.height,
|
|
369
|
+
},
|
|
370
|
+
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
371
|
+
background: darkBackground,
|
|
372
|
+
},
|
|
373
|
+
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
374
|
+
backgroundColor: base01,
|
|
375
|
+
borderRadius: generalScroller.borderRadius,
|
|
376
|
+
border: `3px solid ${darkBackground}`,
|
|
377
|
+
},
|
|
378
|
+
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
379
|
+
backgroundColor: base02,
|
|
380
|
+
},
|
|
381
|
+
// Ghost text
|
|
382
|
+
'.cm-ghostText': {
|
|
383
|
+
opacity: '0.5',
|
|
384
|
+
color: base02,
|
|
385
|
+
},
|
|
386
|
+
}, { dark: true });
|
|
387
|
+
/**
|
|
388
|
+
* Enhanced syntax highlighting for Catppuccin Mocha theme
|
|
389
|
+
*/
|
|
390
|
+
const catppuccinMochaHighlightStyle = language.HighlightStyle.define([
|
|
391
|
+
// Keywords and control flow
|
|
392
|
+
{ tag: highlight.tags.keyword, color: mauve, fontWeight: 'bold' },
|
|
393
|
+
{ tag: highlight.tags.controlKeyword, color: mauve, fontWeight: 'bold' },
|
|
394
|
+
{ tag: highlight.tags.moduleKeyword, color: mauve, fontWeight: 'bold' },
|
|
395
|
+
// Names and variables
|
|
396
|
+
{ tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base04 },
|
|
397
|
+
{ tag: [highlight.tags.variableName], color: base04 },
|
|
398
|
+
{ tag: [highlight.tags.propertyName], color: blue, fontStyle: 'normal' },
|
|
399
|
+
// Classes and types
|
|
400
|
+
{ tag: [highlight.tags.typeName], color: yellow },
|
|
401
|
+
{ tag: [highlight.tags.className], color: yellow, fontStyle: 'italic' },
|
|
402
|
+
{ tag: [highlight.tags.namespace], color: peach, fontStyle: 'italic' },
|
|
403
|
+
// Operators and punctuation
|
|
404
|
+
{ tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: sky },
|
|
405
|
+
{ tag: [highlight.tags.bracket], color: base03 },
|
|
406
|
+
{ tag: [highlight.tags.brace], color: teal },
|
|
407
|
+
{ tag: [highlight.tags.punctuation], color: base03 },
|
|
408
|
+
// Functions and parameters
|
|
409
|
+
{ tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: blue },
|
|
410
|
+
{ tag: [highlight.tags.definition(highlight.tags.function(highlight.tags.variableName))], color: blue },
|
|
411
|
+
{ tag: [highlight.tags.definition(highlight.tags.variableName)], color: peach },
|
|
412
|
+
// Constants and literals
|
|
413
|
+
{ tag: highlight.tags.number, color: peach },
|
|
414
|
+
{ tag: highlight.tags.changed, color: yellow },
|
|
415
|
+
{ tag: highlight.tags.annotation, color: red, fontStyle: 'italic' },
|
|
416
|
+
{ tag: highlight.tags.modifier, color: mauve, fontStyle: 'italic' },
|
|
417
|
+
{ tag: highlight.tags.self, color: red },
|
|
418
|
+
{ tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: peach },
|
|
419
|
+
{ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: peach },
|
|
420
|
+
// Strings and regex
|
|
421
|
+
{ tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: green },
|
|
422
|
+
{ tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: pink },
|
|
423
|
+
{ tag: highlight.tags.string, color: green },
|
|
424
|
+
// Punctuation and structure
|
|
425
|
+
{ tag: highlight.tags.definition(highlight.tags.typeName), color: yellow, fontWeight: 'bold' },
|
|
426
|
+
{ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: flamingo },
|
|
427
|
+
// Comments and documentation
|
|
428
|
+
{ tag: highlight.tags.meta, color: base02 },
|
|
429
|
+
{ tag: highlight.tags.comment, fontStyle: 'italic', color: base02 },
|
|
430
|
+
{ tag: highlight.tags.docComment, fontStyle: 'italic', color: base02 },
|
|
431
|
+
// HTML/XML elements
|
|
432
|
+
{ tag: [highlight.tags.tagName], color: pink },
|
|
433
|
+
{ tag: [highlight.tags.attributeName], color: yellow },
|
|
434
|
+
// Markdown and text formatting
|
|
435
|
+
{ tag: [highlight.tags.heading], fontWeight: 'bold', color: mauve },
|
|
436
|
+
{ tag: [highlight.tags.strong], fontWeight: 'bold', color: maroon },
|
|
437
|
+
{ tag: [highlight.tags.emphasis], fontStyle: 'italic', color: pink },
|
|
438
|
+
// Links and URLs
|
|
439
|
+
{
|
|
440
|
+
tag: [highlight.tags.link],
|
|
441
|
+
color: visitedLinkColor,
|
|
442
|
+
fontWeight: '500',
|
|
443
|
+
textDecoration: 'underline',
|
|
444
|
+
textUnderlinePosition: 'under',
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
tag: [highlight.tags.url],
|
|
448
|
+
color: linkColor,
|
|
449
|
+
textDecoration: 'underline',
|
|
450
|
+
textUnderlineOffset: '2px',
|
|
451
|
+
},
|
|
452
|
+
// Special states
|
|
453
|
+
{
|
|
454
|
+
tag: [highlight.tags.invalid],
|
|
455
|
+
color: red,
|
|
456
|
+
textDecoration: 'underline wavy',
|
|
457
|
+
borderBottom: `1px wavy ${red}`,
|
|
458
|
+
},
|
|
459
|
+
{ tag: [highlight.tags.strikethrough], color: red, textDecoration: 'line-through' },
|
|
460
|
+
// Enhanced syntax highlighting
|
|
461
|
+
{ tag: highlight.tags.constant(highlight.tags.name), color: peach },
|
|
462
|
+
{ tag: highlight.tags.deleted, color: red },
|
|
463
|
+
{ tag: highlight.tags.squareBracket, color: maroon },
|
|
464
|
+
{ tag: highlight.tags.angleBracket, color: sky },
|
|
465
|
+
// Additional specific styles
|
|
466
|
+
{ tag: highlight.tags.monospace, color: teal, fontStyle: 'italic' },
|
|
467
|
+
{ tag: [highlight.tags.contentSeparator], color: sapphire },
|
|
468
|
+
{ tag: highlight.tags.quote, color: lavender },
|
|
469
|
+
]);
|
|
470
|
+
/**
|
|
471
|
+
* Combined Catppuccin Mocha theme extension
|
|
472
|
+
*/
|
|
473
|
+
const catppuccinMocha = [
|
|
474
|
+
catppuccinMochaTheme,
|
|
475
|
+
language.syntaxHighlighting(catppuccinMochaHighlightStyle),
|
|
476
|
+
];
|
|
477
|
+
/**
|
|
478
|
+
* Catppuccin Mocha merge revert styles configuration
|
|
479
|
+
*/
|
|
480
|
+
const catppuccinMochaMergeStyles = {
|
|
481
|
+
backgroundColor: darkBackground,
|
|
482
|
+
borderColor: base02,
|
|
483
|
+
buttonColor: base04,
|
|
484
|
+
buttonHoverColor: base01,
|
|
485
|
+
};
|
|
486
|
+
|
|
487
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
488
|
+
exports.catppuccinMocha = catppuccinMocha;
|
|
489
|
+
exports.catppuccinMochaMergeStyles = catppuccinMochaMergeStyles;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Extension } from '@codemirror/state';
|
|
2
|
+
|
|
3
|
+
interface IMergeRevertStyles {
|
|
4
|
+
backgroundColor: string;
|
|
5
|
+
borderColor: string;
|
|
6
|
+
buttonColor: string;
|
|
7
|
+
buttonHoverColor: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
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
|
|
16
|
+
*/
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Combined Catppuccin Mocha theme extension
|
|
21
|
+
*/
|
|
22
|
+
declare const catppuccinMocha: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Catppuccin Mocha merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const catppuccinMochaMergeStyles: IMergeRevertStyles;
|
|
27
|
+
|
|
28
|
+
export { applyMergeRevertStyles, catppuccinMocha, catppuccinMochaMergeStyles };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Extension } from '@codemirror/state';
|
|
2
|
+
|
|
3
|
+
interface IMergeRevertStyles {
|
|
4
|
+
backgroundColor: string;
|
|
5
|
+
borderColor: string;
|
|
6
|
+
buttonColor: string;
|
|
7
|
+
buttonHoverColor: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
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
|
|
16
|
+
*/
|
|
17
|
+
declare function applyMergeRevertStyles(styles: IMergeRevertStyles): void;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Combined Catppuccin Mocha theme extension
|
|
21
|
+
*/
|
|
22
|
+
declare const catppuccinMocha: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* Catppuccin Mocha merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const catppuccinMochaMergeStyles: IMergeRevertStyles;
|
|
27
|
+
|
|
28
|
+
export { applyMergeRevertStyles, catppuccinMocha, catppuccinMochaMergeStyles };
|