Generate global color variables with color name

[yankiara]

Hi,

It would be great to have global color variables with their name, instead of (or in addition to, as aliases) the existing color variables (--cc-color-1, etc.).

Like for instance --cc-brand-dark if color name is “Brand dark”.

See also:

Define global colors with CSS

Hi all, Currently evaluating Cwicly (coming from O2 and Bricks) Since I use some custom SCSS to generate CSS color variables, I would love the ability to define global colors with these variables: var(--color) hsl(var(--brand-hue) 40% 95%) hsla(var(--color-hsl) / 0.1) etc... It seems it’s possible in blocks color inputs but not in global color definitions.

and

HSL variables system for automatic relative shades and transparency

Hi, Global colors CSS variables are currently declared like this: :root { --cc-color-1: #a91111; --cc-color-2: #ffd166; --cc-color-3: #06d6a0; --cc-color-4: #073b4c; } It would be awesome to have those additionnal variables declared: :root { --cc-color-1-hsl: <color-1-hue> <color-1-saturation> <color-1-lightness>; -- etc.... } This way, we can directly access relative color transparency with this kind of CSS in UI color input fields: hsla(var(--cc-color-1-hsl) / 0.2) …

[StrangeTech]

This lines up nicely with:

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 …

[StrangeTech]

As of Cwicly 1.3.2 we can now specify a variable for each global colour, so this appears to be done .Thank you Cwicly Team!

[StrangeTech]

@Araminta, just highlight another done feature request for your collection!

[yankiara]

Hi,

Indeed colors now have a variable name corresponding to their real name, except in Gutenberg blocks where some internal name still seems to be used:

I wish the same name was used so that we can easily maintain some custom CSS for Gutenberg posts.

For instance I use some CSS to automatically adapt text style when adding color background, but I have to adapt it on each site because of the variable names:

.bg-brand, .has-cc-color-1-background-color {
    background-color: var(--brand);
    color: var(--on-brand);
}
.bg-accent, .has-cc-color-2-background-color {
    background-color: var(--accent);
    color: var(--on-accent);
}
:is(.bg-brand, .has-cc-color-1-background-color, .bg-accent, .has-cc-color-2-background-color) a {
    text-decoration-color: inherit;
}

[LauGau]

Tailwind v4 (release expected in June) should help with that in the future, as I expect / hope that Cwicly will embrace it fully to save theme settings.

https://x.com/adamwathan/status/1758967073516945794?s=20

[yankiara]

Yes but I think it has to be independent from TW, if one doesn’t want to activate it.