fix(tags): tag text color contrast (#3653)

* add yiq calculator util
* use the new contast util to differentiate light/dark tags
* fix: invert logic
* feat: add tag-dark and tag-light less config
* fix: convert 3 chars hex to 6 chars hex
* fix: rename import
* fix: clarify util name
* fix: rename function
* fix: invert less variables when dark mode is enabled
* fix: TagTiles contrast
* refactor: simplify logic with a unique variable
* refactor: simplify logic with a unique variable
* feat: add text color variables not depending on the dark/light mode
* refactor: use isDark rather than getContrast
* refactor: change getContrast to isDark with for a more direct approach
* fix: adjust snippet description
* refactor: change getContrast to isDark with for a more direct approach
* fix: adjust snippet description
* fix: TagHero contrast
* fix: DiscussionHero contrast
* fix: newDiscussion contrast
* fix(newDiscussion): restore less rule when tag is not colored
* fix: TagTiles description
* fix: TagTiles last posted
* chore: change `var` to `let`
* refactor: keep it for backwards compatibility
* refactor: keep it for backwards compatibility
* Apply suggestions from code review
* fix: missed this when I was resolving
* fix: remove dist files from pull request
* Revert "Resolved merge conflict"
This reverts commit c7f0d14aa8, reversing
changes made to 6753dfc2af.
* fix: missed this when I was resolving
* fix
* Update isDark.ts
* chore: flexible contrast color fixing
* refactor(isDark): clarify the doc block
* fix(isDark): increase the yiq threshold
* typo
* fix: preserve design coloring through light and dark modes

Co-authored-by: David Wheatley <david@davwheat.dev>
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>

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

@@ -1,5 +1,7 @@
 import extract from 'flarum/common/utils/extract';
 import Link from 'flarum/common/components/Link';
+import classList from 'flarum/common/utils/classList';
+import textContrastClass from 'flarum/common/helpers/textContrastClass';
 import tagIcon from './tagIcon';
 
 export default function tagLabel(tag, attrs = {}) {
@@ -13,7 +15,7 @@ export default function tagLabel(tag, attrs = {}) {
     const color = tag.color();
     if (color) {
       attrs.style['--tag-bg'] = color;
-      attrs.className += ' colored';
+      attrs.className = classList(attrs.className, 'colored', textContrastClass(color));
     }
 
     if (link) {

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

@@ -5,6 +5,7 @@ import IndexPage from 'flarum/forum/components/IndexPage';
 import DiscussionListState from 'flarum/forum/states/DiscussionListState';
 import GlobalSearchState from 'flarum/forum/states/GlobalSearchState';
 import classList from 'flarum/common/utils/classList';
+import textContrastClass from 'flarum/common/helpers/textContrastClass';
 
 import TagHero from './components/TagHero';
 import Tag from '../common/models/Tag';
@@ -90,7 +91,7 @@ export default function () {
       const newDiscussion = items.get('newDiscussion') as Mithril.Vnode<ComponentAttrs, {}>;
 
       if (color) {
-        newDiscussion.attrs.className = classList([newDiscussion.attrs.className, 'Button--tagColored']);
+        newDiscussion.attrs.className = classList([newDiscussion.attrs.className, 'Button--tagColored', textContrastClass(color)]);
         newDiscussion.attrs.style = { '--color': color };
       }
 

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

@@ -1,6 +1,8 @@
 import { extend } from 'flarum/common/extend';
 import DiscussionListItem from 'flarum/forum/components/DiscussionListItem';
 import DiscussionHero from 'flarum/forum/components/DiscussionHero';
+import textContrastClass from 'flarum/common/helpers/textContrastClass';
+import classList from 'flarum/common/utils/classList';
 
 import tagsLabel from '../common/helpers/tagsLabel';
 import sortTags from '../common/utils/sortTags';
@@ -23,7 +25,7 @@ export default function () {
       const color = tags[0].color();
       if (color) {
         view.attrs.style = { '--hero-bg': color };
-        view.attrs.className += ' DiscussionHero--colored';
+        view.attrs.className = classList(view.attrs.className, 'DiscussionHero--colored', textContrastClass(color));
       }
     }
   });

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

@@ -1,5 +1,7 @@
 import Component from 'flarum/common/Component';
+import textContrastClass from 'flarum/common/helpers/textContrastClass';
 import tagIcon from '../../common/helpers/tagIcon';
+import classList from 'flarum/common/utils/classList';
 
 export default class TagHero extends Component {
   view() {
@@ -7,7 +9,10 @@ export default class TagHero extends Component {
     const color = tag.color();
 
     return (
-      <header className={'Hero TagHero' + (color ? ' TagHero--colored' : '')} style={color ? { '--hero-bg': color } : ''}>
+      <header
+        className={classList('Hero', 'TagHero', { 'TagHero--colored': color }, textContrastClass(color))}
+        style={color ? { '--hero-bg': color } : ''}
+      >
         <div className="container">
           <div className="containerNarrow">
             <h2 className="Hero-title">

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

@@ -4,6 +4,8 @@ import Link from 'flarum/common/components/Link';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import listItems from 'flarum/common/helpers/listItems';
 import humanTime from 'flarum/common/helpers/humanTime';
+import textContrastClass from 'flarum/common/helpers/textContrastClass';
+import classList from 'flarum/common/utils/classList';
 
 import tagIcon from '../../common/helpers/tagIcon';
 import tagLabel from '../../common/helpers/tagLabel';
@@ -58,7 +60,7 @@ export default class TagsPage extends Page {
                 const children = sortTags(tag.children() || []);
 
                 return (
-                  <li className={'TagTile ' + (tag.color() ? 'colored' : '')} style={{ '--tag-bg': tag.color() }}>
+                  <li className={classList('TagTile', { colored: tag.color() }, textContrastClass(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/common/TagLabel.less

@@ -16,7 +16,7 @@
   }
 
   &.colored {
-    --tag-color: @body-bg;
+    --tag-color: var(--contrast-color, var(--body-bg));
 
     .TagLabel-text {
       color: var(--tag-color) !important;
@@ -31,13 +31,13 @@
     &.colored {
       --tag-color: var(--tag-bg);
       margin-right: 5px;
-      background: @body-bg !important;
+      background-color: var(--contrast-color, var(--body-bg));
     }
   }
 }
 .DiscussionHero--colored {
   &, a {
-    color: @body-bg;
+    color: var(--contrast-color, var(--body-bg));
   }
 }
 .TagsLabel {

extensions/tags/less/forum.less

@@ -9,6 +9,7 @@
   --button-primary-bg: var(--color);
   --button-primary-bg-hover: var(--color);
   --button-primary-bg-active: var(--color);
+  --button-color: var(--contrast-color);
 }
 .DiscussionHero {
   .item-title {

extensions/tags/less/forum/TagHero.less

@@ -1,5 +1,5 @@
 .TagHero {
   &--colored {
-    --hero-color: #fff;
+    --hero-color: var(--body-bg);
   }
 }

extensions/tags/less/forum/TagTiles.less

@@ -64,7 +64,7 @@
   }
   &.colored {
     &, a {
-      color: @body-bg;
+      color: var(--contrast-color, var(--body-bg));
     }
   }
 }
@@ -100,10 +100,7 @@
 .TagTile-description {
   font-size: 12px;
   margin: 0 0 10px;
-
-  .TagTile.colored & {
-    color: fade(@body-bg, 70%);
-  }
+  opacity: 70%;
 }
 .TagTile-children {
   font-weight: bold;
@@ -124,10 +121,7 @@
   font-size: 12px;
   border-top: 1px solid rgba(0, 0, 0, 0.15);
   margin: 0 20px;
-
-  .TagTile.colored & {
-    color: fade(@body-bg, 70%);
-  }
+  opacity: 70%;
 
   &:hover .TagTile-lastPostedDiscussion-title {
     text-decoration: underline;