feat: contrast util with yiq calculator

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 getContrast from './utils/getContrast';
 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/getContrast': getContrast,
   'models/Notification': Notification,
   'models/User': User,
   'models/Post': Post,

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

@@ -0,0 +1,21 @@
+/**
+ * The `getContrast` utility converts a hex color to rgb, and then calcul a YIQ
+ * value in order to get the appropriate contrast value (is it dark or is it
+ * light?) See https://www.w3.org/TR/AERT/#color-contrast for references
+ */
+
+export default function getContrast(hexcolor: String) {
+
+  var 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 contrast = ((r*299)+(g*587)+(b*114))/1000;
+
+  return contrast;
+}

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;