FIX: Use same names for category CSS variables (#24527)

--category-bg-color and --category-badge-color were both used to
represent category.color. --category-badge-color is now used instead for
all of them.

app/assets/javascripts/discourse/app/components/bread-crumbs.hbs

@@ -16,19 +16,7 @@
 {{#each this.categoryBreadcrumbs as |breadcrumb|}}
   {{#if breadcrumb.hasOptions}}
     <li
-      style={{html-safe
+      style={{if breadcrumb.category (category-variables breadcrumb.category)}}
-        (if
-          breadcrumb.category
-          (concat
-            "--category-bg-color:#"
-            breadcrumb.category.color
-            "; "
-            "--category-text-color:#"
-            breadcrumb.category.text_color
-            ";"
-          )
-        )
-      }}
     >
       <CategoryDrop
         @category={{breadcrumb.category}}

app/assets/javascripts/discourse/app/helpers/category-color-variable.js

@@ -1,5 +1,5 @@
 import { htmlSafe } from "@ember/template";
 
 export default function categoryColorVariable(color) {
-  return htmlSafe(`--category-color: #${color};`);
+  return htmlSafe(`--category-badge-color: #${color};`);
 }

app/assets/javascripts/discourse/app/helpers/category-variables.js

@@ -0,0 +1,23 @@
+import { htmlSafe } from "@ember/template";
+
+export default function categoryVariables(category) {
+  let vars = "";
+
+  if (category.color) {
+    vars += `--category-badge-color: #${category.color};`;
+  }
+
+  if (category.text_color) {
+    vars += `--category-badge-text-color: #${category.text_color};`;
+  }
+
+  if (category.parentCategory?.color) {
+    vars += `--parent-category-badge-color: #${category.parentCategory.color};`;
+  }
+
+  if (category.parentCategory?.text_color) {
+    vars += `--parent-category-badge-text-color: #${category.parentCategory.text_color};`;
+  }
+
+  return htmlSafe(vars);
+}

app/assets/stylesheets/common/base/category-list.scss

@@ -58,7 +58,7 @@
     border-width: 0;
     border-left-width: 6px;
     border-style: solid;
-    border-color: var(--category-color, var(--primary-low));
+    border-color: var(--category-badge-color, var(--primary-low));
 
     .mobile-view & {
       width: 100%;

app/assets/stylesheets/desktop/category-list.scss

@@ -89,7 +89,7 @@
 
   tbody {
     .category {
-      border-left: 6px solid var(--category-color, var(--primary-low));
+      border-left: 6px solid var(--category-badge-color, var(--primary-low));
       h3,
       h4 {
         line-height: var(--line-height-medium);