chore(ui): cleanup unused color CSS (#7898)

Careful removal of unused classes and rules from editable CSS. One class was used once in the UI and could have been easily replaced, others were only used in a devtest page.

Removed completely:
* pink
* olive
* violet
* background

Removed partially:
* blue

Some of them are also present in generated Fomantic code, but it's not possible to remove them easily here.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7898
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>

templates/devtest/gitea-ui.tmpl

@@ -40,8 +40,6 @@
 					<button class="ui basic red button">Basic Red</button>
 					<button class="ui primary button">Green</button>
 					<button class="ui basic primary button">Basic Green</button>
-					<button class="ui blue button">Blue</button>
-					<button class="ui basic blue button">Basic Blue</button>
 					<button class="ui orange button">Orange</button>
 					<button class="ui basic orange button">Basic Orange</button>
 					<button class="ui yellow button">Yellow</button>
@@ -52,16 +50,10 @@
 					<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
 					<button class="ui secondary button">Secondary</button>
 					<button class="ui basic secondary button">Basic Secondary</button>
-					<button class="ui olive button">Olive</button>
-					<button class="ui basic olive button">Basic Olive</button>
 					<button class="ui teal button">Teal</button>
 					<button class="ui basic teal button">Basic Teal</button>
-					<button class="ui violet button">Violet</button>
-					<button class="ui basic violet button">Basic Violet</button>
 					<button class="ui purple button">Purple</button>
 					<button class="ui basic purple button">Basic Purple</button>
-					<button class="ui pink button">Pink</button>
-					<button class="ui basic pink button">Basic Pink</button>
 					<button class="ui brown button">Brown</button>
 					<button class="ui basic brown button">Basic Brown</button>
 				</li>

templates/repo/pulse.tmpl

@@ -49,7 +49,7 @@
 			</div>
 			{{else}}
 			<div class="stats-table">
-				<a class="table-cell tiny background light grey"></a>
+				<a class="table-cell tiny tw-bg-grey"></a>
 			</div>
 			{{end}}
 			{{ctx.Locale.TrN .Activity.ActiveIssueCount "repo.activity.active_issues_count_1" "repo.activity.active_issues_count_n" .Activity.ActiveIssueCount}}

web_src/css/base.css

@@ -676,10 +676,6 @@ img.ui.avatar,
   color: var(--color-yellow) !important;
 }
 
-.text.olive {
-  color: var(--color-olive) !important;
-}
-
 .text.green {
   color: var(--color-green) !important;
 }
@@ -692,18 +688,10 @@ img.ui.avatar,
   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;
 }
@@ -853,46 +841,6 @@ img.ui.avatar,
   font-weight: var(--font-weight-normal);
 }
 
-.ui .background.red {
-  background-color: var(--color-red) !important;
-}
-
-.ui .background.blue {
-  background-color: var(--color-blue) !important;
-}
-
-.ui .background.black {
-  background-color: var(--color-black) !important;
-}
-
-.ui .background.grey {
-  background-color: var(--color-grey) !important;
-}
-
-.ui .background.light.grey {
-  background-color: var(--color-grey) !important;
-}
-
-.ui .background.green {
-  background-color: var(--color-green) !important;
-}
-
-.ui .background.purple {
-  background-color: var(--color-purple) !important;
-}
-
-.ui .background.yellow {
-  background-color: var(--color-yellow) !important;
-}
-
-.ui .background.orange {
-  background-color: var(--color-orange) !important;
-}
-
-.ui .background.gold {
-  background-color: var(--color-gold) !important;
-}
-
 .ui .migrate {
   color: var(--color-text-light-2) !important;
 }

web_src/css/modules/button.css

@@ -349,47 +349,6 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-yellow-dark-2);
 }
 
-/* olive */
-
-.ui.olive.labels .label,
-.ui.ui.ui.olive.label,
-.ui.olive.button,
-.ui.olive.buttons .button,
-.ui.olive.button:focus,
-.ui.olive.buttons .button:focus {
-  background: var(--color-olive);
-}
-
-.ui.olive.button:hover,
-.ui.olive.buttons .button:hover {
-  background: var(--color-olive-dark-1);
-}
-
-.ui.olive.button:active,
-.ui.olive.buttons .button:active {
-  background: var(--color-olive-dark-2);
-}
-
-.ui.basic.olive.buttons .button,
-.ui.basic.olive.button,
-.ui.basic.olive.buttons .button:focus,
-.ui.basic.olive.button:focus {
-  color: var(--color-olive);
-  border-color: var(--color-olive);
-}
-
-.ui.basic.olive.buttons .button:hover,
-.ui.basic.olive.button:hover {
-  color: var(--color-olive-dark-1);
-  border-color: var(--color-olive-dark-1);
-}
-
-.ui.basic.olive.buttons .button:active,
-.ui.basic.olive.button:active {
-  color: var(--color-olive-dark-2);
-  border-color: var(--color-olive-dark-2);
-}
-
 /* green */
 
 .ui.green.labels .label,
@@ -472,88 +431,6 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-teal-dark-2);
 }
 
-/* blue */
-
-.ui.blue.labels .label,
-.ui.ui.ui.blue.label,
-.ui.blue.button,
-.ui.blue.buttons .button,
-.ui.blue.button:focus,
-.ui.blue.buttons .button:focus {
-  background: var(--color-blue);
-}
-
-.ui.blue.button:hover,
-.ui.blue.buttons .button:hover {
-  background: var(--color-blue-dark-1);
-}
-
-.ui.blue.button:active,
-.ui.blue.buttons .button:active {
-  background: var(--color-blue-dark-2);
-}
-
-.ui.basic.blue.buttons .button,
-.ui.basic.blue.button,
-.ui.basic.blue.buttons .button:focus,
-.ui.basic.blue.button:focus {
-  color: var(--color-blue);
-  border-color: var(--color-blue);
-}
-
-.ui.basic.blue.buttons .button:hover,
-.ui.basic.blue.button:hover {
-  color: var(--color-blue-dark-1);
-  border-color: var(--color-blue-dark-1);
-}
-
-.ui.basic.blue.buttons .button:active,
-.ui.basic.blue.button:active {
-  color: var(--color-blue-dark-2);
-  border-color: var(--color-blue-dark-2);
-}
-
-/* violet */
-
-.ui.violet.labels .label,
-.ui.ui.ui.violet.label,
-.ui.violet.button,
-.ui.violet.buttons .button,
-.ui.violet.button:focus,
-.ui.violet.buttons .button:focus {
-  background: var(--color-violet);
-}
-
-.ui.violet.button:hover,
-.ui.violet.buttons .button:hover {
-  background: var(--color-violet-dark-1);
-}
-
-.ui.violet.button:active,
-.ui.violet.buttons .button:active {
-  background: var(--color-violet-dark-2);
-}
-
-.ui.basic.violet.buttons .button,
-.ui.basic.violet.button,
-.ui.basic.violet.buttons .button:focus,
-.ui.basic.violet.button:focus {
-  color: var(--color-violet);
-  border-color: var(--color-violet);
-}
-
-.ui.basic.violet.buttons .button:hover,
-.ui.basic.violet.button:hover {
-  color: var(--color-violet-dark-1);
-  border-color: var(--color-violet-dark-1);
-}
-
-.ui.basic.violet.buttons .button:active,
-.ui.basic.violet.button:active {
-  color: var(--color-violet-dark-2);
-  border-color: var(--color-violet-dark-2);
-}
-
 /* purple */
 
 .ui.purple.labels .label,
@@ -595,47 +472,6 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-purple-dark-2);
 }
 
-/* pink */
-
-.ui.pink.labels .label,
-.ui.ui.ui.pink.label,
-.ui.pink.button,
-.ui.pink.buttons .button,
-.ui.pink.button:focus,
-.ui.pink.buttons .button:focus {
-  background: var(--color-pink);
-}
-
-.ui.pink.button:hover,
-.ui.pink.buttons .button:hover {
-  background: var(--color-pink-dark-1);
-}
-
-.ui.pink.button:active,
-.ui.pink.buttons .button:active {
-  background: var(--color-pink-dark-2);
-}
-
-.ui.basic.pink.buttons .button,
-.ui.basic.pink.button,
-.ui.basic.pink.buttons .button:focus,
-.ui.basic.pink.button:focus {
-  color: var(--color-pink);
-  border-color: var(--color-pink);
-}
-
-.ui.basic.pink.buttons .button:hover,
-.ui.basic.pink.button:hover {
-  color: var(--color-pink-dark-1);
-  border-color: var(--color-pink-dark-1);
-}
-
-.ui.basic.pink.buttons .button:active,
-.ui.basic.pink.button:active {
-  color: var(--color-pink-dark-2);
-  border-color: var(--color-pink-dark-2);
-}
-
 /* brown */
 
 .ui.brown.labels .label,

web_src/css/modules/label.css

@@ -203,11 +203,6 @@ a.ui.ui.ui.basic.yellow.label:hover {
   border-color: var(--color-yellow-dark-1);
   color: var(--color-yellow-dark-1);
 }
-.ui.ui.ui.olive.label {
-  background: var(--color-olive);
-  border-color: var(--color-olive);
-  color: var(--color-white);
-}
 
 .ui.ui.ui.green.label {
   background: var(--color-green);