Constrain to accessible contrast

Author: johno

packages/gui/src/lib/color.ts

@@ -1,21 +1,89 @@
-import { isBoolean, isNumber, isObject, isString, sample } from 'lodash-es'
+import {
+  cloneDeep,
+  isBoolean,
+  isNumber,
+  isObject,
+  isString,
+  sample,
+} from 'lodash-es'
+import getContrast from 'get-contrast'
 import { ThemeColor } from '../components/primitives/ColorPicker/PalettePicker'
 import { RegenOptions } from '../components/schemas/types'
 import { Color } from '../types/css'
+import { themeGet } from './theme'
+
+const CONTRAST_THRESHOLD = 4.5
+const CONTRAST_PROPERTY_MAP: Record<string, string> = {
+  color: 'backgroundColor',
+  backgroundColor: 'color',
+}
+
+const getColorToContrastWith = (
+  property: string,
+  ruleset: Record<string, any>,
+  theme?: any
+) => {
+  const valueOrPath = ruleset[CONTRAST_PROPERTY_MAP[property]]
+  return themeGet({
+    theme,
+    path: valueOrPath.path || valueOrPath,
+    property: 'color',
+  })
+}
+
+const hasContrastToCheck = (
+  property?: string,
+  ruleset?: Record<string, any>,
+  theme?: any
+) => {
+  if (!property || !ruleset) {
+    return false
+  }
+
+  return !!getColorToContrastWith(property, ruleset, theme)
+}
 
 export function randomColor({
   theme,
   ruleset,
   property,
 }: RegenOptions<Color | ThemeColor>) {
-  console.log('!!!!', ruleset, property)
-  if (theme && theme.colors) {
-    const path = sample(Object.keys(flatten(theme.colors)))
+  if (!theme?.colors) {
+    return randomHexColor()
+  }
+
+  const allColors = cloneDeep(theme.colors)
+  // @ts-ignore
+  delete allColors.modes
 
-    return path
+  const colors = flatten(allColors)
+
+  if (!hasContrastToCheck(property, ruleset, theme)) {
+    return sample(Object.keys(colors))
   }
 
-  return randomHexColor()
+  const colorToContrastWith = getColorToContrastWith(property!, ruleset, theme)
+  const colorsWithContrast = Object.entries(colors).reduce(
+    (acc: string[], curr) => {
+      const [path, value] = curr
+
+      try {
+        if (
+          getContrast.ratio(value, colorToContrastWith) >= CONTRAST_THRESHOLD
+        ) {
+          console.log(getContrast.ratio(value, colorToContrastWith))
+          return [...acc, path]
+        }
+      } catch (e) {}
+
+      return acc
+    },
+    []
+  )
+
+  return colorsWithContrast.length
+    ? sample(colorsWithContrast)
+    : sample(Object.keys(colors))
 }
 
 export function randomHexColor() {

packages/gui/src/types/modules.d.ts

@@ -1,2 +1,3 @@
 declare module 'culori'
 declare module 'escape-html'
+declare module 'get-contrast'