[1.x] Custom Colorising with CSS Custom Properties (#3001)

* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr

Co-authored-by: David Wheatley <hi@davwheat.dev>

less/forum/Hero.less

@@ -1,8 +1,8 @@
 .Hero {
   margin-top: -1px;
-  background: @hero-bg;
+  background: var(--hero-bg);
   text-align: center;
-  color: @hero-color;
+  color: var(--hero-color);
 
   h2 {
     margin: 0;

less/forum/Post.less

@@ -201,7 +201,7 @@
     opacity: 0.5;
   }
   .Post-header .Button--more {
-    .Button--color(@muted-more-color, fade(@muted-more-color, 30%));
+    .Button--color(@muted-more-color, fade(@muted-more-color, 30%), 'muted-more');
   }
 }
 .Post--loading {
@@ -287,7 +287,7 @@
     font-size: 14px;
     margin-right: 5px;
   }
-  
+
   &:empty {
     display: none;
   }

less/forum/UserCard.less

@@ -1,5 +1,5 @@
 .UserCard {
-  background: @control-bg;
+  background: var(--usercard-bg);
   .light-contents();
   background-size: 100% 100%;
 }