feat: add codemirror

.gitignore

@@ -0,0 +1 @@
+/dist/

build.ts

@@ -25,7 +25,7 @@ const dirname = path.dirname(path.fromFileUrl(import.meta.url));
 const builder = (flavor: string, accent: string) => `
 @import "catppuccin/${flavor}";
 $accent: $${accent};
-$is-dark: ${flavor !== "latte"};
+$isDark: ${flavor !== "latte"};
 @import "theme";
 `;
 

src/_codemirror.scss

@@ -0,0 +1,91 @@
+.CodeMirror,
+.CodeMirror.cm-s-default,
+.CodeMirror.cm-s-paper {
+  .cm-property {
+    color: $text;
+  }
+
+  .cm-header {
+    color: $text;
+  }
+
+  .cm-quote {
+    color: $green;
+  }
+
+  .cm-keyword {
+    color: $mauve;
+  }
+
+  .cm-atom {
+    color: $red;
+  }
+
+  .cm-number {
+    color: $peach;
+  }
+
+  .cm-def {
+    color: $text;
+  }
+
+  .cm-variable-2 {
+    color: $sky;
+  }
+
+  .cm-variable-3 {
+    color: $teal;
+  }
+
+  .cm-comment {
+    color: $surface2;
+  }
+
+  .cm-string {
+    color: $green;
+  }
+
+  .cm-string-2 {
+    color: $green;
+  }
+
+  .cm-meta {
+    color: $peach;
+  }
+
+  .cm-qualifier {
+    color: $peach;
+  }
+
+  .cm-builtin {
+    color: $peach;
+  }
+
+  .cm-bracket {
+    color: $text;
+  }
+
+  .cm-tag {
+    color: $yellow;
+  }
+
+  .cm-attribute {
+    color: $yellow;
+  }
+
+  .cm-hr {
+    color: $overlay2;
+  }
+
+  .cm-url {
+    color: $blue;
+  }
+
+  .cm-link {
+    color: $blue;
+  }
+
+  .cm-error {
+    color: $red;
+  }
+}

src/_theme.scss

@@ -1,12 +1,19 @@
 @use "sass:color";
 
-:root {
+// context-aware lighten: darkens if dark, lightens if light
-  @if $is-dark {
+@function ctx_lighten($color, $amount) {
-    color-schema: dark;
+  $multiplier: if($isDark, -1, 1);
-  } @else {
+  @return color.adjust($color, $lightness: $amount * $multiplier);
-    color-schema: light;
+}
+
+:root {
+  @if $isDark {
+    color-scheme: dark;
+    --is-dark-theme: true;
+  } @else {
+    color-scheme: light;
+    --is-dark-theme: false;
   }
-  --is-dark-theme: $is-dark;
 
   accent-color: #{$accent};
 
@@ -86,19 +93,19 @@
   --color-black: #{$mantle};
 
   /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
-  --color-red-light: #{color.adjust($red, $lightness: -10%)};
+  --color-red-light: #{ctx_lighten($red, 10%)};
-  --color-orange-light: #{color.adjust($peach, $lightness: -10%)};
+  --color-orange-light: #{ctx_lighten($peach, 10%)};
-  --color-yellow-light: #{color.adjust($yellow, $lightness: -10%)};
+  --color-yellow-light: #{ctx_lighten($yellow, 10%)};
-  --color-olive-light: #{color.adjust($green, $lightness: -10%)};
+  --color-olive-light: #{ctx_lighten($green, 10%)};
-  --color-green-light: #{color.adjust($green, $lightness: -10%)};
+  --color-green-light: #{ctx_lighten($green, 10%)};
-  --color-teal-light: #{color.adjust($teal, $lightness: -10%)};
+  --color-teal-light: #{ctx_lighten($teal, 10%)};
-  --color-blue-light: #{color.adjust($blue, $lightness: -10%)};
+  --color-blue-light: #{ctx_lighten($blue, 10%)};
-  --color-violet-light: #{color.adjust($lavender, $lightness: -10%)};
+  --color-violet-light: #{ctx_lighten($lavender, 10%)};
-  --color-purple-light: #{color.adjust($mauve, $lightness: -10%)};
+  --color-purple-light: #{ctx_lighten($mauve, 10%)};
-  --color-pink-light: #{color.adjust($pink, $lightness: -10%)};
+  --color-pink-light: #{ctx_lighten($pink, 10%)};
-  --color-brown-light: #{color.adjust($flamingo, $lightness: -10%)};
+  --color-brown-light: #{ctx_lighten($flamingo, 10%)};
-  --color-grey-light: #{color.adjust($overlay2, $lightness: -10%)};
+  --color-grey-light: #{ctx_lighten($overlay2, 10%)};
-  --color-black-light: #{color.adjust($mantle, $lightness: -10%)};
+  --color-black-light: #{ctx_lighten($mantle, 10%)};
 
   /* other colors */
   --color-gold: #{$rosewater};
@@ -219,8 +226,8 @@
   filter: invert(100%) hue-rotate(180deg);
 }
 
-.ui.ui.ui.button:not(.inverted),
+.ui.ui.ui.button:not(.inverted, .basic),
-.ui.ui.ui.label:not(.inverted) {
+.ui.ui.ui.label:not(.inverted, .basic) {
   &.primary,
   &.green,
   &.red,
@@ -241,4 +248,4 @@
 }
 
 @import "chroma";
-// @import "../src/codemirror/dark";
+@import "codemirror";

src/catppuccin/_catppuccin.scss

@@ -1,114 +0,0 @@
-$palette: (
-  "mocha": (
-    "rosewater": #f5e0dc,
-    "flamingo": #f2cdcd,
-    "pink": #f5c2e7,
-    "mauve": #cba6f7,
-    "red": #f38ba8,
-    "maroon": #eba0ac,
-    "peach": #fab387,
-    "yellow": #f9e2af,
-    "green": #a6e3a1,
-    "teal": #94e2d5,
-    "sky": #89dceb,
-    "sapphire": #74c7ec,
-    "blue": #89b4fa,
-    "lavender": #b4befe,
-    "text": #cdd6f4,
-    "subtext1": #bac2de,
-    "subtext0": #a6adc8,
-    "overlay2": #9399b2,
-    "overlay1": #7f849c,
-    "overlay0": #6c7086,
-    "surface2": #585b70,
-    "surface1": #45475a,
-    "surface0": #313244,
-    "base": #1e1e2e,
-    "mantle": #181825,
-    "crust": #11111b,
-  ),
-  "macchiato": (
-    "rosewater": #f4dbd6,
-    "flamingo": #f0c6c6,
-    "pink": #f5bde6,
-    "mauve": #c6a0f6,
-    "red": #ed8796,
-    "maroon": #ee99a0,
-    "peach": #f5a97f,
-    "yellow": #eed49f,
-    "green": #a6da95,
-    "teal": #8bd5ca,
-    "sky": #91d7e3,
-    "sapphire": #7dc4e4,
-    "blue": #8aadf4,
-    "lavender": #b7bdf8,
-    "text": #cad3f5,
-    "subtext1": #b8c0e0,
-    "subtext0": #a5adcb,
-    "overlay2": #939ab7,
-    "overlay1": #8087a2,
-    "overlay0": #6e738d,
-    "surface2": #5b6078,
-    "surface1": #494d64,
-    "surface0": #363a4f,
-    "base": #24273a,
-    "mantle": #1e2030,
-    "crust": #181926,
-  ),
-  "frappe": (
-    "rosewater": #f2d5cf,
-    "flamingo": #eebebe,
-    "pink": #f4b8e4,
-    "mauve": #ca9ee6,
-    "red": #e78284,
-    "maroon": #ea999c,
-    "peach": #ef9f76,
-    "yellow": #e5c890,
-    "green": #a6d189,
-    "teal": #81c8be,
-    "sky": #99d1db,
-    "sapphire": #85c1dc,
-    "blue": #8caaee,
-    "lavender": #babbf1,
-    "text": #c6d0f5,
-    "subtext1": #b5bfe2,
-    "subtext0": #a5adce,
-    "overlay2": #949cbb,
-    "overlay1": #838ba7,
-    "overlay0": #737994,
-    "surface2": #626880,
-    "surface1": #51576d,
-    "surface0": #414559,
-    "base": #303446,
-    "mantle": #292c3c,
-    "crust": #232634,
-  ),
-  "latte": (
-    "rosewater": #dc8a78,
-    "flamingo": #dd7878,
-    "pink": #ea76cb,
-    "mauve": #8839ef,
-    "red": #d20f39,
-    "maroon": #e64553,
-    "peach": #fe640b,
-    "yellow": #df8e1d,
-    "green": #40a02b,
-    "teal": #179299,
-    "sky": #04a5e5,
-    "sapphire": #209fb5,
-    "blue": #1e66f5,
-    "lavender": #7287fd,
-    "text": #4c4f69,
-    "subtext1": #5c5f77,
-    "subtext0": #6c6f85,
-    "overlay2": #7c7f93,
-    "overlay1": #8c8fa1,
-    "overlay0": #9ca0b0,
-    "surface2": #acb0be,
-    "surface1": #bcc0cc,
-    "surface0": #ccd0da,
-    "crust": #dce0e8,
-    "mantle": #e6e9ef,
-    "base": #eff1f5,
-  )
-)