[1.x] Custom Colorising with CSS Custom Properties (#139)

* Use css variables for tag labels
* Use css variables for hero
* Fix color when links force override (event posts)
* Use css variables for start discussion button
* Use css variables for tag tiles
* Use css variables for sidenav links
* Use `classList` instead

extensions/tags/js/src/common/helpers/tagIcon.js

@@ -10,16 +10,14 @@ export default function tagIcon(tag, attrs = {}, settings = {}) {
     hasIcon ? tag.icon() : 'TagIcon'
   ]);
 
-  if (tag) {
+  if (tag && useColor) {
     attrs.style = attrs.style || {};
+    attrs.style['--color'] = tag.color();
 
     if (hasIcon) {
-      attrs.style.color = useColor ? tag.color() : '';
+      attrs.style.color = tag.color();
-    } else {
-      attrs.style.backgroundColor = tag.color();
     }
-
+  } else if (!tag) {
-  } else {
     attrs.className += ' untagged';
   }
 

extensions/tags/js/src/common/helpers/tagLabel.js

@@ -12,7 +12,7 @@ export default function tagLabel(tag, attrs = {}) {
   if (tag) {
     const color = tag.color();
     if (color) {
-      attrs.style.backgroundColor = attrs.style.color = color;
+      attrs.style['--tag-bg'] = color;
       attrs.className += ' colored';
     }
 

extensions/tags/js/src/forum/addTagFilter.js

@@ -2,6 +2,7 @@ import { extend, override } from 'flarum/extend';
 import IndexPage from 'flarum/components/IndexPage';
 import DiscussionListState from 'flarum/states/DiscussionListState';
 import GlobalSearchState from 'flarum/states/GlobalSearchState';
+import classList from 'flarum/utils/classList';
 
 import TagHero from './components/TagHero';
 
@@ -67,13 +68,15 @@ export default function() {
     if (tag) {
       const color = tag.color();
       const canStartDiscussion = tag.canStartDiscussion() || !app.session.user;
+      const newDiscussion = items.get('newDiscussion');
 
       if (color) {
-        items.get('newDiscussion').attrs.style = {backgroundColor: color};
+        newDiscussion.attrs.className = classList([newDiscussion.attrs.className, 'Button--tagColored']);
+        newDiscussion.attrs.style = { '--color': color };
       }
 
-      items.get('newDiscussion').attrs.disabled = !canStartDiscussion;
+      newDiscussion.attrs.disabled = !canStartDiscussion;
-      items.get('newDiscussion').children = app.translator.trans(canStartDiscussion ? 'core.forum.index.start_discussion_button' : 'core.forum.index.cannot_start_discussion_button');
+      newDiscussion.children = app.translator.trans(canStartDiscussion ? 'core.forum.index.start_discussion_button' : 'core.forum.index.cannot_start_discussion_button');
     }
   });
 

extensions/tags/js/src/forum/addTagLabels.js

@@ -22,7 +22,7 @@ export default function() {
     if (tags && tags.length) {
       const color = tags[0].color();
       if (color) {
-        view.attrs.style = {backgroundColor: color};
+        view.attrs.style = { '--hero-bg': color };
         view.attrs.className += ' DiscussionHero--colored';
       }
     }

extensions/tags/js/src/forum/components/TagHero.js

@@ -8,7 +8,7 @@ export default class TagHero extends Component {
 
     return (
       <header className={'Hero TagHero' + (color ? ' TagHero--colored' : '')}
-        style={color ? {color: '#fff', backgroundColor: color} : ''}>
+        style={color ? { '--hero-bg': color } : ''}>
         <div className="container">
           <div className="containerNarrow">
             <h2 className="Hero-title">{tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}</h2>

extensions/tags/js/src/forum/components/TagLinkButton.js

@@ -17,9 +17,9 @@ export default class TagLinkButton extends LinkButton {
 
     return (
       <Link className={className} href={this.attrs.route}
-        style={active && tag ? {color: tag.color()} : ''}
+        style={tag ? { '--color': tag.color() } : ''}
         title={description || ''}>
-        {tagIcon(tag, {className: 'Button-icon'})}
+        {tagIcon(tag, { className: 'Button-icon' })}
         <span className="Button-label">
           {tag ? tag.name() : app.translator.trans('flarum-tags.forum.index.untagged_link')}
         </span>

extensions/tags/js/src/forum/components/TagsPage.js

@@ -59,7 +59,7 @@ export default class TagsPage extends Page {
 
                 return (
                   <li className={'TagTile ' + (tag.color() ? 'colored' : '')}
-                    style={{backgroundColor: tag.color()}}>
+                    style={{ '--tag-bg': tag.color() }}>
                     <Link className="TagTile-info" href={app.route.tag(tag)}>
                       {tag.icon() && tagIcon(tag, {}, { useColor: false })}
                       <h3 className="TagTile-name">{tag.name()}</h3>

extensions/tags/less/admin.less

@@ -1,5 +1,4 @@
-@import "common/TagLabel";
+@import "common/common";
-@import "common/TagIcon";
 
 @import "admin/TagsPage";
 @import "admin/EditTagModal";

extensions/tags/less/common/TagIcon.less

@@ -5,7 +5,7 @@
   display: inline-block;
   vertical-align: -3px;
   margin-left: 1px;
-  background: @control-bg;
+  background: var(--color, @control-bg);
 
   &.untagged {
     border: 1px dotted @muted-color;

extensions/tags/less/common/TagLabel.less

@@ -4,19 +4,21 @@
   display: inline-block;
   padding: 0.1em 0.5em;
   border-radius: @border-radius;
-  background: @control-bg;
+  background: var(--tag-bg);
-  color: @control-color;
+  color: var(--tag-color);
   text-transform: none;
 
   &.untagged {
-    background: transparent;
+    --tag-bg: transparent;
-    border: 1px dotted @muted-color;
+    --tag-color: @muted-color;
-    color: @muted-color;
+    border: 1px dotted;
   }
 
   &.colored {
+    --tag-color: @body-bg;
+
     .TagLabel-text {
-      color: @body-bg !important;
+      color: var(--tag-color) !important;
     }
   }
 
@@ -26,13 +28,9 @@
     font-size: 14px;
 
     &.colored {
+      --tag-color: var(--tag-bg);
       margin-right: 5px;
       background: @body-bg !important;
-      color: @muted-color;
-
-      .TagLabel-text {
-        color: inherit !important;
-      }
     }
   }
 }

extensions/tags/less/common/common.less

@@ -0,0 +1,3 @@
+@import "root";
+@import "TagLabel";
+@import "TagIcon";

extensions/tags/less/common/root.less

@@ -0,0 +1,4 @@
+:root {
+  --tag-bg: @control-bg;
+  --tag-color: @control-color;
+}

extensions/tags/less/forum.less

@@ -1,25 +1,36 @@
-@import "common/TagLabel";
+@import "common/common";
-@import "common/TagIcon";
 
 @import "forum/TagCloud";
 @import "forum/TagDiscussionModal";
+@import "forum/TagHero";
 @import "forum/TagTiles";
 
+.Button--tagColored {
+  --button-primary-bg: var(--color);
+  --button-primary-bg-hover: var(--color);
+  --button-primary-bg-active: var(--color);
+}
 .DiscussionHero {
   .item-title {
     display: block;
     margin-top: 15px;
   }
 }
-.TagLinkButton.child {
+.TagLinkButton {
-  @media @tablet-up {
+  &.child {
-    padding-top: 4px;
+    @media @tablet-up {
-    padding-bottom: 4px;
+      padding-top: 4px;
-  }
+      padding-bottom: 4px;
-  margin-left: 10px;
+    }
+    margin-left: 10px;
 
-  .TagIcon {
+    .TagIcon {
-    display: none;
+      display: none;
+    }
+  }
+
+  .active > & {
+    --sidenav-color-active: var(--color);
   }
 }
 .DiscussionComposer-changeTags {

extensions/tags/less/forum/TagHero.less

@@ -0,0 +1,5 @@
+.TagHero {
+  &--colored {
+    --hero-color: #fff;
+  }
+}

extensions/tags/less/forum/TagTiles.less

@@ -57,7 +57,7 @@
 
 .TagTile {
   position: relative;
-  background: @control-bg;
+  background: var(--tag-bg);
 
   &, a {
     color: @control-color;