@fsegurai/codemirror-theme-android-studio 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 +290 -32
  3. package/dist/index.d.cts +9 -0
  4. package/dist/index.d.ts +9 -0
  5. package/dist/index.js +290 -32
  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,60 +3,318 @@
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
- // Android Studio theme colors
8
- const base00 = '#282b2e', // Background
9
- base01 = '#a9b7c6', // Foreground
10
- base02 = '#4e5254', // Selection
11
- base03 = '#7f85891f', // Line highlight
12
- base04 = '#00FF00', // Caret
13
- base05 = '#cc7832', // Keyword, Deleted, ClassName
14
- base06 = '#6897bb', // Number, Literal, DerefOperator
15
- base07 = '#629755', // Link, VariableName
16
- base08 = 'grey', // Comment, Quote
17
- base09 = '#bbb529', // Meta, DocumentMeta
18
- base0A = '#6a8759', // String, PropertyName, AttributeValue
19
- base0B = '#ffc66d', // Heading, TypeName
20
- base0C = '#a9b7c6'; // AttributeName
21
- // Define the editor theme styles for Android Studio.
8
+ /**
9
+ * Enhanced Android Studio theme color palette
10
+ * ------------------------------------------
11
+ * Colors refined for better contrast and visual hierarchy
12
+ */
13
+ // Base colors
14
+ const base00 = '#282b2e', // Background (authentic IntelliJ IDEA dark theme)
15
+ base01 = '#a9b7c6', // Foreground (standard text)
16
+ base02 = '#3f3f3f', // Selection background (slightly darker for contrast)
17
+ base03 = '#3b3b3b', // Gutter background (slightly lighter than the main background)
18
+ base04 = '#606366', // Line numbers (slightly darker for less distraction)
19
+ // Language syntax colors
20
+ base05 = '#cc7832', // Keywords (signature orange)
21
+ base06 = '#6897bb', // Numbers, constants (signature blue)
22
+ base07 = '#9876aa', // Variables (improved purple)
23
+ base08 = '#787878', // Comments (authentic gray)
24
+ base09 = '#bbb529', // Meta, annotations (yellow-green)
25
+ base0A = '#6a8759', // Strings (signature green)
26
+ base0B = '#ffc66d', // Class names, types (warmer gold)
27
+ base0C = '#a9b7c6', // Attribute names (default text color)
28
+ base0D = '#629755', // Function names, docs (forest green)
29
+ base0E = '#d0d0ff', // Brackets, special constructs (soft purple)
30
+ base0F = '#e8bf6a', // Tags (amber)
31
+ base10 = '#3c7abb', // Links (blue)
32
+ base11 = '#50a658', // URLs (green)
33
+ // UI-specific colors
34
+ invalid = '#ff5353', // Error highlighting (more visible)
35
+ cursor = '#ffffff', // Cursor color
36
+ selectionBackground = '#2e5280', // Stronger selection background
37
+ selectionForeground = '#ffffff', // Selection text color
38
+ highlightBackground = '#323232', // Active line highlight
39
+ gutterBackground = '#313335', // Gutter background
40
+ tooltipBackground = base03, // Tooltip background
41
+ activeBracketBg = '#3b514d', activeBracketBorder = '#43705c', darkBackground = '#313335';
42
+ /**
43
+ * Enhanced editor theme styles for Android Studio
44
+ */
22
45
  const androidStudioTheme = view.EditorView.theme({
46
+ // Base editor styles
23
47
  '&': {
24
48
  color: base01,
25
49
  backgroundColor: base00,
50
+ fontSize: _utils.generalContent.fontSize,
51
+ fontFamily: _utils.generalContent.fontFamily,
26
52
  },
53
+ // Content and cursor
27
54
  '.cm-content': {
28
- caretColor: base04,
55
+ caretColor: cursor,
56
+ lineHeight: _utils.generalContent.lineHeight,
29
57
  },
30
- '&.cm-focused .cm-cursor': {
31
- borderLeftColor: base04,
58
+ '.cm-cursor, .cm-dropCursor': {
59
+ borderLeftColor: cursor,
60
+ borderLeftWidth: _utils.generalCursor.borderLeftWidth,
32
61
  },
62
+ '.cm-fat-cursor': {
63
+ backgroundColor: `${cursor}99`,
64
+ color: base00,
65
+ },
66
+ // Selection
33
67
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
34
- backgroundColor: base02,
68
+ backgroundColor: selectionBackground,
69
+ },
70
+ // Search functionality
71
+ '.cm-searchMatch': {
72
+ backgroundColor: '#32593d',
73
+ outline: '1px solid #ffffff',
74
+ borderRadius: _utils.generalSearchField.borderRadius,
75
+ '& span': {
76
+ color: selectionForeground,
77
+ },
78
+ },
79
+ '.cm-searchMatch.cm-searchMatch-selected': {
80
+ backgroundColor: '#375580',
81
+ color: selectionForeground,
82
+ padding: _utils.generalSearchField.padding,
83
+ '& span': {
84
+ color: selectionForeground,
85
+ },
86
+ },
87
+ '.cm-search.cm-panel.cm-textfield': {
88
+ color: base01,
89
+ borderRadius: _utils.generalSearchField.borderRadius,
90
+ padding: _utils.generalSearchField.padding,
91
+ },
92
+ // Panels
93
+ '.cm-panels': {
94
+ backgroundColor: darkBackground,
95
+ color: base01,
96
+ },
97
+ '.cm-panels.cm-panels-top': {
98
+ borderBottom: '2px solid #5b5b5b',
99
+ },
100
+ '.cm-panels.cm-panels-bottom': {
101
+ borderTop: '2px solid #5b5b5b',
35
102
  },
103
+ '.cm-panel button': {
104
+ backgroundColor: darkBackground,
105
+ color: base01,
106
+ border: _utils.generalPanel.border,
107
+ borderRadius: _utils.generalPanel.borderRadius,
108
+ padding: _utils.generalPanel.padding,
109
+ },
110
+ '.cm-panel button:hover': {
111
+ backgroundColor: '#404040',
112
+ },
113
+ // Line highlighting
36
114
  '.cm-activeLine': {
37
- backgroundColor: base03,
115
+ backgroundColor: '#32323221',
116
+ borderRadius: _utils.generalLine.borderRadius,
38
117
  },
118
+ // Gutters
39
119
  '.cm-gutters': {
40
- backgroundColor: base00,
120
+ backgroundColor: gutterBackground,
121
+ color: base04,
122
+ border: _utils.generalGutter.border,
123
+ borderRight: '1px solid #3f3f3f',
124
+ paddingRight: _utils.generalGutter.paddingRight,
125
+ },
126
+ '.cm-activeLineGutter': {
127
+ backgroundColor: highlightBackground,
128
+ color: '#c0c0c0',
129
+ fontWeight: _utils.generalGutter.fontWeight,
130
+ },
131
+ '.cm-lineNumbers': {
132
+ fontSize: _utils.generalGutter.fontSize,
133
+ },
134
+ '.cm-foldGutter': {
135
+ fontSize: _utils.generalGutter.fontSize,
136
+ },
137
+ '.cm-foldGutter .cm-gutterElement': {
138
+ color: base04,
139
+ cursor: 'pointer',
140
+ },
141
+ '.cm-foldGutter .cm-gutterElement:hover': {
41
142
  color: base01,
42
143
  },
144
+ // Tooltips and autocomplete
43
145
  '.cm-tooltip': {
44
- backgroundColor: base01,
146
+ backgroundColor: tooltipBackground,
147
+ border: '1px solid #5b5b5b',
148
+ borderRadius: _utils.generalTooltip.borderRadius,
149
+ padding: _utils.generalTooltip.padding,
150
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
151
+ },
152
+ '.cm-tooltip-autocomplete': {
153
+ '& > ul > li': {
154
+ padding: _utils.generalTooltip.padding,
155
+ lineHeight: _utils.generalTooltip.lineHeight,
156
+ },
157
+ '& > ul > li[aria-selected]': {
158
+ backgroundColor: selectionBackground,
159
+ color: selectionForeground,
160
+ borderRadius: _utils.generalTooltip.borderRadiusSelected,
161
+ },
162
+ '& > ul > li > span.cm-completionIcon': {
163
+ color: base04,
164
+ paddingRight: _utils.generalTooltip.paddingRight,
165
+ },
166
+ '& > ul > li > span.cm-completionDetail': {
167
+ color: base04,
168
+ fontStyle: 'italic',
169
+ },
170
+ },
171
+ '.cm-tooltip .cm-tooltip-arrow:before': {
172
+ borderTopColor: 'transparent',
173
+ borderBottomColor: 'transparent',
174
+ },
175
+ '.cm-tooltip .cm-tooltip-arrow:after': {
176
+ borderTopColor: tooltipBackground,
177
+ borderBottomColor: tooltipBackground,
178
+ },
179
+ // Diagnostics styling
180
+ '.cm-diagnostic': {
181
+ '&-error': {
182
+ borderLeft: `3px solid ${invalid}`,
183
+ },
184
+ '&-warning': {
185
+ borderLeft: `3px solid ${base0F}`,
186
+ },
187
+ '&-info': {
188
+ borderLeft: `3px solid ${base0D}`,
189
+ },
190
+ },
191
+ '.cm-lintPoint-error': {
192
+ borderBottom: `2px wavy ${invalid}`,
193
+ },
194
+ '.cm-lintPoint-warning': {
195
+ borderBottom: `2px wavy ${base0F}`,
196
+ },
197
+ // Matching brackets
198
+ '.cm-matchingBracket': {
199
+ backgroundColor: activeBracketBg,
200
+ outline: `1px solid ${activeBracketBorder}`,
201
+ borderRadius: _utils.generalMatching.borderRadius,
202
+ },
203
+ '.cm-nonmatchingBracket': {
204
+ backgroundColor: '#53383e',
205
+ outline: `1px solid ${invalid}`,
206
+ borderRadius: _utils.generalMatching.borderRadius,
207
+ },
208
+ // Selection matches
209
+ '.cm-selectionMatch': {
210
+ backgroundColor: '#32593d40',
211
+ outline: `1px solid ${base0D}`,
212
+ borderRadius: _utils.generalMatching.borderRadius,
213
+ },
214
+ // Fold placeholder
215
+ '.cm-foldPlaceholder': {
216
+ backgroundColor: tooltipBackground,
217
+ color: '#a1a1a1',
218
+ border: `1px dotted ${base04}`,
219
+ borderRadius: _utils.generalPlaceholder.borderRadius,
220
+ padding: _utils.generalPlaceholder.padding,
221
+ margin: _utils.generalPlaceholder.margin,
222
+ },
223
+ // Focus outline
224
+ '&.cm-focused': {
225
+ outline: 'none',
226
+ boxShadow: `0 0 0 2px ${base02}, 0 0 0 4px ${base00}`,
227
+ },
228
+ // Scrollbars
229
+ '& .cm-scroller::-webkit-scrollbar': {
230
+ width: _utils.generalScroller.width,
231
+ height: _utils.generalScroller.height,
232
+ },
233
+ '& .cm-scroller::-webkit-scrollbar-track': {
234
+ background: darkBackground,
235
+ },
236
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
237
+ backgroundColor: '#5a5a5a',
238
+ borderRadius: _utils.generalScroller.borderRadius,
239
+ border: `3px solid ${darkBackground}`,
240
+ },
241
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
242
+ backgroundColor: '#6e6e6e',
243
+ },
244
+ // Ghost text
245
+ '.cm-ghostText': {
246
+ opacity: '0.5',
247
+ color: '#a9a9a9',
45
248
  },
46
249
  }, { dark: true });
47
- // Define the highlighting style for code in the Android Studio theme.
250
+ /**
251
+ * Enhanced syntax highlighting for the Android Studio theme
252
+ */
48
253
  const androidStudioHighlightStyle = language.HighlightStyle.define([
49
- { tag: [highlight.tags.keyword, highlight.tags.deleted, highlight.tags.className], color: base05 },
50
- { tag: [highlight.tags.number, highlight.tags.literal, highlight.tags.derefOperator], color: base06 },
51
- { tag: [highlight.tags.link, highlight.tags.variableName], color: base07 },
52
- { tag: [highlight.tags.comment, highlight.tags.quote], color: base08 },
53
- { tag: [highlight.tags.meta, highlight.tags.documentMeta], color: base09 },
54
- { tag: [highlight.tags.string, highlight.tags.propertyName, highlight.tags.attributeValue], color: base0A },
55
- { tag: [highlight.tags.heading, highlight.tags.typeName], color: base0B },
254
+ // Keywords and control flow
255
+ { tag: highlight.tags.keyword, color: base05, fontWeight: 'bold' },
256
+ { tag: highlight.tags.controlKeyword, color: base05, fontWeight: 'bold' },
257
+ { tag: highlight.tags.moduleKeyword, color: base05, fontWeight: 'bold' },
258
+ // Names and variables
259
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base07 },
260
+ { tag: [highlight.tags.variableName], color: base07 },
261
+ { tag: [highlight.tags.propertyName], color: base0A, fontStyle: 'normal' },
262
+ // Classes and types
263
+ { tag: [highlight.tags.typeName], color: base0B },
264
+ { tag: [highlight.tags.className], color: base0B, fontStyle: 'italic' },
265
+ { tag: [highlight.tags.namespace], color: base07, fontStyle: 'italic' },
266
+ // Operators and punctuation
267
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base05 },
268
+ { tag: [highlight.tags.bracket], color: base0E },
269
+ { tag: [highlight.tags.brace], color: base01 },
270
+ { tag: [highlight.tags.punctuation], color: base01 },
271
+ // Functions and parameters
272
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base01 },
273
+ { tag: [highlight.tags.definition(highlight.tags.variableName)], color: base07 },
274
+ // Constants and literals
275
+ { tag: highlight.tags.number, color: base06 },
276
+ { tag: highlight.tags.changed, color: base06 },
277
+ { tag: highlight.tags.annotation, color: base09, fontStyle: 'italic' },
278
+ { tag: highlight.tags.modifier, color: base09, fontStyle: 'italic' },
279
+ { tag: highlight.tags.self, color: base05 },
280
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base06 },
281
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base05 },
282
+ // Strings and regex
283
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base0A },
284
+ { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base0A },
285
+ { tag: highlight.tags.string, color: base0A },
286
+ // Punctuation and structure
287
+ { tag: highlight.tags.definition(highlight.tags.typeName), color: base0B, fontWeight: 'bold' },
288
+ // Comments and documentation
289
+ { tag: highlight.tags.meta, color: base08 },
290
+ { tag: highlight.tags.comment, fontStyle: 'italic', color: base08 },
291
+ { tag: highlight.tags.docComment, fontStyle: 'italic', color: base0D },
292
+ // HTML/XML elements
293
+ { tag: [highlight.tags.tagName], color: base0F },
56
294
  { tag: [highlight.tags.attributeName], color: base0C },
57
- { tag: highlight.tags.emphasis, fontStyle: 'italic' },
295
+ // Markdown and text formatting
296
+ { tag: [highlight.tags.heading], fontWeight: 'bold', color: base0B },
297
+ { tag: [highlight.tags.strong], fontWeight: 'bold' },
298
+ { tag: [highlight.tags.emphasis], fontStyle: 'italic' },
299
+ // Links and URLs
300
+ { tag: [highlight.tags.link], color: base10, fontWeight: '500' },
301
+ {
302
+ tag: [highlight.tags.url],
303
+ color: base11,
304
+ textDecoration: 'underline',
305
+ textUnderlineOffset: '2px',
306
+ },
307
+ // Special states
308
+ { tag: [highlight.tags.invalid], color: invalid, textDecoration: 'underline wavy' },
309
+ { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
310
+ // Enhanced syntax highlighting
311
+ { tag: highlight.tags.constant(highlight.tags.name), color: base06 },
312
+ { tag: highlight.tags.deleted, color: invalid },
313
+ { tag: highlight.tags.labelName, color: base0D },
58
314
  ]);
59
- // Extension to enable the Android Studio theme (both the editor theme and the highlight style).
315
+ /**
316
+ * Combined Android Studio theme extension
317
+ */
60
318
  const androidStudio = [
61
319
  androidStudioTheme,
62
320
  language.syntaxHighlighting(androidStudioHighlightStyle),
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 Android Studio
6
+ */
4
7
  declare const androidStudioTheme: Extension;
8
+ /**
9
+ * Enhanced syntax highlighting for the Android Studio theme
10
+ */
5
11
  declare const androidStudioHighlightStyle: HighlightStyle;
12
+ /**
13
+ * Combined Android Studio theme extension
14
+ */
6
15
  declare const androidStudio: Extension;
7
16
 
8
17
  export { androidStudio, androidStudioHighlightStyle, androidStudioTheme };
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 Android Studio
6
+ */
4
7
  declare const androidStudioTheme: Extension;
8
+ /**
9
+ * Enhanced syntax highlighting for the Android Studio theme
10
+ */
5
11
  declare const androidStudioHighlightStyle: HighlightStyle;
12
+ /**
13
+ * Combined Android Studio theme extension
14
+ */
6
15
  declare const androidStudio: Extension;
7
16
 
8
17
  export { androidStudio, androidStudioHighlightStyle, androidStudioTheme };
package/dist/index.js CHANGED
@@ -1,60 +1,318 @@
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
- // Android Studio theme colors
6
- const base00 = '#282b2e', // Background
7
- base01 = '#a9b7c6', // Foreground
8
- base02 = '#4e5254', // Selection
9
- base03 = '#7f85891f', // Line highlight
10
- base04 = '#00FF00', // Caret
11
- base05 = '#cc7832', // Keyword, Deleted, ClassName
12
- base06 = '#6897bb', // Number, Literal, DerefOperator
13
- base07 = '#629755', // Link, VariableName
14
- base08 = 'grey', // Comment, Quote
15
- base09 = '#bbb529', // Meta, DocumentMeta
16
- base0A = '#6a8759', // String, PropertyName, AttributeValue
17
- base0B = '#ffc66d', // Heading, TypeName
18
- base0C = '#a9b7c6'; // AttributeName
19
- // Define the editor theme styles for Android Studio.
6
+ /**
7
+ * Enhanced Android Studio theme color palette
8
+ * ------------------------------------------
9
+ * Colors refined for better contrast and visual hierarchy
10
+ */
11
+ // Base colors
12
+ const base00 = '#282b2e', // Background (authentic IntelliJ IDEA dark theme)
13
+ base01 = '#a9b7c6', // Foreground (standard text)
14
+ base02 = '#3f3f3f', // Selection background (slightly darker for contrast)
15
+ base03 = '#3b3b3b', // Gutter background (slightly lighter than the main background)
16
+ base04 = '#606366', // Line numbers (slightly darker for less distraction)
17
+ // Language syntax colors
18
+ base05 = '#cc7832', // Keywords (signature orange)
19
+ base06 = '#6897bb', // Numbers, constants (signature blue)
20
+ base07 = '#9876aa', // Variables (improved purple)
21
+ base08 = '#787878', // Comments (authentic gray)
22
+ base09 = '#bbb529', // Meta, annotations (yellow-green)
23
+ base0A = '#6a8759', // Strings (signature green)
24
+ base0B = '#ffc66d', // Class names, types (warmer gold)
25
+ base0C = '#a9b7c6', // Attribute names (default text color)
26
+ base0D = '#629755', // Function names, docs (forest green)
27
+ base0E = '#d0d0ff', // Brackets, special constructs (soft purple)
28
+ base0F = '#e8bf6a', // Tags (amber)
29
+ base10 = '#3c7abb', // Links (blue)
30
+ base11 = '#50a658', // URLs (green)
31
+ // UI-specific colors
32
+ invalid = '#ff5353', // Error highlighting (more visible)
33
+ cursor = '#ffffff', // Cursor color
34
+ selectionBackground = '#2e5280', // Stronger selection background
35
+ selectionForeground = '#ffffff', // Selection text color
36
+ highlightBackground = '#323232', // Active line highlight
37
+ gutterBackground = '#313335', // Gutter background
38
+ tooltipBackground = base03, // Tooltip background
39
+ activeBracketBg = '#3b514d', activeBracketBorder = '#43705c', darkBackground = '#313335';
40
+ /**
41
+ * Enhanced editor theme styles for Android Studio
42
+ */
20
43
  const androidStudioTheme = /*@__PURE__*/EditorView.theme({
44
+ // Base editor styles
21
45
  '&': {
22
46
  color: base01,
23
47
  backgroundColor: base00,
48
+ fontSize: generalContent.fontSize,
49
+ fontFamily: generalContent.fontFamily,
24
50
  },
51
+ // Content and cursor
25
52
  '.cm-content': {
26
- caretColor: base04,
53
+ caretColor: cursor,
54
+ lineHeight: generalContent.lineHeight,
27
55
  },
28
- '&.cm-focused .cm-cursor': {
29
- borderLeftColor: base04,
56
+ '.cm-cursor, .cm-dropCursor': {
57
+ borderLeftColor: cursor,
58
+ borderLeftWidth: generalCursor.borderLeftWidth,
30
59
  },
60
+ '.cm-fat-cursor': {
61
+ backgroundColor: `${cursor}99`,
62
+ color: base00,
63
+ },
64
+ // Selection
31
65
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
32
- backgroundColor: base02,
66
+ backgroundColor: selectionBackground,
67
+ },
68
+ // Search functionality
69
+ '.cm-searchMatch': {
70
+ backgroundColor: '#32593d',
71
+ outline: '1px solid #ffffff',
72
+ borderRadius: generalSearchField.borderRadius,
73
+ '& span': {
74
+ color: selectionForeground,
75
+ },
76
+ },
77
+ '.cm-searchMatch.cm-searchMatch-selected': {
78
+ backgroundColor: '#375580',
79
+ color: selectionForeground,
80
+ padding: generalSearchField.padding,
81
+ '& span': {
82
+ color: selectionForeground,
83
+ },
84
+ },
85
+ '.cm-search.cm-panel.cm-textfield': {
86
+ color: base01,
87
+ borderRadius: generalSearchField.borderRadius,
88
+ padding: generalSearchField.padding,
89
+ },
90
+ // Panels
91
+ '.cm-panels': {
92
+ backgroundColor: darkBackground,
93
+ color: base01,
94
+ },
95
+ '.cm-panels.cm-panels-top': {
96
+ borderBottom: '2px solid #5b5b5b',
97
+ },
98
+ '.cm-panels.cm-panels-bottom': {
99
+ borderTop: '2px solid #5b5b5b',
33
100
  },
101
+ '.cm-panel button': {
102
+ backgroundColor: darkBackground,
103
+ color: base01,
104
+ border: generalPanel.border,
105
+ borderRadius: generalPanel.borderRadius,
106
+ padding: generalPanel.padding,
107
+ },
108
+ '.cm-panel button:hover': {
109
+ backgroundColor: '#404040',
110
+ },
111
+ // Line highlighting
34
112
  '.cm-activeLine': {
35
- backgroundColor: base03,
113
+ backgroundColor: '#32323221',
114
+ borderRadius: generalLine.borderRadius,
36
115
  },
116
+ // Gutters
37
117
  '.cm-gutters': {
38
- backgroundColor: base00,
118
+ backgroundColor: gutterBackground,
119
+ color: base04,
120
+ border: generalGutter.border,
121
+ borderRight: '1px solid #3f3f3f',
122
+ paddingRight: generalGutter.paddingRight,
123
+ },
124
+ '.cm-activeLineGutter': {
125
+ backgroundColor: highlightBackground,
126
+ color: '#c0c0c0',
127
+ fontWeight: generalGutter.fontWeight,
128
+ },
129
+ '.cm-lineNumbers': {
130
+ fontSize: generalGutter.fontSize,
131
+ },
132
+ '.cm-foldGutter': {
133
+ fontSize: generalGutter.fontSize,
134
+ },
135
+ '.cm-foldGutter .cm-gutterElement': {
136
+ color: base04,
137
+ cursor: 'pointer',
138
+ },
139
+ '.cm-foldGutter .cm-gutterElement:hover': {
39
140
  color: base01,
40
141
  },
142
+ // Tooltips and autocomplete
41
143
  '.cm-tooltip': {
42
- backgroundColor: base01,
144
+ backgroundColor: tooltipBackground,
145
+ border: '1px solid #5b5b5b',
146
+ borderRadius: generalTooltip.borderRadius,
147
+ padding: generalTooltip.padding,
148
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
149
+ },
150
+ '.cm-tooltip-autocomplete': {
151
+ '& > ul > li': {
152
+ padding: generalTooltip.padding,
153
+ lineHeight: generalTooltip.lineHeight,
154
+ },
155
+ '& > ul > li[aria-selected]': {
156
+ backgroundColor: selectionBackground,
157
+ color: selectionForeground,
158
+ borderRadius: generalTooltip.borderRadiusSelected,
159
+ },
160
+ '& > ul > li > span.cm-completionIcon': {
161
+ color: base04,
162
+ paddingRight: generalTooltip.paddingRight,
163
+ },
164
+ '& > ul > li > span.cm-completionDetail': {
165
+ color: base04,
166
+ fontStyle: 'italic',
167
+ },
168
+ },
169
+ '.cm-tooltip .cm-tooltip-arrow:before': {
170
+ borderTopColor: 'transparent',
171
+ borderBottomColor: 'transparent',
172
+ },
173
+ '.cm-tooltip .cm-tooltip-arrow:after': {
174
+ borderTopColor: tooltipBackground,
175
+ borderBottomColor: tooltipBackground,
176
+ },
177
+ // Diagnostics styling
178
+ '.cm-diagnostic': {
179
+ '&-error': {
180
+ borderLeft: `3px solid ${invalid}`,
181
+ },
182
+ '&-warning': {
183
+ borderLeft: `3px solid ${base0F}`,
184
+ },
185
+ '&-info': {
186
+ borderLeft: `3px solid ${base0D}`,
187
+ },
188
+ },
189
+ '.cm-lintPoint-error': {
190
+ borderBottom: `2px wavy ${invalid}`,
191
+ },
192
+ '.cm-lintPoint-warning': {
193
+ borderBottom: `2px wavy ${base0F}`,
194
+ },
195
+ // Matching brackets
196
+ '.cm-matchingBracket': {
197
+ backgroundColor: activeBracketBg,
198
+ outline: `1px solid ${activeBracketBorder}`,
199
+ borderRadius: generalMatching.borderRadius,
200
+ },
201
+ '.cm-nonmatchingBracket': {
202
+ backgroundColor: '#53383e',
203
+ outline: `1px solid ${invalid}`,
204
+ borderRadius: generalMatching.borderRadius,
205
+ },
206
+ // Selection matches
207
+ '.cm-selectionMatch': {
208
+ backgroundColor: '#32593d40',
209
+ outline: `1px solid ${base0D}`,
210
+ borderRadius: generalMatching.borderRadius,
211
+ },
212
+ // Fold placeholder
213
+ '.cm-foldPlaceholder': {
214
+ backgroundColor: tooltipBackground,
215
+ color: '#a1a1a1',
216
+ border: `1px dotted ${base04}`,
217
+ borderRadius: generalPlaceholder.borderRadius,
218
+ padding: generalPlaceholder.padding,
219
+ margin: generalPlaceholder.margin,
220
+ },
221
+ // Focus outline
222
+ '&.cm-focused': {
223
+ outline: 'none',
224
+ boxShadow: `0 0 0 2px ${base02}, 0 0 0 4px ${base00}`,
225
+ },
226
+ // Scrollbars
227
+ '& .cm-scroller::-webkit-scrollbar': {
228
+ width: generalScroller.width,
229
+ height: generalScroller.height,
230
+ },
231
+ '& .cm-scroller::-webkit-scrollbar-track': {
232
+ background: darkBackground,
233
+ },
234
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
235
+ backgroundColor: '#5a5a5a',
236
+ borderRadius: generalScroller.borderRadius,
237
+ border: `3px solid ${darkBackground}`,
238
+ },
239
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
240
+ backgroundColor: '#6e6e6e',
241
+ },
242
+ // Ghost text
243
+ '.cm-ghostText': {
244
+ opacity: '0.5',
245
+ color: '#a9a9a9',
43
246
  },
44
247
  }, { dark: true });
45
- // Define the highlighting style for code in the Android Studio theme.
248
+ /**
249
+ * Enhanced syntax highlighting for the Android Studio theme
250
+ */
46
251
  const androidStudioHighlightStyle = /*@__PURE__*/HighlightStyle.define([
47
- { tag: [tags.keyword, tags.deleted, tags.className], color: base05 },
48
- { tag: [tags.number, tags.literal, tags.derefOperator], color: base06 },
49
- { tag: [tags.link, tags.variableName], color: base07 },
50
- { tag: [tags.comment, tags.quote], color: base08 },
51
- { tag: [tags.meta, tags.documentMeta], color: base09 },
52
- { tag: [tags.string, tags.propertyName, tags.attributeValue], color: base0A },
53
- { tag: [tags.heading, tags.typeName], color: base0B },
252
+ // Keywords and control flow
253
+ { tag: tags.keyword, color: base05, fontWeight: 'bold' },
254
+ { tag: tags.controlKeyword, color: base05, fontWeight: 'bold' },
255
+ { tag: tags.moduleKeyword, color: base05, fontWeight: 'bold' },
256
+ // Names and variables
257
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base07 },
258
+ { tag: [tags.variableName], color: base07 },
259
+ { tag: [tags.propertyName], color: base0A, fontStyle: 'normal' },
260
+ // Classes and types
261
+ { tag: [tags.typeName], color: base0B },
262
+ { tag: [tags.className], color: base0B, fontStyle: 'italic' },
263
+ { tag: [tags.namespace], color: base07, fontStyle: 'italic' },
264
+ // Operators and punctuation
265
+ { tag: [tags.operator, tags.operatorKeyword], color: base05 },
266
+ { tag: [tags.bracket], color: base0E },
267
+ { tag: [tags.brace], color: base01 },
268
+ { tag: [tags.punctuation], color: base01 },
269
+ // Functions and parameters
270
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base01 },
271
+ { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: base07 },
272
+ // Constants and literals
273
+ { tag: tags.number, color: base06 },
274
+ { tag: tags.changed, color: base06 },
275
+ { tag: tags.annotation, color: base09, fontStyle: 'italic' },
276
+ { tag: tags.modifier, color: base09, fontStyle: 'italic' },
277
+ { tag: tags.self, color: base05 },
278
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base06 },
279
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base05 },
280
+ // Strings and regex
281
+ { tag: [tags.processingInstruction, tags.inserted], color: base0A },
282
+ { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: base0A },
283
+ { tag: tags.string, color: base0A },
284
+ // Punctuation and structure
285
+ { tag: /*@__PURE__*/tags.definition(tags.typeName), color: base0B, fontWeight: 'bold' },
286
+ // Comments and documentation
287
+ { tag: tags.meta, color: base08 },
288
+ { tag: tags.comment, fontStyle: 'italic', color: base08 },
289
+ { tag: tags.docComment, fontStyle: 'italic', color: base0D },
290
+ // HTML/XML elements
291
+ { tag: [tags.tagName], color: base0F },
54
292
  { tag: [tags.attributeName], color: base0C },
55
- { tag: tags.emphasis, fontStyle: 'italic' },
293
+ // Markdown and text formatting
294
+ { tag: [tags.heading], fontWeight: 'bold', color: base0B },
295
+ { tag: [tags.strong], fontWeight: 'bold' },
296
+ { tag: [tags.emphasis], fontStyle: 'italic' },
297
+ // Links and URLs
298
+ { tag: [tags.link], color: base10, fontWeight: '500' },
299
+ {
300
+ tag: [tags.url],
301
+ color: base11,
302
+ textDecoration: 'underline',
303
+ textUnderlineOffset: '2px',
304
+ },
305
+ // Special states
306
+ { tag: [tags.invalid], color: invalid, textDecoration: 'underline wavy' },
307
+ { tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
308
+ // Enhanced syntax highlighting
309
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: base06 },
310
+ { tag: tags.deleted, color: invalid },
311
+ { tag: tags.labelName, color: base0D },
56
312
  ]);
57
- // Extension to enable the Android Studio theme (both the editor theme and the highlight style).
313
+ /**
314
+ * Combined Android Studio theme extension
315
+ */
58
316
  const androidStudio = [
59
317
  androidStudioTheme,
60
318
  /*@__PURE__*/syntaxHighlighting(androidStudioHighlightStyle),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fsegurai/codemirror-theme-android-studio",
3
3
  "description": "Android Studio 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": {