diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..f79dc87 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,34 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# EditorConfig is awesome: https://EditorConfig.org + +root = true + +[*] +charset = utf-8 +indent_size = 4 +indent_style = tab +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +# go +[*.go] +indent_style = tab +indent_size = 4 + +# python +[*.{ini,py,py.tpl,rst}] +indent_size = 4 + +# rust +[*.rs] +indent_size = 4 + +# documentation, utils +[*.{md,mdx,diff}] +trim_trailing_whitespace = false + +# windows shell scripts +[*.{cmd,bat,ps1}] +end_of_line = crlf diff --git a/LICENSE b/LICENSE index 006383b..5602ca7 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021 Catppuccin +Copyright (c) 2022 Catppuccin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 6c3c07e..2d6545b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@

Logo
- Catppuccin for CodeMirror + Catppuccin for CodeMirrorv5

@@ -12,39 +12,53 @@

- +

## Previews
🌻 Latte - +
🪴 Frappé - +
🌺 Macchiato - +
🌿 Mocha - +
## Usage -1. Clone this repository locally -2. Open the app's settings -3. Select `import theme` and browse to where you cloned Catppuccin -4. Select it +From the [official CodeMirror docs](https://codemirror.net/5/doc/manual.html#:~:text=that%20same%20separator.-,theme,-%3A%20string), -## 🙋 FAQ (optional) +> You must make sure the desired CSS file defining the corresponding .cm-s-[name] styles is loaded (see the theme directory in the distribution). -- Q: **_"Where can I find the doc?"_**\ - A: Run `:help theme` +1. Make sure to add desired css file to your project by copying it from this repository +2. Set CodeMirror editor instance's `theme` option to the name corresponding to your palette choice from following table. +```js + const editor = CodeMirror.fromTextArea(document.getElementById("code")); + editor.setOption("theme", "ctp-mocha"); // set theme to Catppuccin Mocha +``` +Check out the (demo)[demo] for reference. + +| Palette | Name | +|-----------|---------------| +| Latte | ctp-latte | +| Frappé | ctp-frappe | +| Macchiato | ctp-macchiato | +| Mocha | ctp-mocha | + +## 🙋 FAQ + +- Q: **_Will this work with latest version of CodeMirror (v6)?_**\ + A: No. It will need additional work to port v6. ## 💝 Thanks to diff --git a/assets/frappe-prev.webp b/assets/frappe-prev.webp new file mode 100644 index 0000000..4313bbb Binary files /dev/null and b/assets/frappe-prev.webp differ diff --git a/assets/latte-prev.webp b/assets/latte-prev.webp new file mode 100644 index 0000000..df95673 Binary files /dev/null and b/assets/latte-prev.webp differ diff --git a/assets/macchiato-prev.webp b/assets/macchiato-prev.webp new file mode 100644 index 0000000..fb193e0 Binary files /dev/null and b/assets/macchiato-prev.webp differ diff --git a/assets/mocha-prev.webp b/assets/mocha-prev.webp new file mode 100644 index 0000000..8e41a98 Binary files /dev/null and b/assets/mocha-prev.webp differ diff --git a/assets/preview.webp b/assets/preview.webp new file mode 100644 index 0000000..2d3dfcd Binary files /dev/null and b/assets/preview.webp differ diff --git a/package.json b/package.json index c550906..ddbf0b5 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "ctp-codemirror", - "version": "1.0.0", + "name": "codemirror", + "version": "0.0.1", "description": "", - "main": "index.js", + "main": "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "npx serve .", @@ -16,15 +16,15 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/griimick/ctp-codemirror.git" + "url": "git+https://github.com/griimick/codemirror.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { - "url": "https://github.com/griimick/ctp-codemirror/issues" + "url": "https://github.com/griimick/codemirror/issues" }, - "homepage": "https://github.com/griimick/ctp-codemirror#readme", + "homepage": "https://github.com/griimick/codemirror#readme", "dependencies": { "sass": "^1.56.1" } diff --git a/src/_codemirror.scss b/src/_codemirror.scss index 812c0f7..130c245 100644 --- a/src/_codemirror.scss +++ b/src/_codemirror.scss @@ -1,38 +1,41 @@ // ported using https://codemirror.net/5/theme/gruvbox-dark.css @mixin variables { - --bg0 : rgb(var(--ctp-base)); - --bg1 : rgb(var(--ctp-overlay1)); - --bg4 : rgb(var(--ctp-overlay0)); - --fg : rgb(var(--ctp-text)); - --fg3 : rgb(var(--ctp-subtext0)); - --gray : rgb(var(--ctp-subtext1)); - --blue : rgb(var(--ctp-blue)); - --yellow : rgb(var(--ctp-yellow)); - --aqua : rgb(var(--ctp-blue)); - --orange : rgb(var(--ctp-peach)); - - --current-line : rgb(var(--ctp-surface0)); - --selection : rgb(var(--ctp-surface2)); - --atom : rgb(var(--ctp-lavender)); - --cursor : rgb(var(--ctp-overlay1)); - --keyword : rgb(var(--ctp-red)); - --operator : rgb(var(--ctp-sky)); - --number : rgb(var(--ctp-peach)); - --definition : rgb(var(--ctp-blue)); - --string : rgb(var(--ctp-green)); + // TODO: map to tokens + --bg0 : rgb(var(--ctp-base)); + --bg1 : rgb(var(--ctp-overlay1)); + --bg4 : rgb(var(--ctp-overlay0)); + --fg : rgb(var(--ctp-text)); + --fg3 : rgb(var(--ctp-subtext0)); + --gray : rgb(var(--ctp-subtext1)); + --blue : rgb(var(--ctp-blue)); + --yellow : rgb(var(--ctp-yellow)); + --aqua : rgb(var(--ctp-blue)); + --orange : rgb(var(--ctp-peach)); + + // codemirror tokens + --primary-bg : rgb(var(--ctp-base)); + --current-line : rgb(var(--ctp-surface0)); + --selection : rgb(var(--ctp-surface2)); + --atom : rgb(var(--ctp-lavender)); + --cursor : rgb(var(--ctp-overlay1)); + --keyword : rgb(var(--ctp-red)); + --operator : rgb(var(--ctp-sky)); + --number : rgb(var(--ctp-peach)); + --definition : rgb(var(--ctp-blue)); + --string : rgb(var(--ctp-green)); } @mixin theme { &.CodeMirror, .CodeMirror-gutters { - background-color: var(--bg0); + background-color: var(--primary-bg); color: var(--fg3); } .CodeMirror-gutters { - background: var(--bg0); + background: var(--primary-bg); border-right: 0px; } diff --git a/src/ctp-frappe.scss b/src/ctp-frappe.scss index 339592d..19c7c5f 100644 --- a/src/ctp-frappe.scss +++ b/src/ctp-frappe.scss @@ -1,32 +1,32 @@ @use "codemirror" as codemirror; div.cm-s-ctp-frappe.CodeMirror { - --ctp-rosewater: 242, 213, 207; - --ctp-flamingo: 238, 190, 190; - --ctp-pink: 244, 184, 228; - --ctp-mauve: 202, 158, 230; - --ctp-red: 231, 130, 132; - --ctp-maroon: 234, 153, 156; - --ctp-peach: 239, 159, 118; - --ctp-yellow: 229, 200, 144; - --ctp-green: 166, 209, 137; - --ctp-teal: 129, 200, 190; - --ctp-sky: 153, 209, 219; - --ctp-sapphire: 133, 193, 220; - --ctp-blue: 140, 170, 238; - --ctp-lavender: 186, 187, 241; - --ctp-text: 198, 206, 239; - --ctp-subtext1: 181, 189, 220; - --ctp-subtext0: 165, 172, 201; - --ctp-overlay2: 148, 155, 183; - --ctp-overlay1: 131, 138, 164; - --ctp-overlay0: 115, 120, 145; - --ctp-surface2: 98, 103, 126; - --ctp-surface1: 81, 86, 108; - --ctp-surface0: 65, 69, 89; - --ctp-base: 48, 52, 70; - --ctp-mantle: 41, 44, 60; - --ctp-crust: 35, 38, 52; + --ctp-rosewater : 242, 213, 207; + --ctp-flamingo : 238, 190, 190; + --ctp-pink : 244, 184, 228; + --ctp-mauve : 202, 158, 230; + --ctp-red : 231, 130, 132; + --ctp-maroon : 234, 153, 156; + --ctp-peach : 239, 159, 118; + --ctp-yellow : 229, 200, 144; + --ctp-green : 166, 209, 137; + --ctp-teal : 129, 200, 190; + --ctp-sky : 153, 209, 219; + --ctp-sapphire : 133, 193, 220; + --ctp-blue : 140, 170, 238; + --ctp-lavender : 186, 187, 241; + --ctp-text : 198, 206, 239; + --ctp-subtext1 : 181, 189, 220; + --ctp-subtext0 : 165, 172, 201; + --ctp-overlay2 : 148, 155, 183; + --ctp-overlay1 : 131, 138, 164; + --ctp-overlay0 : 115, 120, 145; + --ctp-surface2 : 98, 103, 126; + --ctp-surface1 : 81, 86, 108; + --ctp-surface0 : 65, 69, 89; + --ctp-base : 48, 52, 70; + --ctp-mantle : 41, 44, 60; + --ctp-crust : 35, 38, 52; @include codemirror.variables; } diff --git a/src/ctp-latte.scss b/src/ctp-latte.scss index 057c56e..b620029 100644 --- a/src/ctp-latte.scss +++ b/src/ctp-latte.scss @@ -1,32 +1,32 @@ @use "codemirror" as codemirror; div.cm-s-ctp-latte.CodeMirror { - --ctp-rosewater: 222, 149, 132; - --ctp-flamingo: 221, 120, 120; - --ctp-pink: 236, 131, 208; - --ctp-mauve: 136, 57, 239; - --ctp-red: 210, 15, 57; - --ctp-maroon: 230, 69, 83; - --ctp-peach: 254, 100, 11; - --ctp-yellow: 228, 147, 32; - --ctp-green: 64, 160, 43; - --ctp-teal: 23, 146, 153; - --ctp-sky: 4, 165, 229; - --ctp-sapphire: 32, 159, 181; - --ctp-blue: 42, 110, 245; - --ctp-lavender: 114, 135, 253; - --ctp-text: 76, 79, 105; - --ctp-subtext1: 92, 95, 119; - --ctp-subtext0: 108, 111, 133; - --ctp-overlay2: 124, 127, 147; - --ctp-overlay1: 140, 143, 161; - --ctp-overlay0: 156, 160, 176; - --ctp-surface2: 172, 176, 190; - --ctp-surface1: 188, 192, 204; - --ctp-surface0: 204, 208, 218; - --ctp-base: 239, 241, 245; - --ctp-mantle: 230, 233, 239; - --ctp-crust: 220, 224, 232; + --ctp-rosewater : 222, 149, 132; + --ctp-flamingo : 221, 120, 120; + --ctp-pink : 236, 131, 208; + --ctp-mauve : 136, 57, 239; + --ctp-red : 210, 15, 57; + --ctp-maroon : 230, 69, 83; + --ctp-peach : 254, 100, 11; + --ctp-yellow : 228, 147, 32; + --ctp-green : 64, 160, 43; + --ctp-teal : 23, 146, 153; + --ctp-sky : 4, 165, 229; + --ctp-sapphire : 32, 159, 181; + --ctp-blue : 42, 110, 245; + --ctp-lavender : 114, 135, 253; + --ctp-text : 76, 79, 105; + --ctp-subtext1 : 92, 95, 119; + --ctp-subtext0 : 108, 111, 133; + --ctp-overlay2 : 124, 127, 147; + --ctp-overlay1 : 140, 143, 161; + --ctp-overlay0 : 156, 160, 176; + --ctp-surface2 : 172, 176, 190; + --ctp-surface1 : 188, 192, 204; + --ctp-surface0 : 204, 208, 218; + --ctp-base : 239, 241, 245; + --ctp-mantle : 230, 233, 239; + --ctp-crust : 220, 224, 232; @include codemirror.variables; } diff --git a/src/ctp-macchiato.scss b/src/ctp-macchiato.scss index 471e49e..de0a1e8 100644 --- a/src/ctp-macchiato.scss +++ b/src/ctp-macchiato.scss @@ -1,32 +1,32 @@ @use "codemirror" as codemirror; div.cm-s-ctp-macchiato.CodeMirror { - --ctp-rosewater: 244, 219, 214; - --ctp-flamingo: 240, 198, 198; - --ctp-pink: 245, 189, 230; - --ctp-mauve: 198, 160, 246; - --ctp-red: 237, 135, 150; - --ctp-maroon: 238, 153, 160; - --ctp-peach: 245, 169, 127; - --ctp-yellow: 238, 212, 159; - --ctp-green: 166, 218, 149; - --ctp-teal: 139, 213, 202; - --ctp-sky: 145, 215, 227; - --ctp-sapphire: 125, 196, 228; - --ctp-blue: 138, 173, 244; - --ctp-lavender: 183, 189, 248; - --ctp-text: 197, 207, 245; - --ctp-subtext1: 179, 188, 224; - --ctp-subtext0: 161, 170, 203; - --ctp-overlay2: 143, 151, 183; - --ctp-overlay1: 125, 132, 162; - --ctp-overlay0: 108, 114, 141; - --ctp-surface2: 90, 95, 120; - --ctp-surface1: 72, 76, 100; - --ctp-surface0: 54, 58, 79; - --ctp-base: 36, 39, 58; - --ctp-mantle: 30, 32, 48; - --ctp-crust: 24, 25, 38; + --ctp-rosewater : 244, 219, 214; + --ctp-flamingo : 240, 198, 198; + --ctp-pink : 245, 189, 230; + --ctp-mauve : 198, 160, 246; + --ctp-red : 237, 135, 150; + --ctp-maroon : 238, 153, 160; + --ctp-peach : 245, 169, 127; + --ctp-yellow : 238, 212, 159; + --ctp-green : 166, 218, 149; + --ctp-teal : 139, 213, 202; + --ctp-sky : 145, 215, 227; + --ctp-sapphire : 125, 196, 228; + --ctp-blue : 138, 173, 244; + --ctp-lavender : 183, 189, 248; + --ctp-text : 197, 207, 245; + --ctp-subtext1 : 179, 188, 224; + --ctp-subtext0 : 161, 170, 203; + --ctp-overlay2 : 143, 151, 183; + --ctp-overlay1 : 125, 132, 162; + --ctp-overlay0 : 108, 114, 141; + --ctp-surface2 : 90, 95, 120; + --ctp-surface1 : 72, 76, 100; + --ctp-surface0 : 54, 58, 79; + --ctp-base : 36, 39, 58; + --ctp-mantle : 30, 32, 48; + --ctp-crust : 24, 25, 38; @include codemirror.variables; }