@fsegurai/codemirror-theme-basic-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 +44 -41
  2. package/dist/index.cjs +291 -131
  3. package/dist/index.d.cts +6 -7
  4. package/dist/index.d.ts +6 -7
  5. package/dist/index.js +291 -131
  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">
@@ -24,22 +24,24 @@
24
24
 
25
25
  **A library of custom themes for CodeMirror 6.**
26
26
 
27
- `@fsegurai/codemirror-theme-basic-light` is a theme for CodeMirror 6 editor, making it visually engaging and adaptable to different coding styles and user preferences.
27
+ `@fsegurai/codemirror-theme-basic-light` is a theme for CodeMirror 6 editor, making it visually engaging and adaptable
28
+ to different coding styles and user preferences.
28
29
 
29
30
  ### Table of contents
30
31
 
31
32
  - [Installation](#installation)
32
- - [@fsegurai/codemirror-theme-basic-light](#fseguraicodemirror-theme-basic-light)
33
- - [Using Theme](#using-theme)
34
- - [Available Themes](#available-themes)
35
- - [Demo Application](#demo-application)
33
+ - [@fsegurai/codemirror-theme-basic-light](#fseguraicodemirror-theme-basic-light)
34
+ - [Using Theme](#using-theme)
35
+ - [Available Themes](#available-themes)
36
+ - [Demo Application](#demo-application)
36
37
  - [License](#license)
37
38
 
38
39
  ## Installation
39
40
 
40
41
  ### @fsegurai/codemirror-theme-basic-light
41
42
 
42
- To add `@fsegurai/codemirror-theme-basic-light` along with CodeMirror 6 to your `package.json` use the following commands.
43
+ To add `@fsegurai/codemirror-theme-basic-light` along with CodeMirror 6 to your `package.json` use the following
44
+ commands.
43
45
 
44
46
  ```bash
45
47
  npm install @fsegurai/codemirror-theme-basic-light codemirror@^6.0.0 --save
@@ -55,13 +57,13 @@ import { markdown } from '@codemirror/lang-markdown'
55
57
  import { basicLight } from '@fsegurai/codemirror-theme-basic-basic-light'
56
58
 
57
59
  let editor = new EditorView({
58
- doc: '# Hello World',
59
- extensions: [
60
- basicSetup,
61
- markdown(),
62
- basicLight
63
- ],
64
- parent: document.body
60
+ doc: '# Hello World',
61
+ extensions: [
62
+ basicSetup,
63
+ markdown(),
64
+ basicLight
65
+ ],
66
+ parent: document.body
65
67
  })
66
68
  ```
67
69
 
@@ -69,36 +71,37 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
69
71
 
70
72
  ### Available Themes
71
73
 
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.
74
+ | Theme | Package | Version |
75
+ |-------------------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|
76
+ | 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) |
77
+ | 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) |
78
+ | 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) |
79
+ | 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) |
80
+ | 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) |
81
+ | 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) |
82
+ | 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) |
83
+ | 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) |
84
+ | 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) |
85
+ | 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) |
86
+ | 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) |
87
+ | 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) |
88
+ | 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) |
89
+ | 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) |
90
+ | 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) |
91
+ | 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) |
92
+ | 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) |
93
+ | 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) |
94
+ | 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) |
95
+ | 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) |
96
+ | 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) |
97
+ | 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) |
98
+ | 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) |
99
+ | 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
100
 
99
101
  ### Demo Application
100
102
 
101
- To see all themes in action, check out the demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
103
+ To see all themes in action, check out the
104
+ demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
102
105
 
103
106
  To set up the demo locally:
104
107
 
package/dist/index.cjs CHANGED
@@ -3,80 +3,184 @@
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
- // Polar Night
8
- const base00 = '#2e3440', // black
9
- base01 = '#3b4252', // dark grey
10
- base02 = '#434c5e', base03 = '#4c566a'; // grey
11
- // Snow Storm
12
- const base04 = '#7692a033', // light grey
13
- base05 = '#e5e9f0', // off white
14
- base06 = '#eceff4'; // white
15
- // Frost
16
- const base07 = '#8fbcbb', // moss green
17
- base08 = '#88c0d0', // ice blue
18
- base09 = '#81a1c1', // water blue
19
- base0A = '#5e81ac'; // deep blue
20
- // Aurora
21
- const base0b = '#bf616a', // red
22
- base0C = '#d08770', // orange
23
- base0D = '#ebcb8b', // yellow
24
- base0E = '#a3be8c', // green
25
- base0F = '#b48ead'; // purple
26
- const invalid = '#d30102', darkBackground = base06, highlightBackground = base04, background = '#ffffff', tooltipBackground = base05, selection = '#6dceff85', selectionMatch = '#02b8ff57', cursor = base01;
27
8
  /**
28
- The editor theme styles for Basic Light.
29
- */
9
+ * Enhanced color palette for Basic Light theme
10
+ * ----------------------------------------
11
+ * Colors are organized by function with visual color blocks for quick reference
12
+ */
13
+ // Text colors (dark shades)
14
+ const base00 = '#1c2434'; // deep navy - primary text (darker for better contrast)
15
+ const base01 = '#2d3748'; // dark slate - secondary text, cursor
16
+ const base02 = '#4a5568'; // medium slate - gutter text
17
+ const base03 = '#718096'; // steel blue - comments, panel text
18
+ // Background shades
19
+ const base04 = '#edf2f750'; // very light blue w/transparency - active line gutter
20
+ const base05 = '#f7fafc'; // off-white - tooltip background
21
+ const base06 = '#f0f4f8'; // snow-white - gutter background
22
+ // Primary accent colors (cool tones)
23
+ const base07 = '#0c7792'; // teal - links, braces (more saturated)
24
+ const base08 = '#0369a1'; // azure blue - numbers, constants (deeper)
25
+ const base09 = '#2b6cb0'; // royal blue - variables, parameters
26
+ const base0A = '#1a365d'; // deep navy - keywords, headings
27
+ // Secondary accent colors (warm and complementary)
28
+ const base0B = '#c53030'; // red - square brackets (more vibrant)
29
+ const base0C = '#dd6b20'; // orange - strings (warmer, more vibrant)
30
+ const base0D = '#d69e2e'; // amber - class names (more saturated)
31
+ const base0E = '#2f855a'; // green - operators (deeper, richer)
32
+ const base0F = '#805ad5'; // purple - tag names (more vibrant)
33
+ // UI-specific colors
34
+ const invalid = '#e53e3e'; // bright red - errors (more visible)
35
+ const darkBackground = base06; // panel background
36
+ const highlightBackground = '#ebf4ff40'; // active line highlight (subtle blue)
37
+ const background = '#ffffff'; // editor background
38
+ const tooltipBackground = base05; // tooltip background
39
+ const selection = '#90cdf480'; // selection background (clearer blue)
40
+ const selectionMatch = '#63b3ed40'; // selection match highlight
41
+ const cursor = base01; // cursor color
42
+ const activeBracketBg = '#0c779220';
43
+ const activeBracketBorder = base09;
44
+ /**
45
+ * Enhanced editor theme styles for Basic Light
46
+ */
30
47
  const basicLightTheme = view.EditorView.theme({
48
+ // Base editor styles
31
49
  '&': {
32
50
  color: base00,
33
51
  backgroundColor: background,
52
+ fontSize: _utils.generalContent.fontSize,
53
+ fontFamily: _utils.generalContent.fontFamily,
34
54
  },
55
+ // Content and cursor
35
56
  '.cm-content': {
36
57
  caretColor: cursor,
58
+ lineHeight: _utils.generalContent.lineHeight,
59
+ },
60
+ '.cm-cursor, .cm-dropCursor': {
61
+ borderLeftColor: cursor,
62
+ borderLeftWidth: _utils.generalCursor.borderLeftWidth,
63
+ },
64
+ '.cm-fat-cursor': {
65
+ backgroundColor: `${cursor}99`,
66
+ color: background,
37
67
  },
38
- '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
68
+ // Selection
39
69
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
40
70
  backgroundColor: selection,
41
- color: '#00008b',
71
+ color: base0A,
72
+ },
73
+ // Make sure selection appears above active line
74
+ '.cm-selectionLayer': {
75
+ zIndex: 100,
42
76
  },
43
- '.cm-panels': { backgroundColor: darkBackground, color: base03 },
44
- '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
45
- '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
77
+ // Search functionality
46
78
  '.cm-searchMatch': {
47
- backgroundColor: '#72a1ff59',
48
- outline: `1px solid ${base03}`,
79
+ backgroundColor: '#63b3ed40',
80
+ outline: `1px solid ${base09}`,
81
+ color: base00,
82
+ borderRadius: _utils.generalSearchField.borderRadius,
83
+ '& span': {
84
+ color: base00,
85
+ },
49
86
  },
50
87
  '.cm-searchMatch.cm-searchMatch-selected': {
51
- backgroundColor: base05,
88
+ backgroundColor: '#63b3ed70',
89
+ color: base00,
90
+ padding: _utils.generalSearchField.padding,
91
+ '& span': {
92
+ color: base00,
93
+ },
52
94
  },
53
- '.cm-activeLine': { backgroundColor: highlightBackground },
54
- '.cm-selectionMatch': {
55
- backgroundColor: selectionMatch,
95
+ '.cm-search.cm-panel.cm-textfield': {
96
+ color: base02,
97
+ borderRadius: _utils.generalSearchField.borderRadius,
98
+ padding: _utils.generalSearchField.padding,
56
99
  },
57
- '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
58
- outline: `1px solid ${base03}`,
100
+ // Panels
101
+ '.cm-panels': {
102
+ backgroundColor: darkBackground,
103
+ color: base03,
104
+ borderRadius: '4px',
59
105
  },
60
- '&.cm-focused .cm-matchingBracket': {
61
- backgroundColor: base06,
106
+ '.cm-panels.cm-panels-top': {
107
+ borderBottom: '1px solid #e2e8f0',
62
108
  },
109
+ '.cm-panels.cm-panels-bottom': {
110
+ borderTop: '1px solid #e2e8f0',
111
+ },
112
+ '.cm-panel button': {
113
+ backgroundColor: darkBackground,
114
+ color: base02,
115
+ border: _utils.generalPanel.border,
116
+ borderRadius: _utils.generalPanel.borderRadius,
117
+ padding: _utils.generalPanel.padding,
118
+ },
119
+ '.cm-panel button:hover': {
120
+ backgroundColor: '#e2e8f0',
121
+ },
122
+ // Line highlighting
123
+ '.cm-activeLine': {
124
+ backgroundColor: highlightBackground,
125
+ borderRadius: _utils.generalLine.borderRadius,
126
+ zIndex: 1,
127
+ },
128
+ // Gutters
63
129
  '.cm-gutters': {
64
130
  backgroundColor: base06,
65
- color: base00,
66
- border: 'none',
131
+ color: base02,
132
+ border: _utils.generalGutter.border,
133
+ borderRight: '1px solid #e2e8f0',
134
+ paddingRight: _utils.generalGutter.paddingRight,
67
135
  },
68
136
  '.cm-activeLineGutter': {
69
- backgroundColor: selection,
70
- color: '#00008b',
137
+ backgroundColor: base04,
138
+ color: base00,
139
+ fontWeight: _utils.generalGutter.fontWeight,
71
140
  },
72
- '.cm-foldPlaceholder': {
73
- backgroundColor: 'transparent',
74
- border: 'none',
75
- color: '#ddd',
141
+ '.cm-lineNumbers': {
142
+ fontSize: _utils.generalGutter.fontSize,
143
+ },
144
+ '.cm-foldGutter': {
145
+ fontSize: _utils.generalGutter.fontSize,
146
+ },
147
+ '.cm-foldGutter .cm-gutterElement': {
148
+ color: base02,
149
+ cursor: 'pointer',
76
150
  },
151
+ '.cm-foldGutter .cm-gutterElement:hover': {
152
+ color: base00,
153
+ },
154
+ // Tooltips and autocomplete
77
155
  '.cm-tooltip': {
78
- border: 'none',
79
156
  backgroundColor: tooltipBackground,
157
+ border: '1px solid #e2e8f0',
158
+ borderRadius: _utils.generalTooltip.borderRadius,
159
+ padding: _utils.generalTooltip.padding,
160
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
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: '#0c779220',
173
+ color: base00,
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
+ },
80
184
  },
81
185
  '.cm-tooltip .cm-tooltip-arrow:before': {
82
186
  borderTopColor: 'transparent',
@@ -86,113 +190,169 @@ const basicLightTheme = view.EditorView.theme({
86
190
  borderTopColor: tooltipBackground,
87
191
  borderBottomColor: tooltipBackground,
88
192
  },
89
- '.cm-tooltip-autocomplete': {
90
- '& > ul > li[aria-selected]': {
91
- color: base03,
193
+ // Diagnostics styling
194
+ '.cm-diagnostic': {
195
+ '&-error': {
196
+ borderLeft: `3px solid ${invalid}`,
197
+ },
198
+ '&-warning': {
199
+ borderLeft: `3px solid ${base0D}`,
200
+ },
201
+ '&-info': {
202
+ borderLeft: `3px solid ${base07}`,
92
203
  },
93
204
  },
94
- }, { dark: false });
95
- /**
96
- The highlighting style for code in the Basic Light theme.
97
- */
98
- const basicLightHighlightStyle = language.HighlightStyle.define([
99
- { tag: highlight.tags.keyword, color: base0A },
100
- {
101
- tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
102
- color: base0C,
103
- },
104
- { tag: [highlight.tags.variableName], color: base0C },
105
- { tag: [highlight.tags.function(highlight.tags.variableName)], color: base0A },
106
- { tag: [highlight.tags.labelName], color: base09 },
107
- {
108
- tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
109
- color: base0A,
110
- },
111
- { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base0E },
112
- { tag: [highlight.tags.brace], color: base07 },
113
- {
114
- tag: [highlight.tags.annotation],
115
- color: invalid,
116
- },
117
- {
118
- tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
119
- color: base08,
120
- },
121
- {
122
- tag: [highlight.tags.typeName, highlight.tags.className],
123
- color: base0D,
124
- },
125
- {
126
- tag: [highlight.tags.operator, highlight.tags.operatorKeyword],
127
- color: base0E,
128
- },
129
- {
130
- tag: [highlight.tags.tagName],
131
- color: base0F,
205
+ '.cm-lintPoint-error': {
206
+ borderBottom: `2px wavy ${invalid}`,
132
207
  },
133
- {
134
- tag: [highlight.tags.squareBracket],
135
- color: base0b,
208
+ '.cm-lintPoint-warning': {
209
+ borderBottom: `2px wavy ${base0D}`,
136
210
  },
137
- {
138
- tag: [highlight.tags.angleBracket],
139
- color: base0C,
211
+ // Matching brackets
212
+ '.cm-matchingBracket': {
213
+ backgroundColor: activeBracketBg,
214
+ outline: `1px solid ${activeBracketBorder}`,
215
+ borderRadius: _utils.generalMatching.borderRadius,
140
216
  },
141
- {
142
- tag: [highlight.tags.attributeName],
143
- color: base0D,
217
+ '.cm-nonmatchingBracket': {
218
+ backgroundColor: `${invalid}20`,
219
+ outline: `1px solid ${invalid}`,
220
+ borderRadius: _utils.generalMatching.borderRadius,
144
221
  },
145
- {
146
- tag: [highlight.tags.regexp],
147
- color: base0A,
222
+ // Selection matches
223
+ '.cm-selectionMatch': {
224
+ backgroundColor: selectionMatch,
225
+ outline: `1px solid ${base09}30`,
226
+ borderRadius: _utils.generalMatching.borderRadius,
148
227
  },
149
- {
150
- tag: [highlight.tags.quote],
151
- color: base01,
228
+ // Fold placeholder
229
+ '.cm-foldPlaceholder': {
230
+ backgroundColor: 'transparent',
231
+ color: base03,
232
+ border: `1px dotted ${base09}50`,
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 ${background}, 0 0 0 3px ${base09}30`,
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: base06,
249
+ },
250
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
251
+ backgroundColor: '#cbd5e0',
252
+ borderRadius: _utils.generalScroller.borderRadius,
253
+ border: `3px solid ${base06}`,
254
+ },
255
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
256
+ backgroundColor: '#a0aec0',
257
+ },
258
+ // Ghost text
259
+ '.cm-ghostText': {
260
+ opacity: '0.5',
261
+ color: '#718096',
152
262
  },
153
- { tag: [highlight.tags.string], color: base0C },
263
+ }, { dark: false });
264
+ /**
265
+ * Enhanced syntax highlighting for the Basic Light theme
266
+ */
267
+ const basicLightHighlightStyle = language.HighlightStyle.define([
268
+ // Keywords and control flow
269
+ { tag: highlight.tags.keyword, color: base0A, fontWeight: 'bold' },
270
+ { tag: highlight.tags.controlKeyword, color: base0A, fontWeight: 'bold' },
271
+ { tag: highlight.tags.moduleKeyword, color: base0A, fontWeight: 'bold' },
272
+ // Names and variables
273
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base09 },
274
+ { tag: [highlight.tags.variableName], color: base09 },
275
+ { tag: [highlight.tags.propertyName], color: base09, fontStyle: 'normal' },
276
+ // Classes and types
277
+ { tag: [highlight.tags.typeName], color: base0D },
278
+ { tag: [highlight.tags.className], color: base0D, fontStyle: 'italic' },
279
+ { tag: [highlight.tags.namespace], color: base09, fontStyle: 'italic' },
280
+ // Operators and punctuation
281
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base0E },
282
+ { tag: [highlight.tags.bracket], color: base07 },
283
+ { tag: [highlight.tags.brace], color: base07 },
284
+ { tag: [highlight.tags.punctuation], color: base07 },
285
+ // Functions and parameters
286
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base08 },
287
+ { tag: [highlight.tags.definition(highlight.tags.variableName)], color: base09 },
288
+ // Constants and literals
289
+ { tag: highlight.tags.number, color: base08 },
290
+ { tag: highlight.tags.changed, color: base08 },
291
+ { tag: highlight.tags.annotation, color: invalid, fontStyle: 'italic' },
292
+ { tag: highlight.tags.modifier, color: base08, fontStyle: 'italic' },
293
+ { tag: highlight.tags.self, color: base08 },
294
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base0A },
295
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0C },
296
+ // Strings and regex
297
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base07 },
298
+ { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base0B },
299
+ { tag: highlight.tags.string, color: base0C },
300
+ // Punctuation and structure
301
+ { tag: highlight.tags.definition(highlight.tags.typeName), color: base0D, fontWeight: 'bold' },
302
+ // Comments and documentation
303
+ { tag: highlight.tags.meta, color: base08 },
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: base0F },
308
+ { tag: [highlight.tags.attributeName], color: base0D },
309
+ // Markdown and text formatting
310
+ { tag: [highlight.tags.heading], fontWeight: 'bold', color: base08 },
311
+ { tag: [highlight.tags.strong], fontWeight: 'bold', color: base09 },
312
+ { tag: [highlight.tags.emphasis], fontStyle: 'italic', color: base0A },
313
+ // Links and URLs
154
314
  {
155
- tag: highlight.tags.link,
315
+ tag: [highlight.tags.link],
156
316
  color: base07,
317
+ fontWeight: '500',
157
318
  textDecoration: 'underline',
158
319
  textUnderlinePosition: 'under',
159
320
  },
160
321
  {
161
- tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
322
+ tag: [highlight.tags.url],
162
323
  color: base0C,
324
+ textDecoration: 'underline',
325
+ textUnderlineOffset: '2px',
163
326
  },
164
- { tag: [highlight.tags.meta], color: base08 },
165
- { tag: [highlight.tags.comment], color: base02, fontStyle: 'italic' },
166
- { tag: highlight.tags.strong, fontWeight: 'bold', color: base0A },
167
- { tag: highlight.tags.emphasis, fontStyle: 'italic', color: base0A },
168
- { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
169
- { tag: highlight.tags.heading, fontWeight: 'bold', color: base0A },
170
- { tag: highlight.tags.special(highlight.tags.heading1), fontWeight: 'bold', color: base0A },
171
- { tag: highlight.tags.heading1, fontWeight: 'bold', color: base0A },
327
+ // Special states
328
+ {
329
+ tag: [highlight.tags.invalid],
330
+ color: base00,
331
+ textDecoration: 'underline wavy',
332
+ borderBottom: `1px wavy ${invalid}`,
333
+ },
334
+ { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
335
+ // Enhanced syntax highlighting
336
+ { tag: highlight.tags.constant(highlight.tags.name), color: base0A },
337
+ { tag: highlight.tags.deleted, color: invalid },
338
+ { tag: highlight.tags.squareBracket, color: base0B },
339
+ { tag: highlight.tags.angleBracket, color: base0C },
340
+ // Additional specific styles
341
+ { tag: highlight.tags.heading1, fontWeight: 'bold', color: base08 },
342
+ { tag: highlight.tags.special(highlight.tags.heading1), fontWeight: 'bold', color: base08 },
172
343
  {
173
344
  tag: [highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4],
174
345
  fontWeight: 'bold',
175
- color: base0A,
176
- },
177
- {
178
- tag: [highlight.tags.heading5, highlight.tags.heading6],
179
- color: base0A,
180
- },
181
- { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0C },
182
- {
183
- tag: [highlight.tags.processingInstruction, highlight.tags.inserted],
184
- color: base07,
185
- },
186
- {
187
- tag: [highlight.tags.contentSeparator],
188
- color: base0D,
346
+ color: base08,
189
347
  },
190
- { tag: highlight.tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` },
348
+ { tag: [highlight.tags.heading5, highlight.tags.heading6], color: base08 },
349
+ { tag: highlight.tags.monospace, color: base00 },
350
+ { tag: [highlight.tags.contentSeparator], color: base0D },
351
+ { tag: highlight.tags.quote, color: base01 },
191
352
  ]);
192
353
  /**
193
- Extension to enable the Basic Light theme (both the editor theme and
194
- the highlight style).
195
- */
354
+ * Combined Basic Light theme extension
355
+ */
196
356
  const basicLight = [
197
357
  basicLightTheme,
198
358
  language.syntaxHighlighting(basicLightHighlightStyle),
package/dist/index.d.cts CHANGED
@@ -2,17 +2,16 @@ import { Extension } from '@codemirror/state';
2
2
  import { HighlightStyle } from '@codemirror/language';
3
3
 
4
4
  /**
5
- The editor theme styles for Basic Light.
6
- */
5
+ * Enhanced editor theme styles for Basic Light
6
+ */
7
7
  declare const basicLightTheme: Extension;
8
8
  /**
9
- The highlighting style for code in the Basic Light theme.
10
- */
9
+ * Enhanced syntax highlighting for the Basic Light theme
10
+ */
11
11
  declare const basicLightHighlightStyle: HighlightStyle;
12
12
  /**
13
- Extension to enable the Basic Light theme (both the editor theme and
14
- the highlight style).
15
- */
13
+ * Combined Basic Light theme extension
14
+ */
16
15
  declare const basicLight: Extension;
17
16
 
18
17
  export { basicLight, basicLightHighlightStyle, basicLightTheme };
package/dist/index.d.ts CHANGED
@@ -2,17 +2,16 @@ import { Extension } from '@codemirror/state';
2
2
  import { HighlightStyle } from '@codemirror/language';
3
3
 
4
4
  /**
5
- The editor theme styles for Basic Light.
6
- */
5
+ * Enhanced editor theme styles for Basic Light
6
+ */
7
7
  declare const basicLightTheme: Extension;
8
8
  /**
9
- The highlighting style for code in the Basic Light theme.
10
- */
9
+ * Enhanced syntax highlighting for the Basic Light theme
10
+ */
11
11
  declare const basicLightHighlightStyle: HighlightStyle;
12
12
  /**
13
- Extension to enable the Basic Light theme (both the editor theme and
14
- the highlight style).
15
- */
13
+ * Combined Basic Light theme extension
14
+ */
16
15
  declare const basicLight: Extension;
17
16
 
18
17
  export { basicLight, basicLightHighlightStyle, basicLightTheme };
package/dist/index.js CHANGED
@@ -1,80 +1,184 @@
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
- // Polar Night
6
- const base00 = '#2e3440', // black
7
- base01 = '#3b4252', // dark grey
8
- base02 = '#434c5e', base03 = '#4c566a'; // grey
9
- // Snow Storm
10
- const base04 = '#7692a033', // light grey
11
- base05 = '#e5e9f0', // off white
12
- base06 = '#eceff4'; // white
13
- // Frost
14
- const base07 = '#8fbcbb', // moss green
15
- base08 = '#88c0d0', // ice blue
16
- base09 = '#81a1c1', // water blue
17
- base0A = '#5e81ac'; // deep blue
18
- // Aurora
19
- const base0b = '#bf616a', // red
20
- base0C = '#d08770', // orange
21
- base0D = '#ebcb8b', // yellow
22
- base0E = '#a3be8c', // green
23
- base0F = '#b48ead'; // purple
24
- const invalid = '#d30102', darkBackground = base06, highlightBackground = base04, background = '#ffffff', tooltipBackground = base05, selection = '#6dceff85', selectionMatch = '#02b8ff57', cursor = base01;
25
6
  /**
26
- The editor theme styles for Basic Light.
27
- */
7
+ * Enhanced color palette for Basic Light theme
8
+ * ----------------------------------------
9
+ * Colors are organized by function with visual color blocks for quick reference
10
+ */
11
+ // Text colors (dark shades)
12
+ const base00 = '#1c2434'; // deep navy - primary text (darker for better contrast)
13
+ const base01 = '#2d3748'; // dark slate - secondary text, cursor
14
+ const base02 = '#4a5568'; // medium slate - gutter text
15
+ const base03 = '#718096'; // steel blue - comments, panel text
16
+ // Background shades
17
+ const base04 = '#edf2f750'; // very light blue w/transparency - active line gutter
18
+ const base05 = '#f7fafc'; // off-white - tooltip background
19
+ const base06 = '#f0f4f8'; // snow-white - gutter background
20
+ // Primary accent colors (cool tones)
21
+ const base07 = '#0c7792'; // teal - links, braces (more saturated)
22
+ const base08 = '#0369a1'; // azure blue - numbers, constants (deeper)
23
+ const base09 = '#2b6cb0'; // royal blue - variables, parameters
24
+ const base0A = '#1a365d'; // deep navy - keywords, headings
25
+ // Secondary accent colors (warm and complementary)
26
+ const base0B = '#c53030'; // red - square brackets (more vibrant)
27
+ const base0C = '#dd6b20'; // orange - strings (warmer, more vibrant)
28
+ const base0D = '#d69e2e'; // amber - class names (more saturated)
29
+ const base0E = '#2f855a'; // green - operators (deeper, richer)
30
+ const base0F = '#805ad5'; // purple - tag names (more vibrant)
31
+ // UI-specific colors
32
+ const invalid = '#e53e3e'; // bright red - errors (more visible)
33
+ const darkBackground = base06; // panel background
34
+ const highlightBackground = '#ebf4ff40'; // active line highlight (subtle blue)
35
+ const background = '#ffffff'; // editor background
36
+ const tooltipBackground = base05; // tooltip background
37
+ const selection = '#90cdf480'; // selection background (clearer blue)
38
+ const selectionMatch = '#63b3ed40'; // selection match highlight
39
+ const cursor = base01; // cursor color
40
+ const activeBracketBg = '#0c779220';
41
+ const activeBracketBorder = base09;
42
+ /**
43
+ * Enhanced editor theme styles for Basic Light
44
+ */
28
45
  const basicLightTheme = /*@__PURE__*/EditorView.theme({
46
+ // Base editor styles
29
47
  '&': {
30
48
  color: base00,
31
49
  backgroundColor: background,
50
+ fontSize: generalContent.fontSize,
51
+ fontFamily: generalContent.fontFamily,
32
52
  },
53
+ // Content and cursor
33
54
  '.cm-content': {
34
55
  caretColor: cursor,
56
+ lineHeight: generalContent.lineHeight,
57
+ },
58
+ '.cm-cursor, .cm-dropCursor': {
59
+ borderLeftColor: cursor,
60
+ borderLeftWidth: generalCursor.borderLeftWidth,
61
+ },
62
+ '.cm-fat-cursor': {
63
+ backgroundColor: `${cursor}99`,
64
+ color: background,
35
65
  },
36
- '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
66
+ // Selection
37
67
  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
38
68
  backgroundColor: selection,
39
- color: '#00008b',
69
+ color: base0A,
70
+ },
71
+ // Make sure selection appears above active line
72
+ '.cm-selectionLayer': {
73
+ zIndex: 100,
40
74
  },
41
- '.cm-panels': { backgroundColor: darkBackground, color: base03 },
42
- '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
43
- '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
75
+ // Search functionality
44
76
  '.cm-searchMatch': {
45
- backgroundColor: '#72a1ff59',
46
- outline: `1px solid ${base03}`,
77
+ backgroundColor: '#63b3ed40',
78
+ outline: `1px solid ${base09}`,
79
+ color: base00,
80
+ borderRadius: generalSearchField.borderRadius,
81
+ '& span': {
82
+ color: base00,
83
+ },
47
84
  },
48
85
  '.cm-searchMatch.cm-searchMatch-selected': {
49
- backgroundColor: base05,
86
+ backgroundColor: '#63b3ed70',
87
+ color: base00,
88
+ padding: generalSearchField.padding,
89
+ '& span': {
90
+ color: base00,
91
+ },
50
92
  },
51
- '.cm-activeLine': { backgroundColor: highlightBackground },
52
- '.cm-selectionMatch': {
53
- backgroundColor: selectionMatch,
93
+ '.cm-search.cm-panel.cm-textfield': {
94
+ color: base02,
95
+ borderRadius: generalSearchField.borderRadius,
96
+ padding: generalSearchField.padding,
54
97
  },
55
- '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
56
- outline: `1px solid ${base03}`,
98
+ // Panels
99
+ '.cm-panels': {
100
+ backgroundColor: darkBackground,
101
+ color: base03,
102
+ borderRadius: '4px',
57
103
  },
58
- '&.cm-focused .cm-matchingBracket': {
59
- backgroundColor: base06,
104
+ '.cm-panels.cm-panels-top': {
105
+ borderBottom: '1px solid #e2e8f0',
60
106
  },
107
+ '.cm-panels.cm-panels-bottom': {
108
+ borderTop: '1px solid #e2e8f0',
109
+ },
110
+ '.cm-panel button': {
111
+ backgroundColor: darkBackground,
112
+ color: base02,
113
+ border: generalPanel.border,
114
+ borderRadius: generalPanel.borderRadius,
115
+ padding: generalPanel.padding,
116
+ },
117
+ '.cm-panel button:hover': {
118
+ backgroundColor: '#e2e8f0',
119
+ },
120
+ // Line highlighting
121
+ '.cm-activeLine': {
122
+ backgroundColor: highlightBackground,
123
+ borderRadius: generalLine.borderRadius,
124
+ zIndex: 1,
125
+ },
126
+ // Gutters
61
127
  '.cm-gutters': {
62
128
  backgroundColor: base06,
63
- color: base00,
64
- border: 'none',
129
+ color: base02,
130
+ border: generalGutter.border,
131
+ borderRight: '1px solid #e2e8f0',
132
+ paddingRight: generalGutter.paddingRight,
65
133
  },
66
134
  '.cm-activeLineGutter': {
67
- backgroundColor: selection,
68
- color: '#00008b',
135
+ backgroundColor: base04,
136
+ color: base00,
137
+ fontWeight: generalGutter.fontWeight,
69
138
  },
70
- '.cm-foldPlaceholder': {
71
- backgroundColor: 'transparent',
72
- border: 'none',
73
- color: '#ddd',
139
+ '.cm-lineNumbers': {
140
+ fontSize: generalGutter.fontSize,
141
+ },
142
+ '.cm-foldGutter': {
143
+ fontSize: generalGutter.fontSize,
144
+ },
145
+ '.cm-foldGutter .cm-gutterElement': {
146
+ color: base02,
147
+ cursor: 'pointer',
74
148
  },
149
+ '.cm-foldGutter .cm-gutterElement:hover': {
150
+ color: base00,
151
+ },
152
+ // Tooltips and autocomplete
75
153
  '.cm-tooltip': {
76
- border: 'none',
77
154
  backgroundColor: tooltipBackground,
155
+ border: '1px solid #e2e8f0',
156
+ borderRadius: generalTooltip.borderRadius,
157
+ padding: generalTooltip.padding,
158
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
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: '#0c779220',
171
+ color: base00,
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
+ },
78
182
  },
79
183
  '.cm-tooltip .cm-tooltip-arrow:before': {
80
184
  borderTopColor: 'transparent',
@@ -84,113 +188,169 @@ const basicLightTheme = /*@__PURE__*/EditorView.theme({
84
188
  borderTopColor: tooltipBackground,
85
189
  borderBottomColor: tooltipBackground,
86
190
  },
87
- '.cm-tooltip-autocomplete': {
88
- '& > ul > li[aria-selected]': {
89
- color: base03,
191
+ // Diagnostics styling
192
+ '.cm-diagnostic': {
193
+ '&-error': {
194
+ borderLeft: `3px solid ${invalid}`,
195
+ },
196
+ '&-warning': {
197
+ borderLeft: `3px solid ${base0D}`,
198
+ },
199
+ '&-info': {
200
+ borderLeft: `3px solid ${base07}`,
90
201
  },
91
202
  },
92
- }, { dark: false });
93
- /**
94
- The highlighting style for code in the Basic Light theme.
95
- */
96
- const basicLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
97
- { tag: tags.keyword, color: base0A },
98
- {
99
- tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
100
- color: base0C,
101
- },
102
- { tag: [tags.variableName], color: base0C },
103
- { tag: [/*@__PURE__*/tags.function(tags.variableName)], color: base0A },
104
- { tag: [tags.labelName], color: base09 },
105
- {
106
- tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)],
107
- color: base0A,
108
- },
109
- { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base0E },
110
- { tag: [tags.brace], color: base07 },
111
- {
112
- tag: [tags.annotation],
113
- color: invalid,
114
- },
115
- {
116
- tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
117
- color: base08,
118
- },
119
- {
120
- tag: [tags.typeName, tags.className],
121
- color: base0D,
122
- },
123
- {
124
- tag: [tags.operator, tags.operatorKeyword],
125
- color: base0E,
126
- },
127
- {
128
- tag: [tags.tagName],
129
- color: base0F,
203
+ '.cm-lintPoint-error': {
204
+ borderBottom: `2px wavy ${invalid}`,
130
205
  },
131
- {
132
- tag: [tags.squareBracket],
133
- color: base0b,
206
+ '.cm-lintPoint-warning': {
207
+ borderBottom: `2px wavy ${base0D}`,
134
208
  },
135
- {
136
- tag: [tags.angleBracket],
137
- color: base0C,
209
+ // Matching brackets
210
+ '.cm-matchingBracket': {
211
+ backgroundColor: activeBracketBg,
212
+ outline: `1px solid ${activeBracketBorder}`,
213
+ borderRadius: generalMatching.borderRadius,
138
214
  },
139
- {
140
- tag: [tags.attributeName],
141
- color: base0D,
215
+ '.cm-nonmatchingBracket': {
216
+ backgroundColor: `${invalid}20`,
217
+ outline: `1px solid ${invalid}`,
218
+ borderRadius: generalMatching.borderRadius,
142
219
  },
143
- {
144
- tag: [tags.regexp],
145
- color: base0A,
220
+ // Selection matches
221
+ '.cm-selectionMatch': {
222
+ backgroundColor: selectionMatch,
223
+ outline: `1px solid ${base09}30`,
224
+ borderRadius: generalMatching.borderRadius,
146
225
  },
147
- {
148
- tag: [tags.quote],
149
- color: base01,
226
+ // Fold placeholder
227
+ '.cm-foldPlaceholder': {
228
+ backgroundColor: 'transparent',
229
+ color: base03,
230
+ border: `1px dotted ${base09}50`,
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 ${background}, 0 0 0 3px ${base09}30`,
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: base06,
247
+ },
248
+ '& .cm-scroller::-webkit-scrollbar-thumb': {
249
+ backgroundColor: '#cbd5e0',
250
+ borderRadius: generalScroller.borderRadius,
251
+ border: `3px solid ${base06}`,
252
+ },
253
+ '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
254
+ backgroundColor: '#a0aec0',
255
+ },
256
+ // Ghost text
257
+ '.cm-ghostText': {
258
+ opacity: '0.5',
259
+ color: '#718096',
150
260
  },
151
- { tag: [tags.string], color: base0C },
261
+ }, { dark: false });
262
+ /**
263
+ * Enhanced syntax highlighting for the Basic Light theme
264
+ */
265
+ const basicLightHighlightStyle = /*@__PURE__*/HighlightStyle.define([
266
+ // Keywords and control flow
267
+ { tag: tags.keyword, color: base0A, fontWeight: 'bold' },
268
+ { tag: tags.controlKeyword, color: base0A, fontWeight: 'bold' },
269
+ { tag: tags.moduleKeyword, color: base0A, fontWeight: 'bold' },
270
+ // Names and variables
271
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base09 },
272
+ { tag: [tags.variableName], color: base09 },
273
+ { tag: [tags.propertyName], color: base09, fontStyle: 'normal' },
274
+ // Classes and types
275
+ { tag: [tags.typeName], color: base0D },
276
+ { tag: [tags.className], color: base0D, fontStyle: 'italic' },
277
+ { tag: [tags.namespace], color: base09, fontStyle: 'italic' },
278
+ // Operators and punctuation
279
+ { tag: [tags.operator, tags.operatorKeyword], color: base0E },
280
+ { tag: [tags.bracket], color: base07 },
281
+ { tag: [tags.brace], color: base07 },
282
+ { tag: [tags.punctuation], color: base07 },
283
+ // Functions and parameters
284
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base08 },
285
+ { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: base09 },
286
+ // Constants and literals
287
+ { tag: tags.number, color: base08 },
288
+ { tag: tags.changed, color: base08 },
289
+ { tag: tags.annotation, color: invalid, fontStyle: 'italic' },
290
+ { tag: tags.modifier, color: base08, fontStyle: 'italic' },
291
+ { tag: tags.self, color: base08 },
292
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base0A },
293
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0C },
294
+ // Strings and regex
295
+ { tag: [tags.processingInstruction, tags.inserted], color: base07 },
296
+ { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: base0B },
297
+ { tag: tags.string, color: base0C },
298
+ // Punctuation and structure
299
+ { tag: /*@__PURE__*/tags.definition(tags.typeName), color: base0D, fontWeight: 'bold' },
300
+ // Comments and documentation
301
+ { tag: tags.meta, color: base08 },
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: base0F },
306
+ { tag: [tags.attributeName], color: base0D },
307
+ // Markdown and text formatting
308
+ { tag: [tags.heading], fontWeight: 'bold', color: base08 },
309
+ { tag: [tags.strong], fontWeight: 'bold', color: base09 },
310
+ { tag: [tags.emphasis], fontStyle: 'italic', color: base0A },
311
+ // Links and URLs
152
312
  {
153
- tag: tags.link,
313
+ tag: [tags.link],
154
314
  color: base07,
315
+ fontWeight: '500',
155
316
  textDecoration: 'underline',
156
317
  textUnderlinePosition: 'under',
157
318
  },
158
319
  {
159
- tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)],
320
+ tag: [tags.url],
160
321
  color: base0C,
322
+ textDecoration: 'underline',
323
+ textUnderlineOffset: '2px',
161
324
  },
162
- { tag: [tags.meta], color: base08 },
163
- { tag: [tags.comment], color: base02, fontStyle: 'italic' },
164
- { tag: tags.strong, fontWeight: 'bold', color: base0A },
165
- { tag: tags.emphasis, fontStyle: 'italic', color: base0A },
166
- { tag: tags.strikethrough, textDecoration: 'line-through' },
167
- { tag: tags.heading, fontWeight: 'bold', color: base0A },
168
- { tag: /*@__PURE__*/tags.special(tags.heading1), fontWeight: 'bold', color: base0A },
169
- { tag: tags.heading1, fontWeight: 'bold', color: base0A },
325
+ // Special states
326
+ {
327
+ tag: [tags.invalid],
328
+ color: base00,
329
+ textDecoration: 'underline wavy',
330
+ borderBottom: `1px wavy ${invalid}`,
331
+ },
332
+ { tag: [tags.strikethrough], color: invalid, textDecoration: 'line-through' },
333
+ // Enhanced syntax highlighting
334
+ { tag: /*@__PURE__*/tags.constant(tags.name), color: base0A },
335
+ { tag: tags.deleted, color: invalid },
336
+ { tag: tags.squareBracket, color: base0B },
337
+ { tag: tags.angleBracket, color: base0C },
338
+ // Additional specific styles
339
+ { tag: tags.heading1, fontWeight: 'bold', color: base08 },
340
+ { tag: /*@__PURE__*/tags.special(tags.heading1), fontWeight: 'bold', color: base08 },
170
341
  {
171
342
  tag: [tags.heading2, tags.heading3, tags.heading4],
172
343
  fontWeight: 'bold',
173
- color: base0A,
174
- },
175
- {
176
- tag: [tags.heading5, tags.heading6],
177
- color: base0A,
178
- },
179
- { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0C },
180
- {
181
- tag: [tags.processingInstruction, tags.inserted],
182
- color: base07,
183
- },
184
- {
185
- tag: [tags.contentSeparator],
186
- color: base0D,
344
+ color: base08,
187
345
  },
188
- { tag: tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` },
346
+ { tag: [tags.heading5, tags.heading6], color: base08 },
347
+ { tag: tags.monospace, color: base00 },
348
+ { tag: [tags.contentSeparator], color: base0D },
349
+ { tag: tags.quote, color: base01 },
189
350
  ]);
190
351
  /**
191
- Extension to enable the Basic Light theme (both the editor theme and
192
- the highlight style).
193
- */
352
+ * Combined Basic Light theme extension
353
+ */
194
354
  const basicLight = [
195
355
  basicLightTheme,
196
356
  /*@__PURE__*/syntaxHighlighting(basicLightHighlightStyle),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fsegurai/codemirror-theme-basic-light",
3
3
  "description": "Basic 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": {