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.

Author: silverwind

.stylelintrc.yaml

@@ -1,8 +1,19 @@
 extends: stylelint-config-standard
 
+plugins:
+  - stylelint-declaration-strict-value
+
 overrides:
   - files: ["**/*.less"]
     customSyntax: postcss-less
+  - files: ["**/*.less"]
+    rules:
+      scale-unlimited/declaration-strict-value: [color, {
+        ignoreValues: /^(inherit|transparent|unset|initial)$/
+      }]
+  - files: ["**/chroma/*", "**/codemirror/*", "**/standalone/*", "**/console/*"]
+    rules:
+      scale-unlimited/declaration-strict-value: null
 
 rules:
   alpha-value-notation: null

package-lock.json

@@ -65,6 +65,7 @@
     "postcss-less": "6.0.0",
     "stylelint": "14.15.0",
     "stylelint-config-standard": "29.0.0",
+    "stylelint-declaration-strict-value": "1.9.1",
     "svgo": "3.0.2",
     "updates": "13.2.1",
     "vitest": "0.25.2"

package.json

@@ -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 {

web_src/less/_base.less

@@ -183,7 +183,7 @@
     }
 
     #privateFilterCheckbox .svg {
-      color: #888888;
+      color: var(--color-grey);
       margin-right: .25rem;
     }
 

web_src/less/_dashboard.less

@@ -59,7 +59,7 @@
     .reinstall-message {
       width: 70%;
       margin: 20px auto;
-      color: red;
+      color: var(--color-red);
       text-align: left;
       font-weight: bold;
     }