From fd5f6f60cc014c10a4c511db027d0ddf0db1fa1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zoe=CC=88=20Bijl?= <code@moiety.me>
Date: Tue, 14 Oct 2025 18:53:13 +0200
Subject: [PATCH] [bugfix] improve icon badge contrast

The icon badge text had a contrast of below 3:1 in some cases. This puts it at 5:1.
---
 app/javascript/flavours/glitch/styles/gts.scss              | 6 +++---
 app/javascript/flavours/glitch/styles/gts/colors.scss       | 4 ++++
 .../flavours/glitch/styles/mastodon-light/colors.scss       | 5 +++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/gts.scss b/app/javascript/flavours/glitch/styles/gts.scss
index 75d3e69cd..de3ca59fc 100644
--- a/app/javascript/flavours/glitch/styles/gts.scss
+++ b/app/javascript/flavours/glitch/styles/gts.scss
@@ -37,12 +37,12 @@
     min-width: var(--size);
     height: var(--size);
     box-sizing: border-box;
-    border: 2px solid darken($ui-base-color, 7%);
+    border: 2px solid var(--color-bg);
     border-radius: 50%;
-    color: $primary-text-color;
+    color: var(--color-badge-fg);
     font-size: 10px;
     font-weight: 500;
-    background: $ui-highlight-color;
+    background: var(--color-badge-bg);
   }
 
   &__issue-badge {
diff --git a/app/javascript/flavours/glitch/styles/gts/colors.scss b/app/javascript/flavours/glitch/styles/gts/colors.scss
index d92645c69..6b4e5eb29 100644
--- a/app/javascript/flavours/glitch/styles/gts/colors.scss
+++ b/app/javascript/flavours/glitch/styles/gts/colors.scss
@@ -38,6 +38,10 @@
     --color-ui-base: ;
     --color-ui-bg: ;
 
+    /* Badge */
+    --color-badge-bg: #5758ff;
+    --color-badge-fg: var(--color-fg);
+
     /* Button */
     --color-button-fg-destructive: red;
 
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/colors.scss b/app/javascript/flavours/glitch/styles/mastodon-light/colors.scss
index e9a0264bc..2fd578235 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/colors.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/colors.scss
@@ -8,6 +8,7 @@
   --color-lines: #c0cdd9;
 
   /* Accent */
+  --color-accent: #4d4eff;
   --color-accent-bg: #d9e1e8;
   --color-accent-fg: #282c37;
   --color-accent-lines: #c0cdd9;
@@ -20,6 +21,10 @@
   --color-drawer-bg--hover: #ccd7e0;
   --color-drawer-fg: var(--color-fg);
 
+  /* Badge */
+  --color-badge-bg: var(--color-accent);
+  --color-badge-fg: #fff;
+
   /* Notifications */
   --color-notifications-bg--active: #fff;
   --color-notifications-bg--hover: #fff9;