Choose color output format for CSS

[lukasoppermann]

Summary

I would love to be able to choose the color output format for my css file, from a few options, maybe hex, rgb and hsl.

Proposal & prior art

Add an option to the css plugin config like outputFormat: hex and if it is set convert all input colors to this output format. If not set, it could work the way it works now.

Extra

• I’m willing to open a PR (see CONTRIBUTING.md)

[drwpow]

This is a reasonable suggestion. Since Apple devices now support 30bit+ colors, I do want to preserve the default deep color behavior where Terrazzo will never degrade color quality (assuming the tokens are generated in a design program etc).

But it’d be trivial to support any web-supported output. We could support any CSS Color Module 4 as output

[drwpow]

Minor update: still considering adding an output option to the roadmap! But for the 2.0 release (currently @terrazzo/plugin-css@alpha), we switched to Color.js which vastly improves the output:

- --base-color-blue-0: color(srgb 0.8666666666666667 0.9568627450980393 1);
+ --base-color-blue-0: rgb(86.667% 95.686% 100%);

We also preserve the original color spaces the tokens are defined in better than we had been doing.

Still open to adding an output option, just need to look into if there are any scenarios where converting between colors would cause incorrect output and how to navigate that (such as hex “snapping” to 8 bits per channel and colors not matching designs).