Import color palette

[striata]

Hi,

I have created a color palette with external tools, and now I would like to import them into Cornerstone, so that they are available as global colors. Is there an import feature for colors? It is 4 colors with 15 shades each, which I would like to NOT have to create manually. Furthermore, Is it possible to have separate palettes for different brand colors (the shades of 1 brand color would be in 1 palette).

When I export the theme options, there is a section about global colors, which starts like this:

"_globals": {
        "colors": [
            {
                "title": "NewRed",
                "value": "rgb(240, 132, 122)",
                "_id": "f1d45c8c-9962-4b88-b951-47bb44a9d651"
            },
            {
                "title": "NewGreen",
                "value": "rgb(180, 218, 195)",
                "_id": "117a5032-5857-41d4-b5fe-ddd169ada6a5"
            },

Can I just edit this part of the theme options, and re-import it? Is there a syntax for several separate palettes?

[Ismael]

Hello @striata,

Thank you for the inquiry,

In the Cornerstone builder, go to Preferences > Settings and enable the Dev Toolkit option, then open the Dev Toolkit panel. In the Tools tab, look for Data Store > Colors, and click “Edit State”. This will open a JSON editor where you can manually modify the global color palette.

Please see the screenshot below.

Make sure that the _id values of the entries in the Global Color State are unique.

Let us know if you need more info.

Best regards,

[striata]

Thank you, @Ismael. That makes it easier, indeed!

In the user interface, one can expand/collapse the “Palette” section, suggestion that the “Palette” is just one of possibly several color groups.

1. How can I divide my colors into such groups/separate palettes? Do I just put several JSON arrays in the editor you pointed out?
2. How would I refer to them with dc/twig? Simply by their ID? Or would the “group” have to be included in the reference?

[Ismael]

Thank you for the update.

To create a group of colors, add an entry like this in the array – note the color ids in the children key

{
    "title": "Color Group 1",
    "locked": true,
    "_id": "colorGroup1",
    "children": [
      "colorGroup1A",
      "colorGroup1B",
      "colorGroup1C"
    ]
  },
  {
    "value": "rgba(255, 255, 255, 1)",
    "title": "Color 1A",
    "locked": true,
    "_id": "colorGroup1A"
  },
  {
    "value": "rgb(235, 236, 240)",
    "title": "Color 1B",
    "locked": true,
    "_id": "colorGroup1B"
  },
  {
    "value": "rgb(95, 97, 105)",
    "title": "Color 1C",
    "locked": true,
    "_id": "colorGroup1C"
  }

To access the colors using twig, try this code:

{{ global.color({"id":"colorGroup1A"}) }}

Hope this helps.

[striata]

That is great! Just one last question for clarification:
If, in your example, I changed the id of the color group like so:
{ "title": "Color Group 1", "locked": true, "_id": "abc123", "children": [ "colorGroup1A", "colorGroup1B", "colorGroup1C" ] }
Then the abc123 would show up nowhere in the twig statement, correct? It is only the id of the children (the actual colors) that are referenced?

[christian]

Hey @striata,

@striata

Then the abc123 would show up nowhere in the twig statement, correct?

Yes, correct.

@striata

It is only the id of the children (the actual colors) that are referenced?

Also, correct.