drwpow
Disable gamut media queries in css
Summary
I would love to avoid the gamut media queries in my css output, but I can't find an option. Either it should be documented, or if it does not exist added.
Proposal & prior art
Add an option to the css plugin config like gamut: false (or something better.)
Extra
- [ ] I’m willing to open a PR (see CONTRIBUTING.md)
Thanks for suggesting! I think we can add this.
Just to make sure we’re considering everything, the gamut media queries don’t show up when selecting colors inside sRGB. Is the desire to turn them off from the clamping method being incorrect? Or there not being a need to support sRGB gamut (e.g. only Display P3 device support needed)?
Hey @drwpow,
I may have not understood this correctly. I am worried that my css balloons in size if all colors are multiplied by mode and once without and twice within the gamut media query.
However, if I would choose a different output format once this is implemented https://github.com/terrazzoapp/terrazzo/issues/602 I would not get the gamut media queries, right?
Maybe this would be enough as well.
Actually it should only show up if picking colors outside sRGB gamut regardless of color space. In other words, it’s input, not output. It uses something similar to Culori inGamut. Of course there could be bugs! I think sometimes there are rounding errors if something is right on the edge
Why is the focus on input and not output? I mean, just because I have my colors in hwb does not mean I want to output them in this format, right?
I feel like design tokens are provided in one format, but the transformation layer is where I decide what output I want, rather than having to change all my tokens.
What I am missing here?
Ah if you’re declaring colors originally in HWB then all those should fit into sRGB and the gamut queries shouldn’t be needed! This is likely a bug. I’ll push a fix for that this week; I think we just may not have HWB tests.
But re: input/output, theoretically they should be the same color both in and out, and display the same on all monitors. The gamut queries should only kick in if your colors would be flat-out incorrect on some sRGB devices, in which case we’ll fall back to the hex value in your tokens. So all that to say, the output format shouldn’t be a different color; it should just be formatting, and it’s only the source token in your JSON that matters.
Okay, maybe than we can ignore this issue for now. I will re-open if I run into issues.
I will re-open if I run into issues.
Yes please reopen if you find a bug! The intended behavior is these are never generated unless they’re absolutely necessary. I did test the current CSS plugin, and for HWB colors I am not finding it generating any gamut queries:
Any gamut queries that are generated from any hex, sRGB, HSL, HWB colors and related sRGB spaces should be seen as a bug and we’ll fix it 🙂