The problem is if I give the type as string
the user will not be able to select a color from the color picker and if I give the type as color
and templateValue
to achieve this, the user will be able to select a color from the picker but not the string value (e.g 2px 2px
) as that will remain hard-coded. How can I achieve this?
I got this answer on discord community and the following works.
This can be achieved by giving two controls.
:root
. customBoxShadowColor:{
label: 'Text Shadow Color',
type: 'color,
selector: 'h1',
property: "--text-shadow-color" //This is important as this variable will hold the value that can be used later
}
valueTemplate
in the second control and use the above variable
textShadow: {
label: 'Text Shadow',
valueTemplate: '%VALUE% var(--text-shadow-color)'
}
Similarly, it can be done for box-shadow
or any other similar html inputs as well.