[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.
 
 
 Name: font-palette
-Value: normal | light | dark | <>
+Value: normal | light | dark | <> | <>
 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 <> function.
+    <> must be simplified to a single keyword or identifier if resulting palette is equivalent.
+Animation type: by computed value
 
 
 
@@ -7022,6 +7023,12 @@ Animation type: discrete
 	parsing/font-palette-valid.html
 
 
+With the palette-mix() function defined as follows:
+
+
+palette-mix() = palette-mix(<> , [ [normal | light | dark | <> | <> ] && <>? ]#{2})
+
+
 
 	normal
 	
@@ -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.
 
+	<>
+	
+        This value defines a position in the interpolation between two palette values,
+        identified by <>, by the palette keywords
+        ''font-palette/normal'', ''font-palette/light'', ''font-palette/dark'',
+        or by another <> 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 <> functions if needed.
+
+        For each palette color, the interpolation follows
+        the rules of the <> function.
+
+        When not specified otherwise the <> is
+        in ''oklab'' as recommended by [[css-color-5#interpolation-space]].
+
+        Percentages are normalized according to [[css-color-5#color-mix-percent-norm]].
 
 
 Note: The names 'light' and 'dark' describe the background the color palette is usable on,
@@ -7083,7 +7109,39 @@ Note: The names 'light' and 'dark' describe the background the color pale
 		.banner {font-palette: dark;
 		}
 	}
-	
+    
+
+
+
+	Animate between palettes.
+
+    
+@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;
+}
+    
+
+	
+		
+		Nabla Color by typearture.com - animating between palettes 1 and 7 in the font.
+