After bug 1695376, we parse functions like color-mix(red 10%, blue 90%) or such, but devtools doesn't recognize it (it might want to show a color picker for each of the colors like it does for e.g. gradients, IIRC) nor autocompletes the color-mix function.

It probably should.

Note that the syntax changed a bit, e.g. color: color-mix(in srgb, red 50%, blue)

You can still reproduce the issue by going to: data:text/html,%3Cmeta charset=utf8%3E%3Cstyle%3Eh1 %7B color: color-mix(in srgb, red 50%25, blue); %7D%3C/style%3E%3Ch1%3EHello%3C/h1%3E

Adding color-mix to https://searchfox.org/mozilla-central/rev/3e1a721bce1da3ae04675539b39a4e95b25a046d/devtools/client/shared/output-parser.js#46-58 seems to be enough to show the color swatch.
There's an odd thing though; we show the contrast in the swatch, but it's based on the color being edited, not the resulting color of color-mix, so it gives erroneous result.

For the autocompletion, color-mix isn't added alongside the other available color functions (see https://searchfox.org/mozilla-central/rev/3e1a721bce1da3ae04675539b39a4e95b25a046d/devtools/shared/css/generated/properties-db.js#3751-3764). I think that is is generated from a python script, I need to check if this information is available or not.

InspectorUtils.getCSSValuesForProperty("color") doesn't return color-mix
I tried to look into it but quickly got lost in Stylo.
Emilio, do we need what we need to do get color-mix in the returned array ?

Just add to this: https://searchfox.org/mozilla-central/rev/f816e52d85cdaf0be7c9e1d2297f833e9ef53e2e/servo/components/style/values/specified/color.rs#717-731

This is done by adding color-mix to COLOR_TAKING_FUNCTIONS.
Test case is added, alongside with cases for other functions in which we
should show color swatches.

Thanks for filing the autocomplete bug Emilio

https://hg.mozilla.org/mozilla-central/rev/f51d8d6f071b