@fsegurai/codemirror-theme-github-dark 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 +97 -0
  3. package/dist/index.d.cts +8 -0
  4. package/dist/index.d.ts +8 -0
  5. package/dist/index.js +93 -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-github-dark [![NPM version](https://img.shields.io/npm/v/@fsegurai/codemirror-theme-github-dark.svg)](https://www.npmjs.org/package/@fsegurai/codemirror-theme-github-dark)
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 GitHub Dark 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
+ @githubDark
27
+
28
+ @githubDarkTheme
29
+
30
+ @githubDarkHighlightStyle
package/dist/index.cjs ADDED
@@ -0,0 +1,97 @@
1
+ 'use strict';
2
+
3
+ var view = require('@codemirror/view');
4
+ var language = require('@codemirror/language');
5
+ var highlight = require('@lezer/highlight');
6
+
7
+ // GitHub Dark theme color definitions
8
+ const base00 = '#0d1117', // Background
9
+ base01 = '#c9d1d9', // Foreground
10
+ base02 = '#003d73', // Selection and Selection Match
11
+ base03 = '#8b949e', // Comment and Bracket color
12
+ base04 = '#c9d1d9', // Caret color (reusing foreground for consistency)
13
+ base05 = '#7ee787', // TagName, Name, Quote
14
+ base06 = '#d2a8ff', // ClassName, PropertyName, Heading, Strong, Emphasis
15
+ base07 = '#79c0ff', // VariableName, AttributeName, Number, Operator
16
+ base08 = '#ff7b72', // Keyword, TypeName, TypeOperator
17
+ base09 = '#a5d6ff', // String, Meta, Regexp
18
+ base0A = '#ffdcd7', // Deleted text color
19
+ base0B = '#ffeef0', // Deleted background color
20
+ base0C = '#ffab70', // Atom, Bool, Special VariableName
21
+ invalid = '#f97583'; // Invalid color
22
+ const highlightBackground = '#36334280', // Line highlight with some opacity
23
+ tooltipBackground = base01, // Tooltips using foreground color
24
+ cursor = base04, // Caret color
25
+ selection = base02; // Selection color
26
+ // Define the editor theme styles for GitHub Dark.
27
+ const githubDarkTheme = view.EditorView.theme({
28
+ '&': {
29
+ color: base01,
30
+ backgroundColor: base00
31
+ },
32
+ '.cm-content': {
33
+ caretColor: cursor
34
+ },
35
+ '.cm-cursor, .cm-dropCursor': {
36
+ borderLeftColor: cursor
37
+ },
38
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
39
+ backgroundColor: selection
40
+ },
41
+ '.cm-searchMatch': {
42
+ backgroundColor: base02, // Use the selection color for search matches
43
+ color: base01, // Ensure the text color contrasts with the background
44
+ outline: `1px solid ${base04}` // Highlight with a subtle outline
45
+ },
46
+ '.cm-searchMatch.cm-searchMatch-selected': {
47
+ backgroundColor: base08, // Use a distinct color for the selected search match
48
+ color: base00, // Invert color for high visibility
49
+ outline: `1px solid ${base04}`
50
+ },
51
+ '.cm-panels': {
52
+ backgroundColor: base00, // Use the main background color for consistency
53
+ color: base01
54
+ },
55
+ '.cm-panels.cm-panels-top': {
56
+ borderBottom: '2px solid black'
57
+ },
58
+ '.cm-panels.cm-panels-bottom': {
59
+ borderTop: '2px solid black'
60
+ },
61
+ '.cm-activeLine': {
62
+ backgroundColor: highlightBackground
63
+ },
64
+ '.cm-gutters': {
65
+ backgroundColor: base00, // Gutter background using the main background
66
+ color: base03 // Use comment color for gutter foreground
67
+ },
68
+ '.cm-tooltip': {
69
+ backgroundColor: tooltipBackground
70
+ }
71
+ }, { dark: true });
72
+ // Define the highlighting style for code in the GitHub Dark theme.
73
+ const githubDarkHighlightStyle = language.HighlightStyle.define([
74
+ { tag: [highlight.tags.standard(highlight.tags.tagName), highlight.tags.tagName], color: base05 },
75
+ { tag: [highlight.tags.comment, highlight.tags.bracket], color: base03 },
76
+ { tag: [highlight.tags.className, highlight.tags.propertyName], color: base06 },
77
+ { tag: [highlight.tags.variableName, highlight.tags.attributeName, highlight.tags.number, highlight.tags.operator], color: base07 },
78
+ { tag: [highlight.tags.keyword, highlight.tags.typeName, highlight.tags.typeOperator], color: base08 },
79
+ { tag: [highlight.tags.string, highlight.tags.meta, highlight.tags.regexp], color: base09 },
80
+ { tag: [highlight.tags.name, highlight.tags.quote], color: base05 },
81
+ { tag: [highlight.tags.heading, highlight.tags.strong], color: base06, fontWeight: 'bold' },
82
+ { tag: [highlight.tags.emphasis], color: base06, fontStyle: 'italic' },
83
+ { tag: [highlight.tags.deleted], color: base0A, backgroundColor: base0B },
84
+ { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0C },
85
+ { tag: highlight.tags.link, textDecoration: 'underline' },
86
+ { tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
87
+ { tag: highlight.tags.invalid, color: invalid }
88
+ ]);
89
+ // Extension to enable the GitHub Dark theme (both the editor theme and the highlight style).
90
+ const githubDark = [
91
+ githubDarkTheme,
92
+ language.syntaxHighlighting(githubDarkHighlightStyle)
93
+ ];
94
+
95
+ exports.githubDark = githubDark;
96
+ exports.githubDarkHighlightStyle = githubDarkHighlightStyle;
97
+ exports.githubDarkTheme = githubDarkTheme;
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 githubDarkTheme: Extension;
5
+ declare const githubDarkHighlightStyle: HighlightStyle;
6
+ declare const githubDark: Extension;
7
+
8
+ export { githubDark, githubDarkHighlightStyle, githubDarkTheme };
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 githubDarkTheme: Extension;
5
+ declare const githubDarkHighlightStyle: HighlightStyle;
6
+ declare const githubDark: Extension;
7
+
8
+ export { githubDark, githubDarkHighlightStyle, githubDarkTheme };
package/dist/index.js ADDED
@@ -0,0 +1,93 @@
1
+ import { EditorView } from '@codemirror/view';
2
+ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
+ import { tags } from '@lezer/highlight';
4
+
5
+ // GitHub Dark theme color definitions
6
+ const base00 = '#0d1117', // Background
7
+ base01 = '#c9d1d9', // Foreground
8
+ base02 = '#003d73', // Selection and Selection Match
9
+ base03 = '#8b949e', // Comment and Bracket color
10
+ base04 = '#c9d1d9', // Caret color (reusing foreground for consistency)
11
+ base05 = '#7ee787', // TagName, Name, Quote
12
+ base06 = '#d2a8ff', // ClassName, PropertyName, Heading, Strong, Emphasis
13
+ base07 = '#79c0ff', // VariableName, AttributeName, Number, Operator
14
+ base08 = '#ff7b72', // Keyword, TypeName, TypeOperator
15
+ base09 = '#a5d6ff', // String, Meta, Regexp
16
+ base0A = '#ffdcd7', // Deleted text color
17
+ base0B = '#ffeef0', // Deleted background color
18
+ base0C = '#ffab70', // Atom, Bool, Special VariableName
19
+ invalid = '#f97583'; // Invalid color
20
+ const highlightBackground = '#36334280', // Line highlight with some opacity
21
+ tooltipBackground = base01, // Tooltips using foreground color
22
+ cursor = base04, // Caret color
23
+ selection = base02; // Selection color
24
+ // Define the editor theme styles for GitHub Dark.
25
+ const githubDarkTheme = /*@__PURE__*/EditorView.theme({
26
+ '&': {
27
+ color: base01,
28
+ backgroundColor: base00
29
+ },
30
+ '.cm-content': {
31
+ caretColor: cursor
32
+ },
33
+ '.cm-cursor, .cm-dropCursor': {
34
+ borderLeftColor: cursor
35
+ },
36
+ '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
37
+ backgroundColor: selection
38
+ },
39
+ '.cm-searchMatch': {
40
+ backgroundColor: base02, // Use the selection color for search matches
41
+ color: base01, // Ensure the text color contrasts with the background
42
+ outline: `1px solid ${base04}` // Highlight with a subtle outline
43
+ },
44
+ '.cm-searchMatch.cm-searchMatch-selected': {
45
+ backgroundColor: base08, // Use a distinct color for the selected search match
46
+ color: base00, // Invert color for high visibility
47
+ outline: `1px solid ${base04}`
48
+ },
49
+ '.cm-panels': {
50
+ backgroundColor: base00, // Use the main background color for consistency
51
+ color: base01
52
+ },
53
+ '.cm-panels.cm-panels-top': {
54
+ borderBottom: '2px solid black'
55
+ },
56
+ '.cm-panels.cm-panels-bottom': {
57
+ borderTop: '2px solid black'
58
+ },
59
+ '.cm-activeLine': {
60
+ backgroundColor: highlightBackground
61
+ },
62
+ '.cm-gutters': {
63
+ backgroundColor: base00, // Gutter background using the main background
64
+ color: base03 // Use comment color for gutter foreground
65
+ },
66
+ '.cm-tooltip': {
67
+ backgroundColor: tooltipBackground
68
+ }
69
+ }, { dark: true });
70
+ // Define the highlighting style for code in the GitHub Dark theme.
71
+ const githubDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([
72
+ { tag: [/*@__PURE__*/tags.standard(tags.tagName), tags.tagName], color: base05 },
73
+ { tag: [tags.comment, tags.bracket], color: base03 },
74
+ { tag: [tags.className, tags.propertyName], color: base06 },
75
+ { tag: [tags.variableName, tags.attributeName, tags.number, tags.operator], color: base07 },
76
+ { tag: [tags.keyword, tags.typeName, tags.typeOperator], color: base08 },
77
+ { tag: [tags.string, tags.meta, tags.regexp], color: base09 },
78
+ { tag: [tags.name, tags.quote], color: base05 },
79
+ { tag: [tags.heading, tags.strong], color: base06, fontWeight: 'bold' },
80
+ { tag: [tags.emphasis], color: base06, fontStyle: 'italic' },
81
+ { tag: [tags.deleted], color: base0A, backgroundColor: base0B },
82
+ { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0C },
83
+ { tag: tags.link, textDecoration: 'underline' },
84
+ { tag: tags.strikethrough, textDecoration: 'line-through' },
85
+ { tag: tags.invalid, color: invalid }
86
+ ]);
87
+ // Extension to enable the GitHub Dark theme (both the editor theme and the highlight style).
88
+ const githubDark = [
89
+ githubDarkTheme,
90
+ /*@__PURE__*/syntaxHighlighting(githubDarkHighlightStyle)
91
+ ];
92
+
93
+ export { githubDark, githubDarkHighlightStyle, githubDarkTheme };
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@fsegurai/codemirror-theme-github-dark",
3
+ "description": "GitHub Dark 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
+ }