From 33b4ff3b8ee86e0248684f3f6a872b4f67303d14 Mon Sep 17 00:00:00 2001
From: Oliver Gwyther <oliver@og.codes>
Date: Wed, 24 Apr 2024 22:29:22 +0100
Subject: [PATCH] Added catpuccin theme files

---
 themes/catppucin/_chroma.scss     | 296 ++++++++++++++++++++++++++++++
 themes/catppucin/_codemirror.scss |  91 +++++++++
 themes/catppucin/_monaco.scss     | 138 ++++++++++++++
 themes/catppucin/_theme.scss      | 291 +++++++++++++++++++++++++++++
 4 files changed, 816 insertions(+)
 create mode 100644 themes/catppucin/_chroma.scss
 create mode 100644 themes/catppucin/_codemirror.scss
 create mode 100644 themes/catppucin/_monaco.scss
 create mode 100644 themes/catppucin/_theme.scss

diff --git a/themes/catppucin/_chroma.scss b/themes/catppucin/_chroma.scss
new file mode 100644
index 0000000..53f153a
--- /dev/null
+++ b/themes/catppucin/_chroma.scss
@@ -0,0 +1,296 @@
+@use "sass:color";
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+  color: $peach;
+}
+/* Comment */
+.chroma .c {
+  color: $overlay0;
+}
+/* CommentSingle */
+.chroma .c1 {
+  color: $overlay0;
+}
+/* CommentHashbang */
+.chroma .ch {
+  color: $overlay0;
+}
+/* CommentMultiline */
+.chroma .cm {
+  color: $overlay0;
+}
+/* CommentPreproc */
+.chroma .cp {
+  color: $blue;
+}
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: $blue;
+}
+/* CommentSpecial */
+.chroma .cs {
+  color: $overlay0;
+}
+/* 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: $blue;
+}
+/* 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: $overlay2;
+}
+/* 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/themes/catppucin/_codemirror.scss b/themes/catppucin/_codemirror.scss
new file mode 100644
index 0000000..36a86a2
--- /dev/null
+++ b/themes/catppucin/_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;
+  }
+}
diff --git a/themes/catppucin/_monaco.scss b/themes/catppucin/_monaco.scss
new file mode 100644
index 0000000..073ff38
--- /dev/null
+++ b/themes/catppucin/_monaco.scss
@@ -0,0 +1,138 @@
+.monaco-editor {
+  // selected text
+  .selected-text {
+    background-color: $surface0 !important;
+  }
+  // line numbers
+  .margin-view-overlays .line-numbers {
+    color: $subtext0 !important;
+  }
+  .line-numbers.active-line-number {
+    color: $accent !important;
+  }
+
+  // current / cursor line
+  .view-overlays .current-line,
+  .margin-view-overlays .current-line-margin {
+    background-color: #{if(
+        $isDark,
+        color.mix($surface0, $base, 64%),
+        color.mix($mantle, $base, 70%)
+      )} !important;
+  }
+
+  // Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
+
+  // plaintext
+  .mtk1 {
+    color: $text !important;
+  }
+  .mtk2 {
+    color: #ff69b4 !important;
+  }
+  // decorators
+  .mtk3 {
+    color: $peach !important;
+  }
+  // shell arguments
+  .mtk4 {
+    color: $teal !important;
+  }
+  // css constants & pre-defineds
+  .mtk5 {
+    color: $text !important;
+  }
+  // keywords
+  .mtk6 {
+    color: $mauve !important;
+  }
+  // numbers
+  .mtk7 {
+    color: $peach !important;
+  }
+  // comments
+  .mtk8 {
+    color: $overlay2 !important;
+  }
+  // sometimes a keyword, apparently
+  .mtk9 {
+    color: $mauve !important;
+  }
+  // braces, brackets, parentheses
+  .mtk10 {
+    color: $subtext0 !important;
+  }
+  // arrow brackets & equal signs in HTML
+  .mtk11 {
+    color: $teal !important;
+  }
+  // @ sign in javascript ¯\_(ツ)_/¯
+  .mtk12 {
+    color: $teal !important;
+  }
+  .mtk13 {
+    color: #ff69b4 !important;
+  }
+  .mtk14 {
+    color: #ff69b4 !important;
+  }
+  // regex, css classnames, and HTML keywords (huh)
+  .mtk15 {
+    color: $mauve !important;
+  }
+  // shebangs
+  .mtk16 {
+    color: $overlay2 !important;
+  }
+  .mtk17 {
+    color: #ff69b4 !important;
+  }
+  .mtk18 {
+    color: #ff69b4 !important;
+  }
+  // glob operator i guess
+  .mtk19 {
+    color: $teal !important;
+  }
+  .mtk20 {
+    color: #ff69b4 !important;
+  }
+  // strings
+  .mtk21 {
+    color: $green !important;
+  }
+  .mtk22 {
+    color: #ff69b4 !important;
+  }
+  // functions
+  .mtk23 {
+    color: $blue !important;
+  }
+  // shell variables
+  .mtk24 {
+    color: $peach !important;
+  }
+  // weird variables
+  .mtk25 {
+    color: $pink !important;
+  }
+
+  .bracket-highlighting-0 {
+    color: color.mix($text, $red, 40%) !important;
+  }
+  .bracket-highlighting-1 {
+    color: color.mix($text, $peach, 40%) !important;
+  }
+  .bracket-highlighting-2 {
+    color: color.mix($text, $yellow, 40%) !important;
+  }
+  .bracket-highlighting-3 {
+    color: color.mix($text, $green, 40%) !important;
+  }
+  .bracket-highlighting-4 {
+    color: color.mix($text, $blue, 40%) !important;
+  }
+  .bracket-highlighting-5 {
+    color: color.mix($text, $mauve, 40%) !important;
+  }
+}
diff --git a/themes/catppucin/_theme.scss b/themes/catppucin/_theme.scss
new file mode 100644
index 0000000..1e23457
--- /dev/null
+++ b/themes/catppucin/_theme.scss
@@ -0,0 +1,291 @@
+@use "sass:color";
+
+// context-aware lighten: darkens if dark, lightens if light
+@function ctx_lighten($color, $amount) {
+  $multiplier: if($isDark, -1, 1);
+  @return color.adjust($color, $lightness: $amount * $multiplier);
+}
+
+$lvl1: if($isDark, $crust, $base);
+$lvl2: $mantle;
+$lvl3: if($isDark, $base, $crust);
+
+:root {
+  @if $isDark {
+    color-scheme: dark;
+    --is-dark-theme: true;
+  } @else {
+    color-scheme: light;
+    --is-dark-theme: false;
+  }
+
+  accent-color: #{$accent};
+
+  --color-primary: #{$accent};
+  --color-primary-contrast: #{$lvl1};
+
+  --color-primary-dark-1: #{ctx_lighten($accent, 3%)};
+  --color-primary-dark-2: #{ctx_lighten($accent, 6%)};
+  --color-primary-dark-3: #{ctx_lighten($accent, 9%)};
+  --color-primary-dark-4: #{ctx_lighten($accent, 12%)};
+  --color-primary-dark-5: #{ctx_lighten($accent, 15%)};
+  --color-primary-dark-6: #{ctx_lighten($accent, 18%)};
+  --color-primary-dark-7: #{ctx_lighten($accent, 21%)};
+
+  --color-primary-light-1: #{ctx_lighten($accent, -3%)};
+  --color-primary-light-2: #{ctx_lighten($accent, -6%)};
+  --color-primary-light-3: #{ctx_lighten($accent, -9%)};
+  --color-primary-light-4: #{ctx_lighten($accent, -12%)};
+  --color-primary-light-5: #{ctx_lighten($accent, -15%)};
+  --color-primary-light-6: #{ctx_lighten($accent, -18%)};
+  --color-primary-light-7: #{ctx_lighten($accent, -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: #{ctx_lighten($surface0, -3%)};
+  --color-secondary-dark-2: #{ctx_lighten($surface0, -6%)};
+  --color-secondary-dark-3: #{ctx_lighten($surface0, -9%)};
+  --color-secondary-dark-4: #{ctx_lighten($surface0, -12%)};
+  --color-secondary-dark-5: #{ctx_lighten($surface0, -15%)};
+  --color-secondary-dark-6: #{ctx_lighten($surface0, -18%)};
+  --color-secondary-dark-7: #{ctx_lighten($surface0, -21%)};
+  --color-secondary-dark-8: #{ctx_lighten($surface0, -24%)};
+  --color-secondary-dark-9: #{ctx_lighten($surface0, -27%)};
+  --color-secondary-dark-10: #{ctx_lighten($surface0, -30%)};
+  --color-secondary-dark-11: #{ctx_lighten($surface0, -33%)};
+  --color-secondary-dark-12: #{ctx_lighten($surface0, -36%)};
+  --color-secondary-dark-13: #{ctx_lighten($surface0, -39%)};
+
+  --color-secondary-light-1: #{ctx_lighten($surface0, 3%)};
+  --color-secondary-light-2: #{ctx_lighten($surface0, 6%)};
+  --color-secondary-light-3: #{ctx_lighten($surface0, 9%)};
+  --color-secondary-light-4: #{ctx_lighten($surface0, 12%)};
+
+  --color-secondary-alpha-10: #{color.change($surface0, $alpha: 0.1)};
+  --color-secondary-alpha-20: #{color.change($surface0, $alpha: 0.2)};
+  --color-secondary-alpha-30: #{color.change($surface0, $alpha: 0.3)};
+  --color-secondary-alpha-40: #{color.change($surface0, $alpha: 0.4)};
+  --color-secondary-alpha-50: #{color.change($surface0, $alpha: 0.5)};
+  --color-secondary-alpha-60: #{color.change($surface0, $alpha: 0.6)};
+  --color-secondary-alpha-70: #{color.change($surface0, $alpha: 0.7)};
+  --color-secondary-alpha-80: #{color.change($surface0, $alpha: 0.8)};
+  --color-secondary-alpha-90: #{color.change($surface0, $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: #{if(isDark, $mantle, $text)};
+
+  /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-light: #{ctx_lighten($red, 10%)};
+  --color-orange-light: #{ctx_lighten($peach, 10%)};
+  --color-yellow-light: #{ctx_lighten($yellow, 10%)};
+  --color-olive-light: #{ctx_lighten($green, 10%)};
+  --color-green-light: #{ctx_lighten($green, 10%)};
+  --color-teal-light: #{ctx_lighten($teal, 10%)};
+  --color-blue-light: #{ctx_lighten($blue, 10%)};
+  --color-violet-light: #{ctx_lighten($lavender, 10%)};
+  --color-purple-light: #{ctx_lighten($mauve, 10%)};
+  --color-pink-light: #{ctx_lighten($pink, 10%)};
+  --color-brown-light: #{ctx_lighten($flamingo, 10%)};
+  --color-grey-light: #{ctx_lighten($overlay2, 10%)};
+  --color-black-light: #{if(
+      isDark,
+      ctx_lighten($mantle, 10%),
+      ctx_lighten($text, 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.07)};
+  --color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.07)};
+  --color-diff-added-row-bg: #{color.change($green, $alpha: 0.07)};
+  --color-diff-removed-row-border: #{color.change($red, $alpha: 0.07)};
+  --color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.07)};
+  --color-diff-added-row-border: #{color.change($green, $alpha: 0.07)};
+  --color-diff-inactive: #{$overlay2};
+  --color-error-border: #{$red};
+  --color-error-bg: #{$red};
+  --color-error-bg-active: #{ctx_lighten($red, 5%)};
+  --color-error-bg-hover: #{ctx_lighten($red, 10%)};
+  --color-error-text: #{$lvl1};
+  --color-success-border: #{ctx_lighten($green, 10%)};
+  --color-success-bg: #{$green};
+  --color-success-text: #{$lvl1};
+  --color-warning-border: #{ctx_lighten($yellow, 10%)};
+  --color-warning-bg: #{$yellow};
+  --color-warning-text: #{$lvl1};
+  --color-info-border: #{ctx_lighten($blue, 10%)};
+  --color-info-bg: #{$lvl1};
+  --color-info-text: #{$text};
+  --color-red-badge: #{ctx_lighten($red, 10%)};
+  --color-red-badge-bg: #{$lvl1};
+  --color-red-badge-hover-bg: #{ctx_lighten($red, 5%)};
+  --color-green-badge: #{$green};
+  --color-green-badge-bg: #{$green};
+  --color-green-badge-hover-bg: #{ctx_lighten($green, 5%)};
+  --color-yellow-badge: #{$yellow};
+  --color-yellow-badge-bg: #{$lvl1};
+  --color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 5%)};
+  --color-orange-badge: #{$peach};
+  --color-orange-badge-bg: #{$lvl1};
+  --color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)};
+  --color-git: #{$peach};
+
+  /* target-based colors */
+  --color-body: #{$lvl1};
+  --color-box-header: #{$lvl2};
+  --color-box-body: #{$lvl2};
+  --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: #{$lvl2};
+  --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-nav-bg: #{$lvl2};
+  --color-nav-hover-bg: #{$surface0};
+  --color-navbar: #{$lvl2};
+  --color-navbar-transparent: #{color.change($lvl1, $alpha: 0)};
+  --color-light: #{color.change($surface2, $alpha: 0.3)};
+  --color-light-mimic-enabled: rgba(
+    0,
+    0,
+    0,
+    calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
+  );
+  --color-light-border: #{$surface2};
+  --color-hover: #{color.change($overlay0, $alpha: 0.1)};
+  --color-active: #{color.change($text, $alpha: 0.1)};
+  --color-menu: #{$surface0};
+  --color-card: #{$surface0};
+  --color-markup-table-row: #{color.change($text, $alpha: 0.02)};
+  --color-markup-code-block: #{color.change($text, $alpha: 0.05)};
+  --color-button: #{$surface0};
+  --color-code-bg: #{$base};
+  --color-code-sidebar-bg: #{$surface0};
+  --color-shadow: #{color.change($lvl1, $alpha: 0.1)};
+  --color-secondary-bg: #{$surface0};
+  --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);
+  /* gitea source code: */
+  /* should ideally be --color-text-dark, see go-gitea/gitea#15651 */
+  --color-caret: var(--color-text);
+  --color-reaction-bg: #{color.change($text, $alpha: 0.07)};
+  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-header-wrapper: #{$lvl2};
+  --color-header-wrapper-transparent: #{color.change($lvl2, $alpha: 0)};
+  --color-label-text: #{$crust};
+  --color-label-bg: #{$accent};
+  --color-label-hover-bg: #{ctx_lighten($accent, 6%)};
+  --color-label-active-bg: #{ctx_lighten($accent, 3%)};
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-5);
+  --color-active-line: #{$surface1};
+}
+
+@if $isDark {
+  /* 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, .basic),
+.ui.ui.ui.label:not(.inverted, .basic) {
+  &.primary,
+  &.green,
+  &.red,
+  &.teal {
+    color: $lvl1;
+    &:hover {
+      color: $lvl3;
+    }
+  }
+}
+
+.ui.basic.modal {
+  background-color: $lvl3;
+}
+
+// link color for signed commits
+.ui.commit-header-row .svg.gitea-lock ~ a {
+  color: $lvl1;
+}
+
+// most recent commit hover when signed
+.ui.sha.isSigned.isVerified {
+  .shortsha {
+    color: $lvl1;
+  }
+  svg.gitea-lock {
+    fill: $lvl1;
+  }
+}
+
+// modal text color for the "Remove GPG Key" modal
+.ui.basic.modal,
+.ui.basic.modal > .header,
+.ui.inverted.button {
+  color: $text !important;
+}
+
+::selection {
+  background: color.change($rosewater, $alpha: 0.3) !important;
+}
+
+@import "chroma";
+@import "codemirror";
+@import "monaco";