Document how to use palette-mix() and its browser support

[foolip]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/font-palette

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/CSS/font-palette#formal_syntax

What information was incorrect, unhelpful, or incomplete?

The palette-mix() function is mentioned in the syntax, but not how to use it.

What did you expect to see?

Documentation that palette-mix() is used for animations of the font-palette property, defining a mix of two palettes in some interpolation color space.

Do you have any supporting links, references, or citations?

https://chromestatus.com/feature/5177171439517696

[foolip]

I'm adding this to BCD in https://github.com/mdn/browser-compat-data/pull/22242.

[chrisdavidmills]

Hi @foolip! There seems to be a bit of confusion here, which I'm hoping to clear up as I start to work on content for this.

https://chromestatus.com/feature/5177171439517696 refers to animating font-palette, yes, but it doesn't mention palette-mix() at all. And if you look at the animation example just below https://drafts.csswg.org/css-fonts/#typedef-font-palette-palette-mix, it animates smoothly between two values of font-palette.

palette-mix() seems to be something different — a way to create a new palette by mixing two other palettes. It seems to work in chrome Canary. I got the following to work:

    @import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');

    @font-palette-values --pink {
      font-family: Nabla;
      base-palette: 1;
    }

    @font-palette-values --yellow {
      font-family: Nabla;
      base-palette: 7;
    }

    p {
      font-family: "Nabla";
      font-size: 5rem;
      text-align: center;
      font-palette: palette-mix(in lch, --pink, --yellow);
    }

Do you know if there is a separate ChromeStatus entry for palette-mix()?

[foolip]

There's no separate entry for palette-mix() because it was implemented and shipped as part of animating font-palette. It's true that it can be used without animation, but the reason it had to be added was to represent the computed style during a transition/animation. That's because there's an indirection through palette name, and it's not possible to inline a full palette into the font-palette value.

cc @tursunova who implemented this and @drott who reviewed.

[chrisdavidmills]

There's no separate entry for palette-mix() because it was implemented and shipped as part of animating font-palette. It's true that it can be used without animation, but the reason it had to be added was to represent the computed style during a transition/animation. That's because there's an indirection through palette name, and it's not possible to inline a full palette into the font-palette value.

Ah, OK, makes sense — thanks for the explanation @foolip. The reliance of animating font-palette on palette-mix() seems like an implementation detail to me that probably doesn't need too much expanding on in the docs, so I'll treat them separately for now as document this one.

I've got this partially done at https://github.com/mdn/content/pull/32379, and I'll finish it today. Would would be best to ask for a tech review of this work?

[foolip]

@chrisdavidmills do you typically get tech review from an implementer?

[chrisdavidmills]

@chrisdavidmills do you typically get tech review from an implementer?

@foolip usually, yes. We then follow it up with an editorial review from another MDN editor. So, the tech review doesn't need to worry about language/grammar, except of course when it is causing the explanation to be wrong.

The content PR at https://github.com/mdn/content/pull/32379 is now finished and ready for tech review, FYI.

[foolip]

@chrisdavidmills cool, just checking to make sure. Having implemented it in Chromium, @tursunova is a good reviewer for animating font-palette.

[chrisdavidmills]

@chrisdavidmills cool, just checking to make sure. Having implemented it in Chromium, @tursunova is a good reviewer for animating font-palette.

Great stuff! There are page live previews at https://github.com/mdn/content/pull/32379#issuecomment-1957709699 to make the reviewing easier. GitHub comments is just fine. The editorial reviewer already jumped in and made their review, but it'd be great if you could also have a read-through and see if anything sounds wrong from a pure technical perspective.