Improve change api (#628)

* fix: jsdoc comments

* more human casting of string values to boolean

* add coerceColour to get named colors to work

* cue can't pass isKeyOfType event check

* dont mutate value

* alloow cue in eventDef

* lint

* css named or hex formatting

* "sideEffects": false

* test colour hex regex

* roll eventDef back to master

* parse property

* don't export cssColour names

* remove import

* only allow string types to colour

* handle transparent colour

* mix alpha with bg colour

* only allow updating events

* descriptive names

* add test for getAccessibleColour

* readability

* move isColourHex to regex-utils

* simplify and add test

apps/client/src/common/utils/styleUtils.ts

@@ -13,13 +13,15 @@ type ColourCombination = {
 export const getAccessibleColour = (bgColour?: string): ColourCombination => {
   if (bgColour) {
     try {
-      const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
-      return { backgroundColor: bgColour, color: textColor };
+      const originalColour = Color(bgColour);
+      const backgroundColorMix = originalColour.alpha(1).mix(Color('#1a1a1a'), 1 - originalColour.alpha());
+      const textColor = backgroundColorMix.isLight() ? 'black' : '#fffffa';
+      return { backgroundColor: backgroundColorMix.hexa(), color: textColor };
     } catch (_error) {
       /* we do not handle errors here */
     }
   }
-  return { backgroundColor: '#000', color: '#fffffa' };
+  return { backgroundColor: '#1a1a1a', color: '#fffffa' };
 };
 
 /**