@fsegurai/codemirror-theme-high-contrast-dark 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 +503 -0
- package/dist/index.d.cts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +499 -0
- package/package.json +54 -0
- package/src/index.ts +484 -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-high-contrast-dark">
|
|
11
|
+
<img src="https://img.shields.io/npm/v/@fsegurai/codemirror-theme-high-contrast-dark.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-high-contrast-dark` 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-high-contrast-dark](#@fsegurai/codemirror-theme-high-contrast-dark)
|
|
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-high-contrast-dark
|
|
41
|
+
|
|
42
|
+
To add `@fsegurai/codemirror-theme-high-contrast-dark` along with CodeMirror 6 to your `package.json` use the following commands.
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
bun install @fsegurai/codemirror-theme-high-contrast-dark 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 { highContrastDark } from '@fsegurai/codemirror-theme-high-contrast-dark'
|
|
56
|
+
|
|
57
|
+
let editor = new EditorView({
|
|
58
|
+
doc: '# Hello World',
|
|
59
|
+
extensions: [
|
|
60
|
+
basicSetup,
|
|
61
|
+
markdown(),
|
|
62
|
+
highContrastDark
|
|
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,503 @@
|
|
|
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 generalDiff = {
|
|
14
|
+
insertedTextDecoration: 'none',
|
|
15
|
+
deletedTextDecoration: 'line-through',
|
|
16
|
+
insertedLinePadding: '1px 3px',
|
|
17
|
+
borderRadious: '3px'};
|
|
18
|
+
const generalGutter = {
|
|
19
|
+
border: 'none',
|
|
20
|
+
paddingRight: '8px',
|
|
21
|
+
fontSize: '0.9em',
|
|
22
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
23
|
+
};
|
|
24
|
+
const generalPanel = {
|
|
25
|
+
borderRadius: '4px',
|
|
26
|
+
padding: '2px 10px',
|
|
27
|
+
};
|
|
28
|
+
const generalLine = {
|
|
29
|
+
borderRadius: '2px',
|
|
30
|
+
};
|
|
31
|
+
const generalMatching = {
|
|
32
|
+
borderRadius: '2px',
|
|
33
|
+
};
|
|
34
|
+
const generalPlaceholder = {
|
|
35
|
+
borderRadius: '4px',
|
|
36
|
+
padding: '0 5px',
|
|
37
|
+
margin: '0 2px',
|
|
38
|
+
};
|
|
39
|
+
const generalScroller = {
|
|
40
|
+
width: '12px',
|
|
41
|
+
height: '12px',
|
|
42
|
+
borderRadius: '6px',
|
|
43
|
+
};
|
|
44
|
+
const generalSearchField = {
|
|
45
|
+
borderRadius: '4px',
|
|
46
|
+
padding: '2px 6px',
|
|
47
|
+
};
|
|
48
|
+
const generalTooltip = {
|
|
49
|
+
borderRadius: '4px',
|
|
50
|
+
borderRadiusSelected: '3px',
|
|
51
|
+
lineHeight: '1.3',
|
|
52
|
+
padding: '4px 8px',
|
|
53
|
+
paddingRight: '8px',
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* Function to apply merge revert styles for a theme
|
|
57
|
+
* @param styles Styles for the merge revert buttons
|
|
58
|
+
* @param styles.backgroundColor Background color of the revert area
|
|
59
|
+
* @param styles.borderColor Border color of the revert area
|
|
60
|
+
* @param styles.buttonColor Color of the revert buttons
|
|
61
|
+
* @param styles.buttonHoverColor Hover color of the revert buttons
|
|
62
|
+
*/
|
|
63
|
+
function applyMergeRevertStyles(styles) {
|
|
64
|
+
// Create a stylesheet
|
|
65
|
+
const styleEl = document.createElement('style');
|
|
66
|
+
styleEl.id = 'cm-merge-revert-styles';
|
|
67
|
+
// Define CSS with the theme-specific values
|
|
68
|
+
styleEl.textContent = `
|
|
69
|
+
.cm-merge-revert {
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-direction: column;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: flex-start;
|
|
74
|
+
padding: 4px;
|
|
75
|
+
background-color: ${styles.backgroundColor};
|
|
76
|
+
border-left: 1px solid ${styles.borderColor};
|
|
77
|
+
border-right: 1px solid ${styles.borderColor};
|
|
78
|
+
width: 32px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.cm-merge-revert button {
|
|
82
|
+
width: 100%;
|
|
83
|
+
height: auto;
|
|
84
|
+
background-color: transparent;
|
|
85
|
+
border: none;
|
|
86
|
+
color: ${styles.buttonColor};
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
margin: 0 auto;
|
|
89
|
+
font-size: 20px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.cm-merge-revert button:hover {
|
|
93
|
+
background-color: ${styles.buttonHoverColor};
|
|
94
|
+
}
|
|
95
|
+
`;
|
|
96
|
+
// Remove any existing merge styles
|
|
97
|
+
const existingStyle = document.getElementById('cm-merge-revert-styles');
|
|
98
|
+
if (existingStyle)
|
|
99
|
+
existingStyle.remove();
|
|
100
|
+
// Add the new styles
|
|
101
|
+
document.head.appendChild(styleEl);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* High Contrast Dark theme color definitions
|
|
106
|
+
* ------------------------------------------
|
|
107
|
+
* Maximum contrast theme for accessibility
|
|
108
|
+
*/
|
|
109
|
+
// Base colors - Pure black and white for maximum contrast
|
|
110
|
+
const base00 = '#000000', // Background - pure black
|
|
111
|
+
base01 = '#0a0a0a', // Darker background
|
|
112
|
+
base02 = '#1f1f1f', // Selection background
|
|
113
|
+
base03 = '#808080', // Comments - medium grey
|
|
114
|
+
base04 = '#b0b0b0', // Dark grey
|
|
115
|
+
base05 = '#ffffff', // Foreground - pure white
|
|
116
|
+
// High contrast accent colors
|
|
117
|
+
brightYellow = '#ffff00', brightCyan = '#00ffff', brightGreen = '#00ff00', brightRed = '#ff0000', brightMagenta = '#ff00ff', brightBlue = '#0099ff', brightOrange = '#ff9900', brightPurple = '#cc66ff';
|
|
118
|
+
// UI specific colors
|
|
119
|
+
const invalid = brightRed, darkBackground = base00, background = base00, tooltipBackground = '#1a1a1a', selection = '#264f78', selectionMatch = '#264f7880', cursor = brightYellow, activeBracketBg = '#1f1f1f', activeBracketBorder = brightCyan, diagnosticWarning = brightYellow, linkColor = brightCyan, visitedLinkColor = brightMagenta;
|
|
120
|
+
// Diff/merge specific colors
|
|
121
|
+
const addedBackground = '#00550060', removedBackground = '#55000060', addedText = brightGreen, removedText = brightRed;
|
|
122
|
+
/**
|
|
123
|
+
* Enhanced editor theme styles for High Contrast Dark
|
|
124
|
+
*/
|
|
125
|
+
const highContrastDarkTheme = view.EditorView.theme({
|
|
126
|
+
// Base editor styles
|
|
127
|
+
'&': {
|
|
128
|
+
color: base05,
|
|
129
|
+
backgroundColor: background,
|
|
130
|
+
fontSize: generalContent.fontSize,
|
|
131
|
+
fontFamily: generalContent.fontFamily,
|
|
132
|
+
border: `1px solid ${base04}`,
|
|
133
|
+
},
|
|
134
|
+
// Content and cursor
|
|
135
|
+
'.cm-content': {
|
|
136
|
+
caretColor: cursor,
|
|
137
|
+
lineHeight: generalContent.lineHeight,
|
|
138
|
+
},
|
|
139
|
+
'.cm-cursor, .cm-dropCursor': {
|
|
140
|
+
borderLeftColor: cursor,
|
|
141
|
+
borderLeftWidth: '3px',
|
|
142
|
+
},
|
|
143
|
+
'.cm-fat-cursor': {
|
|
144
|
+
backgroundColor: cursor,
|
|
145
|
+
color: background,
|
|
146
|
+
border: `2px solid ${base05}`,
|
|
147
|
+
},
|
|
148
|
+
// Selection
|
|
149
|
+
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
|
|
150
|
+
backgroundColor: '#3a5a8a',
|
|
151
|
+
outline: `2px solid ${brightCyan}`,
|
|
152
|
+
},
|
|
153
|
+
// Make sure selection appears above active line
|
|
154
|
+
'.cm-selectionLayer': {
|
|
155
|
+
zIndex: 100,
|
|
156
|
+
},
|
|
157
|
+
// Search functionality
|
|
158
|
+
'.cm-searchMatch': {
|
|
159
|
+
backgroundColor: '#006400',
|
|
160
|
+
outline: `2px solid ${brightGreen}`,
|
|
161
|
+
color: base05,
|
|
162
|
+
borderRadius: generalSearchField.borderRadius,
|
|
163
|
+
'& span': {
|
|
164
|
+
color: base05,
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
168
|
+
backgroundColor: brightGreen,
|
|
169
|
+
color: base00,
|
|
170
|
+
padding: generalSearchField.padding,
|
|
171
|
+
outline: `2px solid ${base05}`,
|
|
172
|
+
'& span': {
|
|
173
|
+
color: base00,
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
'.cm-search.cm-panel.cm-textfield': {
|
|
177
|
+
color: base05,
|
|
178
|
+
backgroundColor: base01,
|
|
179
|
+
border: `1px solid ${base04}`,
|
|
180
|
+
borderRadius: generalSearchField.borderRadius,
|
|
181
|
+
padding: generalSearchField.padding,
|
|
182
|
+
},
|
|
183
|
+
// Panels
|
|
184
|
+
'.cm-panels': {
|
|
185
|
+
backgroundColor: darkBackground,
|
|
186
|
+
color: base05,
|
|
187
|
+
borderRadius: '4px',
|
|
188
|
+
border: `1px solid ${base04}`,
|
|
189
|
+
},
|
|
190
|
+
'.cm-panels.cm-panels-top': {
|
|
191
|
+
borderBottom: `2px solid ${base04}`,
|
|
192
|
+
},
|
|
193
|
+
'.cm-panels.cm-panels-bottom': {
|
|
194
|
+
borderTop: `2px solid ${base04}`,
|
|
195
|
+
},
|
|
196
|
+
'.cm-panel button': {
|
|
197
|
+
backgroundColor: tooltipBackground,
|
|
198
|
+
color: brightCyan,
|
|
199
|
+
border: `1px solid ${base04}`,
|
|
200
|
+
borderRadius: generalPanel.borderRadius,
|
|
201
|
+
padding: generalPanel.padding,
|
|
202
|
+
},
|
|
203
|
+
'.cm-panel button:hover': {
|
|
204
|
+
backgroundColor: base02,
|
|
205
|
+
border: `1px solid ${brightCyan}`,
|
|
206
|
+
},
|
|
207
|
+
// Line highlighting
|
|
208
|
+
'.cm-activeLine': {
|
|
209
|
+
backgroundColor: '#2a2a2aa6',
|
|
210
|
+
borderRadius: generalLine.borderRadius,
|
|
211
|
+
borderLeft: `3px solid ${brightCyan}`,
|
|
212
|
+
borderRight: `1px solid ${base04}`,
|
|
213
|
+
zIndex: 1,
|
|
214
|
+
},
|
|
215
|
+
// Gutters
|
|
216
|
+
'.cm-gutters': {
|
|
217
|
+
backgroundColor: darkBackground,
|
|
218
|
+
color: base04,
|
|
219
|
+
border: generalGutter.border,
|
|
220
|
+
borderRight: `2px solid ${base04}`,
|
|
221
|
+
paddingRight: generalGutter.paddingRight,
|
|
222
|
+
},
|
|
223
|
+
'.cm-activeLineGutter': {
|
|
224
|
+
backgroundColor: base02,
|
|
225
|
+
color: brightYellow,
|
|
226
|
+
fontWeight: 'bold',
|
|
227
|
+
border: `1px solid ${base03}`,
|
|
228
|
+
},
|
|
229
|
+
'.cm-lineNumbers': {
|
|
230
|
+
fontSize: generalGutter.fontSize,
|
|
231
|
+
lineHeight: generalGutter.lineHeight,
|
|
232
|
+
},
|
|
233
|
+
'.cm-foldGutter': {
|
|
234
|
+
fontSize: generalGutter.fontSize,
|
|
235
|
+
lineHeight: generalGutter.lineHeight,
|
|
236
|
+
},
|
|
237
|
+
'.cm-foldGutter .cm-gutterElement': {
|
|
238
|
+
color: base04,
|
|
239
|
+
cursor: 'pointer',
|
|
240
|
+
},
|
|
241
|
+
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
242
|
+
color: brightCyan,
|
|
243
|
+
},
|
|
244
|
+
// Diff/Merge View Styles
|
|
245
|
+
'.cm-insertedLine': {
|
|
246
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
247
|
+
backgroundColor: addedBackground,
|
|
248
|
+
color: addedText,
|
|
249
|
+
padding: generalDiff.insertedLinePadding,
|
|
250
|
+
borderRadius: generalDiff.borderRadious,
|
|
251
|
+
border: `1px solid ${addedText}`,
|
|
252
|
+
},
|
|
253
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
254
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
255
|
+
backgroundColor: `${addedBackground} !important`,
|
|
256
|
+
color: addedText,
|
|
257
|
+
padding: generalDiff.insertedLinePadding,
|
|
258
|
+
borderRadius: generalDiff.borderRadious,
|
|
259
|
+
border: `1px solid ${addedText}`,
|
|
260
|
+
},
|
|
261
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
262
|
+
background: 'transparent !important',
|
|
263
|
+
},
|
|
264
|
+
'.cm-deletedLine': {
|
|
265
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
266
|
+
backgroundColor: removedBackground,
|
|
267
|
+
color: removedText,
|
|
268
|
+
padding: generalDiff.insertedLinePadding,
|
|
269
|
+
borderRadius: generalDiff.borderRadious,
|
|
270
|
+
border: `1px solid ${removedText}`,
|
|
271
|
+
},
|
|
272
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
273
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
274
|
+
backgroundColor: `${removedBackground} !important`,
|
|
275
|
+
color: removedText,
|
|
276
|
+
padding: generalDiff.insertedLinePadding,
|
|
277
|
+
borderRadius: generalDiff.borderRadious,
|
|
278
|
+
border: `1px solid ${removedText}`,
|
|
279
|
+
},
|
|
280
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
281
|
+
background: 'transparent !important',
|
|
282
|
+
},
|
|
283
|
+
// Tooltips and autocomplete
|
|
284
|
+
'.cm-tooltip': {
|
|
285
|
+
backgroundColor: tooltipBackground,
|
|
286
|
+
border: `2px solid ${brightCyan}`,
|
|
287
|
+
borderRadius: generalTooltip.borderRadius,
|
|
288
|
+
padding: generalTooltip.padding,
|
|
289
|
+
color: base05,
|
|
290
|
+
},
|
|
291
|
+
'.cm-tooltip-autocomplete': {
|
|
292
|
+
'& > ul': {
|
|
293
|
+
backgroundColor: tooltipBackground,
|
|
294
|
+
border: `1px solid ${base04}`,
|
|
295
|
+
},
|
|
296
|
+
'& > ul > li': {
|
|
297
|
+
padding: generalTooltip.padding,
|
|
298
|
+
lineHeight: generalTooltip.lineHeight,
|
|
299
|
+
},
|
|
300
|
+
'& > ul > li[aria-selected]': {
|
|
301
|
+
backgroundColor: selection,
|
|
302
|
+
color: brightYellow,
|
|
303
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
304
|
+
border: `1px solid ${brightCyan}`,
|
|
305
|
+
},
|
|
306
|
+
'& > ul > li > span.cm-completionIcon': {
|
|
307
|
+
color: brightCyan,
|
|
308
|
+
paddingRight: generalTooltip.paddingRight,
|
|
309
|
+
},
|
|
310
|
+
'& > ul > li > span.cm-completionDetail': {
|
|
311
|
+
color: brightYellow,
|
|
312
|
+
fontStyle: 'italic',
|
|
313
|
+
},
|
|
314
|
+
},
|
|
315
|
+
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
316
|
+
borderTopColor: 'transparent',
|
|
317
|
+
borderBottomColor: 'transparent',
|
|
318
|
+
},
|
|
319
|
+
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
320
|
+
borderTopColor: brightCyan,
|
|
321
|
+
borderBottomColor: brightCyan,
|
|
322
|
+
},
|
|
323
|
+
// Diagnostics styling
|
|
324
|
+
'.cm-diagnostic': {
|
|
325
|
+
'&-error': {
|
|
326
|
+
borderLeft: `4px solid ${brightRed}`,
|
|
327
|
+
backgroundColor: '#33000020',
|
|
328
|
+
},
|
|
329
|
+
'&-warning': {
|
|
330
|
+
borderLeft: `4px solid ${diagnosticWarning}`,
|
|
331
|
+
backgroundColor: '#33330020',
|
|
332
|
+
},
|
|
333
|
+
'&-info': {
|
|
334
|
+
borderLeft: `4px solid ${linkColor}`,
|
|
335
|
+
backgroundColor: '#00333320',
|
|
336
|
+
},
|
|
337
|
+
},
|
|
338
|
+
'.cm-lintPoint-error': {
|
|
339
|
+
borderBottom: `3px wavy ${brightRed}`,
|
|
340
|
+
},
|
|
341
|
+
'.cm-lintPoint-warning': {
|
|
342
|
+
borderBottom: `3px wavy ${diagnosticWarning}`,
|
|
343
|
+
},
|
|
344
|
+
// Matching brackets
|
|
345
|
+
'.cm-matchingBracket': {
|
|
346
|
+
backgroundColor: activeBracketBg,
|
|
347
|
+
outline: `2px solid ${activeBracketBorder}`,
|
|
348
|
+
borderRadius: generalMatching.borderRadius,
|
|
349
|
+
},
|
|
350
|
+
'.cm-nonmatchingBracket': {
|
|
351
|
+
backgroundColor: '#33000050',
|
|
352
|
+
outline: `2px solid ${invalid}`,
|
|
353
|
+
borderRadius: generalMatching.borderRadius,
|
|
354
|
+
},
|
|
355
|
+
// Selection matches
|
|
356
|
+
'.cm-selectionMatch': {
|
|
357
|
+
backgroundColor: selectionMatch,
|
|
358
|
+
outline: `2px solid ${brightCyan}50`,
|
|
359
|
+
borderRadius: generalMatching.borderRadius,
|
|
360
|
+
},
|
|
361
|
+
// Fold placeholder
|
|
362
|
+
'.cm-foldPlaceholder': {
|
|
363
|
+
backgroundColor: tooltipBackground,
|
|
364
|
+
color: brightCyan,
|
|
365
|
+
border: `2px solid ${brightCyan}`,
|
|
366
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
367
|
+
padding: generalPlaceholder.padding,
|
|
368
|
+
margin: generalPlaceholder.margin,
|
|
369
|
+
},
|
|
370
|
+
// Focus outline
|
|
371
|
+
'&.cm-focused': {
|
|
372
|
+
outline: `3px solid ${brightCyan}`,
|
|
373
|
+
outlineOffset: '2px',
|
|
374
|
+
},
|
|
375
|
+
// Scrollbars
|
|
376
|
+
'& .cm-scroller::-webkit-scrollbar': {
|
|
377
|
+
width: generalScroller.width,
|
|
378
|
+
height: generalScroller.height,
|
|
379
|
+
},
|
|
380
|
+
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
381
|
+
background: darkBackground,
|
|
382
|
+
border: `1px solid ${base04}`,
|
|
383
|
+
},
|
|
384
|
+
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
385
|
+
backgroundColor: base04,
|
|
386
|
+
border: `2px solid ${base05}`,
|
|
387
|
+
borderRadius: generalScroller.borderRadius,
|
|
388
|
+
},
|
|
389
|
+
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
390
|
+
backgroundColor: brightCyan,
|
|
391
|
+
},
|
|
392
|
+
// Ghost text
|
|
393
|
+
'.cm-ghostText': {
|
|
394
|
+
opacity: '0.7',
|
|
395
|
+
color: base03,
|
|
396
|
+
},
|
|
397
|
+
}, { dark: true });
|
|
398
|
+
/**
|
|
399
|
+
* Enhanced syntax highlighting for High Contrast Dark theme
|
|
400
|
+
*/
|
|
401
|
+
const highContrastDarkHighlightStyle = language.HighlightStyle.define([
|
|
402
|
+
// Keywords and control flow
|
|
403
|
+
{ tag: highlight.tags.keyword, color: brightMagenta, fontWeight: 'bold' },
|
|
404
|
+
{ tag: highlight.tags.controlKeyword, color: brightMagenta, fontWeight: 'bold' },
|
|
405
|
+
{ tag: highlight.tags.moduleKeyword, color: brightMagenta, fontWeight: 'bold' },
|
|
406
|
+
// Names and variables
|
|
407
|
+
{ tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base05 },
|
|
408
|
+
{ tag: [highlight.tags.variableName], color: base05 },
|
|
409
|
+
{ tag: [highlight.tags.propertyName], color: brightCyan, fontStyle: 'normal' },
|
|
410
|
+
// Classes and types
|
|
411
|
+
{ tag: [highlight.tags.typeName], color: brightYellow },
|
|
412
|
+
{ tag: [highlight.tags.className], color: brightYellow, fontStyle: 'italic' },
|
|
413
|
+
{ tag: [highlight.tags.namespace], color: brightOrange, fontStyle: 'italic' },
|
|
414
|
+
// Operators and punctuation
|
|
415
|
+
{ tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: brightCyan },
|
|
416
|
+
{ tag: [highlight.tags.bracket], color: brightYellow },
|
|
417
|
+
{ tag: [highlight.tags.brace], color: brightCyan },
|
|
418
|
+
{ tag: [highlight.tags.punctuation], color: base05 },
|
|
419
|
+
// Functions and parameters
|
|
420
|
+
{ tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: brightBlue },
|
|
421
|
+
{ tag: [highlight.tags.definition(highlight.tags.function(highlight.tags.variableName))], color: brightBlue },
|
|
422
|
+
{ tag: [highlight.tags.definition(highlight.tags.variableName)], color: brightOrange },
|
|
423
|
+
// Constants and literals
|
|
424
|
+
{ tag: highlight.tags.number, color: brightOrange },
|
|
425
|
+
{ tag: highlight.tags.changed, color: brightYellow },
|
|
426
|
+
{ tag: highlight.tags.annotation, color: brightRed, fontStyle: 'italic' },
|
|
427
|
+
{ tag: highlight.tags.modifier, color: brightPurple, fontStyle: 'italic' },
|
|
428
|
+
{ tag: highlight.tags.self, color: brightRed },
|
|
429
|
+
{
|
|
430
|
+
tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
|
|
431
|
+
color: brightOrange,
|
|
432
|
+
},
|
|
433
|
+
{ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: brightOrange },
|
|
434
|
+
// Strings and regex
|
|
435
|
+
{ tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: brightGreen },
|
|
436
|
+
{ tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: brightMagenta },
|
|
437
|
+
{ tag: highlight.tags.string, color: brightGreen },
|
|
438
|
+
// Punctuation and structure
|
|
439
|
+
{ tag: highlight.tags.definition(highlight.tags.typeName), color: brightYellow, fontWeight: 'bold' },
|
|
440
|
+
{ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: brightCyan },
|
|
441
|
+
// Comments and documentation
|
|
442
|
+
{ tag: highlight.tags.meta, color: base03 },
|
|
443
|
+
{ tag: highlight.tags.comment, fontStyle: 'italic', color: base03 },
|
|
444
|
+
{ tag: highlight.tags.docComment, fontStyle: 'italic', color: base03 },
|
|
445
|
+
// HTML/XML elements
|
|
446
|
+
{ tag: [highlight.tags.tagName], color: brightMagenta },
|
|
447
|
+
{ tag: [highlight.tags.attributeName], color: brightYellow },
|
|
448
|
+
// Markdown and text formatting
|
|
449
|
+
{ tag: [highlight.tags.heading], fontWeight: 'bold', color: brightMagenta },
|
|
450
|
+
{ tag: [highlight.tags.strong], fontWeight: 'bold', color: brightOrange },
|
|
451
|
+
{ tag: [highlight.tags.emphasis], fontStyle: 'italic', color: brightMagenta },
|
|
452
|
+
// Links and URLs
|
|
453
|
+
{
|
|
454
|
+
tag: [highlight.tags.link],
|
|
455
|
+
color: visitedLinkColor,
|
|
456
|
+
fontWeight: '500',
|
|
457
|
+
textDecoration: 'underline',
|
|
458
|
+
textUnderlinePosition: 'under',
|
|
459
|
+
},
|
|
460
|
+
{
|
|
461
|
+
tag: [highlight.tags.url],
|
|
462
|
+
color: linkColor,
|
|
463
|
+
textDecoration: 'underline',
|
|
464
|
+
textUnderlineOffset: '2px',
|
|
465
|
+
},
|
|
466
|
+
// Special states
|
|
467
|
+
{
|
|
468
|
+
tag: [highlight.tags.invalid],
|
|
469
|
+
color: brightRed,
|
|
470
|
+
textDecoration: 'underline wavy',
|
|
471
|
+
borderBottom: `2px wavy ${brightRed}`,
|
|
472
|
+
},
|
|
473
|
+
{ tag: [highlight.tags.strikethrough], color: brightRed, textDecoration: 'line-through' },
|
|
474
|
+
// Enhanced syntax highlighting
|
|
475
|
+
{ tag: highlight.tags.constant(highlight.tags.name), color: brightOrange },
|
|
476
|
+
{ tag: highlight.tags.deleted, color: brightRed },
|
|
477
|
+
{ tag: highlight.tags.squareBracket, color: brightYellow },
|
|
478
|
+
{ tag: highlight.tags.angleBracket, color: brightCyan },
|
|
479
|
+
// Additional specific styles
|
|
480
|
+
{ tag: highlight.tags.monospace, color: brightBlue, fontStyle: 'italic' },
|
|
481
|
+
{ tag: [highlight.tags.contentSeparator], color: brightPurple },
|
|
482
|
+
{ tag: highlight.tags.quote, color: brightPurple },
|
|
483
|
+
]);
|
|
484
|
+
/**
|
|
485
|
+
* Combined High Contrast Dark theme extension
|
|
486
|
+
*/
|
|
487
|
+
const highContrastDark = [
|
|
488
|
+
highContrastDarkTheme,
|
|
489
|
+
language.syntaxHighlighting(highContrastDarkHighlightStyle),
|
|
490
|
+
];
|
|
491
|
+
/**
|
|
492
|
+
* High Contrast Dark merge revert styles configuration
|
|
493
|
+
*/
|
|
494
|
+
const highContrastDarkMergeStyles = {
|
|
495
|
+
backgroundColor: darkBackground,
|
|
496
|
+
borderColor: brightCyan,
|
|
497
|
+
buttonColor: brightCyan,
|
|
498
|
+
buttonHoverColor: brightYellow,
|
|
499
|
+
};
|
|
500
|
+
|
|
501
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
502
|
+
exports.highContrastDark = highContrastDark;
|
|
503
|
+
exports.highContrastDarkMergeStyles = highContrastDarkMergeStyles;
|
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 High Contrast Dark theme extension
|
|
21
|
+
*/
|
|
22
|
+
declare const highContrastDark: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* High Contrast Dark merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const highContrastDarkMergeStyles: IMergeRevertStyles;
|
|
27
|
+
|
|
28
|
+
export { applyMergeRevertStyles, highContrastDark, highContrastDarkMergeStyles };
|