@fsegurai/codemirror-theme-high-contrast-light 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 +499 -0
- package/dist/index.d.cts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +495 -0
- package/package.json +54 -0
- package/src/index.ts +481 -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-light">
|
|
11
|
+
<img src="https://img.shields.io/npm/v/@fsegurai/codemirror-theme-high-contrast-light.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-light` 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-light](#@fsegurai/codemirror-theme-high-contrast-light)
|
|
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-light
|
|
41
|
+
|
|
42
|
+
To add `@fsegurai/codemirror-theme-high-contrast-light` along with CodeMirror 6 to your `package.json` use the following commands.
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
bun install @fsegurai/codemirror-theme-high-contrast-light 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 { highContrastLight } from '@fsegurai/codemirror-theme-high-contrast-light'
|
|
56
|
+
|
|
57
|
+
let editor = new EditorView({
|
|
58
|
+
doc: '# Hello World',
|
|
59
|
+
extensions: [
|
|
60
|
+
basicSetup,
|
|
61
|
+
markdown(),
|
|
62
|
+
highContrastLight
|
|
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,499 @@
|
|
|
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 Light theme color definitions
|
|
106
|
+
* -------------------------------------------
|
|
107
|
+
* Maximum contrast theme for accessibility (light variant)
|
|
108
|
+
*/
|
|
109
|
+
// Base colors - Pure white and black for maximum contrast
|
|
110
|
+
const base00 = '#ffffff', // Background - pure white
|
|
111
|
+
base01 = '#e0e0e0', // Selection background
|
|
112
|
+
base02 = '#707070', // Comments - medium grey
|
|
113
|
+
base03 = '#505050', // Dark grey
|
|
114
|
+
base04 = '#000000', // Foreground - pure black
|
|
115
|
+
// High contrast accent colors for a light background
|
|
116
|
+
darkBlue = '#0000ff', darkCyan = '#008080', darkGreen = '#008000', darkRed = '#c80000', darkMagenta = '#800080', darkOrange = '#d04800', darkPurple = '#6600cc', darkBrown = '#7c3400';
|
|
117
|
+
// UI specific colors
|
|
118
|
+
const invalid = darkRed, lightBackground = base00, background = base00, tooltipBackground = '#f0f0f0', selection = '#0078d4', selectionMatch = '#0078d480', cursor = darkBlue, activeBracketBg = '#e0e0e0', activeBracketBorder = darkCyan, diagnosticWarning = darkOrange, linkColor = darkBlue, visitedLinkColor = darkPurple;
|
|
119
|
+
// Diff/merge specific colors
|
|
120
|
+
const addedBackground = '#00800040', removedBackground = '#c8000040', addedText = darkGreen, removedText = darkRed;
|
|
121
|
+
/**
|
|
122
|
+
* Enhanced editor theme styles for High Contrast Light
|
|
123
|
+
*/
|
|
124
|
+
const highContrastLightTheme = view.EditorView.theme({
|
|
125
|
+
// Base editor styles
|
|
126
|
+
'&': {
|
|
127
|
+
color: base04,
|
|
128
|
+
backgroundColor: background,
|
|
129
|
+
fontSize: generalContent.fontSize,
|
|
130
|
+
fontFamily: generalContent.fontFamily,
|
|
131
|
+
border: `2px solid ${base04}`,
|
|
132
|
+
},
|
|
133
|
+
// Content and cursor
|
|
134
|
+
'.cm-content': {
|
|
135
|
+
caretColor: cursor,
|
|
136
|
+
lineHeight: generalContent.lineHeight,
|
|
137
|
+
},
|
|
138
|
+
'.cm-cursor, .cm-dropCursor': {
|
|
139
|
+
borderLeftColor: cursor,
|
|
140
|
+
borderLeftWidth: '3px',
|
|
141
|
+
},
|
|
142
|
+
'.cm-fat-cursor': {
|
|
143
|
+
backgroundColor: cursor,
|
|
144
|
+
color: background,
|
|
145
|
+
border: `2px solid ${base04}`,
|
|
146
|
+
},
|
|
147
|
+
// Selection
|
|
148
|
+
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
|
|
149
|
+
backgroundColor: '#4d90fe',
|
|
150
|
+
outline: `2px solid ${darkBlue}`,
|
|
151
|
+
},
|
|
152
|
+
// Make sure selection appears above active line
|
|
153
|
+
'.cm-selectionLayer': {
|
|
154
|
+
zIndex: 100,
|
|
155
|
+
},
|
|
156
|
+
// Search functionality
|
|
157
|
+
'.cm-searchMatch': {
|
|
158
|
+
backgroundColor: '#ffff00',
|
|
159
|
+
outline: `2px solid ${darkOrange}`,
|
|
160
|
+
color: base04,
|
|
161
|
+
borderRadius: generalSearchField.borderRadius,
|
|
162
|
+
'& span': {
|
|
163
|
+
color: base04,
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
167
|
+
backgroundColor: darkOrange,
|
|
168
|
+
color: base00,
|
|
169
|
+
padding: generalSearchField.padding,
|
|
170
|
+
outline: `2px solid ${base04}`,
|
|
171
|
+
'& span': {
|
|
172
|
+
color: base00,
|
|
173
|
+
},
|
|
174
|
+
},
|
|
175
|
+
'.cm-search.cm-panel.cm-textfield': {
|
|
176
|
+
color: base04,
|
|
177
|
+
backgroundColor: base00,
|
|
178
|
+
border: `2px solid ${base04}`,
|
|
179
|
+
borderRadius: generalSearchField.borderRadius,
|
|
180
|
+
padding: generalSearchField.padding,
|
|
181
|
+
},
|
|
182
|
+
// Panels
|
|
183
|
+
'.cm-panels': {
|
|
184
|
+
backgroundColor: lightBackground,
|
|
185
|
+
color: base04,
|
|
186
|
+
borderRadius: '4px',
|
|
187
|
+
border: `2px solid ${base04}`,
|
|
188
|
+
},
|
|
189
|
+
'.cm-panels.cm-panels-top': {
|
|
190
|
+
borderBottom: `2px solid ${base04}`,
|
|
191
|
+
},
|
|
192
|
+
'.cm-panels.cm-panels-bottom': {
|
|
193
|
+
borderTop: `2px solid ${base04}`,
|
|
194
|
+
},
|
|
195
|
+
'.cm-panel button': {
|
|
196
|
+
backgroundColor: tooltipBackground,
|
|
197
|
+
color: darkBlue,
|
|
198
|
+
border: `2px solid ${base04}`,
|
|
199
|
+
borderRadius: generalPanel.borderRadius,
|
|
200
|
+
padding: generalPanel.padding,
|
|
201
|
+
},
|
|
202
|
+
'.cm-panel button:hover': {
|
|
203
|
+
backgroundColor: base01,
|
|
204
|
+
border: `2px solid ${darkBlue}`,
|
|
205
|
+
},
|
|
206
|
+
// Line highlighting
|
|
207
|
+
'.cm-activeLine': {
|
|
208
|
+
backgroundColor: '#ffffccba',
|
|
209
|
+
borderRadius: generalLine.borderRadius,
|
|
210
|
+
borderLeft: `3px solid ${darkBlue}`,
|
|
211
|
+
borderRight: `1px solid ${base02}`,
|
|
212
|
+
zIndex: 1,
|
|
213
|
+
},
|
|
214
|
+
// Gutters
|
|
215
|
+
'.cm-gutters': {
|
|
216
|
+
backgroundColor: lightBackground,
|
|
217
|
+
color: base03,
|
|
218
|
+
border: generalGutter.border,
|
|
219
|
+
borderRight: `2px solid ${base04}`,
|
|
220
|
+
paddingRight: generalGutter.paddingRight,
|
|
221
|
+
},
|
|
222
|
+
'.cm-activeLineGutter': {
|
|
223
|
+
backgroundColor: base01,
|
|
224
|
+
color: darkBlue,
|
|
225
|
+
fontWeight: 'bold',
|
|
226
|
+
border: `1px solid ${base02}`,
|
|
227
|
+
},
|
|
228
|
+
'.cm-lineNumbers': {
|
|
229
|
+
fontSize: generalGutter.fontSize,
|
|
230
|
+
lineHeight: generalGutter.lineHeight,
|
|
231
|
+
},
|
|
232
|
+
'.cm-foldGutter': {
|
|
233
|
+
fontSize: generalGutter.fontSize,
|
|
234
|
+
lineHeight: generalGutter.lineHeight,
|
|
235
|
+
},
|
|
236
|
+
'.cm-foldGutter .cm-gutterElement': {
|
|
237
|
+
color: base03,
|
|
238
|
+
cursor: 'pointer',
|
|
239
|
+
},
|
|
240
|
+
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
241
|
+
color: darkCyan,
|
|
242
|
+
},
|
|
243
|
+
// Diff/Merge View Styles
|
|
244
|
+
'.cm-insertedLine': {
|
|
245
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
246
|
+
backgroundColor: addedBackground,
|
|
247
|
+
color: addedText,
|
|
248
|
+
padding: generalDiff.insertedLinePadding,
|
|
249
|
+
borderRadius: generalDiff.borderRadious,
|
|
250
|
+
border: `2px solid ${addedText}`,
|
|
251
|
+
},
|
|
252
|
+
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
253
|
+
textDecoration: generalDiff.insertedTextDecoration,
|
|
254
|
+
backgroundColor: `${addedBackground} !important`,
|
|
255
|
+
color: addedText,
|
|
256
|
+
padding: generalDiff.insertedLinePadding,
|
|
257
|
+
borderRadius: generalDiff.borderRadious,
|
|
258
|
+
border: `2px solid ${addedText}`,
|
|
259
|
+
},
|
|
260
|
+
'ins.cm-insertedLine .cm-changedText': {
|
|
261
|
+
background: 'transparent !important',
|
|
262
|
+
},
|
|
263
|
+
'.cm-deletedLine': {
|
|
264
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
265
|
+
backgroundColor: removedBackground,
|
|
266
|
+
color: removedText,
|
|
267
|
+
padding: generalDiff.insertedLinePadding,
|
|
268
|
+
borderRadius: generalDiff.borderRadious,
|
|
269
|
+
border: `2px solid ${removedText}`,
|
|
270
|
+
},
|
|
271
|
+
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
272
|
+
textDecoration: generalDiff.deletedTextDecoration,
|
|
273
|
+
backgroundColor: `${removedBackground} !important`,
|
|
274
|
+
color: removedText,
|
|
275
|
+
padding: generalDiff.insertedLinePadding,
|
|
276
|
+
borderRadius: generalDiff.borderRadious,
|
|
277
|
+
border: `2px solid ${removedText}`,
|
|
278
|
+
},
|
|
279
|
+
'del .cm-deletedText, del .cm-changedText': {
|
|
280
|
+
background: 'transparent !important',
|
|
281
|
+
},
|
|
282
|
+
// Tooltips and autocomplete
|
|
283
|
+
'.cm-tooltip': {
|
|
284
|
+
backgroundColor: tooltipBackground,
|
|
285
|
+
border: `2px solid ${darkBlue}`,
|
|
286
|
+
borderRadius: generalTooltip.borderRadius,
|
|
287
|
+
padding: generalTooltip.padding,
|
|
288
|
+
color: base04,
|
|
289
|
+
},
|
|
290
|
+
'.cm-tooltip-autocomplete': {
|
|
291
|
+
'& > ul': {
|
|
292
|
+
backgroundColor: tooltipBackground,
|
|
293
|
+
border: `2px solid ${base04}`,
|
|
294
|
+
},
|
|
295
|
+
'& > ul > li': {
|
|
296
|
+
padding: generalTooltip.padding,
|
|
297
|
+
lineHeight: generalTooltip.lineHeight,
|
|
298
|
+
},
|
|
299
|
+
'& > ul > li[aria-selected]': {
|
|
300
|
+
backgroundColor: selection,
|
|
301
|
+
color: base00,
|
|
302
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
303
|
+
border: `2px solid ${darkBlue}`,
|
|
304
|
+
},
|
|
305
|
+
'& > ul > li > span.cm-completionIcon': {
|
|
306
|
+
color: darkCyan,
|
|
307
|
+
paddingRight: generalTooltip.paddingRight,
|
|
308
|
+
},
|
|
309
|
+
'& > ul > li > span.cm-completionDetail': {
|
|
310
|
+
color: darkOrange,
|
|
311
|
+
fontStyle: 'italic',
|
|
312
|
+
},
|
|
313
|
+
},
|
|
314
|
+
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
315
|
+
borderTopColor: 'transparent',
|
|
316
|
+
borderBottomColor: 'transparent',
|
|
317
|
+
},
|
|
318
|
+
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
319
|
+
borderTopColor: darkBlue,
|
|
320
|
+
borderBottomColor: darkBlue,
|
|
321
|
+
},
|
|
322
|
+
// Diagnostics styling
|
|
323
|
+
'.cm-diagnostic': {
|
|
324
|
+
'&-error': {
|
|
325
|
+
borderLeft: `4px solid ${darkRed}`,
|
|
326
|
+
backgroundColor: '#ff000020',
|
|
327
|
+
},
|
|
328
|
+
'&-warning': {
|
|
329
|
+
borderLeft: `4px solid ${diagnosticWarning}`,
|
|
330
|
+
backgroundColor: '#ff990020',
|
|
331
|
+
},
|
|
332
|
+
'&-info': {
|
|
333
|
+
borderLeft: `4px solid ${linkColor}`,
|
|
334
|
+
backgroundColor: '#0000ff20',
|
|
335
|
+
},
|
|
336
|
+
},
|
|
337
|
+
'.cm-lintPoint-error': {
|
|
338
|
+
borderBottom: `3px wavy ${darkRed}`,
|
|
339
|
+
},
|
|
340
|
+
'.cm-lintPoint-warning': {
|
|
341
|
+
borderBottom: `3px wavy ${diagnosticWarning}`,
|
|
342
|
+
},
|
|
343
|
+
// Matching brackets
|
|
344
|
+
'.cm-matchingBracket': {
|
|
345
|
+
backgroundColor: activeBracketBg,
|
|
346
|
+
outline: `2px solid ${activeBracketBorder}`,
|
|
347
|
+
borderRadius: generalMatching.borderRadius,
|
|
348
|
+
},
|
|
349
|
+
'.cm-nonmatchingBracket': {
|
|
350
|
+
backgroundColor: '#ff000030',
|
|
351
|
+
outline: `2px solid ${invalid}`,
|
|
352
|
+
borderRadius: generalMatching.borderRadius,
|
|
353
|
+
},
|
|
354
|
+
// Selection matches
|
|
355
|
+
'.cm-selectionMatch': {
|
|
356
|
+
backgroundColor: selectionMatch,
|
|
357
|
+
outline: `2px solid ${darkBlue}50`,
|
|
358
|
+
borderRadius: generalMatching.borderRadius,
|
|
359
|
+
},
|
|
360
|
+
// Fold placeholder
|
|
361
|
+
'.cm-foldPlaceholder': {
|
|
362
|
+
backgroundColor: tooltipBackground,
|
|
363
|
+
color: darkBlue,
|
|
364
|
+
border: `2px solid ${darkBlue}`,
|
|
365
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
366
|
+
padding: generalPlaceholder.padding,
|
|
367
|
+
margin: generalPlaceholder.margin,
|
|
368
|
+
},
|
|
369
|
+
// Focus outline
|
|
370
|
+
'&.cm-focused': {
|
|
371
|
+
outline: `3px solid ${darkBlue}`,
|
|
372
|
+
outlineOffset: '2px',
|
|
373
|
+
},
|
|
374
|
+
// Scrollbars
|
|
375
|
+
'& .cm-scroller::-webkit-scrollbar': {
|
|
376
|
+
width: generalScroller.width,
|
|
377
|
+
height: generalScroller.height,
|
|
378
|
+
},
|
|
379
|
+
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
380
|
+
background: lightBackground,
|
|
381
|
+
border: `2px solid ${base04}`,
|
|
382
|
+
},
|
|
383
|
+
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
384
|
+
backgroundColor: base03,
|
|
385
|
+
border: `2px solid ${base04}`,
|
|
386
|
+
borderRadius: generalScroller.borderRadius,
|
|
387
|
+
},
|
|
388
|
+
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
389
|
+
backgroundColor: darkBlue,
|
|
390
|
+
},
|
|
391
|
+
// Ghost text
|
|
392
|
+
'.cm-ghostText': {
|
|
393
|
+
opacity: '0.7',
|
|
394
|
+
color: base02,
|
|
395
|
+
},
|
|
396
|
+
}, { dark: false });
|
|
397
|
+
/**
|
|
398
|
+
* Enhanced syntax highlighting for High Contrast Light theme
|
|
399
|
+
*/
|
|
400
|
+
const highContrastLightHighlightStyle = language.HighlightStyle.define([
|
|
401
|
+
// Keywords and control flow
|
|
402
|
+
{ tag: highlight.tags.keyword, color: darkMagenta, fontWeight: 'bold' },
|
|
403
|
+
{ tag: highlight.tags.controlKeyword, color: darkMagenta, fontWeight: 'bold' },
|
|
404
|
+
{ tag: highlight.tags.moduleKeyword, color: darkMagenta, fontWeight: 'bold' },
|
|
405
|
+
// Names and variables
|
|
406
|
+
{ tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base04 },
|
|
407
|
+
{ tag: [highlight.tags.variableName], color: base04 },
|
|
408
|
+
{ tag: [highlight.tags.propertyName], color: darkBlue, fontStyle: 'normal' },
|
|
409
|
+
// Classes and types
|
|
410
|
+
{ tag: [highlight.tags.typeName], color: darkCyan },
|
|
411
|
+
{ tag: [highlight.tags.className], color: darkCyan, fontStyle: 'italic' },
|
|
412
|
+
{ tag: [highlight.tags.namespace], color: darkOrange, fontStyle: 'italic' },
|
|
413
|
+
// Operators and punctuation
|
|
414
|
+
{ tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: darkCyan },
|
|
415
|
+
{ tag: [highlight.tags.bracket], color: darkBrown },
|
|
416
|
+
{ tag: [highlight.tags.brace], color: darkCyan },
|
|
417
|
+
{ tag: [highlight.tags.punctuation], color: base04 },
|
|
418
|
+
// Functions and parameters
|
|
419
|
+
{ tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: darkBlue },
|
|
420
|
+
{ tag: [highlight.tags.definition(highlight.tags.function(highlight.tags.variableName))], color: darkBlue },
|
|
421
|
+
{ tag: [highlight.tags.definition(highlight.tags.variableName)], color: darkOrange },
|
|
422
|
+
// Constants and literals
|
|
423
|
+
{ tag: highlight.tags.number, color: darkOrange },
|
|
424
|
+
{ tag: highlight.tags.changed, color: darkOrange },
|
|
425
|
+
{ tag: highlight.tags.annotation, color: darkRed, fontStyle: 'italic' },
|
|
426
|
+
{ tag: highlight.tags.modifier, color: darkPurple, fontStyle: 'italic' },
|
|
427
|
+
{ tag: highlight.tags.self, color: darkRed },
|
|
428
|
+
{ tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: darkOrange },
|
|
429
|
+
{ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: darkOrange },
|
|
430
|
+
// Strings and regex
|
|
431
|
+
{ tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: darkGreen },
|
|
432
|
+
{ tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: darkMagenta },
|
|
433
|
+
{ tag: highlight.tags.string, color: darkGreen },
|
|
434
|
+
// Punctuation and structure
|
|
435
|
+
{ tag: highlight.tags.definition(highlight.tags.typeName), color: darkCyan, fontWeight: 'bold' },
|
|
436
|
+
{ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: darkBlue },
|
|
437
|
+
// Comments and documentation
|
|
438
|
+
{ tag: highlight.tags.meta, color: base02 },
|
|
439
|
+
{ tag: highlight.tags.comment, fontStyle: 'italic', color: base02 },
|
|
440
|
+
{ tag: highlight.tags.docComment, fontStyle: 'italic', color: base02 },
|
|
441
|
+
// HTML/XML elements
|
|
442
|
+
{ tag: [highlight.tags.tagName], color: darkMagenta },
|
|
443
|
+
{ tag: [highlight.tags.attributeName], color: darkCyan },
|
|
444
|
+
// Markdown and text formatting
|
|
445
|
+
{ tag: [highlight.tags.heading], fontWeight: 'bold', color: darkMagenta },
|
|
446
|
+
{ tag: [highlight.tags.strong], fontWeight: 'bold', color: darkOrange },
|
|
447
|
+
{ tag: [highlight.tags.emphasis], fontStyle: 'italic', color: darkMagenta },
|
|
448
|
+
// Links and URLs
|
|
449
|
+
{
|
|
450
|
+
tag: [highlight.tags.link],
|
|
451
|
+
color: visitedLinkColor,
|
|
452
|
+
fontWeight: '500',
|
|
453
|
+
textDecoration: 'underline',
|
|
454
|
+
textUnderlinePosition: 'under',
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
tag: [highlight.tags.url],
|
|
458
|
+
color: linkColor,
|
|
459
|
+
textDecoration: 'underline',
|
|
460
|
+
textUnderlineOffset: '2px',
|
|
461
|
+
},
|
|
462
|
+
// Special states
|
|
463
|
+
{
|
|
464
|
+
tag: [highlight.tags.invalid],
|
|
465
|
+
color: darkRed,
|
|
466
|
+
textDecoration: 'underline wavy',
|
|
467
|
+
borderBottom: `2px wavy ${darkRed}`,
|
|
468
|
+
},
|
|
469
|
+
{ tag: [highlight.tags.strikethrough], color: darkRed, textDecoration: 'line-through' },
|
|
470
|
+
// Enhanced syntax highlighting
|
|
471
|
+
{ tag: highlight.tags.constant(highlight.tags.name), color: darkOrange },
|
|
472
|
+
{ tag: highlight.tags.deleted, color: darkRed },
|
|
473
|
+
{ tag: highlight.tags.squareBracket, color: darkBrown },
|
|
474
|
+
{ tag: highlight.tags.angleBracket, color: darkCyan },
|
|
475
|
+
// Additional specific styles
|
|
476
|
+
{ tag: highlight.tags.monospace, color: darkBlue, fontStyle: 'italic' },
|
|
477
|
+
{ tag: [highlight.tags.contentSeparator], color: darkPurple },
|
|
478
|
+
{ tag: highlight.tags.quote, color: darkPurple },
|
|
479
|
+
]);
|
|
480
|
+
/**
|
|
481
|
+
* Combined High Contrast Light theme extension
|
|
482
|
+
*/
|
|
483
|
+
const highContrastLight = [
|
|
484
|
+
highContrastLightTheme,
|
|
485
|
+
language.syntaxHighlighting(highContrastLightHighlightStyle),
|
|
486
|
+
];
|
|
487
|
+
/**
|
|
488
|
+
* High Contrast Light merge revert styles configuration
|
|
489
|
+
*/
|
|
490
|
+
const highContrastLightMergeStyles = {
|
|
491
|
+
backgroundColor: lightBackground,
|
|
492
|
+
borderColor: darkBlue,
|
|
493
|
+
buttonColor: darkBlue,
|
|
494
|
+
buttonHoverColor: darkOrange,
|
|
495
|
+
};
|
|
496
|
+
|
|
497
|
+
exports.applyMergeRevertStyles = applyMergeRevertStyles;
|
|
498
|
+
exports.highContrastLight = highContrastLight;
|
|
499
|
+
exports.highContrastLightMergeStyles = highContrastLightMergeStyles;
|
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 Light theme extension
|
|
21
|
+
*/
|
|
22
|
+
declare const highContrastLight: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* High Contrast Light merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const highContrastLightMergeStyles: IMergeRevertStyles;
|
|
27
|
+
|
|
28
|
+
export { applyMergeRevertStyles, highContrastLight, highContrastLightMergeStyles };
|
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 High Contrast Light theme extension
|
|
21
|
+
*/
|
|
22
|
+
declare const highContrastLight: Extension;
|
|
23
|
+
/**
|
|
24
|
+
* High Contrast Light merge revert styles configuration
|
|
25
|
+
*/
|
|
26
|
+
declare const highContrastLightMergeStyles: IMergeRevertStyles;
|
|
27
|
+
|
|
28
|
+
export { applyMergeRevertStyles, highContrastLight, highContrastLightMergeStyles };
|