@fsegurai/codemirror-theme-andromeda 6.0.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,28 @@
1
+ <!-- NOTE: README.md is generated from src/README.md -->
2
+
3
+ # @fsegurai/codemirror-theme-andromeda [![NPM version](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-andromeda.svg)](https://www.npmjs.org/package/@fsegurai/codemirror-theme-andromeda)
4
+
5
+ [ [**WEBSITE**](https://codemirror.net/6/) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/theme-one-dark/blob/main/CHANGELOG.md) ]
6
+
7
+ This package implements the Andromeda theme for the
8
+ [CodeMirror](https://codemirror.net/6/) code editor.
9
+
10
+ The [project page](https://codemirror.net/6/) has more information, a
11
+ number of [examples](https://codemirror.net/6/examples/) and the
12
+ [documentation](https://codemirror.net/6/docs/).
13
+
14
+ This code is released under an
15
+ [MIT license](https://github.com/fsegurai/cm6-themes/tree/main/LICENSE).
16
+
17
+ We aim to be an inclusive, welcoming community. To make that explicit,
18
+ we have a [code of
19
+ conduct](http://contributor-covenant.org/version/1/1/0/) that applies
20
+ to communication around the project.
21
+
22
+ ## API Reference
23
+
24
+ @andromeda
25
+
26
+ @andromedaTheme
27
+
28
+ @andromedaHighlightStyle
package/dist/index.cjs ADDED
@@ -0,0 +1,137 @@
1
+ 'use strict';
2
+
3
+ var view = require('@codemirror/view');
4
+ var language = require('@codemirror/language');
5
+ var highlight = require('@lezer/highlight');
6
+
7
+ // Andromeda theme colors mapped to Basic Dark template structure
8
+ const base00 = '#23262E', // Background
9
+ base01 = '#D5CED9', // Foreground
10
+ base02 = '#db45a280', // Selection and Selection Match
11
+ base03 = '#2b303b', // Dropdown Background
12
+ base04 = '#FFF', // Cursor
13
+ base05 = '#c74ded', // Keyword, Storage
14
+ base06 = '#00e8c6', // Variable, Parameter
15
+ base07 = '#FFE66D', // Function, Type, Class
16
+ base08 = '#96E072', // String, RegExp
17
+ base09 = '#ee5d43', // Constant, Number
18
+ base0A = '#A0A1A7cc', // Comment
19
+ base0B = '#ff00aa', // Heading
20
+ base0C = '#f92672', // Tag
21
+ invalid = 'red'; // Invalid (fallback color)
22
+ const darkBackground = '#292d30', highlightBackground = base02, tooltipBackground = base01, cursor = base04, selection = base02;
23
+ // Define the editor theme styles for Andromeda.
24
+ const andromedaTheme = view.EditorView.theme({
25
+ '&': {
26
+ color: base01,
27
+ backgroundColor: base00
28
+ },
29
+ '.cm-content': {
30
+ caretColor: cursor
31
+ },
32
+ '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
33
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
34
+ '.cm-panels': { backgroundColor: darkBackground, color: base06 },
35
+ '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
36
+ '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
37
+ '.cm-searchMatch': {
38
+ backgroundColor: base02,
39
+ outline: `1px solid ${base03}`,
40
+ color: base07
41
+ },
42
+ '.cm-searchMatch.cm-searchMatch-selected': {
43
+ backgroundColor: base00,
44
+ color: base07
45
+ },
46
+ '.cm-search.cm-panel': {
47
+ color: base06
48
+ },
49
+ '.cm-activeLine': { backgroundColor: highlightBackground },
50
+ '.cm-selectionMatch': { backgroundColor: highlightBackground },
51
+ '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
52
+ outline: `1px solid ${base03}`
53
+ },
54
+ '&.cm-focused .cm-matchingBracket': {
55
+ backgroundColor: base02,
56
+ color: base07
57
+ },
58
+ '.cm-gutters': {
59
+ borderRight: `1px solid #ffffff10`,
60
+ color: base06,
61
+ backgroundColor: darkBackground
62
+ },
63
+ '.cm-activeLineGutter': {
64
+ backgroundColor: highlightBackground
65
+ },
66
+ '.cm-foldPlaceholder': {
67
+ backgroundColor: 'transparent',
68
+ border: 'none',
69
+ color: base02
70
+ },
71
+ '.cm-tooltip': {
72
+ border: 'none',
73
+ backgroundColor: tooltipBackground
74
+ },
75
+ '.cm-tooltip .cm-tooltip-arrow:before': {
76
+ borderTopColor: 'transparent',
77
+ borderBottomColor: 'transparent'
78
+ },
79
+ '.cm-tooltip .cm-tooltip-arrow:after': {
80
+ borderTopColor: tooltipBackground,
81
+ borderBottomColor: tooltipBackground
82
+ },
83
+ '.cm-tooltip-autocomplete': {
84
+ '& > ul > li[aria-selected]': {
85
+ backgroundColor: highlightBackground,
86
+ color: base03
87
+ }
88
+ }
89
+ }, { dark: true });
90
+ // Define the highlighting style for code in the Andromeda theme.
91
+ const andromedaHighlightStyle = language.HighlightStyle.define([
92
+ { tag: highlight.tags.keyword, color: base05 },
93
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName], color: base06 },
94
+ { tag: [highlight.tags.variableName], color: base06 },
95
+ { tag: [highlight.tags.function(highlight.tags.variableName)], color: base05 },
96
+ { tag: [highlight.tags.labelName], color: base09 },
97
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base05 },
98
+ { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base07 },
99
+ { tag: [highlight.tags.brace], color: base07 },
100
+ { tag: [highlight.tags.annotation], color: invalid },
101
+ { tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: base05 },
102
+ { tag: [highlight.tags.typeName, highlight.tags.className], color: base06 },
103
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base07 },
104
+ { tag: [highlight.tags.tagName], color: base05 },
105
+ { tag: [highlight.tags.squareBracket], color: base07 },
106
+ { tag: [highlight.tags.angleBracket], color: base07 },
107
+ { tag: [highlight.tags.attributeName], color: base06 },
108
+ { tag: [highlight.tags.regexp], color: base05 },
109
+ { tag: [highlight.tags.quote], color: base01 },
110
+ { tag: [highlight.tags.string], color: base08 },
111
+ { tag: highlight.tags.link, color: base0C, textDecoration: 'underline', textUnderlinePosition: 'under' },
112
+ { tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)], color: base0B },
113
+ { tag: [highlight.tags.meta], color: base09 },
114
+ { tag: [highlight.tags.comment], color: base0A, fontStyle: 'italic' },
115
+ { tag: highlight.tags.monospace, color: base01 },
116
+ { tag: highlight.tags.strong, fontWeight: 'bold', color: base05 },
117
+ { tag: highlight.tags.emphasis, fontStyle: 'italic', color: base06 },
118
+ { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
119
+ { tag: highlight.tags.heading, fontWeight: 'bold', color: base01 },
120
+ { tag: highlight.tags.special(highlight.tags.heading1), fontWeight: 'bold', color: base01 },
121
+ { tag: highlight.tags.heading1, fontWeight: 'bold', color: base01 },
122
+ { tag: [highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4], fontWeight: 'bold', color: base01 },
123
+ { tag: [highlight.tags.heading5, highlight.tags.heading6], color: base01 },
124
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0B },
125
+ { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base0B },
126
+ { tag: [highlight.tags.contentSeparator], color: base06 },
127
+ { tag: highlight.tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` }
128
+ ]);
129
+ // Extension to enable the Andromeda theme (both the editor theme and the highlight style).
130
+ const andromeda = [
131
+ andromedaTheme,
132
+ language.syntaxHighlighting(andromedaHighlightStyle)
133
+ ];
134
+
135
+ exports.andromeda = andromeda;
136
+ exports.andromedaHighlightStyle = andromedaHighlightStyle;
137
+ exports.andromedaTheme = andromedaTheme;
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const andromedaTheme: Extension;
5
+ declare const andromedaHighlightStyle: HighlightStyle;
6
+ declare const andromeda: Extension;
7
+
8
+ export { andromeda, andromedaHighlightStyle, andromedaTheme };
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const andromedaTheme: Extension;
5
+ declare const andromedaHighlightStyle: HighlightStyle;
6
+ declare const andromeda: Extension;
7
+
8
+ export { andromeda, andromedaHighlightStyle, andromedaTheme };
package/dist/index.js ADDED
@@ -0,0 +1,133 @@
1
+ import { EditorView } from '@codemirror/view';
2
+ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
+ import { tags } from '@lezer/highlight';
4
+
5
+ // Andromeda theme colors mapped to Basic Dark template structure
6
+ const base00 = '#23262E', // Background
7
+ base01 = '#D5CED9', // Foreground
8
+ base02 = '#db45a280', // Selection and Selection Match
9
+ base03 = '#2b303b', // Dropdown Background
10
+ base04 = '#FFF', // Cursor
11
+ base05 = '#c74ded', // Keyword, Storage
12
+ base06 = '#00e8c6', // Variable, Parameter
13
+ base07 = '#FFE66D', // Function, Type, Class
14
+ base08 = '#96E072', // String, RegExp
15
+ base09 = '#ee5d43', // Constant, Number
16
+ base0A = '#A0A1A7cc', // Comment
17
+ base0B = '#ff00aa', // Heading
18
+ base0C = '#f92672', // Tag
19
+ invalid = 'red'; // Invalid (fallback color)
20
+ const darkBackground = '#292d30', highlightBackground = base02, tooltipBackground = base01, cursor = base04, selection = base02;
21
+ // Define the editor theme styles for Andromeda.
22
+ const andromedaTheme = /*@__PURE__*/EditorView.theme({
23
+ '&': {
24
+ color: base01,
25
+ backgroundColor: base00
26
+ },
27
+ '.cm-content': {
28
+ caretColor: cursor
29
+ },
30
+ '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
31
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
32
+ '.cm-panels': { backgroundColor: darkBackground, color: base06 },
33
+ '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
34
+ '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
35
+ '.cm-searchMatch': {
36
+ backgroundColor: base02,
37
+ outline: `1px solid ${base03}`,
38
+ color: base07
39
+ },
40
+ '.cm-searchMatch.cm-searchMatch-selected': {
41
+ backgroundColor: base00,
42
+ color: base07
43
+ },
44
+ '.cm-search.cm-panel': {
45
+ color: base06
46
+ },
47
+ '.cm-activeLine': { backgroundColor: highlightBackground },
48
+ '.cm-selectionMatch': { backgroundColor: highlightBackground },
49
+ '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
50
+ outline: `1px solid ${base03}`
51
+ },
52
+ '&.cm-focused .cm-matchingBracket': {
53
+ backgroundColor: base02,
54
+ color: base07
55
+ },
56
+ '.cm-gutters': {
57
+ borderRight: `1px solid #ffffff10`,
58
+ color: base06,
59
+ backgroundColor: darkBackground
60
+ },
61
+ '.cm-activeLineGutter': {
62
+ backgroundColor: highlightBackground
63
+ },
64
+ '.cm-foldPlaceholder': {
65
+ backgroundColor: 'transparent',
66
+ border: 'none',
67
+ color: base02
68
+ },
69
+ '.cm-tooltip': {
70
+ border: 'none',
71
+ backgroundColor: tooltipBackground
72
+ },
73
+ '.cm-tooltip .cm-tooltip-arrow:before': {
74
+ borderTopColor: 'transparent',
75
+ borderBottomColor: 'transparent'
76
+ },
77
+ '.cm-tooltip .cm-tooltip-arrow:after': {
78
+ borderTopColor: tooltipBackground,
79
+ borderBottomColor: tooltipBackground
80
+ },
81
+ '.cm-tooltip-autocomplete': {
82
+ '& > ul > li[aria-selected]': {
83
+ backgroundColor: highlightBackground,
84
+ color: base03
85
+ }
86
+ }
87
+ }, { dark: true });
88
+ // Define the highlighting style for code in the Andromeda theme.
89
+ const andromedaHighlightStyle = /*@__PURE__*/HighlightStyle.define([
90
+ { tag: tags.keyword, color: base05 },
91
+ { tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], color: base06 },
92
+ { tag: [tags.variableName], color: base06 },
93
+ { tag: [/*@__PURE__*/tags.function(tags.variableName)], color: base05 },
94
+ { tag: [tags.labelName], color: base09 },
95
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base05 },
96
+ { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base07 },
97
+ { tag: [tags.brace], color: base07 },
98
+ { tag: [tags.annotation], color: invalid },
99
+ { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: base05 },
100
+ { tag: [tags.typeName, tags.className], color: base06 },
101
+ { tag: [tags.operator, tags.operatorKeyword], color: base07 },
102
+ { tag: [tags.tagName], color: base05 },
103
+ { tag: [tags.squareBracket], color: base07 },
104
+ { tag: [tags.angleBracket], color: base07 },
105
+ { tag: [tags.attributeName], color: base06 },
106
+ { tag: [tags.regexp], color: base05 },
107
+ { tag: [tags.quote], color: base01 },
108
+ { tag: [tags.string], color: base08 },
109
+ { tag: tags.link, color: base0C, textDecoration: 'underline', textUnderlinePosition: 'under' },
110
+ { tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)], color: base0B },
111
+ { tag: [tags.meta], color: base09 },
112
+ { tag: [tags.comment], color: base0A, fontStyle: 'italic' },
113
+ { tag: tags.monospace, color: base01 },
114
+ { tag: tags.strong, fontWeight: 'bold', color: base05 },
115
+ { tag: tags.emphasis, fontStyle: 'italic', color: base06 },
116
+ { tag: tags.strikethrough, textDecoration: 'line-through' },
117
+ { tag: tags.heading, fontWeight: 'bold', color: base01 },
118
+ { tag: /*@__PURE__*/tags.special(tags.heading1), fontWeight: 'bold', color: base01 },
119
+ { tag: tags.heading1, fontWeight: 'bold', color: base01 },
120
+ { tag: [tags.heading2, tags.heading3, tags.heading4], fontWeight: 'bold', color: base01 },
121
+ { tag: [tags.heading5, tags.heading6], color: base01 },
122
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0B },
123
+ { tag: [tags.processingInstruction, tags.inserted], color: base0B },
124
+ { tag: [tags.contentSeparator], color: base06 },
125
+ { tag: tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` }
126
+ ]);
127
+ // Extension to enable the Andromeda theme (both the editor theme and the highlight style).
128
+ const andromeda = [
129
+ andromedaTheme,
130
+ /*@__PURE__*/syntaxHighlighting(andromedaHighlightStyle)
131
+ ];
132
+
133
+ export { andromeda, andromedaHighlightStyle, andromedaTheme };
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@fsegurai/codemirror-theme-andromeda",
3
+ "description": "Andromeda theme for the CodeMirror code editor",
4
+ "version": "6.0.1-alpha.0",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "exports": {
8
+ "import": "./dist/index.js",
9
+ "require": "./dist/index.cjs"
10
+ },
11
+ "types": "dist/index.d.ts",
12
+ "module": "dist/index.js",
13
+ "sideEffects": false,
14
+ "scripts": {
15
+ "test": "cm-runtests",
16
+ "prepare": "cm-buildhelper src/index.ts"
17
+ },
18
+ "keywords": [
19
+ "editor",
20
+ "code",
21
+ "codemirror"
22
+ ],
23
+ "author": {
24
+ "name": "Fabián Segura",
25
+ "url": "https://www.fsegurai.com/"
26
+ },
27
+ "license": "MIT",
28
+ "repository": {
29
+ "type": "git",
30
+ "url": "git+https://github.com/fsegurai/codemirror-themes.git"
31
+ },
32
+ "bugs": {
33
+ "url": "https://github.com/fsegurai/codemirror-themes/issues"
34
+ },
35
+ "homepage": "https://github.com/fsegurai/codemirror-themes#readme",
36
+ "peerDependencies": {
37
+ "@lezer/highlight": "^1.0.0",
38
+ "@codemirror/language": "^6.0.0",
39
+ "@codemirror/state": "^6.0.0",
40
+ "@codemirror/view": "^6.0.0"
41
+ },
42
+ "devDependencies": {
43
+ "@codemirror/buildhelper": "^1.0.1"
44
+ }
45
+ }