Improve highlight colours

frontend/package.json

@@ -16,6 +16,7 @@
     "@microsoft/microsoft-graph-client": "^3.0.5",
     "@vercel/analytics": "^1.0.1",
     "accept-language": "^3.0.18",
+    "chroma.ts": "^1.0.10",
     "gapi-script": "^1.2.0",
     "hue-map": "^1.0.0",
     "i18next": "^22.5.1",

frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx

@@ -115,7 +115,7 @@ const AvailabilityEditor = ({
                       backgroundColor: (
                         (!(mode.current === 'remove' && selecting.includes(cell.serialized)) && value.includes(cell.serialized))
                         || (mode.current === 'add' && selecting.includes(cell.serialized))
-                      ) ? palette[1] : palette[0],
+                      ) ? palette[1].string : palette[0].string,
                       ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },
                       ...cell.minute === 30 && { borderTopStyle: 'dotted' },
                     }}

frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss

@@ -113,8 +113,8 @@
     45deg,
     transparent,
     transparent 4.3px,
-    rgba(0,0,0,.5) 4.3px,
-    rgba(0,0,0,.5) 8.6px
+    var(--highlight-color, rgba(0,0,0,.5)) 4.3px,
+    var(--highlight-color, rgba(0,0,0,.5)) 8.6px
   );
 }
 

frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -79,6 +79,7 @@ const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps
           if (tempFocus) {
             peopleHere = peopleHere.filter(p => p === tempFocus)
           }
+          const color = palette[tempFocus && peopleHere.length ? max : peopleHere.length]
 
           return <div
             key={y}
@@ -87,10 +88,11 @@ const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps
               (focusCount === undefined || focusCount === peopleHere.length) && highlight && (peopleHere.length === max || tempFocus) && peopleHere.length > 0 && styles.highlight,
             )}
             style={{
-              backgroundColor: (focusCount === undefined || focusCount === peopleHere.length) ? palette[tempFocus && peopleHere.length ? max : peopleHere.length] : 'transparent',
+              backgroundColor: (focusCount === undefined || focusCount === peopleHere.length) ? color.string : 'transparent',
+              '--highlight-color': color.highlight,
               ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },
               ...cell.minute === 30 && { borderTopStyle: 'dotted' },
-            }}
+            } as React.CSSProperties}
             aria-label={peopleHere.join(', ')}
             onMouseEnter={e => {
               const cellBox = e.currentTarget.getBoundingClientRect()

frontend/src/components/Legend/Legend.module.scss

@@ -39,7 +39,7 @@
     45deg,
     transparent,
     transparent 4.5px,
-    rgba(0,0,0,.5) 4.5px,
-    rgba(0,0,0,.5) 9px
+    var(--highlight-color, rgba(0,0,0,.5)) 4.5px,
+    var(--highlight-color, rgba(0,0,0,.5)) 9px
   );
 }

frontend/src/components/Legend/Legend.tsx

@@ -8,7 +8,7 @@ interface LegendProps {
   min: number
   max: number
   total: number
-  palette: string[]
+  palette: { string: string, highlight: string }[]
   onSegmentFocus: (segment: number | undefined) => void
 }
 
@@ -29,7 +29,7 @@ const Legend = ({ min, max, total, palette, onSegmentFocus }: LegendProps) => {
       {[...Array(max + 1 - min).keys()].map(i => i + min).map(i =>
         <div
           key={i}
-          style={{ flex: 1, backgroundColor: palette[i] }}
+          style={{ flex: 1, backgroundColor: palette[i].string, '--highlight-color': palette[i].highlight } as React.CSSProperties}
           className={highlight && i === max && max > 0 ? styles.highlight : undefined}
           onMouseOver={() => onSegmentFocus(i)}
         />

frontend/src/hooks/usePalette.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { color } from 'chroma.ts'
 import { createPalette } from 'hue-map'
 
 import { useStore } from '/src/stores'
@@ -7,8 +8,16 @@ import useSettingsStore from '/src/stores/settingsStore'
 export const usePalette = (steps: number) => {
   const colormap = useStore(useSettingsStore, state => state.colormap)
 
-  return useMemo(() => createPalette({
+  return useMemo(() =>
+    createPalette({
       map: (colormap === undefined || colormap === 'crabfit') ? [[0, [247, 158, 0, 0]], [1, [247, 158, 0, 255]]] : colormap,
       steps,
-  }).format(), [steps, colormap])
+    })
+      .format('rgba')
+      .map(([r, g, b, a]) => color(r, g, b, a / 255))
+      .map(c => ({
+        string: c.hex('rgba'),
+        highlight: c.luminance() > .5 ? c.darker().hex('rgba') : c.brighter().hex('rgba'),
+      })),
+  [steps, colormap])
 }

frontend/yarn.lock

@@ -643,6 +643,11 @@ chalk@^4.0.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chroma.ts@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/chroma.ts/-/chroma.ts-1.0.10.tgz#2b965d8f2c2eee44d25072902e5787fe259d4565"
+  integrity sha512-0FOQiB6LaiOwoyaxP+a4d3sCIOSf7YvBKj3TfeQM4ZBb2yskRxe4FlT2P4YNpHz7kIB5rXsfmpyniyrYRRyVHw==
+
 client-only@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"