@fsegurai/codemirror-theme-abyss 6.1.4 → 6.2.0-beta.1

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 +27 -27
  2. package/dist/index.cjs +272 -49
  3. package/dist/index.d.cts +9 -0
  4. package/dist/index.d.ts +9 -0
  5. package/dist/index.js +272 -49
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
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">
@@ -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,89 +3,312 @@
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
- // Abyss theme colors
8
- const base00 = '#000c18', // Background
9
- base01 = '#6688cc', // Foreground
10
- base02 = '#770811', // Selection
11
- base03 = '#181f2f', // Dropdown Background
12
- base04 = '#ddbb88', // Cursor
13
- base05 = '#0055ff30', // Active line
14
- base06 = '#FFFFFF', // Another placeholder
15
- base07 = '#225588', // Keyword, Storage
16
- base08 = '#2277ff', // Variable, Parameter
17
- base09 = '#384887', // Comment
18
- base0A = '#22aa44', // String, RegExp
19
- base0B = '#9966b8', // Function, Type
20
- base0C = '#f280d0', // Constant, Number
21
- base0D = '#ddbb88', // Class
22
- base0E = '#6688cc', // Heading
23
- base0F = '#225588', // Tag
24
- base10 = '#ff00ff8a', // Link
25
- invalid = '#A22D44'; // Invalid
26
- // Define the editor theme styles for Abyss.
8
+ // Base colors - Ocean depths
9
+ const base00 = '#000c18', // - Background (deep ocean blue)
10
+ base01 = '#a3c9e9', // - Foreground (lighter blue for enhanced readability)
11
+ base02 = '#0e6299', // - Selection (more vibrant blue for better visibility)
12
+ base03 = '#b4a2f7', // - Gutter background (darker for contrast)
13
+ base04 = '#e6d4a3', // - Cursor (warmer gold for better visibility)
14
+ base05 = '#0066ff20', // - Active line (subtle blue tint)
15
+ base06 = '#ffffff', // - Pure white for maximum contrast
16
+ base07 = '#47c1ff', // - Keywords (brighter cyan blue)
17
+ base08 = '#5caeff', // - Variables (softer azure blue)
18
+ base09 = '#7599c2', // - Comments (brighter blue-gray)
19
+ base0A = '#4ce660', // - Strings (kept vibrant green for contrast)
20
+ base0B = '#c3a2f7', // - Functions (softer purple)
21
+ base0C = '#ff9eea', // - Constants (softer pink)
22
+ base0D = '#ffd47b', // - Classes (warmer gold)
23
+ base0E = '#8eb8ff', // - Headings (brighter sky blue)
24
+ base0F = '#59d6ff', // - Tags (brighter cyan)
25
+ base10 = '#ff50c8', // - Links (brighter magenta)
26
+ base11 = '#66ecd4', // - URLs (brighter teal)
27
+ // UI elements
28
+ invalid = '#ff5370', darkBackground = '#0a1422', // Darker background for better contrast
29
+ highlightBackground = '#0055ff15', tooltipBackground = '#05101d', // Darker tooltip for better contrast
30
+ cursor = base04, selection = base02, activeBracketBg = '#0a5999b0', activeBracketBorder = base0F;
31
+ /**
32
+ * Enhanced editor theme styles for Abyss
33
+ */
27
34
  const abyssTheme = view.EditorView.theme({
35
+ // Base editor styles
28
36
  '&': {
29
37
  color: base01,
30
38
  backgroundColor: base00,
39
+ fontSize: _utils.generalContent.fontSize,
40
+ fontFamily: _utils.generalContent.fontFamily,
31
41
  },
42
+ // Content and cursor
32
43
  '.cm-content': {
33
- caretColor: base04,
44
+ caretColor: cursor,
45
+ lineHeight: _utils.generalContent.lineHeight,
34
46
  },
35
47
  '.cm-cursor, .cm-dropCursor': {
36
- borderLeftColor: base04,
48
+ borderLeftColor: cursor,
49
+ borderLeftWidth: _utils.generalCursor.borderLeftWidth,
37
50
  },
51
+ '.cm-fat-cursor': {
52
+ backgroundColor: `${cursor}99`,
53
+ color: base00,
54
+ },
55
+ // Selection
38
56
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
39
- backgroundColor: base02,
57
+ backgroundColor: selection,
40
58
  },
59
+ // Search functionality
41
60
  '.cm-searchMatch': {
42
- backgroundColor: base0B,
43
- outline: `1px solid ${base03}`,
44
- color: base06,
61
+ backgroundColor: '#155ab380',
62
+ outline: `1px solid ${base08}`,
63
+ borderRadius: _utils.generalSearchField.borderRadius,
64
+ '& span': {
65
+ color: base06,
66
+ },
45
67
  },
46
68
  '.cm-searchMatch.cm-searchMatch-selected': {
47
- backgroundColor: base10,
69
+ backgroundColor: '#2a6ac080',
48
70
  color: base06,
71
+ padding: _utils.generalSearchField.padding,
72
+ '& span': {
73
+ color: base06,
74
+ },
75
+ },
76
+ '.cm-search.cm-panel.cm-textfield': {
77
+ color: base01,
78
+ borderRadius: _utils.generalSearchField.borderRadius,
79
+ padding: _utils.generalSearchField.padding,
49
80
  },
81
+ // Panels
50
82
  '.cm-panels': {
51
- backgroundColor: base03,
83
+ backgroundColor: darkBackground,
84
+ color: base01,
85
+ },
86
+ '.cm-panels.cm-panels-top': {
87
+ borderBottom: '2px solid #0a3555',
88
+ },
89
+ '.cm-panels.cm-panels-bottom': {
90
+ borderTop: '2px solid #0a3555',
91
+ },
92
+ '.cm-panel button': {
93
+ backgroundColor: darkBackground,
52
94
  color: base01,
95
+ border: _utils.generalPanel.border,
96
+ borderRadius: _utils.generalPanel.borderRadius,
97
+ padding: _utils.generalPanel.padding,
53
98
  },
99
+ '.cm-panel button:hover': {
100
+ backgroundColor: '#0a3555',
101
+ },
102
+ // Line highlighting
54
103
  '.cm-activeLine': {
55
- backgroundColor: base05,
104
+ backgroundColor: highlightBackground,
105
+ borderRadius: _utils.generalLine.borderRadius,
56
106
  },
107
+ // Gutters
57
108
  '.cm-gutters': {
58
- backgroundColor: base03, // Assuming the dropdown background color for gutters
109
+ backgroundColor: darkBackground,
110
+ color: '#5f7e97',
111
+ border: _utils.generalGutter.border,
112
+ paddingRight: _utils.generalGutter.paddingRight,
113
+ },
114
+ '.cm-activeLineGutter': {
115
+ backgroundColor: highlightBackground,
116
+ color: base01,
117
+ fontWeight: _utils.generalGutter.fontWeight,
118
+ },
119
+ '.cm-lineNumbers': {
120
+ fontSize: _utils.generalGutter.fontSize,
121
+ },
122
+ '.cm-foldGutter': {
123
+ fontSize: _utils.generalGutter.fontSize,
124
+ },
125
+ '.cm-foldGutter .cm-gutterElement': {
126
+ color: '#5f7e97',
127
+ cursor: 'pointer',
128
+ },
129
+ '.cm-foldGutter .cm-gutterElement:hover': {
59
130
  color: base01,
60
131
  },
132
+ // Tooltips and autocomplete
61
133
  '.cm-tooltip': {
62
- backgroundColor: base01,
134
+ backgroundColor: tooltipBackground,
135
+ border: '1px solid #084671',
136
+ borderRadius: _utils.generalTooltip.borderRadius,
137
+ padding: _utils.generalTooltip.padding,
138
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
139
+ },
140
+ '.cm-tooltip-autocomplete': {
141
+ '& > ul > li': {
142
+ padding: _utils.generalTooltip.padding,
143
+ lineHeight: _utils.generalTooltip.lineHeight,
144
+ },
145
+ '& > ul > li[aria-selected]': {
146
+ backgroundColor: '#084671',
147
+ color: '#e0edff',
148
+ borderRadius: _utils.generalTooltip.borderRadiusSelected,
149
+ },
150
+ '& > ul > li > span.cm-completionIcon': {
151
+ color: '#5f7e97',
152
+ paddingRight: _utils.generalTooltip.paddingRight,
153
+ },
154
+ '& > ul > li > span.cm-completionDetail': {
155
+ color: '#5f7e97',
156
+ fontStyle: 'italic',
157
+ },
158
+ },
159
+ '.cm-tooltip .cm-tooltip-arrow:before': {
160
+ borderTopColor: 'transparent',
161
+ borderBottomColor: 'transparent',
162
+ },
163
+ '.cm-tooltip .cm-tooltip-arrow:after': {
164
+ borderTopColor: tooltipBackground,
165
+ borderBottomColor: tooltipBackground,
166
+ },
167
+ // Diagnostics styling
168
+ '.cm-diagnostic': {
169
+ '&-error': {
170
+ borderLeft: `3px solid ${invalid}`,
171
+ },
172
+ '&-warning': {
173
+ borderLeft: `3px solid ${base0A}`,
174
+ },
175
+ '&-info': {
176
+ borderLeft: `3px solid ${base0B}`,
177
+ },
178
+ },
179
+ '.cm-lintPoint-error': {
180
+ borderBottom: `2px wavy ${invalid}`,
181
+ },
182
+ '.cm-lintPoint-warning': {
183
+ borderBottom: `2px wavy ${base0A}`,
184
+ },
185
+ // Matching brackets
186
+ '.cm-matchingBracket': {
187
+ backgroundColor: activeBracketBg,
188
+ outline: `1px solid ${activeBracketBorder}`,
189
+ borderRadius: _utils.generalMatching.borderRadius,
190
+ },
191
+ '.cm-nonmatchingBracket': {
192
+ backgroundColor: '#780e1e80',
193
+ outline: `1px solid ${invalid}`,
194
+ borderRadius: _utils.generalMatching.borderRadius,
195
+ },
196
+ // Selection matches
197
+ '.cm-selectionMatch': {
198
+ backgroundColor: '#155ab340',
199
+ outline: `1px solid ${base08}`,
200
+ borderRadius: _utils.generalMatching.borderRadius,
201
+ },
202
+ // Fold placeholder
203
+ '.cm-foldPlaceholder': {
204
+ backgroundColor: 'transparent',
205
+ color: '#5f7e97',
206
+ fontStyle: 'italic',
207
+ border: `1px dotted ${activeBracketBorder}`,
208
+ borderRadius: _utils.generalPlaceholder.borderRadius,
209
+ padding: _utils.generalPlaceholder.padding,
210
+ margin: _utils.generalPlaceholder.margin,
211
+ },
212
+ // Focus outline
213
+ '&.cm-focused': {
214
+ outline: 'none',
215
+ boxShadow: `0 0 0 2px ${base05}, 0 0 0 4px ${base00}`,
216
+ },
217
+ // Scrollbars
218
+ '& .cm-scroller::-webkit-scrollbar': {
219
+ width: _utils.generalScroller.width,
220
+ height: _utils.generalScroller.height,
221
+ },
222
+ '& .cm-scroller::-webkit-scrollbar-track': {
223
+ background: darkBackground,
224
+ },
225
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
226
+ backgroundColor: '#5f7e97',
227
+ borderRadius: _utils.generalScroller.borderRadius,
228
+ border: `3px solid ${darkBackground}`,
229
+ },
230
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
231
+ backgroundColor: '#4cc9ff',
232
+ },
233
+ // Ghost text
234
+ '.cm-ghostText': {
235
+ opacity: '0.5',
236
+ color: '#ffffff',
63
237
  },
64
238
  }, { dark: true });
65
- // Define the highlighting style for code in the Abyss theme.
239
+ /**
240
+ * Enhanced syntax highlighting for the Abyss theme
241
+ */
66
242
  const abyssHighlightStyle = language.HighlightStyle.define([
243
+ // Keywords and control flow
67
244
  { tag: highlight.tags.keyword, color: base07, fontWeight: 'bold' },
245
+ { tag: highlight.tags.controlKeyword, color: base0F, fontWeight: 'bold' },
246
+ { tag: highlight.tags.moduleKeyword, color: base07, fontWeight: 'bold' },
247
+ // Names and variables
68
248
  { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base08 },
69
- { tag: [highlight.tags.propertyName], color: base0B },
70
- { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted, highlight.tags.special(highlight.tags.string)], color: base0A },
249
+ { tag: [highlight.tags.variableName], color: '#7ab2ff' },
250
+ { tag: [highlight.tags.propertyName], color: base0E, fontStyle: 'normal' },
251
+ // Classes and types
252
+ { tag: [highlight.tags.typeName], color: base03 },
253
+ { tag: [highlight.tags.className], color: base0D, fontStyle: 'italic' },
254
+ { tag: [highlight.tags.namespace], color: base0C, fontStyle: 'italic' },
255
+ // Operators and punctuation - clearer blues
256
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base0E },
257
+ { tag: [highlight.tags.bracket], color: base01 },
258
+ { tag: [highlight.tags.brace], color: base01 },
259
+ { tag: [highlight.tags.punctuation], color: base01 },
260
+ // Functions and parameters
71
261
  { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base0B },
262
+ { tag: [highlight.tags.definition(highlight.tags.variableName)], color: base0B },
263
+ // Constants and literals
264
+ { tag: highlight.tags.number, color: base0C },
265
+ { tag: highlight.tags.changed, color: base0C },
266
+ { tag: highlight.tags.annotation, color: base0C, fontStyle: 'italic' },
267
+ { tag: highlight.tags.modifier, color: base0C, fontStyle: 'italic' },
268
+ { tag: highlight.tags.self, color: base0C },
72
269
  { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base0C },
73
- { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base08 },
74
- { tag: [highlight.tags.className], color: base0D },
75
- { tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: base0C },
76
- { tag: [highlight.tags.typeName], color: base0B },
77
- { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base07 },
78
- { tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link], color: base0A },
79
- { tag: [highlight.tags.meta, highlight.tags.comment], color: base09 },
80
- { tag: highlight.tags.tagName, color: base0F },
81
- { tag: highlight.tags.strong, fontWeight: 'bold' },
82
- { tag: highlight.tags.emphasis, fontStyle: 'italic' },
83
- { tag: highlight.tags.link, textDecoration: 'underline' },
84
- { tag: highlight.tags.heading, fontWeight: 'bold', color: base0E },
85
- { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base08 },
86
- { tag: highlight.tags.invalid, color: invalid, textDecoration: 'underline' },
270
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: '#ff9e64' },
271
+ // Strings and regex
272
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base0A },
273
+ { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base0A },
274
+ // Punctuation and structure
275
+ { tag: highlight.tags.definition(highlight.tags.typeName), color: base0B, fontWeight: 'bold' },
276
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: '#78b6ff' },
277
+ { tag: [highlight.tags.bracket], color: '#8da0bf' },
278
+ { tag: [highlight.tags.brace], color: '#8da0bf' },
279
+ { tag: [highlight.tags.punctuation], color: '#8da0bf' },
280
+ // Comments and documentation
281
+ { tag: highlight.tags.meta, color: base09 },
282
+ { tag: highlight.tags.comment, fontStyle: 'italic', color: base09 },
283
+ { tag: highlight.tags.docComment, fontStyle: 'italic', color: base09 },
284
+ // HTML/XML elements
285
+ { tag: [highlight.tags.tagName], color: base0F },
286
+ { tag: [highlight.tags.attributeName], color: '#ffd580' },
287
+ // Markdown and text formatting
288
+ { tag: [highlight.tags.heading], fontWeight: 'bold', color: base0E },
289
+ { tag: [highlight.tags.strong], fontWeight: 'bold' },
290
+ { tag: [highlight.tags.emphasis], fontStyle: 'italic' },
291
+ // Links and URLs
292
+ { tag: [highlight.tags.link], color: base10, fontWeight: '500' },
293
+ {
294
+ tag: [highlight.tags.url],
295
+ color: base11,
296
+ textDecoration: 'underline',
297
+ textUnderlineOffset: '2px',
298
+ },
299
+ // Special states
300
+ { tag: [highlight.tags.invalid], color: invalid, textDecoration: 'underline wavy' },
301
+ { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
302
+ // Enhanced syntax highlighting
303
+ { tag: highlight.tags.constant(highlight.tags.name), color: base0C },
304
+ { tag: highlight.tags.controlKeyword, color: base07, fontWeight: 'bold' },
305
+ { tag: highlight.tags.deleted, color: base08 },
306
+ { tag: highlight.tags.labelName, color: base0B },
307
+ { tag: highlight.tags.string, color: base0A },
87
308
  ]);
88
- // Extension to enable the Abyss theme (both the editor theme and the highlight style).
309
+ /**
310
+ * Combined Abyss theme extension
311
+ */
89
312
  const abyss = [
90
313
  abyssTheme,
91
314
  language.syntaxHighlighting(abyssHighlightStyle),
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 Abyss
6
+ */
4
7
  declare const abyssTheme: Extension;
8
+ /**
9
+ * Enhanced syntax highlighting for the Abyss theme
10
+ */
5
11
  declare const abyssHighlightStyle: HighlightStyle;
12
+ /**
13
+ * Combined Abyss theme extension
14
+ */
6
15
  declare const abyss: Extension;
7
16
 
8
17
  export { abyss, abyssHighlightStyle, abyssTheme };
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 Abyss
6
+ */
4
7
  declare const abyssTheme: Extension;
8
+ /**
9
+ * Enhanced syntax highlighting for the Abyss theme
10
+ */
5
11
  declare const abyssHighlightStyle: HighlightStyle;
12
+ /**
13
+ * Combined Abyss theme extension
14
+ */
6
15
  declare const abyss: Extension;
7
16
 
8
17
  export { abyss, abyssHighlightStyle, abyssTheme };
package/dist/index.js CHANGED
@@ -1,89 +1,312 @@
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
- // Abyss theme colors
6
- const base00 = '#000c18', // Background
7
- base01 = '#6688cc', // Foreground
8
- base02 = '#770811', // Selection
9
- base03 = '#181f2f', // Dropdown Background
10
- base04 = '#ddbb88', // Cursor
11
- base05 = '#0055ff30', // Active line
12
- base06 = '#FFFFFF', // Another placeholder
13
- base07 = '#225588', // Keyword, Storage
14
- base08 = '#2277ff', // Variable, Parameter
15
- base09 = '#384887', // Comment
16
- base0A = '#22aa44', // String, RegExp
17
- base0B = '#9966b8', // Function, Type
18
- base0C = '#f280d0', // Constant, Number
19
- base0D = '#ddbb88', // Class
20
- base0E = '#6688cc', // Heading
21
- base0F = '#225588', // Tag
22
- base10 = '#ff00ff8a', // Link
23
- invalid = '#A22D44'; // Invalid
24
- // Define the editor theme styles for Abyss.
6
+ // Base colors - Ocean depths
7
+ const base00 = '#000c18', // - Background (deep ocean blue)
8
+ base01 = '#a3c9e9', // - Foreground (lighter blue for enhanced readability)
9
+ base02 = '#0e6299', // - Selection (more vibrant blue for better visibility)
10
+ base03 = '#b4a2f7', // - Gutter background (darker for contrast)
11
+ base04 = '#e6d4a3', // - Cursor (warmer gold for better visibility)
12
+ base05 = '#0066ff20', // - Active line (subtle blue tint)
13
+ base06 = '#ffffff', // - Pure white for maximum contrast
14
+ base07 = '#47c1ff', // - Keywords (brighter cyan blue)
15
+ base08 = '#5caeff', // - Variables (softer azure blue)
16
+ base09 = '#7599c2', // - Comments (brighter blue-gray)
17
+ base0A = '#4ce660', // - Strings (kept vibrant green for contrast)
18
+ base0B = '#c3a2f7', // - Functions (softer purple)
19
+ base0C = '#ff9eea', // - Constants (softer pink)
20
+ base0D = '#ffd47b', // - Classes (warmer gold)
21
+ base0E = '#8eb8ff', // - Headings (brighter sky blue)
22
+ base0F = '#59d6ff', // - Tags (brighter cyan)
23
+ base10 = '#ff50c8', // - Links (brighter magenta)
24
+ base11 = '#66ecd4', // - URLs (brighter teal)
25
+ // UI elements
26
+ invalid = '#ff5370', darkBackground = '#0a1422', // Darker background for better contrast
27
+ highlightBackground = '#0055ff15', tooltipBackground = '#05101d', // Darker tooltip for better contrast
28
+ cursor = base04, selection = base02, activeBracketBg = '#0a5999b0', activeBracketBorder = base0F;
29
+ /**
30
+ * Enhanced editor theme styles for Abyss
31
+ */
25
32
  const abyssTheme = /*@__PURE__*/EditorView.theme({
33
+ // Base editor styles
26
34
  '&': {
27
35
  color: base01,
28
36
  backgroundColor: base00,
37
+ fontSize: generalContent.fontSize,
38
+ fontFamily: generalContent.fontFamily,
29
39
  },
40
+ // Content and cursor
30
41
  '.cm-content': {
31
- caretColor: base04,
42
+ caretColor: cursor,
43
+ lineHeight: generalContent.lineHeight,
32
44
  },
33
45
  '.cm-cursor, .cm-dropCursor': {
34
- borderLeftColor: base04,
46
+ borderLeftColor: cursor,
47
+ borderLeftWidth: generalCursor.borderLeftWidth,
35
48
  },
49
+ '.cm-fat-cursor': {
50
+ backgroundColor: `${cursor}99`,
51
+ color: base00,
52
+ },
53
+ // Selection
36
54
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
37
- backgroundColor: base02,
55
+ backgroundColor: selection,
38
56
  },
57
+ // Search functionality
39
58
  '.cm-searchMatch': {
40
- backgroundColor: base0B,
41
- outline: `1px solid ${base03}`,
42
- color: base06,
59
+ backgroundColor: '#155ab380',
60
+ outline: `1px solid ${base08}`,
61
+ borderRadius: generalSearchField.borderRadius,
62
+ '& span': {
63
+ color: base06,
64
+ },
43
65
  },
44
66
  '.cm-searchMatch.cm-searchMatch-selected': {
45
- backgroundColor: base10,
67
+ backgroundColor: '#2a6ac080',
46
68
  color: base06,
69
+ padding: generalSearchField.padding,
70
+ '& span': {
71
+ color: base06,
72
+ },
73
+ },
74
+ '.cm-search.cm-panel.cm-textfield': {
75
+ color: base01,
76
+ borderRadius: generalSearchField.borderRadius,
77
+ padding: generalSearchField.padding,
47
78
  },
79
+ // Panels
48
80
  '.cm-panels': {
49
- backgroundColor: base03,
81
+ backgroundColor: darkBackground,
82
+ color: base01,
83
+ },
84
+ '.cm-panels.cm-panels-top': {
85
+ borderBottom: '2px solid #0a3555',
86
+ },
87
+ '.cm-panels.cm-panels-bottom': {
88
+ borderTop: '2px solid #0a3555',
89
+ },
90
+ '.cm-panel button': {
91
+ backgroundColor: darkBackground,
50
92
  color: base01,
93
+ border: generalPanel.border,
94
+ borderRadius: generalPanel.borderRadius,
95
+ padding: generalPanel.padding,
51
96
  },
97
+ '.cm-panel button:hover': {
98
+ backgroundColor: '#0a3555',
99
+ },
100
+ // Line highlighting
52
101
  '.cm-activeLine': {
53
- backgroundColor: base05,
102
+ backgroundColor: highlightBackground,
103
+ borderRadius: generalLine.borderRadius,
54
104
  },
105
+ // Gutters
55
106
  '.cm-gutters': {
56
- backgroundColor: base03, // Assuming the dropdown background color for gutters
107
+ backgroundColor: darkBackground,
108
+ color: '#5f7e97',
109
+ border: generalGutter.border,
110
+ paddingRight: generalGutter.paddingRight,
111
+ },
112
+ '.cm-activeLineGutter': {
113
+ backgroundColor: highlightBackground,
114
+ color: base01,
115
+ fontWeight: generalGutter.fontWeight,
116
+ },
117
+ '.cm-lineNumbers': {
118
+ fontSize: generalGutter.fontSize,
119
+ },
120
+ '.cm-foldGutter': {
121
+ fontSize: generalGutter.fontSize,
122
+ },
123
+ '.cm-foldGutter .cm-gutterElement': {
124
+ color: '#5f7e97',
125
+ cursor: 'pointer',
126
+ },
127
+ '.cm-foldGutter .cm-gutterElement:hover': {
57
128
  color: base01,
58
129
  },
130
+ // Tooltips and autocomplete
59
131
  '.cm-tooltip': {
60
- backgroundColor: base01,
132
+ backgroundColor: tooltipBackground,
133
+ border: '1px solid #084671',
134
+ borderRadius: generalTooltip.borderRadius,
135
+ padding: generalTooltip.padding,
136
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
137
+ },
138
+ '.cm-tooltip-autocomplete': {
139
+ '& > ul > li': {
140
+ padding: generalTooltip.padding,
141
+ lineHeight: generalTooltip.lineHeight,
142
+ },
143
+ '& > ul > li[aria-selected]': {
144
+ backgroundColor: '#084671',
145
+ color: '#e0edff',
146
+ borderRadius: generalTooltip.borderRadiusSelected,
147
+ },
148
+ '& > ul > li > span.cm-completionIcon': {
149
+ color: '#5f7e97',
150
+ paddingRight: generalTooltip.paddingRight,
151
+ },
152
+ '& > ul > li > span.cm-completionDetail': {
153
+ color: '#5f7e97',
154
+ fontStyle: 'italic',
155
+ },
156
+ },
157
+ '.cm-tooltip .cm-tooltip-arrow:before': {
158
+ borderTopColor: 'transparent',
159
+ borderBottomColor: 'transparent',
160
+ },
161
+ '.cm-tooltip .cm-tooltip-arrow:after': {
162
+ borderTopColor: tooltipBackground,
163
+ borderBottomColor: tooltipBackground,
164
+ },
165
+ // Diagnostics styling
166
+ '.cm-diagnostic': {
167
+ '&-error': {
168
+ borderLeft: `3px solid ${invalid}`,
169
+ },
170
+ '&-warning': {
171
+ borderLeft: `3px solid ${base0A}`,
172
+ },
173
+ '&-info': {
174
+ borderLeft: `3px solid ${base0B}`,
175
+ },
176
+ },
177
+ '.cm-lintPoint-error': {
178
+ borderBottom: `2px wavy ${invalid}`,
179
+ },
180
+ '.cm-lintPoint-warning': {
181
+ borderBottom: `2px wavy ${base0A}`,
182
+ },
183
+ // Matching brackets
184
+ '.cm-matchingBracket': {
185
+ backgroundColor: activeBracketBg,
186
+ outline: `1px solid ${activeBracketBorder}`,
187
+ borderRadius: generalMatching.borderRadius,
188
+ },
189
+ '.cm-nonmatchingBracket': {
190
+ backgroundColor: '#780e1e80',
191
+ outline: `1px solid ${invalid}`,
192
+ borderRadius: generalMatching.borderRadius,
193
+ },
194
+ // Selection matches
195
+ '.cm-selectionMatch': {
196
+ backgroundColor: '#155ab340',
197
+ outline: `1px solid ${base08}`,
198
+ borderRadius: generalMatching.borderRadius,
199
+ },
200
+ // Fold placeholder
201
+ '.cm-foldPlaceholder': {
202
+ backgroundColor: 'transparent',
203
+ color: '#5f7e97',
204
+ fontStyle: 'italic',
205
+ border: `1px dotted ${activeBracketBorder}`,
206
+ borderRadius: generalPlaceholder.borderRadius,
207
+ padding: generalPlaceholder.padding,
208
+ margin: generalPlaceholder.margin,
209
+ },
210
+ // Focus outline
211
+ '&.cm-focused': {
212
+ outline: 'none',
213
+ boxShadow: `0 0 0 2px ${base05}, 0 0 0 4px ${base00}`,
214
+ },
215
+ // Scrollbars
216
+ '& .cm-scroller::-webkit-scrollbar': {
217
+ width: generalScroller.width,
218
+ height: generalScroller.height,
219
+ },
220
+ '& .cm-scroller::-webkit-scrollbar-track': {
221
+ background: darkBackground,
222
+ },
223
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
224
+ backgroundColor: '#5f7e97',
225
+ borderRadius: generalScroller.borderRadius,
226
+ border: `3px solid ${darkBackground}`,
227
+ },
228
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
229
+ backgroundColor: '#4cc9ff',
230
+ },
231
+ // Ghost text
232
+ '.cm-ghostText': {
233
+ opacity: '0.5',
234
+ color: '#ffffff',
61
235
  },
62
236
  }, { dark: true });
63
- // Define the highlighting style for code in the Abyss theme.
237
+ /**
238
+ * Enhanced syntax highlighting for the Abyss theme
239
+ */
64
240
  const abyssHighlightStyle = /*@__PURE__*/HighlightStyle.define([
241
+ // Keywords and control flow
65
242
  { tag: tags.keyword, color: base07, fontWeight: 'bold' },
243
+ { tag: tags.controlKeyword, color: base0F, fontWeight: 'bold' },
244
+ { tag: tags.moduleKeyword, color: base07, fontWeight: 'bold' },
245
+ // Names and variables
66
246
  { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base08 },
67
- { tag: [tags.propertyName], color: base0B },
68
- { tag: [tags.processingInstruction, tags.string, tags.inserted, /*@__PURE__*/tags.special(tags.string)], color: base0A },
247
+ { tag: [tags.variableName], color: '#7ab2ff' },
248
+ { tag: [tags.propertyName], color: base0E, fontStyle: 'normal' },
249
+ // Classes and types
250
+ { tag: [tags.typeName], color: base03 },
251
+ { tag: [tags.className], color: base0D, fontStyle: 'italic' },
252
+ { tag: [tags.namespace], color: base0C, fontStyle: 'italic' },
253
+ // Operators and punctuation - clearer blues
254
+ { tag: [tags.operator, tags.operatorKeyword], color: base0E },
255
+ { tag: [tags.bracket], color: base01 },
256
+ { tag: [tags.brace], color: base01 },
257
+ { tag: [tags.punctuation], color: base01 },
258
+ // Functions and parameters
69
259
  { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base0B },
260
+ { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: base0B },
261
+ // Constants and literals
262
+ { tag: tags.number, color: base0C },
263
+ { tag: tags.changed, color: base0C },
264
+ { tag: tags.annotation, color: base0C, fontStyle: 'italic' },
265
+ { tag: tags.modifier, color: base0C, fontStyle: 'italic' },
266
+ { tag: tags.self, color: base0C },
70
267
  { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base0C },
71
- { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base08 },
72
- { tag: [tags.className], color: base0D },
73
- { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: base0C },
74
- { tag: [tags.typeName], color: base0B },
75
- { tag: [tags.operator, tags.operatorKeyword], color: base07 },
76
- { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: base0A },
77
- { tag: [tags.meta, tags.comment], color: base09 },
78
- { tag: tags.tagName, color: base0F },
79
- { tag: tags.strong, fontWeight: 'bold' },
80
- { tag: tags.emphasis, fontStyle: 'italic' },
81
- { tag: tags.link, textDecoration: 'underline' },
82
- { tag: tags.heading, fontWeight: 'bold', color: base0E },
83
- { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base08 },
84
- { tag: tags.invalid, color: invalid, textDecoration: 'underline' },
268
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: '#ff9e64' },
269
+ // Strings and regex
270
+ { tag: [tags.processingInstruction, tags.inserted], color: base0A },
271
+ { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: base0A },
272
+ // Punctuation and structure
273
+ { tag: /*@__PURE__*/tags.definition(tags.typeName), color: base0B, fontWeight: 'bold' },
274
+ { tag: [tags.operator, tags.operatorKeyword], color: '#78b6ff' },
275
+ { tag: [tags.bracket], color: '#8da0bf' },
276
+ { tag: [tags.brace], color: '#8da0bf' },
277
+ { tag: [tags.punctuation], color: '#8da0bf' },
278
+ // Comments and documentation
279
+ { tag: tags.meta, color: base09 },
280
+ { tag: tags.comment, fontStyle: 'italic', color: base09 },
281
+ { tag: tags.docComment, fontStyle: 'italic', color: base09 },
282
+ // HTML/XML elements
283
+ { tag: [tags.tagName], color: base0F },
284
+ { tag: [tags.attributeName], color: '#ffd580' },
285
+ // Markdown and text formatting
286
+ { tag: [tags.heading], fontWeight: 'bold', color: base0E },
287
+ { tag: [tags.strong], fontWeight: 'bold' },
288
+ { tag: [tags.emphasis], fontStyle: 'italic' },
289
+ // Links and URLs
290
+ { tag: [tags.link], color: base10, fontWeight: '500' },
291
+ {
292
+ tag: [tags.url],
293
+ color: base11,
294
+ textDecoration: 'underline',
295
+ textUnderlineOffset: '2px',
296
+ },
297
+ // Special states
298
+ { tag: [tags.invalid], color: invalid, textDecoration: 'underline wavy' },
299
+ { tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
300
+ // Enhanced syntax highlighting
301
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: base0C },
302
+ { tag: tags.controlKeyword, color: base07, fontWeight: 'bold' },
303
+ { tag: tags.deleted, color: base08 },
304
+ { tag: tags.labelName, color: base0B },
305
+ { tag: tags.string, color: base0A },
85
306
  ]);
86
- // Extension to enable the Abyss theme (both the editor theme and the highlight style).
307
+ /**
308
+ * Combined Abyss theme extension
309
+ */
87
310
  const abyss = [
88
311
  abyssTheme,
89
312
  /*@__PURE__*/syntaxHighlighting(abyssHighlightStyle),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fsegurai/codemirror-theme-abyss",
3
3
  "description": "Abyss theme for the CodeMirror code editor",
4
- "version": "6.1.4",
4
+ "version": "6.2.0-beta.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "exports": {