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/less/common/root.less

@@ -30,6 +30,19 @@
 
   --error-color:                   @error-color;
 
+  // ---------------------------------
+  // UTILITIES
+
+  --text-on-dark:                  @text-on-dark;
+  --text-on-light:                 @text-on-light;
+
+  & when (@config-dark-mode = true) {
+    --yiq-threshold: 108;
+  }
+  & when (@config-dark-mode = false) {
+    --yiq-threshold: 138;
+  }
+
   // ---------------------------------
   // COMPONENTS
 

framework/core/less/common/scaffolding.less

@@ -159,3 +159,14 @@ blockquote ol:last-child {
   white-space: nowrap;
   width: 1px;
 }
+
+.text-contrast {
+  &--dark {
+    --contrast-color: var(--text-on-light);
+    color: var(--contrast-color);
+  }
+  &--light {
+    --contrast-color: var(--text-on-dark);
+    color: var(--contrast-color);
+  }
+}

framework/core/less/common/variables.less

@@ -15,6 +15,9 @@
 @secondary-hue:                    hue(@secondary-color);
 @secondary-sat:                    saturation(@secondary-color);
 
+@body-bg-light:                    #fff;
+@body-bg-dark:                     hsl(@secondary-hue, min(20%, @secondary-sat), 10%);
+
 // Derive the primary/secondary colors from the config variables. In dark mode,
 // we make the user-set colors a bit darker, otherwise they will stand out too
 // much.
@@ -23,7 +26,7 @@
   @primary-color:                  @config-primary-color;
   @secondary-color:                @config-secondary-color;
 
-  @body-bg:                        #fff;
+  @body-bg:                        @body-bg-light;
   @text-color:                     #111;
   @link-color:                     saturate(@primary-color, 10%);
   @heading-color:                  @text-color;
@@ -45,7 +48,7 @@
   @primary-color:                  @config-primary-color;
   @secondary-color:                @config-secondary-color;
 
-  @body-bg:                        hsl(@secondary-hue, min(20%, @secondary-sat), 10%);
+  @body-bg:                        @body-bg-dark;
   @text-color:                     #ddd;
   @link-color:                     saturate(@primary-color, 10%);
   @heading-color:                  @text-color;
@@ -68,8 +71,8 @@
 // of the parents element's background. This allow not to change the color
 // variable depending on the dark/light mode to get the same final color, and
 // thus to simplify the logic.
-@text-on-dark:                     #ddd;
-@text-on-light:                    #111;
+@text-on-dark:                     @body-bg-light;
+@text-on-light:                    @body-bg-dark;
 
 @hero-bg:                          @control-bg;
 @hero-color:                       @control-color;

framework/core/less/forum/Hero.less

@@ -2,7 +2,7 @@
   margin-top: -1px;
   background: var(--hero-bg);
   text-align: center;
-  color: var(--hero-color);
+  color: var(--contrast-color, var(--hero-color));
 
   h2 {
     margin: 0;