Import Brand Kit

Wishlist
1

It could be really interesting to import a brand kit :

SVG & PNG files
Fonts files
Colour palet with a CSV/JSON file with all hex code + colour name attribute

2

@doctorproject

Do you have any sample of JSON file for colors?

3

Actually here a sample that I would use :

[
{
“ColorID”: 123456,
“ColorName”: “Lavender Mist”,
“ColorRGBA”: “239,232,253,1”,
“ColorHEX”: “#EFE8FD”
},
{
“ColorID”: 789012,
“ColorName”: “Brilliant Lavender”,
“ColorRGBA”: “208,187,250,1”,
“ColorHEX”: “#D0BBFA”
},
{
“ColorID”: 345678,
“ColorName”: “Medium Slate Blue”,
“ColorRGBA”: “161,119,244,1”,
“ColorHEX”: “#A177F4”
},
{
“ColorID”: 901234,
“ColorName”: “Iron”,
“ColorRGBA”: “230,231,232,1”,
“ColorHEX”: “#E6E7E8”
},
{
“ColorID”: 567890,
“ColorName”: “Manatee”,
“ColorRGBA”: “204,206,210,1”,
“ColorHEX”: “#CCCED2”
},
{
“ColorID”: 234567,
“ColorName”: “Gray Chateau”,
“ColorRGBA”: “179,182,187,1”,
“ColorHEX”: “#B3B6BB”
}
]

4

@doctorproject

Thanks, I am working on export/import functionality of backups, so this will be possible in near future.

Until then, you can manually import large datasets if needed from console.

Iterate your JSON in console and use following code for each of repetition:

colors.Fn('create', {name: 'color-name', value: '#FFF'});
3 Likes
5

I had to make use of this building my latest site and it worked out great!

One caveat is to make sure you do NOT already have the same color hex imported. If you don, when you select the color to apply to an element, it will select ALL the color variables matching the hex and it will not apply the color correctly.

Here is a quick JavaScript you can use to import colors generated at https://materialpalettes.com/

const palette = {}; // replace {} on this line with the entire palette object from https://materialpalettes.com/

const arrOfColors = [];

const themeColors = Object.keys(palette).map((key) => {
  Object.keys(palette[key]).forEach((color) => {
    arrOfColors.push({
      name: `${key.toLocaleLowerCase()}-${color}`,
      value: palette[key][color],
    });
  });
});

for (const color of arrOfColors) {
  // console.log(`{ name: "${color.name}", value: "${color.value}" }`);
  colors.Fn("create", { name: color.name, value: color.value });
}

And here is a quick video tutorial to demonstrate how it all works.

I had to make use of this building my latest site and it worked out great!

One caveat is to make sure you do NOT already have the same color hex imported. If you don, when you select the color to apply to an element, it will select ALL the color variables matching the hex and it will not apply the color correctly.

Here is a quick JavaScript you can use to import colors generated at https://materialpalettes.com/

const palette = {}; // replace {} on this line with the entire palette object from https://materialpalettes.com/

const arrOfColors = [];

const themeColors = Object.keys(palette).map((key) => {
  Object.keys(palette[key]).forEach((color) => {
    arrOfColors.push({
      name: `${key.toLocaleLowerCase()}-${color}`,
      value: palette[key][color],
    });
  });
});

for (const color of arrOfColors) {
  // console.log(`{ name: "${color.name}", value: "${color.value}" }`);
  colors.Fn("create", { name: color.name, value: color.value });
}

And here is a quick video tutorial to demonstrate how it all works.

2 Likes