diff --git a/website/src/components/controls/InheritedColorControl.js b/website/src/components/controls/InheritedColorControl.js index 18c40da60..e45be4ce3 100644 --- a/website/src/components/controls/InheritedColorControl.js +++ b/website/src/components/controls/InheritedColorControl.js @@ -23,6 +23,8 @@ const themeProperties = ['background', 'grid.line.stroke', 'labels.text.fill'].m value: prop, })) +const defaultInheritableProperties = ['color'] + const InheritedColorControl = ({ id, property, @@ -32,8 +34,8 @@ const InheritedColorControl = ({ defaultCustomColor, defaultThemeProperty, defaultFrom, - inheritableProperties, onChange, + options: { inheritableProperties = defaultInheritableProperties } = {}, }) => { const [customColor, setCustomColor] = useState(isString(value) ? value : defaultCustomColor) const [themeProp, setThemeProp] = useState( @@ -64,6 +66,16 @@ const InheritedColorControl = ({ }, [onChange, setThemeProp] ) + const handleFromPropertyChange = useCallback( + value => { + setFromProp(value.value) + onChange({ + from: value.value, + modifiers, + }) + }, + [onChange, setThemeProp] + ) const handleModifierChange = useCallback( index => modifier => { const newModifiers = [...modifiers] @@ -117,7 +129,7 @@ const InheritedColorControl = ({