HSL variables system for automatic relative shades and transparency

Feature Requests
1

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) without having to manually choose the right color/transparency in the color picker or look for HSL values and hardcode custom variables.

To go a bit further, declaring hue/saturation variables could also allow direct shades:

:root {
    --cc-color-1-hs: <color-1-hue> <color-1-saturation>;
    -- etc....
}

Then for instance use hsl(var(--cc-color-1-hs) 10%) for a very dark shade.

Currently I use SCSS to generate all this, but I think Cwicly could do it for me without affecting backward compatibility, since it is just adding new variables.

It could of course be conditionned by a global setting to avoid useless bloat if not used :wink:

To go even further, I sometimes declare these variables:

:root {
    --brand-hue: ...
    --brand-saturation: ...
    --brand-lightness: ...
}

Then, I can automatically derive colors from the main color, for instance for complementary color: calc(var(--brand-hue) + 180deg).

I agree that for most websites, this last improvement is useless or at least overated, but again, a global option could condition this for advanced color automations.

2

Hi there,

I’m bumping this because as I’m using Cwicly more and more, it feels really awkward for me and my clients not to be able to use global colors and having to use some SCSS stylesheet for this.

Is this something that could be considered?
Or maybe an alternate system, anyone?

I really wish we could easily and dynamically derivate shades and transparencies from base colors.

Note: Implementing this other feature could be a nice complement.

3

I agree: