Switch to more modern hsl output format

[adrinux]

Instead of

--colorname: hsla(190, 60%, 50%, 0.9);

drop the commas and use a forward slash for the alpha

--colorname: hsla(190 60% 50% / 0.9);

More readable and easier to type.

[adrinux]

This is not well enough supported by browsers as of April 202. Postponed.

[adrinux]

Support is good in 2022 (only old IE lacks support). Removing postponed label.

[adrinux]

I find this it more readable to add deg to degrees when syntax highlighted in an editor and we can drop the a, just use hsl() like:

--colorname: hsl(190deg 60% 50% / 0.9);

Also make this more modular so we can easily change alpha when using the color in rules. Though it's also more verbose.

--colorname-core: 190deg 60% 50%;
--colorname: hsl(var(--colorname-core) / 1);

Or perhaps by setting a default alpha and changing that as needed.

--alpha: 1;
--colorname: hsl(190deg 60% 50% / var(--alpha);

Need to check css docs, but I think this can then be altered when applying:

div {
  --alpha: 0.75;
  background-color: var(--colorname);
}