diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css
index 89d5fa0..606fbe6 100644
--- a/styles/github/catppuccin.user.css
+++ b/styles/github/catppuccin.user.css
@@ -1,264 +1,263 @@
 /* ==UserStyle==
 @name           Github Catppuccin
 @namespace      github.com/catppuccin/userstyles/styles/github
-@version        1.1.14
+@version        1.2.0
 @description    Soothing pastel theme for GitHub
 @author         Catppuccin
 @updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css
-@preprocessor   stylus
-@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
-@var select accent-color "Accent" ["Rosewater*", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue", "Sapphire", "Sky", "Lavender", "Gray"]
+
+@preprocessor   less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater*", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
 @var checkbox topbar "Topbar colors" 1
 @var checkbox usefont "Use Inter font" 0
 ==/UserStyle== */
-@-moz-document regexp("https:\/\/*github\.com") {
-
-  if (theme=="Latte") {
-    $type = light
-    $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
-    $base = #eff1f5
-    $mantle = #e6e9ef
-    $crust = #dce0e8
-    $shadow = $crust
+// Include https://github.com
+// Include https://gist.github.com
+// Exclude /marketplace
+// Exclude /organizations/plan
+@catppuccin: {
+  @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;
+    @base: #eff1f5;
+    @mantle: #e6e9ef;
+    @crust: #dce0e8;
   }
-
-  else if (theme=="Frappe") {
-    $type = dark
-    $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
-    $shadow = $crust
+  @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;
   }
-
-  else if (theme=="Macchiato") {
-    $type = dark
-    $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
-    $shadow = $crust
+  @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;
   }
-
-  else if (theme=="Mocha") {
-    $type = dark
-    $rosewater = #f5e0dc
-    $flamingo = #f2cdcd
-    $pink = #f5c2e7
-    $mauve = #cba6f7
-    $red = #f38ba8
-    $maroon = #eba0ac
-    $peach = #fab387
-    $yellow = #f9e2af
-    $green = #a6e3a1
-    $teal = #94e2d5
-    $sky = #89dceb
-    $sapphire = #74c7ec
-    $lavender = #b4befe
-    $blue = #89b4fa
-    $text = #cdd6f4
-    $subtext1 = #bac2de
-    $subtext0 = #a6adc8
-    $overlay2 = #9399b2
-    $overlay1 = #7f849c
-    $overlay0 = #6c7086
-    $surface2 = #585b70
-    $surface1 = #45475a
-    $surface0 = #313244
-    $base = #1e1e2e
-    $mantle = #181825
-    $crust = #11111b
-    $shadow = $crust
+  @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;
   }
-
-  if (accent-color=="Rosewater") {
-    $accent-color = $rosewater;
-  } else if (accent-color=="Flamingo") {
-    $accent-color = $flamingo
-  } else if (accent-color=="Pink") {
-    $accent-color = $pink
-  } else if (accent-color=="Mauve") {
-    $accent-color = $mauve
-  } else if (accent-color=="Red") {
-    $accent-color = $red
-  } else if (accent-color=="Maroon") {
-    $accent-color = $maroon
-  } else if (accent-color=="Peach") {
-    $accent-color = $peach
-  } else if (accent-color=="Yellow") {
-    $accent-color = $yellow
-  } else if (accent-color=="Green") {
-    $accent-color = $green
-  } else if (accent-color=="Teal") {
-    $accent-color = $teal
-  } else if (accent-color=="Blue") {
-    $accent-color = $blue
-  } else if (accent-color=="Sapphire") {
-    $accent-color = $sapphire
-  } else if (accent-color=="Sky") {
-    $accent-color = $sky
-  } else if (accent-color=="Lavender") {
-    $accent-color = $lavender
-  }  else if (accent-color=="Gray") {
-    $accent-color = $subtext0
-  }
-  /* Functions */
-  hoverColor(col) {
-    return blend(alpha(col, 0.7), $text)
-  }
-
-  activeColor(col) {
-    return blend(alpha(col, 0.5), $text)
-  }
-
-  disabledColor(col) {
-    return blend(alpha(col, 0.4), $base)
-  }
-
 }
 
-
-
 @-moz-document regexp("https:\/\/(gist\.)*github\.com(?!\/(marketplace|organizations\/plan)).*") {
 
+  [data-color-mode="auto"][data-dark-theme*="light"],
   [data-color-mode="light"][data-light-theme*="dark"],
-  [data-color-mode="light"][data-light-theme*="light"],
+  [data-color-mode="light"][data-light-theme*="light"] {
+    #catppuccin(@lightFlavor, @accentColor);
+  }
   [data-color-mode="dark"][data-dark-theme*="dark"],
   [data-color-mode="dark"][data-dark-theme*="light"],
-  [data-color-mode="auto"][data-dark-theme*="dark"],
-  [data-color-mode="auto"][data-dark-theme*="light"] {
+  [data-color-mode="auto"][data-dark-theme*="dark"] {
+    #catppuccin(@darkFlavor, @accentColor);
+  }
 
-    &, & body {
-      color-scheme: $type;
+  #coloredButton(@name, @color) {
+    --color-btn-@{name}-text: @base;
+    --color-btn-@{name}-bg: @color;
+    --color-btn-@{name}-border: transparent;
+    --color-btn-@{name}-shadow: 0 0 transparent;
+    --color-btn-@{name}-inset-shadow: 0 0 transparent;
+    --color-btn-@{name}-hover-bg: mix(@color, @text, 30%);
+    --color-btn-@{name}-hover-border: rgba(240, 246, 252, 0.1);
+    --color-btn-@{name}-selected-bg: mix(@color, @text, 50%);
+    --color-btn-@{name}-selected-shadow: 0 0 transparent;
+    --color-btn-@{name}-disabled-text: @crust;
+    --color-btn-@{name}-disabled-bg: mix(@color, @base, 60%);
+    --color-btn-@{name}-disabled-border: transparent;
+    --color-btn-@{name}-focus-bg: #238636;
+    --color-btn-@{name}-focus-border: rgba(240, 246, 252, 0.1);
+    --color-btn-@{name}-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4);
+    --color-btn-@{name}-icon: @base;
+    --color-btn-@{name}-counter-bg: rgba(255, 255, 255, 0.2);
+  }
 
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
+    &,
+    & body {
       --color-canvas-default-transparent: rgba(13, 17, 23, 0);
-      --color-page-header-bg: $base;
-      --color-marketing-icon-primary: $sky;
-      --color-marketing-icon-secondary: $blue;
-      --color-diff-blob-addition-num-text: $text;
-      --color-diff-blob-addition-fg: $text;
-      --color-diff-blob-addition-num-bg: alpha($green, 0.3);
-      --color-diff-blob-addition-line-bg: alpha($green, 0.15);
-      --color-diff-blob-addition-word-bg: alpha($green, 0.3);
-      --color-diff-blob-deletion-num-text: $text;
-      --color-diff-blob-deletion-fg: $text;
-      --color-diff-blob-deletion-num-bg: alpha($red, 0.3);
-      --color-diff-blob-deletion-line-bg: alpha($red, 0.15);
-      --color-diff-blob-deletion-word-bg: alpha($red, 0.3);
-      --color-diff-blob-hunk-num-bg: alpha($blue, 0.4);
+      --color-page-header-bg: @base;
+      --color-marketing-icon-primary: @sky;
+      --color-marketing-icon-secondary: @blue;
+      --color-diff-blob-addition-num-text: @text;
+      --color-diff-blob-addition-fg: @text;
+      --color-diff-blob-addition-num-bg: fadeout(@green, 70%);
+      --color-diff-blob-addition-line-bg: fadeout(@green, 85%);
+      --color-diff-blob-addition-word-bg: fadeout(@green, 70%);
+      --color-diff-blob-deletion-num-text: @text;
+      --color-diff-blob-deletion-fg: @text;
+      --color-diff-blob-deletion-num-bg: fadeout(@red, 70%);
+      --color-diff-blob-deletion-line-bg: fadeout(@red, 85%);
+      --color-diff-blob-deletion-word-bg: fadeout(@red, 70%);
+      --color-diff-blob-hunk-num-bg: fadeout(@blue, 60%);
       --color-diff-blob-expander-icon: #8b949e;
       --color-diff-blob-selected-line-highlight-mix-blend-mode: screen;
       --color-diffstat-deletion-border: rgba(240, 246, 252, 0.1);
       --color-diffstat-addition-border: rgba(240, 246, 252, 0.1);
-      --color-diffstat-addition-bg: $green;
+      --color-diffstat-addition-bg: @green;
       --color-search-keyword-hl: rgba(210, 153, 34, 0.4);
-      --color-prettylights-syntax-comment: $overlay1;
-      --color-prettylights-syntax-constant: $blue;
-      --color-prettylights-syntax-entity: $blue;
-      --color-prettylights-syntax-storage-modifier-import: $peach;
-      --color-prettylights-syntax-entity-tag: $teal;
-      --color-prettylights-syntax-keyword: $pink;
-      --color-prettylights-syntax-string: $green;
-      --color-prettylights-syntax-variable: $peach;
+      --color-prettylights-syntax-comment: @overlay1;
+      --color-prettylights-syntax-constant: @blue;
+      --color-prettylights-syntax-entity: @blue;
+      --color-prettylights-syntax-storage-modifier-import: @peach;
+      --color-prettylights-syntax-entity-tag: @teal;
+      --color-prettylights-syntax-keyword: @pink;
+      --color-prettylights-syntax-string: @green;
+      --color-prettylights-syntax-variable: @peach;
       --color-prettylights-syntax-brackethighlighter-unmatched: #f0f;
-      --color-prettylights-syntax-invalid-illegal-text: $red;
-      --color-prettylights-syntax-invalid-illegal-bg: alpha($red, 0.15);
+      --color-prettylights-syntax-invalid-illegal-text: @red;
+      --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%);
       --color-prettylights-syntax-carriage-return-text: #f0f;
       --color-prettylights-syntax-carriage-return-bg: #f0f;
       --color-prettylights-syntax-string-regexp: #f0f;
       --color-prettylights-syntax-markup-list: #f0f;
-      --color-prettylights-syntax-markup-heading: $teal;
-      --color-prettylights-syntax-markup-italic: $yellow;
-      --color-prettylights-syntax-markup-bold: $yellow;
-      --color-prettylights-syntax-markup-deleted-text: $text;
-      --color-prettylights-syntax-markup-deleted-bg: alpha($red, 0.4);
-      --color-prettylights-syntax-markup-inserted-text: $text;
-      --color-prettylights-syntax-markup-inserted-bg: alpha($green, 0.4);
-      --color-prettylights-syntax-markup-changed-text: $text;
-      --color-prettylights-syntax-markup-changed-bg: alpha($yellow, 0.4);
-      --color-prettylights-syntax-markup-ignored-text: $text;
+      --color-prettylights-syntax-markup-heading: @teal;
+      --color-prettylights-syntax-markup-italic: @yellow;
+      --color-prettylights-syntax-markup-bold: @yellow;
+      --color-prettylights-syntax-markup-deleted-text: @text;
+      --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%);
+      --color-prettylights-syntax-markup-inserted-text: @text;
+      --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%);
+      --color-prettylights-syntax-markup-changed-text: @text;
+      --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%);
+      --color-prettylights-syntax-markup-ignored-text: @text;
       --color-prettylights-syntax-markup-ignored-bg: #f0f;
-      --color-prettylights-syntax-meta-diff-range: $mauve;
+      --color-prettylights-syntax-meta-diff-range: @mauve;
       --color-prettylights-syntax-brackethighlighter-angle: #f0f;
       --color-prettylights-syntax-sublimelinter-gutter-mark: #f0f;
       --color-prettylights-syntax-constant-other-reference-link: #f0f;
-      --color-codemirror-text: $text;
-      --color-codemirror-bg: $base;
-      --color-codemirror-gutters-bg: $base;
-      --color-codemirror-guttermarker-text: $base;
+      --color-codemirror-text: @text;
+      --color-codemirror-bg: @base;
+      --color-codemirror-gutters-bg: @base;
+      --color-codemirror-guttermarker-text: @base;
       --color-codemirror-guttermarker-subtle-text: #6e7681;
       --color-codemirror-linenumber-text: #8b949e;
       --color-codemirror-cursor: #c9d1d9;
       --color-codemirror-selection-bg: rgba(56, 139, 253, 0.4);
       --color-codemirror-activeline-bg: rgba(110, 118, 129, 0.1);
       --color-codemirror-matchingbracket-text: #c9d1d9;
-      --color-codemirror-lines-bg: $base;
+      --color-codemirror-lines-bg: @base;
       --color-codemirror-syntax-comment: #8b949e;
       --color-codemirror-syntax-constant: #79c0ff;
       --color-codemirror-syntax-entity: #d2a8ff;
@@ -267,95 +266,103 @@
       --color-codemirror-syntax-string: #a5d6ff;
       --color-codemirror-syntax-support: #79c0ff;
       --color-codemirror-syntax-variable: #ffa657;
-      --color-checks-bg: $mantle;
+      --color-checks-bg: @mantle;
       --color-checks-run-border-width: 1px;
       --color-checks-container-border-width: 1px;
-      --color-checks-text-primary: $text;
-      --color-checks-text-secondary: $subtext1;
-      --color-checks-text-link: $accent-color;
-      --color-checks-btn-icon: $text;
-      --color-checks-btn-hover-icon: $text;
-      --color-checks-btn-hover-bg: $crust;
-      --color-checks-input-text: $surface1;
-      --color-checks-input-placeholder-text: $subtext1;
-      --color-checks-input-focus-text: $text;
-      --color-checks-input-bg: $surface0;
+      --color-checks-text-primary: @text;
+      --color-checks-text-secondary: @subtext1;
+      --color-checks-text-link: @sapphire;
+      --color-checks-btn-icon: @text;
+      --color-checks-btn-hover-icon: @text;
+      --color-checks-btn-hover-bg: @crust;
+      --color-checks-input-text: @surface1;
+      --color-checks-input-placeholder-text: @subtext1;
+      --color-checks-input-focus-text: @text;
+      --color-checks-input-bg: @surface0;
       --color-checks-input-shadow: 0 0 0 1px;
-      --color-checks-donut-error: $red;
-      --color-checks-donut-pending: $peach;
-      --color-checks-donut-success: $green;
-      --color-checks-donut-neutral: $overlay2;
-      --color-checks-dropdown-text: $text;
-      --color-checks-dropdown-bg: $surface0;
-      --color-checks-dropdown-border: $surface1;
-      --color-checks-dropdown-shadow: $shadow;
-      --color-checks-dropdown-hover-text: $subtext0;
-      --color-checks-dropdown-hover-bg: $mantle;
-      --color-checks-dropdown-btn-hover-text: $text;
-      --color-checks-dropdown-btn-hover-bg: $mantle;
-      --color-checks-scrollbar-thumb-bg: $mantle;
-      --color-checks-header-label-text: $text;
-      --color-checks-header-label-open-text: $accent-color;
-      --color-checks-header-border: $surface0;
-      --color-checks-header-icon: $text;
-      --color-checks-line-text: $subtext1;
-      --color-checks-line-num-text: $subtext1;
-      --color-checks-line-timestamp-text: $subtext1;
-      --color-checks-line-hover-bg: $surface0;
+      --color-checks-donut-error: @red;
+      --color-checks-donut-pending: @peach;
+      --color-checks-donut-success: @green;
+      --color-checks-donut-neutral: @overlay2;
+      --color-checks-dropdown-text: @text;
+      --color-checks-dropdown-bg: @surface0;
+      --color-checks-dropdown-border: @surface1;
+      --color-checks-dropdown-shadow: @crust;
+      --color-checks-dropdown-hover-text: @subtext0;
+      --color-checks-dropdown-hover-bg: @mantle;
+      --color-checks-dropdown-btn-hover-text: @text;
+      --color-checks-dropdown-btn-hover-bg: @mantle;
+      --color-checks-scrollbar-thumb-bg: @mantle;
+      --color-checks-header-label-text: @text;
+      --color-checks-header-label-open-text: @accent-color;
+      --color-checks-header-border: @surface0;
+      --color-checks-header-icon: @text;
+      --color-checks-line-text: @subtext1;
+      --color-checks-line-num-text: @subtext1;
+      --color-checks-line-timestamp-text: @subtext1;
+      --color-checks-line-hover-bg: @surface0;
       --color-checks-line-selected-bg: #dc2286;
       --color-checks-line-selected-num-text: #dc2286;
       --color-checks-line-dt-fm-text: #dc2286;
       --color-checks-line-dt-fm-bg: #dc2286;
       --color-checks-gate-bg: rgba(187, 128, 9, 0.15);
-      --color-checks-gate-text: $text;
-      --color-checks-gate-waiting-text: $yellow;
-      --color-checks-step-header-open-bg: $surface0;
-      --color-checks-step-error-text: $maroon;
-      --color-checks-step-warning-text: $peach;
-      --color-checks-logline-text: $text;
-      --color-checks-logline-num-text: $text;
-      --color-checks-logline-debug-text: $mauve;
-      --color-checks-logline-error-text: $text;
-      --color-checks-logline-error-num-text: $maroon;
-      --color-checks-logline-error-bg: alpha($maroon, 0.15);
-      --color-checks-logline-warning-text: $subtext1;
-      --color-checks-logline-warning-num-text: $peach;
-      --color-checks-logline-warning-bg: alpha($peach, 0.15);
-      --color-checks-logline-command-text: $blue;
-      --color-checks-logline-section-text: $green;
-      if ($type == "dark") {
-          --color-checks-ansi-black: $surface1;
-          --color-checks-ansi-black-bright: $surface2;
-          --color-checks-ansi-white: $subtext1;
-          --color-checks-ansi-white-bright: $subtext0;
-      } else {
-          --color-checks-ansi-black: $subtext1;
-          --color-checks-ansi-black-bright: $subtext0;
-          --color-checks-ansi-white: $surface2;
-          --color-checks-ansi-white-bright: $surface1;
+      --color-checks-gate-text: @text;
+      --color-checks-gate-waiting-text: @yellow;
+      --color-checks-step-header-open-bg: @surface0;
+      --color-checks-step-error-text: @maroon;
+      --color-checks-step-warning-text: @peach;
+      --color-checks-logline-text: @text;
+      --color-checks-logline-num-text: @text;
+      --color-checks-logline-debug-text: @mauve;
+      --color-checks-logline-error-text: @text;
+      --color-checks-logline-error-num-text: @maroon;
+      --color-checks-logline-error-bg: fadeout(@maroon, 85%);
+      --color-checks-logline-warning-text: @subtext1;
+      --color-checks-logline-warning-num-text: @peach;
+      --color-checks-logline-warning-bg: fadeout(@peach, 85%);
+      --color-checks-logline-command-text: @blue;
+      --color-checks-logline-section-text: @green;
+      --color-checks-ansi-black: @surface1;
+      --color-checks-ansi-black-bright: @surface2;
+      --color-checks-ansi-white: @subtext1;
+      --color-checks-ansi-white-bright: @subtext0;
+
+      & when (@lookup =latte) {
+        // When using a light theme use the light colors instead of the dark
+        --color-checks-ansi-black: @subtext1;
+        --color-checks-ansi-black-bright: @subtext0;
+        --color-checks-ansi-white: @surface2;
+        --color-checks-ansi-white-bright: @surface1;
       }
+
       --color-checks-ansi-gray: #f0f;
-      --color-checks-ansi-red: $red;
-      --color-checks-ansi-red-bright: $red;
-      --color-checks-ansi-green: $green;
-      --color-checks-ansi-green-bright: $green;
-      --color-checks-ansi-yellow: $yellow;
-      --color-checks-ansi-yellow-bright: $yellow;
-      --color-checks-ansi-blue: $blue;
-      --color-checks-ansi-blue-bright: $blue;
-      --color-checks-ansi-magenta: $pink;
-      --color-checks-ansi-magenta-bright: $pink;
-      --color-checks-ansi-cyan: $teal;
-      --color-checks-ansi-cyan-bright: $teal;
+      --color-checks-ansi-red: @red;
+      --color-checks-ansi-red-bright: @red;
+      --color-checks-ansi-green: @green;
+      --color-checks-ansi-green-bright: @green;
+      --color-checks-ansi-yellow: @yellow;
+      --color-checks-ansi-yellow-bright: @yellow;
+      --color-checks-ansi-blue: @blue;
+      --color-checks-ansi-blue-bright: @blue;
+      --color-checks-ansi-magenta: @pink;
+      --color-checks-ansi-magenta-bright: @pink;
+      --color-checks-ansi-cyan: @teal;
+      --color-checks-ansi-cyan-bright: @teal;
       --color-project-header-bg: #0d1117;
       --color-project-sidebar-bg: #161b22;
       --color-project-gradient-in: #161b22;
       --color-project-gradient-out: rgba(22, 27, 34, 0);
       --color-mktg-btn-bg: #f6f8fa;
-      --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset;
-      --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px;
-      --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
-      --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
+      --color-mktg-btn-shadow-outline: rgb(255, 255, 255 / 25%) 0 0 0 1px inset;
+      --color-mktg-btn-shadow-focus: rgb(255, 255, 255 / 25%) 0 0 0 4px;
+      --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15),
+      0 100px 80px rgba(255, 255, 255, 0.02),
+      0 42px 33px rgba(255, 255, 255, 0.024),
+      0 22px 18px rgba(255, 255, 255, 0.028),
+      0 12px 10px rgba(255, 255, 255, 0.034),
+      0 7px 5px rgba(255, 255, 255, 0.04),
+      0 3px 2px rgba(255, 255, 255, 0.07);
+      --color-mktg-btn-shadow-hover-muted: rgb(255, 255, 255) 0 0 0 2px inset;
       --color-avatar-bg: rgba(255, 255, 255, 0.1);
       --color-avatar-border: rgba(240, 246, 252, 0.1);
       --color-avatar-stack-fade: #30363d;
@@ -366,21 +373,24 @@
       --color-select-menu-backdrop-border: #484f58;
       --color-select-menu-tap-highlight: rgba(48, 54, 61, 0.5);
       --color-select-menu-tap-focus-bg: #0c2d6b;
-      --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1, 4, 9, 0.85);
+      --color-overlay-shadow: 0 0 0 1px #30363d,
+      0 16px 32px rgba(1, 4, 9, 0.85);
       --color-header-text: var(--subtext2);
-      if (topbar) {
-          --color-header-bg: $mantle;
-      } else {
-          --color-header-bg: $base;
+      --color-header-bg: @base;
+
+      & when (@topbar =1) {
+        // If topbar is enabled then make the topbar color different
+        --color-header-bg: @mantle;
       }
+
       --color-header-divider: #8b949e;
-      --color-header-logo: $text;
-      --color-header-search-bg: $surface0;
-      --color-header-search-border: $surface1;
-      --color-sidenav-selected-bg: $surface1;
-      --color-menu-bg-active: $surface2;
+      --color-header-logo: @text;
+      --color-header-search-bg: @surface0;
+      --color-header-search-border: @surface1;
+      --color-sidenav-selected-bg: @surface1;
+      --color-menu-bg-active: @surface2;
       --color-input-disabled-bg: rgba(110, 118, 129, 0);
-      --color-timeline-badge-bg: $surface0;
+      --color-timeline-badge-bg: @surface0;
       --color-ansi-black: #484f58;
       --color-ansi-black-bright: #6e7681;
       --color-ansi-white: #b1bac4;
@@ -398,39 +408,23 @@
       --color-ansi-magenta-bright: #d2a8ff;
       --color-ansi-cyan: #39c5cf;
       --color-ansi-cyan-bright: #56d4dd;
-      --color-btn-text: $text;
-      --color-btn-bg: $surface0;
+      --color-btn-text: @text;
+      --color-btn-bg: @surface0;
       --color-btn-border: transparent;
       --color-btn-shadow: 0 0 transparent;
       --color-btn-inset-shadow: 0 0 transparent;
-      --color-btn-hover-bg: $surface1;
+      --color-btn-hover-bg: @surface1;
       --color-btn-hover-border: transparent;
-      --color-btn-active-bg: $surface2;
+      --color-btn-active-bg: @surface2;
       --color-btn-active-border: transparent;
-      --color-btn-selected-bg: $surface2;
+      --color-btn-selected-bg: @surface2;
       --color-btn-focus-bg: #21262d;
       --color-btn-focus-border: #8b949e;
       --color-btn-focus-shadow: 0 0 0 3px rgba(139, 148, 158, 0.3);
       --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15);
       --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31, 111, 235, 0.3);
-      --color-btn-counter-bg: $surface2;
-      --color-btn-primary-text: $base;
-      --color-btn-primary-bg: $green;
-      --color-btn-primary-border: transparent;
-      --color-btn-primary-shadow: 0 0 transparent;
-      --color-btn-primary-inset-shadow: 0 0 transparent;
-      --color-btn-primary-hover-bg: hoverColor($green);
-      --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
-      --color-btn-primary-selected-bg: activeColor($green);
-      --color-btn-primary-selected-shadow: 0 0 transparent;
-      --color-btn-primary-disabled-text: $crust;
-      --color-btn-primary-disabled-bg: disabledColor($green);
-      --color-btn-primary-disabled-border: transparent;
-      --color-btn-primary-focus-bg: #238636;
-      --color-btn-primary-focus-border: rgba(240, 246, 252, 0.1);
-      --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4);
-      --color-btn-primary-icon: $base;
-      --color-btn-primary-counter-bg: rgba(255, 255, 255, 0.2);
+      --color-btn-counter-bg: @surface2;
+      #coloredButton(primary, @green);
       --color-btn-outline-text: #58a6ff;
       --color-btn-outline-hover-text: #58a6ff;
       --color-btn-outline-hover-bg: #30363d;
@@ -442,40 +436,21 @@
       --color-btn-outline-selected-bg: #0d419d;
       --color-btn-outline-selected-border: rgba(240, 246, 252, 0.1);
       --color-btn-outline-selected-shadow: 0 0 transparent;
-      --color-btn-outline-disabled-text: $subtext0;
-      --color-btn-outline-disabled-bg: $surface2;
+      --color-btn-outline-disabled-text: @subtext0;
+      --color-btn-outline-disabled-bg: @surface2;
       --color-btn-outline-disabled-counter-bg: rgba(31, 111, 235, 0.05);
       --color-btn-outline-focus-border: rgba(240, 246, 252, 0.1);
       --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17, 88, 199, 0.4);
       --color-btn-outline-counter-bg: rgba(31, 111, 235, 0.1);
-      --color-btn-danger-text: $base;
-      --color-btn-danger-bg: $red;
-      --color-btn-danger-hover-text: $base;
-      --color-btn-danger-hover-bg: hoverColor($red);
-      --color-btn-danger-hover-border: transparent;
-      --color-btn-danger-hover-shadow: 0 0 transparent;
-      --color-btn-danger-hover-inset-shadow: 0 0 transparent;
-      --color-btn-danger-hover-icon: $base;
-      --color-btn-danger-hover-counter-bg: rgba(255, 255, 255, 0.2);
-      --color-btn-danger-selected-text: $base;
-      --color-btn-danger-selected-bg: activeColor($red);
-      --color-btn-danger-selected-border: transparent;
-      --color-btn-danger-selected-shadow: 0 0 transparent;
-      --color-btn-danger-disabled-text: $crust;
-      --color-btn-danger-disabled-bg: disabledColor($red);
-      --color-btn-danger-disabled-counter-bg: rgba(218, 54, 51, 0.05);
-      --color-btn-danger-focus-border: #f85149;
-      --color-btn-danger-focus-shadow: 0 0 0 3px rgba(248, 81, 73, 0.4);
-      --color-btn-danger-counter-bg: rgba(218, 54, 51, 0.1);
-      --color-btn-danger-icon: #f85149;
+      #coloredButton(danger, @red);
       --color-underlinenav-icon: #6e7681;
       --color-underlinenav-border-hover: rgba(110, 118, 129, 0.4);
-      --color-action-list-item-inline-divider: $surface2;
-      --color-action-list-item-default-hover-bg: $surface0;
+      --color-action-list-item-inline-divider: @surface2;
+      --color-action-list-item-default-hover-bg: @surface0;
       --color-action-list-item-default-hover-border: rgba(0, 0, 0, 0);
       --color-action-list-item-default-active-bg: rgba(177, 186, 196, 0.2);
       --color-action-list-item-default-active-border: rgba(0, 0, 0, 0);
-      --color-action-list-item-default-selected-bg: $surface1;
+      --color-action-list-item-default-selected-bg: @surface1;
       --color-action-list-item-danger-hover-bg: rgba(248, 81, 73, 0.16);
       --color-action-list-item-danger-active-bg: rgba(248, 81, 73, 0.24);
       --color-action-list-item-danger-hover-text: #ff7b72;
@@ -487,65 +462,65 @@
       --color-switch-track-checked-border: #58a6ff;
       --color-switch-knob-checked-bg: #1f6feb;
       --color-switch-knob-checked-disabled-bg: #484f58;
-      --color-fg-default: $text;
-      --color-fg-muted: $subtext1;
-      --color-fg-subtle: $subtext1;
-      --color-fg-on-emphasis: $base;
-      --color-canvas-default: $base;
-      --color-canvas-overlay: $mantle;
-      --color-canvas-inset: $surface0;
-      --color-canvas-subtle: $mantle;
-      --color-border-default: $surface1;
-      --color-border-muted: $surface0;
+      --color-fg-default: @text;
+      --color-fg-muted: @subtext1;
+      --color-fg-subtle: @subtext1;
+      --color-fg-on-emphasis: @base;
+      --color-canvas-default: @base;
+      --color-canvas-overlay: @mantle;
+      --color-canvas-inset: @surface0;
+      --color-canvas-subtle: @mantle;
+      --color-border-default: @surface1;
+      --color-border-muted: @surface0;
       --color-border-subtle: rgba(240, 246, 252, 0.1);
       --color-shadow-small: 0 0 transparent;
-      --color-shadow-medium: 0 3px 6px $shadow;
-      --color-shadow-large: 0 8px 24px $shadow;
-      --color-shadow-extra-large: 0 12px 48px $shadow;
-      --color-neutral-emphasis-plus: $overlay0;
-      --color-neutral-emphasis: $overlay2;
+      --color-shadow-medium: 0 3px 6px @crust;
+      --color-shadow-large: 0 8px 24px @crust;
+      --color-shadow-extra-large: 0 12px 48px @crust;
+      --color-neutral-emphasis-plus: @overlay0;
+      --color-neutral-emphasis: @overlay2;
       --color-neutral-muted: rgba(110, 118, 129, 0.4);
       --color-neutral-subtle: rgba(110, 118, 129, 0.1);
-      --color-accent-fg: $accent-color;
-      --color-accent-emphasis: $accent-color;
-      --color-accent-muted: alpha($accent-color, 0.4);
-      --color-accent-subtle: alpha($accent-color, 0.15);
-      --color-success-fg: $green;
-      --color-success-emphasis: $green;
+      --color-accent-fg: @accent-color;
+      --color-accent-emphasis: @accent-color;
+      --color-accent-muted: fadeout(@accent-color, 60%);
+      --color-accent-subtle: fadeout(@accent-color, 85%);
+      --color-success-fg: @green;
+      --color-success-emphasis: @green;
       --color-success-muted: rgba(46, 160, 67, 0.4);
       --color-success-subtle: rgba(46, 160, 67, 0.15);
-      --color-attention-fg: $peach;
-      --color-attention-emphasis: $peach;
+      --color-attention-fg: @peach;
+      --color-attention-emphasis: @peach;
       --color-attention-muted: rgba(187, 128, 9, 0.4);
       --color-attention-subtle: rgba(187, 128, 9, 0.15);
-      --color-severe-fg: $maroon;
-      --color-severe-emphasis: $maroon;
+      --color-severe-fg: @maroon;
+      --color-severe-emphasis: @maroon;
       --color-severe-muted: rgba(219, 109, 40, 0.4);
       --color-severe-subtle: rgba(219, 109, 40, 0.15);
-      --color-danger-fg: $red;
-      --color-danger-emphasis: $red;
+      --color-danger-fg: @red;
+      --color-danger-emphasis: @red;
       --color-danger-muted: rgba(248, 81, 73, 0.4);
       --color-danger-subtle: rgba(248, 81, 73, 0.15);
-      --color-open-fg: $green;
-      --color-open-emphasis: $green;
+      --color-open-fg: @green;
+      --color-open-emphasis: @green;
       --color-open-muted: rgba(46, 160, 67, 0.4);
       --color-open-subtle: rgba(46, 160, 67, 0.15);
-      --color-closed-fg: $red;
-      --color-closed-emphasis: $red;
+      --color-closed-fg: @red;
+      --color-closed-emphasis: @red;
       --color-closed-muted: rgba(248, 81, 73, 0.4);
       --color-closed-subtle: rgba(248, 81, 73, 0.15);
-      --color-done-fg: $mauve;
-      --color-done-emphasis: $mauve;
+      --color-done-fg: @mauve;
+      --color-done-emphasis: @mauve;
       --color-done-muted: rgba(163, 113, 247, 0.4);
       --color-done-subtle: rgba(163, 113, 247, 0.15);
-      --color-sponsors-fg: $mauve;
-      --color-sponsors-emphasis: $mauve;
+      --color-sponsors-fg: @mauve;
+      --color-sponsors-emphasis: @mauve;
       --color-sponsors-muted: rgba(219, 97, 162, 0.4);
       --color-sponsors-subtle: rgba(219, 97, 162, 0.15);
-      --color-primer-fg-disabled: alpha($accent-color, .5);
+      --color-primer-fg-disabled: fadeout(@accent-color, 50%);
       --color-primer-canvas-backdrop: rgba(1, 4, 9, 0.8);
       --color-primer-canvas-sticky: rgba(13, 17, 23, 0.95);
-      --color-primer-border-active: $red;
+      --color-primer-border-active: @red;
       --color-primer-border-contrast: rgba(255, 255, 255, 0.2);
       --color-primer-shadow-highlight: 0 0 transparent;
       --color-primer-shadow-inset: 0 0 transparent;
@@ -643,26 +618,17 @@
       --color-scale-coral-8: #640D04;
       --color-scale-coral-9: #460701;
     }
-  }
-
-
-  [data-color-mode="light"][data-light-theme*="dark"],
-  [data-color-mode="light"][data-light-theme*="light"],
-  [data-color-mode="dark"][data-dark-theme*="dark"],
-  [data-color-mode="dark"][data-dark-theme*="light"],
-  [data-color-mode="auto"][data-dark-theme*="dark"],
-  [data-color-mode="auto"][data-dark-theme*="light"] {
-    --color-workflow-card-connector: $overlay0;
-    --color-workflow-card-connector-bg: $overlay0;
-    --color-workflow-card-connector-inactive: $surface1;
-    --color-workflow-card-connector-inactive-bg: $surface1;
-    --color-workflow-card-connector-highlight: $accent-color;
-    --color-workflow-card-connector-highlight-bg: $accent-color;
-    --color-workflow-card-bg: $surface1;
-    --color-workflow-card-inactive-bg: $surface0;
+    --color-workflow-card-connector: @overlay0;
+    --color-workflow-card-connector-bg: @overlay0;
+    --color-workflow-card-connector-inactive: @surface1;
+    --color-workflow-card-connector-inactive-bg: @surface1;
+    --color-workflow-card-connector-highlight: @accent-color;
+    --color-workflow-card-connector-highlight-bg: @accent-color;
+    --color-workflow-card-bg: @surface1;
+    --color-workflow-card-inactive-bg: @surface0;
     --color-workflow-card-header-shadow: #dc2286;
-    --color-workflow-card-progress-complete-bg: alpha($blue, 0.15);
-    --color-workflow-card-progress-incomplete-bg: $surface1;
+    --color-workflow-card-progress-complete-bg: fadeout(@blue, 85%);
+    --color-workflow-card-progress-incomplete-bg: @surface1;
     --color-discussions-state-answered-icon: var(--color-scale-green-3);
     --color-bg-discussions-row-emoji-box: var(--color-scale-gray-6);
     --color-notifications-button-text: var(--color-scale-white);
@@ -670,200 +636,246 @@
     --color-notifications-button-hover-bg: var(--color-scale-blue-4);
     --color-notifications-row-read-bg: var(--color-canvas-default);
     --color-notifications-row-bg: var(--color-canvas-subtle);
-    --color-icon-directory: $text;
+    --color-icon-directory: @text;
     --color-checks-step-error-icon: var(--color-scale-red-4);
     --color-calendar-halloween-graph-day-L1-bg: #631c03;
     --color-calendar-halloween-graph-day-L2-bg: #bd561d;
     --color-calendar-halloween-graph-day-L3-bg: #fa7a18;
     --color-calendar-halloween-graph-day-L4-bg: #fddf68;
-    --color-calendar-graph-day-bg: $surface0;
+    --color-calendar-graph-day-bg: @surface0;
     --color-calendar-graph-day-border: transparent;
     /* These could do with a bit of refining */
-    --color-calendar-graph-day-L1-bg: spin(rgba($green, 40%), 15deg);
-    --color-calendar-graph-day-L2-bg: spin(rgba($green, 60%), 10deg);
-    --color-calendar-graph-day-L3-bg: spin(rgba($green, 80%), 5deg);
-    --color-calendar-graph-day-L4-bg: $green;
+    --color-calendar-graph-day-L1-bg: spin(fade(@green, 40%), 15deg);
+    --color-calendar-graph-day-L2-bg: spin(fade(@green, 60%), 10deg);
+    --color-calendar-graph-day-L3-bg: spin(fade(@green, 80%), 5deg);
+    --color-calendar-graph-day-L4-bg: @green;
     --color-calendar-graph-day-L1-border: transparent;
     --color-calendar-graph-day-L2-border: transparent;
     --color-calendar-graph-day-L3-border: transparent;
     --color-calendar-graph-day-L4-border: transparent;
     --color-user-mention-fg: var(--color-scale-yellow-0);
     --color-user-mention-bg: var(--color-scale-yellow-8);
-    --color-text-white: $text;
-  }
+    --color-text-white: @text;
 
-  /* Buttons */
-  .btn-danger,
-  .Button--danger {
-    background: var(--color-btn-danger-bg)
-  }
-
-  /* Issue tags */
-  .hx_IssueLabel {
-    --text: $text;
-  }
-  if ($type == light) { /* Maybe we could make a custom algorithm that converts the colors to be more catppuccin like? */
-    @css {
-      .hx_IssueLabel {
-        --lightness-threshold: 0.453;
-        --border-threshold: 0.96;
-        --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
-        //color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)) !important;
-        color: var(--text) !important;
-        background: rgb(var(--label-r), var(--label-g), var(--label-b)) !important;
-        border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha)) !important;
-      }
+    /* Buttons */
+    .btn-danger,
+    .Button--danger {
+      background: var(--color-btn-danger-bg)
     }
-  } else {
-    @css {
-      .hx_IssueLabel {
-        --lightness-threshold: 0.6;
-        --background-alpha: 0.18;
-        --border-alpha: 0.3;
-        --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
-        color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)) !important;
-        background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)) !important;
-        border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha)) !important;
-      }
+
+    /* search btn */
+    .header-search-button.placeholder {
+      color: @text;
     }
-  }
 
-  /* Labels */
-  .Label {
-    color: var(--color-accent-fg);
-    background-color: $surface0;
-    border-color: transparent;
-  }
+    /* Issue tags */
+    .hx_IssueLabel {
+      --text: @text;
+    }
 
-  .Label--secondary {
-    background-color: $surface0;
-    color: $text;
-  }
+    .hx_IssueLabel not when (@lookup =latte) {
+      --lightness-threshold: 0.453;
+      --border-threshold: 0.96;
+      --border-fadeout: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1)); //color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)) !important;
+      color: var(--text) !important;
+      background: rgb(var(--label-r), var(--label-g), var(--label-b)) !important;
+      border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-fadeout)) !important;
+    }
 
-  .Label--success {
-    color: $base;
-    background-color: $green;
-  }
+    .hx_IssueLabel when (@lookup =latte) {
+      --lightness-threshold: 0.6;
+      --background-fadeout: 0.18;
+      --border-fadeout: 0.3;
+      --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+      color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)) !important;
+      background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-fadeout)) !important;
+      border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-fadeout)) !important;
+    }
 
-  .Label--danger {
-    background-color: var(--color-danger-emphasis);
-    color: var(--color-btn-danger-text);
-  }
+    /* Labels */
+    .Label {
+      color: var(--color-accent-fg);
+      background-color: @surface0;
+      border-color: transparent;
+    }
 
-  .timeline-comment-header .Label,
-  .timeline-comment .Label {
-    color: var(--color-fg-muted);
-  }
+    .Label--secondary {
+      background-color: @surface0;
+      color: @text;
+    }
 
-  /* Search */
-  .header-search-input {
-    color: $text !important;
-  }
-  .header-search-input::placeholder {
-    color: $subtext1 !important;
-  }
+    .Label--success {
+      color: @base;
+      background-color: @green;
+    }
 
-  /* Tags */
-  .topic-tag {
-    --color-accent-fg: $blue;
-    --color-accent-emphasis: $blue;
-    --color-accent-muted: alpha($blue, 0.4);
-    --color-accent-subtle: alpha($blue, 0.15);
-  }
+    .Label--danger {
+      background-color: var(--color-danger-emphasis);
+      color: var(--color-btn-danger-text);
+    }
 
-  /* Misc */
-  .col-md-8 {
-    background-color: $base;
-  }
+    .timeline-comment-header .Label,
+    .timeline-comment .Label {
+      color: var(--color-fg-muted);
+    }
 
-  /* Large notification */
-  .flash {
-    background: $mantle;
-    border-color: transparent;
-  }
+    /* Search */
+    .header-search-input {
+      color: @text !important;
+    }
 
-  /* Button Fix */
-  .color-bg-subtle {
-    background-color: transparent !important;
-  }
-  .command-palette-details-dialog .color-bg-subtle {
-    background-color: $surface0 !important;
-  }
-  /* Button selection Fix */
-  .navigation-item[aria-selected="true"] .color-fg-muted {
-    color: $base !important;
-  }
-  /* Darker bg for new AppHeader */
-  .AppHeader {
-    background: var(--color-header-bg);
-  }
-  /* Headers */
-  h1, h2, h3, h4, h5, h6 {
-    color: $subtext1
-  }
+    .header-search-input::placeholder {
+      color: @subtext1 !important;
+    }
+
+    /* Tags */
+    .topic-tag {
+      --color-accent-fg: @blue;
+      --color-accent-emphasis: @blue;
+      --color-accent-muted: fadeout(@blue, 60%);
+      --color-accent-subtle: fadeout(@blue, 85%);
+    }
+
+    /* Misc */
+    .col-md-8 {
+      background-color: @base;
+    }
+
+    .kSmUFR[data-size="small"][data-no-visuals="true"] svg {
+      color: @green;
+    }
+    .starred .starred-button-icon {
+      color: @yellow;
+    }
+
+    /* Large notification */
+    .flash {
+      background: @mantle;
+      border-color: transparent;
+    }
+
+    /* Button Fix */
+    .color-bg-subtle {
+      background-color: transparent !important;
+    }
+
+    .command-palette-details-dialog .color-bg-subtle {
+      background-color: @surface0 !important;
+    }
+
+    /* Button selection Fix */
+    .navigation-item[aria-selected="true"] .color-fg-muted {
+      color: @base !important;
+    }
+
+    /* Darker bg for new AppHeader */
+    .AppHeader {
+      background: var(--color-header-bg);
+    }
+
+    /* Headers */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: @subtext1
+    }
 
-  if (usefont) {
     body,
     .markdown-body {
-      font-family: inter, sans-serif;
+      & when (@usefont=1) {
+        font-family: inter, sans-serif;
+      }
+    }
+
+    #check-step-header-title {
+      color: var(--color-checks-text-link) !important;
+    }
+
+    ::selection {
+      background: @surface2 !important;
+    }
+
+    /* New change visibility box star and watcher preview buttons Fix */
+    .btn.color-fg-danger.cursor-default {
+      color: var(--color-btn-danger-text) !important;
+      background-color: var(--color-btn-danger-bg);
+    }
+
+    .btn.color-fg-danger.cursor-default:hover {
+      background-color: var(--color-btn-danger-hover-bg);
+    }
+
+    .btn.color-fg-danger.cursor-default > svg.octicon {
+      color: var(--color-btn-danger-text) !important;
+    }
+
+    /* New change visibility box danger buttons Fix */
+    :where(#repo-visibility-proceed-button-public, #repo-visibility-proceed-button-private):not([data-next-stage]) {
+      color: var(--color-btn-danger-text);
+      background-color: var(--color-btn-danger-bg);
+    }
+
+    /* 2FA authentication box header Fix */
+    body.session-authentication div.Box-header {
+      background-color: inherit;
+    }
+
+
+    /* Footer Logo Fix */
+    .footer-octicon > svg:nth-child(1) > path:nth-child(1) {
+      fill: @text;
+    }
+
+    /* Footer text hover fix */
+    .footer nav.col-12 * {
+      color: @subtext1 !important;
+    }
+
+    /* Notifications */
+    .notification-indicator .mail-status {
+      background-image: none;
+      background-color: @accent-color;
     }
   }
-
-  #check-step-header-title {
-    color: var(--color-checks-text-link) !important;
-  }
-
-  ::selection {
-    background: $surface2 !important;
-  }
-
-  /* New change visibility box star and watcher preview buttons Fix */
-  .btn.color-fg-danger.cursor-default {
-    color: var(--color-btn-danger-text) !important;
-    background-color: var(--color-btn-danger-bg);
-  }
-  .btn.color-fg-danger.cursor-default:hover {
-    background-color: var(--color-btn-danger-hover-bg);
-  }
-  .btn.color-fg-danger.cursor-default > svg.octicon {
-    color: var(--color-btn-danger-text) !important;
-  }
-
-  /* New change visibility box danger buttons Fix */
-  :where(#repo-visibility-proceed-button-public, #repo-visibility-proceed-button-private):not([data-next-stage]) {
-    color: var(--color-btn-danger-text);
-    background-color: var(--color-btn-danger-bg);
-  }
-
-  /* 2FA authentication box header Fix */
-  body.session-authentication div.Box-header {
-    background-color: inherit;
-  }
-
-
-  /* Footer Logo Fix */
-  .footer-octicon > svg:nth-child(1) > path:nth-child(1){
-    fill: $text;
-  }
-
-  /* Footer text hover fix */
-  .footer nav.col-12 * {
-    color: $subtext1 !important;
-  }
-
-  /* Notifications */
-  .notification-indicator .mail-status {
-    background-image: none;
-    background-color: $accent-color;
-  }
-
 }
-
-
-
 @-moz-document regexp("https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*") {
 
   :root {
+    #catppuccin(@darkFlavor, @accentColor);
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
     /* Colors */
     --color-scale-black: #010409;
     --color-scale-white: #ffffff;
@@ -962,20 +974,20 @@
     --jp-border-color1: var(--color-scale-gray-7);
     --jp-border-color2: var(--color-scale-gray-8);
     --jp-border-color3: var(--color-scale-gray-9);
-    --jp-ui-font-color0: $text;
-    --jp-ui-font-color1: alpha($text, 0.87);
-    --jp-ui-font-color2: alpha($text, 0.54);
-    --jp-ui-font-color3: alpha($text, 0.38);
-    --jp-ui-inverse-font-color0: $crust;
-    --jp-ui-inverse-font-color1: alpha($crust, 0.80);
-    --jp-ui-inverse-font-color2: alpha($crust, 0.50);
-    --jp-ui-inverse-font-color3: alpha($crust, 0.30);
-    --jp-content-font-color0: $text;
-    --jp-content-font-color1: $text;
-    --jp-content-font-color2: alpha($text, 0.70);
-    --jp-content-font-color3: alpha($text, 0.50);
-    --jp-content-link-color: var(--color-scale-blue-3);
-    --jp-layout-color0: $base !important;
+    --jp-ui-font-color0: @text;
+    --jp-ui-font-color1: fadeout(@text, 13%);
+    --jp-ui-font-color2: fadeout(@text, 46%);
+    --jp-ui-font-color3: fadeout(@text, 72%);
+    --jp-ui-inverse-font-color0: @crust;
+    --jp-ui-inverse-font-color1: fadeout(@crust, 20%);
+    --jp-ui-inverse-font-color2: fadeout(@crust, 50%);
+    --jp-ui-inverse-font-color3: fadeout(@crust, 70%);
+    --jp-content-font-color0: @text;
+    --jp-content-font-color1: @text;
+    --jp-content-font-color2: fadeout(@text, 30%);
+    --jp-content-font-color3: fadeout(@text, 50%);
+    --jp-content-link-color: @sapphire;
+    --jp-layout-color0: @base !important;
     --jp-layout-color1: var(--color-scale-gray-9);
     --jp-layout-color2: var(--color-scale-gray-8);
     --jp-layout-color3: var(--color-scale-gray-7);
@@ -1012,19 +1024,19 @@
     --jp-info-color3: var(--color-scale-blue-1);
     --jp-cell-editor-border-color: var(--color-scale-gray-7);
     --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3);
-    --jp-cell-prompt-not-active-font-color: alpha($text, 0.5);
+    --jp-cell-prompt-not-active-font-color: fadeout(@text, 50%);
     --jp-cell-inprompt-font-color: var(--color-scale-blue-6);
     --jp-cell-outprompt-font-color: var(--color-scale-coral-6);
-    --jp-notebook-multiselected-color: alpha($overlay2, 0.24);
-    --jp-rendermime-error-background: alpha($red, 0.28);
+    --jp-notebook-multiselected-color: fadeout(@overlay2, 86%);
+    --jp-rendermime-error-background: fadeout(@red, 82%);
     --jp-rendermime-table-row-background: var(--color-scale-gray-9);
-    --jp-rendermime-table-row-hover-background: alpha($surface2, 0.24);
-    --jp-dialog-background: alpha($crust, 0.6);
-    --jp-toolbar-box-shadow: 0px 0px 2px 0px alpha($crust, 0.8);
+    --jp-rendermime-table-row-hover-background: fadeout(@surface2, 86%);
+    --jp-dialog-background: fadeout(@crust, 40%);
+    --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@crust, 20%);
     --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3);
     --jp-input-background: var(--color-scale-gray-8);
-    --jp-input-active-box-shadow-color: alpha($blue, 0.3);
-    --jp-editor-selected-focused-background: alpha($blue, 0.24);
+    --jp-input-active-box-shadow-color: fadeout(@blue, 70%);
+    --jp-editor-selected-focused-background: fadeout(@blue, 86%);
     --jp-mirror-editor-keyword-color: var(--color-scale-green-5);
     --jp-mirror-editor-atom-color: var(--color-scale-blue-3);
     --jp-mirror-editor-number-color: var(--color-scale-green-4);
@@ -1034,11 +1046,11 @@
     --jp-mirror-editor-variable-3-color: var(--color-scale-green-6);
     --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4);
     --jp-mirror-editor-property-color: var(--color-scale-blue-4);
-    --jp-mirror-editor-operator-color: $mauve;
-    --jp-mirror-editor-comment-color: $Subtext0;
-    --jp-mirror-editor-string-color: $peach;
+    --jp-mirror-editor-operator-color: @mauve;
+    --jp-mirror-editor-comment-color: @subtext0;
+    --jp-mirror-editor-string-color: @peach;
     --jp-mirror-editor-string-2-color: var(--color-scale-purple-3);
-    --jp-mirror-editor-meta-color: $mauve;
+    --jp-mirror-editor-meta-color: @mauve;
     --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5);
     --jp-mirror-editor-builtin-color: var(--color-scale-green-6);
     --jp-mirror-editor-bracket-color: var(--color-scale-gray-2);
@@ -1047,15 +1059,14 @@
     --jp-mirror-editor-header-color: var(--color-scale-blue-5);
     --jp-mirror-editor-quote-color: var(--color-scale-green-3);
     --jp-mirror-editor-link-color: var(--color-scale-blue-7);
-    --jp-mirror-editor-error-color: $red;
+    --jp-mirror-editor-error-color: @red;
     --jp-mirror-editor-hr-color: var(--color-scale-gray-8);
     --jp-vega-background: var(--color-scale-gray-4);
-    --jp-search-selected-match-background-color: $yellow;
-    --jp-search-selected-match-color: $crust;
+    --jp-search-selected-match-background-color: @yellow;
+    --jp-search-selected-match-color: @crust;
     --jp-icon-contrast-color0: var(--color-scale-purple-6);
     --jp-icon-contrast-color1: var(--color-scale-green-6);
     --jp-icon-contrast-color2: var(--color-scale-pink-6);
     --jp-icon-contrast-color3: var(--color-scale-blue-6);
   }
-
-}
\ No newline at end of file
+}