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]> }