feat: release v0.0.1 (#1)

* chore: add more stuff * chore: README update * chore: update README * chore: fmt * chore: package.json updates
catppuccin · Nov 12, 2022 · 553a36d · 553a36d · vercel · Nov 12, 2022
1 parent 2907ac7
commit 553a36d
Show file tree

Hide file tree

Showing 13 changed files with 171 additions and 120 deletions.
diff --git a/.editorconfig 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
@@ -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
@@ -1,7 +1,7 @@
 <h3 align="center">
 	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
 	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
-	Catppuccin for <a href="https://codemirror.net/5/">CodeMirror</a>
+	Catppuccin for <a href="https://codemirror.net/5/">CodeMirror</a><sup>v5</sup>
 	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
 </h3>
 
@@ -12,39 +12,53 @@
 </p>
 
 <p align="center">
-	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/preview.webp"/>
+	<img src="assets/preview.webp"/>
 </p>
 
 ## Previews
 
 <details>
 <summary>🌻 Latte</summary>
-<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/latte.webp"/>
+<img src="assets/latte-prev.webp"/>
 </details>
 <details>
 <summary>🪴 Frappé</summary>
-<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/frappe.webp"/>
+<img src="assets/frappe-prev.webp"/>
 </details>
 <details>
 <summary>🌺 Macchiato</summary>
-<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/macchiato.webp"/>
+<img src="assets/macchiato-prev.webp"/>
 </details>
 <details>
 <summary>🌿 Mocha</summary>
-<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/mocha.webp"/>
+<img src="assets/mocha-prev.webp"/>
 </details>
 
 ## 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
diff --git a/assets/latte-prev.webp b/assets/latte-prev.webp
diff --git a/assets/macchiato-prev.webp b/assets/macchiato-prev.webp
diff --git a/assets/mocha-prev.webp b/assets/mocha-prev.webp
diff --git a/assets/preview.webp b/assets/preview.webp
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }