A few thoughts on the new color palettes/modifiers

[yankiara]

Hi all,

Another best quality work from the Cwicly team, congratulations

However, after trying to use it in the real world, I mean actually building a site, I have a few remarks that could help improving things.

Of course, it is very related to MY OWN WORKFLOW, so it might differ for you, but well, I’d love to hear your thoughts as well

1. PALETTES in global color list

So, in my opinion palettes shouldn’t be part of the global colors list as is, but only a helper in the modifier tab, which would act as a shortcut to quickly choose a shade modifier. Like modifier presets.

We never need 10 shades of the same color. I usually use 1 or 2 shades, and I don’t want to see 10 shades displayed in the color picker, since I’ll have to remember which shade I use all the time.

So I would only display base colors and modifier colors in the global list, and display palettes in the modifier tab as a helper tool, which would automatically fill the luminosity field of the modifier.

NOTE: This is purely from the point of view of a webdesigner, but maybe for people who build only one personal site, the whole palette is OK, so maybe just adding a palette generator in the modifier tab so that we can quickly define modifiers from shades would be OK?

2. PALETTE and MODIFIERS CSS variables

First, with a few base colors with activated palettes, there will dozens of CSS variables declared for nothing, since I only use 1 or 2 shades.

But most importantly, I usually use the same semantic names for my colors CSS variables, like c-brand, c-brand-dark, c-brand-extra-light, c-accent, c-link, so that I can use my CSS framework on all my sites.
So the palettes generated CSS variables can’t work for me.

Same problem with generated variables for modifiers (well this one is even worse, since variable name changes with the value: Allow fixed CSS variables names for global color modifiers).

Of course I could use intermediary CSS like c-brand-dark: var(--c-brand-###), but in the end I would love to:

• only declare the shades I use instead of the whole palette;
• directly and manually define the right names for each variation (which would be modifiers).

3. MODIFIERS

Since modifiers are the way to go for me, I have created a few feature requests to improve them:

Allow fixed CSS variables names for global color modifiers

Hi, I know I’m always asking more, but to me, color modifiers CSS variables are unusable as is because the variable name changes according to the variation value: [image] So we can’t adjust the value later without affecting the variable name. For instance, if I edit the modifier value here, background is lost since the variable is not updated: [image] I think we could use a field to set a custom slug added to the source global color name, so that any future adjustment doesn’t change the v…

Allow all H/S/L parameters adjustments at the same time for global color modifiers

Hi, The new global color modifiers are interesting, but too limited to be used in the real world. We should be able to create a color variation using adjustments of the three HSL parameters (hue, luminosity and saturation), and not only one. For instance, when creating a lighter or darker variation of a color, we usually need to adjust hue and saturation a bit too keep the color harmonious with the others, else they usually look a bit “off”.

Add light/dark variation to global color modifiers

Hi, Global colors can have light & dark definitions, but color modifiers can’t, so they can’t be used in a light/dark mode context. We should be able to define a different modifier for both light and dark color variations. For instance, a darker text in light mode should be a lighter text in dark mode, maybe with saturation variation, so the modifier can’t have the same definition in light or dark mode.

Move global color modifiers to global color list

Hi, Global color modifiers look very awkward to me. I wish they were displayed in the swatch list, so they have the same appearance as other colors and that I could organize all colors, including modifiers. [image]

CONCLUSION

Color systems in builder are the most basic tool but are always clumsy!
I think Cwicly can reach the Graal soon with its always-solid implementations.
Then all other builders and addons can RIP

What are your thoughts about this?
As a beginner, as a one-shot but experienced user, as a webdesigner?

[StrangeTech]

@yankiara

We never need 10 shades of the same color. I usually use 1 or 2 shades, and I don’t want to see 10 shades displayed in the color picker, since I’ll have to remember which shade I use all the time.

We use it in exactly the way it has been implemented as many of the designers we work with use this methodology in their workflows (e.g. in Figma). The 11 point palette is perfect for us in that respect, although I acknowledge that there can be more integration between it and modifiers to give more freedom.

[Marjan]

Well, honestly, I was quite happy with the old colour system, until today.

But this new one, is just awesome! I reckon that for someone with a little bit of knowledge, imagination and taste, it opens a world of endless possibilities and combinations, yet quick and simple.
By far superior to any colour system I’ve seen in other builders until now.

Excellent work Cwicly Team!