Skip to content

Commit 553a36d

Browse files
griimickgriimick
authored
feat: release v0.0.1 (#1)
* chore: add more stuff * chore: README update * chore: update README * chore: fmt * chore: package.json updates
1 parent 2907ac7 commit 553a36d

13 files changed

+171
-120
lines changed

‎.editorconfig

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# EditorConfig is awesome: https://EditorConfig.org
4+
5+
root = true
6+
7+
[*]
8+
charset = utf-8
9+
indent_size = 4
10+
indent_style = tab
11+
end_of_line = lf
12+
insert_final_newline = true
13+
trim_trailing_whitespace = true
14+
15+
# go
16+
[*.go]
17+
indent_style = tab
18+
indent_size = 4
19+
20+
# python
21+
[*.{ini,py,py.tpl,rst}]
22+
indent_size = 4
23+
24+
# rust
25+
[*.rs]
26+
indent_size = 4
27+
28+
# documentation, utils
29+
[*.{md,mdx,diff}]
30+
trim_trailing_whitespace = false
31+
32+
# windows shell scripts
33+
[*.{cmd,bat,ps1}]
34+
end_of_line = crlf

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2021 Catppuccin
3+
Copyright (c) 2022 Catppuccin
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+27-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<h3 align="center">
22
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
33
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
4-
Catppuccin for <a href="https://codemirror.net/5/">CodeMirror</a>
4+
Catppuccin for <a href="https://codemirror.net/5/">CodeMirror</a><sup>v5</sup>
55
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
66
</h3>
77

@@ -12,39 +12,53 @@
1212
</p>
1313

1414
<p align="center">
15-
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/preview.webp"/>
15+
<img src="assets/preview.webp"/>
1616
</p>
1717

1818
## Previews
1919

2020
<details>
2121
<summary>🌻 Latte</summary>
22-
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/latte.webp"/>
22+
<img src="assets/latte-prev.webp"/>
2323
</details>
2424
<details>
2525
<summary>🪴 Frappé</summary>
26-
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/frappe.webp"/>
26+
<img src="assets/frappe-prev.webp"/>
2727
</details>
2828
<details>
2929
<summary>🌺 Macchiato</summary>
30-
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/macchiato.webp"/>
30+
<img src="assets/macchiato-prev.webp"/>
3131
</details>
3232
<details>
3333
<summary>🌿 Mocha</summary>
34-
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/previews/mocha.webp"/>
34+
<img src="assets/mocha-prev.webp"/>
3535
</details>
3636

3737
## Usage
3838

39-
1. Clone this repository locally
40-
2. Open the app's settings
41-
3. Select `import theme` and browse to where you cloned Catppuccin
42-
4. Select it
39+
From the [official CodeMirror docs](https://codemirror.net/5/doc/manual.html#:~:text=that%20same%20separator.-,theme,-%3A%20string),
4340

44-
## 🙋 FAQ (optional)
41+
> You must make sure the desired CSS file defining the corresponding .cm-s-[name] styles is loaded (see the theme directory in the distribution).
4542
46-
- Q: **_"Where can I find the doc?"_**\
47-
A: Run `:help theme`
43+
1. Make sure to add desired css file to your project by copying it from this repository
44+
2. Set CodeMirror editor instance's `theme` option to the name corresponding to your palette choice from following table.
45+
```js
46+
const editor = CodeMirror.fromTextArea(document.getElementById("code"));
47+
editor.setOption("theme", "ctp-mocha"); // set theme to Catppuccin Mocha
48+
```
49+
Check out the (demo)[demo] for reference.
50+
51+
| Palette | Name |
52+
|-----------|---------------|
53+
| Latte | ctp-latte |
54+
| Frappé | ctp-frappe |
55+
| Macchiato | ctp-macchiato |
56+
| Mocha | ctp-mocha |
57+
58+
## 🙋 FAQ
59+
60+
- Q: **_Will this work with latest version of CodeMirror (v6)?_**\
61+
A: No. It will need additional work to port v6.
4862

4963
## 💝 Thanks to
5064

‎assets/frappe-prev.webp

25.3 KB
Binary file not shown.

‎assets/latte-prev.webp

26.7 KB
Binary file not shown.

‎assets/macchiato-prev.webp

25.8 KB
Binary file not shown.

‎assets/mocha-prev.webp

24.8 KB
Binary file not shown.

‎assets/preview.webp

142 KB
Binary file not shown.

‎package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "ctp-codemirror",
3-
"version": "1.0.0",
2+
"name": "codemirror",
3+
"version": "0.0.1",
44
"description": "",
5-
"main": "index.js",
5+
"main": "index.html",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",
88
"start": "npx serve .",
@@ -16,15 +16,15 @@
1616
},
1717
"repository": {
1818
"type": "git",
19-
"url": "git+https://github.com/griimick/ctp-codemirror.git"
19+
"url": "git+https://github.com/griimick/codemirror.git"
2020
},
2121
"keywords": [],
2222
"author": "",
2323
"license": "ISC",
2424
"bugs": {
25-
"url": "https://github.com/griimick/ctp-codemirror/issues"
25+
"url": "https://github.com/griimick/codemirror/issues"
2626
},
27-
"homepage": "https://github.com/griimick/ctp-codemirror#readme",
27+
"homepage": "https://github.com/griimick/codemirror#readme",
2828
"dependencies": {
2929
"sass": "^1.56.1"
3030
}

‎src/_codemirror.scss

+25-22
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
// ported using https://codemirror.net/5/theme/gruvbox-dark.css
22

33
@mixin variables {
4-
--bg0 : rgb(var(--ctp-base));
5-
--bg1 : rgb(var(--ctp-overlay1));
6-
--bg4 : rgb(var(--ctp-overlay0));
7-
--fg : rgb(var(--ctp-text));
8-
--fg3 : rgb(var(--ctp-subtext0));
9-
--gray : rgb(var(--ctp-subtext1));
10-
--blue : rgb(var(--ctp-blue));
11-
--yellow : rgb(var(--ctp-yellow));
12-
--aqua : rgb(var(--ctp-blue));
13-
--orange : rgb(var(--ctp-peach));
14-
15-
--current-line : rgb(var(--ctp-surface0));
16-
--selection : rgb(var(--ctp-surface2));
17-
--atom : rgb(var(--ctp-lavender));
18-
--cursor : rgb(var(--ctp-overlay1));
19-
--keyword : rgb(var(--ctp-red));
20-
--operator : rgb(var(--ctp-sky));
21-
--number : rgb(var(--ctp-peach));
22-
--definition : rgb(var(--ctp-blue));
23-
--string : rgb(var(--ctp-green));
4+
// TODO: map to tokens
5+
--bg0 : rgb(var(--ctp-base));
6+
--bg1 : rgb(var(--ctp-overlay1));
7+
--bg4 : rgb(var(--ctp-overlay0));
8+
--fg : rgb(var(--ctp-text));
9+
--fg3 : rgb(var(--ctp-subtext0));
10+
--gray : rgb(var(--ctp-subtext1));
11+
--blue : rgb(var(--ctp-blue));
12+
--yellow : rgb(var(--ctp-yellow));
13+
--aqua : rgb(var(--ctp-blue));
14+
--orange : rgb(var(--ctp-peach));
15+
16+
// codemirror tokens
17+
--primary-bg : rgb(var(--ctp-base));
18+
--current-line : rgb(var(--ctp-surface0));
19+
--selection : rgb(var(--ctp-surface2));
20+
--atom : rgb(var(--ctp-lavender));
21+
--cursor : rgb(var(--ctp-overlay1));
22+
--keyword : rgb(var(--ctp-red));
23+
--operator : rgb(var(--ctp-sky));
24+
--number : rgb(var(--ctp-peach));
25+
--definition : rgb(var(--ctp-blue));
26+
--string : rgb(var(--ctp-green));
2427
}
2528

2629
@mixin theme {
2730

2831
&.CodeMirror,
2932
.CodeMirror-gutters {
30-
background-color: var(--bg0);
33+
background-color: var(--primary-bg);
3134
color: var(--fg3);
3235
}
3336

3437
.CodeMirror-gutters {
35-
background: var(--bg0);
38+
background: var(--primary-bg);
3639
border-right: 0px;
3740
}
3841

‎src/ctp-frappe.scss

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
@use "codemirror" as codemirror;
22

33
div.cm-s-ctp-frappe.CodeMirror {
4-
--ctp-rosewater: 242, 213, 207;
5-
--ctp-flamingo: 238, 190, 190;
6-
--ctp-pink: 244, 184, 228;
7-
--ctp-mauve: 202, 158, 230;
8-
--ctp-red: 231, 130, 132;
9-
--ctp-maroon: 234, 153, 156;
10-
--ctp-peach: 239, 159, 118;
11-
--ctp-yellow: 229, 200, 144;
12-
--ctp-green: 166, 209, 137;
13-
--ctp-teal: 129, 200, 190;
14-
--ctp-sky: 153, 209, 219;
15-
--ctp-sapphire: 133, 193, 220;
16-
--ctp-blue: 140, 170, 238;
17-
--ctp-lavender: 186, 187, 241;
18-
--ctp-text: 198, 206, 239;
19-
--ctp-subtext1: 181, 189, 220;
20-
--ctp-subtext0: 165, 172, 201;
21-
--ctp-overlay2: 148, 155, 183;
22-
--ctp-overlay1: 131, 138, 164;
23-
--ctp-overlay0: 115, 120, 145;
24-
--ctp-surface2: 98, 103, 126;
25-
--ctp-surface1: 81, 86, 108;
26-
--ctp-surface0: 65, 69, 89;
27-
--ctp-base: 48, 52, 70;
28-
--ctp-mantle: 41, 44, 60;
29-
--ctp-crust: 35, 38, 52;
4+
--ctp-rosewater : 242, 213, 207;
5+
--ctp-flamingo : 238, 190, 190;
6+
--ctp-pink : 244, 184, 228;
7+
--ctp-mauve : 202, 158, 230;
8+
--ctp-red : 231, 130, 132;
9+
--ctp-maroon : 234, 153, 156;
10+
--ctp-peach : 239, 159, 118;
11+
--ctp-yellow : 229, 200, 144;
12+
--ctp-green : 166, 209, 137;
13+
--ctp-teal : 129, 200, 190;
14+
--ctp-sky : 153, 209, 219;
15+
--ctp-sapphire : 133, 193, 220;
16+
--ctp-blue : 140, 170, 238;
17+
--ctp-lavender : 186, 187, 241;
18+
--ctp-text : 198, 206, 239;
19+
--ctp-subtext1 : 181, 189, 220;
20+
--ctp-subtext0 : 165, 172, 201;
21+
--ctp-overlay2 : 148, 155, 183;
22+
--ctp-overlay1 : 131, 138, 164;
23+
--ctp-overlay0 : 115, 120, 145;
24+
--ctp-surface2 : 98, 103, 126;
25+
--ctp-surface1 : 81, 86, 108;
26+
--ctp-surface0 : 65, 69, 89;
27+
--ctp-base : 48, 52, 70;
28+
--ctp-mantle : 41, 44, 60;
29+
--ctp-crust : 35, 38, 52;
3030
@include codemirror.variables;
3131
}
3232

‎src/ctp-latte.scss

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
@use "codemirror" as codemirror;
22

33
div.cm-s-ctp-latte.CodeMirror {
4-
--ctp-rosewater: 222, 149, 132;
5-
--ctp-flamingo: 221, 120, 120;
6-
--ctp-pink: 236, 131, 208;
7-
--ctp-mauve: 136, 57, 239;
8-
--ctp-red: 210, 15, 57;
9-
--ctp-maroon: 230, 69, 83;
10-
--ctp-peach: 254, 100, 11;
11-
--ctp-yellow: 228, 147, 32;
12-
--ctp-green: 64, 160, 43;
13-
--ctp-teal: 23, 146, 153;
14-
--ctp-sky: 4, 165, 229;
15-
--ctp-sapphire: 32, 159, 181;
16-
--ctp-blue: 42, 110, 245;
17-
--ctp-lavender: 114, 135, 253;
18-
--ctp-text: 76, 79, 105;
19-
--ctp-subtext1: 92, 95, 119;
20-
--ctp-subtext0: 108, 111, 133;
21-
--ctp-overlay2: 124, 127, 147;
22-
--ctp-overlay1: 140, 143, 161;
23-
--ctp-overlay0: 156, 160, 176;
24-
--ctp-surface2: 172, 176, 190;
25-
--ctp-surface1: 188, 192, 204;
26-
--ctp-surface0: 204, 208, 218;
27-
--ctp-base: 239, 241, 245;
28-
--ctp-mantle: 230, 233, 239;
29-
--ctp-crust: 220, 224, 232;
4+
--ctp-rosewater : 222, 149, 132;
5+
--ctp-flamingo : 221, 120, 120;
6+
--ctp-pink : 236, 131, 208;
7+
--ctp-mauve : 136, 57, 239;
8+
--ctp-red : 210, 15, 57;
9+
--ctp-maroon : 230, 69, 83;
10+
--ctp-peach : 254, 100, 11;
11+
--ctp-yellow : 228, 147, 32;
12+
--ctp-green : 64, 160, 43;
13+
--ctp-teal : 23, 146, 153;
14+
--ctp-sky : 4, 165, 229;
15+
--ctp-sapphire : 32, 159, 181;
16+
--ctp-blue : 42, 110, 245;
17+
--ctp-lavender : 114, 135, 253;
18+
--ctp-text : 76, 79, 105;
19+
--ctp-subtext1 : 92, 95, 119;
20+
--ctp-subtext0 : 108, 111, 133;
21+
--ctp-overlay2 : 124, 127, 147;
22+
--ctp-overlay1 : 140, 143, 161;
23+
--ctp-overlay0 : 156, 160, 176;
24+
--ctp-surface2 : 172, 176, 190;
25+
--ctp-surface1 : 188, 192, 204;
26+
--ctp-surface0 : 204, 208, 218;
27+
--ctp-base : 239, 241, 245;
28+
--ctp-mantle : 230, 233, 239;
29+
--ctp-crust : 220, 224, 232;
3030
@include codemirror.variables;
3131
}
3232

‎src/ctp-macchiato.scss

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
@use "codemirror" as codemirror;
22

33
div.cm-s-ctp-macchiato.CodeMirror {
4-
--ctp-rosewater: 244, 219, 214;
5-
--ctp-flamingo: 240, 198, 198;
6-
--ctp-pink: 245, 189, 230;
7-
--ctp-mauve: 198, 160, 246;
8-
--ctp-red: 237, 135, 150;
9-
--ctp-maroon: 238, 153, 160;
10-
--ctp-peach: 245, 169, 127;
11-
--ctp-yellow: 238, 212, 159;
12-
--ctp-green: 166, 218, 149;
13-
--ctp-teal: 139, 213, 202;
14-
--ctp-sky: 145, 215, 227;
15-
--ctp-sapphire: 125, 196, 228;
16-
--ctp-blue: 138, 173, 244;
17-
--ctp-lavender: 183, 189, 248;
18-
--ctp-text: 197, 207, 245;
19-
--ctp-subtext1: 179, 188, 224;
20-
--ctp-subtext0: 161, 170, 203;
21-
--ctp-overlay2: 143, 151, 183;
22-
--ctp-overlay1: 125, 132, 162;
23-
--ctp-overlay0: 108, 114, 141;
24-
--ctp-surface2: 90, 95, 120;
25-
--ctp-surface1: 72, 76, 100;
26-
--ctp-surface0: 54, 58, 79;
27-
--ctp-base: 36, 39, 58;
28-
--ctp-mantle: 30, 32, 48;
29-
--ctp-crust: 24, 25, 38;
4+
--ctp-rosewater : 244, 219, 214;
5+
--ctp-flamingo : 240, 198, 198;
6+
--ctp-pink : 245, 189, 230;
7+
--ctp-mauve : 198, 160, 246;
8+
--ctp-red : 237, 135, 150;
9+
--ctp-maroon : 238, 153, 160;
10+
--ctp-peach : 245, 169, 127;
11+
--ctp-yellow : 238, 212, 159;
12+
--ctp-green : 166, 218, 149;
13+
--ctp-teal : 139, 213, 202;
14+
--ctp-sky : 145, 215, 227;
15+
--ctp-sapphire : 125, 196, 228;
16+
--ctp-blue : 138, 173, 244;
17+
--ctp-lavender : 183, 189, 248;
18+
--ctp-text : 197, 207, 245;
19+
--ctp-subtext1 : 179, 188, 224;
20+
--ctp-subtext0 : 161, 170, 203;
21+
--ctp-overlay2 : 143, 151, 183;
22+
--ctp-overlay1 : 125, 132, 162;
23+
--ctp-overlay0 : 108, 114, 141;
24+
--ctp-surface2 : 90, 95, 120;
25+
--ctp-surface1 : 72, 76, 100;
26+
--ctp-surface0 : 54, 58, 79;
27+
--ctp-base : 36, 39, 58;
28+
--ctp-mantle : 30, 32, 48;
29+
--ctp-crust : 24, 25, 38;
3030
@include codemirror.variables;
3131
}
3232

0 commit comments

Comments
 (0)