feat: enable colors for tag labels as an option

Author: gormus

common/common.scss

@@ -7,21 +7,31 @@
   vertical-align: middle;
 }
 
-.discourse-tag--tag-icons-style {
-  &.simple {
-    color: var(--color1, --tag-text-color);
-  }
-
-  &.bullet {
-    color: var(--color1, --tag-text-color);
-  }
+.hashtag-cooked .hashtag-tag-icon .d-icon {
+  color: var(--color1, var(--primary));
+}
 
-  &.box {
-    color: var(--color2, --tag-text-color);
-    background: var(--color1, --primary-low);
-  }
+.discourse-tag--tag-icons-style .tag-icon {
+  color: var(--color1, var(--tag-text-color));
 }
 
-.hashtag-cooked:has(.hashtag-tag-icon) {
-  color: var(--color1, --d-sidebar-link-icon-color);
+@if $enable_colors_for_tag_labels == "true" {
+  .discourse-tag--tag-icons-style {
+    &.simple {
+      color: var(--color1, var(--tag-text-color));
+    }
+
+    &.bullet {
+      color: var(--color1, var(--tag-text-color));
+    }
+
+    &.box {
+      color: var(--color2, var(--tag-text-color));
+      background-color: var(--color1, var(--primary-low));
+
+      .tag-icon {
+        color: inherit;
+      }
+    }
+  }
 }

javascripts/discourse/initializers/tag-icons.js

@@ -2,6 +2,7 @@ import TagHashtagType from "discourse/lib/hashtag-types/tag";
 import { iconHTML } from "discourse/lib/icon-library";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { defaultRenderTag } from "discourse/lib/render-tag";
+import { contrastColor } from "../lib/colors";
 
 function iconTagRenderer(tag, params) {
   // Get the rendered default tag markup.
@@ -19,7 +20,7 @@ function iconTagRenderer(tag, params) {
 
   // Update the tag markup with an SVG icon, and inline-styles for the colors.
   if (tagIconItem) {
-    const [, iconName, color1, color2] = tagIconItem.split(",");
+    const [, iconName, color] = tagIconItem.split(",");
 
     const parser = new DOMParser();
     const tagElement = parser.parseFromString(renderedTag, "text/html").body
@@ -31,8 +32,8 @@ function iconTagRenderer(tag, params) {
 
     tagElement.prepend(iconElement);
     tagElement.classList.add("discourse-tag--tag-icons-style");
-    tagElement.style.setProperty("--color1", color1 ?? "inherit");
-    tagElement.style.setProperty("--color2", color2 ?? "inherit");
+    tagElement.style.setProperty("--color1", color ?? "");
+    tagElement.style.setProperty("--color2", color ? contrastColor(color) : "");
 
     return tagElement.outerHTML;
   }
@@ -56,7 +57,11 @@ class TagHashtagTypeWithIcon extends TagHashtagType {
       newIcon.classList.add("hashtag-tag-icon");
       newIcon.innerHTML = svgIcon;
       if (opt.color) {
-        newIcon.style.color = opt.color;
+        newIcon.style.setProperty("--color1", opt.color ?? "");
+        newIcon.style.setProperty(
+          "--color2",
+          opt.color ? contrastColor(opt.color) : ""
+        );
       }
       return newIcon.outerHTML;
     }
@@ -74,34 +79,30 @@ export default {
     withPluginApi((api) => {
       api.replaceTagRenderer(iconTagRenderer);
 
-      /** @type {Record<string, { icon: string; color?: string; backgroundColor?: string; }?>} */
+      /** @type {Record<string, { icon: string, color?: string }>} */
       const tagsMap = {};
 
       const tagIconList = settings.tag_icon_list.split("|");
 
       tagIconList.forEach((tagIcon) => {
-        const [tagName, icon, color, backgroundColor] = tagIcon.split(",");
+        const [tagName, prefixValue, prefixColor] = tagIcon.split(",");
 
-        if (tagName && icon) {
-          // Sidebar section links
+        if (tagName && prefixValue) {
           if (api.registerCustomTagSectionLinkPrefixIcon) {
             api.registerCustomTagSectionLinkPrefixIcon({
               tagName,
-              prefixValue: icon,
-              prefixColor: color,
+              prefixValue,
+              prefixColor,
             });
           }
 
-          // Everywhere else;
           tagsMap[tagName] = {
-            icon,
-            color,
-            backgroundColor,
+            icon: prefixValue,
+            color: prefixColor,
           };
         }
       });
 
-      // Mentions.
       if (api.registerHashtagType) {
         api.registerHashtagType(
           "tag",

javascripts/discourse/lib/colors.js

@@ -0,0 +1,36 @@
+const hexToRgb = (hex) => {
+  if (typeof hex !== "string") {
+    throw new TypeError("Hex color must be a string");
+  }
+
+  let value = hex.trim().replace(/^#/, "");
+
+  if (value.length === 3) {
+    value = value
+      .split("")
+      .map((char) => char + char)
+      .join("");
+  }
+
+  if (!/^[0-9a-fA-F]{6}$/.test(value)) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+
+  const num = parseInt(value, 16);
+
+  // eslint-disable-next-line no-bitwise
+  return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+};
+
+const luminance = (rgb) => {
+  const c = [rgb[0], rgb[1], rgb[2]].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+
+export const contrastColor = (hexColor) => {
+  const rgb = hexToRgb(hexColor);
+  return luminance(rgb) >= 0.45 ? "#000d" : "#fffd";
+};

locales/en.yml

@@ -1,5 +1,6 @@
 en:
   theme_metadata:
     settings:
-      tag_icon_list: 'Enter comma-delimited configuration for tags, in the format "tag-slug,icon,color,backgroundColor". The colors are optional.'
+      tag_icon_list: 'Enter comma-delimited configuration for tags, in the format "tag-slug,icon,iconColor". Icon color is optional.'
+      enable_colors_for_tag_labels: "Use colors for both tag icon and the tag label based on the configuration set above."
       svg_icons: "List of FontAwesome 6 icons used in this theme component"

settings.yml

@@ -1,6 +1,9 @@
 tag_icon_list:
   default: "tag1,circle-question,#CC0000|"
   type: "list"
+enable_colors_for_tag_labels:
+  default: false
+  type: "bool"
 svg_icons:
   default: "circle-question"
   type: "list"