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>

framework/core/js/src/common/compat.ts

@@ -81,6 +81,7 @@ import highlight from './helpers/highlight';
 import username from './helpers/username';
 import userOnline from './helpers/userOnline';
 import listItems from './helpers/listItems';
+import textContrastClass from './helpers/textContrastClass';
 import Fragment from './Fragment';
 import DefaultResolver from './resolvers/DefaultResolver';
 import PaginatedListState from './states/PaginatedListState';
@@ -175,6 +176,7 @@ export default {
   'helpers/username': username,
   'helpers/userOnline': userOnline,
   'helpers/listItems': listItems,
+  'helpers/textContrastClass': textContrastClass,
   'resolvers/DefaultResolver': DefaultResolver,
   'states/PaginatedListState': PaginatedListState,
   'states/AlertManagerState': AlertManagerState,

framework/core/js/src/common/helpers/textContrastClass.ts

@@ -0,0 +1,5 @@
+import isDark from '../utils/isDark';
+
+export default function textContrastClass(hexcolor: string): string {
+  return isDark(hexcolor) ? 'text-contrast--light' : 'text-contrast--dark';
+}

framework/core/js/src/common/utils/isDark.ts

@@ -1,11 +1,13 @@
 /**
- * The `isDark` utility converts a hex color to rgb, and then calcul a YIQ
- * value in order to get the appropriate brightness value (is it dark or is it
- * light?) See https://www.w3.org/TR/AERT/#color-contrast for references. A YIQ
- * value >= 128 is a light color.
+ * The `isDark` utility converts a hex color to rgb, and then calculates a YIQ
+ * value in order to get the appropriate brightness value. See
+ * https://www.w3.org/TR/AERT/#color-contrast for references.
+ *
+ * A YIQ value >= 128 corresponds to a light color according to the W3C
+ * standards, but we use a custom threshold for each light and dark modes
+ * to preserve design consistency.
  */
-
-export default function isDark(hexcolor: String) {
+export default function isDark(hexcolor: string): boolean {
   let hexnumbers = hexcolor.replace('#', '');
 
   if (hexnumbers.length == 3) {
@@ -17,5 +19,7 @@ export default function isDark(hexcolor: String) {
   const b = parseInt(hexnumbers.substr(4, 2), 16);
   const yiq = (r * 299 + g * 587 + b * 114) / 1000;
 
-  return yiq >= 128 ? false : true;
+  const threshold = parseInt(window.getComputedStyle(document.body).getPropertyValue('--yiq-threshold'));
+
+  return yiq < threshold;
 }