Move all remaining colors into CSS variables (#21903)

This should eliminate all non-variable color usage in the styles, making
gitea fully themeable via CSS variables. Also, it adds a linter to
enforce variables for colors.

5 files changed, 67 insertions, 43 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 6054331ec4..14b69dec49 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -118,6 +118,20 @@
   --color-info-border: #a9d5de;
   --color-info-bg: #f8ffff;
   --color-info-text: #276f86;
+  --color-red-badge: #db2828;
+  --color-red-badge-bg: #db28281a;
+  --color-red-badge-hover-bg: #db28284d;
+  --color-green-badge: #21ba45;
+  --color-green-badge-bg: #21ba451a;
+  --color-green-badge-hover-bg: #21ba454d;
+  --color-yellow-badge: #fbbd08;
+  --color-yellow-badge-bg: #fbbd081a;
+  --color-yellow-badge-hover-bg: #fbbd084d;
+  --color-orange-badge: #f2711c;
+  --color-orange-badge-bg: #f2711c1a;
+  --color-orange-badge-hover-bg: #f2711c4d;
+  --color-git: #f05133;
+  /* target-based colors */
   --color-body: #ffffff;
   --color-text-dark: #080808;
   --color-text: #212121;
@@ -1196,11 +1210,7 @@ a.ui.card:hover,
   }
 
   .searchbox {
-    background-color: #f4f4f4 !important;
-
-    &:focus {
-      background-color: #e9e9e9 !important;
-    }
+    background-color: var(--color-input-background) !important;
   }
 
   .text .svg {
@@ -1932,7 +1942,7 @@ footer {
 }
 
 .archived-icon {
-  color: lighten(#000000, 70%) !important;
+  color: var(--color-secondary-dark-2) !important;
 }
 
 .oauth2-authorize-application-box {
@@ -2085,7 +2095,7 @@ a.ui.label:hover {
 .lines-commit {
   &:extend(.unselectable);
   vertical-align: top;
-  color: #999999;
+  color: var(--color-grey);
   padding: 0 !important;
   background: var(--color-code-sidebar-bg);
   width: 1%;
@@ -2161,6 +2171,7 @@ a.ui.label:hover {
   color: var(--color-text);
 }
 
+.ui.active.button,
 .ui.button:active,
 .ui.active.button:active,
 .ui.active.button:hover {
@@ -2312,7 +2323,7 @@ a.ui.basic.label:hover {
 }
 
 .migrate .svg.gitea-git {
-  color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */
+  color: var(--color-git);
 }
 
 .color-icon {
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index e9a906cbed..4ba0788af1 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -183,7 +183,7 @@
     }
 
     #privateFilterCheckbox .svg {
-      color: #888888;
+      color: var(--color-grey);
       margin-right: .25rem;
     }
 
diff --git a/web_src/less/_install.less b/web_src/less/_install.less
index 515d727f8a..026a76fbba 100644
--- a/web_src/less/_install.less
+++ b/web_src/less/_install.less
@@ -59,7 +59,7 @@
     .reinstall-message {
       width: 70%;
       margin: 20px auto;
-      color: red;
+      color: var(--color-red);
       text-align: left;
       font-weight: bold;
     }
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f89a5df33d..85cb842b72 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -548,7 +548,7 @@
             position: absolute;
             top: 9px;
             left: 10px;
-            color: #b0c4ce;
+            color: var(--color-grey);
           }
         }
       }
@@ -915,8 +915,8 @@
                 border: 1px solid var(--color-light-border);
 
                 &.isSigned.isWarning {
-                  border: 1px solid #db2828;
-                  background: fade(#db2828, 10%);
+                  border: 1px solid var(--color-red-badge);
+                  background: var(--color-red-badge-bg);
 
                   .shortsha {
                     display: inline-block;
@@ -924,13 +924,13 @@
                   }
 
                   &:hover {
-                    background: fade(#db2828, 30%) !important;
+                    background: var(--color-red-badge-hover-bg) !important;
                   }
                 }
 
                 &.isSigned.isVerified {
-                  border: 1px solid #21ba45;
-                  background: fade(#21ba45, 10%);
+                  border: 1px solid var(--color-green-badge);
+                  background: var(--color-green-badge-bg);
 
                   .shortsha {
                     display: inline-block;
@@ -938,13 +938,13 @@
                   }
 
                   &:hover {
-                    background: fade(#21ba45, 30%) !important;
+                    background: var(--color-green-badge-hover-bg) !important;
                   }
                 }
 
                 &.isSigned.isVerifiedUntrusted {
-                  border: 1px solid #fbbd08;
-                  background: fade(#fbbd08, 10%);
+                  border: 1px solid var(--color-yellow-badge);
+                  background: var(--color-yellow-badge-bg);
 
                   .shortsha {
                     display: inline-block;
@@ -952,13 +952,13 @@
                   }
 
                   &:hover {
-                    background: fade(#fbbd08, 30%) !important;
+                    background: var(--color-yellow-badge-hover-bg) !important;
                   }
                 }
 
                 &.isSigned.isVerifiedUnmatched {
-                  border: 1px solid #f2711c;
-                  background: fade(#f2711c, 10%);
+                  border: 1px solid var(--color-orange-badge);
+                  background: var(--color-orange-badge-bg);
 
                   .shortsha {
                     display: inline-block;
@@ -966,7 +966,7 @@
                   }
 
                   &:hover {
-                    background: fade(#f2711c, 30%) !important;
+                    background: var(--color-orange-badge-hover-bg) !important;
                   }
                 }
               }
@@ -1433,8 +1433,8 @@
     }
 
     &.isSigned.isWarning {
-      border: 1px solid #db2828;
-      background: fade(#db2828, 10%);
+      border: 1px solid var(--color-red-badge);
+      background: var(--color-red-badge-bg);
 
       .shortsha {
         display: inline-block;
@@ -1442,18 +1442,18 @@
       }
 
       .detail.icon {
-        border-left: 1px solid #db2828;
-        color: #db2828;
+        border-left: 1px solid var(--color-red-badge);
+        color: var(--color-red-badge);
       }
 
       &:hover {
-        background: fade(#db2828, 30%) !important;
+        background: var(--color-red-badge-hover-bg) !important;
       }
     }
 
     &.isSigned.isVerified {
-      border: 1px solid #21ba45;
-      background: fade(#21ba45, 10%);
+      border: 1px solid var(--color-green-badge);
+      background: var(--color-green-badge-bg);
 
       .shortsha {
         display: inline-block;
@@ -1461,18 +1461,18 @@
       }
 
       .detail.icon {
-        border-left: 1px solid #21ba45;
-        color: #21ba45;
+        border-left: 1px solid var(--color-green-badge);
+        color: var(--color-green-badge);
       }
 
       &:hover {
-        background: fade(#21ba45, 30%) !important;
+        background: var(--color-green-badge-hover-bg) !important;
       }
     }
 
     &.isSigned.isVerifiedUntrusted {
-      border: 1px solid #fbbd08;
-      background: fade(#fbbd08, 10%);
+      border: 1px solid var(--color-yellow-badge);
+      background: var(--color-yellow-badge-bg);
 
       .shortsha {
         display: inline-block;
@@ -1480,18 +1480,18 @@
       }
 
       .detail.icon {
-        border-left: 1px solid #fbbd08;
-        color: #fbbd08;
+        border-left: 1px solid var(--color-yellow-badge);
+        color: var(--color-yellow-badge);
       }
 
       &:hover {
-        background: fade(#fbbd08, 30%) !important;
+        background: var(--color-yellow-badge-hover-bg) !important;
       }
     }
 
     &.isSigned.isVerifiedUnmatched {
-      border: 1px solid #f2711c;
-      background: fade(#f2711c, 10%);
+      border: 1px solid var(--color-orange-badge);
+      background: var(--color-orange-badge-bg);
 
       .shortsha {
         display: inline-block;
@@ -1499,12 +1499,12 @@
       }
 
       .detail.icon {
-        border-left: 1px solid #f2711c;
-        color: #f2711c;
+        border-left: 1px solid var(--color-orange-badge);
+        color: var(--color-orange-badge);
       }
 
       &:hover {
-        background: fade(#f2711c, 30%) !important;
+        background: var(--color-orange-badge-hover-bg) !important;
       }
     }
   }
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index fab1b9c3b4..8c05ad278f 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -107,6 +107,19 @@
   --color-info-border: #306090;
   --color-info-bg: #26354c;
   --color-info-text: #38a8e8;
+  --color-red-badge: #db2828;
+  --color-red-badge-bg: #db28281a;
+  --color-red-badge-hover-bg: #db28284d;
+  --color-green-badge: #21ba45;
+  --color-green-badge-bg: #21ba451a;
+  --color-green-badge-hover-bg: #21ba454d;
+  --color-yellow-badge: #fbbd08;
+  --color-yellow-badge-bg: #fbbd081a;
+  --color-yellow-badge-hover-bg: #fbbd084d;
+  --color-orange-badge: #f2711c;
+  --color-orange-badge-bg: #f2711c1a;
+  --color-orange-badge-hover-bg: #f2711c4d;
+  --color-git: #f05133;
   /* target-based colors */
   --color-body: #383c4a;
   --color-box-header: #404652;