How to add a color separately to text shadow/Box Shadow in apostrophe CMS pallete

Question

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?

Answer 1

I got this answer on discord community and the following works.

This can be achieved by giving two controls.

1. One would set the color as variable on :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
 }

2. Now use 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.