From b1a239cdc40e39348e214ff6e13366ca1f2ea789 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Fri, 10 May 2024 23:19:35 +0500
Subject: [PATCH] Improve how icon colors are defined

- define specific colors for icons for themes
- fix related contrast issues on Forgejo dark theme
---
 web_src/css/base.css                       | 14 ++++++++++++++
 web_src/css/themes/theme-forgejo-dark.css  |  7 ++++---
 web_src/css/themes/theme-forgejo-light.css |  7 ++++---
 web_src/css/themes/theme-gitea-dark.css    |  4 ++++
 web_src/css/themes/theme-gitea-light.css   |  4 ++++
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3d91586934..a43ba031e0 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1143,6 +1143,20 @@ overflow-menu .ui.label {
   color: var(--color-secondary-dark-2) !important;
 }
 
+/* colors of colorful icons */
+svg.text.green,
+.text.green svg {
+  color: var(--color-icon-green) !important;
+}
+svg.text.red,
+.text.red svg {
+  color: var(--color-icon-red) !important;
+}
+svg.text.purple,
+.text.purple svg {
+  color: var(--color-icon-purple) !important;
+}
+
 .oauth2-authorize-application-box {
   margin-top: 3em !important;
 }
diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css
index 95d35ddec0..2093e8b768 100644
--- a/web_src/css/themes/theme-forgejo-dark.css
+++ b/web_src/css/themes/theme-forgejo-dark.css
@@ -178,6 +178,10 @@
   --color-orange-badge-bg: #ea580c22;
   --color-orange-badge-hover-bg: #ea580c44;
   --color-git: #f05133;
+  /* Icon colors (PR/Issue/...) */
+  --color-icon-green: #3fb950;
+  --color-icon-red: #f85149;
+  --color-icon-purple: #aa76ff;
   /* target-based colors */
   --color-body: var(--steel-800);
   --color-box-header: var(--steel-700);
@@ -262,9 +266,6 @@
 .emoji[aria-label="musical notes"] {
   filter: invert(100%) hue-rotate(180deg);
 }
-.text.green.svg {
-  color: var(--color-green-light) !important;
-}
 i.grey.icon.icon.icon.icon {
   color: var(--steel-350) !important;
 }
diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css
index ea988e67fa..466e01510a 100644
--- a/web_src/css/themes/theme-forgejo-light.css
+++ b/web_src/css/themes/theme-forgejo-light.css
@@ -195,6 +195,10 @@
   --color-orange-badge-bg: #ea580c22;
   --color-orange-badge-hover-bg: #ea580c44;
   --color-git: #f05133;
+  /* Icon colors (PR/Issue/...) */
+  --color-icon-green: var(--color-green-light);
+  --color-icon-red: var(--color-red-light);
+  --color-icon-purple: var(--color-purple-light);
   /* target-based colors */
   --color-body: #fff;
   --color-box-header: var(--zinc-100);
@@ -255,9 +259,6 @@
   accent-color: var(--color-accent);
   color-scheme: light;
 }
-.text.green.svg {
-  color: var(--color-green-light) !important;
-}
 .ui.secondary.vertical.menu {
   border-radius: 0.28571429rem !important;
   overflow: hidden;
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index c74f334c2d..325d31ea14 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -179,6 +179,10 @@
   --color-orange-badge-bg: #f2711c1a;
   --color-orange-badge-hover-bg: #f2711c4d;
   --color-git: #f05133;
+  /* Icon colors (PR/Issue/...) */
+  --color-icon-green: var(--color-green);
+  --color-icon-red: var(--color-red);
+  --color-icon-purple: var(--color-purple);
   /* target-based colors */
   --color-body: #1c1f25;
   --color-box-header: #1a1d1f;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 01dd8ba4f7..695645aaa5 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -179,6 +179,10 @@
   --color-orange-badge-bg: #f2711c1a;
   --color-orange-badge-hover-bg: #f2711c4d;
   --color-git: #f05133;
+  /* Icon colors (PR/Issue/...) */
+  --color-icon-green: var(--color-green);
+  --color-icon-red: var(--color-red);
+  --color-icon-purple: var(--color-purple);
   /* target-based colors */
   --color-body: #ffffff;
   --color-box-header: #f1f3f5;