Add Groups for Color field's colors

[Michael-Paragonn]

It would be great to be able to add <optgroup>-type groups to the Color field's dropdown list of colors.

I have a site where the HQ and various international offices follow one set of brand colors, but for various (legal?) reasons I'm unfamiliar with, one specific country's national office is more independent than most, and has slightly tweaked their brand colors from the global baseline. As a result, it would be very useful if I could have two groups in the Color field: "Brand Colors" and "[country] Colors".

[brandonkelly]

Not a bad idea, but I’m not sure when we’d get to it.

Alternatively you could create a second Color field, and then use field visibility conditions in your field layout to show/hide them depending on the site being edited.

[Michael-Paragonn]

Alternately, allowing different color presets per-site would also resolve my specific issue in a more direct and "proper" fashion; not sure if that would be more or less useful to the community at large. 🤷‍♂️

EDIT: Adding a second color field won't work in this instance since they've already had all their content migrated over from their previous site, using the existing color field. Not to mention, the color field is reused extensively throughout the various page builder modules, so adding a second field and conditionals for that to be shown conditionally isn't feasible.

For now, the simple solution we came up with is just to add a "-- [country] Colors --" divider color at the bottom of the current colors; that should suffice for the time being. :)

[brandonkelly]

they've already had all their content migrated over from their previous site

Once the new field is created and added to the appropriate entry type(s), you can migrate that color data over to the new field using the resave/entries command.

# set the new field to the original field’s value for entries in `siteHandle`
> php craft resave/entries \
  --with-fields=fieldHandle1,fieldHandle2 \
  --set=fieldHandle2 \
  --to=fieldHandle1 \
  --site=siteHandle

# clear out the original field’s value for entries in `siteHandle`
> php craft resave/entries \
  --with-fields=fieldHandle1,fieldHandle2 \
  --set=fieldHandle1 \
  --to=:empty: \
  --site=siteHandle

Not to mention, the color field is reused extensively throughout the various page builder modules, so adding a second field and conditionals for that to be shown conditionally isn't feasible.

You could create a generated field that consolidates the two hex values, depending on the site, using the template:

{{ site.handle == 'siteHandle' ? fieldHandle2 : fieldHandle1 }}

However you’d loose all of the ColorData niceties in the process.

[Michael-Paragonn]

Thanks for the ideas; if this weren't already such a conglomerate beast of a multi-instance multi-site setup, I might try those, but I'm very reluctant to do anything that would involve database manipulation like that - I've had bad experiences with that sort of thing in the past. ;)

I'm leaning towards a template-level resolution instead. Assuming that the unique colors are all merely slightly tweaked versions of the global brand colors (and thus wouldn't look drastically different to content editors), I could leave them at the global colors in the CP, and then make use of CSS variable fallbacks to show either a variable if defined (which it would only be on the unique site) or the fallback, depending on the site. 🤔

:root {
  --colorFF0000: #fe1214; /* Unique site's "red" */
}

<h1 style="color: var( --color{{ entry.colorField.hex|trim('#') }}, {{ entry.colorField.hex }} );">Heading</h1>