REFACTOR: CSS improvements to improve targetting and remove !important

app/assets/javascripts/discourse/components/category-drop.js.es6

@@ -59,16 +59,28 @@ export default Ember.Component.extend({
   }.property('category'),
 
   badgeStyle: function() {
-    var category = this.get('category');
+    let category = this.get('category');
+
+    const categoryStyle = this.siteSettings.category_style;
+    if (categoryStyle === 'bullet') {
+      return;
+    }
 
     if (category) {
-      var color = get(category, 'color'),
+      let color = get(category, 'color');
-          textColor = get(category, 'text_color');
+      let textColor = get(category, 'text_color');
 
       if (color || textColor) {
-        var style = "";
+        let style = "";
-        if (color) { style += "background-color: #" + color + "; border-color: #" + color + ";"; }
+        if (color) { 
-        if (textColor) { style += "color: #" + textColor + "; "; }
+          if (categoryStyle === "bar") {
+            style += `border-color: #${color};`;
+          } else if (categoryStyle === "box") {
+            style += `background-color: #${color};`;
+            if (textColor) { style += "color: #" + textColor + "; "; }
+          }
+        }
+
         return style.htmlSafe();
       }
     }

app/assets/javascripts/discourse/components/tag-drop.js.es6

@@ -69,7 +69,7 @@ export default Ember.Component.extend({
 
   @computed('tag')
   dropdownButtonClass() {
-    var result = 'badge-category category-dropdown-button';
+    let result = 'badge-category category-dropdown-button';
     if (Em.isNone(this.get('tag'))) {
       result += ' home';
     }

app/assets/javascripts/discourse/helpers/category-link.js.es6

@@ -24,20 +24,20 @@ export function categoryBadgeHTML(category, opts) {
 
   if ((!category) ||
         (!opts.allowUncategorized &&
-         Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
+         Ember.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
          Discourse.SiteSettings.suppress_uncategorized_badge
         )
      ) return "";
 
-  var description = get(category, 'description_text'),
+  let description = get(category, 'description_text');
-      restricted = get(category, 'read_restricted'),
+  let restricted = get(category, 'read_restricted');
-      url = opts.url ? opts.url : Discourse.getURL("/c/") + Discourse.Category.slugFor(category),
+  let url = opts.url ? opts.url : Discourse.getURL("/c/") + Discourse.Category.slugFor(category);
-      href = (opts.link === false ? '' : url),
+  let href = (opts.link === false ? '' : url);
-      tagName = (opts.link === false || opts.link === "false" ? 'span' : 'a'),
+  let tagName = (opts.link === false || opts.link === "false" ? 'span' : 'a');
-      extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : ''),
+  let extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : '');
-      color = get(category, 'color'),
+  let color = get(category, 'color');
-      html = "",
+  let html = "";
-      parentCat = null;
+  let parentCat = null;
 
   if (!opts.hideParent) {
     parentCat = Discourse.Category.findById(get(category, 'parent_category_id'));
@@ -49,32 +49,36 @@ export function categoryBadgeHTML(category, opts) {
 
   html += categoryStripe(color, "badge-category-bg");
 
-  var classNames = "badge-category clear-badge";
+  let classNames = "badge-category clear-badge";
   if (restricted) { classNames += " restricted"; }
 
-  var textColor = "#" + get(category, 'text_color');
+  const categoryStyle = Discourse.SiteSettings.category_style;
 
-  html += "<span" + ' style="color: ' + textColor + ';" '+
+  let style = "";
+  if (categoryStyle === "box") {
+    style = `style="color: #${get(category, 'text_color')};"`;
+  }
+
+  html += `<span ${style} ` +
              'data-drop-close="true" class="' + classNames + '"' +
              (description ? 'title="' + escapeExpression(description) + '" ' : '') +
           ">";
 
-  var name = escapeExpression(get(category, 'name'));
+  let categoryName = escapeExpression(get(category, 'name'));
 
   if (restricted) {
-    html += iconHTML('lock') + " " + name;
+    html += iconHTML('lock') + " " + categoryName;
   } else {
-    html += name;
+    html += categoryName;
   }
   html += "</span>";
 
-  if(href){
+  if (href) {
-    href = " href='" + href + "' ";
+    href = ` href="${href}" `;
   }
 
-  extraClasses = Discourse.SiteSettings.category_style ? Discourse.SiteSettings.category_style + extraClasses : extraClasses;
+  extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses;
-
+  return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>`;
-  return "<" + tagName + " class='badge-wrapper " + extraClasses + "' " + href + ">" + html + "</" + tagName + ">";
 }
 
 export function categoryLinkHTML(category, options) {

app/assets/javascripts/discourse/templates/navigation/categories.hbs

@@ -1,4 +1,4 @@
-{{#d-section bodyClass="navigation-categories"}}
+{{#d-section bodyClass="navigation-categories" class="navigation-categories"}}
   {{bread-crumbs categories=categories}}
 
   {{navigation-bar navItems=navItems filterMode=filterMode}}

app/assets/javascripts/discourse/templates/navigation/default.hbs

@@ -1,4 +1,4 @@
-{{#d-section bodyClass="navigation-topics" scrollTop="false"}}
+{{#d-section bodyClass="navigation-topics" class="navigation-topics" scrollTop="false"}}
   {{bread-crumbs categories=categories}}
 
   {{navigation-bar navItems=navItems filterMode=filterMode}}

app/assets/stylesheets/common/components/badges.scss

@@ -28,7 +28,7 @@
     display: inline-flex;
 
     span.badge-category {
-      color: $primary !important;
+      color: $primary;
       padding: 3px;
       vertical-align: text-top;
       margin-top: -2px; //vertical alignment fix
@@ -37,7 +37,7 @@
       text-overflow: ellipsis;
 
       .extra-info-wrapper & {
-        color: $header-primary !important;
+        color: $header-primary;
       }
     }
 
@@ -59,7 +59,7 @@
     line-height: 15px;
 
     span.badge-category {
-      color: $primary !important;
+      color: $primary;
       display: inline-block;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -69,7 +69,7 @@
       }
 
       .extra-info-wrapper & {
-        color: $header-primary !important;
+        color: $header-primary;
       }
     }
 
@@ -169,13 +169,13 @@
     }
 
     li.bar>.badge-category {
-      background: $primary-low !important;
+      background: $primary-low;
-      color: $primary !important;
+      color: $primary;
     }
 
     li.bullet>.badge-category {
-      background: $primary-low !important;
+      background: $primary-low;
-      color: $primary !important;
+      color: $primary;
 
       .badge-category-bg {
         width: 10px;