commit 438945465d526dd1af9da47a87741e4477c308fa
Author: winston <hey@winston.sh>
Date:   Sun Mar 19 05:30:52 2023 +0100

    feat: init

diff --git a/theme/_chroma.scss b/theme/_chroma.scss
new file mode 100644
index 0000000..9e66232
--- /dev/null
+++ b/theme/_chroma.scss
@@ -0,0 +1,296 @@
+@use "sass:color";
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+  color: $peach;
+}
+/* Comment */
+.chroma .c {
+  color: $surface2;
+}
+/* CommentSingle */
+.chroma .c1 {
+  color: $surface2;
+}
+/* CommentHashbang */
+.chroma .ch {
+  color: $surface2;
+}
+/* CommentMultiline */
+.chroma .cm {
+  color: $surface2;
+}
+/* CommentPreproc */
+.chroma .cp {
+  color: $blue;
+}
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: $blue;
+}
+/* CommentSpecial */
+.chroma .cs {
+  color: $surface2;
+}
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: $blue;
+}
+/* NameFunctionMagic */
+.chroma .fm {
+}
+/* Generic */
+.chroma .g {
+}
+/* GenericDeleted */
+.chroma .gd {
+  color: $text;
+  background-color: color.change($red, $alpha: 0.15);
+}
+/* GenericEmph */
+.chroma .ge {
+  font-style: italic;
+}
+/* GenericHeading */
+.chroma .gh {
+  color: $sky;
+}
+/* GenericInserted */
+.chroma .gi {
+  color: $text;
+  background-color: color.change($green, $alpha: 0.15);
+}
+/* GenericUnderline */
+.chroma .gl {
+}
+/* GenericOutput */
+.chroma .go {
+  color: $peach;
+}
+/* GenericPrompt */
+.chroma .gp {
+  color: $overlay0;
+  font-weight: bold;
+}
+/* GenericError */
+.chroma .gr {
+  color: $maroon;
+}
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold;
+}
+/* GenericTraceback */
+.chroma .gt {
+  color: $maroon;
+}
+/* GenericSubheading */
+.chroma .gu {
+  color: $sky;
+}
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: $peach;
+}
+/* Keyword */
+.chroma .k {
+  color: $mauve;
+}
+/* KeywordConstant */
+.chroma .kc {
+  color: $yellow;
+}
+/* KeywordDeclaration */
+.chroma .kd {
+  color: $mauve;
+}
+/* KeywordNamespace */
+.chroma .kn {
+  color: $yellow;
+}
+/* KeywordPseudo */
+.chroma .kp {
+  color: $mauve;
+  font-weight: bold;
+}
+/* KeywordReserved */
+.chroma .kr {
+  color: $mauve;
+}
+/* KeywordType */
+.chroma .kt {
+  color: $yellow;
+}
+/* Literal */
+.chroma .l {
+}
+/* LiteralDate */
+.chroma .ld {
+}
+/* LiteralNumber */
+.chroma .m {
+  color: $peach;
+}
+/* LiteralNumberBin */
+.chroma .mb {
+  color: $peach;
+}
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: $peach;
+}
+/* LiteralNumberHex */
+.chroma .mh {
+  color: $peach;
+}
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: $peach;
+}
+/* LiteralNumberOct */
+.chroma .mo {
+  color: $peach;
+}
+/* Name */
+.chroma .n {
+  color: $lavender;
+}
+/* NameAttribute */
+.chroma .na {
+  color: $yellow;
+}
+/* NameBuiltin */
+.chroma .nb {
+  color: $peach;
+}
+/* NameClass */
+.chroma .nc {
+  color: $yellow;
+}
+/* NameDecorator */
+.chroma .nd {
+  color: $pink;
+}
+/* NameException */
+.chroma .ne {
+  color: $maroon;
+}
+/* NameFunction */
+.chroma .nf {
+  color: $sky;
+}
+/* NameEntity */
+.chroma .ni {
+  color: $pink;
+}
+/* NameLabel */
+.chroma .nl {
+  color: $yellow;
+}
+/* NameNamespace */
+.chroma .nn {
+  color: $yellow;
+}
+/* NameConstant */
+.chroma .no {
+  color: $yellow;
+}
+/* NameTag */
+.chroma .nt {
+  color: $mauve;
+}
+/* NameVariable */
+.chroma .nv {
+  color: $peach;
+}
+/* NameOther */
+.chroma .nx {
+  color: $peach;
+}
+/* Operator */
+.chroma .o {
+  color: $sky;
+}
+/* OperatorWord */
+.chroma .ow {
+  color: $sky;
+  font-weight: bold;
+}
+/* Punctuation */
+.chroma .p {
+  color: $text;
+}
+/* NameProperty */
+.chroma .py {
+}
+/* LiteralString */
+.chroma .s {
+  color: $green;
+}
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: $green;
+}
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: $green;
+}
+/* LiteralStringAffix */
+.chroma .sa {
+  color: $green;
+}
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: $green;
+}
+/* LiteralStringChar */
+.chroma .sc {
+  color: $green;
+}
+/* LiteralStringDoc */
+.chroma .sd {
+  color: $green;
+}
+/* LiteralStringEscape */
+.chroma .se {
+  color: $blue;
+}
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: $green;
+}
+/* LiteralStringInterpol */
+.chroma .si {
+  color: $green;
+}
+/* LiteralStringRegex */
+.chroma .sr {
+  color: $blue;
+}
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: $green;
+}
+/* LiteralStringOther */
+.chroma .sx {
+  color: $green;
+}
+/* NameVariableClass */
+.chroma .vc {
+  color: $yellow;
+}
+/* NameVariableGlobal */
+.chroma .vg {
+  color: $peach;
+}
+/* NameVariableInstance */
+.chroma .vi {
+  color: $yellow;
+}
+/* NameVariableMagic */
+.chroma .vm {
+}
+/* TextWhitespace */
+.chroma .w {
+  color: $surface0;
+}
diff --git a/theme/catppuccin/_catppuccin.scss b/theme/catppuccin/_catppuccin.scss
new file mode 100644
index 0000000..f809f05
--- /dev/null
+++ b/theme/catppuccin/_catppuccin.scss
@@ -0,0 +1,114 @@
+$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,
+  )
+)
diff --git a/theme/catppuccin/_frappe.scss b/theme/catppuccin/_frappe.scss
new file mode 100644
index 0000000..49485fc
--- /dev/null
+++ b/theme/catppuccin/_frappe.scss
@@ -0,0 +1,26 @@
+$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;
diff --git a/theme/catppuccin/_latte.scss b/theme/catppuccin/_latte.scss
new file mode 100644
index 0000000..c1a01ca
--- /dev/null
+++ b/theme/catppuccin/_latte.scss
@@ -0,0 +1,26 @@
+$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;
diff --git a/theme/catppuccin/_macchiato.scss b/theme/catppuccin/_macchiato.scss
new file mode 100644
index 0000000..9355e38
--- /dev/null
+++ b/theme/catppuccin/_macchiato.scss
@@ -0,0 +1,26 @@
+$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;
diff --git a/theme/catppuccin/_mocha.scss b/theme/catppuccin/_mocha.scss
new file mode 100644
index 0000000..728949d
--- /dev/null
+++ b/theme/catppuccin/_mocha.scss
@@ -0,0 +1,26 @@
+$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;
diff --git a/theme/theme-catppuccin-mocha.scss b/theme/theme-catppuccin-mocha.scss
new file mode 100644
index 0000000..d45af82
--- /dev/null
+++ b/theme/theme-catppuccin-mocha.scss
@@ -0,0 +1,242 @@
+@use "sass:color";
+@import "catppuccin/mocha";
+
+$accent: $mauve;
+
+:root {
+  color-scheme: dark;
+  accent-color: #{$accent};
+  --is-dark-theme: true;
+
+  --color-primary: #{$accent};
+  --color-primary-contrast: #{$crust};
+
+  --color-primary-dark-1: #{color.adjust($accent, $lightness: -3%)};
+  --color-primary-dark-2: #{color.adjust($accent, $lightness: -6%)};
+  --color-primary-dark-3: #{color.adjust($accent, $lightness: -9%)};
+  --color-primary-dark-4: #{color.adjust($accent, $lightness: -12%)};
+  --color-primary-dark-5: #{color.adjust($accent, $lightness: -15%)};
+  --color-primary-dark-6: #{color.adjust($accent, $lightness: -18%)};
+  --color-primary-dark-7: #{color.adjust($accent, $lightness: -21%)};
+
+  --color-primary-light-1: #{color.adjust($accent, $lightness: 3%)};
+  --color-primary-light-2: #{color.adjust($accent, $lightness: 6%)};
+  --color-primary-light-3: #{color.adjust($accent, $lightness: 9%)};
+  --color-primary-light-4: #{color.adjust($accent, $lightness: 12%)};
+  --color-primary-light-5: #{color.adjust($accent, $lightness: 15%)};
+  --color-primary-light-6: #{color.adjust($accent, $lightness: 18%)};
+  --color-primary-light-7: #{color.adjust($accent, $lightness: 21%)};
+
+  --color-primary-alpha-10: #{color.change($accent, $alpha: 0.1)};
+  --color-primary-alpha-20: #{color.change($accent, $alpha: 0.2)};
+  --color-primary-alpha-30: #{color.change($accent, $alpha: 0.3)};
+  --color-primary-alpha-40: #{color.change($accent, $alpha: 0.4)};
+  --color-primary-alpha-50: #{color.change($accent, $alpha: 0.5)};
+  --color-primary-alpha-60: #{color.change($accent, $alpha: 0.6)};
+  --color-primary-alpha-70: #{color.change($accent, $alpha: 0.7)};
+  --color-primary-alpha-80: #{color.change($accent, $alpha: 0.8)};
+  --color-primary-alpha-90: #{color.change($accent, $alpha: 0.9)};
+
+  --color-secondary: #{$surface1};
+
+  --color-secondary-dark-1: #{color.adjust($surface1, $lightness: 5%)};
+  --color-secondary-dark-2: #{color.adjust($surface1, $lightness: 10%)};
+  --color-secondary-dark-3: #{color.adjust($surface1, $lightness: 15%)};
+  --color-secondary-dark-4: #{color.adjust($surface1, $lightness: 20%)};
+  --color-secondary-dark-5: #{color.adjust($surface1, $lightness: 25%)};
+  --color-secondary-dark-6: #{color.adjust($surface1, $lightness: 30%)};
+  --color-secondary-dark-7: #{color.adjust($surface1, $lightness: 35%)};
+  --color-secondary-dark-8: #{color.adjust($surface1, $lightness: 40%)};
+  --color-secondary-dark-9: #{color.adjust($surface1, $lightness: 45%)};
+  --color-secondary-dark-10: #{color.adjust($surface1, $lightness: 50%)};
+  --color-secondary-dark-11: #{color.adjust($surface1, $lightness: 55%)};
+  --color-secondary-dark-12: #{color.adjust($surface1, $lightness: 60%)};
+  --color-secondary-dark-13: #{color.adjust($surface1, $lightness: 65%)};
+
+  --color-secondary-light-1: #{color.adjust($surface1, $lightness: -5%)};
+  --color-secondary-light-2: #{color.adjust($surface1, $lightness: -10%)};
+  --color-secondary-light-3: #{color.adjust($surface1, $lightness: -15%)};
+  --color-secondary-light-4: #{color.adjust($surface1, $lightness: -20%)};
+
+  --color-secondary-alpha-10: #{color.change($surface1, $alpha: 0.1)};
+  --color-secondary-alpha-20: #{color.change($surface1, $alpha: 0.2)};
+  --color-secondary-alpha-30: #{color.change($surface1, $alpha: 0.3)};
+  --color-secondary-alpha-40: #{color.change($surface1, $alpha: 0.4)};
+  --color-secondary-alpha-50: #{color.change($surface1, $alpha: 0.5)};
+  --color-secondary-alpha-60: #{color.change($surface1, $alpha: 0.6)};
+  --color-secondary-alpha-70: #{color.change($surface1, $alpha: 0.7)};
+  --color-secondary-alpha-80: #{color.change($surface1, $alpha: 0.8)};
+  --color-secondary-alpha-90: #{color.change($surface1, $alpha: 0.9)};
+
+  /* colors */
+  --color-red: #{$red};
+  --color-orange: #{$peach};
+  --color-yellow: #{$yellow};
+  --color-olive: #{$green};
+  --color-green: #{$green};
+  --color-teal: #{$teal};
+  --color-blue: #{$blue};
+  --color-violet: #{$lavender};
+  --color-purple: #{$mauve};
+  --color-pink: #{$pink};
+  --color-brown: #{$flamingo};
+  --color-grey: #{$overlay2};
+  --color-black: #{$mantle};
+
+  /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-light: #{color.adjust($red, $lightness: -10%)};
+  --color-orange-light: #{color.adjust($peach, $lightness: -10%)};
+  --color-yellow-light: #{color.adjust($yellow, $lightness: -10%)};
+  --color-olive-light: #{color.adjust($green, $lightness: -10%)};
+  --color-green-light: #{color.adjust($green, $lightness: -10%)};
+  --color-teal-light: #{color.adjust($teal, $lightness: -10%)};
+  --color-blue-light: #{color.adjust($blue, $lightness: -10%)};
+  --color-violet-light: #{color.adjust($lavender, $lightness: -10%)};
+  --color-purple-light: #{color.adjust($mauve, $lightness: -10%)};
+  --color-pink-light: #{color.adjust($pink, $lightness: -10%)};
+  --color-brown-light: #{color.adjust($flamingo, $lightness: -10%)};
+  --color-grey-light: #{color.adjust($overlay2, $lightness: -10%)};
+  --color-black-light: #{color.adjust($mantle, $lightness: -10%)};
+
+  /* other colors */
+  --color-gold: #{$rosewater};
+  --color-white: #{$text};
+  --color-diff-removed-word-bg: #{color.change($red, $alpha: 0.15)};
+  --color-diff-added-word-bg: #{color.change($green, $alpha: 0.15)};
+  --color-diff-removed-row-bg: #{color.change($red, $alpha: 0.15)};
+  --color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.15)};
+  --color-diff-added-row-bg: #{color.change($green, $alpha: 0.15)};
+  --color-diff-removed-row-border: #{color.change($red, $alpha: 0.15)};
+  --color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.15)};
+  --color-diff-added-row-border: #{color.change($green, $alpha: 0.15)};
+  --color-diff-inactive: #{$overlay2};
+  --color-error-border: #{$red};
+  --color-error-bg: #{$red};
+  --color-error-bg-active: #{color.adjust($red, $lightness: -5%)};
+  --color-error-bg-hover: #{color.adjust($red, $lightness: -10%)};
+  --color-error-text: #{$crust};
+  --color-success-border: #{color.adjust($green, $lightness: -10%)};
+  --color-success-bg: #{$green};
+  --color-success-text: #{$crust};
+  --color-warning-border: #{color.adjust($yellow, $lightness: -10%)};
+  --color-warning-bg: #{$yellow};
+  --color-warning-text: #{$crust};
+  --color-info-border: #{color.adjust($blue, $lightness: -10%)};
+  --color-info-bg: #{$crust};
+  --color-info-text: #{$crust};
+  --color-red-badge: #{color.adjust($red, $lightness: -10%)};
+  --color-red-badge-bg: #{$crust};
+  --color-red-badge-hover-bg: #{color.adjust($red, $lightness: -5%)};
+  --color-green-badge: #{$green};
+  --color-green-badge-bg: #{$crust};
+  --color-green-badge-hover-bg: #{color.adjust($green, $lightness: -5%)};
+  --color-yellow-badge: #{$yellow};
+  --color-yellow-badge-bg: #{$crust};
+  --color-yellow-badge-hover-bg: #{color.adjust($yellow, $lightness: -5%)};
+  --color-orange-badge: #{$peach};
+  --color-orange-badge-bg: #{$crust};
+  --color-orange-badge-hover-bg: #{color.adjust($peach, $lightness: -5%)};
+  --color-git: #{$peach};
+
+  /* target-based colors */
+  --color-body: #{$crust};
+  --color-box-header: #{$mantle};
+  --color-box-body: #{$base};
+  --color-box-body-highlight: #{$surface0};
+  --color-text-dark: #{$subtext0};
+  --color-text: #{$text};
+  --color-text-light: #{$subtext1};
+  --color-text-light-1: #{$subtext1};
+  --color-text-light-2: #{$subtext1};
+  --color-text-light-3: #{$subtext1};
+  --color-footer: #{$mantle};
+  --color-timeline: #{$surface0};
+  --color-input-text: #{$text};
+  --color-input-background: #{$surface0};
+  --color-input-toggle-background: #{$surface0};
+  --color-input-border: #{$surface1};
+  --color-input-border-hover: #{$surface2};
+  --color-navbar: #{$mantle};
+  --color-navbar-transparent: #{color.change($crust, $alpha: 0)};
+  --color-light: #{color.change($crust, $alpha: 0.1)};
+  --color-light-mimic-enabled: rgba(
+    0,
+    0,
+    0,
+    calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
+  );
+  --color-light-border: #ffffff28;
+  --color-hover: #ffffff10;
+  --color-active: #{color.change($text, $alpha: 0.1)};
+  --color-menu: #{$surface0};
+  --color-card: #{$surface0};
+  --color-markup-table-row: #ffffff06;
+  --color-markup-code-block: #ffffff0d;
+  --color-button: #353846;
+  --color-code-bg: #{$base};
+  --color-code-sidebar-bg: #2e323e;
+  --color-shadow: #{color.change($crust, $alpha: 0.1)};
+  --color-secondary-bg: #2a2e3a;
+  --color-text-focus: #{$text};
+  --color-expand-button: #{$surface2};
+  --color-placeholder-text: #{$surface2};
+  --color-editor-line-highlight: var(--color-primary-light-5);
+  --color-project-board-bg: var(--color-secondary-light-2);
+  /* should ideally be --color-text-dark, see #15651 */
+  --color-caret: var(--color-text);
+  --color-reaction-bg: #ffffff12;
+  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-header-bar: #{$mantle};
+  --color-label-active-bg: #4c525e;
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-5);
+  --color-active-line: #{$surface1};
+}
+
+/* invert emojis that are hard to read otherwise */
+.emoji[aria-label="check mark"],
+.emoji[aria-label="currency exchange"],
+.emoji[aria-label="TOP arrow"],
+.emoji[aria-label="END arrow"],
+.emoji[aria-label="ON! arrow"],
+.emoji[aria-label="SOON arrow"],
+.emoji[aria-label="heavy dollar sign"],
+.emoji[aria-label="copyright"],
+.emoji[aria-label="registered"],
+.emoji[aria-label="trade mark"],
+.emoji[aria-label="multiply"],
+.emoji[aria-label="plus"],
+.emoji[aria-label="minus"],
+.emoji[aria-label="divide"],
+.emoji[aria-label="curly loop"],
+.emoji[aria-label="double curly loop"],
+.emoji[aria-label="wavy dash"],
+.emoji[aria-label="paw prints"],
+.emoji[aria-label="musical note"],
+.emoji[aria-label="musical notes"] {
+  filter: invert(100%) hue-rotate(180deg);
+}
+
+.ui.ui.ui.button:not(.inverted),
+.ui.ui.ui.label:not(.inverted) {
+  &.primary,
+  &.green,
+  &.red,
+  &.teal {
+    color: $crust;
+    &:hover {
+      color: $base;
+    }
+  }
+}
+
+.ui.basic.modal {
+  background-color: $base;
+}
+
+::selection {
+  background: color.change($rosewater, $alpha: 0.3) !important;
+}
+
+@import "chroma";
+@import "../src/codemirror/dark";