[css-color-5] make examples match syntax, close w3c#5258

Author: svgeesus

css-color-5/Overview.bs

@@ -164,7 +164,7 @@ If no keyword is specified, it is as if ''shorter'' were specified.
 	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">color-mix(peru lightgoldenrod 40%)</pre>
+	<pre class="lang-css">color-mix(peru  40%, lightgoldenrod)</pre>
 
 	The mixing is done in ''lch()'' colorspace.
 	Here is a top-down view, looking along the neutral L axis:
@@ -200,7 +200,7 @@ If no keyword is specified, it is as if ''shorter'' were specified.
 	keeps the intermediate colors
 	as saturated as the endpoint colors.
 
-	<pre class="lang-css">color-mix(teal olive 65%);</pre>
+	<pre class="lang-css">color-mix(teal 65%, olive);</pre>
 
 	<figure>
 		<img src="images/CH-mixing3.svg" style="width: 50vmin">
@@ -235,7 +235,7 @@ are copied across from the <em>first</em> 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">color-mix(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%) lightness 40%, rgb(41.2% 69.88% 96.64%));</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)
@@ -254,7 +254,7 @@ are copied across from the <em>first</em> color.
 	The shorter hue arc will be used.
 	The chroma and lightness of the red are left unchanged.
 
-	<pre class="lang-css">color-mix(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) hue 75.23%, lch(56% 49.1 257.1));</pre>
 
 	<figure>
 		<img src="images/CH-mixing2.svg" style="width: 50vmin">
@@ -285,7 +285,7 @@ are copied across from the <em>first</em> color.
 	The longer hue arc has been specified.
 	The chroma and lightness of the red are left unchanged.
 
-	<pre class="lang-css">color-mix(lch(52% 58.1 22.7) lch(56% 49.1 257.1) hue(75.23% longer));</pre>
+	<pre class="lang-css">color-mix(lch(52% 58.1 22.7) hue longer 75.23%, lch(56% 49.1 257.1) );</pre>
 
 	<figure>
 		<img src="images/CH-mixing2b.svg" style="width: 50vmin">
@@ -318,7 +318,7 @@ are copied across from the <em>first</em> color.
 	This time, the lightness is set to 68.4% and
 	the chroma is left unchanged.
 
-	<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>
+	<pre class="lang-css">color-mix(rgb(82.02% 30.21% 35.02%) hue 75.23% lightness 68.4%, rgb(5.64% 55.94% 85.31%) );</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)
@@ -337,7 +337,7 @@ are copied across from the <em>first</em> color.
 	with the mixture being 75.23% of that of the red
 	(and thus, 24.77% of that of the blue).
 
-	<pre class="lang-css">color-mix(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) 75.23% xyz);</pre>
+	<pre class="lang-css">color-mix(xyz rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));</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) which is X=0.3214, Y=0.2014, Z=0.0879.
@@ -356,7 +356,7 @@ are copied across from the <em>first</em> color.
 	(and thus, 70% of the lightness of yellow).
 	The chroma and hue of red are left unchanged.
 
-	<pre class="lang-css">color-mix(red yellow lightness(30%));</pre>
+	<pre class="lang-css">color-mix(red lightness 30%, yellow );</pre>
 
 	The calculation is as follows:
 	  * sRGB <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)
@@ -423,9 +423,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">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 ? -->
+	<pre class="lang-css">color-mix(lab rgb(82.02% 30.21% 35.02%) a 38% b 38%, rgb(5.64% 55.94% 85.31%));</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 lab(52% 53.599 22.421)