Skip to content

Commit a60ac77

Browse files
kazkkazk
committed
Use codewars theme
1 parent 72bacc6 commit a60ac77

File tree

6 files changed

+241
-4
lines changed

6 files changed

+241
-4
lines changed

‎index.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,19 @@
44
<title>CodeMirror: Lambda Calculus mode</title>
55
<meta charset="utf-8"/>
66
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css">
7-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/theme/3024-night.min.css">
7+
<link rel="stylesheet" href="./theme/codewars.css">
88
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
99
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/awsm_theme_black.min.css">
1010

1111
<style>
1212
.CodeMirror { border-top: 1px solid black; border-bottom: 1px solid black; }
13-
.CodeMirror-scrollbar-filler { background: black; }
1413
</style>
1514
<style>
1615
.text-center { text-align: center; }
1716
</style>
1817
</head>
1918

20-
<body>
19+
<body class="dark">
2120

2221
<header>
2322
<h1>
@@ -100,7 +99,7 @@ <h3 class="text-center">Lambda Calculus mode for CodeMirror</h3>
10099
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
101100
lineNumbers: true,
102101
matchBrackets: true,
103-
theme: "3024-night",
102+
theme: "codewars",
104103
specialChars: /\\/,
105104
specialCharPlaceholder: () => {
106105
const elem = document.createElement("span");

‎package-lock.json

+78
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"type": "module",
55
"description": "Lambda Calculus mode for CodeMirror",
66
"main": "lambdacalc.js",
7+
"files": [
8+
"lambdacalc.js"
9+
],
710
"scripts": {
811
"dev": "vite",
912
"build": "vite build",
@@ -24,6 +27,7 @@
2427
},
2528
"homepage": "https://github.com/codewars/codemirror-lambda-calculus#readme",
2629
"devDependencies": {
30+
"postcss-nesting": "^10.1.2",
2731
"vite": "^2.8.1"
2832
},
2933
"peerDependencies": {

‎postcss.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import nesting from "postcss-nesting";
2+
3+
export default {
4+
plugins: [nesting],
5+
};

‎theme/codewars.css

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/* The demo uses dark theme. Remove `.dark` from body to see the light theme */
2+
/* Codewars CodeMirror Theme: Light */
3+
:root {
4+
--color-cm-editor-bg: #ffffff;
5+
--color-cm-editor-fg: #000000;
6+
7+
--color-cm-editor-selection: #e0e0e0;
8+
--color-cm-editor-gutter: #f9f9f9;
9+
--color-cm-editor-gutter-border: #ebebeb;
10+
--color-cm-editor-line-number: #b0b0b0;
11+
--color-cm-editor-cursor: #505050;
12+
--color-cm-editor-fat-cursor: #7e7;
13+
--color-cm-editor-active-line-bg: #fafafa;
14+
--color-cm-editor-dialog-bg: var(--color-cm-editor-bg);
15+
--color-cm-editor-dialog-fg: var(--color-cm-editor-fg);
16+
--color-cm-editor-hint-bg: var(--color-cm-editor-bg);
17+
--color-cm-editor-hint-fg: var(--color-cm-editor-fg);
18+
--color-cm-editor-hint-active-bg: var(--color-cm-editor-hint-fg);
19+
--color-cm-editor-hint-active-fg: var(--color-cm-editor-hint-bg);
20+
--color-cm-editor-matching-bracket: #000000;
21+
--color-cm-editor-matching-bracket-outline: #bbbbbb;
22+
23+
--color-cm-atom: #7b007b;
24+
--color-cm-attribute: #7b007b;
25+
--color-cm-bracket: #333;
26+
--color-cm-builtin: #46438f;
27+
--color-cm-comment: #8e8e8e;
28+
--color-cm-def: #aa6c0b;
29+
--color-cm-error: #fdd;
30+
--color-cm-keyword: #850921;
31+
--color-cm-link: #448844;
32+
--color-cm-meta: #6b6bbc;
33+
--color-cm-number: #a34503;
34+
--color-cm-operator: #445358;
35+
--color-cm-placeholder: #bbb;
36+
--color-cm-property: #3a4f4a;
37+
--color-cm-qualifier: #555;
38+
--color-cm-string: #887836;
39+
--color-cm-symbol: #2aa198;
40+
--color-cm-tag: #850921;
41+
--color-cm-variable-2: #0d5a72;
42+
--color-cm-variable-3: #006c47;
43+
--color-cm-variable: #000000;
44+
}
45+
46+
/* Codewars CodeMirror Theme: Dark */
47+
.dark {
48+
--color-cm-editor-bg: #131414;
49+
--color-cm-editor-fg: #cccccc;
50+
51+
--color-cm-editor-selection: #4a5964;
52+
--color-cm-editor-gutter: #131414;
53+
--color-cm-editor-gutter-border: #222222;
54+
--color-cm-editor-line-number: #515151;
55+
--color-cm-editor-cursor: #999999;
56+
--color-cm-editor-fat-cursor: #7e7;
57+
--color-cm-editor-active-line-bg: rgba(255, 255, 255, 0.05);
58+
--color-cm-editor-matching-bracket: #cccccc;
59+
--color-cm-editor-matching-bracket-outline: #555555;
60+
--color-cm-editor-dialog-bg: var(--color-cm-editor-bg);
61+
--color-cm-editor-dialog-fg: var(--color-cm-editor-fg);
62+
--color-cm-editor-hint-bg: var(--color-cm-editor-bg);
63+
--color-cm-editor-hint-fg: #cccccc;
64+
--color-cm-editor-hint-active-bg: var(--color-cm-editor-hint-fg);
65+
--color-cm-editor-hint-active-fg: var(--color-cm-editor-hint-bg);
66+
67+
--color-cm-atom: #dc7069;
68+
--color-cm-attribute: #dc7069;
69+
--color-cm-bracket: #cccccc;
70+
--color-cm-builtin: #fff0f6;
71+
--color-cm-comment: #969896;
72+
--color-cm-def: #de935f;
73+
--color-cm-error: #b15255;
74+
--color-cm-keyword: #b294bb;
75+
--color-cm-link: #a16a94;
76+
--color-cm-meta: var(--color-cm-editor-fg);
77+
--color-cm-number: #de935f;
78+
--color-cm-operator: #ddd;
79+
--color-cm-placeholder: #444;
80+
--color-cm-property: #81a2be;
81+
--color-cm-qualifier: #bbb;
82+
--color-cm-string: #b5bd68;
83+
--color-cm-symbol: #ddd;
84+
--color-cm-tag: #f0c674;
85+
--color-cm-variable-2: #89b6c5;
86+
--color-cm-variable-3: #6abe79;
87+
--color-cm-variable: #eee;
88+
}
89+
90+
/* prettier-ignore */
91+
.cm-s-codewars {
92+
background: var(--color-cm-editor-bg);
93+
color: var(--color-cm-editor-fg);
94+
95+
& span.cm-atom { color: var(--color-cm-atom); }
96+
& span.cm-attribute { color: var(--color-cm-attribute); }
97+
& span.cm-bracket { color: var(--color-cm-bracket); }
98+
& span.cm-builtin { color: var(--color-cm-builtin); }
99+
& span.cm-comment { color: var(--color-cm-comment); }
100+
& span.cm-def { color: var(--color-cm-def); }
101+
& span.cm-error { background: var(--color-cm-error); }
102+
& span.cm-keyword { color: var(--color-cm-keyword); }
103+
& span.cm-link { color: var(--color-cm-link); }
104+
& span.cm-meta { color: var(--color-cm-meta); }
105+
& span.cm-number { color: var(--color-cm-number); }
106+
& span.cm-operator { color: var(--color-cm-operator); }
107+
& span.cm-property { color: var(--color-cm-property); }
108+
& span.cm-qualifier { color: var(--color-cm-qualifier); }
109+
& span.cm-string { color: var(--color-cm-string); }
110+
& span.cm-tag { color: var(--color-cm-tag); }
111+
& span.cm-variable { color: var(--color-cm-variable); }
112+
& span.cm-variable-2 { color: var(--color-cm-variable-2); }
113+
& span.cm-variable-3 { color: var(--color-cm-variable-3); }
114+
& span.cm-comment { font-style: italic; }
115+
116+
& .CodeMirror-scrollbar-filler {
117+
background: var(--color-cm-editor-bg);
118+
}
119+
120+
& .CodeMirror-selected {
121+
background: var(--color-cm-editor-selection) !important;
122+
}
123+
124+
& .CodeMirror-gutters {
125+
background: var(--color-cm-editor-gutter);
126+
border-right: 1px solid var(--color-cm-editor-gutter-border);
127+
}
128+
129+
& .CodeMirror-linenumber {
130+
color: var(--color-cm-editor-line-number);
131+
}
132+
133+
& .CodeMirror-activeline-background {
134+
background: var(--color-cm-editor-active-line-bg) !important;
135+
}
136+
137+
& .CodeMirror-matchingbracket {
138+
color: var(--color-cm-editor-matching-bracket) !important;
139+
outline: 1px solid var(--color-cm-editor-matching-bracket-outline) !important;
140+
}
141+
142+
&:not(.cm-fat-cursor) .CodeMirror-cursor {
143+
border-left: 1px solid var(--color-cm-editor-cursor) !important;
144+
}
145+
146+
&.cm-fat-cursor .CodeMirror-cursor {
147+
background: var(--color-cm-editor-fat-cursor);
148+
}
149+
}

‎vite.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { defineConfig } from "vite";
2+
import postcss from "./postcss.config.js";
23

34
export default defineConfig(({ mode }) => ({
45
base: mode === "production" ? "/codemirror-lambda-calculus" : "",
6+
css: { postcss },
57
}));

0 commit comments

Comments
 (0)