Merge pull request 'Improve how icon colors are defined' (#3702) from 0ko/forgejo:ui-icon-contrast into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3702
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>

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;
 }

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);
@@ -264,9 +268,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;
 }

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);
@@ -258,9 +262,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;

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;

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;