[css-fonts-4] Animating palettes (#9282)

* [css-fonts-4] Font-palette palette-mix() function

Describe modified font-palette syntax and rules for interpolation
and percentage normalization referencing the CSS Color spec.

* [css-fonts-4] Add animated Nabla example

Demonstrates animation of font-palette.

* [css-fonts-4] Refine font-palette computed value

Author: drott

css-fonts-4/Overview.bs

@@ -6963,13 +6963,14 @@ as well as the colored versions.
 
 <pre class="propdef">
 Name: font-palette
-Value: normal | light | dark | <<palette-identifier>>
+Value: normal | light | dark | <<palette-identifier>> | <<palette-mix()>>
 Initial: normal
 Applies to: all elements and text
 Inherited: yes
 Percentages: N/a
-Computed value: specified keyword or identifier
-Animation type: discrete
+Computed value: specified keyword, identifier or <<palette-mix()>> function.
+    <<palette-mix>> must be simplified to a single keyword or identifier if resulting palette is equivalent.
+Animation type: by computed value
 </pre>
 
 <wpt>
@@ -7022,6 +7023,12 @@ Animation type: discrete
 	parsing/font-palette-valid.html
 </wpt>
 
+With the <code>palette-mix()</code> function defined as follows:
+
+<pre class="prod def" nohighlight>
+<dfn>palette-mix()</dfn> = palette-mix(<<color-interpolation-method>> , [ [normal | light | dark | <<palette-identifier>> | <<palette-mix()>> ] && <<percentage [0,100]>>? ]#{2})
+</pre>
+
 <dl dfn-for=font-palette dfn-type=value>
 	<dt><dfn>normal</dfn>
 	<dd>
@@ -7073,6 +7080,25 @@ Animation type: discrete
 	    be a modification of an existing palette already present in the font,
 	    or be an entirely new palette.
 
+	<dt><dfn type><<palette-mix()>></dfn>
+	<dd>
+        This value defines a position in the interpolation between two palette values,
+        identified by <<palette-identifier>>, by the palette keywords
+        ''font-palette/normal'', ''font-palette/light'', ''font-palette/dark'',
+        or by another <<palette-mix()>> value.
+
+        The glyphs of the font must be rendered with a palette that is created by
+        interpolating for each palette color index between the matching color indices
+        of the first and second palette specified as arguments,
+        recursively resolving <<palette-mix()>> functions if needed.
+
+        For each palette color, the interpolation follows
+        the rules of the <<color-mix()>> function.
+
+        When not specified otherwise the <<color-interpolation-method>> is
+        <code>in ''oklab''</code> as recommended by [[css-color-5#interpolation-space]].
+
+        Percentages are normalized according to [[css-color-5#color-mix-percent-norm]].
 </dl>
 
 Note: The names 'light' and 'dark' describe the <i>background</i> the color palette is usable on,
@@ -7083,7 +7109,39 @@ Note: The names 'light' and 'dark' describe the <i>background</i> the color pale
 		.banner {font-palette: dark;
 		}
 	}
-	</pre>
+    </pre>
+</div>
+
+<div class="example" id="ex-bixa-palette">
+	Animate between palettes.
+
+    <pre>
+@font-palette-values --pink {
+     font-family: Nabla;
+     base-palette: 1;
+}
+@font-palette-values --yellow {
+     font-family: Nabla;
+     base-palette: 7;
+}
+@keyframes animate-palette {
+    from {
+         font-palette: --yellow;
+    }
+    to {
+         font-palette: --pink;
+    }
+}
+p {
+     font-family: Nabla;
+     animation: animate-palette 1.4s infinite alternate linear;
+}
+    </pre>
+
+	<figure>
+		<img src="images/nabla-animated.webp" alt="The word Animate animated between a pink and a yellow palette."/>
+		<figcaption>Nabla Color by typearture.com - animating between palettes 1 and 7 in the font.</figcaption>
+	</figure>
 </div>