From 5f322605c6fa43d5e22c09ea04060344edd99593 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Thu, 3 Feb 2022 13:16:27 -0600
Subject: [PATCH] DEV: Add category-color variable (#15807)

---
 app/assets/javascripts/discourse/app/helpers/border-color.js   | 2 +-
 .../discourse/app/helpers/category-color-variable.js           | 3 +++
 .../app/templates/components/categories-boxes-with-topics.hbs  | 2 +-
 .../discourse/app/templates/components/categories-boxes.hbs    | 2 +-
 .../discourse/app/templates/components/parent-category-row.hbs | 2 +-
 5 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/helpers/category-color-variable.js

diff --git a/app/assets/javascripts/discourse/app/helpers/border-color.js b/app/assets/javascripts/discourse/app/helpers/border-color.js
index bbe98456502..7272a76586d 100644
--- a/app/assets/javascripts/discourse/app/helpers/border-color.js
+++ b/app/assets/javascripts/discourse/app/helpers/border-color.js
@@ -1,3 +1,3 @@
 import { htmlHelper } from "discourse-common/lib/helpers";
 
-export default htmlHelper((color) => `border-color: #${color}`);
+export default htmlHelper((color) => `border-color: #${color}; `);
diff --git a/app/assets/javascripts/discourse/app/helpers/category-color-variable.js b/app/assets/javascripts/discourse/app/helpers/category-color-variable.js
new file mode 100644
index 00000000000..4ad1cdcea79
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/helpers/category-color-variable.js
@@ -0,0 +1,3 @@
+import { htmlHelper } from "discourse-common/lib/helpers";
+
+export default htmlHelper((color) => `--category-color: #${color};`);
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
index f11790e5c20..0a041d8cc09 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
@@ -1,5 +1,5 @@
 {{#each categories as |c|}}
-  <div data-notification-level={{c.notificationLevelString}} style={{unless noCategoryStyle (border-color c.color)}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
+  <div data-notification-level={{c.notificationLevelString}} style={{unless noCategoryStyle (concat (border-color c.color) (category-color-variable c.color))}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
     <div class="category-box-inner">
       <div class="category-box-heading">
         <a href={{c.url}}>
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
index d1d03e36fa0..255d4838803 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
@@ -1,6 +1,6 @@
 {{#each categories as |c|}}
   {{plugin-outlet name="category-box-before-each-box" args=(hash category=c)}}
-  <div style={{unless noCategoryStyle (border-color c.color)}} data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} data-url={{c.url}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
+  <div style={{unless noCategoryStyle (concat (border-color c.color) (category-color-variable c.color))}} data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} data-url={{c.url}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
     <div class="category-box-inner">
       {{#unless c.isMuted}}
         <div class="category-logo">
diff --git a/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
index 8c78be04e6e..a00118be6e6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
@@ -1,7 +1,7 @@
 {{#unless isHidden}}
   {{plugin-outlet name="category-list-above-each-category" args=(hash category=category)}}
   <tr data-category-id={{category.id}} data-notification-level={{category.notificationLevelString}} class="{{if category.description_excerpt "has-description" "no-description"}} {{if category.uploaded_logo.url "has-logo" "no-logo"}}">
-    <td class="category {{if isMuted "muted"}} {{if noCategoryStyle "no-category-style"}}" style={{unless noCategoryStyle (border-color category.color)}}>
+    <td class="category {{if isMuted "muted"}} {{if noCategoryStyle "no-category-style"}}" style={{unless noCategoryStyle (concat (border-color category.color) (category-color-variable category.color))}}>
       {{category-title-link category=category}}
       {{plugin-outlet name="below-category-title-link" connectorTagName="div" args=(hash category=category)}}
       {{#if category.description_excerpt}}