From 6a8645554cedb2b272e1f705a7b939e5e2cabecd Mon Sep 17 00:00:00 2001
From: june <me@koi.rip>
Date: Sun, 8 Mar 2026 14:39:00 +0100
Subject: [PATCH 1/6] fix: red-on-red buttons

---
 src/_theme.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/_theme.scss b/src/_theme.scss
index 88bb02a..9d2c5d1 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -156,10 +156,10 @@ $lvl3: if($isDark, $base, $crust);
   --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: #{color.change($red, $alpha: 0.15)};
   --color-error-bg-active: #{ctx_lighten($red, 5%)};
   --color-error-bg-hover: #{ctx_lighten($red, 10%)};
-  --color-error-text: #{$lvl1};
+  --color-error-text: #{$text};
   --color-success-border: #{ctx_lighten($green, 10%)};
   --color-success-bg: #{$green};
   --color-success-text: #{$lvl1};

From 52866e1b97e384ec83234f00dc2d148719973e9d Mon Sep 17 00:00:00 2001
From: Toria <ninetailedtori@uwu.gal>
Date: Fri, 24 Apr 2026 16:47:58 +0100
Subject: [PATCH 2/6] Make badge states consistent and clearer from the
 existing method. fixes a few bugs that are caused by having solid colour
 buttons where text same as bg etc, as well as being more in line with
 upstream, such as codeberg checksum badges, deletion buttons being clearer
 and easier to see, etc.

Solves: #84.

# Conflicts:
#	src/_theme.scss
---
 src/_theme.scss | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/_theme.scss b/src/_theme.scss
index 9d2c5d1..6e97557 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -181,6 +181,33 @@ $lvl3: if($isDark, $base, $crust);
   --color-orange-badge: #{$peach};
   --color-orange-badge-bg: #{$lvl1};
   --color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)};
+
+  --color-error-border: $red;
+  --color-error-bg: color.change($red, $alpha: 30%);
+  --color-error-bg-active: color.change($red, $alpha: 60%);
+  --color-error-bg-hover: color.change($red, $alpha: 45%);
+  --color-error-text: $red;
+  --color-success-border: $green;
+  --color-success-bg: color.change($green, $alpha: 30%);
+  --color-success-text: $green;
+  --color-warning-border: $peach;
+  --color-warning-bg: color.change($peach, $alpha: 30%);
+  --color-warning-text: $peach;
+  --color-info-border: $teal;
+  --color-info-bg: color.change($teal, $alpha: 30%);
+  --color-info-text: $teal;
+  --color-red-badge: $red;
+  --color-red-badge-bg: color.change($red, $alpha: 20%);
+  --color-red-badge-hover-bg: color.change($red, $alpha: 40%);
+  --color-green-badge: $green;
+  --color-green-badge-bg: color.change($green, $alpha: 20%);
+  --color-green-badge-hover-bg: color.change($green, $alpha: 40%);
+  --color-yellow-badge: $yellow;
+  --color-yellow-badge-bg: color.change($yellow, $alpha: 20%);
+  --color-yellow-badge-hover-bg: color.change($yellow, $alpha: 40%);
+  --color-orange-badge: $peach;
+  --color-orange-badge-bg: color.change($peach, $alpha: 20%);
+  --color-orange-badge-hover-bg: color.change($peach, $alpha: 40%);
   --color-git: #{$peach};
   --color-highlight-bg: #{color.change($yellow, $alpha: 0.15)};
 

From dbd704b43fffcb3c60041b23bab919e1a6322a8b Mon Sep 17 00:00:00 2001
From: Toria <ninetailedtori@uwu.gal>
Date: Fri, 24 Apr 2026 17:04:15 +0100
Subject: [PATCH 3/6] Match #84 for merge!

---
 src/_theme.scss | 72 +++++++++++++++++++------------------------------
 1 file changed, 27 insertions(+), 45 deletions(-)

diff --git a/src/_theme.scss b/src/_theme.scss
index 6e97557..2e7ef75 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -155,61 +155,43 @@ $lvl3: if($isDark, $base, $crust);
   --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: #{color.change($red, $alpha: 0.15)};
-  --color-error-bg-active: #{ctx_lighten($red, 5%)};
-  --color-error-bg-hover: #{ctx_lighten($red, 10%)};
-  --color-error-text: #{$text};
-  --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-error-border: $red;
-  --color-error-bg: color.change($red, $alpha: 30%);
-  --color-error-bg-active: color.change($red, $alpha: 60%);
-  --color-error-bg-hover: color.change($red, $alpha: 45%);
   --color-error-text: $red;
-  --color-success-border: $green;
-  --color-success-bg: color.change($green, $alpha: 30%);
+  --color-error-bg: ctx_lighten($red, 15%);
+  --color-error-bg-hover: ctx_lighten($red, 30%);
+  --color-error-bg-active: ctx_lighten($red, 45%);
+  --color-error-border: $red;
+
   --color-success-text: $green;
-  --color-warning-border: $peach;
-  --color-warning-bg: color.change($peach, $alpha: 30%);
+  --color-success-bg: ctx_lighten($green, 15%);
+  --color-success-border: $green;
+
   --color-warning-text: $peach;
-  --color-info-border: $teal;
-  --color-info-bg: color.change($teal, $alpha: 30%);
+  --color-warning-bg: ctx_lighten($peach, 15%);
+  --color-warning-border: $peach;
+
   --color-info-text: $teal;
+  --color-info-bg: ctx_lighten($teal, 15%);
+  --color-info-border: $teal;
+
   --color-red-badge: $red;
-  --color-red-badge-bg: color.change($red, $alpha: 20%);
-  --color-red-badge-hover-bg: color.change($red, $alpha: 40%);
+  --color-red-badge-bg: ctx_lighten($red, 15%);
+  --color-red-badge-hover-bg: ctx_lighten($red, 30%);
+
   --color-green-badge: $green;
-  --color-green-badge-bg: color.change($green, $alpha: 20%);
-  --color-green-badge-hover-bg: color.change($green, $alpha: 40%);
+  --color-green-badge-bg: ctx_lighten($green, 15%);
+  --color-green-badge-hover-bg: ctx_lighten($green, 30%);
+
   --color-yellow-badge: $yellow;
-  --color-yellow-badge-bg: color.change($yellow, $alpha: 20%);
-  --color-yellow-badge-hover-bg: color.change($yellow, $alpha: 40%);
+  --color-yellow-badge-bg: ctx_lighten($yellow, 15%);
+  --color-yellow-badge-hover-bg: ctx_lighten($yellow, 30%);
+
   --color-orange-badge: $peach;
-  --color-orange-badge-bg: color.change($peach, $alpha: 20%);
-  --color-orange-badge-hover-bg: color.change($peach, $alpha: 40%);
+  --color-orange-badge-bg: ctx_lighten($peach, 15%);
+  --color-orange-badge-hover-bg: ctx_lighten($peach, 30%);
+
   --color-git: #{$peach};
-  --color-highlight-bg: #{color.change($yellow, $alpha: 0.15)};
+  --color-highlight-bg: #{ctx_lighten($yellow, 15%)};
 
   /* target-based colors */
   --color-body: #{$lvl1};

From 3c8d88fc0c7443fe1414fd10d2750ff4884c1f79 Mon Sep 17 00:00:00 2001
From: Toria <ninetailedtori@uwu.gal>
Date: Sun, 26 Apr 2026 17:02:01 +0100
Subject: [PATCH 4/6] Quickfixes.

---
 src/_theme.scss | 66 ++++++++++++++++++++++++-------------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/_theme.scss b/src/_theme.scss
index 2e7ef75..40b5a7b 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -156,39 +156,39 @@ $lvl3: if($isDark, $base, $crust);
   --color-diff-added-row-border: #{color.change($green, $alpha: 0.07)};
   --color-diff-inactive: #{$overlay2};
 
-  --color-error-text: $red;
-  --color-error-bg: ctx_lighten($red, 15%);
-  --color-error-bg-hover: ctx_lighten($red, 30%);
-  --color-error-bg-active: ctx_lighten($red, 45%);
-  --color-error-border: $red;
-
-  --color-success-text: $green;
-  --color-success-bg: ctx_lighten($green, 15%);
-  --color-success-border: $green;
-
-  --color-warning-text: $peach;
-  --color-warning-bg: ctx_lighten($peach, 15%);
-  --color-warning-border: $peach;
-
-  --color-info-text: $teal;
-  --color-info-bg: ctx_lighten($teal, 15%);
-  --color-info-border: $teal;
-
-  --color-red-badge: $red;
-  --color-red-badge-bg: ctx_lighten($red, 15%);
-  --color-red-badge-hover-bg: ctx_lighten($red, 30%);
-
-  --color-green-badge: $green;
-  --color-green-badge-bg: ctx_lighten($green, 15%);
-  --color-green-badge-hover-bg: ctx_lighten($green, 30%);
-
-  --color-yellow-badge: $yellow;
-  --color-yellow-badge-bg: ctx_lighten($yellow, 15%);
-  --color-yellow-badge-hover-bg: ctx_lighten($yellow, 30%);
-
-  --color-orange-badge: $peach;
-  --color-orange-badge-bg: ctx_lighten($peach, 15%);
-  --color-orange-badge-hover-bg: ctx_lighten($peach, 30%);
+  --color-error-text: #{$red};
+  --color-error-bg: #{ctx_lighten($red, 15%)};
+  --color-error-bg-hover: #{ctx_lighten($red, 30%)};
+  --color-error-bg-active: #{ctx_lighten($red, 45%)};
+  --color-error-border: #{$red};
+
+  --color-success-text: #{$green};
+  --color-success-bg: #{ctx_lighten($green, 15%)};
+  --color-success-border: #{$green};
+
+  --color-warning-text: #{$peach};
+  --color-warning-bg: #{ctx_lighten($peach, 15%)};
+  --color-warning-border: #{$peach};
+
+  --color-info-text: #{$teal};
+  --color-info-bg: #{ctx_lighten($teal, 15%)};
+  --color-info-border: #{$teal};
+
+  --color-red-badge: #{$red};
+  --color-red-badge-bg: #{ctx_lighten($red, 15%)};
+  --color-red-badge-hover-bg: #{ctx_lighten($red, 30%)};
+
+  --color-green-badge: #{$green};
+  --color-green-badge-bg: #{ctx_lighten($green, 15%)};
+  --color-green-badge-hover-bg: #{ctx_lighten($green, 30%)};
+
+  --color-yellow-badge: #{$yellow};
+  --color-yellow-badge-bg: #{ctx_lighten($yellow, 15%)};
+  --color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 30%)};
+
+  --color-orange-badge: #{$peach};
+  --color-orange-badge-bg: #{ctx_lighten($peach, 15%)};
+  --color-orange-badge-hover-bg: #{ctx_lighten($peach, 30%)};
 
   --color-git: #{$peach};
   --color-highlight-bg: #{ctx_lighten($yellow, 15%)};

From a8d3e85625edc614442ddf96d922ff3ccc90c611 Mon Sep 17 00:00:00 2001
From: Toria <ninetailedtori@uwu.gal>
Date: Sun, 26 Apr 2026 17:50:36 +0100
Subject: [PATCH 5/6] Quick swap ctx_lighten for color.change where necessary.

Signed-off-by: Toria <ninetailedtori@uwu.gal>
---
 src/_theme.scss | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/_theme.scss b/src/_theme.scss
index 40b5a7b..48f292f 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -24,6 +24,7 @@ $lvl3: if($isDark, $base, $crust);
   --color-primary: #{$accent};
   --color-primary-contrast: #{$lvl1};
   --color-primary-hover: #{ctx_lighten($accent, 5%)};
+  --color-primary-active: #{ctx_lighten($accent, 10%)};
 
   --color-primary-dark-1: #{ctx_lighten($accent, 3%)};
   --color-primary-dark-2: #{ctx_lighten($accent, 6%)};
@@ -157,41 +158,41 @@ $lvl3: if($isDark, $base, $crust);
   --color-diff-inactive: #{$overlay2};
 
   --color-error-text: #{$red};
-  --color-error-bg: #{ctx_lighten($red, 15%)};
-  --color-error-bg-hover: #{ctx_lighten($red, 30%)};
-  --color-error-bg-active: #{ctx_lighten($red, 45%)};
+  --color-error-bg: #{color.change($red, $alpha: 15%)};
+  --color-error-bg-hover: #{color.change($red, $alpha: 30%)};
+  --color-error-bg-active: #{color.change($red, $alpha: 45%)};
   --color-error-border: #{$red};
 
   --color-success-text: #{$green};
-  --color-success-bg: #{ctx_lighten($green, 15%)};
+  --color-success-bg: #{color.change($green, $alpha: 15%)};
   --color-success-border: #{$green};
 
   --color-warning-text: #{$peach};
-  --color-warning-bg: #{ctx_lighten($peach, 15%)};
+  --color-warning-bg: #{color.change($peach, $alpha: 15%)};
   --color-warning-border: #{$peach};
 
   --color-info-text: #{$teal};
-  --color-info-bg: #{ctx_lighten($teal, 15%)};
+  --color-info-bg: #{color.change($teal, $alpha: 15%)};
   --color-info-border: #{$teal};
 
   --color-red-badge: #{$red};
-  --color-red-badge-bg: #{ctx_lighten($red, 15%)};
-  --color-red-badge-hover-bg: #{ctx_lighten($red, 30%)};
+  --color-red-badge-bg: #{color.change($red, $alpha: 15%)};
+  --color-red-badge-hover-bg: #{color.change($red, $alpha: 30%)};
 
   --color-green-badge: #{$green};
-  --color-green-badge-bg: #{ctx_lighten($green, 15%)};
-  --color-green-badge-hover-bg: #{ctx_lighten($green, 30%)};
+  --color-green-badge-bg: #{color.change($green, $alpha: 15%)};
+  --color-green-badge-hover-bg: #{color.change($green, $alpha: 30%)};
 
   --color-yellow-badge: #{$yellow};
-  --color-yellow-badge-bg: #{ctx_lighten($yellow, 15%)};
-  --color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 30%)};
+  --color-yellow-badge-bg: #{color.change($yellow, $alpha: 15%)};
+  --color-yellow-badge-hover-bg: #{color.change($yellow, $alpha: 30%)};
 
   --color-orange-badge: #{$peach};
-  --color-orange-badge-bg: #{ctx_lighten($peach, 15%)};
-  --color-orange-badge-hover-bg: #{ctx_lighten($peach, 30%)};
+  --color-orange-badge-bg: #{color.change($peach, $alpha: 15%)};
+  --color-orange-badge-hover-bg: #{color.change($peach, $alpha: 30%)};
 
   --color-git: #{$peach};
-  --color-highlight-bg: #{ctx_lighten($yellow, 15%)};
+  --color-highlight-bg: #{color.change($yellow, $alpha: 15%)};
 
   /* target-based colors */
   --color-body: #{$lvl1};
@@ -223,8 +224,8 @@ $lvl3: if($isDark, $base, $crust);
     calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
   );
   --color-light-border: #{$surface2};
-  --color-hover: #{color.change($overlay0, $alpha: 0.2)};
-  --color-active: #{color.change($text, $alpha: 0.1)};
+  --color-hover: #{color.change($overlay0, $alpha: 15%)};
+  --color-active: #{color.change($text, $alpha: 30%)};
   --color-menu: #{$surface0};
   --color-card: #{$surface0};
   --color-markup-table-row: #{color.change($text, $alpha: 0.02)};
@@ -251,8 +252,8 @@ $lvl3: if($isDark, $base, $crust);
   --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-label-hover-bg: #{ctx_lighten($accent, 5%)};
+  --color-label-active-bg: #{ctx_lighten($accent, 10%)};
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-5);
   --color-active-line: #{$surface1};

From 54aa0a7a15159a66c69bd496e2d0416e9af2b690 Mon Sep 17 00:00:00 2001
From: Toria <ninetailedtori@uwu.gal>
Date: Sun, 26 Apr 2026 18:02:30 +0100
Subject: [PATCH 6/6] Little less violent colour change.

Signed-off-by: Toria <ninetailedtori@uwu.gal>
---
 src/_theme.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/_theme.scss b/src/_theme.scss
index 48f292f..902ff85 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -23,8 +23,8 @@ $lvl3: if($isDark, $base, $crust);
 
   --color-primary: #{$accent};
   --color-primary-contrast: #{$lvl1};
-  --color-primary-hover: #{ctx_lighten($accent, 5%)};
-  --color-primary-active: #{ctx_lighten($accent, 10%)};
+  --color-primary-hover: #{ctx_lighten($accent, 3%)};
+  --color-primary-active: #{ctx_lighten($accent, 6%)};
 
   --color-primary-dark-1: #{ctx_lighten($accent, 3%)};
   --color-primary-dark-2: #{ctx_lighten($accent, 6%)};
@@ -213,7 +213,8 @@ $lvl3: if($isDark, $base, $crust);
   --color-input-border: #{$surface1};
   --color-input-border-hover: #{$surface2};
   --color-nav-bg: #{$lvl2};
-  --color-nav-hover-bg: var(--color-hover);
+  --color-nav-hover-bg: #{ctx_lighten($lvl2, 3%)};
+  --color-nav-active-bg: #{ctx_lighten($lvl2, 6%)};
   --color-navbar: #{$lvl2};
   --color-navbar-transparent: #{color.change($lvl1, $alpha: 0)};
   --color-light: #{color.change($surface2, $alpha: 0.3)};
@@ -252,8 +253,8 @@ $lvl3: if($isDark, $base, $crust);
   --color-header-wrapper-transparent: #{color.change($lvl2, $alpha: 0)};
   --color-label-text: #{$crust};
   --color-label-bg: #{$accent};
-  --color-label-hover-bg: #{ctx_lighten($accent, 5%)};
-  --color-label-active-bg: #{ctx_lighten($accent, 10%)};
+  --color-label-hover-bg: #{ctx_lighten($accent, 3%)};
+  --color-label-active-bg: #{ctx_lighten($accent, 6%)};
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-5);
   --color-active-line: #{$surface1};