@fsegurai/codemirror-theme-github-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.
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-github-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,90 +3,337 @@
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
- // GitHub Dark theme color definitions
8
- const base00 = '#0d1117', // Background
9
- base01 = '#c9d1d9', // Foreground
10
- base02 = '#003d73', // Selection and Selection Match
11
- base03 = '#8b949e', // Comment and Bracket color
12
- base04 = '#c9d1d9', // Caret color (reusing foreground for consistency)
13
- base05 = '#7ee787', // TagName, Name, Quote
14
- base06 = '#d2a8ff', // ClassName, PropertyName, Heading, Strong, Emphasis
15
- base07 = '#79c0ff', // VariableName, AttributeName, Number, Operator
16
- base08 = '#ff7b72', // Keyword, TypeName, TypeOperator
17
- base09 = '#a5d6ff', // String, Meta, Regexp
18
- base0A = '#ffdcd7', // Deleted text color
19
- base0B = '#ffeef0', // Deleted background color
20
- base0C = '#ffab70', // Atom, Bool, Special VariableName
21
- invalid = '#f97583'; // Invalid color
22
- const highlightBackground = '#36334280', // Line highlight with some opacity
23
- tooltipBackground = base01, // Tooltips using foreground color
24
- cursor = base04, // Caret color
25
- selection = base02; // Selection color
26
- // Define the editor theme styles for GitHub Dark.
8
+ /**
9
+ * Enhanced GitHub Dark theme color definitions
10
+ * -------------------------------------------
11
+ * Colors are organized by function with visual color blocks
12
+ */
13
+ // Core UI colors
14
+ const base00 = '#0d1117'; // Background (GitHub dark mode background)
15
+ const base01 = '#c9d1d9'; // Foreground (main text color)
16
+ const base02 = '#264F78'; // Selection - brighter blue for better visibility
17
+ const base03 = '#8b949e'; // Comment and Bracket color
18
+ const base04 = '#ffffff'; // Caret color (pure white for better visibility)
19
+ // Syntax highlighting colors
20
+ const base05 = '#7ee787'; // TagName, Name, Quote - signature GitHub green
21
+ const base06 = '#d2a8ff'; // ClassName, PropertyName - GitHub purple
22
+ const base07 = '#79c0ff'; // VariableName, Number - GitHub blue
23
+ const base08 = '#ff7b72'; // Keyword, TypeName - GitHub red
24
+ const base09 = '#a5d6ff'; // String, Meta, Regexp - lighter blue
25
+ const base0A = '#2c333a'; // Panel button hover
26
+ const base0B = '#3c444d'; // Deleted background color
27
+ const base0C = '#ffab70'; // Atom, Bool - GitHub orange
28
+ // Background variants
29
+ const base0D = '#161b22'; // Gutter background (slightly darker than the editor)
30
+ const base0E = '#30363d'; // Panel and tooltip border color
31
+ const base0F = '#21262d'; // Active line gutter background
32
+ // Link colors
33
+ const linkColor = '#58a6ff'; // Bright blue for links (GitHub link color)
34
+ const visitedLinkColor = '#bc8cff'; // Light purple for visited links
35
+ // Special states
36
+ const invalid = '#f97583'; // Invalid color - error red
37
+ const highlightBackground = '#2d333b1a'; // Line highlight (GitHub selection color)
38
+ const tooltipBackground = '#21262d'; // Tooltip background
39
+ const cursor = base04; // Caret color
40
+ const selection = base02; // Selection color
41
+ const activeBracketBg = '#3a587a75'; // Active bracket background
42
+ const activeBracketBorder = '#4d90fe'; // Active bracket border
43
+ const diagnosticWarning = '#d29922'; // Warning color
44
+ const selectionMatch = '#3a587a55'; // Selection match background
45
+ /**
46
+ * Enhanced editor theme styles for GitHub Dark
47
+ */
27
48
  const githubDarkTheme = view.EditorView.theme({
49
+ // Base editor styles
28
50
  '&': {
29
51
  color: base01,
30
52
  backgroundColor: base00,
53
+ fontSize: _utils.generalContent.fontSize,
54
+ fontFamily: _utils.generalContent.fontFamily,
31
55
  },
56
+ // Content and cursor
32
57
  '.cm-content': {
33
58
  caretColor: cursor,
59
+ lineHeight: _utils.generalContent.lineHeight,
34
60
  },
35
61
  '.cm-cursor, .cm-dropCursor': {
36
62
  borderLeftColor: cursor,
63
+ borderLeftWidth: _utils.generalCursor.borderLeftWidth,
37
64
  },
65
+ '.cm-fat-cursor': {
66
+ backgroundColor: `${cursor}99`,
67
+ color: base00,
68
+ },
69
+ // Selection
38
70
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
39
71
  backgroundColor: selection,
40
72
  },
73
+ // Make sure selection appears above active line
74
+ '.cm-selectionLayer': {
75
+ zIndex: 100,
76
+ },
77
+ // Search functionality
41
78
  '.cm-searchMatch': {
42
- backgroundColor: base02, // Use the selection color for search matches
43
- color: base01, // Ensure the text color contrasts with the background
44
- outline: `1px solid ${base04}`, // Highlight with a subtle outline
79
+ backgroundColor: '#3a587a',
80
+ outline: `1px solid ${base07}`,
81
+ color: base01,
82
+ borderRadius: _utils.generalSearchField.borderRadius,
83
+ '& span': {
84
+ color: base01,
85
+ },
45
86
  },
46
87
  '.cm-searchMatch.cm-searchMatch-selected': {
47
- backgroundColor: base08, // Use a distinct color for the selected search match
48
- color: base00, // Invert color for high visibility
49
- outline: `1px solid ${base04}`,
88
+ backgroundColor: activeBracketBorder,
89
+ color: base04,
90
+ padding: _utils.generalSearchField.padding,
91
+ '& span': {
92
+ color: base04,
93
+ },
94
+ },
95
+ '.cm-search.cm-panel.cm-textfield': {
96
+ color: base01,
97
+ borderRadius: _utils.generalSearchField.borderRadius,
98
+ padding: _utils.generalSearchField.padding,
50
99
  },
100
+ // Panels
51
101
  '.cm-panels': {
52
- backgroundColor: base00, // Use the main background color for consistency
102
+ backgroundColor: tooltipBackground,
53
103
  color: base01,
104
+ borderRadius: '4px',
54
105
  },
55
106
  '.cm-panels.cm-panels-top': {
56
- borderBottom: '2px solid black',
107
+ borderBottom: `1px solid ${base0E}`,
57
108
  },
58
109
  '.cm-panels.cm-panels-bottom': {
59
- borderTop: '2px solid black',
110
+ borderTop: `1px solid ${base0E}`,
111
+ },
112
+ '.cm-panel button': {
113
+ backgroundColor: tooltipBackground,
114
+ color: base01,
115
+ border: _utils.generalPanel.border,
116
+ borderRadius: _utils.generalPanel.borderRadius,
117
+ padding: _utils.generalPanel.padding,
60
118
  },
119
+ '.cm-panel button:hover': {
120
+ backgroundColor: base0A,
121
+ },
122
+ // Line highlighting
61
123
  '.cm-activeLine': {
62
124
  backgroundColor: highlightBackground,
125
+ borderRadius: _utils.generalLine.borderRadius,
126
+ zIndex: 1,
63
127
  },
128
+ // Gutters
64
129
  '.cm-gutters': {
65
- backgroundColor: base00, // Gutter background using the main background
66
- color: base03, // Use comment color for gutter foreground
130
+ backgroundColor: base0D,
131
+ color: base03,
132
+ border: _utils.generalGutter.border,
133
+ borderRight: '1px solid #30363d',
134
+ paddingRight: _utils.generalGutter.paddingRight,
135
+ },
136
+ '.cm-activeLineGutter': {
137
+ backgroundColor: base0F,
138
+ color: base01,
139
+ fontWeight: _utils.generalGutter.fontWeight,
140
+ },
141
+ '.cm-lineNumbers': {
142
+ fontSize: _utils.generalGutter.fontSize,
143
+ },
144
+ '.cm-foldGutter': {
145
+ fontSize: _utils.generalGutter.fontSize,
67
146
  },
147
+ '.cm-foldGutter .cm-gutterElement': {
148
+ color: base03,
149
+ cursor: 'pointer',
150
+ },
151
+ '.cm-foldGutter .cm-gutterElement:hover': {
152
+ color: base01,
153
+ },
154
+ // Tooltips and autocomplete
68
155
  '.cm-tooltip': {
69
156
  backgroundColor: tooltipBackground,
157
+ border: `1px solid ${base0E}`,
158
+ borderRadius: _utils.generalTooltip.borderRadius,
159
+ padding: _utils.generalTooltip.padding,
160
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
161
+ },
162
+ '.cm-tooltip-autocomplete': {
163
+ '& > ul': {
164
+ backgroundColor: tooltipBackground,
165
+ border: 'none',
166
+ },
167
+ '& > ul > li': {
168
+ padding: _utils.generalTooltip.padding,
169
+ lineHeight: _utils.generalTooltip.lineHeight,
170
+ },
171
+ '& > ul > li[aria-selected]': {
172
+ backgroundColor: selection,
173
+ color: base04,
174
+ borderRadius: _utils.generalTooltip.borderRadiusSelected,
175
+ },
176
+ '& > ul > li > span.cm-completionIcon': {
177
+ color: base03,
178
+ paddingRight: _utils.generalTooltip.paddingRight,
179
+ },
180
+ '& > ul > li > span.cm-completionDetail': {
181
+ color: base03,
182
+ fontStyle: 'italic',
183
+ },
184
+ },
185
+ '.cm-tooltip .cm-tooltip-arrow:before': {
186
+ borderTopColor: 'transparent',
187
+ borderBottomColor: 'transparent',
188
+ },
189
+ '.cm-tooltip .cm-tooltip-arrow:after': {
190
+ borderTopColor: tooltipBackground,
191
+ borderBottomColor: tooltipBackground,
192
+ },
193
+ // Diagnostics styling
194
+ '.cm-diagnostic': {
195
+ '&-error': {
196
+ borderLeft: `3px solid ${invalid}`,
197
+ },
198
+ '&-warning': {
199
+ borderLeft: `3px solid ${diagnosticWarning}`,
200
+ },
201
+ '&-info': {
202
+ borderLeft: `3px solid ${linkColor}`,
203
+ },
204
+ },
205
+ '.cm-lintPoint-error': {
206
+ borderBottom: `2px wavy ${invalid}`,
207
+ },
208
+ '.cm-lintPoint-warning': {
209
+ borderBottom: `2px wavy ${diagnosticWarning}`,
210
+ },
211
+ // Matching brackets
212
+ '.cm-matchingBracket': {
213
+ backgroundColor: activeBracketBg,
214
+ outline: `1px solid ${activeBracketBorder}`,
215
+ borderRadius: _utils.generalMatching.borderRadius,
216
+ },
217
+ '.cm-nonmatchingBracket': {
218
+ backgroundColor: '#f9758340',
219
+ outline: `1px solid ${invalid}`,
220
+ borderRadius: _utils.generalMatching.borderRadius,
221
+ },
222
+ // Selection matches
223
+ '.cm-selectionMatch': {
224
+ backgroundColor: selectionMatch,
225
+ outline: `1px solid ${base02}50`,
226
+ borderRadius: _utils.generalMatching.borderRadius,
227
+ },
228
+ // Fold placeholder
229
+ '.cm-foldPlaceholder': {
230
+ backgroundColor: tooltipBackground,
231
+ color: base03,
232
+ border: `1px dotted ${base0E}70`,
233
+ borderRadius: _utils.generalPlaceholder.borderRadius,
234
+ padding: _utils.generalPlaceholder.padding,
235
+ margin: _utils.generalPlaceholder.margin,
236
+ },
237
+ // Focus outline
238
+ '&.cm-focused': {
239
+ outline: 'none',
240
+ boxShadow: `0 0 0 2px ${base00}, 0 0 0 3px ${linkColor}40`,
241
+ },
242
+ // Scrollbars
243
+ '& .cm-scroller::-webkit-scrollbar': {
244
+ width: _utils.generalScroller.width,
245
+ height: _utils.generalScroller.height,
246
+ },
247
+ '& .cm-scroller::-webkit-scrollbar-track': {
248
+ background: base0D,
249
+ },
250
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
251
+ backgroundColor: base0E,
252
+ borderRadius: _utils.generalScroller.borderRadius,
253
+ border: `3px solid ${base0D}`,
254
+ },
255
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
256
+ backgroundColor: base0B,
257
+ },
258
+ // Ghost text
259
+ '.cm-ghostText': {
260
+ opacity: '0.5',
261
+ color: base03,
70
262
  },
71
263
  }, { dark: true });
72
- // Define the highlighting style for code in the GitHub Dark theme.
264
+ /**
265
+ * Enhanced syntax highlighting for GitHub Dark theme
266
+ */
73
267
  const githubDarkHighlightStyle = language.HighlightStyle.define([
74
- { tag: [highlight.tags.standard(highlight.tags.tagName), highlight.tags.tagName], color: base05 },
75
- { tag: [highlight.tags.comment, highlight.tags.bracket], color: base03 },
76
- { tag: [highlight.tags.className, highlight.tags.propertyName], color: base06 },
77
- { tag: [highlight.tags.variableName, highlight.tags.attributeName, highlight.tags.number, highlight.tags.operator], color: base07 },
78
- { tag: [highlight.tags.keyword, highlight.tags.typeName, highlight.tags.typeOperator], color: base08 },
79
- { tag: [highlight.tags.string, highlight.tags.meta, highlight.tags.regexp], color: base09 },
80
- { tag: [highlight.tags.name, highlight.tags.quote], color: base05 },
81
- { tag: [highlight.tags.heading, highlight.tags.strong], color: base06, fontWeight: 'bold' },
82
- { tag: [highlight.tags.emphasis], color: base06, fontStyle: 'italic' },
83
- { tag: [highlight.tags.deleted], color: base0A, backgroundColor: base0B },
268
+ // Keywords and control flow
269
+ { tag: highlight.tags.keyword, color: base08, fontWeight: 'bold' },
270
+ { tag: highlight.tags.controlKeyword, color: base08, fontWeight: 'bold' },
271
+ { tag: highlight.tags.moduleKeyword, color: base08, fontWeight: 'bold' },
272
+ // Names and variables
273
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base07 },
274
+ { tag: [highlight.tags.variableName], color: base07 },
275
+ { tag: [highlight.tags.propertyName], color: base06, fontStyle: 'normal' },
276
+ // Classes and types
277
+ { tag: [highlight.tags.typeName], color: base08 },
278
+ { tag: [highlight.tags.className], color: base06, fontStyle: 'italic' },
279
+ { tag: [highlight.tags.namespace], color: base07, fontStyle: 'italic' },
280
+ // Operators and punctuation
281
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base01 },
282
+ { tag: [highlight.tags.bracket], color: base03 },
283
+ { tag: [highlight.tags.brace], color: base03 },
284
+ { tag: [highlight.tags.punctuation], color: base03 },
285
+ // Functions and parameters
286
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base05 },
287
+ { tag: [highlight.tags.definition(highlight.tags.variableName)], color: base07 },
288
+ // Constants and literals
289
+ { tag: highlight.tags.number, color: base0C },
290
+ { tag: highlight.tags.changed, color: base0C },
291
+ { tag: highlight.tags.annotation, color: invalid, fontStyle: 'italic' },
292
+ { tag: highlight.tags.modifier, color: base0C, fontStyle: 'italic' },
293
+ { tag: highlight.tags.self, color: base0C },
294
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base0C },
84
295
  { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0C },
85
- { tag: highlight.tags.link, textDecoration: 'underline' },
86
- { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
87
- { tag: highlight.tags.invalid, color: invalid },
296
+ // Strings and regex
297
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base05 },
298
+ { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base09 },
299
+ { tag: highlight.tags.string, color: base09 },
300
+ // Punctuation and structure
301
+ { tag: highlight.tags.definition(highlight.tags.typeName), color: base08, fontWeight: 'bold' },
302
+ // Comments and documentation
303
+ { tag: highlight.tags.meta, color: base03 },
304
+ { tag: highlight.tags.comment, fontStyle: 'italic', color: base03 },
305
+ { tag: highlight.tags.docComment, fontStyle: 'italic', color: base03 },
306
+ // HTML/XML elements
307
+ { tag: [highlight.tags.tagName], color: base05 },
308
+ { tag: [highlight.tags.attributeName], color: base06 },
309
+ // Markdown and text formatting
310
+ { tag: [highlight.tags.heading], fontWeight: 'bold', color: base07 },
311
+ { tag: [highlight.tags.strong], fontWeight: 'bold', color: base07 },
312
+ { tag: [highlight.tags.emphasis], fontStyle: 'italic', color: base09 },
313
+ // Links and URLs
314
+ { tag: [highlight.tags.link], color: visitedLinkColor, fontWeight: '500', textDecoration: 'underline', textUnderlinePosition: 'under' },
315
+ {
316
+ tag: [highlight.tags.url],
317
+ color: linkColor,
318
+ textDecoration: 'underline',
319
+ textUnderlineOffset: '2px',
320
+ },
321
+ // Special states
322
+ { tag: [highlight.tags.invalid], color: base01, textDecoration: 'underline wavy', borderBottom: `1px wavy ${invalid}` },
323
+ { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
324
+ // Enhanced syntax highlighting
325
+ { tag: highlight.tags.constant(highlight.tags.name), color: base0C },
326
+ { tag: highlight.tags.deleted, color: invalid },
327
+ { tag: highlight.tags.squareBracket, color: base03 },
328
+ { tag: highlight.tags.angleBracket, color: base03 },
329
+ // Additional specific styles
330
+ { tag: highlight.tags.monospace, color: base01 },
331
+ { tag: [highlight.tags.contentSeparator], color: base07 },
332
+ { tag: highlight.tags.quote, color: base03 },
88
333
  ]);
89
- // Extension to enable the GitHub Dark theme (both the editor theme and the highlight style).
334
+ /**
335
+ * Combined GitHub Dark theme extension
336
+ */
90
337
  const githubDark = [
91
338
  githubDarkTheme,
92
339
  language.syntaxHighlighting(githubDarkHighlightStyle),
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 GitHub Dark
6
+ */
4
7
  declare const githubDarkTheme: Extension;
8
+ /**
9
+ * Enhanced syntax highlighting for GitHub Dark theme
10
+ */
5
11
  declare const githubDarkHighlightStyle: HighlightStyle;
12
+ /**
13
+ * Combined GitHub Dark theme extension
14
+ */
6
15
  declare const githubDark: Extension;
7
16
 
8
17
  export { githubDark, githubDarkHighlightStyle, githubDarkTheme };
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 GitHub Dark
6
+ */
4
7
  declare const githubDarkTheme: Extension;
8
+ /**
9
+ * Enhanced syntax highlighting for GitHub Dark theme
10
+ */
5
11
  declare const githubDarkHighlightStyle: HighlightStyle;
12
+ /**
13
+ * Combined GitHub Dark theme extension
14
+ */
6
15
  declare const githubDark: Extension;
7
16
 
8
17
  export { githubDark, githubDarkHighlightStyle, githubDarkTheme };
package/dist/index.js CHANGED
@@ -1,90 +1,337 @@
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
- // GitHub Dark theme color definitions
6
- const base00 = '#0d1117', // Background
7
- base01 = '#c9d1d9', // Foreground
8
- base02 = '#003d73', // Selection and Selection Match
9
- base03 = '#8b949e', // Comment and Bracket color
10
- base04 = '#c9d1d9', // Caret color (reusing foreground for consistency)
11
- base05 = '#7ee787', // TagName, Name, Quote
12
- base06 = '#d2a8ff', // ClassName, PropertyName, Heading, Strong, Emphasis
13
- base07 = '#79c0ff', // VariableName, AttributeName, Number, Operator
14
- base08 = '#ff7b72', // Keyword, TypeName, TypeOperator
15
- base09 = '#a5d6ff', // String, Meta, Regexp
16
- base0A = '#ffdcd7', // Deleted text color
17
- base0B = '#ffeef0', // Deleted background color
18
- base0C = '#ffab70', // Atom, Bool, Special VariableName
19
- invalid = '#f97583'; // Invalid color
20
- const highlightBackground = '#36334280', // Line highlight with some opacity
21
- tooltipBackground = base01, // Tooltips using foreground color
22
- cursor = base04, // Caret color
23
- selection = base02; // Selection color
24
- // Define the editor theme styles for GitHub Dark.
6
+ /**
7
+ * Enhanced GitHub Dark theme color definitions
8
+ * -------------------------------------------
9
+ * Colors are organized by function with visual color blocks
10
+ */
11
+ // Core UI colors
12
+ const base00 = '#0d1117'; // Background (GitHub dark mode background)
13
+ const base01 = '#c9d1d9'; // Foreground (main text color)
14
+ const base02 = '#264F78'; // Selection - brighter blue for better visibility
15
+ const base03 = '#8b949e'; // Comment and Bracket color
16
+ const base04 = '#ffffff'; // Caret color (pure white for better visibility)
17
+ // Syntax highlighting colors
18
+ const base05 = '#7ee787'; // TagName, Name, Quote - signature GitHub green
19
+ const base06 = '#d2a8ff'; // ClassName, PropertyName - GitHub purple
20
+ const base07 = '#79c0ff'; // VariableName, Number - GitHub blue
21
+ const base08 = '#ff7b72'; // Keyword, TypeName - GitHub red
22
+ const base09 = '#a5d6ff'; // String, Meta, Regexp - lighter blue
23
+ const base0A = '#2c333a'; // Panel button hover
24
+ const base0B = '#3c444d'; // Deleted background color
25
+ const base0C = '#ffab70'; // Atom, Bool - GitHub orange
26
+ // Background variants
27
+ const base0D = '#161b22'; // Gutter background (slightly darker than the editor)
28
+ const base0E = '#30363d'; // Panel and tooltip border color
29
+ const base0F = '#21262d'; // Active line gutter background
30
+ // Link colors
31
+ const linkColor = '#58a6ff'; // Bright blue for links (GitHub link color)
32
+ const visitedLinkColor = '#bc8cff'; // Light purple for visited links
33
+ // Special states
34
+ const invalid = '#f97583'; // Invalid color - error red
35
+ const highlightBackground = '#2d333b1a'; // Line highlight (GitHub selection color)
36
+ const tooltipBackground = '#21262d'; // Tooltip background
37
+ const cursor = base04; // Caret color
38
+ const selection = base02; // Selection color
39
+ const activeBracketBg = '#3a587a75'; // Active bracket background
40
+ const activeBracketBorder = '#4d90fe'; // Active bracket border
41
+ const diagnosticWarning = '#d29922'; // Warning color
42
+ const selectionMatch = '#3a587a55'; // Selection match background
43
+ /**
44
+ * Enhanced editor theme styles for GitHub Dark
45
+ */
25
46
  const githubDarkTheme = /*@__PURE__*/EditorView.theme({
47
+ // Base editor styles
26
48
  '&': {
27
49
  color: base01,
28
50
  backgroundColor: base00,
51
+ fontSize: generalContent.fontSize,
52
+ fontFamily: generalContent.fontFamily,
29
53
  },
54
+ // Content and cursor
30
55
  '.cm-content': {
31
56
  caretColor: cursor,
57
+ lineHeight: generalContent.lineHeight,
32
58
  },
33
59
  '.cm-cursor, .cm-dropCursor': {
34
60
  borderLeftColor: cursor,
61
+ borderLeftWidth: generalCursor.borderLeftWidth,
35
62
  },
63
+ '.cm-fat-cursor': {
64
+ backgroundColor: `${cursor}99`,
65
+ color: base00,
66
+ },
67
+ // Selection
36
68
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
37
69
  backgroundColor: selection,
38
70
  },
71
+ // Make sure selection appears above active line
72
+ '.cm-selectionLayer': {
73
+ zIndex: 100,
74
+ },
75
+ // Search functionality
39
76
  '.cm-searchMatch': {
40
- backgroundColor: base02, // Use the selection color for search matches
41
- color: base01, // Ensure the text color contrasts with the background
42
- outline: `1px solid ${base04}`, // Highlight with a subtle outline
77
+ backgroundColor: '#3a587a',
78
+ outline: `1px solid ${base07}`,
79
+ color: base01,
80
+ borderRadius: generalSearchField.borderRadius,
81
+ '& span': {
82
+ color: base01,
83
+ },
43
84
  },
44
85
  '.cm-searchMatch.cm-searchMatch-selected': {
45
- backgroundColor: base08, // Use a distinct color for the selected search match
46
- color: base00, // Invert color for high visibility
47
- outline: `1px solid ${base04}`,
86
+ backgroundColor: activeBracketBorder,
87
+ color: base04,
88
+ padding: generalSearchField.padding,
89
+ '& span': {
90
+ color: base04,
91
+ },
92
+ },
93
+ '.cm-search.cm-panel.cm-textfield': {
94
+ color: base01,
95
+ borderRadius: generalSearchField.borderRadius,
96
+ padding: generalSearchField.padding,
48
97
  },
98
+ // Panels
49
99
  '.cm-panels': {
50
- backgroundColor: base00, // Use the main background color for consistency
100
+ backgroundColor: tooltipBackground,
51
101
  color: base01,
102
+ borderRadius: '4px',
52
103
  },
53
104
  '.cm-panels.cm-panels-top': {
54
- borderBottom: '2px solid black',
105
+ borderBottom: `1px solid ${base0E}`,
55
106
  },
56
107
  '.cm-panels.cm-panels-bottom': {
57
- borderTop: '2px solid black',
108
+ borderTop: `1px solid ${base0E}`,
109
+ },
110
+ '.cm-panel button': {
111
+ backgroundColor: tooltipBackground,
112
+ color: base01,
113
+ border: generalPanel.border,
114
+ borderRadius: generalPanel.borderRadius,
115
+ padding: generalPanel.padding,
58
116
  },
117
+ '.cm-panel button:hover': {
118
+ backgroundColor: base0A,
119
+ },
120
+ // Line highlighting
59
121
  '.cm-activeLine': {
60
122
  backgroundColor: highlightBackground,
123
+ borderRadius: generalLine.borderRadius,
124
+ zIndex: 1,
61
125
  },
126
+ // Gutters
62
127
  '.cm-gutters': {
63
- backgroundColor: base00, // Gutter background using the main background
64
- color: base03, // Use comment color for gutter foreground
128
+ backgroundColor: base0D,
129
+ color: base03,
130
+ border: generalGutter.border,
131
+ borderRight: '1px solid #30363d',
132
+ paddingRight: generalGutter.paddingRight,
133
+ },
134
+ '.cm-activeLineGutter': {
135
+ backgroundColor: base0F,
136
+ color: base01,
137
+ fontWeight: generalGutter.fontWeight,
138
+ },
139
+ '.cm-lineNumbers': {
140
+ fontSize: generalGutter.fontSize,
141
+ },
142
+ '.cm-foldGutter': {
143
+ fontSize: generalGutter.fontSize,
65
144
  },
145
+ '.cm-foldGutter .cm-gutterElement': {
146
+ color: base03,
147
+ cursor: 'pointer',
148
+ },
149
+ '.cm-foldGutter .cm-gutterElement:hover': {
150
+ color: base01,
151
+ },
152
+ // Tooltips and autocomplete
66
153
  '.cm-tooltip': {
67
154
  backgroundColor: tooltipBackground,
155
+ border: `1px solid ${base0E}`,
156
+ borderRadius: generalTooltip.borderRadius,
157
+ padding: 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: generalTooltip.padding,
167
+ lineHeight: generalTooltip.lineHeight,
168
+ },
169
+ '& > ul > li[aria-selected]': {
170
+ backgroundColor: selection,
171
+ color: base04,
172
+ borderRadius: generalTooltip.borderRadiusSelected,
173
+ },
174
+ '& > ul > li > span.cm-completionIcon': {
175
+ color: base03,
176
+ paddingRight: 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 ${diagnosticWarning}`,
198
+ },
199
+ '&-info': {
200
+ borderLeft: `3px solid ${linkColor}`,
201
+ },
202
+ },
203
+ '.cm-lintPoint-error': {
204
+ borderBottom: `2px wavy ${invalid}`,
205
+ },
206
+ '.cm-lintPoint-warning': {
207
+ borderBottom: `2px wavy ${diagnosticWarning}`,
208
+ },
209
+ // Matching brackets
210
+ '.cm-matchingBracket': {
211
+ backgroundColor: activeBracketBg,
212
+ outline: `1px solid ${activeBracketBorder}`,
213
+ borderRadius: generalMatching.borderRadius,
214
+ },
215
+ '.cm-nonmatchingBracket': {
216
+ backgroundColor: '#f9758340',
217
+ outline: `1px solid ${invalid}`,
218
+ borderRadius: generalMatching.borderRadius,
219
+ },
220
+ // Selection matches
221
+ '.cm-selectionMatch': {
222
+ backgroundColor: selectionMatch,
223
+ outline: `1px solid ${base02}50`,
224
+ borderRadius: generalMatching.borderRadius,
225
+ },
226
+ // Fold placeholder
227
+ '.cm-foldPlaceholder': {
228
+ backgroundColor: tooltipBackground,
229
+ color: base03,
230
+ border: `1px dotted ${base0E}70`,
231
+ borderRadius: generalPlaceholder.borderRadius,
232
+ padding: generalPlaceholder.padding,
233
+ margin: generalPlaceholder.margin,
234
+ },
235
+ // Focus outline
236
+ '&.cm-focused': {
237
+ outline: 'none',
238
+ boxShadow: `0 0 0 2px ${base00}, 0 0 0 3px ${linkColor}40`,
239
+ },
240
+ // Scrollbars
241
+ '& .cm-scroller::-webkit-scrollbar': {
242
+ width: generalScroller.width,
243
+ height: generalScroller.height,
244
+ },
245
+ '& .cm-scroller::-webkit-scrollbar-track': {
246
+ background: base0D,
247
+ },
248
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
249
+ backgroundColor: base0E,
250
+ borderRadius: generalScroller.borderRadius,
251
+ border: `3px solid ${base0D}`,
252
+ },
253
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
254
+ backgroundColor: base0B,
255
+ },
256
+ // Ghost text
257
+ '.cm-ghostText': {
258
+ opacity: '0.5',
259
+ color: base03,
68
260
  },
69
261
  }, { dark: true });
70
- // Define the highlighting style for code in the GitHub Dark theme.
262
+ /**
263
+ * Enhanced syntax highlighting for GitHub Dark theme
264
+ */
71
265
  const githubDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([
72
- { tag: [/*@__PURE__*/tags.standard(tags.tagName), tags.tagName], color: base05 },
73
- { tag: [tags.comment, tags.bracket], color: base03 },
74
- { tag: [tags.className, tags.propertyName], color: base06 },
75
- { tag: [tags.variableName, tags.attributeName, tags.number, tags.operator], color: base07 },
76
- { tag: [tags.keyword, tags.typeName, tags.typeOperator], color: base08 },
77
- { tag: [tags.string, tags.meta, tags.regexp], color: base09 },
78
- { tag: [tags.name, tags.quote], color: base05 },
79
- { tag: [tags.heading, tags.strong], color: base06, fontWeight: 'bold' },
80
- { tag: [tags.emphasis], color: base06, fontStyle: 'italic' },
81
- { tag: [tags.deleted], color: base0A, backgroundColor: base0B },
266
+ // Keywords and control flow
267
+ { tag: tags.keyword, color: base08, fontWeight: 'bold' },
268
+ { tag: tags.controlKeyword, color: base08, fontWeight: 'bold' },
269
+ { tag: tags.moduleKeyword, color: base08, fontWeight: 'bold' },
270
+ // Names and variables
271
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base07 },
272
+ { tag: [tags.variableName], color: base07 },
273
+ { tag: [tags.propertyName], color: base06, fontStyle: 'normal' },
274
+ // Classes and types
275
+ { tag: [tags.typeName], color: base08 },
276
+ { tag: [tags.className], color: base06, fontStyle: 'italic' },
277
+ { tag: [tags.namespace], color: base07, fontStyle: 'italic' },
278
+ // Operators and punctuation
279
+ { tag: [tags.operator, tags.operatorKeyword], color: base01 },
280
+ { tag: [tags.bracket], color: base03 },
281
+ { tag: [tags.brace], color: base03 },
282
+ { tag: [tags.punctuation], color: base03 },
283
+ // Functions and parameters
284
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base05 },
285
+ { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: base07 },
286
+ // Constants and literals
287
+ { tag: tags.number, color: base0C },
288
+ { tag: tags.changed, color: base0C },
289
+ { tag: tags.annotation, color: invalid, fontStyle: 'italic' },
290
+ { tag: tags.modifier, color: base0C, fontStyle: 'italic' },
291
+ { tag: tags.self, color: base0C },
292
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base0C },
82
293
  { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0C },
83
- { tag: tags.link, textDecoration: 'underline' },
84
- { tag: tags.strikethrough, textDecoration: 'line-through' },
85
- { tag: tags.invalid, color: invalid },
294
+ // Strings and regex
295
+ { tag: [tags.processingInstruction, tags.inserted], color: base05 },
296
+ { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: base09 },
297
+ { tag: tags.string, color: base09 },
298
+ // Punctuation and structure
299
+ { tag: /*@__PURE__*/tags.definition(tags.typeName), color: base08, fontWeight: 'bold' },
300
+ // Comments and documentation
301
+ { tag: tags.meta, color: base03 },
302
+ { tag: tags.comment, fontStyle: 'italic', color: base03 },
303
+ { tag: tags.docComment, fontStyle: 'italic', color: base03 },
304
+ // HTML/XML elements
305
+ { tag: [tags.tagName], color: base05 },
306
+ { tag: [tags.attributeName], color: base06 },
307
+ // Markdown and text formatting
308
+ { tag: [tags.heading], fontWeight: 'bold', color: base07 },
309
+ { tag: [tags.strong], fontWeight: 'bold', color: base07 },
310
+ { tag: [tags.emphasis], fontStyle: 'italic', color: base09 },
311
+ // Links and URLs
312
+ { tag: [tags.link], color: visitedLinkColor, fontWeight: '500', textDecoration: 'underline', textUnderlinePosition: 'under' },
313
+ {
314
+ tag: [tags.url],
315
+ color: linkColor,
316
+ textDecoration: 'underline',
317
+ textUnderlineOffset: '2px',
318
+ },
319
+ // Special states
320
+ { tag: [tags.invalid], color: base01, textDecoration: 'underline wavy', borderBottom: `1px wavy ${invalid}` },
321
+ { tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
322
+ // Enhanced syntax highlighting
323
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: base0C },
324
+ { tag: tags.deleted, color: invalid },
325
+ { tag: tags.squareBracket, color: base03 },
326
+ { tag: tags.angleBracket, color: base03 },
327
+ // Additional specific styles
328
+ { tag: tags.monospace, color: base01 },
329
+ { tag: [tags.contentSeparator], color: base07 },
330
+ { tag: tags.quote, color: base03 },
86
331
  ]);
87
- // Extension to enable the GitHub Dark theme (both the editor theme and the highlight style).
332
+ /**
333
+ * Combined GitHub Dark theme extension
334
+ */
88
335
  const githubDark = [
89
336
  githubDarkTheme,
90
337
  /*@__PURE__*/syntaxHighlighting(githubDarkHighlightStyle),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fsegurai/codemirror-theme-github-dark",
3
3
  "description": "GitHub 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": {