apostrophe-cms

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


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?


Solution

  • 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
     }
    
    1. 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.