In this project it is required that a row color can be selected in the grid settings and based on that color a specific class will be added to the row. Color picker is what is asked for this on the CMS side.

Here is how the setting looks like:

{
"label": "Set a row background color",
"description": "Set a row background color",
"key": "class",
"view": "colorpicker",
"prevalues": [
  {
    "value": "#ffffff",
    "label": "white"
  },
  {
    "value": "#FAFAFA",
    "label": "light-grey"
  },
  {
    "value": "#D0D0CE",
    "label": "dark-gray"
  },
  {
    "value": "#A89968",
    "label": "stone"
  }
],
"applyTo": "row"


}

the class is supposed to be whatever is in the label field. However what I get in the html is this:

<div class="{
  "value": "f6f6f6",
  "label": "light-grey",
  "id": "1"
}">

and I would expect it to be

<div class="light-grey">

I tried using modifier but could get no further result. Anyone has any experience or knows where I could be going wrong.