@fsegurai/codemirror-theme-forest 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.
Files changed (6) hide show
  1. package/README.md +30 -0
  2. package/dist/index.cjs +102 -0
  3. package/dist/index.d.cts +8 -0
  4. package/dist/index.d.ts +8 -0
  5. package/dist/index.js +98 -0
  6. package/package.json +45 -0
package/README.md ADDED
@@ -0,0 +1,30 @@
1
+ <!-- NOTE: README.md is generated from src/README.md -->
2
+
3
+ # @fsegurai/codemirror-theme-forest [![NPM version](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-forest.svg)](https://www.npmjs.org/package/@fsegurai/codemirror-theme-forest)
4
+
5
+ [ [**WEBSITE**](https://codemirror.net/6/) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [*
6
+ *FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG
7
+ **](https://github.com/codemirror/theme-one-dark/blob/main/CHANGELOG.md) ]
8
+
9
+ This package implements the Forest theme for the
10
+ [CodeMirror](https://codemirror.net/6/) code editor.
11
+
12
+ The [project page](https://codemirror.net/6/) has more information, a
13
+ number of [examples](https://codemirror.net/6/examples/) and the
14
+ [documentation](https://codemirror.net/6/docs/).
15
+
16
+ This code is released under an
17
+ [MIT license](https://github.com/fsegurai/cm6-themes/tree/main/LICENSE).
18
+
19
+ We aim to be an inclusive, welcoming community. To make that explicit,
20
+ we have a [code of
21
+ conduct](http://contributor-covenant.org/version/1/1/0/) that applies
22
+ to communication around the project.
23
+
24
+ ## API Reference
25
+
26
+ @forest
27
+
28
+ @forestTheme
29
+
30
+ @forestHighlightStyle
package/dist/index.cjs ADDED
@@ -0,0 +1,102 @@
1
+ 'use strict';
2
+
3
+ var view = require('@codemirror/view');
4
+ var language = require('@codemirror/language');
5
+ var highlight = require('@lezer/highlight');
6
+
7
+ // Forest theme color definitions
8
+ const base00 = '#1b2b34', // Background - dark blue-green forest shade
9
+ base01 = '#c0c5ce', // Foreground - soft cloudy light
10
+ base02 = '#343d46', // Selection and Selection Match - darker shade of forest mud
11
+ base03 = '#65737e', // Comment - greyish tinge resembling tree bark
12
+ base04 = '#c594c5', // Cursor - muted lavender, like early morning forest blooms
13
+ base05 = '#99c794', // Keyword, Tag - fresh leaf green
14
+ base06 = '#5fb3b3', // Variable, Parameter - reflective water surface tone
15
+ base07 = '#6699cc', // Function, Type - sky at dusk
16
+ base08 = '#ec5f67', // String, RegExp - autumn berry red
17
+ base09 = '#ab7967', // Constant, Number - earthy tone, wet autumn leaves
18
+ base0A = '#f99157', // Class, Heading - soft fox orange
19
+ invalid = '#f2777a'; // Invalid - faded red warning
20
+ const darkBackground = '#2b303b', // Dropdown background - deep shade found under thick leaves
21
+ highlightBackground = '#3e3d3257', // Active line and Matching bracket - moss on a rock
22
+ tooltipBackground = base01, // Tooltip using foreground color
23
+ cursor = base04, // Caret color
24
+ selection = base02; // Selection color
25
+ // Define the editor theme styles for Forest.
26
+ const forestTheme = view.EditorView.theme({
27
+ '&': {
28
+ color: base01,
29
+ backgroundColor: base00
30
+ },
31
+ '.cm-content': {
32
+ caretColor: cursor
33
+ },
34
+ '.cm-cursor, .cm-dropCursor': {
35
+ borderLeftColor: cursor
36
+ },
37
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
38
+ backgroundColor: selection
39
+ },
40
+ '.cm-panels': {
41
+ backgroundColor: darkBackground,
42
+ color: base01
43
+ },
44
+ '.cm-panels.cm-panels-top': {
45
+ borderBottom: '2px solid black'
46
+ },
47
+ '.cm-panels.cm-panels-bottom': {
48
+ borderTop: '2px solid black'
49
+ },
50
+ '.cm-activeLine': {
51
+ backgroundColor: highlightBackground
52
+ },
53
+ '.cm-gutters': {
54
+ backgroundColor: darkBackground,
55
+ color: base03
56
+ },
57
+ '.cm-tooltip': {
58
+ backgroundColor: tooltipBackground
59
+ },
60
+ '.cm-searchMatch': {
61
+ backgroundColor: base02, // Use the selection color for search matches
62
+ color: base01, // Foreground color for text
63
+ outline: `1px solid ${base03}` // Outline using comment color
64
+ },
65
+ '.cm-searchMatch.cm-searchMatch-selected': {
66
+ backgroundColor: base05, // Use the keyword color for the selected search match
67
+ color: base00 // Background color for high visibility
68
+ }
69
+ }, { dark: true });
70
+ // Define the highlighting style for code in the Forest theme.
71
+ const forestHighlightStyle = language.HighlightStyle.define([
72
+ { tag: highlight.tags.keyword, color: base05 },
73
+ { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base06 },
74
+ { tag: [highlight.tags.propertyName], color: base07 },
75
+ { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted, highlight.tags.special(highlight.tags.string)], color: base08 },
76
+ { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base07 },
77
+ { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base09 },
78
+ { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base06 },
79
+ { tag: [highlight.tags.className], color: base0A },
80
+ { tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: base09 },
81
+ { tag: [highlight.tags.typeName], color: base07 },
82
+ { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base05 },
83
+ { tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link], color: base08 },
84
+ { tag: [highlight.tags.meta, highlight.tags.comment], color: base03 },
85
+ { tag: highlight.tags.tagName, color: base05 },
86
+ { tag: highlight.tags.strong, fontWeight: 'bold' },
87
+ { tag: highlight.tags.emphasis, fontStyle: 'italic' },
88
+ { tag: highlight.tags.link, textDecoration: 'underline' },
89
+ { tag: highlight.tags.heading, fontWeight: 'bold', color: base0A },
90
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base06 },
91
+ { tag: highlight.tags.invalid, color: invalid },
92
+ { tag: highlight.tags.strikethrough, textDecoration: 'line-through' }
93
+ ]);
94
+ // Extension to enable the Forest theme (both the editor theme and the highlight style).
95
+ const forest = [
96
+ forestTheme,
97
+ language.syntaxHighlighting(forestHighlightStyle)
98
+ ];
99
+
100
+ exports.forest = forest;
101
+ exports.forestHighlightStyle = forestHighlightStyle;
102
+ exports.forestTheme = forestTheme;
package/dist/index.d.cts ADDED
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const forestTheme: Extension;
5
+ declare const forestHighlightStyle: HighlightStyle;
6
+ declare const forest: Extension;
7
+
8
+ export { forest, forestHighlightStyle, forestTheme };
package/dist/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { Extension } from '@codemirror/state';
2
+ import { HighlightStyle } from '@codemirror/language';
3
+
4
+ declare const forestTheme: Extension;
5
+ declare const forestHighlightStyle: HighlightStyle;
6
+ declare const forest: Extension;
7
+
8
+ export { forest, forestHighlightStyle, forestTheme };
package/dist/index.js ADDED
@@ -0,0 +1,98 @@
1
+ import { EditorView } from '@codemirror/view';
2
+ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
+ import { tags } from '@lezer/highlight';
4
+
5
+ // Forest theme color definitions
6
+ const base00 = '#1b2b34', // Background - dark blue-green forest shade
7
+ base01 = '#c0c5ce', // Foreground - soft cloudy light
8
+ base02 = '#343d46', // Selection and Selection Match - darker shade of forest mud
9
+ base03 = '#65737e', // Comment - greyish tinge resembling tree bark
10
+ base04 = '#c594c5', // Cursor - muted lavender, like early morning forest blooms
11
+ base05 = '#99c794', // Keyword, Tag - fresh leaf green
12
+ base06 = '#5fb3b3', // Variable, Parameter - reflective water surface tone
13
+ base07 = '#6699cc', // Function, Type - sky at dusk
14
+ base08 = '#ec5f67', // String, RegExp - autumn berry red
15
+ base09 = '#ab7967', // Constant, Number - earthy tone, wet autumn leaves
16
+ base0A = '#f99157', // Class, Heading - soft fox orange
17
+ invalid = '#f2777a'; // Invalid - faded red warning
18
+ const darkBackground = '#2b303b', // Dropdown background - deep shade found under thick leaves
19
+ highlightBackground = '#3e3d3257', // Active line and Matching bracket - moss on a rock
20
+ tooltipBackground = base01, // Tooltip using foreground color
21
+ cursor = base04, // Caret color
22
+ selection = base02; // Selection color
23
+ // Define the editor theme styles for Forest.
24
+ const forestTheme = /*@__PURE__*/EditorView.theme({
25
+ '&': {
26
+ color: base01,
27
+ backgroundColor: base00
28
+ },
29
+ '.cm-content': {
30
+ caretColor: cursor
31
+ },
32
+ '.cm-cursor, .cm-dropCursor': {
33
+ borderLeftColor: cursor
34
+ },
35
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
36
+ backgroundColor: selection
37
+ },
38
+ '.cm-panels': {
39
+ backgroundColor: darkBackground,
40
+ color: base01
41
+ },
42
+ '.cm-panels.cm-panels-top': {
43
+ borderBottom: '2px solid black'
44
+ },
45
+ '.cm-panels.cm-panels-bottom': {
46
+ borderTop: '2px solid black'
47
+ },
48
+ '.cm-activeLine': {
49
+ backgroundColor: highlightBackground
50
+ },
51
+ '.cm-gutters': {
52
+ backgroundColor: darkBackground,
53
+ color: base03
54
+ },
55
+ '.cm-tooltip': {
56
+ backgroundColor: tooltipBackground
57
+ },
58
+ '.cm-searchMatch': {
59
+ backgroundColor: base02, // Use the selection color for search matches
60
+ color: base01, // Foreground color for text
61
+ outline: `1px solid ${base03}` // Outline using comment color
62
+ },
63
+ '.cm-searchMatch.cm-searchMatch-selected': {
64
+ backgroundColor: base05, // Use the keyword color for the selected search match
65
+ color: base00 // Background color for high visibility
66
+ }
67
+ }, { dark: true });
68
+ // Define the highlighting style for code in the Forest theme.
69
+ const forestHighlightStyle = /*@__PURE__*/HighlightStyle.define([
70
+ { tag: tags.keyword, color: base05 },
71
+ { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base06 },
72
+ { tag: [tags.propertyName], color: base07 },
73
+ { tag: [tags.processingInstruction, tags.string, tags.inserted, /*@__PURE__*/tags.special(tags.string)], color: base08 },
74
+ { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: base07 },
75
+ { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: base09 },
76
+ { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base06 },
77
+ { tag: [tags.className], color: base0A },
78
+ { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: base09 },
79
+ { tag: [tags.typeName], color: base07 },
80
+ { tag: [tags.operator, tags.operatorKeyword], color: base05 },
81
+ { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: base08 },
82
+ { tag: [tags.meta, tags.comment], color: base03 },
83
+ { tag: tags.tagName, color: base05 },
84
+ { tag: tags.strong, fontWeight: 'bold' },
85
+ { tag: tags.emphasis, fontStyle: 'italic' },
86
+ { tag: tags.link, textDecoration: 'underline' },
87
+ { tag: tags.heading, fontWeight: 'bold', color: base0A },
88
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base06 },
89
+ { tag: tags.invalid, color: invalid },
90
+ { tag: tags.strikethrough, textDecoration: 'line-through' }
91
+ ]);
92
+ // Extension to enable the Forest theme (both the editor theme and the highlight style).
93
+ const forest = [
94
+ forestTheme,
95
+ /*@__PURE__*/syntaxHighlighting(forestHighlightStyle)
96
+ ];
97
+
98
+ export { forest, forestHighlightStyle, forestTheme };
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@fsegurai/codemirror-theme-forest",
3
+ "description": "Forest 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
+ }