feat: contrast util with yiq calculator (#3652)

* add yiq calculator util

* fix: convert 3 chars hex to 6 chars hex

* fix: clarify util name

* feat: add text color variables not depending on the dark/light mode

* refactor: change getContrast to isDark with for a more direct approach

* fix: adjust snippet description

* chore: change `var` to `let`

Co-authored-by: David Wheatley <david@davwheat.dev>

Author: ornanovitch

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

@@ -33,6 +33,7 @@ import formatNumber from './utils/formatNumber';
 import mapRoutes from './utils/mapRoutes';
 import withAttr from './utils/withAttr';
 import * as FocusTrap from './utils/focusTrap';
+import isDark from './utils/isDark';
 import Notification from './models/Notification';
 import User from './models/User';
 import Post from './models/Post';
@@ -120,6 +121,7 @@ export default {
   'utils/throttleDebounce': ThrottleDebounce,
   'utils/isObject': isObject,
   'utils/focusTrap': FocusTrap,
+  'utils/isDark': isDark,
   'models/Notification': Notification,
   'models/User': User,
   'models/Post': Post,

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

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+export default function isDark(hexcolor: String) {
+  let hexnumbers = hexcolor.replace("#", "");
+
+  if (hexnumbers.length == 3) {
+    hexnumbers += hexnumbers;
+  }
+
+  const r = parseInt(hexnumbers.substr(0,2),16);
+  const g = parseInt(hexnumbers.substr(2,2),16);
+  const b = parseInt(hexnumbers.substr(4,2),16);
+  const yiq = ((r*299)+(g*587)+(b*114))/1000;
+
+  return (yiq >= 128) ? false : true;
+}

framework/core/less/common/variables.less

@@ -64,6 +64,13 @@
   @code-color:                     #fff;
 }
 
+// Beyond dark or light mode, we need stable colors depending on the luminosity
+// 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;
+
 @hero-bg:                          @control-bg;
 @hero-color:                       @control-color;
 @hero-muted-color:                 @control-color;