@fsegurai/codemirror-theme-forest 6.1.3 → 6.2.0-beta
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 +28 -28
- package/dist/index.cjs +285 -62
- package/dist/index.d.cts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +285 -62
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/
|
|
2
|
+
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/public/codemirror-themes.png">
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
6
|
<a href="https://github.com/fsegurai/codemirror-themes">
|
|
7
|
-
<img src="https://img.shields.io/azure-devops/build/fsegurai/Libraries%2520NodeJs/
|
|
7
|
+
<img src="https://img.shields.io/azure-devops/build/fsegurai/Libraries%2520NodeJs/16/main?label=Build%20Status&"
|
|
8
8
|
alt="Test Status">
|
|
9
9
|
</a>
|
|
10
10
|
<a href="https://www.npmjs.org/package/@fsegurai/codemirror-theme-forest">
|
|
@@ -69,32 +69,32 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
|
|
|
69
69
|
|
|
70
70
|
### Available Themes
|
|
71
71
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
- [
|
|
75
|
-
- [
|
|
76
|
-
- [
|
|
77
|
-
- [
|
|
78
|
-
- [
|
|
79
|
-
- [
|
|
80
|
-
|
|
81
|
-
- [
|
|
82
|
-
- [
|
|
83
|
-
- [
|
|
84
|
-
- [
|
|
85
|
-
- [
|
|
86
|
-
- [
|
|
87
|
-
- [
|
|
88
|
-
- [
|
|
89
|
-
- [
|
|
90
|
-
- [
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
- [
|
|
94
|
-
|
|
95
|
-
- [
|
|
96
|
-
|
|
97
|
-
|
|
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 Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) |  |
|
|
80
|
+
| Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) |  |
|
|
81
|
+
| Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) |  |
|
|
82
|
+
| GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) |  |
|
|
83
|
+
| GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) |  |
|
|
84
|
+
| Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) |  |
|
|
85
|
+
| Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) |  |
|
|
86
|
+
| Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) |  |
|
|
87
|
+
| Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) |  |
|
|
88
|
+
| Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) |  |
|
|
89
|
+
| Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) |  |
|
|
90
|
+
| Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) |  |
|
|
91
|
+
| Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) |  |
|
|
92
|
+
| Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) |  |
|
|
93
|
+
| Tokyo Night Storm | [@fsegurai/codemirror-theme-tokyo-night-storm](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-storm) |  |
|
|
94
|
+
| Tokyo Night Day | [@fsegurai/codemirror-theme-tokyo-night-day](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-day) |  |
|
|
95
|
+
| Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) |  |
|
|
96
|
+
| VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) |  |
|
|
97
|
+
| VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) |  |
|
|
98
98
|
|
|
99
99
|
### Demo Application
|
|
100
100
|
|
package/dist/index.cjs
CHANGED
|
@@ -3,116 +3,339 @@
|
|
|
3
3
|
var view = require('@codemirror/view');
|
|
4
4
|
var language = require('@codemirror/language');
|
|
5
5
|
var highlight = require('@lezer/highlight');
|
|
6
|
+
var _utils = require('@utils');
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Enhanced Forest theme color palette
|
|
10
|
+
* -----------------------------------
|
|
11
|
+
* Colors organized by natural forest elements with visual color blocks for reference
|
|
12
|
+
*/
|
|
13
|
+
// Core natural elements
|
|
14
|
+
const base00 = '#1a2a33'; // Background - deeper forest shade for better contrast
|
|
15
|
+
const base01 = '#d0d8e0'; // Foreground - clearer moonlight for better readability
|
|
16
|
+
// const base02 = '#2d3c44'; // Selection - dark forest floor, more defined
|
|
17
|
+
const base03 = '#607d8b'; // Comments - silvery bark gray, more legible
|
|
18
|
+
// Flora elements (accent colors)
|
|
19
|
+
const base04 = '#c594c5'; // Cursor - forest wildflower
|
|
20
|
+
const base05 = '#a9d3ab'; // Keywords - lighter, fresher leaf green
|
|
21
|
+
const base06 = '#4db6ac'; // Variables - clearer water reflection
|
|
22
|
+
const base07 = '#78aadc'; // Functions - brighter dusk sky
|
|
23
|
+
const base08 = '#ef5350'; // Strings - vibrant woodland berries
|
|
24
|
+
const base09 = '#bc8f6a'; // Numbers - rich forest soil
|
|
25
|
+
const base0A = '#ffb74d'; // Classes - golden sunlight through canopy
|
|
26
|
+
const base0B = '#9ccc65'; // Properties - fresh moss
|
|
27
|
+
const base0C = '#4dd0e1'; // Special chars - forest stream
|
|
28
|
+
const base0D = '#7986cb'; // Tags - morning mist
|
|
29
|
+
const base0E = '#ba68c8'; // Operators - purple wildflowers
|
|
30
|
+
// const base0F = '#f57f17'; // Metadata - autumn leaves
|
|
31
|
+
// UI-specific colors
|
|
32
|
+
const invalid = '#ff5252'; // Error highlight - warning red berry
|
|
33
|
+
const darkBackground = '#233039'; // Panel background - shadowy forest
|
|
34
|
+
const highlightBackground = '#314443aa'; // Active line - forest clearing with dappled light
|
|
35
|
+
const tooltipBackground = '#2a3b42'; // Tooltip background - darker canopy shadow
|
|
36
|
+
const cursor = base04; // Cursor color
|
|
37
|
+
const selection = '#2c5a3acc'; // Selection - translucent forest green
|
|
38
|
+
const selectionMatch = '#5d482faa'; // Selection match - amber forest light
|
|
39
|
+
const lineNumbers = '#607d8b90'; // Line numbers - faded tree bark
|
|
40
|
+
const activeBracketBg = '#2c5a3a80'; // Active bracket - forest green
|
|
41
|
+
const activeBracketBorder = base0A; // Active bracket border - golden sunlight
|
|
42
|
+
/**
|
|
43
|
+
* Enhanced editor theme styles for Forest
|
|
44
|
+
*/
|
|
27
45
|
const forestTheme = view.EditorView.theme({
|
|
46
|
+
// Base editor styles
|
|
28
47
|
'&': {
|
|
29
48
|
color: base01,
|
|
30
49
|
backgroundColor: base00,
|
|
50
|
+
fontSize: _utils.generalContent.fontSize,
|
|
51
|
+
fontFamily: _utils.generalContent.fontFamily,
|
|
31
52
|
},
|
|
53
|
+
// Content and cursor
|
|
32
54
|
'.cm-content': {
|
|
33
55
|
caretColor: cursor,
|
|
56
|
+
lineHeight: _utils.generalContent.lineHeight,
|
|
34
57
|
},
|
|
35
58
|
'.cm-cursor, .cm-dropCursor': {
|
|
36
59
|
borderLeftColor: cursor,
|
|
60
|
+
borderLeftWidth: _utils.generalCursor.borderLeftWidth,
|
|
37
61
|
},
|
|
62
|
+
'.cm-fat-cursor': {
|
|
63
|
+
backgroundColor: `${cursor}99`,
|
|
64
|
+
color: base00,
|
|
65
|
+
},
|
|
66
|
+
// Selection
|
|
38
67
|
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
|
|
39
68
|
backgroundColor: selection,
|
|
40
|
-
color:
|
|
69
|
+
color: base01,
|
|
41
70
|
},
|
|
71
|
+
// Make sure selection appears above active line
|
|
72
|
+
'.cm-selectionLayer': {
|
|
73
|
+
zIndex: 100,
|
|
74
|
+
},
|
|
75
|
+
// Search functionality
|
|
76
|
+
'.cm-searchMatch': {
|
|
77
|
+
backgroundColor: '#4d653b80',
|
|
78
|
+
outline: `1px solid ${base0A}90`,
|
|
79
|
+
color: base01,
|
|
80
|
+
borderRadius: _utils.generalSearchField.borderRadius,
|
|
81
|
+
'& span': {
|
|
82
|
+
color: base01,
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
86
|
+
backgroundColor: '#42855c',
|
|
87
|
+
color: base01,
|
|
88
|
+
padding: _utils.generalSearchField.padding,
|
|
89
|
+
'& span': {
|
|
90
|
+
color: base01,
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
'.cm-search.cm-panel.cm-textfield': {
|
|
94
|
+
color: base01,
|
|
95
|
+
borderRadius: _utils.generalSearchField.borderRadius,
|
|
96
|
+
padding: _utils.generalSearchField.padding,
|
|
97
|
+
},
|
|
98
|
+
// Panels
|
|
42
99
|
'.cm-panels': {
|
|
43
100
|
backgroundColor: darkBackground,
|
|
44
101
|
color: base01,
|
|
102
|
+
borderRadius: '0 0 4px 4px',
|
|
45
103
|
},
|
|
46
104
|
'.cm-panels.cm-panels-top': {
|
|
47
|
-
borderBottom: '
|
|
105
|
+
borderBottom: '1px solid #3e5059',
|
|
48
106
|
},
|
|
49
107
|
'.cm-panels.cm-panels-bottom': {
|
|
50
|
-
borderTop: '
|
|
108
|
+
borderTop: '1px solid #3e5059',
|
|
109
|
+
},
|
|
110
|
+
'.cm-panel button': {
|
|
111
|
+
backgroundColor: darkBackground,
|
|
112
|
+
color: base01,
|
|
113
|
+
border: _utils.generalPanel.border,
|
|
114
|
+
borderRadius: _utils.generalPanel.borderRadius,
|
|
115
|
+
padding: _utils.generalPanel.padding,
|
|
116
|
+
},
|
|
117
|
+
'.cm-panel button:hover': {
|
|
118
|
+
backgroundColor: '#2d3d47',
|
|
51
119
|
},
|
|
120
|
+
// Line highlighting
|
|
52
121
|
'.cm-activeLine': {
|
|
53
122
|
backgroundColor: highlightBackground,
|
|
123
|
+
borderRadius: _utils.generalLine.borderRadius,
|
|
124
|
+
zIndex: 1,
|
|
54
125
|
},
|
|
126
|
+
// Gutters
|
|
55
127
|
'.cm-gutters': {
|
|
56
128
|
backgroundColor: darkBackground,
|
|
57
|
-
color:
|
|
129
|
+
color: lineNumbers,
|
|
130
|
+
border: _utils.generalGutter.border,
|
|
131
|
+
borderRight: '1px solid #3e505980',
|
|
132
|
+
paddingRight: _utils.generalGutter.paddingRight,
|
|
58
133
|
},
|
|
59
134
|
'.cm-activeLineGutter': {
|
|
60
|
-
backgroundColor:
|
|
61
|
-
color:
|
|
135
|
+
backgroundColor: highlightBackground,
|
|
136
|
+
color: base01,
|
|
137
|
+
fontWeight: _utils.generalGutter.fontWeight,
|
|
138
|
+
},
|
|
139
|
+
'.cm-lineNumbers': {
|
|
140
|
+
fontSize: _utils.generalGutter.fontSize,
|
|
62
141
|
},
|
|
142
|
+
'.cm-foldGutter': {
|
|
143
|
+
fontSize: _utils.generalGutter.fontSize,
|
|
144
|
+
},
|
|
145
|
+
'.cm-foldGutter .cm-gutterElement': {
|
|
146
|
+
color: lineNumbers,
|
|
147
|
+
cursor: 'pointer',
|
|
148
|
+
},
|
|
149
|
+
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
150
|
+
color: base01,
|
|
151
|
+
},
|
|
152
|
+
// Tooltips and autocomplete
|
|
63
153
|
'.cm-tooltip': {
|
|
64
154
|
backgroundColor: tooltipBackground,
|
|
155
|
+
border: '1px solid #3e5059',
|
|
156
|
+
borderRadius: _utils.generalTooltip.borderRadius,
|
|
157
|
+
padding: _utils.generalTooltip.padding,
|
|
158
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
159
|
+
},
|
|
160
|
+
'.cm-tooltip-autocomplete': {
|
|
161
|
+
'& > ul': {
|
|
162
|
+
backgroundColor: tooltipBackground,
|
|
163
|
+
border: 'none',
|
|
164
|
+
},
|
|
165
|
+
'& > ul > li': {
|
|
166
|
+
padding: _utils.generalTooltip.padding,
|
|
167
|
+
lineHeight: _utils.generalTooltip.lineHeight,
|
|
168
|
+
},
|
|
169
|
+
'& > ul > li[aria-selected]': {
|
|
170
|
+
backgroundColor: selection,
|
|
171
|
+
color: base01,
|
|
172
|
+
borderRadius: _utils.generalTooltip.borderRadiusSelected,
|
|
173
|
+
},
|
|
174
|
+
'& > ul > li > span.cm-completionIcon': {
|
|
175
|
+
color: base03,
|
|
176
|
+
paddingRight: _utils.generalTooltip.paddingRight,
|
|
177
|
+
},
|
|
178
|
+
'& > ul > li > span.cm-completionDetail': {
|
|
179
|
+
color: base03,
|
|
180
|
+
fontStyle: 'italic',
|
|
181
|
+
},
|
|
182
|
+
},
|
|
183
|
+
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
184
|
+
borderTopColor: 'transparent',
|
|
185
|
+
borderBottomColor: 'transparent',
|
|
186
|
+
},
|
|
187
|
+
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
188
|
+
borderTopColor: tooltipBackground,
|
|
189
|
+
borderBottomColor: tooltipBackground,
|
|
190
|
+
},
|
|
191
|
+
// Diagnostics styling
|
|
192
|
+
'.cm-diagnostic': {
|
|
193
|
+
'&-error': {
|
|
194
|
+
borderLeft: `3px solid ${invalid}`,
|
|
195
|
+
},
|
|
196
|
+
'&-warning': {
|
|
197
|
+
borderLeft: `3px solid ${base0A}`,
|
|
198
|
+
},
|
|
199
|
+
'&-info': {
|
|
200
|
+
borderLeft: `3px solid ${base0C}`,
|
|
201
|
+
},
|
|
202
|
+
},
|
|
203
|
+
'.cm-lintPoint-error': {
|
|
204
|
+
borderBottom: `2px wavy ${invalid}`,
|
|
205
|
+
},
|
|
206
|
+
'.cm-lintPoint-warning': {
|
|
207
|
+
borderBottom: `2px wavy ${base0A}`,
|
|
208
|
+
},
|
|
209
|
+
// Matching brackets
|
|
210
|
+
'.cm-matchingBracket': {
|
|
211
|
+
backgroundColor: activeBracketBg,
|
|
212
|
+
outline: `1px solid ${activeBracketBorder}80`,
|
|
213
|
+
borderRadius: _utils.generalMatching.borderRadius,
|
|
65
214
|
},
|
|
215
|
+
'.cm-nonmatchingBracket': {
|
|
216
|
+
backgroundColor: '#5d482f80',
|
|
217
|
+
outline: `1px solid ${invalid}80`,
|
|
218
|
+
borderRadius: _utils.generalMatching.borderRadius,
|
|
219
|
+
},
|
|
220
|
+
// Selection matches
|
|
66
221
|
'.cm-selectionMatch': {
|
|
67
222
|
backgroundColor: selectionMatch,
|
|
223
|
+
outline: `1px solid ${base0A}40`,
|
|
224
|
+
borderRadius: _utils.generalMatching.borderRadius,
|
|
68
225
|
},
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
226
|
+
// Fold placeholder
|
|
227
|
+
'.cm-foldPlaceholder': {
|
|
228
|
+
backgroundColor: 'transparent',
|
|
229
|
+
color: base03,
|
|
230
|
+
border: `1px dotted ${base0A}70`,
|
|
231
|
+
borderRadius: _utils.generalPlaceholder.borderRadius,
|
|
232
|
+
padding: _utils.generalPlaceholder.padding,
|
|
233
|
+
margin: _utils.generalPlaceholder.margin,
|
|
73
234
|
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
235
|
+
// Focus outline
|
|
236
|
+
'&.cm-focused': {
|
|
237
|
+
outline: 'none',
|
|
238
|
+
boxShadow: `0 0 0 2px ${base00}, 0 0 0 3px ${base0A}40`,
|
|
77
239
|
},
|
|
78
|
-
|
|
79
|
-
|
|
240
|
+
// Scrollbars
|
|
241
|
+
'& .cm-scroller::-webkit-scrollbar': {
|
|
242
|
+
width: _utils.generalScroller.width,
|
|
243
|
+
height: _utils.generalScroller.height,
|
|
80
244
|
},
|
|
81
|
-
'
|
|
82
|
-
|
|
245
|
+
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
246
|
+
background: darkBackground,
|
|
83
247
|
},
|
|
84
|
-
'
|
|
85
|
-
|
|
248
|
+
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
249
|
+
backgroundColor: '#3e5059',
|
|
250
|
+
borderRadius: _utils.generalScroller.borderRadius,
|
|
251
|
+
border: `3px solid ${darkBackground}`,
|
|
86
252
|
},
|
|
87
|
-
'.cm-
|
|
88
|
-
|
|
253
|
+
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
254
|
+
backgroundColor: '#4e616a',
|
|
255
|
+
},
|
|
256
|
+
// Ghost text
|
|
257
|
+
'.cm-ghostText': {
|
|
258
|
+
opacity: '0.5',
|
|
259
|
+
color: '#8fa7b5',
|
|
89
260
|
},
|
|
90
261
|
}, { dark: true });
|
|
91
|
-
|
|
262
|
+
/**
|
|
263
|
+
* Enhanced syntax highlighting for Forest theme
|
|
264
|
+
*/
|
|
92
265
|
const forestHighlightStyle = language.HighlightStyle.define([
|
|
93
|
-
|
|
266
|
+
// Keywords and language constructs
|
|
267
|
+
{ tag: highlight.tags.keyword, color: base05, fontWeight: 'bold' },
|
|
268
|
+
{ tag: highlight.tags.controlKeyword, color: base05, fontWeight: 'bold' },
|
|
269
|
+
{ tag: highlight.tags.moduleKeyword, color: base05, fontWeight: 'bold' },
|
|
270
|
+
// Names and variables
|
|
94
271
|
{ tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base06 },
|
|
95
|
-
{ tag: [highlight.tags.
|
|
96
|
-
{ tag: [highlight.tags.
|
|
272
|
+
{ tag: [highlight.tags.variableName], color: base06 },
|
|
273
|
+
{ tag: [highlight.tags.propertyName], color: base0B, fontStyle: 'normal' },
|
|
274
|
+
// Classes and types
|
|
275
|
+
{ tag: [highlight.tags.typeName], color: base0A },
|
|
276
|
+
{ tag: [highlight.tags.className], color: base0A, fontStyle: 'italic' },
|
|
277
|
+
{ tag: [highlight.tags.namespace], color: base06, fontStyle: 'italic' },
|
|
278
|
+
// Operators and punctuation
|
|
279
|
+
{ tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base0E },
|
|
280
|
+
{ tag: [highlight.tags.bracket], color: base0E },
|
|
281
|
+
{ tag: [highlight.tags.brace], color: base0E },
|
|
282
|
+
{ tag: [highlight.tags.punctuation], color: base0E },
|
|
283
|
+
// Functions and parameters
|
|
97
284
|
{ tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base07 },
|
|
98
|
-
{ tag: [highlight.tags.
|
|
99
|
-
|
|
100
|
-
{ tag:
|
|
101
|
-
{ tag:
|
|
102
|
-
{ tag:
|
|
103
|
-
{ tag:
|
|
104
|
-
{ tag:
|
|
105
|
-
{ tag: [highlight.tags.
|
|
106
|
-
{ tag: highlight.tags.
|
|
107
|
-
|
|
108
|
-
{ tag: highlight.tags.
|
|
109
|
-
{ tag: highlight.tags.
|
|
110
|
-
{ tag: highlight.tags.
|
|
111
|
-
|
|
112
|
-
{ tag: highlight.tags.
|
|
113
|
-
|
|
285
|
+
{ tag: [highlight.tags.definition(highlight.tags.variableName)], color: base07 },
|
|
286
|
+
// Constants and literals
|
|
287
|
+
{ tag: highlight.tags.number, color: base09 },
|
|
288
|
+
{ tag: highlight.tags.changed, color: base09 },
|
|
289
|
+
{ tag: highlight.tags.annotation, color: invalid, fontStyle: 'italic' },
|
|
290
|
+
{ tag: highlight.tags.modifier, color: base09, fontStyle: 'italic' },
|
|
291
|
+
{ tag: highlight.tags.self, color: base09 },
|
|
292
|
+
{ tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base09, fontWeight: 'bold' },
|
|
293
|
+
{ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base09 },
|
|
294
|
+
// Strings and regex
|
|
295
|
+
{ tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base08 },
|
|
296
|
+
{ tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base08 },
|
|
297
|
+
{ tag: highlight.tags.string, color: base08 },
|
|
298
|
+
// Punctuation and structure
|
|
299
|
+
{ tag: highlight.tags.definition(highlight.tags.typeName), color: base0A, fontWeight: 'bold' },
|
|
300
|
+
// Comments and documentation
|
|
301
|
+
{ tag: highlight.tags.meta, color: base03 },
|
|
302
|
+
{ tag: highlight.tags.comment, fontStyle: 'italic', color: base03 },
|
|
303
|
+
{ tag: highlight.tags.docComment, fontStyle: 'italic', color: base03 },
|
|
304
|
+
// HTML/XML elements
|
|
305
|
+
{ tag: [highlight.tags.tagName], color: base0D },
|
|
306
|
+
{ tag: [highlight.tags.attributeName], color: base0C },
|
|
307
|
+
// Markdown and text formatting
|
|
308
|
+
{ tag: [highlight.tags.heading], fontWeight: 'bold', color: base0A },
|
|
309
|
+
{ tag: [highlight.tags.strong], fontWeight: 'bold', color: base05 },
|
|
310
|
+
{ tag: [highlight.tags.emphasis], fontStyle: 'italic', color: base06 },
|
|
311
|
+
// Links and URLs
|
|
312
|
+
{ tag: [highlight.tags.link], color: base0A, fontWeight: '500', textDecoration: 'underline', textUnderlinePosition: 'under' },
|
|
313
|
+
{
|
|
314
|
+
tag: [highlight.tags.url],
|
|
315
|
+
color: base0C,
|
|
316
|
+
textDecoration: 'underline',
|
|
317
|
+
textUnderlineOffset: '2px',
|
|
318
|
+
},
|
|
319
|
+
// Special states
|
|
320
|
+
{ tag: [highlight.tags.invalid], color: base01, textDecoration: 'underline wavy', borderBottom: `1px wavy ${invalid}` },
|
|
321
|
+
{ tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
|
|
322
|
+
// Enhanced syntax highlighting
|
|
323
|
+
{ tag: highlight.tags.constant(highlight.tags.name), color: base09 },
|
|
324
|
+
{ tag: highlight.tags.deleted, color: invalid },
|
|
325
|
+
{ tag: highlight.tags.squareBracket, color: base0E },
|
|
326
|
+
{ tag: highlight.tags.angleBracket, color: base0E },
|
|
327
|
+
// Additional specific styles
|
|
328
|
+
{ tag: highlight.tags.heading1, fontWeight: 'bold', color: base0A },
|
|
329
|
+
{ tag: highlight.tags.special(highlight.tags.heading1), fontWeight: 'bold', color: base0A },
|
|
330
|
+
{ tag: [highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4], fontWeight: 'bold', color: base0A },
|
|
331
|
+
{ tag: [highlight.tags.heading5, highlight.tags.heading6], color: base0A },
|
|
332
|
+
{ tag: highlight.tags.monospace, color: base01 },
|
|
333
|
+
{ tag: [highlight.tags.contentSeparator], color: base0C },
|
|
334
|
+
{ tag: highlight.tags.quote, color: base03 },
|
|
114
335
|
]);
|
|
115
|
-
|
|
336
|
+
/**
|
|
337
|
+
* Combined Forest theme extension
|
|
338
|
+
*/
|
|
116
339
|
const forest = [
|
|
117
340
|
forestTheme,
|
|
118
341
|
language.syntaxHighlighting(forestHighlightStyle),
|
package/dist/index.d.cts
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import { Extension } from '@codemirror/state';
|
|
2
2
|
import { HighlightStyle } from '@codemirror/language';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Enhanced editor theme styles for Forest
|
|
6
|
+
*/
|
|
4
7
|
declare const forestTheme: Extension;
|
|
8
|
+
/**
|
|
9
|
+
* Enhanced syntax highlighting for Forest theme
|
|
10
|
+
*/
|
|
5
11
|
declare const forestHighlightStyle: HighlightStyle;
|
|
12
|
+
/**
|
|
13
|
+
* Combined Forest theme extension
|
|
14
|
+
*/
|
|
6
15
|
declare const forest: Extension;
|
|
7
16
|
|
|
8
17
|
export { forest, forestHighlightStyle, forestTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import { Extension } from '@codemirror/state';
|
|
2
2
|
import { HighlightStyle } from '@codemirror/language';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Enhanced editor theme styles for Forest
|
|
6
|
+
*/
|
|
4
7
|
declare const forestTheme: Extension;
|
|
8
|
+
/**
|
|
9
|
+
* Enhanced syntax highlighting for Forest theme
|
|
10
|
+
*/
|
|
5
11
|
declare const forestHighlightStyle: HighlightStyle;
|
|
12
|
+
/**
|
|
13
|
+
* Combined Forest theme extension
|
|
14
|
+
*/
|
|
6
15
|
declare const forest: Extension;
|
|
7
16
|
|
|
8
17
|
export { forest, forestHighlightStyle, forestTheme };
|
package/dist/index.js
CHANGED
|
@@ -1,116 +1,339 @@
|
|
|
1
1
|
import { EditorView } from '@codemirror/view';
|
|
2
2
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
|
3
3
|
import { tags } from '@lezer/highlight';
|
|
4
|
+
import { generalScroller, generalPlaceholder, generalMatching, generalTooltip, generalGutter, generalLine, generalPanel, generalSearchField, generalCursor, generalContent } from '@utils';
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Enhanced Forest theme color palette
|
|
8
|
+
* -----------------------------------
|
|
9
|
+
* Colors organized by natural forest elements with visual color blocks for reference
|
|
10
|
+
*/
|
|
11
|
+
// Core natural elements
|
|
12
|
+
const base00 = '#1a2a33'; // Background - deeper forest shade for better contrast
|
|
13
|
+
const base01 = '#d0d8e0'; // Foreground - clearer moonlight for better readability
|
|
14
|
+
// const base02 = '#2d3c44'; // Selection - dark forest floor, more defined
|
|
15
|
+
const base03 = '#607d8b'; // Comments - silvery bark gray, more legible
|
|
16
|
+
// Flora elements (accent colors)
|
|
17
|
+
const base04 = '#c594c5'; // Cursor - forest wildflower
|
|
18
|
+
const base05 = '#a9d3ab'; // Keywords - lighter, fresher leaf green
|
|
19
|
+
const base06 = '#4db6ac'; // Variables - clearer water reflection
|
|
20
|
+
const base07 = '#78aadc'; // Functions - brighter dusk sky
|
|
21
|
+
const base08 = '#ef5350'; // Strings - vibrant woodland berries
|
|
22
|
+
const base09 = '#bc8f6a'; // Numbers - rich forest soil
|
|
23
|
+
const base0A = '#ffb74d'; // Classes - golden sunlight through canopy
|
|
24
|
+
const base0B = '#9ccc65'; // Properties - fresh moss
|
|
25
|
+
const base0C = '#4dd0e1'; // Special chars - forest stream
|
|
26
|
+
const base0D = '#7986cb'; // Tags - morning mist
|
|
27
|
+
const base0E = '#ba68c8'; // Operators - purple wildflowers
|
|
28
|
+
// const base0F = '#f57f17'; // Metadata - autumn leaves
|
|
29
|
+
// UI-specific colors
|
|
30
|
+
const invalid = '#ff5252'; // Error highlight - warning red berry
|
|
31
|
+
const darkBackground = '#233039'; // Panel background - shadowy forest
|
|
32
|
+
const highlightBackground = '#314443aa'; // Active line - forest clearing with dappled light
|
|
33
|
+
const tooltipBackground = '#2a3b42'; // Tooltip background - darker canopy shadow
|
|
34
|
+
const cursor = base04; // Cursor color
|
|
35
|
+
const selection = '#2c5a3acc'; // Selection - translucent forest green
|
|
36
|
+
const selectionMatch = '#5d482faa'; // Selection match - amber forest light
|
|
37
|
+
const lineNumbers = '#607d8b90'; // Line numbers - faded tree bark
|
|
38
|
+
const activeBracketBg = '#2c5a3a80'; // Active bracket - forest green
|
|
39
|
+
const activeBracketBorder = base0A; // Active bracket border - golden sunlight
|
|
40
|
+
/**
|
|
41
|
+
* Enhanced editor theme styles for Forest
|
|
42
|
+
*/
|
|
25
43
|
const forestTheme = /*@__PURE__*/EditorView.theme({
|
|
44
|
+
// Base editor styles
|
|
26
45
|
'&': {
|
|
27
46
|
color: base01,
|
|
28
47
|
backgroundColor: base00,
|
|
48
|
+
fontSize: generalContent.fontSize,
|
|
49
|
+
fontFamily: generalContent.fontFamily,
|
|
29
50
|
},
|
|
51
|
+
// Content and cursor
|
|
30
52
|
'.cm-content': {
|
|
31
53
|
caretColor: cursor,
|
|
54
|
+
lineHeight: generalContent.lineHeight,
|
|
32
55
|
},
|
|
33
56
|
'.cm-cursor, .cm-dropCursor': {
|
|
34
57
|
borderLeftColor: cursor,
|
|
58
|
+
borderLeftWidth: generalCursor.borderLeftWidth,
|
|
35
59
|
},
|
|
60
|
+
'.cm-fat-cursor': {
|
|
61
|
+
backgroundColor: `${cursor}99`,
|
|
62
|
+
color: base00,
|
|
63
|
+
},
|
|
64
|
+
// Selection
|
|
36
65
|
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
|
|
37
66
|
backgroundColor: selection,
|
|
38
|
-
color:
|
|
67
|
+
color: base01,
|
|
39
68
|
},
|
|
69
|
+
// Make sure selection appears above active line
|
|
70
|
+
'.cm-selectionLayer': {
|
|
71
|
+
zIndex: 100,
|
|
72
|
+
},
|
|
73
|
+
// Search functionality
|
|
74
|
+
'.cm-searchMatch': {
|
|
75
|
+
backgroundColor: '#4d653b80',
|
|
76
|
+
outline: `1px solid ${base0A}90`,
|
|
77
|
+
color: base01,
|
|
78
|
+
borderRadius: generalSearchField.borderRadius,
|
|
79
|
+
'& span': {
|
|
80
|
+
color: base01,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
84
|
+
backgroundColor: '#42855c',
|
|
85
|
+
color: base01,
|
|
86
|
+
padding: generalSearchField.padding,
|
|
87
|
+
'& span': {
|
|
88
|
+
color: base01,
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
'.cm-search.cm-panel.cm-textfield': {
|
|
92
|
+
color: base01,
|
|
93
|
+
borderRadius: generalSearchField.borderRadius,
|
|
94
|
+
padding: generalSearchField.padding,
|
|
95
|
+
},
|
|
96
|
+
// Panels
|
|
40
97
|
'.cm-panels': {
|
|
41
98
|
backgroundColor: darkBackground,
|
|
42
99
|
color: base01,
|
|
100
|
+
borderRadius: '0 0 4px 4px',
|
|
43
101
|
},
|
|
44
102
|
'.cm-panels.cm-panels-top': {
|
|
45
|
-
borderBottom: '
|
|
103
|
+
borderBottom: '1px solid #3e5059',
|
|
46
104
|
},
|
|
47
105
|
'.cm-panels.cm-panels-bottom': {
|
|
48
|
-
borderTop: '
|
|
106
|
+
borderTop: '1px solid #3e5059',
|
|
107
|
+
},
|
|
108
|
+
'.cm-panel button': {
|
|
109
|
+
backgroundColor: darkBackground,
|
|
110
|
+
color: base01,
|
|
111
|
+
border: generalPanel.border,
|
|
112
|
+
borderRadius: generalPanel.borderRadius,
|
|
113
|
+
padding: generalPanel.padding,
|
|
114
|
+
},
|
|
115
|
+
'.cm-panel button:hover': {
|
|
116
|
+
backgroundColor: '#2d3d47',
|
|
49
117
|
},
|
|
118
|
+
// Line highlighting
|
|
50
119
|
'.cm-activeLine': {
|
|
51
120
|
backgroundColor: highlightBackground,
|
|
121
|
+
borderRadius: generalLine.borderRadius,
|
|
122
|
+
zIndex: 1,
|
|
52
123
|
},
|
|
124
|
+
// Gutters
|
|
53
125
|
'.cm-gutters': {
|
|
54
126
|
backgroundColor: darkBackground,
|
|
55
|
-
color:
|
|
127
|
+
color: lineNumbers,
|
|
128
|
+
border: generalGutter.border,
|
|
129
|
+
borderRight: '1px solid #3e505980',
|
|
130
|
+
paddingRight: generalGutter.paddingRight,
|
|
56
131
|
},
|
|
57
132
|
'.cm-activeLineGutter': {
|
|
58
|
-
backgroundColor:
|
|
59
|
-
color:
|
|
133
|
+
backgroundColor: highlightBackground,
|
|
134
|
+
color: base01,
|
|
135
|
+
fontWeight: generalGutter.fontWeight,
|
|
136
|
+
},
|
|
137
|
+
'.cm-lineNumbers': {
|
|
138
|
+
fontSize: generalGutter.fontSize,
|
|
60
139
|
},
|
|
140
|
+
'.cm-foldGutter': {
|
|
141
|
+
fontSize: generalGutter.fontSize,
|
|
142
|
+
},
|
|
143
|
+
'.cm-foldGutter .cm-gutterElement': {
|
|
144
|
+
color: lineNumbers,
|
|
145
|
+
cursor: 'pointer',
|
|
146
|
+
},
|
|
147
|
+
'.cm-foldGutter .cm-gutterElement:hover': {
|
|
148
|
+
color: base01,
|
|
149
|
+
},
|
|
150
|
+
// Tooltips and autocomplete
|
|
61
151
|
'.cm-tooltip': {
|
|
62
152
|
backgroundColor: tooltipBackground,
|
|
153
|
+
border: '1px solid #3e5059',
|
|
154
|
+
borderRadius: generalTooltip.borderRadius,
|
|
155
|
+
padding: generalTooltip.padding,
|
|
156
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
157
|
+
},
|
|
158
|
+
'.cm-tooltip-autocomplete': {
|
|
159
|
+
'& > ul': {
|
|
160
|
+
backgroundColor: tooltipBackground,
|
|
161
|
+
border: 'none',
|
|
162
|
+
},
|
|
163
|
+
'& > ul > li': {
|
|
164
|
+
padding: generalTooltip.padding,
|
|
165
|
+
lineHeight: generalTooltip.lineHeight,
|
|
166
|
+
},
|
|
167
|
+
'& > ul > li[aria-selected]': {
|
|
168
|
+
backgroundColor: selection,
|
|
169
|
+
color: base01,
|
|
170
|
+
borderRadius: generalTooltip.borderRadiusSelected,
|
|
171
|
+
},
|
|
172
|
+
'& > ul > li > span.cm-completionIcon': {
|
|
173
|
+
color: base03,
|
|
174
|
+
paddingRight: generalTooltip.paddingRight,
|
|
175
|
+
},
|
|
176
|
+
'& > ul > li > span.cm-completionDetail': {
|
|
177
|
+
color: base03,
|
|
178
|
+
fontStyle: 'italic',
|
|
179
|
+
},
|
|
180
|
+
},
|
|
181
|
+
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
182
|
+
borderTopColor: 'transparent',
|
|
183
|
+
borderBottomColor: 'transparent',
|
|
184
|
+
},
|
|
185
|
+
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
186
|
+
borderTopColor: tooltipBackground,
|
|
187
|
+
borderBottomColor: tooltipBackground,
|
|
188
|
+
},
|
|
189
|
+
// Diagnostics styling
|
|
190
|
+
'.cm-diagnostic': {
|
|
191
|
+
'&-error': {
|
|
192
|
+
borderLeft: `3px solid ${invalid}`,
|
|
193
|
+
},
|
|
194
|
+
'&-warning': {
|
|
195
|
+
borderLeft: `3px solid ${base0A}`,
|
|
196
|
+
},
|
|
197
|
+
'&-info': {
|
|
198
|
+
borderLeft: `3px solid ${base0C}`,
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
'.cm-lintPoint-error': {
|
|
202
|
+
borderBottom: `2px wavy ${invalid}`,
|
|
203
|
+
},
|
|
204
|
+
'.cm-lintPoint-warning': {
|
|
205
|
+
borderBottom: `2px wavy ${base0A}`,
|
|
206
|
+
},
|
|
207
|
+
// Matching brackets
|
|
208
|
+
'.cm-matchingBracket': {
|
|
209
|
+
backgroundColor: activeBracketBg,
|
|
210
|
+
outline: `1px solid ${activeBracketBorder}80`,
|
|
211
|
+
borderRadius: generalMatching.borderRadius,
|
|
63
212
|
},
|
|
213
|
+
'.cm-nonmatchingBracket': {
|
|
214
|
+
backgroundColor: '#5d482f80',
|
|
215
|
+
outline: `1px solid ${invalid}80`,
|
|
216
|
+
borderRadius: generalMatching.borderRadius,
|
|
217
|
+
},
|
|
218
|
+
// Selection matches
|
|
64
219
|
'.cm-selectionMatch': {
|
|
65
220
|
backgroundColor: selectionMatch,
|
|
221
|
+
outline: `1px solid ${base0A}40`,
|
|
222
|
+
borderRadius: generalMatching.borderRadius,
|
|
66
223
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
224
|
+
// Fold placeholder
|
|
225
|
+
'.cm-foldPlaceholder': {
|
|
226
|
+
backgroundColor: 'transparent',
|
|
227
|
+
color: base03,
|
|
228
|
+
border: `1px dotted ${base0A}70`,
|
|
229
|
+
borderRadius: generalPlaceholder.borderRadius,
|
|
230
|
+
padding: generalPlaceholder.padding,
|
|
231
|
+
margin: generalPlaceholder.margin,
|
|
71
232
|
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
233
|
+
// Focus outline
|
|
234
|
+
'&.cm-focused': {
|
|
235
|
+
outline: 'none',
|
|
236
|
+
boxShadow: `0 0 0 2px ${base00}, 0 0 0 3px ${base0A}40`,
|
|
75
237
|
},
|
|
76
|
-
|
|
77
|
-
|
|
238
|
+
// Scrollbars
|
|
239
|
+
'& .cm-scroller::-webkit-scrollbar': {
|
|
240
|
+
width: generalScroller.width,
|
|
241
|
+
height: generalScroller.height,
|
|
78
242
|
},
|
|
79
|
-
'
|
|
80
|
-
|
|
243
|
+
'& .cm-scroller::-webkit-scrollbar-track': {
|
|
244
|
+
background: darkBackground,
|
|
81
245
|
},
|
|
82
|
-
'
|
|
83
|
-
|
|
246
|
+
'& .cm-scroller::-webkit-scrollbar-thumb': {
|
|
247
|
+
backgroundColor: '#3e5059',
|
|
248
|
+
borderRadius: generalScroller.borderRadius,
|
|
249
|
+
border: `3px solid ${darkBackground}`,
|
|
84
250
|
},
|
|
85
|
-
'.cm-
|
|
86
|
-
|
|
251
|
+
'& .cm-scroller::-webkit-scrollbar-thumb:hover': {
|
|
252
|
+
backgroundColor: '#4e616a',
|
|
253
|
+
},
|
|
254
|
+
// Ghost text
|
|
255
|
+
'.cm-ghostText': {
|
|
256
|
+
opacity: '0.5',
|
|
257
|
+
color: '#8fa7b5',
|
|
87
258
|
},
|
|
88
259
|
}, { dark: true });
|
|
89
|
-
|
|
260
|
+
/**
|
|
261
|
+
* Enhanced syntax highlighting for Forest theme
|
|
262
|
+
*/
|
|
90
263
|
const forestHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
91
|
-
|
|
264
|
+
// Keywords and language constructs
|
|
265
|
+
{ tag: tags.keyword, color: base05, fontWeight: 'bold' },
|
|
266
|
+
{ tag: tags.controlKeyword, color: base05, fontWeight: 'bold' },
|
|
267
|
+
{ tag: tags.moduleKeyword, color: base05, fontWeight: 'bold' },
|
|
268
|
+
// Names and variables
|
|
92
269
|
{ tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base06 },
|
|
93
|
-
{ tag: [tags.
|
|
94
|
-
{ tag: [tags.
|
|
270
|
+
{ tag: [tags.variableName], color: base06 },
|
|
271
|
+
{ tag: [tags.propertyName], color: base0B, fontStyle: 'normal' },
|
|
272
|
+
// Classes and types
|
|
273
|
+
{ tag: [tags.typeName], color: base0A },
|
|
274
|
+
{ tag: [tags.className], color: base0A, fontStyle: 'italic' },
|
|
275
|
+
{ tag: [tags.namespace], color: base06, fontStyle: 'italic' },
|
|
276
|
+
// Operators and punctuation
|
|
277
|
+
{ tag: [tags.operator, tags.operatorKeyword], color: base0E },
|
|
278
|
+
{ tag: [tags.bracket], color: base0E },
|
|
279
|
+
{ tag: [tags.brace], color: base0E },
|
|
280
|
+
{ tag: [tags.punctuation], color: base0E },
|
|
281
|
+
// Functions and parameters
|
|
95
282
|
{ tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base07 },
|
|
96
|
-
{ tag: [
|
|
97
|
-
|
|
98
|
-
{ tag:
|
|
99
|
-
{ tag:
|
|
100
|
-
{ tag:
|
|
101
|
-
{ tag:
|
|
102
|
-
{ tag:
|
|
103
|
-
{ tag: [tags.
|
|
104
|
-
{ tag: tags.
|
|
105
|
-
|
|
106
|
-
{ tag: tags.
|
|
107
|
-
{ tag: tags.
|
|
108
|
-
{ tag: tags.
|
|
109
|
-
|
|
110
|
-
{ tag: tags.
|
|
111
|
-
|
|
283
|
+
{ tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: base07 },
|
|
284
|
+
// Constants and literals
|
|
285
|
+
{ tag: tags.number, color: base09 },
|
|
286
|
+
{ tag: tags.changed, color: base09 },
|
|
287
|
+
{ tag: tags.annotation, color: invalid, fontStyle: 'italic' },
|
|
288
|
+
{ tag: tags.modifier, color: base09, fontStyle: 'italic' },
|
|
289
|
+
{ tag: tags.self, color: base09 },
|
|
290
|
+
{ tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base09, fontWeight: 'bold' },
|
|
291
|
+
{ tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base09 },
|
|
292
|
+
// Strings and regex
|
|
293
|
+
{ tag: [tags.processingInstruction, tags.inserted], color: base08 },
|
|
294
|
+
{ tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: base08 },
|
|
295
|
+
{ tag: tags.string, color: base08 },
|
|
296
|
+
// Punctuation and structure
|
|
297
|
+
{ tag: /*@__PURE__*/tags.definition(tags.typeName), color: base0A, fontWeight: 'bold' },
|
|
298
|
+
// Comments and documentation
|
|
299
|
+
{ tag: tags.meta, color: base03 },
|
|
300
|
+
{ tag: tags.comment, fontStyle: 'italic', color: base03 },
|
|
301
|
+
{ tag: tags.docComment, fontStyle: 'italic', color: base03 },
|
|
302
|
+
// HTML/XML elements
|
|
303
|
+
{ tag: [tags.tagName], color: base0D },
|
|
304
|
+
{ tag: [tags.attributeName], color: base0C },
|
|
305
|
+
// Markdown and text formatting
|
|
306
|
+
{ tag: [tags.heading], fontWeight: 'bold', color: base0A },
|
|
307
|
+
{ tag: [tags.strong], fontWeight: 'bold', color: base05 },
|
|
308
|
+
{ tag: [tags.emphasis], fontStyle: 'italic', color: base06 },
|
|
309
|
+
// Links and URLs
|
|
310
|
+
{ tag: [tags.link], color: base0A, fontWeight: '500', textDecoration: 'underline', textUnderlinePosition: 'under' },
|
|
311
|
+
{
|
|
312
|
+
tag: [tags.url],
|
|
313
|
+
color: base0C,
|
|
314
|
+
textDecoration: 'underline',
|
|
315
|
+
textUnderlineOffset: '2px',
|
|
316
|
+
},
|
|
317
|
+
// Special states
|
|
318
|
+
{ tag: [tags.invalid], color: base01, textDecoration: 'underline wavy', borderBottom: `1px wavy ${invalid}` },
|
|
319
|
+
{ tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
|
|
320
|
+
// Enhanced syntax highlighting
|
|
321
|
+
{ tag: /*@__PURE__*/tags.constant(tags.name), color: base09 },
|
|
322
|
+
{ tag: tags.deleted, color: invalid },
|
|
323
|
+
{ tag: tags.squareBracket, color: base0E },
|
|
324
|
+
{ tag: tags.angleBracket, color: base0E },
|
|
325
|
+
// Additional specific styles
|
|
326
|
+
{ tag: tags.heading1, fontWeight: 'bold', color: base0A },
|
|
327
|
+
{ tag: /*@__PURE__*/tags.special(tags.heading1), fontWeight: 'bold', color: base0A },
|
|
328
|
+
{ tag: [tags.heading2, tags.heading3, tags.heading4], fontWeight: 'bold', color: base0A },
|
|
329
|
+
{ tag: [tags.heading5, tags.heading6], color: base0A },
|
|
330
|
+
{ tag: tags.monospace, color: base01 },
|
|
331
|
+
{ tag: [tags.contentSeparator], color: base0C },
|
|
332
|
+
{ tag: tags.quote, color: base03 },
|
|
112
333
|
]);
|
|
113
|
-
|
|
334
|
+
/**
|
|
335
|
+
* Combined Forest theme extension
|
|
336
|
+
*/
|
|
114
337
|
const forest = [
|
|
115
338
|
forestTheme,
|
|
116
339
|
/*@__PURE__*/syntaxHighlighting(forestHighlightStyle),
|