[css-color-5] spell color-mix correctly in examples

Author: svgeesus

css-color-5/Overview.bs

@@ -89,7 +89,7 @@ it applies to all color channels.
 	This example produces a mixture of 40% <span class="swatch" style="--color: peru"></span> peru
 	and 60% <span class="swatch" style="--color: lightgoldenrod"></span> lightgoldenrod.
 
-	<pre class="lang-css">mix-color(peru lightgoldenrod 40%)</pre>
+	<pre class="lang-css">color-mix(peru lightgoldenrod 40%)</pre>
 
 	The mixing is done in ''lch()'' colorspace.
 	Here is a top-down view, looking along the neutral L axis:
@@ -125,7 +125,7 @@ it applies to all color channels.
 	keeps the intermediate colors
 	as saturated as the endpoint colors.
 
-	<pre class="lang-css">mix-color(red yellow 65%);</pre>
+	<pre class="lang-css">color-mix(red yellow 65%);</pre>
 
 	<figure>
 		<img src="images/CH-mixing3.svg" style="width: 50vmin">
@@ -167,7 +167,7 @@ are copied across from the first color.
 	(and thus, 60% of the lightness of the blue).
 	The chroma and hue of the green are used unchanged in the mixed result.
 
-	<pre class="lang-css">mix-color(rgb(0% 42.35% 33.33%) rgb(41.2% 69.88% 96.64%) lightness(40%));</pre>
+	<pre class="lang-css">color-mix(rgb(0% 42.35% 33.33%) rgb(41.2% 69.88% 96.64%) lightness(40%));</pre>
 
 	The calculation is as follows:
 	  * <span class="swatch" style="--color: rgb(0% 42.35% 33.33%)"></span> rgb(0% 42.35% 33.33%) is lch(40.083% 32.808 171.175)
@@ -185,7 +185,7 @@ are copied across from the first color.
 	(and thus, 24.77% of that of the blue).
 	The chroma and lightness of the red are left unchanged.
 
-	<pre class="lang-css">mix-color(lch(52% 58.1 22.7) lch(56% 49.1 257.1) hue(75.23%));</pre>
+	<pre class="lang-css">color-mix(lch(52% 58.1 22.7) lch(56% 49.1 257.1) hue(75.23%));</pre>
 
 	<figure>
 		<img src="images/CH-mixing2.svg" style="width: 50vmin">
@@ -219,7 +219,7 @@ Issue(#4735): <a href="https://github.com/w3c/csswg-drafts/issues/4735">When mix
 	This time, the lightness is set to 68.4% and
 	the chroma is left unchanged.
 
-	<pre class="lang-css">mix-color(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) hue(75.23%) lightness(68.4%));</pre>
+	<pre class="lang-css">color-mix(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) hue(75.23%) lightness(68.4%));</pre>
 
 	The calculation is as follows:
 	  * <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lch(52% 58.1 22.7)
@@ -235,7 +235,7 @@ Issue(#4735): <a href="https://github.com/w3c/csswg-drafts/issues/4735">When mix
 	<!-- showing out of gamut colors next -->
 
 
-<!-- <img src="images/mix_red_white_lightness50.png" alt="Result of mix-color(red, white, lightness(50%)" /> -->
+<!-- <img src="images/mix_red_white_lightness50.png" alt="Result of color-mix(red, white, lightness(50%)" /> -->
 
 <div class="example">
 	This example produces the mixture of red and yellow,
@@ -244,7 +244,7 @@ Issue(#4735): <a href="https://github.com/w3c/csswg-drafts/issues/4735">When mix
 	(and thus, 70% of the lightness of yellow).
 	The chroma and hue of red are left unchanged.
 
-	<pre class="lang-css">mix-color(red yellow lightness(30%));</pre>
+	<pre class="lang-css">color-mix(red yellow lightness(30%));</pre>
 
 	The calculation is as follows:
 	  * sRGB <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)
@@ -259,13 +259,13 @@ Issue(#4735): <a href="https://github.com/w3c/csswg-drafts/issues/4735">When mix
 </div>
 
 <!--
-<img src="images/mix_red_yellow_lightness30.png" alt="Result of mix-color(red, yellow, lightness(30%)" />
+<img src="images/mix_red_yellow_lightness30.png" alt="Result of color-mix(red, yellow, lightness(30%)" />
  this image incorrectly shows red and yellow to be outside gamut as well, which is confusing.
      it also shows the result color after per-component clipping, which is not desirable -->
 
 
 <!--
-<img src="images/mix_red_yellow_65.png" alt="Result of mix-color(red, yellow, 65%" /> -->
+<img src="images/mix_red_yellow_65.png" alt="Result of color-mix(red, yellow, 65%" /> -->
 
 <!-- todo: example that specifies a different colorspace -->
 
@@ -311,7 +311,7 @@ which is rgb(52.446% 45.821% 62.953%)
 	because interpolation is in a stright line on the <em>a,b</em> plane
 	and can thus pass close to the central, neutral axis.
 
-	<pre class="lang-css">mix-color(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) lab() a(38%) b(38%));</pre>
+	<pre class="lang-css">color-mix(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) lab() a(38%) b(38%));</pre>
 
 	<!-- is that right, lab() or lab ? -->