From ca03ca9e6e8f2e7ba7fdc3a64edb766be476edbd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 31 Mar 2023 10:24:47 +0200
Subject: [PATCH] CSS color tweaks (#23828)

Change grey shades in arc-green to match the theme more:

<img width="661" alt="Screenshot 2023-03-30 at 21 42 34"
src="https://user-images.githubusercontent.com/115237/228957952-8e099e56-6923-4aa6-8ce9-3c1cd898b73e.png">

Adjusted grey shade in light theme:

<img width="652" alt="image"
src="https://user-images.githubusercontent.com/115237/228963876-3bde6181-8397-4dc2-be72-33982e6c7acb.png">

Increase contrast in arc-green, change background to slightly darker
shade, change forgeground to slightly brighter colors:

<img width="283" alt="Screenshot 2023-03-30 at 22 33 20"
src="https://user-images.githubusercontent.com/115237/228957957-272c24a5-dd0b-427a-b6b7-e62836bdd73c.png">

Increase contrast of grey text in light theme as well by making them
darker:

<img width="273" alt="Screenshot 2023-03-30 at 22 33 35"
src="https://user-images.githubusercontent.com/115237/228957959-283139c7-6fa7-4b68-9fdd-16c668ad1301.png">

Add color rule for border multiple select items:

<img width="183" alt="Screenshot 2023-03-30 at 22 29 31"
src="https://user-images.githubusercontent.com/115237/228957954-6b5a752d-bbb0-4519-ab35-d02c0804d955.png">
<img width="181" alt="Screenshot 2023-03-30 at 22 29 46"
src="https://user-images.githubusercontent.com/115237/228957956-fca9790a-d6c9-4f31-8d1b-d183ab3ac669.png">

Added color rule for red `*` on required form fields:

<img width="97" alt="image"
src="https://user-images.githubusercontent.com/115237/228958760-517ad9ef-565d-4349-b734-9b559ab42429.png">
---
 web_src/css/base.css                   |  8 ++++++--
 web_src/css/form.css                   |  9 +++++++++
 web_src/css/themes/theme-arc-green.css | 24 ++++++++++++------------
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 9dc1f59dd10..80eaed724e5 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -78,7 +78,6 @@
   --color-purple: #a333c8;
   --color-pink: #e03997;
   --color-brown: #a5673f;
-  --color-grey: #888888;
   --color-black: #1b1c1d;
   /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
   --color-red-light: #e45e5e;
@@ -92,9 +91,10 @@
   --color-purple-light: #bb64d8;
   --color-pink-light: #e86bb1;
   --color-brown-light: #c58b66;
-  --color-grey-light: #a6a6a6;
   --color-black-light: #525558;
   /* other colors */
+  --color-grey: #707070;
+  --color-grey-light: #838383;
   --color-gold: #a1882b;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #fdb8c0;
@@ -2657,6 +2657,10 @@ table th[data-sortt-desc] .svg {
   border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
+.ui.multiple.dropdown > .label {
+  box-shadow: 0 0 0 1px var(--color-secondary) inset;
+}
+
 .text-label {
   display: inline-flex !important;
   align-items: center !important;
diff --git a/web_src/css/form.css b/web_src/css/form.css
index 324a210f4f9..ffcf5794b9a 100644
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@@ -94,6 +94,15 @@ textarea:focus,
   color: var(--color-text);
 }
 
+.ui.form .required.fields:not(.grouped) > .field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.field > .checkbox::after,
+.ui.form label.required::after {
+  color: var(--color-red);
+}
+
 .ui.input,
 .ui.checkbox input:focus ~ label::after,
 .ui.checkbox input:checked ~ label::after,
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index e2216085a90..5e47f8ee3ee 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -68,8 +68,7 @@
   --color-purple: #b259d0;
   --color-pink: #d22e8b;
   --color-brown: #a47252;
-  --color-grey: #9ea2aa;
-  --color-black: #1e222e;
+  --color-black: #2e323e;
   /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
   --color-red-light: #c23636;
   --color-orange-light: #b84f0b;
@@ -82,9 +81,10 @@
   --color-purple-light: #a742c9;
   --color-pink-light: #be297d;
   --color-brown-light: #94674a;
-  --color-grey-light: #8d919b;
-  --color-black-light: #1b1f29;
+  --color-black-light: #292d38;
   /* other colors */
+  --color-grey: #505665;
+  --color-grey-light: #a1a6b7;
   --color-gold: #b1983b;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #6f3333;
@@ -124,19 +124,19 @@
   --color-orange-badge-hover-bg: #f2711c4d;
   --color-git: #f05133;
   /* target-based colors */
-  --color-body: #383c4a;
+  --color-body: #373b47;
   --color-box-header: #404652;
   --color-box-body: #2a2e3a;
   --color-box-body-highlight: #353945;
   --color-text-dark: #dbe0ea;
-  --color-text: #bbc0ca;
-  --color-text-light: #a6aab5;
-  --color-text-light-1: #979ba6;
-  --color-text-light-2: #8a8e99;
-  --color-text-light-3: #707687;
+  --color-text: #cbd0da;
+  --color-text-light: #bbbfca;
+  --color-text-light-1: #aaafb9;
+  --color-text-light-2: #9a9ea9;
+  --color-text-light-3: #8a8e99;
   --color-footer: #2e323e;
   --color-timeline: #4c525e;
-  --color-input-text: #d5dbe6;
+  --color-input-text: #dfe3ec;
   --color-input-background: #232933;
   --color-input-toggle-background: #454a57;
   --color-input-border: #454a57;
@@ -159,7 +159,7 @@
   --color-secondary-bg: #2a2e3a;
   --color-text-focus: #fff;
   --color-expand-button: #3c404d;
-  --color-placeholder-text: #6a737d;
+  --color-placeholder-text: #8a8e99;
   --color-editor-line-highlight: var(--color-primary-light-5);
   --color-project-board-bg: var(--color-secondary-light-2);
   --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */