[csswg-drafts] [css-values-5] `*-mix(<progress>, ...)` notation with more than 2 values (#11530)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-5] `*-mix(<progress>, ...)` notation with more than 2 values ==
A common need in design systems is to get a value based on its position in a list. E.g. get the lightest color tint, or the smallest font-size etc.

In [css-values-5](https://drafts.csswg.org/css-values-5/#mixing) we define `*-mix()` functions (`calc-mix()`, `color-mix()` etc) that **interpolate** rather than mix, i.e. 0% gets you the first color and 100% the second one instead of the way around which is how the mixing version works.

This means they do not actually need to be limited to two arguments!
All we need to solve a lot of the use cases that motivated #10034 and a **host** more is to convert the grammars of these mix functions from:

```
<calc-mix()> = calc-mix( <progress>, <calc-sum>, <calc-sum> )
<color-mix()> =
  color-mix( [ <progress> && <color-interpolation-method>? ] , <color>, <color> ) |
  color-mix( <color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2} )
```

to

```
<calc-mix()> = calc-mix( <progress>, <calc-sum># )
<color-mix()> =
  color-mix( [ <progress> && <color-interpolation-method>? ] , <color># ) |
  color-mix( <color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2} )
```

And similarly for `cross-fade()` and `transform-mix()` though I haven't found use cases for these.

Yes, it can be emulated with the 2-value `*-mix()`, but the code to do it is [abysmal](https://noahliebman.net/2024/04/recursion-in-the-stylesheet/) and its complexity increases quadratically with the number of values.

This is a change that only very slightly increases implementation effort for these functions, and would save authors a ton of pain, so it seems like a no-brainer to me.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11530 using your GitHub account


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

Received on Saturday, 18 January 2025 21:17:46 UTC