feat: add backgroundColor option for the tags, and style them every where possible (#46)

Author: gormus

common/.DS_Store

@@ -6,3 +6,48 @@
   color: inherit;
   vertical-align: middle;
 }
+
+.hashtag-cooked .hashtag-tag-icon .d-icon {
+  color: var(--color1, var(--primary));
+}
+
+.discourse-tag--tag-icons-style .tag-icon {
+  color: var(--color1, var(--tag-text-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;
+      }
+    }
+
+    .select-kit .select-kit-row &,
+    .select-kit .select-kit-row &:visited,
+    .select-kit .select-kit-row &:hover {
+      &.simple {
+        color: var(--color1, var(--primary-high));
+      }
+
+      &.bullet {
+        color: var(--color1, var(--primary-high));
+      }
+
+      &.box {
+        color: var(--color2, var(--primary-high));
+      }
+    }
+  }
+}

common/common.scss

@@ -1,91 +1,44 @@
-import escape from "discourse/lib/escape";
-import getURL from "discourse/lib/get-url";
 import TagHashtagType from "discourse/lib/hashtag-types/tag";
-import { helperContext } from "discourse/lib/helpers";
 import { iconHTML } from "discourse/lib/icon-library";
 import { withPluginApi } from "discourse/lib/plugin-api";
-import { escapeExpression } from "discourse/lib/utilities";
+import { defaultRenderTag } from "discourse/lib/render-tag";
+import { contrastColor } from "../lib/colors";
 
 function iconTagRenderer(tag, params) {
-  let { siteSettings, currentUser } = helperContext();
-  let tagIconList = settings.tag_icon_list.split("|");
-
-  params = params || {};
-  // TODO(https://github.com/discourse/discourse/pull/36678): The string check can be
-  // removed using .discourse-compatibility once the PR is merged.
-  const tagStr = typeof tag === "string" ? tag : tag.name;
-  const visibleName = escapeExpression(tagStr);
-  tag = visibleName.toLowerCase();
-
-  const classes = ["discourse-tag"];
-  const htmlTagName = params.tagName || "a";
-  let path;
-  if (htmlTagName === "a" && !params.noHref) {
-    if ((params.isPrivateMessage || params.pmOnly) && currentUser) {
-      const username = params.tagsForUser
-        ? params.tagsForUser
-        : currentUser.username;
-      path = `/u/${username}/messages/tags/${tag}`;
-    } else {
-      path = `/tag/${tag}`;
-    }
-  }
-  const href = path ? ` href='${getURL(path)}' ` : "";
-  if (siteSettings.tag_style || params.style) {
-    classes.push(params.style || siteSettings.tag_style);
-  }
-
-  if (params.extraClass) {
-    classes.push(params.extraClass);
-  }
-
-  if (params.size) {
-    classes.push(params.size);
-  }
+  // Get the rendered default tag markup.
+  const renderedTag = defaultRenderTag(tag, params);
 
-  // remove all html tags from hover text
-  const hoverDescription =
-    params.description && params.description.replace(/<.+?>/g, "");
+  // Get the tag configuration list from the settings.
+  const tagIconList = settings.tag_icon_list.split("|");
 
-  /// Add custom tag icon from theme settings
-  let tagIconItem = tagIconList.find((str) => {
-    return str.indexOf(",") > -1
-      ? tag === str.substr(0, str.indexOf(",")).toLowerCase()
-      : "";
-  });
+  // Returns the tag configuration if found.
+  const tagIconItem = tagIconList.find(
+    (line) =>
+      line.indexOf(",") > -1 &&
+      tag.toLowerCase() === line.substr(0, line.indexOf(",")).toLowerCase()
+  );
 
-  let tagIconHTML = "";
+  // Update the tag markup with an SVG icon, and inline-styles for the colors.
   if (tagIconItem) {
-    let tagIcon = tagIconItem.split(",");
-
-    let itemColor = tagIcon[2] ? `style="color: ${tagIcon[2]}"` : "";
-    tagIconHTML = `<span ${itemColor} class="tag-icon">${iconHTML(
-      tagIcon[1]
-    )}</span>`;
-  }
-  /// End custom tag icon
-
-  let val =
-    "<" +
-    htmlTagName +
-    href +
-    " data-tag-name=" +
-    tag +
-    (params.description ? ' title="' + escape(hoverDescription) + '" ' : "") +
-    " class='" +
-    classes.join(" ") +
-    "'>" +
-    tagIconHTML + // inject tag Icon in html
-    (params.displayName ? escape(params.displayName) : visibleName) +
-    "</" +
-    htmlTagName +
-    ">";
-
-  if (params.count) {
-    val += " <span class='discourse-tag-count'>x" + params.count + "</span>";
+    const [, iconName, color] = tagIconItem.split(",");
+
+    const parser = new DOMParser();
+    const tagElement = parser.parseFromString(renderedTag, "text/html").body
+      .firstChild;
+    const iconElement = parser.parseFromString(
+      `<span class="tag-icon">${iconHTML(iconName)}</span>`,
+      "text/html"
+    ).body.firstChild;
+
+    tagElement.prepend(iconElement);
+    tagElement.classList.add("discourse-tag--tag-icons-style");
+    tagElement.style.setProperty("--color1", color ?? "");
+    tagElement.style.setProperty("--color2", color ? contrastColor(color) : "");
+
+    return tagElement.outerHTML;
   }
 
-  return val;
+  return renderedTag;
 }
 
 class TagHashtagTypeWithIcon extends TagHashtagType {
@@ -97,27 +50,36 @@ class TagHashtagTypeWithIcon extends TagHashtagType {
   generateIconHTML(hashtag) {
     const opt = hashtag.slug && this.dict[hashtag.slug];
     if (opt) {
+      const svgIcon = iconHTML(opt.icon, {
+        class: `hashtag-color--${this.type}-${hashtag.id}`,
+      });
       const newIcon = document.createElement("span");
       newIcon.classList.add("hashtag-tag-icon");
-      newIcon.innerHTML = iconHTML(opt.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;
-    } else {
-      return super.generateIconHTML(hashtag);
     }
+
+    return super.generateIconHTML(hashtag);
   }
 }
 
 export default {
   name: "tag-icons",
 
+  before: "hashtag-css-generator",
+
   initialize(owner) {
     withPluginApi((api) => {
       api.replaceTagRenderer(iconTagRenderer);
 
-      /** @type {Record<string, {icon: string, color: string?}?>} */
+      /** @type {Record<string, { icon: string, color?: string }>} */
       const tagsMap = {};
 
       const tagIconList = settings.tag_icon_list.split("|");

javascripts/discourse/initializers/tag-icons.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";
+};

javascripts/discourse/lib/colors.js

@@ -2,4 +2,5 @@ en:
   theme_metadata:
     settings:
       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"

locales/en.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"

settings.yml

@@ -4,9 +4,9 @@ module PageObjects
   module Components
     class TagIcon < PageObjects::Components::Base
       def has_icon_for_tag?(tag_name:, icon:, color: nil)
-        selector = ".discourse-tag[data-tag-name='#{tag_name}'] .tag-icon"
-        selector += "[style*='color: #{color}']" if color
-        selector += " .d-icon-#{icon}"
+        selector = ".discourse-tag[data-tag-name='#{tag_name}']"
+        selector += "[style*='--color1: #{color}; --color2: #fffd;']" if color
+        selector += " .tag-icon .d-icon-#{icon}"
         page.has_css?(selector)
       end
 

spec/system/page_objects/components/tag_icon.rb

@@ -57,10 +57,7 @@ acceptance("Post body - Tag icons", function (needs) {
 
     assert
       .dom(`.cooked .hashtag-cooked[data-id="1"] .hashtag-tag-icon`)
-      .hasStyle(
-        { color: "rgb(255, 0, 0)" },
-        "tag-1 's icon has the right color"
-      );
+      .hasStyle({ "--color1": "#FF0000" }, "tag-1 's icon has the right color");
 
     assert
       .dom(

test/acceptance/post-body-tag-icons-test.js

@@ -25,7 +25,7 @@ acceptance("Topic with tags", function (needs) {
 
     assert.equal(
       window.getComputedStyle(el).color,
-      "rgb(204, 0, 0)",
+      "rgb(100, 100, 100)",
       "tag icon color matches default value"
     );
   });