Consolidate remaining colors into variables (#21582)

Remove remaining non-color variables in arc-green, so the theme is now
100% defined from variables (excluding inverts). Adjusted red/green to
match previous overwritten colors.

`--color-gold-light` is removed, it was unused and is not part of
fomantic colors.

<img width="772" alt="Screen Shot 2022-10-24 at 20 22 25"
src="https://user-images.githubusercontent.com/115237/197599339-1d1bf6e3-aa90-4f38-9753-24effd4b178d.png">
<img width="275" alt="Screen Shot 2022-10-24 at 20 25 52"
src="https://user-images.githubusercontent.com/115237/197599344-79c1d3ac-c709-4e30-a60b-4738af672c12.png">
<img width="446" alt="Screen Shot 2022-10-24 at 20 26 46"
src="https://user-images.githubusercontent.com/115237/197599346-f2ef6449-7efd-4f81-bbb6-e7bee4528f50.png">

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

web_src/less/_base.less

@@ -79,7 +79,6 @@
   --color-pink: #e03997;
   --color-brown: #a5673f;
   --color-grey: #888888;
-  --color-gold: #a1882b;
   /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
   --color-red-light: #e45e5e;
   --color-orange-light: #f59555;
@@ -93,8 +92,8 @@
   --color-pink-light: #e86bb1;
   --color-brown-light: #c58b66;
   --color-grey-light: #a6a6a6;
-  --color-gold-light: #cfb34a;
   /* other colors */
+  --color-gold: #a1882b;
   --color-black: #1b1c1d;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #fdb8c0;
@@ -314,6 +313,299 @@ a.commit-statuses-trigger {
   text-decoration: none !important;
 }
 
+.ui.red.labels .label,
+.ui.ui.ui.red.label,
+.ui.red.button,
+.ui.red.buttons .button {
+  background: var(--color-red);
+}
+.ui.red.button:hover,
+.ui.red.buttons .button:hover {
+  background: var(--color-red-light);
+}
+.ui.basic.red.buttons .button,
+.ui.basic.red.button {
+  color: var(--color-red);
+  border-color: var(--color-red);
+}
+.ui.basic.red.buttons .button:hover,
+.ui.basic.red.button:hover {
+  color: var(--color-red-light);
+  border-color: var(--color-red-light);
+}
+
+.ui.orange.labels .label,
+.ui.ui.ui.orange.label,
+.ui.orange.button,
+.ui.orange.buttons .button {
+  background: var(--color-orange);
+}
+.ui.orange.button:hover,
+.ui.orange.buttons .button:hover {
+  background: var(--color-orange-light);
+}
+.ui.basic.orange.buttons .button,
+.ui.basic.orange.button {
+  color: var(--color-orange);
+  border-color: var(--color-orange);
+}
+.ui.basic.orange.buttons .button:hover,
+.ui.basic.orange.button:hover {
+  color: var(--color-orange-light);
+  border-color: var(--color-orange-light);
+}
+
+.ui.yellow.labels .label,
+.ui.ui.ui.yellow.label,
+.ui.yellow.button,
+.ui.yellow.buttons .button {
+  background: var(--color-yellow);
+}
+.ui.yellow.button:hover,
+.ui.yellow.buttons .button:hover {
+  background: var(--color-yellow-light);
+}
+.ui.basic.yellow.buttons .button,
+.ui.basic.yellow.button {
+  color: var(--color-yellow);
+  border-color: var(--color-yellow);
+}
+.ui.basic.yellow.buttons .button:hover,
+.ui.basic.yellow.button:hover {
+  color: var(--color-yellow-light);
+  border-color: var(--color-yellow-light);
+}
+
+.ui.olive.labels .label,
+.ui.ui.ui.olive.label,
+.ui.olive.button,
+.ui.olive.buttons .button {
+  background: var(--color-olive);
+}
+.ui.olive.button:hover,
+.ui.olive.buttons .button:hover {
+  background: var(--color-olive-light);
+}
+.ui.basic.olive.buttons .button,
+.ui.basic.olive.button {
+  color: var(--color-olive);
+  border-color: var(--color-olive);
+}
+.ui.basic.olive.buttons .button:hover,
+.ui.basic.olive.button:hover {
+  color: var(--color-olive-light);
+  border-color: var(--color-olive-light);
+}
+
+.ui.green.labels .label,
+.ui.ui.ui.green.label,
+.ui.green.button,
+.ui.green.buttons .button {
+  background: var(--color-green);
+}
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background: var(--color-green-light);
+}
+.ui.basic.green.buttons .button,
+.ui.basic.green.button {
+  color: var(--color-green);
+  border-color: var(--color-green);
+}
+.ui.basic.green.buttons .button:hover,
+.ui.basic.green.button:hover {
+  color: var(--color-green-light);
+  border-color: var(--color-green-light);
+}
+
+.ui.teal.labels .label,
+.ui.ui.ui.teal.label,
+.ui.teal.button,
+.ui.teal.buttons .button {
+  background: var(--color-teal);
+}
+.ui.teal.button:hover,
+.ui.teal.buttons .button:hover {
+  background: var(--color-teal-light);
+}
+.ui.basic.teal.buttons .button,
+.ui.basic.teal.button {
+  color: var(--color-teal);
+  border-color: var(--color-teal);
+}
+.ui.basic.teal.buttons .button:hover,
+.ui.basic.teal.button:hover {
+  color: var(--color-teal-light);
+  border-color: var(--color-teal-light);
+}
+
+.ui.blue.labels .label,
+.ui.ui.ui.blue.label,
+.ui.blue.button,
+.ui.blue.buttons .button {
+  background: var(--color-blue);
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover {
+  background: var(--color-blue-light);
+}
+.ui.basic.blue.buttons .button,
+.ui.basic.blue.button {
+  color: var(--color-blue);
+  border-color: var(--color-blue);
+}
+.ui.basic.blue.buttons .button:hover,
+.ui.basic.blue.button:hover {
+  color: var(--color-blue-light);
+  border-color: var(--color-blue-light);
+}
+
+.ui.violet.labels .label,
+.ui.ui.ui.violet.label,
+.ui.violet.button,
+.ui.violet.buttons .button {
+  background: var(--color-violet);
+}
+.ui.violet.button:hover,
+.ui.violet.buttons .button:hover {
+  background: var(--color-violet-light);
+}
+.ui.basic.violet.buttons .button,
+.ui.basic.violet.button {
+  color: var(--color-violet);
+  border-color: var(--color-violet);
+}
+.ui.basic.violet.buttons .button:hover,
+.ui.basic.violet.button:hover {
+  color: var(--color-violet-light);
+  border-color: var(--color-violet-light);
+}
+
+.ui.purple.labels .label,
+.ui.ui.ui.purple.label,
+.ui.purple.button,
+.ui.purple.buttons .button {
+  background: var(--color-purple);
+}
+.ui.purple.button:hover,
+.ui.purple.buttons .button:hover {
+  background: var(--color-purple-light);
+}
+.ui.basic.purple.buttons .button,
+.ui.basic.purple.button {
+  color: var(--color-purple);
+  border-color: var(--color-purple);
+}
+.ui.basic.purple.buttons .button:hover,
+.ui.basic.purple.button:hover {
+  color: var(--color-purple-light);
+  border-color: var(--color-purple-light);
+}
+
+.ui.pink.labels .label,
+.ui.ui.ui.pink.label,
+.ui.pink.button,
+.ui.pink.buttons .button {
+  background: var(--color-pink);
+}
+.ui.pink.button:hover,
+.ui.pink.buttons .button:hover {
+  background: var(--color-pink-light);
+}
+.ui.basic.pink.buttons .button,
+.ui.basic.pink.button {
+  color: var(--color-pink);
+  border-color: var(--color-pink);
+}
+.ui.basic.pink.buttons .button:hover,
+.ui.basic.pink.button:hover {
+  color: var(--color-pink-light);
+  border-color: var(--color-pink-light);
+}
+
+.ui.brown.labels .label,
+.ui.ui.ui.brown.label,
+.ui.brown.button,
+.ui.brown.buttons .button {
+  background: var(--color-brown);
+}
+.ui.brown.button:hover,
+.ui.brown.buttons .button:hover {
+  background: var(--color-brown-light);
+}
+.ui.basic.brown.buttons .button,
+.ui.basic.brown.button {
+  color: var(--color-brown);
+  border-color: var(--color-brown);
+}
+.ui.basic.brown.buttons .button:hover,
+.ui.basic.brown.button:hover {
+  color: var(--color-brown-light);
+  border-color: var(--color-brown-light);
+}
+
+.ui.grey.labels .label,
+.ui.ui.ui.grey.label,
+.ui.grey.button,
+.ui.grey.buttons .button {
+  background: var(--color-grey);
+}
+.ui.grey.button:hover,
+.ui.grey.buttons .button:hover {
+  background: var(--color-grey-light);
+}
+.ui.basic.grey.buttons .button,
+.ui.basic.grey.button {
+  color: var(--color-grey);
+  border-color: var(--color-grey);
+}
+.ui.basic.grey.buttons .button:hover,
+.ui.basic.grey.button:hover {
+  color: var(--color-grey-light);
+  border-color: var(--color-grey-light);
+}
+
+.ui.black.labels .label,
+.ui.ui.ui.black.label,
+.ui.black.button,
+.ui.black.buttons .button {
+  background: var(--color-black);
+}
+.ui.black.button:hover,
+.ui.black.buttons .button:hover {
+  background: var(--color-black-light);
+}
+.ui.basic.black.buttons .button,
+.ui.basic.black.button {
+  color: var(--color-black);
+  border-color: var(--color-black);
+}
+.ui.basic.black.buttons .button:hover,
+.ui.basic.black.button:hover {
+  color: var(--color-black-light);
+  border-color: var(--color-black-light);
+}
+
+.ui.negative.buttons .button,
+.ui.negative.button {
+  background: var(--color-red);
+}
+
+.ui.negative.buttons .button:hover,
+.ui.negative.button:hover {
+  background: var(--color-red-light);
+}
+
+.ui.positive.buttons .button,
+.ui.positive.button {
+  background: var(--color-green);
+}
+
+.ui.positive.buttons .button:hover,
+.ui.positive.button:hover {
+  background: var(--color-green-light);
+}
+
 .ui.search > .results {
   background: var(--color-body);
   border-color: var(--color-secondary);
@@ -958,6 +1250,52 @@ a.ui.card:hover,
   opacity: .35;
 }
 
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type="date"],
+.ui.form .fields.error .field input[type="datetime-local"],
+.ui.form .fields.error .field input[type="email"],
+.ui.form .fields.error .field input[type="number"],
+.ui.form .fields.error .field input[type="password"],
+.ui.form .fields.error .field input[type="search"],
+.ui.form .fields.error .field input[type="tel"],
+.ui.form .fields.error .field input[type="time"],
+.ui.form .fields.error .field input[type="text"],
+.ui.form .fields.error .field input[type="file"],
+.ui.form .fields.error .field input[type="url"],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type="date"],
+.ui.form .field.error input[type="datetime-local"],
+.ui.form .field.error input[type="email"],
+.ui.form .field.error input[type="number"],
+.ui.form .field.error input[type="password"],
+.ui.form .field.error input[type="search"],
+.ui.form .field.error input[type="tel"],
+.ui.form .field.error input[type="time"],
+.ui.form .field.error input[type="text"],
+.ui.form .field.error input[type="file"],
+.ui.form .field.error input[type="url"],
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type="date"]:focus,
+.ui.form .field.error input[type="datetime-local"]:focus,
+.ui.form .field.error input[type="email"]:focus,
+.ui.form .field.error input[type="number"]:focus,
+.ui.form .field.error input[type="password"]:focus,
+.ui.form .field.error input[type="search"]:focus,
+.ui.form .field.error input[type="tel"]:focus,
+.ui.form .field.error input[type="time"]:focus,
+.ui.form .field.error input[type="text"]:focus,
+.ui.form .field.error input[type="file"]:focus,
+.ui.form .field.error input[type="url"]:focus {
+  background-color: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error-text);
+}
+
 .ui.loading.loading.input > i.icon svg {
   visibility: hidden;
 }

web_src/less/markup/content.less

@@ -540,6 +540,7 @@
 }
 
 .markup-block-error {
+  border: 1px solid var(--color-error-border) !important;
   margin-bottom: 0 !important;
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;

web_src/less/themes/theme-arc-green.less

@@ -56,18 +56,32 @@
   --color-secondary-alpha-80: #454a57cc;
   --color-secondary-alpha-90: #454a57e1;
   /* colors */
-  --color-red: #db2828;
-  --color-orange: #f2711c;
-  --color-yellow: #fbbd08;
-  --color-olive: #b5cc18;
-  --color-green: #21ba45;
-  --color-teal: #00b5ad;
-  --color-blue: #2185d0;
-  --color-violet: #6435c9;
-  --color-purple: #a333c8;
-  --color-pink: #e03997;
-  --color-brown: #a5673f;
-  --color-grey: #767a85;
+  --color-red: #7d3434;
+  --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-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;
+  /* other colors */
   --color-black: #1e222e;
   --color-gold: #a1882b;
   --color-white: #ffffff;
@@ -80,9 +94,9 @@
   --color-diff-moved-row-border: #bcca6f;
   --color-diff-added-row-border: #314a37;
   --color-diff-inactive: #353846;
-  --color-error-border: #a53a37;
-  --color-error-bg: #482c2c;
-  --color-error-text: #ff4433;
+  --color-error-border: #a04141;
+  --color-error-bg: #522;
+  --color-error-text: #f9cbcb;
   --color-success-border: #458a57;
   --color-success-bg: #284034;
   --color-success-text: #6cc664;
@@ -145,105 +159,6 @@
   filter: invert(.8);
 }
 
-.ui.red.label,
-.ui.red.labels .label {
-  background-color: #7d3434 !important;
-  border-color: #8a2121 !important;
-}
-
-.ui.yellow.label,
-.ui.yellow.labels .label {
-  border-color: #664d02 !important;
-  background-color: #936e00 !important;
-}
-
-.ui.green.label,
-.ui.green.labels .label,
-.ui.basic.green.label {
-  background-color: #2d693b !important;
-  border-color: #2d693b !important;
-}
-
-.ui.green.labels a.label:hover,
-.ui.basic.green.labels a.label:hover,
-a.ui.ui.ui.green.label:hover,
-a.ui.basic.green.label:hover {
-  background-color: #3d794b !important;
-  border-color: #3d794b !important;
-  color: #fff !important;
-}
-
-.ui.form .fields.error .field textarea,
-.ui.form .fields.error .field select,
-.ui.form .fields.error .field input:not([type]),
-.ui.form .fields.error .field input[type="date"],
-.ui.form .fields.error .field input[type="datetime-local"],
-.ui.form .fields.error .field input[type="email"],
-.ui.form .fields.error .field input[type="number"],
-.ui.form .fields.error .field input[type="password"],
-.ui.form .fields.error .field input[type="search"],
-.ui.form .fields.error .field input[type="tel"],
-.ui.form .fields.error .field input[type="time"],
-.ui.form .fields.error .field input[type="text"],
-.ui.form .fields.error .field input[type="file"],
-.ui.form .fields.error .field input[type="url"],
-.ui.form .field.error textarea,
-.ui.form .field.error select,
-.ui.form .field.error input:not([type]),
-.ui.form .field.error input[type="date"],
-.ui.form .field.error input[type="datetime-local"],
-.ui.form .field.error input[type="email"],
-.ui.form .field.error input[type="number"],
-.ui.form .field.error input[type="password"],
-.ui.form .field.error input[type="search"],
-.ui.form .field.error input[type="tel"],
-.ui.form .field.error input[type="time"],
-.ui.form .field.error input[type="text"],
-.ui.form .field.error input[type="file"],
-.ui.form .field.error input[type="url"] {
-  background-color: #522;
-  border: 1px solid #7d3434;
-  color: #f9cbcb;
-}
-
-.ui.form .field.error select:focus,
-.ui.form .field.error input:not([type]):focus,
-.ui.form .field.error input[type="date"]:focus,
-.ui.form .field.error input[type="datetime-local"]:focus,
-.ui.form .field.error input[type="email"]:focus,
-.ui.form .field.error input[type="number"]:focus,
-.ui.form .field.error input[type="password"]:focus,
-.ui.form .field.error input[type="search"]:focus,
-.ui.form .field.error input[type="tel"]:focus,
-.ui.form .field.error input[type="time"]:focus,
-.ui.form .field.error input[type="text"]:focus,
-.ui.form .field.error input[type="file"]:focus,
-.ui.form .field.error input[type="url"]:focus {
-  background-color: #522;
-  border: 1px solid #a04141;
-  color: #f9cbcb;
-}
-
-.ui.green.button,
-.ui.green.buttons .button {
-  background-color: #87ab63;
-}
-
-.ui.green.button:hover,
-.ui.green.buttons .button:hover {
-  background-color: #a0cc75;
-}
-
-.ui.red.button,
-.ui.red.buttons .button {
-  background-color: #7d3434;
-}
-
-.ui.red.button:hover,
-.ui.red.buttons .button:hover {
-  background-color: #984646;
-}
-
 /* invert emojis that are hard to read otherwise */
 .emoji[aria-label="check mark"],
 .emoji[aria-label="currency exchange"],
@@ -271,8 +186,3 @@ a.ui.basic.green.label:hover {
 img[src$="/img/matrix.svg"] {
   filter: invert(80%);
 }
-
-.markup-block-error {
-  border: 1px solid rgba(121, 71, 66, .5) !important;
-  border-bottom: none !important;
-}