Merge pull request #518 from components-ai/contrast

Constrain to accessible contrasts when generating colors

Author: johno

.changeset/grumpy-apples-agree.md

@@ -0,0 +1,5 @@
+---
+"@compai/css-gui": patch
+---
+
+Constrain to accessible contrasts when generating colors

packages/gui/src/components/Editor/Controls.tsx

@@ -52,7 +52,7 @@ interface ControlProps extends InputProps {
   showRemove?: boolean
 }
 const Control = ({ field, showRemove = false, ...props }: ControlProps) => {
-  const { getField, setField, removeField } = useEditor()
+  const { getField, getParentField, setField, removeField } = useEditor()
   const { removeDynamicProperty } = useDynamicControls()
   const fieldset = useFieldset()
   const property = getPropertyFromField(field)
@@ -99,6 +99,8 @@ const Control = ({ field, showRemove = false, ...props }: ControlProps) => {
         setField(fullField, newValue)
       }}
       onRemove={showRemove ? handleRemoveProperty : undefined}
+      ruleset={getParentField(fullField)}
+      property={property}
     />
   )
 }
@@ -196,8 +198,12 @@ export const Editor = ({
   function regenerateAll(): any {
     return mapValues(allStyles, (value, property) => {
       return (
-        properties[property].regenerate?.({ theme, previousValue: value }) ??
-        value
+        properties[property].regenerate?.({
+          theme,
+          previousValue: value,
+          ruleset: allStyles,
+          property,
+        }) ?? value
       )
     })
   }

packages/gui/src/components/inputs/SchemaInput.tsx

@@ -8,6 +8,8 @@ interface Props<T> {
   schema: DataTypeSchema<T>
   label: string
   value: T
+  ruleset?: any
+  property?: string
   onChange(value: T): void
   onRemove?(): void
   onDrag?(): void
@@ -26,12 +28,22 @@ export function SchemaInput<T>({
   label,
   value,
   onChange,
+  ruleset,
+  property,
   ...props
 }: Props<T>) {
   const Input = schema.input
   const InlineInput = schema.inlineInput
 
-  const content = Input && <Input label="" value={value} onChange={onChange} />
+  const content = Input && (
+    <Input
+      label=""
+      value={value}
+      onChange={onChange}
+      ruleset={ruleset}
+      property={property}
+    />
+  )
   const { hasBlockInput = () => !!content } = schema
   return (
     <Collapsible.Root defaultOpen>
@@ -41,6 +53,8 @@ export function SchemaInput<T>({
         label={label}
         value={value}
         onChange={onChange}
+        ruleset={ruleset}
+        property={property}
       >
         {hasBlockInput(value) && (
           <Collapsible.Trigger asChild>
@@ -58,7 +72,13 @@ export function SchemaInput<T>({
           </Collapsible.Trigger>
         )}
         {InlineInput && (
-          <InlineInput label="" value={value} onChange={onChange} />
+          <InlineInput
+            label=""
+            value={value}
+            onChange={onChange}
+            ruleset={ruleset}
+            property={property}
+          />
         )}
       </InputHeader>
       {content && <Collapsible.Content>{content}</Collapsible.Content>}

packages/gui/src/components/inputs/SelectInput.tsx

@@ -7,6 +7,8 @@ interface Props<T extends string> {
   onRemove?: () => void
   value: T
   options: readonly T[]
+  ruleset?: any
+  property?: string
 }
 // A select input with a label
 export function SelectInput<T extends string>(props: Props<T>) {

packages/gui/src/components/primitives/ColorPicker/Field.tsx

@@ -20,6 +20,8 @@ export interface Props {
    * the regenerate button. If not provided, uses the default random color generator.
    */
   onRegenerate?(theme?: Theme): Color
+  ruleset?: any
+  property?: string
 }
 
 /**
@@ -32,6 +34,8 @@ export default function ColorPicker({
   title,
   onRemove,
   onRegenerate,
+  ruleset,
+  property,
 }: Props) {
   return (
     <div>
@@ -68,7 +72,13 @@ export default function ColorPicker({
                 return
               } else {
                 // Otherwise, regenerate a random color based on theme
-                const path = randomColor(theme) ?? randomHexColor()
+                const path =
+                  randomColor({
+                    theme,
+                    ruleset,
+                    previousValue: value,
+                    property,
+                  }) ?? randomHexColor()
                 const color = themeGet({
                   theme,
                   path,

packages/gui/src/components/providers/EditorContext.tsx

@@ -2,7 +2,7 @@ import { ThemeProvider as ThemeUIProvider } from 'theme-ui'
 import { get, unset } from 'lodash-es'
 import { createContext, ReactNode, useContext } from 'react'
 import { KeyArg, Recipe, EditorData } from './types'
-import { applyRecipe } from './util'
+import { applyRecipe, parentPath } from './util'
 import { ThemeProvider, useTheme } from './ThemeContext'
 import { EditorConfigProvider, EditorConfig } from './EditorConfigContext'
 import { theme as uiTheme } from '../ui/theme'
@@ -14,6 +14,7 @@ export interface EditorContextValue<V> extends EditorData<V> {
   theme?: Theme
   setValue(value: Recipe<V>): void
   getField<T = any>(key: KeyArg): T
+  getParentField<T = any>(key: KeyArg): T
   setField<T>(key: KeyArg, value: Recipe<T>): void
   setFields<T>(fields: Record<string, Recipe<T>>, removeFields?: KeyArg[]): void
   removeField(key: KeyArg): void
@@ -29,6 +30,14 @@ export function useEditor() {
     return field ? (get(value, field) as T) : value
   }
 
+  function getParentField<T = any>(field: KeyArg | undefined) {
+    if (!field || !Array.isArray(field)) {
+      return value
+    }
+
+    return get(value, parentPath(field))
+  }
+
   function getFields<T = any>(fields: KeyArg[] | undefined) {
     const fieldsValue = fields?.reduce((acc: any, curr: KeyArg) => {
       const fieldValue = get(value, curr) as T
@@ -83,6 +92,7 @@ export function useEditor() {
   return {
     ...context,
     getField,
+    getParentField,
     getFields,
     setField,
     setFields,

packages/gui/src/components/providers/util.ts

@@ -6,6 +6,12 @@ export function joinPath(path1: KeyArg, path2: KeyArg): KeyPath {
   return [...toPath(path1), ...toPath(path2)]
 }
 
+export function parentPath(path: KeyPath): KeyPath {
+  const parentPath = [...path]
+  parentPath.pop()
+  return parentPath
+}
+
 // lib/util's set and get functions don't handle the case
 // of setting a nested path when parent paths don't exist,
 // so we make our own functions for now

packages/gui/src/components/schemas/color.ts

@@ -1,7 +1,5 @@
-import { get } from 'theme-ui'
 import { themeGet } from '../../lib'
 import { randomColor, randomHexColor } from '../../lib/color'
-import { stringifyUnit } from '../../lib/stringify'
 import { Color } from '../../types/css'
 import { ColorInput } from '../inputs/ColorInput'
 import PalettePopover, {
@@ -22,8 +20,10 @@ function rawColor({
     inlineInput: ColorInput,
     stringify: (value) => value,
     defaultValue,
-    regenerate: ({ theme }) => {
-      const path = randomColor(theme) || randomHexColor()
+    regenerate: (...args) => {
+      const path = randomColor(...args) || randomHexColor()
+      const theme = args?.[0]?.theme
+
       return themeGet({
         theme,
         path,
@@ -55,8 +55,8 @@ const themeColor: DataTypeSchema<ThemeColor> = {
     })
   },
   defaultValue: { type: 'theme', path: 'primary' },
-  regenerate: ({ theme }) => {
-    const path = randomColor(theme) ?? ''
+  regenerate: (...args) => {
+    const path = randomColor(...args) ?? ''
     const color: ThemeColor = { type: 'theme', path }
     return color
   },

packages/gui/src/components/schemas/options.tsx

@@ -34,14 +34,11 @@ export function optionsSchema<T extends Record<string, any>>({
     )
   }
   function regenerate({
-    theme,
     previousValue,
+    ...options
   }: RegenOptions<Unionize<T>>): Unionize<T> {
     const type = getType(previousValue)
-    const newValue = variants[type].regenerate?.({
-      theme,
-      previousValue,
-    })
+    const newValue = variants[type].regenerate?.({ previousValue, ...options })
     return newValue ?? previousValue
   }
 

packages/gui/src/components/schemas/types.ts

@@ -34,6 +34,8 @@ export interface DataTypeSchema<T> {
 export interface RegenOptions<T> {
   previousValue: T
   theme?: Theme
+  ruleset?: any
+  property?: string
 }
 
 export type SchemaVariants<T> = { [V in keyof T]: DataTypeSchema<T[V]> }

packages/gui/src/components/ui/InputHeader.tsx

@@ -32,6 +32,8 @@ export function InputHeader({
   onDragEnd,
   regenerate,
   reorder,
+  ruleset,
+  property,
 }: Props) {
   const theme = useTheme()
   return (
@@ -61,7 +63,9 @@ export function InputHeader({
             title="regenerate"
             sx={{ transition: 'opacity 150ms' }}
             onClick={() => {
-              onChange(regenerate({ theme, previousValue: value }))
+              onChange(
+                regenerate({ theme, previousValue: value, ruleset, property })
+              )
             }}
           >
             <RefreshCw size={12} />

packages/gui/src/lib/color.ts

@@ -1,14 +1,88 @@
-import { isBoolean, isNumber, isObject, isString, sample } from 'lodash-es'
-import { Theme } from '../types/theme'
+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'
 
-export function randomColor(theme?: Theme) {
-  if (theme && theme.colors) {
-    const path = sample(Object.keys(flatten(theme.colors)))
+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>) {
+  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
+        ) {
+          return [...acc, path]
+        }
+      } catch (e) {}
+
+      return acc
+    },
+    []
+  )
+
+  return colorsWithContrast.length
+    ? sample(colorsWithContrast)
+    : sample(Object.keys(colors))
 }
 
 export function randomHexColor() {

packages/gui/src/types/editor.ts

@@ -2,6 +2,8 @@ export interface EditorProps<T, K = never> {
   value: T | K
   onChange(newValue: T | K): void
   onRemove?(): void
+  ruleset?: any
+  property?: string
 }
 
 export type EditorPropsWithLabel<T, K = never> = EditorProps<T, K> & {

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

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