From aed1622766843a093ac586c8d8a77ba85646d1ff Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 12 Nov 2022 15:30:52 +0100
Subject: [PATCH] Simplify text color selectors and tweak arc-green colors
 (#21784)

Move the text color rules out of the unneeded `.ui` block, add missing
colors, tweak colors on arc-green to be more readable (red was
particulary bad to read).

Also, this removes the previous inheritance of link colors. I think
links should always be in primary color and if they are to be
discolored, the color should be set on them explicitely.

<img width="165" alt="Screenshot 2022-11-12 at 13 28 30"
src="https://user-images.githubusercontent.com/115237/201474098-700d9fed-3133-43c7-b57e-d4cc5c2795cb.png">

<img width="152" alt="Screenshot 2022-11-12 at 13 18 48"
src="https://user-images.githubusercontent.com/115237/201474156-b6de4cb5-bce8-4553-b3d4-8365aff9a3a7.png">

HTML to test with:

```html
<div class="text red">some text with <a href="#foo">a link</a>.</div>
<div class="text orange">some text with <a href="#foo">a link</a>.</div>
<div class="text yellow">some text with <a href="#foo">a link</a>.</div>
<div class="text olive">some text with <a href="#foo">a link</a>.</div>
<div class="text green">some text with <a href="#foo">a link</a>.</div>
<div class="text teal">some text with <a href="#foo">a link</a>.</div>
<div class="text blue">some text with <a href="#foo">a link</a>.</div>
<div class="text violet">some text with <a href="#foo">a link</a>.</div>
<div class="text purple">some text with <a href="#foo">a link</a>.</div>
<div class="text pink">some text with <a href="#foo">a link</a>.</div>
<div class="text brown">some text with <a href="#foo">a link</a>.</div>
<div class="text grey">some text with <a href="#foo">a link</a>.</div>
---
 web_src/less/_base.less                  | 84 +++++-------------------
 web_src/less/themes/theme-arc-green.less | 38 +++++------
 2 files changed, 35 insertions(+), 87 deletions(-)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 43d8d711aa..dc0e69c6d1 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1301,6 +1301,22 @@ a.ui.card:hover,
   visibility: hidden;
 }
 
+.text.red { color: var(--color-red) !important; }
+.text.orange { color: var(--color-orange) !important; }
+.text.yellow { color: var(--color-yellow) !important; }
+.text.olive { color: var(--color-olive) !important; }
+.text.green { color: var(--color-green) !important; }
+.text.teal { color: var(--color-teal) !important; }
+.text.blue { color: var(--color-blue) !important; }
+.text.violet { color: var(--color-violet) !important; }
+.text.purple { color: var(--color-purple) !important; }
+.text.pink { color: var(--color-pink) !important; }
+.text.brown { color: var(--color-brown) !important; }
+.text.black { color: var(--color-text) !important; }
+.text.grey { color: var(--color-text-light) !important; }
+.text.light.grey { color: var(--color-grey-light) !important; }
+.text.gold { color: var(--color-gold) !important; }
+
 .ui {
   &.left:not(.action) {
     float: left;
@@ -1370,74 +1386,6 @@ a.ui.card:hover,
   }
 
   .text {
-    &.red {
-      color: var(--color-red) !important;
-
-      a {
-        color: inherit !important;
-
-        &:hover {
-          color: var(--color-red-light) !important;
-        }
-      }
-    }
-
-    &.blue {
-      color: var(--color-blue) !important;
-
-      a {
-        color: inherit !important;
-
-        &:hover {
-          color: var(--color-blue-light) !important;
-        }
-      }
-    }
-
-    &.black {
-      color: var(--color-text);
-
-      &:hover {
-        color: var(--color-text-dark);
-      }
-    }
-
-    &.grey {
-      color: var(--color-text-light) !important;
-
-      a {
-        color: var(--color-text) !important;
-
-        &:hover {
-          color: var(--color-primary) !important;
-        }
-      }
-    }
-
-    &.light.grey {
-      color: var(--color-text-light-2) !important;
-    }
-
-    &.green {
-      color: var(--color-green) !important;
-    }
-
-    &.purple {
-      color: var(--color-purple) !important;
-    }
-
-    &.yellow {
-      color: var(--color-yellow) !important;
-    }
-
-    &.orange {
-      color: var(--color-orange) !important;
-    }
-
-    &.gold {
-      color: var(--color-gold) !important;
-    }
-
     &.left {
       text-align: left !important;
     }
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 229ffd8937..370a866abb 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -56,34 +56,34 @@
   --color-secondary-alpha-80: #454a57cc;
   --color-secondary-alpha-90: #454a57e1;
   /* colors */
-  --color-red: #7d3434;
+  --color-red: #cc4848;
   --color-orange: #cc580c;
   --color-yellow: #cc9903;
   --color-olive: #91a313;
   --color-green: #87ab63;
   --color-teal: #00918a;
-  --color-blue: #1a6aa6;
-  --color-violet: #502aa1;
-  --color-purple: #8229a0;
-  --color-pink: #c21e7b;
-  --color-brown: #845232;
+  --color-blue: #3a8ac6;
+  --color-violet: #906ae1;
+  --color-purple: #b259d0;
+  --color-pink: #d22e8b;
+  --color-brown: #a47252;
   --color-grey: #5e626a;
   /* light variants */
-  --color-red-light: #984646;
-  --color-orange-light: #e6630d;
-  --color-yellow-light: #e5ac04;
-  --color-olive-light: #a3b816;
-  --color-green-light: #9fbc82;
-  --color-teal-light: #00a39c;
-  --color-blue-light: #1e78bb;
-  --color-violet-light: #5a30b5;
-  --color-purple-light: #932eb4;
-  --color-pink-light: #db228a;
-  --color-brown-light: #955d39;
-  --color-grey-light: #6a6e78;
+  --color-red-light: #c23636;
+  --color-orange-light: #b84f0b;
+  --color-yellow-light: #b88a03;
+  --color-olive-light: #839311;
+  --color-green-light: #7a9e55;
+  --color-teal-light: #00837c;
+  --color-blue-light: #347cb3;
+  --color-violet-light: #7b4edb;
+  --color-purple-light: #a742c9;
+  --color-pink-light: #be297d;
+  --color-brown-light: #94674a;
+  --color-grey-light: #55585f;
   /* other colors */
   --color-black: #1e222e;
-  --color-gold: #a1882b;
+  --color-gold: #b1983b;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #6f3333;
   --color-diff-added-word-bg: #3c653c;