How to get isVAR values using Raw Content?

Support
#1

Hi, I would like to create my own component for my Titles. for this I am using the following parameters:

{
  "text"	: {
    "type"	:	"text", 
    "label"	:	"Content"
  },
  
  "align"	: {
    "type"	:	"text", 
    "label"	:	"Align", 
    "initial"	:	"left",
    "isVar"	:	"true"
  },
  
	"color"	: {
		"type"	:	"color", 
		"label"	:	"Color"
  },
  
	"size"	: {
		"type"	:	"text", 
		"label"	:	"Size",
		"initial"	:	"var(--xxl-text)",
    "isVar": "true"
  },
  
	"width"	: {
		"type"	:	"text", 
		"label"	:	"Width",
		"initial"	:	"fit-content",
    "isVar": "true"
  },
  
	"tag"	: {
		"type"	:	"text", 
		"label"	:	"HTML Tag",
		"initial"	:	"p"
  }
}

As you can notice I am using the “isVar” option as I need these properties to vary depending on the screen size.

This is my HTML using the RAW Elementt:

<{{dc:p:tag}} class="text">{{dc:p:text}}</{{dc:p:tag}}>
<style>
  .text{
    color:{{dc:p:color}};
    font-size:{{dc:p:size}};
    text-align:{{dc:p:align}};
    width:{{dc:p:width}};"
  }
  @media (max-width: 979px){
    .text{
      font-size:{{dc:p:size}};
      text-align:{{dc:p:align}};
      width:{{dc:p:width}};"
    }
  @media screen and (max-width:767px){
    .text{
      font-size:{{dc:p:size}};
      text-align:{{dc:p:align}};
      width:{{dc:p:width}};"
    }
  @media screen and (max-width:480px){
    .text{
      font-size:{{dc:p:size}};
      text-align:{{dc:p:align}};
      width:{{dc:p:width}};"
    }
}
</style>

The problem is that I am not managing to call the “isVar” values. How can I do it?