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:
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
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) …
1 Like
This lines up nicely with:
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 …
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!