Re: [csswg-drafts] [css-color-5] More clarity around the percentage in color-mix() (#6064)

The CSS Working Group just discussed `More clarity around the percentage in color-mix()`, and agreed to the following:

* `RESOLVED: color-mix(<metadata>, <color-option>#{2}), where <color-option> = <color> && <percentage>?`

<details><summary>The full IRC log of that discussion</summary>
&lt;Rossen_> Topic: More clarity around the percentage in color-mix()<br>
&lt;Rossen_> github: https://github.com/w3c/csswg-drafts/issues/6064<br>
&lt;TabAtkins> gradients use "to" because it disambiguates whether the gradient comes *from* that direction or goes *to* that direction (and we flipped back and forth during dev, so there's no obvious answer).<br>
&lt;fantasai> miriam: In the middle space, single percentage value, and spec was conflicted on what that refers to<br>
&lt;fantasai> miriam: is it percentage color, or distance to second color<br>
&lt;chris> q+<br>
&lt;fantasai> miriam: or percentage of second color<br>
&lt;fantasai> miriam: spec disagreed with itself<br>
&lt;TabAtkins> gradients use "at" to separate the &lt;position> from the possibly-preceding &lt;length>{1,2}<br>
&lt;fantasai> miriam: with commas, would be nice to do percentage in either color<br>
&lt;leaverou> note: the spec has since been fixed and does not disagree with itself anymore :)<br>
&lt;fantasai> miriam: so if you put in first color refers to weight of that color, second is weight of second color<br>
&lt;Rossen_> q?<br>
&lt;leaverou> q+<br>
&lt;fantasai> miriam: would have to decide what to do if 2 percentages are specified<br>
&lt;fantasai> miriam: SASS functions confusing as well, never clear to me which the percent refers to<br>
&lt;TabAtkins> q+<br>
&lt;Rossen_> ack chris<br>
&lt;fantasai> chris: My understanding was % is % of that color, and all examples (there were more examples before)<br>
&lt;fantasai> chris: there was just one sentence that was off, and Adam fixed ti<br>
&lt;fantasai> chris: Seems clear it's a % of that color, not along a blend between the two colors<br>
&lt;fantasai> chris: the color that it's next to<br>
&lt;fantasai> leaverou: mixing paints, makes sense % of first color<br>
&lt;fantasai> chris: ... that's confusign<br>
&lt;fantasai> chris: if % don't add up, scale to add to 100%<br>
&lt;fantasai> chris: does that make sense?<br>
&lt;fantasai> miriam: So % goes with a color between the commas, that makes sense to me<br>
&lt;fantasai> miriam: so % can be applied to either color, and can put it in one or both<br>
&lt;fantasai> leaverou: Should allow for ...<br>
&lt;fantasai> leaverou: and scale accordingly<br>
&lt;fantasai> chris: Have that in HWB, if too high scale it back<br>
&lt;Rossen_> ack leaverou<br>
&lt;fantasai> TabAtkins: I think whichever syntax we go with, should be consistent between color-mix() and cross-fade()<br>
&lt;fantasai> +1<br>
&lt;fantasai> TabAtkins: cross-fade() matches up with what miriam suggests<br>
&lt;fantasai> TabAtkins: can add % with any of the images<br>
&lt;fantasai> TabAtkins: whichever one, if omitted, it's just 100% - [sum]<br>
&lt;fantasai> TabAtkins: if don't add up to 100%, we fill in the remainder with a transparent image<br>
&lt;Rossen_> ack TabAtkins<br>
&lt;fantasai> TabAtkins: idk if we want to do with colors<br>
&lt;chris> prefer a rebalance like HWB<br>
&lt;fantasai> leaverou: 3-way mixes are confusing, too many ways to do it<br>
&lt;fantasai> TabAtkins: I agree with reasoning for not doing 3-color mixes, but adding in transparency doesn't suffer from same confusion issues<br>
&lt;fantasai> TabAtkins: not strong on either, but greater consistency with cross-fade() would be good<br>
&lt;Rossen_> q?<br>
&lt;TabAtkins> chris, note that HWB does *not* rebalance for &lt;100% sum<br>
&lt;TabAtkins> there it takes the remainder from the pure hue<br>
&lt;TabAtkins> >100% causing rescaling is uncontroversial and common between all the functions, yes<br>
&lt;leaverou> q+<br>
&lt;fantasai> Rossen_: Can someone summarize the proposed resolution?<br>
&lt;fantasai> leaverou: Before we summarize, one last point<br>
&lt;TabAtkins> Proposed new grammar: color-mix(&lt;metadata>, &lt;color-option>#{2}), where &lt;color-option> = &lt;color> &amp;&amp; &lt;percentage>?<br>
&lt;fantasai> leaverou: if we handle percentages &lt; 100% by mixing with transparent, it has special interpolation handling so [????]<br>
&lt;leaverou> s/[????]/we don't want to do that/<br>
&lt;chris> q+ for the negative percentages<br>
&lt;fantasai> TabAtkins: Ignoring the &lt; 100% sum and take it to the issue, think we can resolve on the rest<br>
&lt;argyle> `color-mix(in lch red 80%, blue)` also `color-mix(in lch, red, blue 80%)`<br>
&lt;argyle> `color-mix(in lch, red 80%, blue)` also `color-mix(in lch, red, blue 80%)`<br>
&lt;fantasai> TabAtkins: proposal above<br>
&lt;fantasai> TabAtkins: if above 100%, rescale to add to 100%<br>
&lt;TabAtkins> if below 100%, figure out in issue<br>
&lt;fantasai> Rossen_: any objections?<br>
&lt;fantasai> RESOLVED: color-mix(&lt;metadata>, &lt;color-option>#{2}), where &lt;color-option> = &lt;color> &amp;&amp; &lt;percentage>?<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6064#issuecomment-790197866 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 4 March 2021 00:56:12 UTC