@fsegurai/codemirror-theme-basic-dark 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.
Files changed (6) hide show
  1. package/README.md +28 -28
  2. package/dist/index.cjs +268 -128
  3. package/dist/index.d.cts +6 -7
  4. package/dist/index.d.ts +6 -7
  5. package/dist/index.js +268 -128
  6. 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/demo/public/codemirror-themes.png">
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/15/main?label=Build%20Status&"
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-basic-dark">
@@ -69,32 +69,32 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
69
69
 
70
70
  ### Available Themes
71
71
 
72
- - [All - Bundle](./packages/bundle)
73
- - [Abcdef](./packages/abcdef)
74
- - [Abyss](./packages/abyss)
75
- - [Android Studio](./packages/android-studio)
76
- - [Andromeda](./packages/andromeda)
77
- - [Basic Dark](./packages/basic-dark)
78
- - [Basic Light](./packages/basic-light)
79
- - [Forest](./packages/forest)
80
- - [GitHub Dark](./packages/github-dark)
81
- - [GitHub Light](./packages/github-light)
82
- - [Gruvbox Dark](./packages/gruvbox-dark)
83
- - [Gruvbox Light](./packages/gruvbox-light)
84
- - [Material Dark](./packages/material-dark)
85
- - [Material Light](./packages/material-light)
86
- - [Monokai](./packages/monokai)
87
- - [Nord](./packages/nord)
88
- - [Palenight](./packages/palenight)
89
- - [Solarized Dark](./packages/solarized-dark)
90
- - [Solarized Light](./packages/solarized-light)
91
- - [Tokyo Night Day](./packages/tokyo-night-day)
92
- - [Tokyo Night Storm](./packages/tokyo-night-storm)
93
- - [Volcano](./packages/volcano)
94
- - [VS Code Dark](./packages/vscode-dark)
95
- - [VS Code Light](./packages/vscode-light)
96
-
97
- For a full list, see the [<code>@fsegurai/codemirror-theme-bundle</code>](https://github.com/fsegurai/codemirror-themes/tree/main/packages/bundle) directory or the online demo.
72
+ | Theme | Package | Version |
73
+ |-------------------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|
74
+ | All - Bundle | [@fsegurai/codemirror-theme-bundle](https://www.npmjs.com/package/@fsegurai/codemirror-theme-bundle) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-bundle) |
75
+ | Abcdef | [@fsegurai/codemirror-theme-abcdef](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abcdef) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-abcdef) |
76
+ | Abyss | [@fsegurai/codemirror-theme-abyss](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abyss) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-abyss) |
77
+ | Android Studio | [@fsegurai/codemirror-theme-android-studio](https://www.npmjs.com/package/@fsegurai/codemirror-theme-android-studio) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-android-studio) |
78
+ | Andromeda | [@fsegurai/codemirror-theme-andromeda](https://www.npmjs.com/package/@fsegurai/codemirror-theme-andromeda) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-andromeda) |
79
+ | Basic Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-basic-light) |
80
+ | Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-basic-dark) |
81
+ | Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-forest) |
82
+ | GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-github-light) |
83
+ | GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-github-dark) |
84
+ | Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-gruvbox-light) |
85
+ | Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-gruvbox-dark) |
86
+ | Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-material-light) |
87
+ | Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-material-dark) |
88
+ | Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-monokai) |
89
+ | Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-nord) |
90
+ | Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-palenight) |
91
+ | Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-solarized-light) |
92
+ | Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) | ![npm](https://img.shields.io/npm/v/@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) | ![npm](https://img.shields.io/npm/v/@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) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-tokyo-night-day) |
95
+ | Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-volcano) |
96
+ | VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-vscode-dark) |
97
+ | VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) | ![npm](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-vscode-light) |
98
98
 
99
99
  ### Demo Application
100
100
 
package/dist/index.cjs CHANGED
@@ -3,72 +3,177 @@
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
- const base00 = '#2E3235', base01 = '#DDDDDD', base02 = '#B9D2FF', base03 = '#b0b0b0', base05 = '#e0e0e0', base06 = '#808080', base07 = '#000000', base08 = '#A54543', base09 = '#fc6d24', base0A = '#fda331', base0B = '#8abeb7', base0C = '#b5bd68', base0D = '#6fb3d2', base0E = '#cc99cc', base0F = '#6987AF';
8
- const invalid = base09, darkBackground = '#292d30', highlightBackground = base02 + '30', background = base00, tooltipBackground = base01, selection = '#b2cbf9b8', cursor = base01;
9
8
  /**
10
- The editor theme styles for Basic Dark.
11
- */
9
+ * Enhanced Basic Dark theme color palette
10
+ * ------------------------------------------
11
+ * Colors refined for better contrast and visual hierarchy
12
+ */
13
+ // Base colors
14
+ const base00 = '#1e2124', // Background (slightly darker for better contrast)
15
+ base01 = '#e2e2e2', // Foreground (slightly brighter for better readability)
16
+ base02 = '#5c88da', // Selection elements (more vibrant blue)
17
+ base03 = '#b8b8b8', // Comments, line numbers (slightly lighter)
18
+ base04 = '#ffffff', // Cursor (pure white for better visibility)
19
+ base05 = '#e4e4e4', // Panels foreground
20
+ base06 = '#909090', // Comments (slightly more visible gray)
21
+ base07 = '#000000', // Pure black for contrast elements
22
+ base08 = '#e06c75', // Error, deleted (more vibrant red)
23
+ base09 = '#f39c12', // Number, boolean (warmer orange)
24
+ base0A = '#ffcb6b', // Keywords (warmer yellow)
25
+ base0B = '#98c379', // Strings (more vibrant green)
26
+ base0C = '#56b6c2', // Classes, types (cyan blue)
27
+ base0D = '#61afef', // Functions, methods (bright blue)
28
+ base0E = '#c678dd', // Operators, brackets (brighter purple)
29
+ base0F = '#be5046', // Special elements (darker red)
30
+ // UI-specific colors
31
+ invalid = '#e06c75', // Error highlighting (consistent red)
32
+ darkBackground = '#252529', // Panel background (slightly darker)
33
+ selectionBackground = '#3a5991aa', // Selection background (semi-transparent blue)
34
+ highlightBackground = '#3a3d4166', // Active line background (subtle blue-gray)
35
+ tooltipBackground = '#2a2c31', // Tooltip background (darker than editor)
36
+ cursor = base04, activeBracketBg = '#3a599140', activeBracketBorder = base0E;
37
+ /**
38
+ * Enhanced editor theme styles for Basic Dark
39
+ */
12
40
  const basicDarkTheme = view.EditorView.theme({
41
+ // Base editor styles
13
42
  '&': {
14
43
  color: base01,
15
- backgroundColor: background,
44
+ backgroundColor: base00,
45
+ fontSize: _utils.generalContent.fontSize,
46
+ fontFamily: _utils.generalContent.fontFamily,
16
47
  },
48
+ // Content and cursor
17
49
  '.cm-content': {
18
50
  caretColor: cursor,
51
+ lineHeight: _utils.generalContent.lineHeight,
52
+ },
53
+ '.cm-cursor, .cm-dropCursor': {
54
+ borderLeftColor: cursor,
55
+ borderLeftWidth: _utils.generalCursor.borderLeftWidth,
56
+ },
57
+ '.cm-fat-cursor': {
58
+ backgroundColor: `${cursor}99`,
59
+ color: base00,
19
60
  },
20
- '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
61
+ // Selection
21
62
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
22
- backgroundColor: selection,
23
- color: '#000000',
63
+ backgroundColor: selectionBackground,
64
+ color: base01,
65
+ },
66
+ // Make sure selection appears above active line
67
+ '.cm-selectionLayer': {
68
+ zIndex: 100,
24
69
  },
25
- '.cm-panels': { backgroundColor: darkBackground, color: base03 },
26
- '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
27
- '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
70
+ // Search functionality
28
71
  '.cm-searchMatch': {
29
- backgroundColor: base02,
30
- outline: `1px solid ${base03}`,
31
- color: base07,
72
+ backgroundColor: '#4a74c480',
73
+ outline: `1px solid ${base02}`,
74
+ color: base01,
75
+ borderRadius: _utils.generalSearchField.borderRadius,
76
+ '& span': {
77
+ color: base01,
78
+ },
32
79
  },
33
80
  '.cm-searchMatch.cm-searchMatch-selected': {
34
- backgroundColor: base05,
35
- color: base07,
81
+ backgroundColor: '#5c88da90',
82
+ color: base01,
83
+ padding: _utils.generalSearchField.padding,
84
+ '& span': {
85
+ color: base01,
86
+ },
87
+ },
88
+ '.cm-search.cm-panel.cm-textfield': {
89
+ color: base05,
90
+ borderRadius: _utils.generalSearchField.borderRadius,
91
+ padding: _utils.generalSearchField.padding,
36
92
  },
37
- '.cm-searchMatch .cm-selectionMatch': {
38
- color: base07,
93
+ // Panels
94
+ '.cm-panels': {
95
+ backgroundColor: darkBackground,
96
+ color: base05,
97
+ borderRadius: '0 0 4px 4px',
98
+ },
99
+ '.cm-panels.cm-panels-top': {
100
+ borderBottom: '1px solid #3a3a3a',
39
101
  },
40
- '.cm-searchMatch .cm-selectionMatch .ͼ3w': {
41
- color: base07,
102
+ '.cm-panels.cm-panels-bottom': {
103
+ borderTop: '1px solid #3a3a3a',
42
104
  },
43
- '.cm-searchMatch .ͼ3w': {
44
- color: base07,
105
+ '.cm-panel button': {
106
+ backgroundColor: darkBackground,
107
+ color: base05,
108
+ border: _utils.generalPanel.border,
109
+ borderRadius: _utils.generalPanel.borderRadius,
110
+ padding: _utils.generalPanel.padding,
45
111
  },
46
- '.cm-activeLine': { backgroundColor: highlightBackground },
47
- '.cm-selectionMatch': { backgroundColor: highlightBackground },
48
- '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
49
- outline: `1px solid ${base03}`,
112
+ '.cm-panel button:hover': {
113
+ backgroundColor: '#35373d',
50
114
  },
51
- '&.cm-focused .cm-matchingBracket': {
52
- backgroundColor: base02,
53
- color: base07,
115
+ // Line highlighting
116
+ '.cm-activeLine': {
117
+ backgroundColor: highlightBackground,
118
+ borderRadius: _utils.generalLine.borderRadius,
119
+ zIndex: 1,
54
120
  },
121
+ // Gutters
55
122
  '.cm-gutters': {
56
- borderRight: '1px solid #ffffff10',
57
- color: base06,
58
123
  backgroundColor: darkBackground,
124
+ color: base06,
125
+ border: _utils.generalGutter.border,
126
+ borderRight: '1px solid #35383d',
127
+ paddingRight: _utils.generalGutter.paddingRight,
59
128
  },
60
129
  '.cm-activeLineGutter': {
61
- backgroundColor: selection,
62
- color: '#000000',
130
+ backgroundColor: highlightBackground,
131
+ color: base03,
132
+ fontWeight: _utils.generalGutter.fontWeight,
63
133
  },
64
- '.cm-foldPlaceholder': {
65
- backgroundColor: 'transparent',
66
- border: 'none',
67
- color: base02,
134
+ '.cm-lineNumbers': {
135
+ fontSize: _utils.generalGutter.fontSize,
68
136
  },
137
+ '.cm-foldGutter': {
138
+ fontSize: _utils.generalGutter.fontSize,
139
+ },
140
+ '.cm-foldGutter .cm-gutterElement': {
141
+ color: base06,
142
+ cursor: 'pointer',
143
+ },
144
+ '.cm-foldGutter .cm-gutterElement:hover': {
145
+ color: base01,
146
+ },
147
+ // Tooltips and autocomplete
69
148
  '.cm-tooltip': {
70
- border: 'none',
71
149
  backgroundColor: tooltipBackground,
150
+ border: '1px solid #3a3a3a',
151
+ borderRadius: _utils.generalTooltip.borderRadius,
152
+ padding: _utils.generalTooltip.padding,
153
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
154
+ },
155
+ '.cm-tooltip-autocomplete': {
156
+ '& > ul': {
157
+ backgroundColor: tooltipBackground,
158
+ border: 'none',
159
+ },
160
+ '& > ul > li': {
161
+ padding: _utils.generalTooltip.padding,
162
+ lineHeight: _utils.generalTooltip.lineHeight,
163
+ },
164
+ '& > ul > li[aria-selected]': {
165
+ backgroundColor: selectionBackground,
166
+ color: base01,
167
+ borderRadius: _utils.generalTooltip.borderRadiusSelected,
168
+ },
169
+ '& > ul > li > span.cm-completionIcon': {
170
+ color: base06,
171
+ paddingRight: _utils.generalTooltip.paddingRight,
172
+ },
173
+ '& > ul > li > span.cm-completionDetail': {
174
+ color: base06,
175
+ fontStyle: 'italic',
176
+ },
72
177
  },
73
178
  '.cm-tooltip .cm-tooltip-arrow:before': {
74
179
  borderTopColor: 'transparent',
@@ -78,115 +183,150 @@ const basicDarkTheme = view.EditorView.theme({
78
183
  borderTopColor: tooltipBackground,
79
184
  borderBottomColor: tooltipBackground,
80
185
  },
81
- '.cm-tooltip-autocomplete': {
82
- '& > ul > li[aria-selected]': {
83
- backgroundColor: highlightBackground,
84
- color: base03,
186
+ // Diagnostics styling
187
+ '.cm-diagnostic': {
188
+ '&-error': {
189
+ borderLeft: `3px solid ${invalid}`,
190
+ },
191
+ '&-warning': {
192
+ borderLeft: `3px solid ${base0A}`,
193
+ },
194
+ '&-info': {
195
+ borderLeft: `3px solid ${base0D}`,
85
196
  },
86
197
  },
87
- }, { dark: true });
88
- /**
89
- The highlighting style for code in the Basic Light theme.
90
- */
91
- const basicDarkHighlightStyle = language.HighlightStyle.define([
92
- { tag: highlight.tags.keyword, color: base0A },
93
- {
94
- tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
95
- color: base0C,
96
- },
97
- { tag: [highlight.tags.variableName], color: base0D },
98
- { tag: [highlight.tags.function(highlight.tags.variableName)], color: base0A },
99
- { tag: [highlight.tags.labelName], color: base09 },
100
- {
101
- tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
102
- color: base0A,
198
+ '.cm-lintPoint-error': {
199
+ borderBottom: `2px wavy ${invalid}`,
103
200
  },
104
- { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base0E },
105
- { tag: [highlight.tags.brace], color: base0E },
106
- {
107
- tag: [highlight.tags.annotation],
108
- color: invalid,
201
+ '.cm-lintPoint-warning': {
202
+ borderBottom: `2px wavy ${base0A}`,
109
203
  },
110
- {
111
- tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
112
- color: base0A,
204
+ // Matching brackets
205
+ '.cm-matchingBracket': {
206
+ backgroundColor: activeBracketBg,
207
+ outline: `1px solid ${activeBracketBorder}60`,
208
+ borderRadius: _utils.generalMatching.borderRadius,
113
209
  },
114
- {
115
- tag: [highlight.tags.typeName, highlight.tags.className],
116
- color: base0D,
210
+ '.cm-nonmatchingBracket': {
211
+ backgroundColor: '#e06c7540',
212
+ outline: `1px solid ${invalid}`,
213
+ borderRadius: _utils.generalMatching.borderRadius,
117
214
  },
118
- {
119
- tag: [highlight.tags.operator, highlight.tags.operatorKeyword],
120
- color: base0E,
215
+ // Selection matches
216
+ '.cm-selectionMatch': {
217
+ backgroundColor: '#4a74c440',
218
+ outline: `1px solid ${base02}50`,
219
+ borderRadius: _utils.generalMatching.borderRadius,
121
220
  },
122
- {
123
- tag: [highlight.tags.tagName],
124
- color: base0A,
221
+ // Fold placeholder
222
+ '.cm-foldPlaceholder': {
223
+ backgroundColor: 'transparent',
224
+ color: base02,
225
+ border: `1px dotted ${base02}70`,
226
+ borderRadius: _utils.generalPlaceholder.borderRadius,
227
+ padding: _utils.generalPlaceholder.padding,
228
+ margin: _utils.generalPlaceholder.margin,
125
229
  },
126
- {
127
- tag: [highlight.tags.squareBracket],
128
- color: base0E,
230
+ // Focus outline
231
+ '&.cm-focused': {
232
+ outline: 'none',
233
+ boxShadow: `0 0 0 2px ${base00}, 0 0 0 3px ${base02}40`,
129
234
  },
130
- {
131
- tag: [highlight.tags.angleBracket],
132
- color: base0E,
235
+ // Scrollbars
236
+ '& .cm-scroller::-webkit-scrollbar': {
237
+ width: _utils.generalScroller.width,
238
+ height: _utils.generalScroller.height,
133
239
  },
134
- {
135
- tag: [highlight.tags.attributeName],
136
- color: base0D,
240
+ '& .cm-scroller::-webkit-scrollbar-track': {
241
+ background: darkBackground,
137
242
  },
138
- {
139
- tag: [highlight.tags.regexp],
140
- color: base0A,
243
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
244
+ backgroundColor: '#444448',
245
+ borderRadius: _utils.generalScroller.borderRadius,
246
+ border: `3px solid ${darkBackground}`,
141
247
  },
142
- {
143
- tag: [highlight.tags.quote],
144
- color: base01,
248
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
249
+ backgroundColor: '#55555a',
145
250
  },
146
- { tag: [highlight.tags.string], color: base0C },
147
- {
148
- tag: highlight.tags.link,
149
- color: base0F,
150
- textDecoration: 'underline',
151
- textUnderlinePosition: 'under',
251
+ // Ghost text
252
+ '.cm-ghostText': {
253
+ opacity: '0.5',
254
+ color: '#b8b8b8',
152
255
  },
256
+ }, { dark: true });
257
+ /**
258
+ * Enhanced syntax highlighting for Basic Dark theme
259
+ */
260
+ const basicDarkHighlightStyle = language.HighlightStyle.define([
261
+ // Keywords and control flow
262
+ { tag: highlight.tags.keyword, color: base0A, fontWeight: 'bold' },
263
+ { tag: highlight.tags.controlKeyword, color: base0A, fontWeight: 'bold' },
264
+ { tag: highlight.tags.moduleKeyword, color: base0A, fontWeight: 'bold' },
265
+ // Names and variables
266
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base0D },
267
+ { tag: [highlight.tags.variableName], color: base0D },
268
+ { tag: [highlight.tags.propertyName], color: base0C, fontStyle: 'normal' },
269
+ // Classes and types
270
+ { tag: [highlight.tags.typeName], color: base0C },
271
+ { tag: [highlight.tags.className], color: base0C, fontStyle: 'italic' },
272
+ { tag: [highlight.tags.namespace], color: base0D, fontStyle: 'italic' },
273
+ // Operators and punctuation
274
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base0E },
275
+ { tag: [highlight.tags.bracket], color: base0E },
276
+ { tag: [highlight.tags.brace], color: base0E },
277
+ { tag: [highlight.tags.punctuation], color: base0E },
278
+ // Functions and parameters
279
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base0D },
280
+ { tag: [highlight.tags.definition(highlight.tags.variableName)], color: base0D },
281
+ // Constants and literals
282
+ { tag: highlight.tags.number, color: base09 },
283
+ { tag: highlight.tags.changed, color: base09 },
284
+ { tag: highlight.tags.annotation, color: invalid, fontStyle: 'italic' },
285
+ { tag: highlight.tags.modifier, color: base09, fontStyle: 'italic' },
286
+ { tag: highlight.tags.self, color: base09 },
287
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base09 },
288
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base09 },
289
+ // Strings and regex
290
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base0B },
291
+ { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base0B },
292
+ { tag: highlight.tags.string, color: base0B },
293
+ // Punctuation and structure
294
+ { tag: highlight.tags.definition(highlight.tags.typeName), color: base0C, fontWeight: 'bold' },
295
+ // Comments and documentation
296
+ { tag: highlight.tags.meta, color: base08 },
297
+ { tag: highlight.tags.comment, fontStyle: 'italic', color: base06 },
298
+ { tag: highlight.tags.docComment, fontStyle: 'italic', color: base06 },
299
+ // HTML/XML elements
300
+ { tag: [highlight.tags.tagName], color: base0A },
301
+ { tag: [highlight.tags.attributeName], color: base0D },
302
+ // Markdown and text formatting
303
+ { tag: [highlight.tags.heading], fontWeight: 'bold', color: base0A },
304
+ { tag: [highlight.tags.strong], fontWeight: 'bold', color: base09, textShadow: `0 0 2px ${base07}` },
305
+ { tag: [highlight.tags.emphasis], fontStyle: 'italic', color: base0D },
306
+ // Links and URLs
307
+ { tag: [highlight.tags.link], color: base0F, fontWeight: '500', textDecoration: 'underline', textUnderlinePosition: 'under' },
153
308
  {
154
- tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
309
+ tag: [highlight.tags.url],
155
310
  color: base0B,
156
- },
157
- { tag: [highlight.tags.meta], color: base08 },
158
- { tag: [highlight.tags.comment], color: base06, fontStyle: 'italic' },
311
+ textDecoration: 'underline',
312
+ textUnderlineOffset: '2px',
313
+ },
314
+ // Special states
315
+ { tag: [highlight.tags.invalid], color: base01, textDecoration: 'underline wavy', borderBottom: `1px wavy ${invalid}` },
316
+ { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
317
+ // Enhanced syntax highlighting
318
+ { tag: highlight.tags.constant(highlight.tags.name), color: base09 },
319
+ { tag: highlight.tags.deleted, color: invalid },
320
+ { tag: highlight.tags.squareBracket, color: base0E },
321
+ { tag: highlight.tags.angleBracket, color: base0E },
322
+ // Additional specific styles
159
323
  { tag: highlight.tags.monospace, color: base01 },
160
- { tag: highlight.tags.strong, fontWeight: 'bold', color: base0A },
161
- { tag: highlight.tags.emphasis, fontStyle: 'italic', color: base0D },
162
- { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
163
- { tag: highlight.tags.heading, fontWeight: 'bold', color: base01 },
164
- { tag: highlight.tags.special(highlight.tags.heading1), fontWeight: 'bold', color: base01 },
165
- { tag: highlight.tags.heading1, fontWeight: 'bold', color: base01 },
166
- {
167
- tag: [highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4],
168
- fontWeight: 'bold',
169
- color: base01,
170
- },
171
- {
172
- tag: [highlight.tags.heading5, highlight.tags.heading6],
173
- color: base01,
174
- },
175
- { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0B },
176
- {
177
- tag: [highlight.tags.processingInstruction, highlight.tags.inserted],
178
- color: base0B,
179
- },
180
- {
181
- tag: [highlight.tags.contentSeparator],
182
- color: base0D,
183
- },
184
- { tag: highlight.tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` },
324
+ { tag: [highlight.tags.contentSeparator], color: base0D },
325
+ { tag: highlight.tags.quote, color: base06 },
185
326
  ]);
186
327
  /**
187
- Extension to enable the Basic Dark theme (both the editor theme and
188
- the highlight style).
189
- */
328
+ * Combined Basic Dark theme extension
329
+ */
190
330
  const basicDark = [
191
331
  basicDarkTheme,
192
332
  language.syntaxHighlighting(basicDarkHighlightStyle),
package/dist/index.d.cts CHANGED
@@ -2,17 +2,16 @@ import { Extension } from '@codemirror/state';
2
2
  import { HighlightStyle } from '@codemirror/language';
3
3
 
4
4
  /**
5
- The editor theme styles for Basic Dark.
6
- */
5
+ * Enhanced editor theme styles for Basic Dark
6
+ */
7
7
  declare const basicDarkTheme: Extension;
8
8
  /**
9
- The highlighting style for code in the Basic Light theme.
10
- */
9
+ * Enhanced syntax highlighting for Basic Dark theme
10
+ */
11
11
  declare const basicDarkHighlightStyle: HighlightStyle;
12
12
  /**
13
- Extension to enable the Basic Dark theme (both the editor theme and
14
- the highlight style).
15
- */
13
+ * Combined Basic Dark theme extension
14
+ */
16
15
  declare const basicDark: Extension;
17
16
 
18
17
  export { basicDark, basicDarkHighlightStyle, basicDarkTheme };
package/dist/index.d.ts CHANGED
@@ -2,17 +2,16 @@ import { Extension } from '@codemirror/state';
2
2
  import { HighlightStyle } from '@codemirror/language';
3
3
 
4
4
  /**
5
- The editor theme styles for Basic Dark.
6
- */
5
+ * Enhanced editor theme styles for Basic Dark
6
+ */
7
7
  declare const basicDarkTheme: Extension;
8
8
  /**
9
- The highlighting style for code in the Basic Light theme.
10
- */
9
+ * Enhanced syntax highlighting for Basic Dark theme
10
+ */
11
11
  declare const basicDarkHighlightStyle: HighlightStyle;
12
12
  /**
13
- Extension to enable the Basic Dark theme (both the editor theme and
14
- the highlight style).
15
- */
13
+ * Combined Basic Dark theme extension
14
+ */
16
15
  declare const basicDark: Extension;
17
16
 
18
17
  export { basicDark, basicDarkHighlightStyle, basicDarkTheme };
package/dist/index.js CHANGED
@@ -1,72 +1,177 @@
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
- const base00 = '#2E3235', base01 = '#DDDDDD', base02 = '#B9D2FF', base03 = '#b0b0b0', base05 = '#e0e0e0', base06 = '#808080', base07 = '#000000', base08 = '#A54543', base09 = '#fc6d24', base0A = '#fda331', base0B = '#8abeb7', base0C = '#b5bd68', base0D = '#6fb3d2', base0E = '#cc99cc', base0F = '#6987AF';
6
- const invalid = base09, darkBackground = '#292d30', highlightBackground = base02 + '30', background = base00, tooltipBackground = base01, selection = '#b2cbf9b8', cursor = base01;
7
6
  /**
8
- The editor theme styles for Basic Dark.
9
- */
7
+ * Enhanced Basic Dark theme color palette
8
+ * ------------------------------------------
9
+ * Colors refined for better contrast and visual hierarchy
10
+ */
11
+ // Base colors
12
+ const base00 = '#1e2124', // Background (slightly darker for better contrast)
13
+ base01 = '#e2e2e2', // Foreground (slightly brighter for better readability)
14
+ base02 = '#5c88da', // Selection elements (more vibrant blue)
15
+ base03 = '#b8b8b8', // Comments, line numbers (slightly lighter)
16
+ base04 = '#ffffff', // Cursor (pure white for better visibility)
17
+ base05 = '#e4e4e4', // Panels foreground
18
+ base06 = '#909090', // Comments (slightly more visible gray)
19
+ base07 = '#000000', // Pure black for contrast elements
20
+ base08 = '#e06c75', // Error, deleted (more vibrant red)
21
+ base09 = '#f39c12', // Number, boolean (warmer orange)
22
+ base0A = '#ffcb6b', // Keywords (warmer yellow)
23
+ base0B = '#98c379', // Strings (more vibrant green)
24
+ base0C = '#56b6c2', // Classes, types (cyan blue)
25
+ base0D = '#61afef', // Functions, methods (bright blue)
26
+ base0E = '#c678dd', // Operators, brackets (brighter purple)
27
+ base0F = '#be5046', // Special elements (darker red)
28
+ // UI-specific colors
29
+ invalid = '#e06c75', // Error highlighting (consistent red)
30
+ darkBackground = '#252529', // Panel background (slightly darker)
31
+ selectionBackground = '#3a5991aa', // Selection background (semi-transparent blue)
32
+ highlightBackground = '#3a3d4166', // Active line background (subtle blue-gray)
33
+ tooltipBackground = '#2a2c31', // Tooltip background (darker than editor)
34
+ cursor = base04, activeBracketBg = '#3a599140', activeBracketBorder = base0E;
35
+ /**
36
+ * Enhanced editor theme styles for Basic Dark
37
+ */
10
38
  const basicDarkTheme = /*@__PURE__*/EditorView.theme({
39
+ // Base editor styles
11
40
  '&': {
12
41
  color: base01,
13
- backgroundColor: background,
42
+ backgroundColor: base00,
43
+ fontSize: generalContent.fontSize,
44
+ fontFamily: generalContent.fontFamily,
14
45
  },
46
+ // Content and cursor
15
47
  '.cm-content': {
16
48
  caretColor: cursor,
49
+ lineHeight: generalContent.lineHeight,
50
+ },
51
+ '.cm-cursor, .cm-dropCursor': {
52
+ borderLeftColor: cursor,
53
+ borderLeftWidth: generalCursor.borderLeftWidth,
54
+ },
55
+ '.cm-fat-cursor': {
56
+ backgroundColor: `${cursor}99`,
57
+ color: base00,
17
58
  },
18
- '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
59
+ // Selection
19
60
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
20
- backgroundColor: selection,
21
- color: '#000000',
61
+ backgroundColor: selectionBackground,
62
+ color: base01,
63
+ },
64
+ // Make sure selection appears above active line
65
+ '.cm-selectionLayer': {
66
+ zIndex: 100,
22
67
  },
23
- '.cm-panels': { backgroundColor: darkBackground, color: base03 },
24
- '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
25
- '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
68
+ // Search functionality
26
69
  '.cm-searchMatch': {
27
- backgroundColor: base02,
28
- outline: `1px solid ${base03}`,
29
- color: base07,
70
+ backgroundColor: '#4a74c480',
71
+ outline: `1px solid ${base02}`,
72
+ color: base01,
73
+ borderRadius: generalSearchField.borderRadius,
74
+ '& span': {
75
+ color: base01,
76
+ },
30
77
  },
31
78
  '.cm-searchMatch.cm-searchMatch-selected': {
32
- backgroundColor: base05,
33
- color: base07,
79
+ backgroundColor: '#5c88da90',
80
+ color: base01,
81
+ padding: generalSearchField.padding,
82
+ '& span': {
83
+ color: base01,
84
+ },
85
+ },
86
+ '.cm-search.cm-panel.cm-textfield': {
87
+ color: base05,
88
+ borderRadius: generalSearchField.borderRadius,
89
+ padding: generalSearchField.padding,
34
90
  },
35
- '.cm-searchMatch .cm-selectionMatch': {
36
- color: base07,
91
+ // Panels
92
+ '.cm-panels': {
93
+ backgroundColor: darkBackground,
94
+ color: base05,
95
+ borderRadius: '0 0 4px 4px',
96
+ },
97
+ '.cm-panels.cm-panels-top': {
98
+ borderBottom: '1px solid #3a3a3a',
37
99
  },
38
- '.cm-searchMatch .cm-selectionMatch .ͼ3w': {
39
- color: base07,
100
+ '.cm-panels.cm-panels-bottom': {
101
+ borderTop: '1px solid #3a3a3a',
40
102
  },
41
- '.cm-searchMatch .ͼ3w': {
42
- color: base07,
103
+ '.cm-panel button': {
104
+ backgroundColor: darkBackground,
105
+ color: base05,
106
+ border: generalPanel.border,
107
+ borderRadius: generalPanel.borderRadius,
108
+ padding: generalPanel.padding,
43
109
  },
44
- '.cm-activeLine': { backgroundColor: highlightBackground },
45
- '.cm-selectionMatch': { backgroundColor: highlightBackground },
46
- '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
47
- outline: `1px solid ${base03}`,
110
+ '.cm-panel button:hover': {
111
+ backgroundColor: '#35373d',
48
112
  },
49
- '&.cm-focused .cm-matchingBracket': {
50
- backgroundColor: base02,
51
- color: base07,
113
+ // Line highlighting
114
+ '.cm-activeLine': {
115
+ backgroundColor: highlightBackground,
116
+ borderRadius: generalLine.borderRadius,
117
+ zIndex: 1,
52
118
  },
119
+ // Gutters
53
120
  '.cm-gutters': {
54
- borderRight: '1px solid #ffffff10',
55
- color: base06,
56
121
  backgroundColor: darkBackground,
122
+ color: base06,
123
+ border: generalGutter.border,
124
+ borderRight: '1px solid #35383d',
125
+ paddingRight: generalGutter.paddingRight,
57
126
  },
58
127
  '.cm-activeLineGutter': {
59
- backgroundColor: selection,
60
- color: '#000000',
128
+ backgroundColor: highlightBackground,
129
+ color: base03,
130
+ fontWeight: generalGutter.fontWeight,
61
131
  },
62
- '.cm-foldPlaceholder': {
63
- backgroundColor: 'transparent',
64
- border: 'none',
65
- color: base02,
132
+ '.cm-lineNumbers': {
133
+ fontSize: generalGutter.fontSize,
66
134
  },
135
+ '.cm-foldGutter': {
136
+ fontSize: generalGutter.fontSize,
137
+ },
138
+ '.cm-foldGutter .cm-gutterElement': {
139
+ color: base06,
140
+ cursor: 'pointer',
141
+ },
142
+ '.cm-foldGutter .cm-gutterElement:hover': {
143
+ color: base01,
144
+ },
145
+ // Tooltips and autocomplete
67
146
  '.cm-tooltip': {
68
- border: 'none',
69
147
  backgroundColor: tooltipBackground,
148
+ border: '1px solid #3a3a3a',
149
+ borderRadius: generalTooltip.borderRadius,
150
+ padding: generalTooltip.padding,
151
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
152
+ },
153
+ '.cm-tooltip-autocomplete': {
154
+ '& > ul': {
155
+ backgroundColor: tooltipBackground,
156
+ border: 'none',
157
+ },
158
+ '& > ul > li': {
159
+ padding: generalTooltip.padding,
160
+ lineHeight: generalTooltip.lineHeight,
161
+ },
162
+ '& > ul > li[aria-selected]': {
163
+ backgroundColor: selectionBackground,
164
+ color: base01,
165
+ borderRadius: generalTooltip.borderRadiusSelected,
166
+ },
167
+ '& > ul > li > span.cm-completionIcon': {
168
+ color: base06,
169
+ paddingRight: generalTooltip.paddingRight,
170
+ },
171
+ '& > ul > li > span.cm-completionDetail': {
172
+ color: base06,
173
+ fontStyle: 'italic',
174
+ },
70
175
  },
71
176
  '.cm-tooltip .cm-tooltip-arrow:before': {
72
177
  borderTopColor: 'transparent',
@@ -76,115 +181,150 @@ const basicDarkTheme = /*@__PURE__*/EditorView.theme({
76
181
  borderTopColor: tooltipBackground,
77
182
  borderBottomColor: tooltipBackground,
78
183
  },
79
- '.cm-tooltip-autocomplete': {
80
- '& > ul > li[aria-selected]': {
81
- backgroundColor: highlightBackground,
82
- color: base03,
184
+ // Diagnostics styling
185
+ '.cm-diagnostic': {
186
+ '&-error': {
187
+ borderLeft: `3px solid ${invalid}`,
188
+ },
189
+ '&-warning': {
190
+ borderLeft: `3px solid ${base0A}`,
191
+ },
192
+ '&-info': {
193
+ borderLeft: `3px solid ${base0D}`,
83
194
  },
84
195
  },
85
- }, { dark: true });
86
- /**
87
- The highlighting style for code in the Basic Light theme.
88
- */
89
- const basicDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([
90
- { tag: tags.keyword, color: base0A },
91
- {
92
- tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
93
- color: base0C,
94
- },
95
- { tag: [tags.variableName], color: base0D },
96
- { tag: [/*@__PURE__*/tags.function(tags.variableName)], color: base0A },
97
- { tag: [tags.labelName], color: base09 },
98
- {
99
- tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)],
100
- color: base0A,
196
+ '.cm-lintPoint-error': {
197
+ borderBottom: `2px wavy ${invalid}`,
101
198
  },
102
- { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base0E },
103
- { tag: [tags.brace], color: base0E },
104
- {
105
- tag: [tags.annotation],
106
- color: invalid,
199
+ '.cm-lintPoint-warning': {
200
+ borderBottom: `2px wavy ${base0A}`,
107
201
  },
108
- {
109
- tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
110
- color: base0A,
202
+ // Matching brackets
203
+ '.cm-matchingBracket': {
204
+ backgroundColor: activeBracketBg,
205
+ outline: `1px solid ${activeBracketBorder}60`,
206
+ borderRadius: generalMatching.borderRadius,
111
207
  },
112
- {
113
- tag: [tags.typeName, tags.className],
114
- color: base0D,
208
+ '.cm-nonmatchingBracket': {
209
+ backgroundColor: '#e06c7540',
210
+ outline: `1px solid ${invalid}`,
211
+ borderRadius: generalMatching.borderRadius,
115
212
  },
116
- {
117
- tag: [tags.operator, tags.operatorKeyword],
118
- color: base0E,
213
+ // Selection matches
214
+ '.cm-selectionMatch': {
215
+ backgroundColor: '#4a74c440',
216
+ outline: `1px solid ${base02}50`,
217
+ borderRadius: generalMatching.borderRadius,
119
218
  },
120
- {
121
- tag: [tags.tagName],
122
- color: base0A,
219
+ // Fold placeholder
220
+ '.cm-foldPlaceholder': {
221
+ backgroundColor: 'transparent',
222
+ color: base02,
223
+ border: `1px dotted ${base02}70`,
224
+ borderRadius: generalPlaceholder.borderRadius,
225
+ padding: generalPlaceholder.padding,
226
+ margin: generalPlaceholder.margin,
123
227
  },
124
- {
125
- tag: [tags.squareBracket],
126
- color: base0E,
228
+ // Focus outline
229
+ '&.cm-focused': {
230
+ outline: 'none',
231
+ boxShadow: `0 0 0 2px ${base00}, 0 0 0 3px ${base02}40`,
127
232
  },
128
- {
129
- tag: [tags.angleBracket],
130
- color: base0E,
233
+ // Scrollbars
234
+ '& .cm-scroller::-webkit-scrollbar': {
235
+ width: generalScroller.width,
236
+ height: generalScroller.height,
131
237
  },
132
- {
133
- tag: [tags.attributeName],
134
- color: base0D,
238
+ '& .cm-scroller::-webkit-scrollbar-track': {
239
+ background: darkBackground,
135
240
  },
136
- {
137
- tag: [tags.regexp],
138
- color: base0A,
241
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
242
+ backgroundColor: '#444448',
243
+ borderRadius: generalScroller.borderRadius,
244
+ border: `3px solid ${darkBackground}`,
139
245
  },
140
- {
141
- tag: [tags.quote],
142
- color: base01,
246
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
247
+ backgroundColor: '#55555a',
143
248
  },
144
- { tag: [tags.string], color: base0C },
145
- {
146
- tag: tags.link,
147
- color: base0F,
148
- textDecoration: 'underline',
149
- textUnderlinePosition: 'under',
249
+ // Ghost text
250
+ '.cm-ghostText': {
251
+ opacity: '0.5',
252
+ color: '#b8b8b8',
150
253
  },
254
+ }, { dark: true });
255
+ /**
256
+ * Enhanced syntax highlighting for Basic Dark theme
257
+ */
258
+ const basicDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([
259
+ // Keywords and control flow
260
+ { tag: tags.keyword, color: base0A, fontWeight: 'bold' },
261
+ { tag: tags.controlKeyword, color: base0A, fontWeight: 'bold' },
262
+ { tag: tags.moduleKeyword, color: base0A, fontWeight: 'bold' },
263
+ // Names and variables
264
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base0D },
265
+ { tag: [tags.variableName], color: base0D },
266
+ { tag: [tags.propertyName], color: base0C, fontStyle: 'normal' },
267
+ // Classes and types
268
+ { tag: [tags.typeName], color: base0C },
269
+ { tag: [tags.className], color: base0C, fontStyle: 'italic' },
270
+ { tag: [tags.namespace], color: base0D, fontStyle: 'italic' },
271
+ // Operators and punctuation
272
+ { tag: [tags.operator, tags.operatorKeyword], color: base0E },
273
+ { tag: [tags.bracket], color: base0E },
274
+ { tag: [tags.brace], color: base0E },
275
+ { tag: [tags.punctuation], color: base0E },
276
+ // Functions and parameters
277
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base0D },
278
+ { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: base0D },
279
+ // Constants and literals
280
+ { tag: tags.number, color: base09 },
281
+ { tag: tags.changed, color: base09 },
282
+ { tag: tags.annotation, color: invalid, fontStyle: 'italic' },
283
+ { tag: tags.modifier, color: base09, fontStyle: 'italic' },
284
+ { tag: tags.self, color: base09 },
285
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base09 },
286
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base09 },
287
+ // Strings and regex
288
+ { tag: [tags.processingInstruction, tags.inserted], color: base0B },
289
+ { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: base0B },
290
+ { tag: tags.string, color: base0B },
291
+ // Punctuation and structure
292
+ { tag: /*@__PURE__*/tags.definition(tags.typeName), color: base0C, fontWeight: 'bold' },
293
+ // Comments and documentation
294
+ { tag: tags.meta, color: base08 },
295
+ { tag: tags.comment, fontStyle: 'italic', color: base06 },
296
+ { tag: tags.docComment, fontStyle: 'italic', color: base06 },
297
+ // HTML/XML elements
298
+ { tag: [tags.tagName], color: base0A },
299
+ { tag: [tags.attributeName], color: base0D },
300
+ // Markdown and text formatting
301
+ { tag: [tags.heading], fontWeight: 'bold', color: base0A },
302
+ { tag: [tags.strong], fontWeight: 'bold', color: base09, textShadow: `0 0 2px ${base07}` },
303
+ { tag: [tags.emphasis], fontStyle: 'italic', color: base0D },
304
+ // Links and URLs
305
+ { tag: [tags.link], color: base0F, fontWeight: '500', textDecoration: 'underline', textUnderlinePosition: 'under' },
151
306
  {
152
- tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)],
307
+ tag: [tags.url],
153
308
  color: base0B,
154
- },
155
- { tag: [tags.meta], color: base08 },
156
- { tag: [tags.comment], color: base06, fontStyle: 'italic' },
309
+ textDecoration: 'underline',
310
+ textUnderlineOffset: '2px',
311
+ },
312
+ // Special states
313
+ { tag: [tags.invalid], color: base01, textDecoration: 'underline wavy', borderBottom: `1px wavy ${invalid}` },
314
+ { tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
315
+ // Enhanced syntax highlighting
316
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: base09 },
317
+ { tag: tags.deleted, color: invalid },
318
+ { tag: tags.squareBracket, color: base0E },
319
+ { tag: tags.angleBracket, color: base0E },
320
+ // Additional specific styles
157
321
  { tag: tags.monospace, color: base01 },
158
- { tag: tags.strong, fontWeight: 'bold', color: base0A },
159
- { tag: tags.emphasis, fontStyle: 'italic', color: base0D },
160
- { tag: tags.strikethrough, textDecoration: 'line-through' },
161
- { tag: tags.heading, fontWeight: 'bold', color: base01 },
162
- { tag: /*@__PURE__*/tags.special(tags.heading1), fontWeight: 'bold', color: base01 },
163
- { tag: tags.heading1, fontWeight: 'bold', color: base01 },
164
- {
165
- tag: [tags.heading2, tags.heading3, tags.heading4],
166
- fontWeight: 'bold',
167
- color: base01,
168
- },
169
- {
170
- tag: [tags.heading5, tags.heading6],
171
- color: base01,
172
- },
173
- { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0B },
174
- {
175
- tag: [tags.processingInstruction, tags.inserted],
176
- color: base0B,
177
- },
178
- {
179
- tag: [tags.contentSeparator],
180
- color: base0D,
181
- },
182
- { tag: tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` },
322
+ { tag: [tags.contentSeparator], color: base0D },
323
+ { tag: tags.quote, color: base06 },
183
324
  ]);
184
325
  /**
185
- Extension to enable the Basic Dark theme (both the editor theme and
186
- the highlight style).
187
- */
326
+ * Combined Basic Dark theme extension
327
+ */
188
328
  const basicDark = [
189
329
  basicDarkTheme,
190
330
  /*@__PURE__*/syntaxHighlighting(basicDarkHighlightStyle),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fsegurai/codemirror-theme-basic-dark",
3
3
  "description": "Basic Dark theme for the CodeMirror code editor",
4
- "version": "6.1.3",
4
+ "version": "6.2.0-beta",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "exports": {