Add support for colour variations

Adding global colours is very smooth and elegant with Cwicly and has improved significantly.

There is one aspect that is missing, which is built-in support for colour variations for a chosen global colour.

Often designers we work with will express colours in a spectrum (e.g. Red100, Red200, …, Red900).

Adding these as individual global colours is not feasible from a UX standpoint.

Having the ability to add a base colour and automatically create variations for it that you can select from the colour picker adds tremendous value.



Following on from all of the recent discussions on global variables and most recently @yankiara’s post regarding HSL variables, it will be great if Cwicly also creates global variables for the variations in this feature request, as that will allow us to use them throughout the site css as well as in the editor/inspector.

This is really great! We are currently test driving it :smiley:

One question: How do you switch between each global colour’s different dynamically generated variations? - currently it seems to be “stuck” on the first global colour, regardless of what is selected - I am assuming it’s just something I am missing:

Screenshot 2023-10-24 at 19.58.22

Strange, I seem to be able to view all palettes:

Yes, after a quick review of the options, it’s clear that you must switch on the palette for each global colour you want it to appear for:

Screenshot 2023-10-24 at 20.11.09

Oh, yeah :stuck_out_tongue: It’ll only add the base colour by default. Any other variations you need to turn on.

Absolutely awesome implementation - very full featured! It does exactly what we need to work seamlessly with high level designs/designers - This can be marked done


Hi @StrangeTech,

Thank you for pointing this out, and your kind words :slight_smile:

Indeed, colour variations are now supported in 1.3.2 with the 11-Point colour palette generator.

Adding to done.