From 2e32da4419e2cbb6cc7d2cab65b03e14fdb75db6 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Thu, 9 Nov 2023 22:33:29 +0100
Subject: [PATCH] Update Forgejo theme (squash)

- Incorporate changes from 79a4c80f8d81e67371f6ff1f8d55bd003ab01208 into the Forgejo themes.
- Fix that there's no focus or active coloring on primary and secondary
buttons for Forgejo themes caused by
023e937141dd891bce3370c869d4db2c60f971ed that moved variablse from
base.css (shared) to the themes.
- Extend hack to make red buttons darker on dark Forgejo theme to
include active styling and remove the unnecessary `!important`.
---
 web_src/css/themes/theme-forgejo-dark.css  | 40 +++++++++++++++++++---
 web_src/css/themes/theme-forgejo-light.css | 30 ++++++++++++++++
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css
index e3b031ed2e..1700bc0079 100644
--- a/web_src/css/themes/theme-forgejo-dark.css
+++ b/web_src/css/themes/theme-forgejo-dark.css
@@ -44,6 +44,8 @@
   --color-primary-alpha-70: #ea580cb3;
   --color-primary-alpha-80: #ea580ccc;
   --color-primary-alpha-90: #ea580ce1;
+  --color-primary-hover: var(--color-primary-light-1);
+  --color-primary-active: var(--color-primary-light-2);
   --color-secondary: var(--steel-700);
   --color-secondary-dark-1: var(--steel-550);
   --color-secondary-dark-2: var(--steel-500);
@@ -71,6 +73,8 @@
   --color-secondary-alpha-70: #2B3642b3;
   --color-secondary-alpha-80: #2B3642cc;
   --color-secondary-alpha-90: #2B3642e1;
+  --color-secondary-hover: var(--color-secondary-light-1);
+  --color-secondary-active: var(--color-secondary-light-2);
   /* colors */
   --color-red: #b91c1c;
   --color-orange: #ea580c;
@@ -99,6 +103,32 @@
   --color-brown-light: #94674a;
   --color-grey-light: var(--steel-300);
   --color-black-light: #1f2937;
+  /* dark 1 variants produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-dark-1: #a71919;
+  --color-orange-dark-1: #d34f0b;
+  --color-yellow-dark-1: #b67c04;
+  --color-olive-dark-1: #839311;
+  --color-green-dark-1: #137337;
+  --color-teal-dark-1: #0c857a;
+  --color-blue-dark-1: #1554e0;
+  --color-violet-dark-1: #6a1feb;
+  --color-purple-dark-1: #8519e7;
+  --color-pink-dark-1: #c7216b;
+  --color-brown-dark-1: #94674a;
+  --color-black-dark-1: #0f1623;
+    /* dark 2 variants produced via Sass scale-color(color, $lightness: -20%) */
+  --color-red-dark-2: #941616;
+  --color-orange-dark-2: #bb460a;
+  --color-yellow-dark-2: #ca8a04;
+  --color-olive-dark-2: #91a313;
+  --color-green-dark-2: #15803d;
+  --color-teal-dark-2: #0a766d;
+  --color-blue-dark-2: #2563eb;
+  --color-violet-dark-2: #5c14d8;
+  --color-purple-dark-2: #7c3aed;
+  --color-pink-dark-2: #b11d5f;
+  --color-brown-dark-2: #a47252;
+  --color-black-dark-2: #111827;
   /* other colors */
   --color-gold: #b1983b;
   --color-white: #ffffff;
@@ -226,13 +256,15 @@ i.grey.icon.icon.icon.icon {
 }
 .ui.red.button,
 .ui.negative.button {
-  background-color: #7f1d1d !important;
-  color: #fff !important;
-  border-color: var(--color-light-border) !important;
+  background-color: #7f1d1d;
 }
 .ui.red.button:hover,
 .ui.negative.button:hover {
-  background-color: #991b1b !important;
+  background-color: #991b1b;
+}
+.ui.red.button:active,
+.ui.negative.button:active {
+  background-color: #aa1919;
 }
 .ui.secondary.vertical.menu {
   border-radius: 0.28571429rem !important;
diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css
index 7fc09a7994..9ea2a4b166 100644
--- a/web_src/css/themes/theme-forgejo-light.css
+++ b/web_src/css/themes/theme-forgejo-light.css
@@ -59,6 +59,8 @@
   --color-primary-alpha-70: #c2410cb3;
   --color-primary-alpha-80: #c2410ccc;
   --color-primary-alpha-90: #c2410ce1;
+  --color-primary-hover: var(--color-primary-dark-2);
+  --color-primary-active: var(--color-primary-dark-4);
   --color-secondary: var(--zinc-200);
   --color-secondary-dark-1: var(--zinc-200);
   --color-secondary-dark-2: var(--zinc-300);
@@ -86,6 +88,8 @@
   --color-secondary-alpha-70: #d4d4d8b3;
   --color-secondary-alpha-80: #d4d4d8cc;
   --color-secondary-alpha-90: #d4d4d8e1;
+  --color-secondary-hover: var(--color-secondary-dark-2);
+  --color-secondary-active: var(--color-secondary-dark-4);
   /* colors */
   --color-red: #dc2626;
   --color-orange: #ea580c;
@@ -114,6 +118,32 @@
   --color-brown-light: #94674a;
   --color-grey-light: #6b7280;
   --color-black-light: #181818;
+  /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-dark-1: #c82020;
+  --color-orange-dark-1: #d34f0b;
+  --color-yellow-dark-1: #b67c04;
+  --color-olive-dark-1: #839311;
+  --color-green-dark-1: #137337;
+  --color-teal-dark-1: #0c857a;
+  --color-blue-dark-1: #1554e0;
+  --color-violet-dark-1: #6a1feb;
+  --color-purple-dark-1: #8519e7;
+  --color-pink-dark-1: #c7216b;
+  --color-brown-dark-1: #94674a;
+  --color-black-dark-1: #000000;
+  /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
+  --color-red-dark-2: #b21d1d;
+  --color-orange-dark-2: #bb460a;
+  --color-yellow-dark-2: #a26e03;
+  --color-olive-dark-2: #74820f;
+  --color-green-dark-2: #116631;
+  --color-teal-dark-2: #0a766d;
+  --color-blue-dark-2: #124bc7;
+  --color-violet-dark-2: #5c14d8;
+  --color-purple-dark-2: #7715cf;
+  --color-pink-dark-2: #b11d5f;
+  --color-brown-dark-2: #835b42;
+  --color-black-dark-2: #000000;
   /* other colors */
   --color-gold: #b1983b;
   --color-white: #ffffff;