how wouod yout handle thid

[fredrickreuben]

I need a CSS theme for my page builder, I want to have primary color= and secondary colors, default font, etc, how would you approach this

[glaprida]

I have a separate panel, fully custom, has absolutely nothing to do with grapes, where I set some default styles (colors, typography, etc). I save these values into CSS custom properties ( var(--color-primary) and such).

Then, on Grapes StyleManager I have something like this:

{
  property: 'color',
  label:'Color',
  type: 'select',
  defaults: 'inherit',
  list: [
    { value: 'var(--color-primary)', name: 'Primary'},
    { value: 'var(--color-secondary)', name: 'Secondary'},
    { value: 'var(--color-custom)', name: 'Custom'},
  ]
},
{
  extend: 'color',
  label:'Custom color',
  requires: { 'color': ['var(--color-custom)'] },
  property: '--color-custom',
  full: false,
}, 

This shows a select with the 'color presets', and only if you select the option 'custom' it will show a color picker below.

---

FROM HERE ON DOWN IS JUST EXTRA STUFF

Of course you can improve this... instead of showing a plain <select> element, I actually have a 'custom-select' type that actually shows a little square with the color next to its name. That I did with editor.StyleManager.addType().
More here

Also in my case, the user can add more colors to the palette, so I need to update the options in the styleManager. That I did by removing the property and adding it back again (with the updated color list) whenever theres an added or removed color.
Something like this:

editor.StyleManager.removeProperty('Typography', 'Color');//first param is Sector, second is Property
editor.StyleManager.addProperty('Typography', {
    label: 'Color',
    property: 'color',
    type: 'select',
    default: 'inherit',
    list: colorsArray,//my updated color list
  }, { at: 5 });//or whatever index your property is at

More here