DEV: replace inline color with a CSS variable

Author: awesomerobot

common/common.scss

@@ -47,6 +47,8 @@ div[class^="category-title-header"] {
   display: flex;
   width: 100%;
   justify-content: center;
+  background: var(--category-banner-bg-color);
+  color: var(--category-banner-color);
 
   @if $align_text == "center" {
     text-align: center;

javascripts/discourse/components/category-banner.gjs

@@ -45,7 +45,7 @@ export default class DiscourseCategoryBanners extends Component {
 
   get safeStyle() {
     return htmlSafe(
-      `background-color: #${this.category.color}; color: #${this.category.text_color};`
+      `--category-banner-bg-color: #${this.category.color}; --category-banner-color: #${this.category.text_color};`
     );
   }