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