diff --git a/index.html b/index.html index 2c94c24..86ca9b9 100644 --- a/index.html +++ b/index.html @@ -4,20 +4,19 @@ CodeMirror: Lambda Calculus mode - + - +

@@ -100,7 +99,7 @@

Lambda Calculus mode for CodeMirror

var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, matchBrackets: true, - theme: "3024-night", + theme: "codewars", specialChars: /\\/, specialCharPlaceholder: () => { const elem = document.createElement("span"); diff --git a/package-lock.json b/package-lock.json index 6a123dc..a7ad607 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "license": "MIT", "devDependencies": { + "postcss-nesting": "^10.1.2", "vite": "^2.8.1" }, "peerDependencies": { @@ -21,6 +22,18 @@ "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA==", "peer": true }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/esbuild": { "version": "0.14.21", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.21.tgz", @@ -445,6 +458,34 @@ "url": "https://opencollective.com/postcss/" } }, + "node_modules/postcss-nesting": { + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.2.tgz", + "integrity": "sha512-dJGmgmsvpzKoVMtDMQQG/T6FSqs6kDtUDirIfl4KnjMCiY9/ETX8jdKyCd20swSRAbUYkaBKV20pxkzxoOXLqQ==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.8" + }, + "engines": { + "node": "^12 || ^14 || >=16" + }, + "peerDependencies": { + "postcss": "^8.3" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.0.9", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz", + "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", @@ -498,6 +539,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "dev": true + }, "node_modules/vite": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/vite/-/vite-2.8.1.tgz", @@ -543,6 +590,12 @@ "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA==", "peer": true }, + "cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true + }, "esbuild": { "version": "0.14.21", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.21.tgz", @@ -763,6 +816,25 @@ "source-map-js": "^1.0.2" } }, + "postcss-nesting": { + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.2.tgz", + "integrity": "sha512-dJGmgmsvpzKoVMtDMQQG/T6FSqs6kDtUDirIfl4KnjMCiY9/ETX8jdKyCd20swSRAbUYkaBKV20pxkzxoOXLqQ==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.8" + } + }, + "postcss-selector-parser": { + "version": "6.0.9", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz", + "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + }, "resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", @@ -795,6 +867,12 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "dev": true + }, "vite": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/vite/-/vite-2.8.1.tgz", diff --git a/package.json b/package.json index 5e32dd4..af86a98 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,9 @@ "type": "module", "description": "Lambda Calculus mode for CodeMirror", "main": "lambdacalc.js", + "files": [ + "lambdacalc.js" + ], "scripts": { "dev": "vite", "build": "vite build", @@ -24,6 +27,7 @@ }, "homepage": "https://github.com/codewars/codemirror-lambda-calculus#readme", "devDependencies": { + "postcss-nesting": "^10.1.2", "vite": "^2.8.1" }, "peerDependencies": { diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..1613a56 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +import nesting from "postcss-nesting"; + +export default { + plugins: [nesting], +}; diff --git a/theme/codewars.css b/theme/codewars.css new file mode 100644 index 0000000..ad7c020 --- /dev/null +++ b/theme/codewars.css @@ -0,0 +1,149 @@ +/* The demo uses dark theme. Remove `.dark` from body to see the light theme */ +/* Codewars CodeMirror Theme: Light */ +:root { + --color-cm-editor-bg: #ffffff; + --color-cm-editor-fg: #000000; + + --color-cm-editor-selection: #e0e0e0; + --color-cm-editor-gutter: #f9f9f9; + --color-cm-editor-gutter-border: #ebebeb; + --color-cm-editor-line-number: #b0b0b0; + --color-cm-editor-cursor: #505050; + --color-cm-editor-fat-cursor: #7e7; + --color-cm-editor-active-line-bg: #fafafa; + --color-cm-editor-dialog-bg: var(--color-cm-editor-bg); + --color-cm-editor-dialog-fg: var(--color-cm-editor-fg); + --color-cm-editor-hint-bg: var(--color-cm-editor-bg); + --color-cm-editor-hint-fg: var(--color-cm-editor-fg); + --color-cm-editor-hint-active-bg: var(--color-cm-editor-hint-fg); + --color-cm-editor-hint-active-fg: var(--color-cm-editor-hint-bg); + --color-cm-editor-matching-bracket: #000000; + --color-cm-editor-matching-bracket-outline: #bbbbbb; + + --color-cm-atom: #7b007b; + --color-cm-attribute: #7b007b; + --color-cm-bracket: #333; + --color-cm-builtin: #46438f; + --color-cm-comment: #8e8e8e; + --color-cm-def: #aa6c0b; + --color-cm-error: #fdd; + --color-cm-keyword: #850921; + --color-cm-link: #448844; + --color-cm-meta: #6b6bbc; + --color-cm-number: #a34503; + --color-cm-operator: #445358; + --color-cm-placeholder: #bbb; + --color-cm-property: #3a4f4a; + --color-cm-qualifier: #555; + --color-cm-string: #887836; + --color-cm-symbol: #2aa198; + --color-cm-tag: #850921; + --color-cm-variable-2: #0d5a72; + --color-cm-variable-3: #006c47; + --color-cm-variable: #000000; +} + +/* Codewars CodeMirror Theme: Dark */ +.dark { + --color-cm-editor-bg: #131414; + --color-cm-editor-fg: #cccccc; + + --color-cm-editor-selection: #4a5964; + --color-cm-editor-gutter: #131414; + --color-cm-editor-gutter-border: #222222; + --color-cm-editor-line-number: #515151; + --color-cm-editor-cursor: #999999; + --color-cm-editor-fat-cursor: #7e7; + --color-cm-editor-active-line-bg: rgba(255, 255, 255, 0.05); + --color-cm-editor-matching-bracket: #cccccc; + --color-cm-editor-matching-bracket-outline: #555555; + --color-cm-editor-dialog-bg: var(--color-cm-editor-bg); + --color-cm-editor-dialog-fg: var(--color-cm-editor-fg); + --color-cm-editor-hint-bg: var(--color-cm-editor-bg); + --color-cm-editor-hint-fg: #cccccc; + --color-cm-editor-hint-active-bg: var(--color-cm-editor-hint-fg); + --color-cm-editor-hint-active-fg: var(--color-cm-editor-hint-bg); + + --color-cm-atom: #dc7069; + --color-cm-attribute: #dc7069; + --color-cm-bracket: #cccccc; + --color-cm-builtin: #fff0f6; + --color-cm-comment: #969896; + --color-cm-def: #de935f; + --color-cm-error: #b15255; + --color-cm-keyword: #b294bb; + --color-cm-link: #a16a94; + --color-cm-meta: var(--color-cm-editor-fg); + --color-cm-number: #de935f; + --color-cm-operator: #ddd; + --color-cm-placeholder: #444; + --color-cm-property: #81a2be; + --color-cm-qualifier: #bbb; + --color-cm-string: #b5bd68; + --color-cm-symbol: #ddd; + --color-cm-tag: #f0c674; + --color-cm-variable-2: #89b6c5; + --color-cm-variable-3: #6abe79; + --color-cm-variable: #eee; +} + +/* prettier-ignore */ +.cm-s-codewars { + background: var(--color-cm-editor-bg); + color: var(--color-cm-editor-fg); + + & span.cm-atom { color: var(--color-cm-atom); } + & span.cm-attribute { color: var(--color-cm-attribute); } + & span.cm-bracket { color: var(--color-cm-bracket); } + & span.cm-builtin { color: var(--color-cm-builtin); } + & span.cm-comment { color: var(--color-cm-comment); } + & span.cm-def { color: var(--color-cm-def); } + & span.cm-error { background: var(--color-cm-error); } + & span.cm-keyword { color: var(--color-cm-keyword); } + & span.cm-link { color: var(--color-cm-link); } + & span.cm-meta { color: var(--color-cm-meta); } + & span.cm-number { color: var(--color-cm-number); } + & span.cm-operator { color: var(--color-cm-operator); } + & span.cm-property { color: var(--color-cm-property); } + & span.cm-qualifier { color: var(--color-cm-qualifier); } + & span.cm-string { color: var(--color-cm-string); } + & span.cm-tag { color: var(--color-cm-tag); } + & span.cm-variable { color: var(--color-cm-variable); } + & span.cm-variable-2 { color: var(--color-cm-variable-2); } + & span.cm-variable-3 { color: var(--color-cm-variable-3); } + & span.cm-comment { font-style: italic; } + + & .CodeMirror-scrollbar-filler { + background: var(--color-cm-editor-bg); + } + + & .CodeMirror-selected { + background: var(--color-cm-editor-selection) !important; + } + + & .CodeMirror-gutters { + background: var(--color-cm-editor-gutter); + border-right: 1px solid var(--color-cm-editor-gutter-border); + } + + & .CodeMirror-linenumber { + color: var(--color-cm-editor-line-number); + } + + & .CodeMirror-activeline-background { + background: var(--color-cm-editor-active-line-bg) !important; + } + + & .CodeMirror-matchingbracket { + color: var(--color-cm-editor-matching-bracket) !important; + outline: 1px solid var(--color-cm-editor-matching-bracket-outline) !important; + } + + &:not(.cm-fat-cursor) .CodeMirror-cursor { + border-left: 1px solid var(--color-cm-editor-cursor) !important; + } + + &.cm-fat-cursor .CodeMirror-cursor { + background: var(--color-cm-editor-fat-cursor); + } +} diff --git a/vite.config.js b/vite.config.js index 2bec1f7..ca275da 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,7 @@ import { defineConfig } from "vite"; +import postcss from "./postcss.config.js"; export default defineConfig(({ mode }) => ({ base: mode === "production" ? "/codemirror-lambda-calculus" : "", + css: { postcss }, }));